バネ運動を使ったマウスアクション

spring_action



マウスに追従して動く球にバネのような動きをさせたモノの作り方です
ついでに残像も加えてあります
解説はつづきから






新規ファイル作成
ステージ設定はサイズを400×300、フレームレートは30に





まずは背景を作成
400×300の矩形を描き、#222222から#000000の色でグラデーション





新規レイヤーを追加し、10×10のサイズの円を描く
線はなし、色は#FFFFFFから#FF6666のグラデーション





描いた円をシンボルに変換
ActionScriptに書き出しにチェックを入れて、クラス名をBallに
ステージにある円のインスタンス名をballに






円をダブルクリックし、シンボル編集モードに
円をさらにシンボル化し、画像のようにフィルタをかける




シーン1に戻り、新規レイヤーを追加し、ActionScriptを記述

Mouse.hide();    //マウスカーソル非表示

var spring:Number = 0.2;    //バネ係数(0〜1)
var easing:Number = 0.9;    //収束値、1で無限に動き続ける
//初期速度
var speedX:Number = 0;
var speedY:Number = 0;

//ballの動作イベント追加
addEventListener(Event.ENTER_FRAME, springAction);

function springAction(event:Event):void {

    //マウスとballの距離
    var disX = mouseX-ball.x;
    var disY = mouseY-ball.y;

    //距離にバネ係数をかけたものを速度に加算
    speedX += disX*spring;
    speedY += disY*spring;

    //収束値を速度にかける
    speedX *= easing;
    speedY *= easing;

    //ballを速度分移動
    ball.x += speedX;
    ball.y += speedY;


    //残像になるball2設定
    var ball2:Ball = new Ball();
    //ball2をballの位置に
    ball2.x = ball.x;
    ball2.y = ball.y;
    //ball2初期透明度
    ball2.alpha = 0.9;

    //ballより一つ下の位置にball2追加
    addChildAt(ball2,numChildren - 1);

    //追加されたball2イベント追加
    ball2.addEventListener(Event.ENTER_FRAME,ballAction);

    function ballAction(e:Event):void {

        ball2.alpha -= 0.04;    //透明度変化
        //大きさ変化
        ball2.scaleY -= 0.04;
        ball2.scaleX -= 0.04;

        //完全に透明になったら削除
        if (ball2.alpha < 0) {
            ball2.removeEventListener(Event.ENTER_FRAME,ballAction);
            removeChild(ball2);
        }
    }
}


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







以上、バネ運動を使ったマウスアクションの作り方でした