モーショントゥイーンアニメーションを作ろう

モーショントゥイーンアニメーションとは？

モーショントゥイーンアニメーションとは、動き始めの状態と、動き終わった状態のオブジェクトの位置や形、色等を指定する事で、その中間のアニメーションを自動的にFlash が作ってくれるという、非常に便利な機能です。
フレームアニメーションのように、ひたすら何枚ものイラストを描かなければならない訳でもなく、フレームレートの数値 (1秒間に何枚の絵が切り替わるか) を増やす事で、簡単になめらかな動きのアニメーションを作ることが出来ます。

モーショントゥイーンアニメーションを使用する事で出来る動きには以下のようなものがあります。

そしてこれらの動きを組み合わせたアニメーションなども作成できます。

この章では、モーショントゥイーンを使用してオブジェクトの位置と大きさが変化するアニメーションの説明をしたいと思います。（その他の動きは、次の項目で説明します）
下のFlash アニメーションを見てみましょう。
彼は、忘れてはならない国民的アイドルのレッサーパンダくんです。
私のお気に入りで、カピバラの聖地でもある「長崎バイオパーク」にも、もちろんいます。
このレッサーパンダくんのアニメーションは、モーショントゥイーンのみで制作しています。
前の項目のフレームアニメーションと比べると、データサイズははるかに小さく、制作時間もはるかに短くて済みました。


ダウンロードボタンこのflaファイルをダウンロードする(zip)

それでは、モーショントゥイーンの作成方法を説明したいと思います。
まずはFlash を起動させ、新規ファイルを作成し、フレームアニメーションの時と同じように1フレーム目に得意なイラストを描いてみましょう。
1フレーム目がキーフレームになり、○印から●印に変わりました。
次に、描いたイラストを選択し、右クリックから「シンボルに変換」をクリックし、「グラフィック」として登録しましょう。
この時、シンボルに変換するのを忘れたままモーショントゥイーンを作成してしまっても、自動的に「トゥイーン1、トゥイーン2…」といった名前で「グラフィック」として登録されます。
ただしその場合には、1つのモーショントゥイーンに対して、2つのグラフィックシンボルが作成されてしまうので、必ずモーショントゥイーンを作成する前には、自分でシンボルに変換しておきましょう。

それでは、グラフィックシンボル化したステージ上のオブジェクト（インスタンス）を動かして、アニメーションをスタートさせる位置に配置しましょう。
これでアニメーションのスタート地点のキーフレームは完成です。
次に、アニメーションの終わる地点のフレーム（仮に10フレーム目とします）である10フレーム目を選択し、そこにキーフレームを配置します。
1フレーム目から9フレーム目までと、10フレーム目のみの2箇所に同じイラストが配置され、フレームの色はグレーの状態となっているはずです。
このグレーのフレームは、1フレーム目に配置してあるオブジェクトが、そのまま変化する事無く9フレーム目まで続いているという状態をあらわします。
この状態で、1フレーム目から9フレーム目までの間の適当なフレームを選択し、右クリックから「モーショントゥイーンを作成」をクリックして下さい。
グレーだったフレームが薄紫色に変わり、1フレーム目から10フレーム目をめがけて、矢印が表示されました。
この状態が「モーショントゥイーン」が作成された状態です。
ただし、今のところは1フレーム目と10フレーム目のオブジェクトの位置が同じなので、「再生ヘッド」を動かしてみても何の動きもありません。
では、10フレーム目を選択し、ステージ上のオブジェクトの位置を適当な位置に移動させてみて下さい。
今度は、「再生ヘッド」を動かすと1フレーム目（始点）と10フレーム目（終点）の間を、オブジェクトがなめらかに動いていくのが確認出来ると思います。
おめでとう！これで「モーショントゥイーンアニメーション」が出来ました。
「Enter」キーを押すと、自動でアニメーションが再生され、動きを確認することが出来ます。

さらに、アニメーションに大きさの変化も追加してみましょう。
10フレーム目のオブジェクトを選択後、ツールボックスから「自由変形ツール」を選択し、ステージ上のオブジェクトを拡大、もしくは縮小させたり、斜めに傾けたりしてみましょう。
同じく「再生ヘッド」を動かすと、オブジェクトの大きさが徐々に変化したり、徐々に傾いたりしていくアニメーションが完成している事が確認出来ると思います。

モーショントゥイーンの速度を調整してみよう

モーショントゥイーンの設定を調整して遊んでみましょう。
今度はアニメーションの動きを、より自然な感じにするために「イージング」を設定してみます。
「モーショントゥイーン」の初期設定では、オブジェクトの動きは最初から最後まで同じ速度で移動します。
これでは、重力などにより加速したり減速したりする物の動きを表現する時に不便です。
また、動きにメリハリをつけたいという時もあります。
そこで「イージング」を設定すると、動きが徐々に早くなったり、徐々に遅くなったりするアニメーションを作ることが出来ます。
設定のやり方は簡単で、1フレーム目から9フレーム目までの間の適当なフレームを選択し、「プロパティインスペクタ」を開きます。
「イージング」の欄に直接数値を入力するか、スライダーバーを上下させて数値を決めます。
数値は、「-100」から「100」までの範囲で入力でき、「-100」に近いほど「加速」していき、「100」に近いほど「減速」していきく動きとなります。
大げさな動きにしたい場合は、中途半端な数値は使わず、「-100」か「100」にしましょう。

「モーショントゥイーン」の動きの終わる地点（仮に10フレーム目）のキーフレームを移動させて、「モーショントゥイーン」の動きの速度を調節する事も出来ます。これは、矢印になっている部分のフレーム数を増やしたり減らしたりすればいいわけです。
やり方としては、1フレーム目から9フレーム目までの間の適当なフレームを選択し、「F5」キーを押す毎に1フレームずつフレームが延長されていきます。それと同時にアニメーションの動きはゆっくりになります。
逆に「Shift」キー＋「F5」キーを押す毎に1フレームずつ減っていきます。同時にアニメーションの動きは早くなっていきます。

上記の国民的アイドルの Flash アニメーションは、以上の技を適当に組み合わせて作っています。
オブジェクトを「頭」「体」「右手」「左手」「右足」「左足」「尻尾」「影」の8つのレイヤーに分け、それぞれにモーショントゥイーンを設定している訳です。
ちなみに、1つのレイヤーに対しては、1つのモーショントゥイーンしか設定出来ないので、8つのオブジェクトに別々の動きを設定する場合には、必然的に8つのレイヤーが必要になります。

さぁ、皆さんもぜひ、フレームアニメーションより断然お手軽な「モーショントゥイーンアニメーション」を作って、なめらかな動きを体感してみて下さい。