Marcela channeling Margeeka

But he says he loves me

About two years ago, I thought XPath for AS2 was the bees knees. That was back before I’d switched to AS3 and encountered the power and ease-of-use of E4X.

Making the switch has turned out to be something like leaving an abusive spouse and then marrying someone who brings you breakfast in bed every day.

Unfortunately, one of my pre-switch projects needed a touch up this week and I was forced to deal with my ex. I had to wrestle with it a bit, but I eventually got it to do what I needed, and I consoled myself with the notion that by this time next week, I would be back with my sweetheart E4X, and XPath would once again be a distant memory.

I try to wrap up my techy posts in metaphors so my non-techy followers aren’t too put off by them. I’m sure it’s as effective as trying to hide a pill in some cat food.

Second AS3 Snippet of the day…

A coworker and I drove ourselves halfway to insanity trying to figure out why the number Powerpoint was spitting out as a color wasn’t translating correctly when we used it in Flash.

I vaguely remembered something about the number being a decimal representation of the RGB values instead of the hex values, so after much Googling and translating from VB to AS3, I give you:

function decToColor(dec:Number):Number {
	var red:int = Math.floor(dec & 0xFF);
	var green:int = Math.floor((dec & 0xFF00) / 256);
	var blue:int = Math.floor(dec / 65536);
	
	return red<<16 | green<<8 | blue;
}

AS3 Tip

With AS3.0, we’ve been given a pretty cool new method for the TextField class: getCharBoundaries. This method returns the bounding box (in the form of a Rectangle) for a specified character in the TextField.

Here’s a way to animate a TextField to make it look as though it’s being typed, letter by letter, onto the stage:

/**
 * Create a "typing" effect on a TextField instance
 * @param	myRoot		the "root" displayObject which will parent the mask (should be the same as your TextField's parent)
 * @param	txtField	the instance of TextField to be animated
 * @param	time		the total amount of time allotted for the animation (leave blank for the default)
 */
public static function animateText(myRoot:DisplayObjectContainer, txtField:TextField, time:Number = 0):void {
	// If no time is specified, default to 0.1 second per character
	if (time == 0) time = (txtField.length * 100) / 1000;

	var txtMask:Sprite = new Sprite();
	txtField.mask = txtMask;
	// You should probably start your TextField out hidden in some way
	txtField.alpha = 1;
	txtField.visible = true;

	txtMask.x = txtField.x;
	txtMask.y = txtField.y;
	myRoot.addChild(txtMask);

	var g:Graphics = txtMask.graphics;
	g.lineStyle(0, 0, 0);

	/* Set up a timer to perform the "animation." Find out the length of time 
	 * for each letter by dividing the provided time by the length of the field */
	var maskAnim:Timer = new Timer((time * 1000)/txtField.length, txtField.length);

	var letterRect:Rectangle;
	maskAnim.addEventListener(TimerEvent.TIMER, function(e:TimerEvent) {
		// For each letter in the TextField, draw a rectangle on the mask
		letterRect = txtField.getCharBoundaries(maskAnim.currentCount-1);
		g.beginFill(0, 1);
		g.drawRect(letterRect.x, letterRect.y, letterRect.width, letterRect.height);
		g.endFill();
	});

	maskAnim.addEventListener(TimerEvent.TIMER_COMPLETE, function(e:TimerEvent) {
		// Once the animation is complete, remove and dispose of the mask
		txtField.mask = null;
		myRoot.removeChild(txtMask);
		txtMask = null;
	});

	maskAnim.start();
}