flex中实现marquee效果（由下而上滚动）

 

     最近做一个小项目需要用到这个效果，今天项目完成，将这个效果拿出与大家分享。原理其实就是使用一个Text（或者TextArea）控件，然后添加一个Move效果，使Text控件向上移动。其中关键的一点是：在creationComplete事件中获取控件高度，否则会出现高度误差偏大。源代码如下：

<? xml version="1.0" encoding="utf-8" ?>
< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  
    creationComplete ="complete()" >
     < mx:Script >
         <![CDATA[
            private function complete():void
            {
                move_up.yFrom = cs.height - 6;    //"加6减6是为了首尾连接更加自然"
                move_up.yTo = 0 - tt.height + 6;  //同上
                move_up.repeatCount = 0; //无限次重复
                move_up.repeatDelay = 0; //重复时间，毫秒
                move_up.duration = 6000; //滚动一次的时间，毫秒
                move_up.play();
            }
            
            private function move_pause():void
            {
                move_up.pause();  //暂停
            }
            
            private function move_resume():void
            {
                move_up.resume(); //从暂停位置开始
            }
         ]]>
     </ mx:Script >
     < mx:Move  id ="move_up"  target ="{tt}"   />
     < mx:Panel  width ="250"  height ="200"  layout ="absolute"  title ="公告栏"  
        fontSize ="13"  horizontalCenter ="0"  verticalCenter ="0" >
         < mx:Canvas  id ="cs"  width ="100%"  height ="100%"  left ="0"  top ="0"  
            verticalScrollPolicy ="off"  mouseOver ="move_pause()"  mouseOut ="move_resume()" >
             < mx:Text  id ="tt"  width ="94%"  horizontalCenter ="0"
                text ="表面上看，文字由下向上滚动，其实是Text控件在滚动。"  verticalCenter ="0" >
             </ mx:Text >
         </ mx:Canvas >
     </ mx:Panel >
</ mx:Application >