ActionScript

This effect will allow you to animate text using actionscript. It takes less work than tweening and will drop your load time. Before we start, you must have a decent knowledge of manipulating movie clips, and a basic knowledge of actionscript. Since this effect animates the text using actionscript there will be quite a bit of actionscript involved, but I will explain each line at the end of the tutorial. To download the partial source, click here.

You will create an animation similar to the following animation:

[ text animated and appearing entirely in ActionScript ]

If you downloaded the partial source, read through steps 1, 2, and 3, but you do not have to do them because they are already done for you, but you do need to know how to do them to achieve the effect, when you duplicate this effect on your own.

1. To start you must create a dynamic text box (it doesn’t have to be very large, and give it the variable name “text”. You must also chose to include the entire font outline by pressing the button in the bottom right hand corner.

[ the text options panel ]

2. Once you have created the text box, select it and press F8 to convert it to a Movie Clip. You can name it whatever you like, but give the clip the instance name of “mcLetter”. This will make the scripting go much easier.
    

3. Select “mcLetter” and press F8 again to convert this into another Movie Clip, so that you will end up with a text box inside of a Movie Clip, inside of a Movie Clip. Again, name this Movie Clip whatever you like, but for scripting purposes give it the instance name “char”.

[ the instance panel where you will name the movie clip ]

4. In this step we are going to do the animation for the letters. At this point you should be at the main stage and you should see the movie clip that you named “char”. Right-click on this movie clip and select edit. Here you can manipulate the movie clip named “mcLetter” to make whatever effect you like for your text using motion tweens. Once you are finished with this you must insert a layer (go to Insert > Layer in the top menu bar). In this new layer insert a keyframe, press F6, in the frame where your animation of the text ends.

5. Return to main stage and you should see the movie clip named “char”. Go into the timeline and insert a new layer. This new layer will contain all the scripting. Double-click in the first frame and insert the code that follows this step. This code defines all the necessary variables to complete the code:

text = "There is only one state- admittedly an unusual state, but not one that can be stigmatized as pathological- in which it does not do this (ego maintains clear and sharp lines of demarcation). At the height of being in love the boundary between ego and object threatens to melt away. Against all the evidence of his senses, a man who is love declares that 'I' and 'you' are one, and is prepared to behave as if it were a fact. --(S. Freud)" nXstart = 1 nYstart = 15 _root.char._visible = false nLength = length(text) nKerning = 12 nLLength = 24 nChars = 0 nLNumber = 1 nLSpace = 20 ii = 0

[ the code for frame 1 ]

6. In the timeline, on the same layer as step 5, insert another keyframe. For the sake of organization I chose frame 3, it could be any frame. Open up the actions panel and insert the code following this step. This bit of code duplicates the movie clip “char” repeatedly to display the text you want.

nChars++ if(nChars >= nLLength){ nReturn = text.substr(ii,1) if(nReturn == " "){ nLNumber = nLNumber + 1 nChars = 0 } } ii++; char.duplicateMovieClip ("char"+ii, ii); _root["char"+ii].mcLetter.text=text.substr(ii-1, 1); _root["char"+ii]._x = nXstart + nChars * nKerning _root["char"+ii]._y = nXstart + nLNumber * nLSpace

[ the code for frame 3 ]

7. Again, in the timeline insert a new keyframe. I chose frame 5, but it can be any frame as long as it is after the frame that contains the code in frame 3. If you changed the distance between these frames then you will change the frequency of the movie clips. Insert the following code into the actions panel of whichever frame you choose.

if (ii <= nLength){ gotoAndPlay(3) }else{ stop() }

[ the code for frame 5 ]

text : this variable defines the text that you want to display.

nXstart = 15 : sets the initial X position of the first movie clip

nYstart = 15 : sets the initial Y position of the first movie clip

_root.char._visible = false : makes the original movie clip invisible as it is not needed to complete the effect

nLength = length(text) : used at the end to see if all the text has been displayed

nKerning = 12 : denotes the space between numbers (This is dependent on which font you choose. For this I used a fixed width font to make it easier, if you use a different font you will have to adjust this variable.)

nLLength = 35 : defines the number of characters that you want in a single line, and is used with the next variable to perform the carriage return.

nChars = 0 : Used to determine the number of characters in each line, and perform the carriage return.

nLNumber = 1 : Used to determine which line of text you are on.

nLSpace = 20 : Determines the amount of space between lines

ii = 0 : A counter used to duplicate the movie clips
 

nChars++ : this is a counter that adds 1 to the variable nChars each time this frame is
played.

if(nChars >= nLLength){
  nReturn = text.substr(ii,1)
   if(nReturn == " "){
     nLNumber = nLNumber + 1
     nChars = 0
   }
}

This bit of code is and if statement that checks to see if nChars is greater than the maximum line length and if it is, then it creates a variable “nReturn” and if nReturn is equal to a space then, it performs the carriage return, and skips to the next line.

ii++; : another counter used in the following duplicateMovieClip code

char.duplicateMovieClip ("char"+ii, ii);
_root["char"+ii].mcLetter.text = text.substr(ii-1, 1);
_root["char"+ii]._x = nXstart + nChars * nKerning
_root["char"+ii]._y = nXstart + nLNumber * nLSpace

this code duplicates the original movie clip “char” and changes its X and Y values depending on the other variables. This part of the code, tells the movie clip what part of your text to display:

“_root["char"+ii].mcLetter.text=text.substr(ii-1, 1);”
 
substr is a substring; the ii-1 tells the movie clip to display the character ii-1 from the variable text, and the 1 is the number of characters to include in the display.

if (ii <= nLength){
   gotoAndPlay(3)
}else{
   stop()
}

This is just an if statement that tells the animation to stop playing if ii becomes greater than nLength (the length of the text, this variable was defined in the first frame). To see how your animation should be structured, you may download my final source file by clicking the 'download final source' link below:

That’s pretty much all there is to this effect. There are a lot of different ways to modify this, and the limit is basically your imagination. If you have any questions feel free to e-mail me or post on Kirupa.com’s Message Boards.