第20回
ムービークリップシンボルの入れ子構造アニメーションの作り方からActionScript 3.0プログラミングまで、ステップアップで脱初心者
このページに掲載されている内容は、2010年に作成されたものです。
表現力豊かなアニメーション
シンボルはシンボル独自のタイムラインを持ち、メインタイムラインと同様にアニメーションを設定することができます。
ムービークリップシンボルの中に、ムービークリップシンボルを配置するいわゆる「入れ子」の構造を作ることによって、単体で動かすよりもより表現力豊かなアニメーションが実現できます。
今回は入れ子アニメーションの作り方を覚えるために、例として簡単なアニメーションを作っていきます。
▼完成
コンテンツの再生には、最新のAdobe Flash Playerが必要です。アドビ システムズのホームページよりダウンロードのうえ、インストールをお願いします。
作成方法
- 新規ファイル(AS 3.0)を開きます。
[矩形]ツールでステージに適当なサイズの矩形を1つ描画して、ムービークリップシンボルに変換します。作成したムービークリップシンボルのインスタンス名を「s1_mc」とします。
- s1_mcをダブルクリックして、シンボルのタイムラインを表示します。新規にレイヤーを追加して、ステージ上の矩形よりも一回り程小さな矩形を1つ描画します。
※カラーを変えるなどするとわかりやすいです。 - 描画した矩形をムービークリップシンボルに変換した後、インスタンス名を「s2_mc」とします。
- s2_mcが配置してあるレイヤーの1フレームから24フレームにモーショントゥイーンを作成します。もう一方のレイヤーの24フレーム目にフレームを挿入します。
- 作成したモーショントゥイーンの24フレーム目を選択して、[プロパティ]パネルで「回転」を1回とします。
- メインタイムラインに戻ります。
※ファイル名付近にある「シーン1」をクリックするとメインタイムラインに戻ります。
- 先ほどと同様に、1フレームから24フレームまでモーショントゥイーンを作成します。1フレーム目を選択して、[選択]ツールでs1_mcをステージの左側に配置します。24フレーム目を選択して、[選択]ツールでs1_mcをステージの右側に配置します。
ムービープレビューで動作を確認します。
このように、ムービークリップシンボルを入れ子にすることにより、複雑な動きをするアニメーションも簡単に作成することができます。
また、入れ子構造にしたムービークリップシンボルを、ActionScriptで制御する時には階層に注意が必要です。
次回は、入れ子アニメーションをActionScriptで制御する方法をご紹介したいと思います。