マウス位置で速さが変わる円運動

circle_by_mouse



残像を残しながら回転する円の速度をマウス位置によって変えるというアニメーションです
解説はつづきから






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





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





新規レイヤーを追加し、35×35の円を描く
塗りは#00CCFF、線は1pxで色は#FFFFFF





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




新規レイヤーを追加し、ActionScriptを記述

var angle:Number = 0;    //角度
var radius:int = 120;    //周回半径
var speed:Number;    //速度

//ステージの中心点
var centerX:int = stage.stageWidth / 2;
var centerY:int = stage.stageHeight / 2;

circle.addEventListener(Event.ENTER_FRAME, moveCircle);

//circleの動き設定
function moveCircle(e:Event):void {

    //ステージの中心点を軸に半径radiusで円運動になるように
    //sin、cosを使ってcircle位置決定
    circle.x = centerX + Math.cos(angle) * radius;
    circle.y = centerY + Math.sin(angle) * radius;

    //マウス位置から中心点までの距離
    var dis = Math.sqrt((mouseX-centerX)*(mouseX-centerX)+(mouseY-centerY)*(mouseY-centerY));

    //マウス位置によってspeed変化
    speed = 20/dis+0.05;

    //一定値以上になったらspeed固定
    if (speed>1.5) {
        speed = 1.5;
    }

    //速度を代入して角度を変えることによって円運動開始
    angle += speed;
}

//円を追加するタイマー設定
var timer:Timer = new Timer(30);
timer.addEventListener(TimerEvent.TIMER, createCircle);
timer.start();

//円追加設定
function createCircle(e:Event):void {

    var trailCircle:Circle=new Circle();

    trailCircle.x = circle.x;
    trailCircle.y = circle.y;
    trailCircle.alpha = 0.8;

    //追加された円の変化開始
    trailCircle.addEventListener(Event.ENTER_FRAME,animateCircle);

    //circleより一つ下の位置に円追加
    addChildAt(trailCircle,numChildren - 1);
}

//追加された円の変化設定
function animateCircle(e:Event):void {

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

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


これでムービープレビューすると、以下のようにマウス位置が中心に近づくほど速度が速くなる円運動が出来てるかと思います







以上、マウス位置で速さが変わる円運動の作り方でした