Flash Professional入門 第6回：ActionScriptでアニメーションを制御する
Flash Professional入門
ActionScriptとは、Flashで作成したコンテンツに対して命令を行えるプログラム言語です。ActionScriptを使えば、プロ グラムでアニメーションを作成したり、その動きを制御したりできます。例えば、アニメーションの再生や停止を設定したり、手作業では作成するのが大変な表 現を自動で作成したり、ユーザの操作に反応するインタラクションを取り入れたりできます。
連載の最後として、ActionScriptでアニメーションを制御する方法を紹介します。
Flash Professional CC の体験版をダウンロード サンプルファイルをダウンロード
ActionScriptの2種類の記述方法
Flash Professionalでは、ActionScripを記述する方法として、2種類が用意されています。1つ目は、Flashドキュメント内のキーフ レームに直接記述する方法。2つ目は、プログラム部分のみを別ファイルとして保存する方法です。この2種類の記述方法は併用することも可能です。
タイムラインの再生や停止といった、ちょっとした処理を行いたいのであれば、前者の方法が手軽で便利です。既になんらかの言語でプログラム作成の経験がある場合には、後者の方が書きやすいでしょう。初心者であれば、タイムラインに記述する方法から始めるといいでしょう。
ActionScriptを記述する2種類の方法 記述方法 特徴 タイムラインに記述 タイムライン上のキーフレームに記述します。比較的簡単に記述できます。カスタムクラスは作成できません。 独立した別ファイルに記述 独立した「*.as」ファイルに記述します。「クラス」の概念を使って記述するため、整理整頓した形式で記述できます。その反面、慣れるまではやや煩雑。カスタムクラスを作成できます。
図1 ActionScripを記述する方法として、「タイムラインに記述する形式」と「独立した別ファイルに記述する形式」の2種類があります
ActionScriptを記述してみよう
実際に「タイムラインに記述する形式」で、ActionScriptの記述例をざっと見てみましょう。
コードを実行したいタイムラインの位置にキーフレームを作成する
タイムラインのフレームにActionScriptの命令文（コード）を記述すると、そのフレームが再生されるタイミングで、コードの内容が上から順番に実行されます。
コードは任意のキーフレームに書き込むことができます。どのキーフレームにコードを書いたかを探しやすくするために、専用のレイヤー（サンプルでは「スクリプト」レイヤー）を準備するといいでしょう。
コードを書き込みたいキーフレームを選択し、［ウィンドウ］メニュー→［アクション］を選択、もしくは［F9］キーを押すと、［アクション］パネルが表示されます。この［アクション］パネル内にコードを記述していきます。
図2 コードを実行したいフレームにキーフレームを作成し、［アクション］パネルを開いてコードを記述します
メインのタイムラインの最後のフレームにキーフレームを作成し、ループ再生しないように再生を停止するコードを作成してみます（サンプル：1_タイムラインのコントロール.fla）。
//このタイムラインの再生を停止する this.stop();
ActionScriptでは基本的に、以下の形式でコードを記述します。
操作対象.命令();
上記の例では、コードを記述するタイムラインを指すキーワードである「this」に対して、再生の停止を指示する「stop()」という命令を実行する、という意味になります。このムービーを再生すると、コードを記述したフレームにくると、アニメーションが停止します。
操作の対象を指定する
ステージに配置したインスタンスを操作対象として指定する場合には、あらかじめ「インスタンス名」を付けておきます。
インスタンス名を付けるには、ステージ上のインスタンスを選択し、［プロパティ］パネルの一番上にある［インスタンス名］欄に入力します。すると、コード内でインスタンス名を使って操作対象として指定できるようになります。
図3 コードで操作したいインスタンスには、［プロパティ］パネルでインスタンス名を付けます
例えば、メインのタイムライン上に「sheepA」「sheepB」と名前を付けた2つのインスタンスを配置してあるとします。この時、図4のような4か所に、次のコードを記述します（サンプル：2_インスタンス名の利用.fla）。
図4 1フレーム目／10フレーム目／20フレーム目／30フレーム目の4か所に、次のコードを記述します //1フレーム目のコード sheepA.stop(); sheepB.stop(); //10フレーム目のコード sheepA.play(); //20フレーム目のコード sheepB.play(); //30フレーム目のコード this.stop();
このムービーを再生すると、はじめはsheepAとsheepBは停止状態ですが、10フレーム目にsheepAのタイムラインの再生が開始し、20フレーム目にはsheepBのタイムラインの再生が開始し、30フレーム目にメインのタイムラインの再生が停止します。
ボタンを押したら処理を実行する
ActionScriptの「イベント処理」を利用すると、「ボタンを押したらリプレイする」といったような、ユーザの操作に応じたインタラクションを追加できます。
例えば、図5のように、最終フレームにインスタンス名「replayButton」とした、リプレイ用のボタンのインスタンスを配置したとします（サンプル：3_ボタン処理.fla）。
図5 最終フレームにインスタンス名「replayButton」とした、リプレイ用のボタンのインスタンスを配置します //このタイムラインの再生を止める this.stop(); //リプレイボタン用のイベント処理 //「クリック」時に「関数onClickReplay」を実行する replayButton.addEventListener(MouseEvent.CLICK,onClickReplay); function onClickReplay(e:MouseEvent):void{ this.gotoAndPlay(1); //1 フレーム目から再生（リプレイ） }
イベント処理は、下記の形式で「どの対象に・どんなイベントが起きたときに・どの処理を実行するか」を指定します。
対象.addEventListener(イベントの種類, イベント発生時に実行したい処理);
イベントの種類は「定数」という決まった形で指定し、実行したい処理は「関数」という一連の処理をひとまとめにして扱う仕組みで用意したものを使用するのが一般的です。
ActionScriptでアニメーションを作成する
ActionScriptでは、インスタンスの配置／位置／大きさなどを変更することもできます。また、一定時間ごとに位置や大きさを変更することで、アニメーションを付けることも可能です。
例えば、ActionScriptからインスタンスを生成・配置できるように、［ライブラリ］パネルを使って「Sheep」という「リンケージ名」を付けたムービークリップがあるとします。
図6 ムービークリップに「リンケージ名」を付けます
このとき、次のようにコードを記述すると、X座標（横位置）が「200」、Y座標（縦位置）が「300」の位置にインスタンスを配置できます。
// 「Sheep」のインスタンス生成 var sheep = new Sheep(); // 位置を調整 sheep.x = 200; sheep.y = 300; // ステージに追加 this.addChild(sheep);
また、「ループ処理」などと組み合わせると、手作業では作成することが面倒な、大量のインスタンスを使ったアニメーションを作成することも簡単です（サンプル：4_スクリプトからアニメーション.fla）。
図7 インスタンスの配置や動きもコードから制御できます
さらに、ユーザのマウス操作やキーボード操作に対するイベント処理を作成すると、ユーザの操作に応じて動きに変化の付くアニメーションを作成することもできます（サンプル：5_マウス操作に応じたアニメーション.fla）。
図8 ユーザの操作に応じたアニメーション。マウスを動かすとシャボンが吹き出します。また、舞妓さんがマウスの方向に顔を向けます
このような形でActionScriptを記述し、実行していきます。今回は、簡単に記述・実行できるタイムライン形式でコードを記述しましたが、興味のある方は別ファイルに記述する形式にもチャレンジしてみましょう。
さらに学習したい方へ
ActionScriptを使ったアニメーション作成の概要と、簡単な記述例を紹介しました。ActionScpitは非常に多彩な処理ができるため、そのすべてはとても紹介しきれませんが、興味のある方は、以下のADC記事を足掛かりに学習を進めてみましょう。
ま た、Toolkit for CreateJSを使用して、HTML5 コンテンツとして書き出す場合には、ActionScriptの処理は書き出せません。その代わりに、書き出したコンテンツをJavaScriptで操作 する仕組みである「CreateJS」が用意されています。CreateJSでのコンテンツの作成方法は、以下のADC記事を足掛かりに学習を進めてみま しょう。
■ Flash Professional Toolkit for CreateJS の使用
■ Flash Professional Toolkit for CreateJS のファーストステップガイド
ActionScriptを活用することで、単なる動画ではなく、ユーザの操作に応じて変化するコンテンツや、ゲームやアプリの開発までもできます。最近では、高度な処理を行うためのフレームワークも充実していますので、是非、チャレンジしてみてください。