第6回　モーショントゥイーン：マスク

「マスクレイヤー」を使ったモーショントゥイーンを作成しよう。マスクの原理は静止画の場合と同じで、マスクレイヤーにアニメーションを設定することで、マスク対象レイヤーのオブジェクトのマスク部分が変化するアニメーションを作成できる。画面を切り替えるときのトランジションなどによく使われる技術だ。今回でモーショントゥイーンの学習が終了する。マスクを習得するとともに、これまでの機能も復習してみてほしい。

マスクレイヤーにモーショントゥイーンを設定して、升目がじょじょに広がり画像が現れるアニメーションを作ってみよう。

1．PNG形式などで背景の画像を用意しよう。［ファイル］→［読み込み］→［ステージに読み込み］でステージ上にビットマップを読み込む。レイヤー名は「image」としておこう【図1】。

2．新規レイヤー「mask」を作成する。「矩形ツール」で升目のひとつを描く。ここでは、背景の画面サイズ450×300pxを9×6等分した50×50pxの大きさで、塗りの四角形を描く【図2】。

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

4．グラフィックインスタンスに設定した［square_motion］をコピー＆ペーストして複製し、画像を敷き詰めるように、9×6個分並べる。次にこれらをすべて選択し、シンボルに変換する【図4】。［シンボルに変換］ダイアログボックスで［名前：mask］、［タイプ：ムービークリップ］、［基準点：中央］に設定する。

5．［ライブラリ］パネルのシンボルをダブルクリックし、［square_motion］の編集画面を開く【図5】。ステージの四角形をシンボルに変換する【図6】。［シンボルに変換］ダイアログボックスで［名前：square］、［タイプ：グラフィック］、［基準点：中央］に設定する。

6．［フレーム30］で右クリック（〔Control〕＋クリック）してコンテキストメニューから［フレームを挿入］を選ぶ。フレームを選択した状態で、プロパティインスペクタの［トゥイーン］を［モーション］、［イージング］を［100］に設定。［フレーム30］で右クリック（〔Control〕＋クリック）してコンテキストメニューから［キーフレームの挿入］を選択する（参考：Lesson3第2回）。［フレーム1］のインスタンスを選択し、プロパティインスペクタでサイズを［W：1］、［H：1］に設定する【図7】。

7．［ライブラリ］パネルのシンボルをダブルクリックし、［mask］の編集画面を開く。［フレーム60］にフレームを挿入する。ステージのすべてのインスタンスを選択し、プロパティインスペクタで［グラフィックのオプション］を［一回再生］に設定する【図8】。

［square_motion］のタイプを「グラフィック」にすることで［mask］のタイムラインに連動して、［square_motion］内で設定しているアニメーションが再生される。そのため、配置した全体の動きを確認しながら、マスクのアニメーションを設定することができる。また、その際、それぞれのインスタンス［square_motion］が一回だけ再生して停止するように、グラフィックの再生方法を［一回再生］に設定しておく。

8．新規レイヤー［レイヤー2～14］を作成する。四角形が左上から右下にかけて広がっていく動きを設定するため、各インスタンスをカットし、【図9】で示したナンバリングに合わせて、［レイヤー2～14］それぞれのレイヤー上の同じ位置にペーストして配分する。

9．［レイヤー2］の［フレーム1～60］をドラッグして2フレーム分右にずらす。同様に［レイヤー3～14］も、下のレイヤーより右に2フレームずつずらしていく。最後にすべてのレイヤーの［フレーム86］にフレームを挿入する【図10】。これでマスクのアニメーションが完成だ。［制御］→［再生］で確認すると【図11】のような動きになるはずだ。

10．［シーン1］に戻り、「mask」レイヤーのレイヤー名の上で右クリック（〔Control〕＋クリック）してコンテキストメニューから［マスク］を選ぶ【図12】。これですべての設定が完了だ。［制御］→［ムービープレビュー］で確認してみよう。

【サンプル1】のマスクの形状やアニメーションを変更すると、簡単にバリエーションを作ることができる。【サンプル2】のようなバリエーションを作ってみよう。

1．［ライブラリ］パネルのシンボルをダブルクリックし、［square］の編集画面を開く。「多角形ツール」で四角形を覆う（四角形が隠れる）ように星を描く【図13】。

2．［ライブラリ］パネルのシンボルをダブルクリックし、［square_motion］の編集画面を開く。［フレーム1］のインスタンスを選択し、［変形］パネルで［回転：180°］に設定する【図14】。これで完了だ。［制御］→［ムービープレビュー］で確認してみよう。