第5回　モーショントゥイーン：モーションガイド

「モーションガイド」を使ったモーショントゥイーンを作成しよう。オブジェクトにコーナーやカーブなどの複雑な動きをつけたいときに、モーションガイドレイヤーを作成して動きの経路となるパスを描画し、ガイド対象レイヤーのオブジェクトにモーショントゥイーンを設定する。この方法でパスに沿って移動するアニメーションが簡単に作成できる。応用の仕方次第でユニークなアニメーションが作れる便利な機能だ。これまでに学習したモーショントゥイーンとの組み合わせにも注意しながら見ていこう。

ポイントがガイドに沿って地図の経路をたどるアニメーションを作成しよう。モーションガイドレイヤーを使用すると、複雑な経路の形状に沿って進むアニメーションを簡単に作成することができる。

経路を進むナビゲーションとなるアニメーションを作成しよう。地図を進む方向を矢印で示し、注目を引くように点滅させる。

1．［名前：point］、［タイプ：ムービークリップ］で新規シンボルを作成する。「楕円ツール」と「多角形ツール」を使って、現在地と進行方向を表す円の中に三角形を配置した図形を描こう【図1】。

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

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

4．［フレーム1］のステージのインスタンスを選択し、プロパティインスペクタで［カラー：明度］を［80%］に設定する【図4】。これでポイントのアニメーションが完成だ。ここまでの設定を［制御］→［再生］で確認すると【図5】のような動きになるはずだ。

モーションガイドレイヤーを作成し、ポイントを経路に沿って動かそう。モーションガイドレイヤーに描いたパスに沿って、ガイドの対象となるレイヤーに配置したオブジェクトの位置のプロパティを変化させるモーショントゥイーンを設定できる。ポイントの方向をパスに沿って回転させることも可能だ。なお、パブリッシュした際、モーションガイドレイヤーのパスは表示されない。

1．［名前：map］、［タイプ：グラフィック］の新規シンボルを作成する。各描画ツールを使って、地図を描こう。レイヤーを「道路」、「建物」、「文字」のように分けておくと、あとから編集しやすいだろう【図6】。

2．［シーン1］に戻り、［ライブラリ］パネルからグラフィック［map］をステージに配置する。レイヤー名を「map」としておこう。新規レイヤー「point」を作成し、［ライブラリ］パネルからムービークリップ［point］をステージの適当な位置に配置しておく【図7】。

3．ムービークリップインスタンス［point］を選択し、プロパティインスペクタの［フィルタ］タブをクリックし、［フィルタの追加］（＋） から［ドロップシャドウ］を選んでフィルタを適用する。ドロップシャドウの強さを［ぼかし-水平・垂直：5］、［強度：60%］と設定して影をつける【図8】。

4．タイムライン右下の［モーションガイドの追加］ボタンをクリックして、「point」レイヤーの上に［ガイド：point］を作成する。「ペンツール」で地図にスタートからゴールまでの経路を描画する【図9】。

5．すべてのレイヤーの［フレーム120］にフレームを挿入【図10】。「point」レイヤーのフレームを選択し、プロパティインスペクタから［トゥイーン：モーション］を設定しよう【図11】。「point」レイヤーの［フレーム120］にキーフレームを挿入【図12】。

6．「point」レイヤーの［フレーム1］を選択し、ムービークリップインスタンス［point］の中心をドラッグしてガイドのスタート位置にスナップさせる【図13】。同様に［フレーム120］のインスタンスをゴール位置にスナップさせる。［ガイド：point］をロックしおくと編集しやすいだろう。

7．「point」レイヤーの［フレーム1］を選択し、プロパティインスペクタで[パスに沿って回転]のチェックをオンに設定する。ステージのインスタンスを「自由変形ツール」でパスに沿うように、矢印の向きを進行方向に回転させる【図14】。同様に［フレーム120］のインスタンスも回転させよう【図15】。すべてのレイヤーの［フレーム180］にフレームを挿入する。これですべての設定が完了だ。［制御］→［ムービープレビュー］で確認してみよう。