イメージエフェクト その３

画像を端から順番に表示していくエフェクトの作り方です
解説はつづきから

今回もTweenMaxを使います
詳しくは以前の記事参照

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

まずは画像を配置し、ムービークリップシンボルに変換
インスタンス名をimgに

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

矩形プリミティブツールで25×25の大きさの矩形を描く
角丸の半径を5、線なし、色は任意

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

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

//マスクオブジェクトの横と縦の数
var row:int = 12;
var col:int = 16;

//マスクオブジェクトをいれる配列
var myList:Array = [];

//マスクオブジェクトを配置するスプライトを作成、配置
var wrap:Sprite = new Sprite();
addChild(wrap);

//画像にマスクをかける
img.mask = wrap;

var timer:Timer;

//クリックイベント追加
stage.addEventListener(MouseEvent.CLICK, onClick);
function onClick(e:MouseEvent):void {
    //マスクオブジェクトを消去、配列初期化
    var i = myList.length;
    while (i--) {
        wrap.removeChild(myList[i]);
    }
    myList = [];

    //タイマーイベント追加、マスクオブジェクトの数だけ繰り返す
    timer = new Timer(30,col*row);
    timer.addEventListener(TimerEvent.TIMER, onTimer);
    timer.start();
}

function onTimer(e:Event):void {
    //タイマーの値に応じてマスクオブジェクトの位置を決定して配置
    var obj:Obj = new Obj();
    obj.x = (timer.currentCount-1)%col*25+12.5;
    obj.y = Math.floor((timer.currentCount-1)/col)*25+12.5;
    wrap.addChild(obj);
    //マスクオブジェクトを配列に格納
    myList.push(obj);

    //大きさ0、角度90の状態から1秒かけて元の状態になるトゥイーン
    TweenMax.from(obj, 1,{scaleX:0,scaleY:0, rotation:90});
}

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

以上、イメージエフェクト　その３でした