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

by 吉岡 梅

Posted on 02-03-2013

連載

Flash Professional入門

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

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

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

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

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

どちらの方法でも、[新規シンボルの作成]ダイアログが開くので、[名前]にシンボル名を入力して[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 トゥイーンさせたいオブジェクトをムービークリップシンボルに変換します

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

Topics: クリエイティブ, UI/UX & Web

Products: