With the introduction of actionscript 3, one of the classes that came with a lot of new features is the Textfield class. To be more specific, we now have access to more information about the textfields content such as character, paragraphs and line metrics. The goal in this blog post is to show you how you can break any textfield you have created in either the Flash IDE or with actionscript, and animate each character seperately. I know you can achieve the same effect using flashEff for example but if you need something very lightweight and want to experiment with ‘flying characters’ yourself (for free), this is the way to go.
First let’s take a look at the method that make this all possible:
getCharBoundaries(charIndex:int):Rectangle Returns a rectangle that is the bounding box of the character.
So this function of the textfield class will return a rectangle object with the boundaries of a seperate character. More or less like the getBounds() function of a displayobject but now for a seperate character! Just what I needed
So let’s start off with a very simple .fla file ( ) where I have put a dynamic textfield on the stage with some lorem ipsum text. I called it content_txt. It’s important that you embed the font.
Let’s first create a new document class using your favourite editor:
package { import flash.display.MovieClip; import flash.events.MouseEvent; import flash.text.TextField; /** * ... * @author Alwyn Wymeersch */ public class Main extends MovieClip { public var content_txt:TextField; // we store all characters in an array to animate them private var letters:Array; // have we converted the textfield to seperate chars? public var exploded:Boolean = false; public function Main() { init(); } private function init():void { stage.addEventListener(MouseEvent.MOUSE_UP, explodeText); } private function explodeText(e:MouseEvent):void { // see if we already converted to seperate textfields if (exploded) { animateText(); } else { processTextfield(content_txt); } } } }
So what this class will do, is start the explosion when the mouse button is down.
Now in order to have access to each letter seperately, we have to cut up the textField in pieces. Basicly we will create a new textfield for each letter. We do this by looping over the characters, retrieve their position and create a new textfield and put it on that position. I added an additional function processTextfield to do the conversion.
Here is the code (explanation is inline)
private function processTextfield(targetField:TextField):void { if (letters == null) letters = new Array(); // retrieve the text from the textfield var txt:String = targetField.text; // get the length of the text var l:int = txt.length; // don't forget to fetch the textformat so we can // apply this to the letters var format:TextFormat = targetField.getTextFormat(0, l); // loop over the characters for (var i:int = 0; i < l; i++) { // get the position of this character var rect:Rectangle = targetField.getCharBoundaries(i); if (rect) { // a class I've written to make things easier // all you have to do is pass the position in the textfield var ch:Character = new Character(rect.x + targetField.x, rect.y + targetField.y); // set the default format before setting text ch.defaultTextFormat = format; // set the text ch.text = txt.substr(i, 1); // set the char at it's original position ch.toOrigin(); // add to our array for animation letters.push(ch); // add it to the displaylist addChild(ch); } } // and in the end, remove the original textfield removeChild(targetField); exploded = true; animateText(); }
The character class looks like this:
package { import flash.geom.Point; import flash.text.AntiAliasType; import flash.text.TextField; import flash.text.TextFieldAutoSize; /** * ... * @author Alwyn Wymeersch */ public class Character extends TextField { // store the original position of the letter public var originPoint:Point public function Character(originx:int, originy:int) { originPoint = new Point(originx, originy); this.autoSize = TextFieldAutoSize.LEFT; embedFonts = true; selectable = false; antiAliasType = AntiAliasType.ADVANCED; } // positions the letter at it's original position public function toOrigin():void { this.x = originPoint.x; this.y = originPoint.y; } } }
Ok so as you can see, nothing really happens here visually. But what we have actually done is cut up the textfield into all seperate textfield, for each letter one.
Now let’s finish the animateText function and we’re done. First remove the line ch.toOrigin(); from the processTextfield function. We will position it in the animateText function. This is a very basic one where I just animate the 3D rotation and move to a random position on the stage. But you can do many more things so underneath I have added some other (simple) animateText functions for you to play with
But in essence you can go as crazy as you want to.
Btw, I’m using the TweenNano engine but you can use your own personal favourite.
Don’t hesitate to show off your experiments in the comments!
explode effect (example)
private function animateText():void { for each (var ch:Character in letters) { //in this case we will position it on it's original position //but you can also put it at a random position or fixed point //if you want to have an implode effect. ch.toOrigin(); ch.rotationX = 0; ch.rotationY = 0; //animate to a random position with a random rotation TweenNano.to(ch, 1, { x:Math.random() * stage.stageWidth, y:Math.random() * stage.stageHeight, rotationX:Math.random() * 360, rotationY:Math.random() * 360, ease:Strong.easeOut } ); } }
show effect from center of stage (example)
// this function animates the letters from the center of the stage private function animateText():void { var i:int = 0; for each (var ch:Character in letters) { ch.x = stage.stageWidth/2; ch.y = stage.stageHeight / 2; ch.alpha = 0; // animate to a random position with a random rotation TweenNano.to(ch,1, { x:ch.originPoint.x, y:ch.originPoint.y, delay: i * .01, alpha: 1 } ); i++; } }
letter flip effect (example)
// animates the letters from X axis rotation 90 to normal private function animateText():void { var i:int = 0; for each (var ch:Character in letters) { ch.toOrigin(); ch.rotationX = 90; //ch.y += 20 ch.alpha = 0; // animate to a random position with a random rotation TweenNano.to(ch,1, { x:ch.originPoint.x, rotationX:0, delay: i * .01, alpha: 1 } ); i++; } }
You will notice that the text gets blurry after setting a rotation or position in 3D space. I will cover a technique to fix this in another post.
And to close the blog, here is an example I used for a christmas card (code not included but it’s using the native 3D api from FP 10 and the bezierThrough function of TweenMax)
Full zip file with all files can be found here


[...] This post was mentioned on Twitter by HowDo.us, CT. CT said: Adobe Tips & News: Creating cool text effects with actionscript 3: With the introduction of actionscript 3, one of … http://bit.ly/4uzyoa [...]
If you havent been back to the GreenSock website lately, and you like this post, you will love this: http://blog.greensock.com/splittextfield/
thank so much for sharing some source code
Thank you for the nice tutorial!
Looking forward to more of this…
hello
I would like to know how to auto play the animation without “events.MouseEvent”
best regards
Hi ihueb. Instead of attaching a function to a specific event, you can also call the function directly.
In this case, the function requires an event object as a parameter so you have two options:
1. you create a new function without event parameters and call this in the constructor of your document class (or on the timeline).
2. you call the event handler function but pass in null as a parameter:
For more information about calling event handler functions without triggering the event take a look at this post
I am having general problems about my text blurring after rotating in 3D space – anyone who managed to find a fix / workaround for this?
The blurring is inevitable with native 3D. There are some techniques that you can use to fix this issue.
1. Delete the Matrix3D transformation information from the object after the animation is done. Be aware that after you do this, you must set the correct x and y locations afterwards because else your object ends up at position 0,0 (this is the default if no transformations, such as translation, are set). I usually do it like this:
2. Take a look at this url. It doesn’t always work but it works great in some cases
http://www.flashandmath.com/flashcs4/blursol/index.html
Hey man! many many thanks for these classes!!! they work just great…
keep the good work!