にたまごほうれん草アーカイブ

はてなダイアリーで書いてた「にたまごほうれん草」という日記のアーカイブです。現在は「にたまごほうれん草ブログ」を運営中です。

FlexでBoxオブジェクトの追加時にはねる(バウンドする)エフェクトをつける

Panelの中にオブジェクトを並べるときに順番にスライドインしてくるようなエフェクトをつけたくて、ActionScript素人ながらにやってみた。

一気に出てくるのではなく、500msごとに順番に出てくるようにしたかったので、Timerオブジェクトを使って、動きはMoveオブジェクトとeasingFunctionにBounce.easeOutをつけてバウンドするように表現してみた。
もっと簡単で賢いやり方はあると思うけど、とりあえず以下のソースコードで上記ができた。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

        <mx:Script>
                <![CDATA[
                        import mx.effects.easing.Bounce;
                        import mx.containers.Box;
                        import mx.effects.Move;
                        import mx.effects.Sequence;
                        import mx.events.FlexEvent;

                        private var timer:Timer;
                        private var boxNum:int;
                        
                        private function startButtonOnClickHandler(e:MouseEvent) : void
                        {
                                boxNum = panel.width / (30 + 10);
                                timer = new Timer(500, boxNum - 1);
                                
                                for (var i:int=0; i<boxNum; i++) {
                                        var box:Box = new Box();
                                        box.visible = false;
                                        box.width = 30;
                                        box.percentHeight = 100;
                                        box.setStyle("backgroundColor", "#4C437A");
                                        panel.addChild(box);
                                }
                                panel.validateNow();
                                
                                timer.addEventListener(TimerEvent.TIMER, timerHandler);
                                timer.start();
                                moveBox(panel.getChildAt(0) as Box); // 最初の一個は即時開始
                        }
                        
                        private function timerHandler(e:TimerEvent) : void
                        {
                                var box:Box = panel.getChildAt(timer.currentCount) as Box;
                                moveBox(box);
                        }
                        
                        private function moveBox(box:Box) : void
                        {
                                var move:Move = new Move();

                                trace(box.parent.getChildIndex(box));                           
                                move.target = box;
                                move.duration = 1000;
                                move.xFrom = stage.stageWidth;
                                move.easingFunction = mx.effects.easing.Bounce.easeOut;
                                                                                                
                                move.play();
                                box.visible = true;
                        }
                        
                        private function resetButtonOnClickHandler(e:MouseEvent) : void
                        {
                                if (timer.running) {
                                        timer.stop();
                                }
                                panel.removeAllChildren();
                        }
                ]]>
        </mx:Script>
        
        <mx:Panel id="panel" left="10" top="10" bottom="48" right="10" layout="horizontal">
        </mx:Panel>
        <mx:Button label="start" fontSize="16" bottom="10" height="30" horizontalCenter="-42" click="{startButtonOnClickHandler(event)}"/>
        <mx:Button label="reset" fontSize="16" bottom="10" height="30" horizontalCenter="36" click="{resetButtonOnClickHandler(event)}"/>
        
</mx:Application>

課題は、Boxのスライド時にちらついて見えることかな。
あと、visibleをトリッキーに(?)使わないとスライド前のBoxが見えてしまうとか、要するにいろいろたくさんだ。