第2回　モーショントゥイーン：モーショントゥイーンの基本

「モーショントゥイーン」は、オブジェクトのプロパティを変化させるアニメーションの手法だ。開始と終了キーフレームのオブジェクトのプロパティを変更すると、中間のフレームに開始の状態から終了の状態に向かって変化するオブジェクトが自動的に作成される、とても便利な機能だ。また、「イージング」や「カスタムイージング」を使うとプロパティの変化の度合いを加速させたり、減速させたりして、感覚的によりリアルな表現を実現することができる。モーショントゥイーンをマスターし、Flashアニメーションの真髄を極めよう。

基本的なモーショントゥイーンの作り方をを紹介しよう。モーショントゥイーンはインスタンスの位置、サイズ、回転、カラー、透明度、フィルタ（Flash Professionalのみ）などのプロパティを変化させることができる。今回の例では、XY座標からなる位置のプロパティを変更して、オブジェクトが左から右に等速で移動するアニメーションを作ってみよう。

1．描画ツールでステージにオブジェクトを描画する【図1】。

2．オブジェクトを選択し、右クリック（〔Control〕＋クリック）でコンテキストメニューから［シンボルに変換］を選択【図2】。［シンボルに変換］ダイアログボックスで［名前：circle］、［タイプ：グラフィック］、［基準点］を真ん中に設定して［OK］を押す。

3．タイムラインの［フレーム60］の部分を右クリック（〔Control〕＋クリック）して、コンテキストメニューから［フレームを挿入］を選ぶ【図3】。フレームを選択した状態で、プロパティインスペクタの［トゥイーン］を［モーション］に設定【図4】。もう一度［フレーム60］で右クリック（〔Control〕＋クリック）して、コンテキストメニューから［キーフレームの挿入］を選択する。

4．「選択ツール」で［フレーム60］のステージのオブジェクトを［Shift］を押しながらドラッグして右に移動させる【図5】。［フレーム120］にフレームを挿入して完成だ。［制御→ムービープレビュー］で確認してみよう。

［オニオンスキン］ボタンをクリックすると、複数のフレームを同時に表示させることができる。作成したモーショントゥイーンを表示するとオブジェクトが等速で移動していることがわかる【図6】。

アニメーションを1度だけ再生して停止させたい場合は、新しいレイヤーを追加し、停止させたいフレームにキーフレームを挿入する。［ウィンドウ］→［アクション］で［アクション］パネルを表示して、「stop();」と記述しよう【図7】。

イージングを使うとモーショントゥイーンで作成したプロパティの変化の度合いを加速させたり、減速させたりすることができる。リアルな表現を実現するのに欠かせない機能だ。

【サンプル1】にイージングを設定してみよう。設定方法は開始キーフレーム（または終了キーフレームまでの間のフレーム）を選択し、プロパティインスペクタの［イージング］の値を［-100～-1］または［1～100］に設定すればよい【図8】。

イージングの値が［-100～-1］の場合は「イーズイン」となり、プロパティの変化の度合いがフレームが進むにつれてだんだん大きくなる【図9】。【サンプル2】はイージングの値を［-100］に設定している。

イージングの値が［1～100］の場合は「イーズアウト」となり、プロパティの変化の度合いがフレームが進むにつれてだんだん小さくなる【図10】。【サンプル3】はイージングの値を［100］に設定。

キーフレームをいくつも挿入し、オブジェクトを上下に移動させてボールが跳ねて落下するアニメーションを作った。ボールが跳ねるときには［イージング］の値を［100］に、ボールが落下するときは［-100］に設定するとボールの動きをリアルに表現できる。これはボールにかかる重力の影響で、跳ねる場合は上に向かうほどだんだん速度が遅くなり、落下する場合は下に向かうほどだんだん速度が速くなるためだ【図11】。

カスタムイージングはグラフの曲線の傾きでオブジェクトの変化の度合いを詳細にカスタマイズできる機能だ。【サンプル1】にカスタムイージングを設定してみよう。

1．開始キーフレーム（または終了キーフレームまでのフレーム）を選択し、プロパティインスペクタの［イージング］の右の［編集］ボタンをクリック【図12】。［カスタムイーズイン／イーズアウト］ダイアログボックスが表示される。

2．対角線をドラッグして【図13】のような曲線を作ろう。ドラッグした点はコントロールポイントに変わり、ハンドルをドラッグすると曲線を変形させることができる。一度作成したコントロールポイントは、選択して［Delete］（〔delete〕）を押すと削除できる。