マスクをマウスの動画に追従させる。
(.flaファイルはページの最後でダウンロードできます)
マスクを適用する
1. サンプルの写真をダウンロードします。.flaファイルをダウンロード。以前使用したを使って蝶のアニメーションが配置されています。
2. 薄暗い写真と黄緑の蝶が配置されているムービークリップ「MC」と、ピンクに塗りつぶされているの円のムービークリップ「MASK」があることを確認してください。
3. レイヤーの構造を確認します、「MC」はレイヤー「MC」に、「MASK」はレイヤー「MASK」にそれぞれ配置されています。
4. レイヤー「MASK」を右クリックします。図のようにメニューが表示されますので、「マスク」を選択してください。これでマスク機能が有効になりました。マスクを設定したレイヤーのオブジェクトがマスクを設定された側(一つ下のレイヤー)のオブジェクトを切り抜いて表示します。
マスクの効果をFlash上でプレビューするには、双方のレイヤーをロックすることで表示できます。
ではActionScriptを使用して、マスクをマウスの動作に追従させましょう。
マスクをマウスに追従させる
1. レイヤー「MASK」の右側にある鍵のマークをクリックし、レイヤーのロックを解除します。こうすることでマスクのプレビューをオフにします。
2. ピンクの円で塗りつぶされているムービークリップ「MASK」に以下のActionScriptを記述します。
onClipEvent(enterFrame){ this._x = _root._xmouse; this._y = _root._ymouse; } 一行ずつ解説します 。
this._x = _root._xmouse;
this._y = _root._ymouse; 「this._x」でこのムービークリップの横の位置、「this._y」で縦の位置という意味になります。これを「_root._xmouse」、「_root._ymouse;」でマウスの位置を代入しています。これでマウスの位置にムービークリップが移動するという意味になります。
onClipEvent( ){ } この一行は「( )のとき{ }を実行する」という意味になります。「enterFrame」でフレームが進む度に実行するという意味になりますから、全体では常にムービークリップはマウスと同じ位置に移動するという意味になります。
これで完成です。闇夜の中を飛ぶ蝶を見つけてください。
完成したファイルをダウンロード
以前ご紹介した、「」の回ではドラッグ＆ドロップの機能を利用してムービークリップをマウスに追従させました。今回は別のアプローチですが、似た機能が実現できましたね。ある結果を求めるためには複数の方法があります。その中で最もシンプルでやりやすい方法を選び効率よい作業をするのもFlash制作のポイントかもしれません。
前のスレッド ：Flashでデジタル時計を作る！ ... || 次のスレッド ：注目のFlash作成ソフト「Web Ef...