FLASH活用講座

この節では、実際にアクションスクリプトを使って、マウスをポイントすると画像が入れ替わるFlashコンテンツを作成してみましょう。

1章3節で準備した教材収納フォルダより、｢練習7章.fla｣を開きます。予め、3つの画像が切り替わるアニメーションが作成してあります。

配置されている「いぬ」ボタンに「マウスがポイントしたら１フレーム目にジャンプさせる」アクションスクリプトを設定します。

1.
ステージ上の「いぬ」ボタンをクリックして選択します。

2.
メニューバーの「ウィンドウ」をクリックし、一覧から「アクション」を選択します。

3.
アクションパネルが表示されます。

4.
右側の空白部分に、アクションスクリプトを記述します。

on(rollOver){
　this.gotoAndPlay(1)
}

これは、マウスがポイントしたらこのタイムラインの1フレーム目に行って再生させる、というスクリプトです。

Tips
アクションスクリプトの記載
アクションスクリプトは全て半角英数字で書くことが前提です。また、大文字・小文字の判断もされますので、注意が必要です。

Tips.
コマンドリスト
アクションパネルの左側にはコマンドのリストが表示されています。目的順に追っていくと目的の関数やスクリプトが選択できるようになっています。選択すると、自動的に記述されますので便利です。

Tips
アクションパネルの開閉
アクションパネルは、左上の▲をクリックすることで、自由に閉じたり開いたりできます。ステージ上の作業のときは閉じておきましょう。

同じように、「ねこ」ボタンには11フレームにジャンプするアクションを、「うさぎ」ボタンには21フレームにジャンプするアクションを設定します。

5.
ステージ上の「ねこ」ボタンをクリックして選択します。

6.
アクションパネルの右側の空白部分に、アクションスクリプトを記述します。

on(rollOver){
　this.gotoAndPlay(11)
}

これは、マウスがポイントしたらこのタイムラインの11フレーム目に行って再生させる、というスクリプトです。

7.
ステージ上の「うさぎ」ボタンをクリックして選択します。

8.
アクションパネルの右側の空白部分に、アクションスクリプトを記述します。

on(rollOver){
　this.gotoAndPlay(21)
}

これは、マウスがポイントしたらこのタイムラインの21フレーム目に行って再生させる、というスクリプトです。

9.
これで、ボタンのアクションスクリプト設定が完了しました。

次に、タイムライン上のフレームに、ライムラインを制御するアクションスクリプトを設定します。

10.
「写真」レイヤーの10フレームをクリックして選択ます。

11.
メニューバーの「挿入」から「タイムライン」をポイントし、一覧から「キーフレーム」を選択します。

12.
10フレームが選択されていることを確認し、アクションパネルを開いて以下のように記述します。

this.stop();

これは、このフレームまで来たらアニメーションを止める、というスクリプトです。

同じように、20フレームと30フレームに同様のアクションスクリプトを設定します。

13.
20フレームを確認し、アクションパネルを開いて以下のように記述します。

this.stop();

これは、このフレームまで来たらアニメーションを止める、というスクリプトです。

14.
30フレームを確認し、アクションパネルを開いて以下のように記述します。

this.stop();

これは、このフレームまで来たらアニメーションを止める、というスクリプトです。

15.
これで、アクションスクリプトを使ったコンテンツが完成しました。メニューバーの「制御」の一覧から「ムービープレビュー」を選択して、確認してみましょう。

プレビューが完了したら、作成したFLASHを保存しておきましょう。

完成FLASH