Custom background on an animated TextField
I thought I could share a piece of code.
This is a work in progress, but I thought this could come in handy to someone out there.
import av.events.SiteEvent; import av.utils.LoadFont; import av.effects.BackgroundText; var font1:LoadFont = new LoadFont("fonts/AauxProBold.swf"); font1.addEventListener(SiteEvent.LOAD_FONT_COMPLETE, loadComplete); var style:TextFormat; var texts:Array = [ "Hello! I created this Class as an Example for Creating multiple lines using only one String.", "I added a background because as you know, the 'backgroundColor' property of a TextField() sucks!!!", "This was made for a very specific purpose, but I thought maybe this could be helpful to someone.", "This is just and experiment. It´s not ready for a public release yet, so feel free to download the source and use it as you like." ]; var actual:Number; function loadComplete(e:SiteEvent):void { style= new TextFormat("AauxProBold", 16, 0xFFFFFF); style.letterSpacing = 0; style.kerning = true; style.align = "left"; DemoSTART(); } function DemoSTART():void { actual = 0; var _title:BackgroundText = new BackgroundText(); _title.y = 50; _title.addEventListener("ALL_DONE", DemoEND); addChild(_title) for(var i:uint=0;i<texts.length;++i) { _title.Config(texts[i], style, 150); } _title.animIN(); } function DemoEND(e:Event):void { trace("Acabou"); var _over:Sprite = new Sprite(); _over.addEventListener(MouseEvent.CLICK, doRestart); _over.buttonMode = true; addChild(_over); _over.graphics.clear(); _over.graphics.beginFill(0,0) _over.graphics.drawRect(0,0,400,300) _over.graphics.endFill(); var tf:TextField = new TextField(); tf.text = " CLICK ANYWHERE TO RESTART"; tf.autoSize = "left"; tf.border = true; tf.borderColor = 0xFF0000; tf.selectable = false; tf.mouseEnabled = false; tf.embedFonts = true; tf.defaultTextFormat = style; tf.setTextFormat(style); _over.addChild(tf); tf.x = (400/2) - (tf.width/2); tf.y = (300/2) - (tf.height/2); } function doRestart(e:MouseEvent):void { var total:uint =numChildren-1 for(var i:uint = 0;i <total;++i) { removeChildAt(1); } DemoSTART(); }
package av.effects { import flash.display.Sprite; import flash.events.Event; import flash.text.TextField; import flash.text.TextFormat; import flash.text.TextLineMetrics; import flash.utils.setTimeout; import gs.TweenLite; import gs.easing.*; public class BackgroundText extends Sprite { private var dados:Array = []; private var currentTween:uint = 0; private var assets:Array = []; private var txt:TextField; private var tf:TextFormat; public function BackgroundText() { addEventListener("ANIM_IN_COMPLETE", checkForNewMessages); addEventListener("ANIM_OUT_COMPLETE", loadNextIfAny); } public function Config(_texto:String, _textFormat:TextFormat, _width:uint):void { tf = _textFormat; txt = new TextField(); txt.width = _width; txt.wordWrap = true; txt.autoSize = "left"; txt.text = _texto; var frases:Array = []; for(var i:uint = 0;i<txt.numLines;i++) { var OBJ:Object = new Object(); OBJ.__text = txt.getLineText(i); OBJ.__x = 0; OBJ.__y = 22 * i; OBJ.__delay = .3 * i; frases.push(OBJ); } dados.push(frases); } private function checkForNewMessages(e:Event):void { //trace("IN complete"); currentTween++ if(currentTween<dados.length) { setTimeout(animOUT, 4000); } else { dispatchEvent(new Event("ALL_DONE")); } } private function loadNextIfAny(e:Event):void { //trace("OUT complete"); if(currentTween<dados.length) { animIN() } } public function animIN():void { for(var i:uint = 0;i<dados[currentTween].length;i++) { setBackground(dados[currentTween][i].__text, dados[currentTween][i].__x, dados[currentTween][i].__y, dados[currentTween][i].__delay, i<dados[currentTween].length-1 ? false : true); } } private function setBackground(__texto:String, __x:int, __y:int, __delay:Number, _isLast:Boolean = false):void { var temp:Sprite = new Sprite(); var tempBG:Sprite = new Sprite() var tempTXT:Sprite = new Sprite() var mascara:Sprite = new Sprite(); addChild(temp); addChild(mascara); temp.addChild(tempBG); temp.addChild(tempTXT); temp.x = __x; temp.y = __y; mascara.x = __x; mascara.y = __y; tempBG.graphics.beginFill(0x6699cc); tempBG.graphics.drawRect(0, 0, 10, 10); tempBG.graphics.endFill() mascara.graphics.beginFill(0x000000,0); mascara.graphics.drawRect(0, 0, 10, 10); mascara.graphics.endFill() var txt:TextField = new TextField(); txt.text = __texto; txt.textColor = 0xFFFFFF; txt.autoSize = "left"; txt.selectable = false; txt.embedFonts = true; txt.defaultTextFormat = tf; txt.setTextFormat(tf); temp.addChild(txt); var tlm:TextLineMetrics = txt.getLineMetrics(0); tempBG.width = txt.width; tempBG.y = tlm.descent; tempBG.height = tlm.ascent + tlm.descent; temp.mask = mascara; mascara.width = 0; mascara.height = txt.height; assets.push(mascara); TweenLite.to(mascara, .5, {width: txt.width, delay:__delay,ease:Quad.easeInOut, onComplete:function():void { if(_isLast)dispatchEvent(new Event("ANIM_IN_COMPLETE")); }}); } public function animOUT():void { assets.reverse(); for(var i:int = 0;i<assets.length;++i) { if(i<assets.length-1) { TweenLite.to(assets[i], .5, {width: 0, delay:.3 * i, ease:Quad.easeInOut}); } else { TweenLite.to(assets[i], .5, {width: 0, delay:.3 * i, ease:Quad.easeInOut, onComplete:function():void { var total:uint = numChildren; for(var i:uint = 0; i<numChildren;++i) { removeChildAt(0); } dispatchEvent(new Event("ANIM_OUT_COMPLETE")); }}) } } assets = []; } } }


