TransitionManagerまとめ

簡単に効果的なアニメーションをさせることができるTransitionManagerクラス
その種類と具体例をまとめます
解説はつづきから

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

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

50×50の矩形を描き中央に配置
線なし、色#CC3399

シーン1に戻って再び新規シンボル作成
ActionScriptに書き出しにチェックを入れて、クラス名をTxtに

テキストツールで矩形を描き、画像のように各種設定

シーン1に戻り、ActionScript記述

//使用するパッケージを読み込む
import fl.transitions.*;
import fl.transitions.easing.*;

//transitionのタイプを配列に格納しておく
var traType:Array = [Blinds, Fade, Fly, Iris, Photo,
                     PixelDissolve, Rotate, Squeeze, Wipe, Zoom];

//空の配列を各種準備
var boxAry:Array = [];
var txtAry:Array = [];
var traAry:Array = [];

for (var i:int=0; i<10; i++) {
    //Boxを配置して配列に格納
    var box:Box = new Box();
    box.x = i % 5 * 75 + 50;
    box.y = Math.floor(i/5) * 120 + 75;
    addChild(box);
    boxAry.push(box);

    //Txtを配置して配列に格納
    var txt:Txt = new Txt();
    txt.x = i % 5 * 75 + 50;
    txt.y = Math.floor(i/5) * 120 + 125;
    addChild(txt);
    txtAry.push(txt);

    //transitionのタイプをテキストフィールドに表示
    var str:String = String(traType[i]);
    txtAry[i].txt_mc.text = str.slice(7,-1);

    boxAry[i].buttonMode = true;

    //それぞれのBoxのtransitionのタイプを定義
    boxAry[i].transition = traType[i];

    //それぞれのBoxにクリックイベント追加
    boxAry[i].addEventListener(MouseEvent.CLICK, clickBox);
}

function clickBox(e:Event):void {
    //e.targetをMovieClip型に変換
    var cBox = e.target as MovieClip;

    //アニメーション中はクリックイベントを外す
    cBox.removeEventListener(MouseEvent.CLICK, clickBox);
    cBox.buttonMode = false;

    //TransitionManager効果設定
    var myTM:TransitionManager = new TransitionManager(cBox);
    myTM.startTransition({type:cBox.transition,     //transitionのタイプ
                          direction:Transition.IN,  //transition効果の方向
                          duration:1.5,             //効果時間
                          easing:Regular.easeOut,   //イージング設定
                          shape:Iris.CIRCLE         //Irisタイプのマスクシェイプ
                         });

    //配列に格納して不具合回避
    traAry.push(myTM);

    //アニメーションが終わったらイベント追加
    myTM.addEventListener("allTransitionsInDone", completeHandler);
}

function completeHandler(e:Event):void {
    //再びクリックイベント追加
    e.target.content.addEventListener(MouseEvent.CLICK, clickBox);
    e.target.content.buttonMode = true;
}

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

他にも効果の開始位置を変えたり、複数を組み合わせたりといったことも出来るのでいろいとと試してみるといいんじゃないかなと思います
詳しくはコンポーネントリファレンスガイドのfl.transitionsパッケージ参照

以上、TransitionManagerまとめでした