Animating text fields with Actionscript

March 11th, 2009

The Flash plugin is required to view this object.

Well after a little period of no posts due to being insanely busy, I thought I would share a little technique I discovered through trial and error and a little thought. Ever wanted to tween individual letters from a text field with AS3 rather than on the time line in flash? Well it is incredibly easy!
Firstly you need to create your text in the Flash authoring tool, and then after adding the text field to a container MovieClip or Sprite you simply break it apart once so that the text is separated.
Once this is done either on the main timeline or in your document class you can target the texts by targeting the container sprite's children with getChildAt(); during a for loop:

PLAIN TEXT
Actionscript:
  1. function startAnim():void
  2. {
  3.     for(var j:uint = 0; j <textHolder.numChildren; j++){
  4.         obArray[j] = textHolder.getChildAt(j);
  5.     }
  6.     for(var i:uint = 0; i <obArray.length; i++){       
  7.         holderArray[i] = new MovieClip();
  8.         addChild(holderArray[i]);
  9.         holderArray[i].addChild(obArray[i]);
  10.         holderArray[i].z = -5000;
  11.         holderArray[i].x = 1068;
  12.         holderArray[i].y = 68;
  13.         holderArray[i].filters = [blur, drop];
  14.     }
  15. }

You can then add the children to their own individual container sprite as you can see and then target that sprite in order to transform any property, including filters and its stage position.

PLAIN TEXT
Actionscript:
  1. function next(e:TimerEvent):void
  2. {
  3.     timer.stop();
  4.     timer.removeEventListener(TimerEvent.TIMER, next);
  5.     addEventListener(Event.ENTER_FRAME, loop);
  6.     for(var i:uint = 0; i <holderArray.length; i++){
  7.         var delayTime:Number = Math.random()*4;
  8.         var tween1:GTween = new GTween(holderArray[i], .8,{y: -500,
  9.                             delay: delayTime},{ease:Bounce.easeOut});
  10.     }
  11.     timer =  new Timer(4000, 0);
  12.     timer.addEventListener(TimerEvent.TIMER, init);
  13.     timer.start();
  14. }

Cue another spate of crappy banner ads.......!!!

Get the source here.

Categories: Actionscript 3.0, Text | Tags: , ,

« Simple but effective button transition in AS3
Scrollbar video tutorial featured on new site Flash.tutsplus.com! »

1 Comment

  1. Animating text fields with Actionscript « RIAdobe March 12th, 2009

    [...] http://ultravisual.co.uk/blog/2009/03/11/animating-text-fields-with-actionscript/ [...]

Leave a comment