円の変形アニメーション

circle_animation



マウス位置で円の形や大きさが変わるアニメーションです
解説はつづきから






今回もTweenMaxを使います
詳しくはこちらを参照




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





新規シンボルを作成
ActionScriptに書き出しにチェックを入れて、クラス名をCircleに






塗りなし、線の色を#0099FF、線の太さ1、縦30、横30の円を描く




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



//TweenMaxをインポート
import gs.*;
import gs.easing.*;


var timer:Timer = new Timer(50);
timer.addEventListener(TimerEvent.TIMER, createCircle);
timer.start();

function createCircle(e:Event):void {

    var circle:Circle = new Circle();

    //円の表示位置をステージ中央に
    circle.x = 200;
    circle.y = 150;

    //円の初期大きさ
    circle.scaleX = mouseX/60;
    circle.scaleY = mouseY/45;

    circle.alpha = 0;//円の初期透明度

    //トゥイーン設定
    TweenMax.to(circle, 1,{    //円を1秒間で
    scaleX: mouseX/40,    //大きさ比率をマウス位置によって変更
    scaleY: mouseY/30,
    ease:Cubic.easeOut,    //イージング設定
    alpha: 1,//透明度を1に
    onComplete: removeCircle,    //トゥイーンが終わったら
    onCompleteParams: [circle]   //removeCircle()実行
    });
    addChild(circle);    //円追加
}

function removeCircle(circle:Circle):void {
    removeChild(circle);    //円削除
}


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







以上、円の変形アニメーションでした