Flash Professional入門第3回：ムービークリップを使ったアニメーションの“入れ子”

Flash Professional入門

Flash Professionalには、「ムービークリップ」という機能があります。ムービークリップを利用すれば、一連のアニメーション情報を持つオブジェクトを作成でき、それを「入れ子」（アニメーションしているものに対して、さらに別のアニメーションをさせる）にして複雑なアニメーションを作成できます。

Flash Professional CC の体験版をダウンロードサンプルファイルをダウンロード

ムービークリップを作成する

「ムービークリップ」とは、一連のアニメーションを「ムービークリップシンボル（以下、『シンボル』）」として登録し、1つのオブジェクト単位として扱えるようにする機能です。シンボルは、ステージに張り付けてグラフィックやアニメーションの一部として利用でき、何度でも使うことができます。

例として、「その場で足踏みするヒツジのアニメーション」をシンボルとして作成してみましょう。シンボルを新規作成するには、主に2つの方法があります。

メニューから、［挿入］メニュー→［新規シンボル］を選択する方法
ステージ上に描いた絵などを選択し、［修正］→［シンボルに変換］を選択する方法（ショートカットキー：［F8］キー）

どちらの方法でも、［新規シンボルの作成］ダイアログが開くので、［名前］にシンボル名を入力して［OK］ボタンを押します。すると、シンボルが作成され、シンボル独自のアニメーションを編集する「シンボル編集モード」に切り替わります。このとき、ステージ上部の［ナビゲーションバー］に、編集中のシンボルと階層構造が表示されます。

シンボルは独自のタイムラインを持っているので、そこにアニメーションを作成することができます。第2回を参考にフレームアニメーションで「その場で足踏みするヒツジのアニメーション」を作成してみてください。作成後は、［ナビゲーションバー］にある「シーン1」などの上位の階層名の部分をクリックすると、シンボル編集モードから戻ることができます。

図1 新規シンボルを作成して、アニメーションを作ります

シンボルを配置する

作成したシンボルは、［ライブラリ］パネルに登録されます。［ライブラリ］パネルから、ステージ上にシンボルをドラッグ＆ドロップして配置すると、アニメーション情報を持ったオブジェクトとして扱えるようになります。このとき、ステージ上に配置したものを「ムービークリップインスタンス（以降、『インスタンス』）」と呼びます。

1つのシンボルからは、複数のインスタンスを作成することができます。また、個々のインスタンスは、インスタンスごとに大きさの設定や、カラー効果の設定、フィルタのかけ具合などを調整できます。1つのシンボルから複数のインスタンスを作成し、それぞれにちょっとした違いを付けることができるというわけですね。

※なお、Toolkit for CreateJSで書き出す場合には、色味や一部のフィルタ機能は無効になります。

図2 ［ライブラリ］パネルからインスタンスとして3つのヒツジを配置し、大きさやカラーを変更したところ

図2では、1つのシンボルから3つのインスタンスを配置しています。このムービーを書き出すと、3匹のヒツジ（インスタンス）がそれぞれ足踏みアニメーションするムービーとなります。

図3 書き出したムービー。3匹のヒツジ（インスタンス）がそれぞれ足踏みしています

この3つのインスタンスは、同じシンボルから作成されています。［ライブラリ］パネルで元のシンボルをダブルクリックして編集モードに入り、修正を行うと、その内容が3つのインスタンスに同じように反映されます。また、シンボルを編集したい場合には、ステージ上に配置したインスタンスをダブルクリックしても、その場で編集モードに入ることができます。

インスタンスにトゥイーンアニメーションを付ける

ステージ上に配置したインスタンスは、そのままトゥイーン機能でモーションを付けることもできます。今は足踏みをするアニメーションなので、このインスタンスをトゥイーン機能で横方向に動かせば、横向きに歩くアニメーションのできあがりです。トゥイーンの設定方法については、第2回をご覧ください。

図4 3匹のヒツジ（インスタンス）に対して、横に動くトゥイーンアニメーションを設定したところ図5 書き出したムービー。3匹のヒツジ（インスタンス）が、右側から歩いてきて、中央まで来たら足踏みします

※トゥイーンアニメーションを作成する際には、「1つのレイヤーに1つのインスタンスを配置する」というルールで作成しておくと、Toolkit for CreateJSでHTML5コンテンツとして書き出す際にもそのまま書き出し可能です。

スクラブ操作でもインスタンスをアニメーションさせる

タイムラインアニメーションは、タイムラインマーカーをドラッグ（スクラブ操作）することでも、アニメーションの状態を確認することができます。しかし、アニメーション情報を持つインスタンスをトゥイーンアニメーションさせた場合、通常はスクラブ操作をしても、インスタンスは1フレーム目の絵が固定表示されたまま移動します。つまり、図4でいうと、ヒツジが足が止まったままスライドして横移動します。

これを、タイムラインマーカーの位置に沿って、インスタンス内のアニメーションも該当する状態を表示させることができます。インスタンスを選択し、［プロパティ］パネルで［インスタンスのビヘイビアー］を［グラフィック］に、［オプション］を［ループ］に変更します。これでスクラブ時にもインスタンス内のアニメーションを確認できるようになります。ただし、この設定を行うと、インスタンスにカラー効果やフィルタの設定を適用していた場合は、解除されます。

図6 ［プロパティ］パネルで［グラフィック］と［ループ］に変更することで、スクラブ操作時にもインスタンスのアニメーションを確認できるようになります

「細かなアニメーションはムービークリップで作成し、位置や大きさなどの動きはトゥイーンで管理するようにする」という手法は、様々なシーンで活用できますね。

おわりに

また、ムービークリップは階層構造を持たせることも可能です。サンプルでは、「足踏みアニメーションの中に、さらにまばたきアニメーションのムービークリップを入れ込む」という階層構造になっています。このように細かな部分をどんどんムービークリップ化して動きを付けていくと、より一層、一連のアニメーションをまとめて管理しやすくなりますね。

図6 トゥイーンさせたいオブジェクトをムービークリップシンボルに変換します

Flash Professional入門 第3回：ムービークリップを使ったアニメーションの“入れ子”