Building Your Own Effects | Inside Flash MX (2nd Edition) (Inside (New Riders))

So how can you build effects like that yourself? Well, one way that you can do that is to use a couple of features that are new to Flash 5: onClipEvent() handlers and the attachMovie() method. If the idea of working with ActionScript gives you the willies, you can skip to the section "Using This Movie as a Template for Your Own Effects."

You could hand-build a frame-by-frame or tweened animation to duplicate these effects, but what if you actually want to reuse the effect that you come up with using different text?

You've looked at loadMovie() already. There's another method (don't sweat the terminology just yet) called loadVariables() that you can use to load information into your file.

All right, there's no way around it. If you've never scripted before, this is a foray into a whole new world. What you want to do here is be able to take the text from a text file, pass it into a Flash movie, and use Flash to dynamically generate a nifty little text effect. Simple, huh? Yeah, right. Actually, it's not that badit's just a new way of thinking.

This is not going to be a complete description of how this works. If you are already into scripting, you'll be able to figure it out. If you've never scripted before, you'll still be able to take this information and modify the movie to suit your needs. When you have a little more scripting experience under your belt, you can revisit the code and modify it at will.

Exercise 7.6 Setting Up the Basic Animation

You can create your own effect fairly easilyall you need to do is embed a dynamic text field in a graphic symbol and animate that graphic symbol inside a movie clip.

Create a new movie and save it as effect.fla.
Select the Text tool and open the Character panel (Window > Character > Panel). Pick the font, size , and color settings that you want to use, and type a capital M on the Stage.

Why M? M is one of the widest lettersusing it will help make sure that your text field is wide enough to display your letters .
Switch to the Text Options panel and make the following changes:

Text Type: Dynamic Text

Line Type: Single Line

Variable: letter

HTML: Not selected

Border/Bg: Not selected

Selectable: Not selected
Switch to the Paragraph panel; for Align, choose Center Justify (the second button).
With the text field on the Stage selected, choose F8 to embed it in a graphic symbol. Name the symbol letter graphic.
With the letter graphic selected, use F8 again to embed it in a movie clip named letterMC.
Double-click letterMC in the Library to open it in Symbol-Editing mode.
This is when you get to have some fun: Set up the animation for your text.

suggest starting with something simple and then working up from there. If you need an idea, open effects_final.fla in the Chapter_07/Assets folder and examine the letterMC in the Library. It's a simple motion tween with rotation. The letter graphic in the first frame is skewed and has an alpha change.

After your animation is set up, you have a little more to take care of. So far, you've animated the letter M what next? The next step will be to create a text file that will hold the actual string of characters that you want to animate.

Exercise 7.7 Creating a File to Hold Your Text and Loading the Data into Your Movie

You can pass in whatever text you want to animate in your Flash movie from a text file. This means that the file you are creating is completely reusable for any string of text without you having to go in and make any modifications.

Open your text editor of choice. You are going to set up a name/value pair, a variable that will hold all the text that you want to use in your movie.
All you need to put in the text file is the variable name and the text that you want that variable to holdthis is the text that you'll be animating. For example, on the CD there's a file called data.txt that has the following name/value pair already set up:
```
 dataString=Fig Leaf 
```
In this case, the text string Fig Leaf is passed into the variable dataString. For your animation, you can change Fig Leaf to whatever text string you want to animate, but the variable name dataString must stay the same. So, if you think of it as a name/value pair, the name is dataString and the value is Fig Leaf.
Set up your name/value pair and save your file as data.txt in the same directory as your Flash file.

You need to load this data into your Flash movie, and you need to make sure that it has been loaded before you try to use it. You're going to do that by loading it into an empty movie clip so that you can use an onClipEvent() handler to see if it's loaded.
Choose Insert > New Symbol. Create a blank movie clip and name it Container.
Add a new layer named Container to the main timeline. You need to be able to talk to this movie clip using ActionScript; with the Container layer selected, drag a copy of the Container movie clip from the Library onto the Stage (it will be a small open circle). Open the Instance panel (Window > Panels > Instance), and give it an instance name of container.
You need to copy one more file from the CD into the same directory as your Flash file. You need to copy string.as. This file replaces the internal String object in Flash (the String object in Flash is a little slow and little buggy ). To include this file in your movie, add a new layer to the main timeline and name it Actions. Launch the Actions panel and select frame 1 of the Actions layer. Add the following line of code to the Actions list:
```
 #include string.as 
```

The rest of the Actions for your movie will be attached to the Container movie clip.

The ActionScript for Movie Control

This is where those of you who haven't coded before may get a little lost. Don't panic I'll explain the code line by line. Alternately, you can forget the code altogether and just skip to the next section to see how to use the finished file (dynamic.fla) as a template for your own effects.

The first thing you need to do is set up the letterMC so that it can be used by the attachMovie() method. All you need to do is select the letterMC, right- or Control-click, and choose Linkage.

In the Symbol Linkage Properties dialog box, select Export This Symbol and give it an Identifier name of letter.

Rather than take you step by step through writing this code, I'm going to show you the code and then explain it. Listing 7.1 shows the completed ActionScript.

Listing 7.1 The Completed ActionScript for Attaching Your New Text Effects Movie Clips to Your Movie

 onClipEvent(load) {     this.loadVariables("data.txt");      startXpos = 100;      startYpos = 100;      nextX = 0;      elapsedTime = 0;      enterTime = 0;      i=0;  }  onClipEvent(data) {     newLetters = newArray();      newLetters = dataString.split("");      trace("length: "+this.newLetters.length);  }  onClipEvent(enterFrame) {     if (elapsedTime > 100) {         enterTime = getTimer();          if (i < this.newLetters.length) {             _root.attachMovie("letter", "letter"+i, i);              _root["letter"+i].letter = newLetters[i];              _root["letter"+i]._x = nextX;              _root["letter"+i]._y = startYpos;              nextX = _root["letter"+i]._X + _root["letter"+i]._width/2;              ++i;              elapsedTime = 0;          }      }else{         elapsedTime = getTimer() - enterTime;      }  }

You'll notice that there are three different onClipEvent() handlers:

onClipEvent(load). Any code inside a load event is executed only the first time the movie clip loads. This is a good place to initialize any values that you'll be using later.
onClipEvent(data). The code inside the data event doesn't run until all the data being sent to the movie clip has been received.
onClipEvent(enterFrame). The code inside an enterFrame event runs over and overas long as the movie clip exists.

The first onClipEvent contains the following code:

 onClipEvent(load) {     this.loadVariables("data.txt");      startXpos = 100;      startYpos = 100;      nextX = 0;      elapsedTime = 0;      enterTime = 0;      i=0;  }

The first line inside onClipEvent(load) loads the information from data.txt into the Container movie clip.

The next two variables , startXpos and startYpos, will be used to tell Flash where to begin attaching movie clips to the moviein this case, 100 pixels in from the left and the top of the movie.

The variable nextX will hold the value of where each subsequent movie clip is attached. The variable elapsedTime will keep track of the amount of time since the last movie clip was attached; this allows you to set up a delay. Finally, i is just a counting variable.

The variables elapsedTime and enterTime are used to track how long it has been since the last movie clip was attached.

Again, i is just a counter variable.

The second onClipEvent contains the following code:

 onClipEvent(data) {     newLetters = newArray();      newLetters = dataString.split("");      trace("length: "+this.newLetters.length);  }

Don't spend a lot of time worrying over this chunk of codeall it's doing is splitting up the data from the text file into an array that you'll be using in the next onClipEvent. You'll get a more thorough introduction to arrays in Chapter 16, "Using Preloading Sequences."

The third onClipEvent is where most of the action happens. Here is the pseudocode (English) for what is happening:

 If elapsedTime is greater than 100 milliseconds, store the current time  in the enterFrame variable and check to see if the value of the variable  i is less than the length of the array that you created. If it is, start  attaching movies. Position each movie on its own level, and move it so  that it doesn't overlap with the previous movie. Add 1 to the counter  variable, and reset elapsedTime to 0. If elapsedTime is less than 100  milliseconds, check the timer again and update elapsedTime.

That's really all there is to it. Here's the actual code:

 onClipEvent(enterFrame) {     if (elapsedTime > 100) {         enterTime = getTimer();          if (i < this.newLetters.length) {             _root.attachMovie("letter", "letter"+i, i);              _root["letter"+i].letter = newLetters[i];              _root["letter"+i]._x = nextX;              _root["letter"+i]._y = startYpos;              nextX = _root["letter"+i]._X + _root["letter"+i]._width/2;              ++i;              elapsedTime = 0;          }      }else{         elapsedTime = getTimer() - enterTime;      }  }

Take a look at a line-by-line breakdown:

 if (elapsedTime > 100) {

When the movie first loads, the elapsedTime variable is equal to 0. On the first pass through the code, Flash skips everything inside this if statement and drops down to the else clause, where elapsedTime gets updated. As soon as 100 milliseconds have elapsed, the code inside the if statement gets processed .

 enterTime = getTimer();

This line makes a call to the getTimer() function in Flash. That function returns, in milliseconds, how long it has been since the movie started. You're saving that value in the variable enterTime.

 if (i < this.newLetters.length) {

The first time you enter this event, i will be equal to 0you initialized in onClipEvent(load). So, if 0 is less than the number of letters in your text file, you'll continue.

 _root.attachMovie("letter", "letter"+i, i);

This is the line that actually attaches new movies. You are attaching an instance of the movie "letter"remember, that's the identifier name that you have the letterMC movie clip set to in the Linkage Properties in the Library. Because you're going to be attaching multiple instances of this movie clip to the movie, each one must have a unique instance name. The easiest way to do that is to concatenate the counter variable i to a string of letters. In this case, the first instance will have an instance name of letter0, the second will be letter1, and so on. You also need to attach each movie to a unique level, so again use the counter variable. The first movie attaches to level 0, the second to level 1, and so on.

 _root["letter"+i].letter = newLetters[i];

Each movie clip should have a different letter; this is where you assign a value to that dynamic text field that you set up (letter). So, on the first pass, you're telling Flash that you want to give the variable letter inside the movie clip named letter0 whatever is in position 0 inside of the newLetters array.

 _root["letter"+i]._x = nextX;  _root["letter"+i]._y = startYpos;  nextX = _root["letter"+i]._x + _root["letter"+i]._width/2;

These three lines position the new movie instance in the main movie. The Y position doesn't change; it takes whatever value you assigned it in the load event. The X position does change. You need to know the current X position of the movie clip (_x), which is the center of the movie clip. Add to that one half of the width (_width/2) to move it over.

 ++i;  elapsedTime = 0;

After everything else in the if statement is done, increment your counter variable and reset the elapsedTime variable to 0.

You don't actually have to enter this code yourself if you are uncomfortable doing that. You can use this file as a template and modify it to suit your needs.

Using This Movie as a Template for Your Own Effects

So you've waded through the previous section, and you've decided that you just don't want to mess with all that ActionScript. Not to worryyou can just use the file as is and modify it to suit your needs.

You need to make only a few changes to the existing file. You already know how to change the text being loaded into the filejust change whatever is in data.txt. The other things that you might want to change are the actual animation itself, the font type, size, and color. To change the font attributes, just open the letter graphic graphic symbol and use the Character and Text Options panels to make any changes you want.

Changing the actual animation is just as easy as changing the font. Double-click the letterMC movie clip and modify the animation to suit your needs. Add a motion guide, play with the effects, and do whatever you want. You don't need to touch the code at all.

That's all there is to it. Now that you've looked at a number of different ways to create text effects, take a look at a completed movie that uses many of the effects that you've been working with.