マウスカーソルを追いかけて動く目
マウスを動かすとその方向に目が動くアニメーションの作り方です
解説はつづきから
新規ファイル作成
ステージ設定はサイズを400×300、フレームレートは30に
目の部分をくり抜いた素材を用意し配置(わかりやすいように一時的に背景色変更)
新規レイヤーを作成し、目のくり抜かれた部分を覆うように正円を描く
基準点を中心にして、ムービークリップシンボルに変換
描いた円をダブルクリックし、シンボル編集モードへ
黒目の部分を描き、垂直方向は中心に、水平方向を右端になるように配置
シーン1に戻り、新規レイヤーを作成し、今作ったシンボルをもう片方の目にも配置
それぞれのシンボルのインスタンス名をrightEye、leftEyeに
目のレイヤーを体のレイヤーの下に移動
新規レイヤーを作成し、マウスカーソルのかわりになるものを描きムービークリップシンボルに変換
インスタンス名をcursor_mcに
新規レイヤーを追加し、ActionScriptを記述
Mouse.hide(); //マウスカーソル非表示 //マウスイベント追加 stage.addEventListener(MouseEvent.MOUSE_MOVE, followCursor); function followCursor(event:MouseEvent):void { //蝶のMCをマウス位置に cursor_mc.x = mouseX; cursor_mc.y = mouseY; //イベント後に画面更新 event.updateAfterEvent(); //マウス座標と右目のX方向距離 var disRX : Number = mouseX - rightEye.x; //マウス座標と右目のY方向距離 var disRY : Number = mouseY - rightEye.y; //右目の位置からマウス位置のラジアン var radR : Number = Math.atan2(disRY,disRX); //ラジアンを度へ変換 var degR : Number = radR * 180 / Math.PI; //右目を回転させる rightEye.rotation = degR; //左目にも右目と同様の処理を var disLX : Number = mouseX - leftEye.x; var disLY : Number = mouseY - leftEye.y; var radL : Number = Math.atan2(disLY,disLX); var degL : Number = radL * 180 / Math.PI; leftEye.rotation = degL; }
これでムービープレビューすると以下のようになってるかと思います
以上、マウスカーソルを追いかけて動く目の作り方でした