FLEX3的图片文字滚动效果

网上有不少的例子的。我这里就不用再写相同的代码了。

主要作用方便自己查看：

这段代码中包含了两种实现方式，一种是通过TIMER控件去计算图片的X点。来具体控制。另外一种是用自带的特效MOVE来实现.
代码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
				creationComplete="application1_creationCompleteHandler(event)" 
				layout="absolute" minWidth="450" minHeight="120">
	<mx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			
			private var picW:int =150;
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				canTest.getChildAt(0).x  =0;
				canTest.getChildAt(0).y=0;
				for(var i:int =1;i<canTest.getChildren().length;i++){
					canTest.getChildAt(i).x= canTest.getChildAt(i-1).x+picW;
					canTest.getChildAt(i).y=canTest.getChildAt(i-1).y;
				}
				
				var timer:Timer = new Timer(24);
				timer.addEventListener(TimerEvent.TIMER,scrollPics);
				timer.start();
				/*****用特效 move 来实现文字图片滚动效果 （向上）*****/
				move_up.yFrom = cs.height - 6;   
				move_up.yTo = 0 - moveText.height + 6; 
				move_up.repeatCount = 0; //loop 
				move_up.repeatDelay = 0; //loop time 
				move_up.duration = 10000; //the time of scroll once 		
				move_up.play(); 
				
				/*****用特效 move 来实现文字图片滚动效果（向左）*****/
				move_left.xFrom = cs.width - 6;   //"加6减6是为了首尾连接更加自然"
				move_left.xTo = 0 - tt.width + 6;  //同上
				move_left.repeatCount = 0;    //无限次重复
				move_left.repeatDelay = 0;    //重复时间，毫秒
				move_left.duration = 10000;    //滚动一次的时间，毫秒
				move_left.play();

			}

			private function scrollPics(event:TimerEvent):void{
				for(var j:uint = 0; j<canTest.getChildren().length;j++){
					var temp:Image= canTest.getChildAt(j) as Image;
					temp.x-=1;
					if(temp.x<=-picW){
						temp.x= canTest.width;
					}
				}
			}
			
			private function move_pause():void 
			{ 
				move_up.pause();  //pause 
			} 
			
			private function move_resume():void 	
			{ 
				move_up.resume(); //start from the pause position 
			} 

			private function moveLeft_pause():void 
			{ 
				move_left.pause();  //pause 
			} 
			
			private function moveLeft_resume():void 	
			{ 
				move_left.resume(); //start from the pause position 
			} 
		]]>
	</mx:Script>
	<mx:Canvas top="10" left="10" width="500" height="120" id="canTest" horizontalScrollPolicy="on" verticalScrollPolicy="on">
		<mx:Image  x="0" y="0" source="assets/1.jpg"/>
		<mx:Image  x="150" y="0" source="assets/2.jpg"/>
		<mx:Image  x="300" y="0" source="assets/3.jpg"/>
		<mx:Image  x="450" y="0" source="assets/4.jpg"/>
	</mx:Canvas>
	
	<mx:Move id="move_up" target="{moveText}" />
	<mx:Canvas id="cs" width="500" height="100%" left="10" top="200"  verticalScrollPolicy="off" mouseOver="move_pause()" mouseOut="move_resume()"> 
	
	<mx:Text id="moveText" width="94%" horizontalCenter="0" 
			 text="无我编程：理解和接受自己会犯错误。关键是要尽早发现，在错误进入到最终产品前发现它们。幸运的是，除了我们少数几个在喷气推进实验所开发火箭导航系统的人外，在软件行业中犯错误通常不会导致灾难性事故。我们可以，也应该从错误中吸取教训，微笑，并继续前进。" verticalCenter="0"
			 fontSize="13" color="#aaaaaa"> 
		
	</mx:Text> 
	
	</mx:Canvas>
	<mx:Move id="move_left" target="{tt}" /> 
	<mx:Canvas id="cs1" left="520" top="10"  right="10"
			   verticalScrollPolicy="off" mouseOver="moveLeft_pause()" mouseOut="moveLeft_resume()" horizontalScrollPolicy="off" fontWeight="bold" fontSize="13" height="76">
		<mx:Image x="10" y="-11" source="assets/4.jpg" id="tt"/>
	</mx:Canvas>
</mx:Application>