Flash活用講座
アニメーションのテクニックのいろいろ
マスクレイヤーを利用したアニメーションの作成
操作説明 ムービー
  レイヤーを重ねて、下のレイヤーの一部分のみを表示させる機能を「マスク」といい、このとき上に被さっているレイヤーのことを「マスクレイヤー」といいます。ここでは、マスクレイヤーを使ってアニメーションを作成してみます。

1章3節で準備した教材収納フォルダより、「練習6章4節.fla」を開きます。

マスクレイヤーを作成します。
     
 

1.
「文房具」というレイヤー名をクリックし、「レイヤーの追加」アイコンをクリックします。

     
 

2.
新規レイヤーが挿入されるので、名前を「マスク」に変更します。

     
 

3.
「マスク」レイヤーのレイヤー名をマウスの右ボタンでクリックし、表示された一覧から「マスク」を選択します。

     
 

4.
マスクレイヤーが挿入され、直下にあった「文房具」レイヤーが「マスク」に含まれます。マスクを設定すると、マスクとマスクに含まれるレイヤーが自動的にロック状態になりますので、作業するときは鍵アイコンをクリックしてロックを外します。

     
 

5.
「背景」レイヤーのレイヤー名をクリックして、「マスク」の「文房具」の下にドラッグします。

     
 

6.
「マスク」のロックを解除し、1フレーム目を選択します。

     
 

7.
ライブラリから「マスク」シンボルをステージの外側左上にドラッグし、配置します。

     
  「マスク」にモーションを設定します。  
 

8.
20フレーム目にキーフレームを挿入します。

     
 

9.
配置した「マスク」をステージ右上まで移動します。このとき、「文房具」と「背景」のレイヤーは1フレームしか設定されていないので、ステージ上には「マスク」レイヤーの画像のみ表示されます。

     
 

10.
40フレーム目にキーフレームを挿入します。

     
 

11.
配置した「マスク」をステージ左下まで移動します。

     
 

12.
60フレーム目にキーフレームを挿入します。

     
 

13.
配置した「マスク」をステージの外側右下まで移動します。

     
 

14.
「マスク」レイヤーのレイヤー名をクリックし、全フレームを選択します。

     
 

15.
プロパティインスペクタの「トゥイーン」のスピンボタンをクリックし、「モーション」を選択します。

     
 

16.
「文房具」と「背景」の60フレーム目に、「フレーム」を挿入します。

     
 

17.
最後に、ステージ上のオブジェクトがない任意の場所をクリックして、プロパティインスペクタの「背景」で、カラーを黒(#000000)に変更します。

     
 

18.
「マスク」レイヤーをロックします。

     
 

19.
これで、マスクレイヤーを使ったアニメーションが完成しました。メニューバーの「制御」の一覧から「ムービープレビュー」を選択して、アニメーションを確認してみましょう。

     
  完成FLASH  
 
  次へ