FlexでTweenerを使用するときの注意点

mxmlでアプリケーションを作っていると、addChildした瞬間と、実際にエレメントが表示される時間が異なる。

Flexを使っていなければ、すぐに表示されるけど、Flexを使用している場合はpreinitialize, initialize, creationComplete等のイベントを発行し、順次エレメントを作成する。そして、creationCompleteが呼ばれるタイミングで表示される。
だから、下のようなコードはうまく動かず、tweenが終わった頃にエレメントが表示されてしまって、タイミングがあわない。

private function createBox(event:MouseEvent):void {
        var box:Study16Box = new Study16Box();
        var gP:Point = new Point(event.stageX, event.stageY);
        var lP:Point = c.globalToLocal(gP);
        box.x = lP.x;
        box.y = lP.y;
        c.addChild(box);
        Tweener.addTween(box, {time: 1, x: lP.x + 100, transition: 'easeOutBack'});
}

こんなふうになる。

つまり、creationCompleteの時点で表示されるのであれば下のようにコードを書けば良い

private function createBox(event:MouseEvent):void {
        var box:Study16Box = new Study16Box();
        var gP:Point = new Point(event.stageX, event.stageY);
        var lP:Point = c.globalToLocal(gP);
        box.x = lP.x;
        box.y = lP.y;
        c.addChild(box);
        box.addEventListener('creationComplete', function(event:Event):void {
                Tweener.addTween(box, {time: 1, x: lP.x + 100, transition: 'easeOutBack'});
        });
}

で、こんな風になる

見やすいように無名関数で書いたけど、Study16Boxの中に書くのが奇麗かな。