Task: Flashy Text

I l @ ve RuBoard

Another common Flash effect is to have text zoom in, letter by letter. Figure 10.4 shows this effect in progress. You can try the movie 10textanimation.fla to see it in action.

Figure 10.4. In this standard text effect, the letters start out huge and shrink into position and size one by one.

The general idea is to create each of the letters of the line of text as individual movie clips. Then have each movie clip start off at many times its normal scale but in the right position. As each frame passes , the scale of the movie clip shrinks until the letter reaches normal size. Then the next letter starts.

1. Start with a new movie.

2. Create a small dynamic text field and place a single letter, such as "a," in it. Set the font and size for this letter. Link the text field to the variable letterText .

3. Select the dynamic text field you just created and choose Insert, Convert To Movie Clip. Set it to Movie Clip and name it Letter.

4. Find this new movie clip in the Library. Select it and use the pop-up menu in the Library panel to choose Linkage. Set the link name to Letter and select the options Export for ActionScript and Export in First Frame. This ensures that the movie clip is included when you publish, even though the movie clip does not appear to be used in the timeline. The name Letter is used in your ActionScript to refer to the library element.

5. Delete the movie clip from the work area. Leave it in the library, though.

6. Create a simple shape, such as a circle. Move it outside the main work area outside the viewable area. Select it and choose Insert, Convert To Movie Clip. Name this movie clip Actions.

7. Making an Actions movie clip is a common practice in Flash movies. This one clip uses load and enterFrame events to choreograph the changes and movements of other movie clips.

8. The Actions movie clip should now be the only thing in your work area, but the movie clip should be outside the viewable area. Select that movie clip and place the following script on it:

    onClipEvent(load) {     // constants     text = "Teach Yourself ActionScript!";     letterSpacing = 16; // how far apart the letters are     startX = 50; // horizontal position of leftmost letter     startY = 200; // vertical position of letters     startScale = 600; // how big the letters start     scaleStep = 50; // how much the letters shrink per frame     // create all movie clips     for (i=0;i<text.length;i++) {          _parent.attachMovie("Letter","Letter"+i,i);         // fill with letter         _parent["letter"+i].letterText = text.charAt(i);         // move off screen         _parent["letter"+i]._x = -100;     }     // init variables     letterNum = -1;     scale = 100; } 

   All the variables have comments after them to describe what they do. You can adjust any one of them to modify the effect.

   The loop in the middle of the handler creates one movie clip instance for every letter in the text. The attachMovie handler creates these new movie clip instances from a library element that has its linkage properties set as in step 4. You need to assign each new movie clip instance a unique name and a unique level. Levels are used to determine which movie clip appears on top. In this case, it doesn't matter too much, but movie clips can't share a level number, so each one must have a unique number.

   After the movie clip is created, the appropriate character is placed in the letterText variable inside it. This makes it appear in the dynamic text field. Then the movie clip instance is moved off the visible area until it is needed.

   Also notice that the references to these new movie clips are done with the _parent prefix. This is because the new movie clips should be at the root level, not inside the Actions movie clip.

   The load event ends by setting letterNum and scale . These are the two variables that change as the animation proceeds.

9. Continue building the Action movie clip script with the enterFrame action:

    onClipEvent(enterFrame) {     // if scale is 100, then time for next character     if (scale == 100) {         letterNum++;         // set position of next character         _parent["letter"+letterNum]._x = startX + letterNum*letterSpacing;         _parent["letter"+letterNum]._y = startY;         // set to largest size         scale = startScale;     }     // make a little smaller     scale -= scaleStep;     _parent["letter"+letterNum]._xscale = scale;     _parent["letter"+letterNum]._yscale = scale; } 

   The enterFrame handler starts by checking the scale . If it is 100, the current letter is at its normal size, and it is time to go to the next letter. This also happens at the start of the animation because we set scale to 100 in the load handler.

   When it is time to go to the next letter, the letterNum variable is increased. Then that letter's movie clip is moved into position. The scale variable is set to its initial value.

   Next, the handler decreases the scale by one scaleStep . It then sets the _xscale and _yscale properties to that new value. This happens over and over again until the scale reaches 100 and the next letter goes into action.

   This is by far the most complex task you have undertaken so far. Take the time to review it and look at the example movie 10textanimation.fla. In particular, the attachMovie process is an important one that we have not covered so far.

   Extra Credit : If you look on the CD-ROM, you'll see a movie named 10textanimation2.fla. This is a slight variation on this movie; it animates more than one letter at a time. The result is a little nicer than the script we just built. If you are up to it, you can take a look at this movie to see how it works.

I l @ ve RuBoard