[flexcoders] A way to animate or move a list smoothly? My attempt in Flex 3 works, Flash builder not so much.

[Raymond Brown]

I have a horizontal list of objects (image and labels) that I want to slide to 
the left smoothly, in a consistent speed till the last object goes off screen 
and then repeat.  However my code, as seen below has two weird effects.  First 
it hauls butt across the screen way to fast to be readable and second somewhere 
around the middle of the screen the speed jumps up a notch till the very end 
where it seems to slow down.  Can someone point me to where I may be working 
the Move function wrong?



<?xml version="1.0" encoding="utf-8"?>

               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               minWidth="955" minHeight="600" backgroundColor="0x000000" 
               preinitialize="preInit()" creationComplete="complete()">
    
    <fx:Script>
        <![CDATA[
            import flash.display.*;
            import flash.events.*;
            import flash.net.*;
            import flash.utils.*;
            
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            
            import org.osmf.events.TimeEvent;

            [Bindable] public var ac:ArrayCollection;
            private var t:Timer;
            
            private function preInit():void
            {
                ac = new ArrayCollection([{name: '6501 Primary Clock Wander', 
code: '1', lastHeard: 'No time for losers'},
                    {name: '6502 Card 5 Failure', code: '0', lastHeard: 'Cause 
we are the champions'},
                    {name: '5701 Primary Died', code: '-1', lastHeard: 'Of the 
world'}, 
                    {name: 'APC Power Strip, socket 8 malfunctioning', code: 
'1', lastHeard: 'No pleasure cruise.'}]);

                //go get the data
                ADService.send();
                
                //timer - fire every 2 seconds and 0 means infinite run
                t = new Timer(2000, 0);
                t.addEventListener(TimerEvent.TIMER, timerFired);
                startTimer();
            }
            
            private function complete():void
            {
                move_left.xFrom = group.width + dataList.width;
                move_left.xTo = 0 - dataList.width;
                move_left.repeatCount = 0; //loop
                move_left.repeatDelay = 0; //loop time
                move_left.duration = 10000;
                move_left.play();
            }
            
            private function timerFired(evt:TimeEvent):void
            {
                    ADService.send();
            }
            
            private function startTimer():void
            {
                t.start();
            }
            
            private function stopTimer():void
            {
                t.stop();
            }
            
            private function move_pause():void
            {
                move_left.pause();
            }
            
            private function move_resume():void
            {
                move_left.resume();
            }    
            
            private function selectedItem(event:Event):void
            {
                Alert.show(event.target.pointer);
            }

        ]]>
    </fx:Script>

    <fx:Declarations>
        <s:Move id="move_left" target="{dataList}" />
        
    </fx:Declarations>

    <s:layout>
        <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center"/>
    </s:layout>
    
   
<!--    Create a RssItemRenderer as a simple component containing a colored 
image and you will see what I mean.-->    
    <s:Group id="group" width="100%" height="100%" rollOver="move_pause()" 
rollOut="move_resume()">
        <s:List itemRenderer="RssItemRenderer" dataProvider="{ac}" 
                click="selectedItem(event)" contentBackgroundColor="0x000000" 
                borderVisible="true"  id="dataList" moveEffect="move_left">
            <s:layout>
                <s:HorizontalLayout verticalAlign="middle" 
horizontalAlign="center"/>
            </s:layout>    
        </s:List>    
    </s:Group>        
    
</s:Application>