マウスカーソルを追いかけて動く目

follow_eye



マウスを動かすとその方向に目が動くアニメーションの作り方です
解説はつづきから






新規ファイル作成
ステージ設定はサイズを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;
}


これでムービープレビューすると以下のようになってるかと思います







以上、マウスカーソルを追いかけて動く目の作り方でした