TweenMaxを使ってカラフルサークル

colorful_circles



ActionScript 3.0にはいろいろと便利なライブラリが公開されていますが、その中の一つTweenMaxを使って簡単なサンプルを作りたいと思います
解説はつづきから




ライブラリを使うことによって高度なアニメーションも簡単に、なめらかに行うことができるようになります


まずはTweenMaxをGreenSockからダウンロード
ダウンロードしたファイルを解凍してできたgsフォルダを今回つくるflaファイルと同じ場所に設置
これで準備は完了です


※追記
最新バージョンの場合はgsフォルダではなくcomフォルダになります
Actionscriptでimportする時は

import gs.*;
import gs.easing.*;

から

import com.greensock.*;
import com.greensock.easing.*;

に変わりました




※TweenMaxにはライセンスがあります
うむるむさんのところに詳しくまとまってますので目を通しておくとよいと思います




ではflaファイルを作成します


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



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



40×40、色#FFFFFFの円を描く


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

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

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

//円追加から大きくなるまでの設定
function createCircle(e:Event):void {

    var circle:Circle = new Circle();

    //円の表示位置設定(マウス位置の四方30にランダムで)
    circle.x = mouseX + Math.random() * 60 - 30;
    circle.y = mouseY + Math.random() * 60 - 30;

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

    //大きさ比率の目標値設定
    var targetScale = 0.2 + Math.random();

    //トゥイーン設定
    TweenMax.to(circle, 1,{    //circleを1秒間で
        tint: Math.random()* 0xffffff,    //色をランダム色に
        scaleX: targetScale,    //大きさ比率を設定値に
        scaleY: targetScale,
        alpha: Math.random(),    //透明度をランダム値に
        blurFilter: {blurX:10, blurY:10},    //ぼかしを10に
        onComplete: tweenFinished,    //トゥイーンが終わったら
        onCompleteParams: [circle]    //tweenFinished()実行
    });
    addChild(circle);    //円追加
}

//円が大きくなり終わった後の設定
function tweenFinished(circle:Circle):void {

    //トゥイーン設定
    TweenMax.to(circle, 1, {    //circleを1秒間で
        scaleX: 0,    //大きさ比率を0に
        scaleY: 0,
        alpha: 0,    //透明度を0に
        onComplete: removeCircle,    //トゥイーンが終わったら
        onCompleteParams: [circle]    //removeCircle()実行
    });
}

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


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



以上、カラフルサークルの作り方でした