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

マウスを動かすとその方向に目が動くアニメーションの作り方です

解説はつづきから

新規ファイル作成

ステージ設定はサイズを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;
}

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

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

Permalink | コメント(0) | トラックバック(0) | 19:51