Simple actionscript text animation engine

Categories Actionscript

This is a very basic text animation engine, but it allows you to build your own animation styles and it’s fairly easy to understand how it works.

Download the source file..

I developed this animation engine while working on the Semicolon Wars game. The whole purpose was to identify punctuations and blank spaces in any given sentence (it’s a punctuation game). Once the function worked as I wanted, I realized that I can use this function as an animation engine.

How it works.

It takes the string you want to animate and for each character in the string it creates a new MovieClip that contains a dynamic TextField.

ActionScript

  1. function animateText(textToAnimate:String, animationType:String){
  2. var totalCharacters:int = textToAnimate.length;
  3. for (var i:int = 0; i< = totalCharacters; i++)
  4. {
  5. var myChar:charMc = new charMc();
  6. textContainer.addChild(myChar);
  7. var mcRef:MovieClip = myChar as MovieClip;
  8. mcRef.name = "myCharMc" + i;
  9. myChar.letterText.autoSize = TextFieldAutoSize.LEFT;
  10. myChar.letterText.text = textToAnimate.charAt(i);
  11. }
  12. }

To create the charMc class, create a dynamic textfield (embed the font, set the Anti-alias for animation), name it “letterText”. With the textfield selected hit “F8” (convert to symbol), type MovieClip, check the “Export to Actionscript” box and in the Class box name it “charMc”.

Now we have to arrange the MovieClips x, y positions.


ActionScript

  1. function animateText(textToAnimate:String, animationType:String)
  2. {
  3. //clean up
  4. while (textContainer.numChildren > 1)
  5. {
  6. textContainer.removeChildAt(textContainer.numChildren-1);
  7. }
  8.  
  9. var margin:int = 20;
  10.  
  11. var cX:int = margin;
  12. var cY:int = margin;
  13.  
  14. var rightLimit:int = textContainer.width - margin;
  15. var totalCharacters:int = textToAnimate.length;
  16.  
  17. var metrics:TextLineMetrics;
  18.  
  19. for (var i:int = 0; i< = totalCharacters; i++) {
  20. var myChar:charMc = new charMc();
  21. textContainer.addChild(myChar);
  22. var mcRef:MovieClip = myChar as MovieClip;
  23. mcRef.name = "myCharMc" + i;
  24. myChar.letterText.autoSize = TextFieldAutoSize.LEFT;
  25. myChar.letterText.text = textToAnimate.charAt(i);
  26. metrics = myChar.letterText.getLineMetrics(0);
  27.  
  28. if (cX > rightLimit)
  29. {
  30. cY += metrics.height;
  31. cX = margin;
  32. var reverCounter:int = i;
  33. while (textToAnimate.charAt(reverCounter) != " ")
  34. {
  35. reverCounter--;
  36. }
  37. for (var lb:int = reverCounter+1; lb < = i; lb++)
  38. {
  39. var myMc:MovieClip = textContainer.getChildByName("myCharMc" + lb) as MovieClip;
  40. myMc.y = cY;
  41. myMc.x = cX;
  42. metrics = myMc.letterText.getLineMetrics(0);
  43. cX += metrics.width;
  44. }
  45. }
  46. else
  47. {
  48. myChar.x = cX;
  49. myChar.y = cY;
  50. cX += metrics.width;
  51. }
  52. animateMc(mcRef, myComboBox.selectedItem.label, i*0.01);
  53. }
  54. }

The metrics = myMc.letterText.getLineMetrics(0); does the trick we need to correctly space the movieclips.

To animate we create a simple animateMc function:

ActionScript

  1. function animateMc(targetMc:MovieClip, animationType:String, delayAmount:Number){
  2.  
  3. switch(animationType){
  4. case "writeOn":
  5. TweenLite.from(targetMc, 1, {alpha:0, ease:Linear.easeOut, overwrite:true, delay:delayAmount});
  6. break;
  7. case "flyIn":
  8. TweenLite.from(targetMc, 1, {alpha:0, z:-500, ease:Sine.easeOut, overwrite:true, delay:delayAmount});
  9. break;
  10. case "3DSpin":
  11. targetMc.visible=false;
  12. targetMc.z = -500;
  13. var myPath:Array = new Array();
  14. myPath.push({z:-200, rotationX:randRange(-360, 360), rotationY:randRange(-360, 360), rotationZ:randRange(-360, 360)});
  15. myPath.push({z:-400, rotationX:randRange(-360, 360), rotationY:randRange(-360, 360), rotationZ:randRange(-360, 360)});
  16. Tweener.addTween(targetMc, {z:0, rotationX:0, rotationY:0, rotationZ:0, _bezier:myPath, time:3, transition:"easeoutquad", delay:delayAmount, onStart:tweenStart});
  17. break;
  18. case "randomColor":
  19. targetMc.visible=false;
  20. TweenLite.from(targetMc, 2, {tint:randomColors[randRange(0, randomColors.length)], rotationZ:randRange(-360, 360), ease:Linear.easeOut, overwrite:true, delay:delayAmount, onStart:tweenStart});
  21. break;
  22. }
  23.  
  24. function tweenStart(){
  25. targetMc.visible=true;
  26. }
  27.  
  28. }

Thanks to the TweenLite and Tweener tween engines you can easily animate any MovieClip propriety (3D position, alpha, color, blur etc).

Get the source files and make some great animations on your own.

Share this
Facebooktwitter

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *