Flex “跑马灯”效果（自定义“跑马灯”控件）
自定义类(BroadCastMarquee.as)： package marquee { import flash.events.MouseEvent; import flash.events.TimerEvent; import flash.geom.Rectangle; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFormat; import flash.utils.Timer; import mx.core.UIComponent; /** * * 信息滚动显示(跑马灯控件) * @version * <pre> * 修改版本: 1.0.0 * 修改日期：2009-1-15 * 修改人 : zhang * 修改说明：形成初始版本 *</pre> * * * 功能： * 1.直接将某TextField转换为跑马灯文本 changeTextFieldToMarqueeText * 2.动态设定显示宽度 width * 3.动态设定一次移动间隔时间 delay * 4.动态设定一次移动间隔距离 step * 5.设定默认文本显示样式 defaultTextFormat * 6.动态设定文本显示样式 setTextFormat * */ public class BroadCastMarquee extends UIComponent { [Bindable] private var broadcastText:String="broadcast message"; private var m_timer:Timer; private var m_DefaultText_X:Number=0; //每次移动距离 private var m_step:Number=10; //滚动范围 private var m_rect:Rectangle; //移动时间间隔 private var t_delay:Number=100; //广播信息滚动宽度 private var m_Width:Number; //滚动方向属性 [Inspectable(defaultValue="left",enumeration="right,left", category="direction", type="String")] public var ScrollDirection:String="left"; //显示内容样式 [Bindable] private var m_TextFormat:TextFormat=new TextFormat("Verdana","10","#0b333c"); /**广播信息内容显示控件*/ private var m_BroadCastText:TextField; // private var m_BroadcastLabel:Label; public function BroadCastMarquee() { super(); InitBroadcast(); addEventListener(MouseEvent.MOUSE_OVER,rollOverHandler); addEventListener(MouseEvent.ROLL_OUT, rollOutHandler); } /**初始化*/ private function InitBroadcast():void { /**广播信息显示控件初始化*/ m_BroadCastText=new TextField(); m_BroadCastText.autoSize=TextFieldAutoSize.LEFT; m_BroadCastText.multiline=false; m_BroadCastText.selectable=false; m_BroadCastText.x=m_BroadCastText.y=m_DefaultText_X m_BroadCastText.wordWrap=false; m_BroadCastText.text=broadcastText; //m_BroadCastText.defaultTextFormat=m_TextFormat; addChild(m_BroadCastText); this.m_Width=this.width; m_rect=new Rectangle(0,0,this.width,this.m_BroadCastText.textHeight); this.m_BroadCastText.scrollRect=m_rect; m_timer = new Timer(t_delay); ScrollBroadText(); } /** * 如果有新的广播消息,或者长度改变进行滚动显示 * */ private function ScrollBroadText():void { if(this.m_timer!=null) { //停止移动 StopMoveBroadcast(); if(this.broadcastText!="") { m_timer.addEventListener(TimerEvent.TIMER, timerhandler); m_timer.start(); } // Math.abs( } } /**控制滚动信息*/ private function timerhandler(evt:TimerEvent):void { if(this.m_BroadCastText.textWidth>0) { if(ScrollDirection.toLowerCase()=="left") { if(m_rect.x<=this.m_BroadCastText.textWidth) { // this.m_BroadCastText.x+=(-this.m_step); m_rect.x+=this.m_step; }else { //this.m_BroadCastText.x=m_DefaultText_X+this.m_BroadCastText.textWidth; m_rect.x=-(m_DefaultText_X+this.m_Width); } }else { if(Math.abs(m_rect.x)<=this.m_BroadCastText.textWidth) { m_rect.x-=this.m_step; }else { this.m_rect.x=m_DefaultText_X; } } m_BroadCastText.scrollRect = m_rect; }else { //停止移动 StopMoveBroadcast(); } } /**停止移动*/ private function StopMoveBroadcast():void { if(m_timer!=null) { this.m_timer.stop(); if(m_timer.hasEventListener(TimerEvent.TIMER)) m_timer.removeEventListener(TimerEvent.TIMER, timerhandler); m_BroadCastText.x=this.m_DefaultText_X; m_rect.height = m_BroadCastText.height; // this.height=m_rect.height; m_BroadCastText.scrollRect = m_rect; } } /**************************广播信息处理事件*********************************/ /**鼠标经过处理事件*/ protected function rollOverHandler(event:MouseEvent):void { if(this.m_timer!=null&&this.broadcastText!="") { this.m_timer.stop(); } } /**鼠标离开处理事件*/ protected function rollOutHandler(event:MouseEvent):void { if(this.m_timer!=null&&this.broadcastText!="") { this.m_timer.start(); } } /**************************广播信息属性*************************************/ /**移动时间间隔*/ public function set BroadCastDeplay(value:Number):void { this.m_timer.delay=value; } /**设置广播信息内容*/ public function set BroadCastText(value:String):void { this.m_BroadCastText.text=value; ScrollBroadText(); } /**取得广播信息内容*/ public function get BroadCastText():String { return this.broadcastText; } /**广播信息宽度宽度*/ public override function get width():Number { return this.m_Width; } public override function set width(width:Number):void { this.m_Width=width; this.m_rect.width=this.m_Width; this.m_BroadCastText.scrollRect=this.m_rect; ScrollBroadText(); // this.m_BroadCastText.setTextFormat } /**设置滚动方向('left' or 'right')*/ public function set Direction(value:String):void { this.ScrollDirection=value; ScrollBroadText(); } /**设置字体格式化样式*/ public function set defaultTextFormat(format:TextFormat):void { this.m_BroadCastText.defaultTextFormat=format; this.setTextFormat(format); // } public function setTextFormat(format:TextFormat, beginIndex:int = -1, endIndex:int = -1):void { m_BroadCastText.setTextFormat(format, beginIndex, endIndex); ScrollBroadText(); } /**字体大小*/ public function set fontSize(value:Object):void { this.m_TextFormat=new TextFormat(this.m_TextFormat.font,value,this.m_TextFormat.color); this.m_BroadCastText.setTextFormat(this.m_TextFormat,-1,-1); } /**字体名称*/ public function set fontFamily(value:String):void { this.m_TextFormat=new TextFormat(value,this.m_TextFormat.size,this.m_TextFormat.color); this.m_BroadCastText.setTextFormat(this.m_TextFormat,-1,-1); } /**字体颜色*/ public function set color(value:Object):void { this.m_TextFormat=new TextFormat(this.m_TextFormat.font,this.m_TextFormat.size,value); this.m_BroadCastText.setTextFormat(this.m_TextFormat,-1,-1); } /**是否是粗体*/ public function set fontWeight(value:Object):void { this.m_TextFormat=new TextFormat(this.m_TextFormat.font,this.m_TextFormat.size,this.m_TextFormat.color,value) this.m_BroadCastText.setTextFormat(this.m_TextFormat,-1,-1); } } }
TestBroadCastMarquee.mxml :
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" xmlns:marquee="marquee.*"> <marquee:BroadCastMarquee width="500" height="25" BroadCastDeplay="800" BroadCastText="公告：火爆商品等你拿!" ScrollDirection="left"> </marquee:BroadCastMarquee> </mx:Application>
--------------------------------------------------------------------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ private function fade_click():void { fader.stop(); fader.play([box]); } private function wipe_click():void { wiper.stop(); wiper.play([box]); } ]]> </mx:Script> <mx:Sequence id="fader"> <mx:Fade alphaFrom="0.0" alphaTo="1.0" /> <mx:Pause duration="{slider.value}" /> <mx:Fade alphaFrom="1.0" alphaTo="0.0" /> </mx:Sequence> <mx:Sequence id="wiper"> <mx:SetPropertyAction name="alpha" value="1.0" /> <mx:WipeRight showTarget="true" /> <mx:Pause duration="{slider.value}" /> <mx:WipeRight showTarget="false" /> <mx:SetPropertyAction name="alpha" value="0.0" /> </mx:Sequence> <mx:ApplicationControlBar dock="true"> <mx:Button label="fade box" click="fade_click();" /> <mx:Button label="wipe box" click="wipe_click();" /> <mx:Spacer width="100%" /> <mx:Label text="effect pause ({slider.value} ms):" /> <mx:HSlider id="slider" minimum="1000" maximum="3000" value="1500" labels="[1000,2000,3000]" liveDragging="true" showTrackHighlight="true" snapInterval="100" tickInterval="500" dataTipPrecision="0" /> </mx:ApplicationControlBar> <mx:Box id="box" width="100%" height="100%" backgroundColor="haloSilver" alpha="0.0" /> </mx:Application>
