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

表現力豊かなアニメーション

シンボルはシンボル独自のタイムラインを持ち、メインタイムラインと同様にアニメーションを設定することができます。

ムービークリップシンボルの中に、ムービークリップシンボルを配置するいわゆる「入れ子」の構造を作ることによって、単体で動かすよりもより表現力豊かなアニメーションが実現できます。

今回は入れ子アニメーションの作り方を覚えるために、例として簡単なアニメーションを作っていきます。

▼完成

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

 

作成方法

  1. 新規ファイル(AS 3.0)を開きます。
    [矩形]ツールでステージに適当なサイズの矩形を1つ描画して、ムービークリップシンボルに変換します。作成したムービークリップシンボルのインスタンス名を「s1_mc」とします。
    矩形ツールで、適当なサイズの矩形を描くインスタンス名を「s1_mc」とつける
  2. s1_mcをダブルクリックして、シンボルのタイムラインを表示します。新規にレイヤーを追加して、ステージ上の矩形よりも一回り程小さな矩形を1つ描画します。
    ※カラーを変えるなどするとわかりやすいです。
    小さい矩形を一つ追加する
  3. 描画した矩形をムービークリップシンボルに変換した後、インスタンス名を「s2_mc」とします。
  4. s2_mcが配置してあるレイヤーの1フレームから24フレームにモーショントゥイーンを作成します。もう一方のレイヤーの24フレーム目にフレームを挿入します。
    フレームにモーショントゥイーンを作成
  5. 作成したモーショントゥイーンの24フレーム目を選択して、[プロパティ]パネルで「回転」を1回とします。
    プロパティパネルで回転を「1回」に設定
  6. メインタイムラインに戻ります。
    ※ファイル名付近にある「シーン1」をクリックするとメインタイムラインに戻ります。
    「シーン1」をクリック
  7. 先ほどと同様に、1フレームから24フレームまでモーショントゥイーンを作成します。1フレーム目を選択して、[選択]ツールでs1_mcをステージの左側に配置します。24フレーム目を選択して、[選択]ツールでs1_mcをステージの右側に配置します。
    モーショントゥイーンを作成

ムービープレビューで動作を確認します。

このように、ムービークリップシンボルを入れ子にすることにより、複雑な動きをするアニメーションも簡単に作成することができます。

また、入れ子構造にしたムービークリップシンボルを、ActionScriptで制御する時には階層に注意が必要です。

次回は、入れ子アニメーションをActionScriptで制御する方法をご紹介したいと思います。

次のページは…
入れ子構造(ActionScript編)
関連リンク
伊東 茉奈美 (いとう まなみ)
伊東 茉奈美 (いとう まなみ)
トレーニングプランナー

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

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

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

Flash Beginner's School

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