第21回
ムービークリップシンボルの入れ子構造
(ActionScript編)アニメーションの作り方からActionScript 3.0プログラミングまで、ステップアップで脱初心者

今回は前回作成したムービークリップシンボルの入れ子構造を利用したアニメーションに、ActionScript(アクションスクリプト)を記述して制御をかけていきます。

このアニメーションには、メインタイムラインで
●ステージ上を左から右に移動するアニメーション
ムービークリップシンボル内で
●回転するアニメーション

上記の2つが含まれています。複数のアニメーションに対し、どのように制御をかけていくのかを確認しましょう。

作成方法

  1. 新規にレイヤーを追加して、追加したレイヤーにボタンを配置します。今回は、サンプルライブラリのボタンを利用して作成します。
    [ウィンドウ]メニュー -[サンプルライブラリ]-[ボタン]を選択します。
    [classic buttons]-[play]と[stop]をステージにドラッグします。新規にレイヤーを追加して、追加したレイヤーにボタンを配置
  2. 配置したボタンそれぞれにインスタンス名をつけます。
    • playボタン ⇒ play_btn
    • stopボタン ⇒ stop_btn
  3. 次にActionScriptを記述します。
    新規にレイヤーを追加して、追加したレイヤーの1フレーム目を選択後、アクションパネルを開きます。スクリプトペインに下記内容のスクリプトを記述します。
    play_btn.addEventListener(MouseEvent.CLICK,xPlay);
    stop_btn.addEventListener(MouseEvent.CLICK,xStop);
    
    function xPlay(evt):void{
    	play();  //四角形が左から右へ動くアニメーションを再生
    
    }
    
    function xStop(evt):void{
    	stop();  //四角形が左から右へ動くアニメーションを停止
    }

ムービープレビューで動作を確認してみましょう。

コンテンツの再生には、最新のAdobe Flash Playerが必要です。アドビ システムズのホームページよりダウンロードのうえ、インストールをお願いします。

左から右への動きは制御できますが、内側の回転の動きは制御できていません。上記内容のスクリプトでは、あくまでもメインタイムラインで作成されたアニメーションのみ(今回であれば、四角形が左から右へ動くアニメーション)を制御しているに過ぎません。

では、内側の回転の動きも制御するように、下記の通りスクリプトを書き加えてみましょう。

play_btn.addEventListener(MouseEvent.CLICK,xPlay);
stop_btn.addEventListener(MouseEvent.CLICK,xStop);

function xPlay(evt):void{
	play();
	s1_mc.play();//追記:四角形が回転するアニメーションを再生

}

function xStop(evt):void{
	stop();
	s1_mc.stop();//追記:四角形が回転するアニメーションを停止
}

ムービープレビューで動作を確認してみましょう。

▼完成

コンテンツの再生には、最新のAdobe Flash Playerが必要です。アドビ システムズのホームページよりダウンロードのうえ、インストールをお願いします。

アニメーションが入れ子になっている場合や、メインタイムラインに複数アニメーションが含まれる場合、どのアニメーションに対して制御をかけるのかを示す必要があります。

その場合、インスタンス名+制御内容を記述することによって特定のアニメーションに対して制御をかけることができます。

次のページは…
ActionScript 3.0条件分岐の記述方法(if文編)
関連リンク
伊東 茉奈美 (いとう まなみ)
伊東 茉奈美 (いとう まなみ)
トレーニングプランナー

SATT入社後、m-SchoolでFlashのインストラクターを担当。

トレーニングコースの企画・開発等を経て、現在はトレーニング(企業研修)やeラーニングに関するコンサルティングを担当。

K-1好きは誰にも負けない自信あり。

Flash Beginner's School

RSSフィードで
最新情報を購読