Using the Tween Class for Text Effects

In this part of the tutorial, we apply our method to create text effects. In the two applets below, the individual letters F, L, A, S, H have been created on the Stage in advance and converted to MovieClips with instance names mcF, mcL, etc. Again, we do not apply tweens to the coordinates of the clips directly. We create an auxiliary object, 'paramObj'. This time the object has five properties: tF, tL, and so on. We create a tween for each property and then use the tweened values to create motion for each letter along a circle in the first applet, and along a spiral in the second version.

Circular Text Effect

Spiral Text Effect

Download

Download the fla files for the applets above.

The Code for the Circular Effect

Note that the Individual movieclips for the letters F, L, A, S, and H have been created on the stage in advance.

The following classes are needed for this application.

import fl.transitions.Tween;

import fl.transitions.TweenEvent;

import fl.transitions.easing.*;

We set the easing function here for easy access. For the "circle text" example we use the Bounce.easeOut function shown below, for the "spiral text" example, we replace this with Back.easeInOut.

var curEase:Function = Back.easeInOut;

We create an object with 5 parameters, one for each moving letter.

var paramObj:Object = {tF:0,tL:0,tA:0,tS:0,tH:0};

We will use a separate tween to move each individual letter.

var twF:Tween;

var twL:Tween;

var twA:Tween;

var twS:Tween;

var twH:Tween;

When the play button is clicked, we construct the tweens with slightly staggered running times. Notice that we can use the same paramObj for each, but each is moved based on a separate parameter. On each of the tween's change events, we call the moveLetter function which moves all five letters according to the respective changing property of the paramObj object.

btnPlay.addEventListener(MouseEvent.CLICK, startMotion);

 

function startMotion(me:MouseEvent):void {

twF= new Tween(paramObj, "tF", curEase, 0, startF, 8, true);

twL= new Tween(paramObj, "tL", curEase, 0, startL, 8.5, true);

twA= new Tween(paramObj, "tA", curEase, 0, startA, 9, true);

twS= new Tween(paramObj, "tS", curEase, 0, startS, 9.5, true);

twH= new Tween(paramObj, "tH", curEase, 0, startH, 10, true);

 

twF.addEventListener(TweenEvent.MOTION_CHANGE, moveLetters);

twL.addEventListener(TweenEvent.MOTION_CHANGE, moveLetters);

twA.addEventListener(TweenEvent.MOTION_CHANGE, moveLetters);

twS.addEventListener(TweenEvent.MOTION_CHANGE, moveLetters);

twH.addEventListener(TweenEvent.MOTION_CHANGE, moveLetters);

 

twF.addEventListener(TweenEvent.MOTION_FINISH, stopF);

twL.addEventListener(TweenEvent.MOTION_FINISH, stopL);

twA.addEventListener(TweenEvent.MOTION_FINISH, stopA);

twS.addEventListener(TweenEvent.MOTION_FINISH, stopS);

twH.addEventListener(TweenEvent.MOTION_FINISH, stopH);

 

btnPlay.visible = false;

}

function moveLetters(tevt:TweenEvent):void {

mcF.x = fF(startF-paramObj.tF).x;

mcF.y = fF(startF-paramObj.tF).y;

mcF.rotation = paramObj.tF - startF;

 

mcL.x = fL(startL-paramObj.tL).x;

mcL.y = fL(startL-paramObj.tL).y;

mcL.rotation = paramObj.tL - startL;

 

mcA.x = fA(startA-paramObj.tA).x;

mcA.y = fA(startA-paramObj.tA).y;

mcA.rotation = paramObj.tA - startA;

 

mcS.x = fS(startS-paramObj.tS).x;

mcS.y = fS(startS-paramObj.tS).y;

mcS.rotation = paramObj.tS - startS;

 

mcH.x = fH(startH-paramObj.tH).x;

mcH.y = fH(startH-paramObj.tH).y;

mcH.rotation = paramObj.tH - startH;

}

Each letter's tween has its own "stop event" so that the correct listeners are removed as each tween is finished.

function stopF(tevt:TweenEvent):void {

twF.removeEventListener(TweenEvent.MOTION_CHANGE, moveLetters);

twF.removeEventListener(TweenEvent.MOTION_FINISH, stopF);

}

 

function stopL(tevt:TweenEvent):void {

twL.removeEventListener(TweenEvent.MOTION_CHANGE, moveLetters);

twL.removeEventListener(TweenEvent.MOTION_FINISH, stopL);

}

 

function stopA(tevt:TweenEvent):void {

twA.removeEventListener(TweenEvent.MOTION_CHANGE, moveLetters);

twA.removeEventListener(TweenEvent.MOTION_FINISH, stopA);

}

 

function stopS(tevt:TweenEvent):void {

twS.removeEventListener(TweenEvent.MOTION_CHANGE, moveLetters);

twS.removeEventListener(TweenEvent.MOTION_FINISH, stopS);

}

 

function stopH(tevt:TweenEvent):void {

twH.removeEventListener(TweenEvent.MOTION_CHANGE, moveLetters);

twH.removeEventListener(TweenEvent.MOTION_FINISH, stopH);

btnSetup.visible = true;

}

The functions that govern the motion of the five letters can be customized independently. The ones shown below move the letters in circular arcs for the "circle text" example. See the source file tween_spiraltext.fla to see the functions that accomplish the spiral effect.

function fF(p:Number):Point {

var thisX:Number = 250 + 100*Math.cos(Math.PI/180 * p);

var thisY:Number = 300 - 100*Math.sin(Math.PI/180 * p);

return( new Point(thisX, thisY) );

}

function fL(p:Number):Point {

var thisX:Number = 250 + 125*Math.cos(Math.PI/180 * p);

var thisY:Number = 300 - 125*Math.sin(Math.PI/180 * p);

return( new Point(thisX, thisY) );

}

function fA(p:Number):Point {

var thisX:Number = 250 + 150*Math.cos(Math.PI/180 * p);

var thisY:Number = 300 - 150*Math.sin(Math.PI/180 * p);

return( new Point(thisX, thisY) );

}

function fS(p:Number):Point {

var thisX:Number = 250 + 175*Math.cos(Math.PI/180 * p);

var thisY:Number = 300 - 175*Math.sin(Math.PI/180 * p);

return( new Point(thisX, thisY) );

}

function fH(p:Number):Point {

var thisX:Number = 250 + 200*Math.cos(Math.PI/180 * p);

var thisY:Number = 300 - 200*Math.sin(Math.PI/180 * p);

return( new Point(thisX, thisY) );

}

The following variables will hold the starting parameter for each letter.

var startF:Number;

var startL:Number;

var startA:Number;

var startS:Number;

var startH:Number;

When the set up button is pressed, we hide it and show the play button, and then pick a random starting parameter for each letter and place the letter there.

btnSetup.addEventListener(MouseEvent.CLICK, setUp);

 

function setUp(mevt:MouseEvent):void {

btnSetup.visible = false;

btnPlay.visible = true;

 

startF= 200+300*Math.random();

startL= 200+300*Math.random();

startA= 200+300*Math.random();

startS= 200+300*Math.random();

startH= 200+300*Math.random();

 

mcF.x = fF(startF).x;

mcF.y = fF(startF).y;

mcF.rotation = -startF;

 

mcL.x = fL(startL).x;

mcL.y = fL(startL).y;

mcL.rotation = -startL;

 

mcA.x = fA(startA).x;

mcA.y = fA(startA).y;

mcA.rotation = -startA;

 

mcS.x = fS(startS).x;

mcS.y = fS(startS).y;

mcS.rotation = -startS;

 

mcH.x = fH(startH).x;

mcH.y = fH(startH).y;

mcH.rotation = -startH;

}

Hide the play button when the app is started.

btnPlay.visible = false;

Back to Intermediate Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.