第19回
マウスチェイサーの作り方アニメーションの作り方からActionScript 3.0プログラミングまで、ステップアップで脱初心者

今回はマウスカーソルを追っかける、マウスチェイサーの作り方をご紹介します。

▼完成

コンテンツの再生には、最新のAdobe Flash Playerが必要です。アドビ システムズのホームページよりダウンロードのうえ、インストールをお願いします。

 

作成方法

  1. 新規ファイル(AS 3.0)を開きます。
    マウスチェイサーとするムービークリップを作成します。
  2. ペンツールでハートを作成します。初めに輪郭を描いていきます。線のカラーを「#FF9999」、塗りのカラーは「なし」とします。
    まずは大まかな輪郭を描き、ダイレクト選択ツールで形を微調整していきます。(ステージのグリッドを表示状態にするとわかりやすいです。)
    ペンツールでハートを描く
  3. ハートの輪郭ができたら、バケツツールで中を塗りつぶします。
    塗りのカラーは、輪郭と同じで「#FF9999」とします。
    ハートの中を、輪郭と同じ色で塗りつぶす
  4. 作成したハートを選択し、サイズを調整し(大きすぎず、小さすぎず。)、ムービークリップシンボルに変換します。プロパティで「mouseChaser_mc」とインスタンス名をつけます。
  5. mouseChaser_mcのプロパティで、フィルタ効果をつけます。
    フィルタカラーは「#FF0066」とし、その他の項目も下記の通り設定します。
    プロパティでフィルタ効果をつける
  6. 最後にActionScriptを記述します。mouseChaser_mcが配置されたフレームを選択し、アクションパネルに下記の通りスクリプトを記述します。
    mouseChaser_mc.addEventListener(Event.ENTER_FRAME,xChaser);
    function xChaser(evt:Event):void{
    	mouseChaser_mc.x =
    		mouseChaser_mc.x + (stage.mouseX-mouseChaser_mc.x) * 0.2;
    	mouseChaser_mc.y =
    		mouseChaser_mc.y + (stage.mouseY-mouseChaser_mc.y) * 0.2;
    }

ムービープレビューで動作を確認します。

次のページは…
ムービークリップシンボルの入れ子構造
関連リンク
伊東 茉奈美 (いとう まなみ)
伊東 茉奈美 (いとう まなみ)
トレーニングプランナー

SATT入社後、m-SchoolでFlashのインストラクターを担当。

トレーニングコースの企画・開発等を経て、現在はトレーニング(企業研修)やeラーニングに関するコンサルティングを担当。

K-1好きは誰にも負けない自信あり。

Flash Beginner's School

RSSフィードで
最新情報を購読