Flash ActionScript 3.0 Resize Event Text

Question

I'm new to flash and actionscript. I'm trying to animate a text, however I couldn't find what I want to do and I don't know how to do it.

I have an actionscript code that creates a typewriter effect on a textfield. After this effect, I want the text to stop for a few seconds, then I want to move it to another place and resize it at the same time. Is this possible? This is my code:

import flash.events.Event;

var myString:String = "LIGA DOS CAMPEÕES";
var myArray:Array = myString.split("");

addEventListener(Event.ENTER_FRAME,frameHandler);
function frameHandler(event:Event):void{
if(myArray.length > 0) {
whiteText.appendText(myArray.shift());
} else {
removeEventListener(Event.ENTER_FRAME,frameHandler);
}
}

Thank's guys!

Answer 1

What you can do is make a function called sleep(), that will do the delay for you, when it finishes you can have it call another function to move and scale your text field, in my example I call it moveAndScaleText (since you're probably using a vector font, scale will work nicely). That could look something like this:

First add this import statement to the top of your code (assuming this is done in timeline):

import flash.utils.getTimer;

Then update your frameHandler() with our soon to be created sleep() function:

function frameHandler(event:Event):void{
    if(myArray.length > 0) {
        whiteText.appendText(myArray.shift());
    } else {
        removeEventListener(Event.ENTER_FRAME, frameHandler) ;
        sleep( 3 ); //run for a 3 second delay, then call moveAndScaleText()
    }
}

The sleep function will take a parameter of time, in seconds. When it has finished it will call the moveAndScaleText function

function sleep( secondsDelay:int ):void {
    var currentTime:int;
    var startTime:int = getTimer();
    var delay:int = secondsDelay * 1000; //convert seconds to ms
    while( currentTime - startTime < delay ) {
        currentTime = getTimer();
    }
    moveAndScaleText(); //call our last function scale text
}

Now for scaling and moving of the textfield. You can do this several different ways, if you use TweenMax Library: in one line of code you can move and scale:

function moveAndScaleText():void {
    TweenMax.to( whiteText, 2, { x: 300, scaleX:2, scaleY: 2} );
}

That will scale its X and Y to 2, and move it to the x position of 300. Obviously that will require to download that library and add it to your project. So another way you could do it is to use the fl package. For this you add these import statements to the top of your code section:

import fl.transitions.Tween;
import fl.transitions.easing.*;

Then in the moveAndScaleText() you do this:

function moveAndScaleText():void {
    new Tween( whiteText, "x", Regular.easeIn, whiteText.x, 300, 3, true );
    new Tween( whiteText, "scaleX", Regular.easeIn, 1, 2, 3, true );
    new Tween( whiteText, "scaleY", Regular.easeIn, 1, 2, 3, true );
}

This is basically saying...

• Move whiteText along the x axis to 300, over 3 seconds

• scaleX and scaleY on whiteText from 1 to 2, over 3 seconds

That is going to be the easiest way for you to implement it programmatically. Another way you can do it is to have an Event.ENTER_FRAME, and move the TextField and scale it by some amount until you hit your desired values. I won't write this one out as I think that is probably pretty obvious, but I can pseudo code it. If you went this route, in your Event.ENTER_FRAME function you would have statements like this:

if ( whiteText.scaleX < 2 ) {
    whiteText.scaleX += 0.1;
    whiteText.scaleY += 0.1;
}
if ( whiteText.x < 300 ) {
    whiteText.x += 1;
}

Those are several ways you can accomplish that task. If it were me I'd probably go the Tween or TweenMax route as those are the best for programmatic animation. Good luck!