Flex 文字滚动

工作需要，简单demo，直接上图。

遇到的几处需要注意的地方：

1、在所有的 label、box 等 容器啥的加载ok后在执行 move 移动，否则 没效果。愿意貌似 在于渲染的顺序上，未深究。

2、移动的组建 label 或者 text ，他们可以根据文字的多少来取到该组件的宽度。不过去长度之前先要调用  lab.validateNow()，详见API

调用这个方法后，取到的值，才准确。代码中有注释。

原代码如下。

Flex 代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
				creationComplete="init()" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.containers.Box;
			import mx.containers.HBox;
			import mx.containers.VBox;
			import mx.controls.Button;
			import mx.controls.Label;
			import mx.controls.Spacer;
			import mx.core.UIComponent;
			import mx.effects.Move;
			import mx.effects.easing.Linear;
			
			private var box:VBox = new VBox();
			private var labelHieght:int = 30;
			private function init():void
			{
				box.direction = "horizontal";
				box.x = 50;
				box.y = 0;
				box.height = 30;
				box.width = 400;
				box.setStyle('borderColor',0xff0000);
				box.setStyle('borderStyle','solid');
				box.setStyle('borderThickness',2);
				this.addChild(box);
				
				
				lab1.text = "付款申请单--xx冶金有限公司xx冶金有限公司";
				lab2.text = "2013-10-24";
				lab3.text = "进行中...";
				
				box.addChild(hbox);
				
				this.addLabelMove(lab1);
			}
			
			private var amove:Move ;
			private function addLabelMove(lab1:Label):void
			{
				var move:Move  = new Move();
				move.target = lab1;
				
				move.easingFunction = Linear.easeNone;//匀速移动
				lab1.addEventListener(MouseEvent.MOUSE_OUT,move_stop);
				lab1.addEventListener(MouseEvent.MOUSE_OVER,move_do);
				
//				move.xBy = -1000;//按照像素移动
				lab1.validateNow();//注意要调用此方法后才能 使用 lab.textWidth 的值。
				move.xFrom = 240+30;//开始位置。
				move.xTo = 0-lab1.textWidth;//终止位置。
				move.repeatCount = 0; //循环次数 0为不限
				move.repeatDelay = 0; //循环间隔时间 
				move.duration = (lab1.textWidth /50)*1000; //滚动一次所需要的时间 
				move.play();  //开始移动
				amove = move;
			}
			
			/**
			 * 鼠标移开 播放。
			 */ 
			private function move_stop(e:MouseEvent):void
			{
				amove.resume();
			}
			
			/**
			 * 鼠标移入 暂停
			 */ 
			private function move_do(e:MouseEvent):void
			{
				amove.pause();
			}
		]]>
	</mx:Script>
	
	<mx:HBox id="hbox"
			 width="100%" verticalAlign="bottom"
			 verticalScrollPolicy="off" horizontalScrollPolicy="off">
		<mx:Canvas id="cs" width="100%" height="100%" left="0" top="0" verticalScrollPolicy="off" horizontalScrollPolicy="off" >
			<mx:Label id="lab1"
					  truncateToFit="false"
					  mouseChildren="false"
					  useHandCursor="true"
					  buttonMode="true" >
			</mx:Label>
		</mx:Canvas>
		<mx:Label id="lab2" width="20%"/>
		<mx:Label id="lab3" width="20%"/>
	</mx:HBox>	
</mx:Application>