Move Effects in TileList in Flex 3

Question

I am providing u the sample code that i have did so far. What i want to do is when i click on the Down button Tilelist slowly scroll and changes the data. though data changed by clicking on the down button but no effect is shown. i have searched a lot on the net but i can't find any better way for that. If its possible then please give the best way for that.

Here is my sample code that i have did so far

<?xml version="1.0"?>

<mx:Sequence id="dataChangeEffectSequence">
    <mx:Move duration="1500" easingFunction="{Elastic.easeOut}" perElementOffset="20"/>
</mx:Sequence>

<mx:Script>
    <![CDATA[
        import mx.effects.easing.Elastic;
        import mx.controls.Alert;
        import mx.events.ScrollEvent;

        private var arrImage:Array = [
            {source:"Images/1.png",tooltip:"1"},
            {source:"Images/2.png",tooltip:"2"},
            {source:"Images/3.png",tooltip:"3"},
            {source:"Images/4.png",tooltip:"4"},
            {source:"Images/5.png",tooltip:"5"},
            {source:"Images/6.png",tooltip:"6"},
            {source:"Images/7.png",tooltip:"7"},
            {source:"Images/8.png",tooltip:"8"},
            {source:"Images/9.png",tooltip:"9"},
            {source:"Images/10.png",tooltip:"10"}];

        public function onInit():void
        {
            tileList.dataProvider = arrImage;
        }

        public function btnUP_click():void
        {
            var scrollPosition:int = tileList.verticalScrollPosition - 1;

            if(scrollPosition >= 0)
            {
                tileList.verticalScrollPosition = scrollPosition;
            }
            else
            {
                tileList.verticalScrollPosition = 0;
            }
        }

        public function btnDown_click():void
        {
            var scrollPosition:int = tileList.verticalScrollPosition + 1;

            if(scrollPosition <= tileList.maxVerticalScrollPosition)
            {
                tileList.verticalScrollPosition = scrollPosition;
            }               
        }

    ]]>
</mx:Script>

<mx:Button width="100" label="UP" id="btnUP" click="{btnUP_click();}" />

<mx:TileList id="tileList" dataProvider="{arrImage}" columnCount="1" columnWidth="100"
    useRollOver="false" selectable="false" backgroundAlpha="0" borderStyle="none" 
    rowHeight="65" verticalScrollPolicy="off" horizontalScrollPolicy="off"
    itemsChangeEffect="{dataChangeEffectSequence}" >
    <mx:itemRenderer>
        <mx:Component>
            <mx:VBox width="100%" height="100%" horizontalAlign="center" verticalGap="0"
                verticalAlign="middle" horizontalScrollPolicy="off" verticalScrollPolicy="off">
                <mx:Script>
                    <![CDATA[
                        import mx.controls.Alert;
                        override public function set data(value:Object):void
                        {
                            if(value !=null)
                            {
                                super.data = value;
                                if(img !=null)
                                {
                                    img.source = data.source;
                                    img.toolTip = data.tooltip;
                                }
                            }
                        }
                    ]]>
                </mx:Script>
                <mx:Image id="img" showEffect="{outerDocument.dataChangeEffectSequence}" />
            </mx:VBox>
        </mx:Component>
    </mx:itemRenderer>
</mx:TileList>

<mx:Button width="100" label="DOWN" id="btnDown" click="{btnDown_click();}" />

</mx:Application>

Thanks in advance..

Answer 1

You could use spark components such as List and set useVirtualLayout to true.

The problem with your code is that every itemrenderer is created and shown when the dataprovider is updated. With useVirtualLayout set to true, only the displayed items are created and they are recycled when you scroll. You may then listen to your itemrenderer's dataChange event to launch the transition.

Answer 2

Put the TileList inside a Container (such as Canvas or VBox) and force it to be the full height of all the items (if you have variableRowHeight, that might be a little complex). Then handle the scrolling on the VBox, not the TileList.

Also note that VBox has a lot of overhead as an itemRenderer. You might want to consider just putting Image in there. It has horizontalAlign and verticalAlign properties.