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.

Get Adobe Flash player



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 = [];
 
		}
	}
}

Comments are closed.