Flash Professional入門 第4回：マスク機能を使ったアニメーション

連載

Flash Professional入門

マスクは、レイヤーの構成を利用して「あるレイヤー上に配置している物を、一部分だけ切り抜いて表示する」という機能です。このマスク機能を使えば、複雑なアニメーション表現も簡単に作成できます。

Flash Professional CC の体験版をダウンロード サンプルファイルをダウンロード

マスクの設定方法

マスク機能を利用するには、切り抜く形を指定する「マスクレイヤー」と、切り抜く対象となる「マスク対象レイヤー」を作成します。

マスクレイヤーを作成するには、［タイムライン］パネルの任意のレイヤー上で右クリックし、コンテキストメニューから［マスク］を選択するだけです。する と、そのレイヤーがマスクレイヤーとなり、同時にその下にあるレイヤーがマスク対象レイヤーとなります。もしマスクレイヤーの下にレイヤーがなければ、マ スク対象レイヤーにしたいレイヤーをマスクレイヤーの下にドラッグすればOKです。

この設定を行うと、マスク対象レイヤー上のシェイプやアニメーションが、マスクレイヤーの形に切り抜かれて表示されるようになります。なお、マスクに反映されるのはマスクレイヤー上のオブジェクトの形だけで、色や塗り分けは関係ありません。

図1 マスクレイヤーとマスク対象レイヤーの関係（サンプル「マスクの基本.fla」）。マスク対象レイヤーにある4色の四角形が、マスクレイヤー上にある星形に切り抜かれて表示されています

マスクレイヤーやマスク対象レイヤーの状態を解除するには、それぞれのレイヤー上で右クリックし、コンテキストメニューから［プロパティ…］を選択します。［レイヤープロパティ］ダイアログボックスの［種類］を［標準］に変更します。

図2 マスクレイヤーやマスク対象レイヤーの状態を解除するには［種類］を［標準］に変更します

アニメーションにマスクをかける

マスクレイヤーは、フレームアニメーションやトゥイーンアニメーションを行うレイヤーにも適用できます。図3は、女の子の頬紅部分と前髪の影部分を大きめ に作り、それに対してマスクレイヤーで顔の形と同じサイズのマスクを作成しています。マスク処理により、頬紅や前髪の影の中で顔からはみ出している部分が 隠れて、顔の部分のみ切り抜かれて表示されていますね。

図3 女の子の頬紅部分と前髪の影部分を大きめに作り、マスクレイヤーで顔の部分のみ切り抜いて表示しています

この状態で頬紅や前髪の影を動かしても、マスクの効果が適用されます。右を向いたり、左を向いたりする動きに合わせて頬紅や前髪の影の位置を変更しても、顔の部分のみにそれらが表示されるアニメーションが作成できます。

図4 マスク機能を使った、女の子が顔を左右に振るアニメーション（サンプル「マスクの応用1.fla」）

マスク自体をアニメーションさせる

マスクレイヤー上のシェイプをアニメーションさせることで、マスクの形が変化するアニメーションも作成できます。図5では円形のマスクを作成し、その円を左右に動くようにトゥイーンアニメーションを付けています。

図5 マスクレイヤー上の円に対して、左右に動くトゥイーンアニメーションを付けてみます

すると、移動するマスクの下にある絵のみが表示されるアニメーションの完成です。スポットライトのような動きをするアニメーションも簡単に作成できますね。

図6 スポットライトのようなアニメーション（サンプル「マスクの応用2.fla」）

複雑な動きをマスクで簡単に実現する

マスク処理は、「ちょっと複雑な動き」や「シェイプの一部を見せたい」場合にも有効です。例として、「目の動き」のアニメーションを作成してみましょう。

目は色々な動きをします。目を閉じたり、開いたり。また、瞳の向きによって、向いている方向を表現したい場合もあるでしょう。ただ、イラストを描く際に瞳の部分は少々複雑な塗り方をすることがあり、目の動きの種類をすべて描くのは大変です。

そんな時には図7のように、左右の瞳をそれぞれ動かせるように別レイヤーへと配置し、さらに目の形のマスクレイヤーを作成します。マスクもマスク対象もアニメーションできる準備をしているわけです。

図7 マスクもマスク対象もアニメーションできるようにします

あとは、目の向いている向きを表現したい場合は瞳の部分をアニメーションさせ、瞬きを表現したい場合はマスクをアニメーションさせればよいわけですね。

図8 マスクとマスク対象をそれぞれアニメーションさせて作成した目の動き（サンプル「マスクの応用3.fla」）

このように、マスクとアニメーションを組み合わせると、1枚1枚描くのはちょっと大変な表現であっても手軽に実現できます。