第3回　モーショントゥイーン：モーショントゥイーンの応用

前回は、モーショントゥイーンでオブジェクトの位置のプロパティを変化させてオブジェクトが移動するアニメー ションを作成した。今回はさまざまなプロパティを変化させて、さらにユニークなアニメーションを作っていこう。単純な動きをシンボル化し、それらを組み合 わせると、簡単に複雑なアニメーションを作成することができる。イージングやカスタムイージングはリアルな表現に加えて、見ていて心地のよい動きを意識し ながら演出するとよいだろう。

Lesson2の第1回 シンボルとインスタンスの「シンボルのタイプ」で紹介したサンプルのアニメーションを作ろう。単純な動きの組み合わせで構成されているところに注目してほしい。

伸び縮みする四角形の動きを作っていこう。インスタンスのサイズ（高さ）とカラーのプロパティをモーショントゥイーンで変化させる簡単なアニメーションだ。

1．［名前：square］、［タイプ：グラフィック］で新規シンボルを作成する。「矩形ツール」で、左上を基準とした20×50pxの赤色（#CC0000）の長方形を描く【図1】。

2．［名前：square_motion］、［タイプ：ムービークリップ］の新規シンボルを作成する。［ライブラリ］パネルからステージにグラフィック［square］をドラッグし、［X：0］、［Y：0］に配置。［H：0.5］として高さを縮めよう【図2】。

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

4．ステージのインスタンスを選択し、プロパティインスペクタで［H：100］、［X：0］、［Y：0］とし、［カラー：着色］、［R：255］、［G：204］、［B：0］、［濃淡：100%］を設定【図4】。

5．［フレーム40］にキーフレームを挿入する。ステージのインスタンスを選択し、プロパティインスペクタで［H：0.5］、［X：0］、［Y：0］とし、［カラー：なし］を設定【図5】。［フレーム20～39］のいずれかのフレームを選択して［イージング：-100］とする。

6．これまでの手順と同様に、［フレーム60］にキーフレームを挿入。インスタンスを［H：100］、［X：0］、［Y：-100］、［カラー：着色］、［R：51］、［G：0］、［B：255］、［濃淡：100%］に、［フレーム40～59］のいずれかのフレームを選択し、［イージング：100］に設定する。次に［フレーム80］にキーフレームを挿入し、インスタンスを［H：0.5］、［X：0］、［Y：0］、［カラー：なし］に、［フレーム60～79］のいずれかのフレームを選択し、［イージング：-100］に設定する【図6】。ここまでを［制御］→［再生］で確認すると【図7】のような動きになるはずだ。

波の動きを作っていこう。ムービークリップ［square_motion］のアニメーションのスタートを1フレームずつずらして横に並べると複雑な波の動きができる。

1．［名前：wave］、［タイプ：ムービークリップ］の新規シンボルを作成。［ライブラリ］パネルからムービークリップ［square_motion］をステージにドラッグし、［X：0］、［Y：0］に配置する。次に新規レイヤーを作成し、［フレーム2］にキーフレームを挿入。ムービークリップ［square_motion］を［X：20］、［Y：0］に配置する。同様に［レイヤー3～10］を作成し、それぞれの［フレーム3～10］にキーフレームを挿入してムービークリップ［square_motion］が順に横一列になるよう配置する。全てのレイヤーの［フレーム10］にフレームを挿入する【図8】。

2．新規レイヤーを作成し、［フレーム10］にキーフレームを挿入。［ウィンドウ］→［アクション］で［アクション］パネルを表示して、「stop();」と記述しよう【図9】。

3．［シーン1］に戻り、ステージにムービークリップ［wave］を配置して完成だ。［制御］→［ムービープレビュー］で確認しよう。

【サンプル1】では、波の動きを四角形が伸縮するアニメーションの組み合わせで作成した。これを別のアニメーションに置き換えると、いろいろなバリエーションができる。次は四角形をアルファベットに置き換え、それぞれに一度だけ再生する同じ動きのモーショントゥイーンを設定した文字エフェクトの例だ。自分なりに工夫してオリジナルのアニメーションを作ってみよう。

ステージに「テキストツール」で文字を書き、右クリック（〔Control〕＋クリック）してコンテキストメニューから［分解］を選ぶと、文字が一文字一文字に分解される【図10】。さらに、すべての文字を選択した状態で、もう一度コンテキストメニューから［レイヤーに配分］を選ぶと、一文字ずつレイヤーに配分される【図11】。これら一つひとつをシンボルに変換し、同じアニメーションを設定していこう。