モーション　トゥイーンの作成:Part1

Flashは、放送やWebベースのアニメーション、モバイルデバイスやリッチなインターネットアプリケーションの制作ツールとして、広く利用されています。今までのFlashのアニメーションツールの利用方法はその登場以来、大きな変更はありませんでした。しかし、新しいFlash CS4のモーションモデルでは、大きな進化を遂げています。

モーション　トゥイーンの作成

以前のFlashでアニメーションを作成する際には、二つ目のキーフレームを手動で追加していました。フレームをクリックで選択し、「挿入」メニューから「タイムライン」、「キーフレーム」と進めます。さらに、タイムラインの二つのキーフレーム間で右クリックし、メニューから「モーショントゥイーンを作成」を設定します。二つ目のキーフレームに移動して、オブジェクトをステージ上で動かします。というように簡単なアニメーションを設定するだけでも、いくつかのステップを踏む必要がありました。Flash CS4の新しいモーションモデルはさらに、シンプルでパワフルな機能です。

ステージ上に配置されたオブジェクト上で右クリックします。
ノート:Flash CS4のモーションモデルは、従来のタイムラインベースとは異なり、オブジェクトをベースとします。
表示されたメニューから、「モーショントゥイーンを作成」を選択します。
図 1: モーショントゥイーンを作成
「修正」メニューから「ドキュメント」を選択します。フレームレートを確認すると、24フレームとなっていることがわかります。このフレームレートはここで修正することができます。
ノート: ここでは、24フレーム分のモーションが作成されていますが、これはデフォルトにおいて1秒が24フレームで設定されているためです。以前のバージョンのFlashではデフォルトは12フレームでした。

オブジェクトのアニメーション

Flash CS4では、オブジェクトのアニメーションが非常にシンプルに作成できます。

現在、フレームのインジケータは24フレームにあります。オブジェクトをステージ上でドラッグします。また、ステージ上にはスプラインパスが表示されています。このパスは編集することができます。
ツールボックスの「選択」ツールを選択します。
図 2: 「選択」ツール
ステージ上でパスを選択し、ドラッグして、折り曲げます。
ノート: タイムラインをスクラブすると、アニメーションがパスに沿って設定されていることが確認できます。また、ひし形のキーフレームは、オブジェクトのプロパティが変更されていることを示します。　
フレームインジケータを任意のフレームに移動します。
図 3: 任意のフレームにあるフレームインジケータ
ツールボックスの「自由変形」ツールを選択します。
オブジェクトのサイズを変更します。プロパティが設定されたキーフレームが挿入されました。

キーフレームを表示

ツールボックスの「選択」ツールを選択します。
タイムライン上のレイヤーで右クリックし、「キーフレームを表示」にポイントします。デフォルトでは、位置、伸縮、傾斜、回転、カラー、フィルタのすべての項目が選択されています。
ここで、「なし」を選ぶと、キーフレームが非表示になります。もう一度、メニューを表示し、「伸縮」をクリックします。すると、伸縮のプロパティが設定されたキーフレームだけが表示されました。再び右クリックしてメニューを開き、「位置」も選択します。最後の、位置を変更したキーフレームも、表示されました。再び右クリックしてメニューを開き、「すべて」を選択します。
図 4: キーフレームを表示

プロパティの調整

Flash CS4では、カラー効果や、位置の変更や、他のシンボルへ変更するなど、さまざまなモーショントゥイーンの調整ができます。

カラー効果の適用

位置や大きさに加えてカラー効果を適用することができます。

24フレームにインジケータを置きます。シンボルを選択し、「プロパティ」パネルを開きます。
「カラー効果」を適用します。着色の値を調整します。カラーピッカーから色を選びます。オレンジにします。濃淡のスライダを100%にします。
ノート: 濃淡のスライダで100%未満を指定すると、オブジェクトの色と選択したカラーを混合した色で着色されます。

図 5:濃淡のスライダ
図 6: カラーピッカーから色を選択
タイムラインでスクラブすると、24フレームにいたるまでのカラーの変化がタイムライン全体に適用されています。

オブジェクトの位置の変更

スプラインパスを編集してオブジェクトの位置を変更することができます。

フレームインジケータを任意のポイントにおきます。ステージ上で、シンボルをドラッグして位置を変更します。スプラインパスも自動的に変形されます。
図 7:シンボルをドラッグして位置を変更
また、別のフレームを選択し、シンボルをドラッグして位置を変更します。スプラインパスも更新され、スクラブすると、ご覧のように変形したスプラインパスに沿って、シンボルが動きます。
さらに柔軟に編集する場合は、「ダイレクト選択」ツールを使って、パスの端点や、ポイントをドラッグして、パスを自由に編集します。
図 8: ダイレクト選択ツールでパスを編集

アニメーションのデュレーションの変更

Flash CS4ではアニメーションのデュレーションの変更が画期的に簡単になりました。

いったん作成し、キーフレームを設定したアニメーションの、タイムライン右端をドラッグして広げると、キーフレームがオリジナルと同様の割合で再配置されます。
図 9: タイムラインをドラッグしアニメーションのデュレーションを変更

他のシンボルに変更

もしライブラリにいくつかのシンボルがあれば、アニメーションの設定はそのままに、シンボルだけを入れ替えることができます。

ステージ上のシンボルを選択し、Delete キーで削除します。
ライブラリを開き、シンボルをモーションの設定されたレイヤーにドラッグアンドドロップします。レイヤーに設定されていたアニメーションの設定がそのまま適用され、キーフレームのプロパティやスプラインパスがそのまま利用できます。
図 10: 「ライブラリ」パネル
「OK」をクリックします。ご覧のようにアニメーションの設定はそのままに、シンボルだけを入れ替えることができました。
Tip: 別のシンボルをステージ上にドラッグアンドドロップすると、トゥイーン　ターゲット　オブジェクトを置きかえるかどうかを確認するダイアログボックスが表示されます。

モーションエディタ

Adobe Flash CS4には、新機能のモーションエディタパネルが用意されました。モーションエディタパネルを開きます。

「モーションエディタ」パネルを広げます。
「グラフサイズ」のスライダをドラッグします。それぞれのプロパティのグラフが表示される領域の高さを変更することができます。
ノート: 「モーションエディタ」では、オブジェクトに設定されているそれぞれのプロパティごとに詳細な設定を行うことができます。

図 11: 「モーションエディタ」パネル
プロパティの先頭の三角のアイコンをクリックすることで、プロパティの内容を展開したり、折りたたんだりすることができます。
図 12:プロパティの内容を展開
ノート: プロパティの項目をクリックすると、個別のプロパティの項目をこのように広げたり、畳んだりすることができます。「展開後のグラフサイズ」のスライダで、展開後のプロパティの、行の高さを変更することができます。

図 13: モーションエディタグラフ
Xの項目を選択します。X軸の位置を示すカーブのキーフレームをドラッグして、カーブを変形します。前のキーフレームからのＸ軸方向への移動ピクセルの量を変更します。ステージ上のスプラインパスにも反映されています。
右クリックし、「曲線をコピー」を選択します。
「基本モーション」のプロパティは畳んで、「変形」のプロパティを展開します。傾斜 Xを選択します。
右クリックし、「曲線をペースト」を選択します。傾斜 Xにコピーしたカーブが適用されました。
図 14: 曲線をコピー

モーションエディタのイージング設定

モーションエディタではアニメーションにイージングを設定できます。イージングとは、アニメーションの動きに加速や減速を加えて、よりリアルな動きを加える効果です。

「基本モーション」のプロパティを展開します。
図 15: モーションエディタのイージング設定
開かれているプロパティは閉じて、イージングのプロパティを開きます。「カラー・フィルタまたはイージングを追加」をクリックしてメニューを開き、「カスタム」を選びます。
イージングのプロパティにカスタムのプロパティが追加されました。クリックして拡張します。グラフ上のポイントをクリックし、カーブを変形します。アニメーションの開始にイーズインの設定を行いました。終わりのポイントをドラッグして、カーブを変形し、調整します。カーブを変形し、イーズアウトを設定しました。はじめは緩やかに、途中から大きく変化します。そして終わりでまた緩やかに変化します。
では、Control+Ente キー（Windows）またはCommand+Return キー（Macintosh）を押して、プレビューをしてみましょう。しかし、設定したイージングが反映されていないようです。ウィンドウを閉じます。
「基本モーション」の選択されたイージングのドロップダウンメニューを開き、今作成した「カスタム」を選択します。再び、テストすると、先ほどの動き方と異なり、イーズイン・イーズアウトが反映されていることがわかります。ウィンドウを閉じます。
図 16: カスタムイージングの追加