The Flash Anthology: Cool Effects & Practical ActionScript - Chapter 3: Animation Effects

Simple Scripted Masking

In this example, we'll animate a mask from one point to another, based on input parameters we provide. I created this example to illustrate the traffic received by two Web servers hosting a number of Websites. The movie accepts two input parameters, then animates the mask accordingly. For this simple example, we'll populate the variables statically by declaring them in the root of the timeline. A more realistic scenario would see the movie embedded in a database-driven Web page and the variables passed to the movie dynamically. We'll cover importing external data in Chapter 8, External Data.

Figure 3.4. This simple scripted masking effect animates a mask between two points.

The finished product is shown in Figure 3.4. Let's look at how this effect is accomplished. To skip straight to modifying the effect , locate the file called Simple_Animation_Masking.fla in the code archive.

1. Create a new movie that's 200 pixels wide and 40 pixels high. Alter the frame rate to 24 fps for a nice, smooth animation.
2. Create the folders and layers shown in Figure 3.5 below.


Figure 3.5. Organize the layers and folders for the scripted masking effect.

We now need to create the background bar that we'll mask. In this example, I created a bar that's white on the left and gradually became red toward the right, indicating the increase in server load as traffic levels grow.

3. Add two static text fields within the textlabels layer and enter text that reads, Server 1 and Server 2, to let users know what each bar represents. We don't need to convert these to movie clips, as we won't reference them in our ActionScript. Move them to (1, 0) and (1, 25) respectively.
4. Within the Server1Background layer, create a new rectangle that's 100 pixels wide and 9 pixels high. Select a gradient fill that changes from white on the left, through yellow and orange, to red on the right of the rectangle. Select the rectangle, then select Insert > Convert to Symbol…. Choose to create a Graphic named Background.
5. Name the existing instance of Background backg1 and move it to (50, 3). Drag a second instance of the graphic from the Library Panel into the Server2Background layer naming it backg2, and move it to (50, 29). Lock these two layers; we don't need to modify them any further.

Now that we've created the backgrounds, we can build the masks we'll control via ActionScript:

6. Create a new rectangle, with no stroke and a solid white fill, that's 5 pixels wide and 9 pixels high (this exactly matches the height of the movie clip we will mask). Convert the rectangle to a graphic symbol named ServerAnimation, and place instances of the graphic in the Server1Mask and Server2Mask layers.

Name the instances server1Mask and server2Mask respectively. (This is important as we will reference these clips in ActionScript later.) Move them to (50, 3) and (50, 29), so they're flush with the left edge of the backg1 and backg2 movie clips.

7. To achieve the desired effect, we need to set up the server1Mask and server2Mask graphics so that they work as masks for the background graphics beneath them. Locate the Server1Mask and Server2Mask layers, right-click on each, and select Mask (see Figure 3.6).


Figure 3.6. Convert the dynamic movie clips into masks.

When the movie runs, only those portions of the Background graphics in Server1Background and Server2Background that are covered by the ServerAnimation graphics in Server1Mask and Server2Mask will be visible.

8. We now need to animate the two mask graphics so that they reveal the appropriate portions of the Background graphics. Select the Actions layer, and, with the Actions Panel open, add the following code to the first frame:

Example 3.10. Simple_Animation_Masking.fla Actions : 1 (Excerpt)

var server1load = 25;  
var server2load = 75;  
 
function animate (server, serverload)  
{  
 server.onEnterFrame = function ()  
 {  
   if (this._width <= serverload)  
     this._width += 2;  
 };  
}  
animate (server1Mask, server1load);  
animate (server2Mask, server2load);

That's all the code we need to alter the rectangles to make the two bar graphs grow to their assigned lengths. Let's look at how it's done.

First, we create two variables with values that represent (as a percentage) how much of the Background graphic we want to display for each server. The math is kept simple because the backg1 and backg2 graphics are exactly 100 pixels wide.

The animate function takes a reference to one of our mask graphics and sets up an onEnterFrame event handler to increase its width by two pixels per frame up to a specified value. The code finishes by calling animate for each of the two mask graphics, passing each of the two server load values.

Save your movie and preview it. Notice how the two masks grow to sizes dictated by the server1load and server2load variables. It's a pretty cool effect that you can easily include in your projects, creating bar graphs or other visual displays of increases occurring over time.

Adding Text Labels

So far, we've managed to animate masks over time to create a slick, animated bar graph. This is great, but we don't know what values the bars represent. Let's add a text label to each graph to complete the effect:

9. Create a new graphic symbol named serverinfo containing a dynamic text field that's 34 pixels wide and 15 pixels high. In the Property Inspector for the text field, set the Var name to serverload (which we'll use to set the value to be displayed for each server). Also in the Property Inspector, click Character… and make sure that Embed font outlines for is set to Basic Latin (or All Characters in Flash MX).
10. Drag two instances of this new symbol into the first frame of the Labels layer of the Animated Labels folder. Name the instances server1info and server2info. Position them at (54, 1) and (54, 27) respectively.
11. Navigate back to the first frame of the Actions layer in the root of the movie. Insert the following code below the first two variables:

Example 3.11. Simple_Animation_Masking.fla Actions : 1 (excerpt)

server1info.serverload = server1load + "%";  
server2info.serverload = server2load + "%";

This code sets the serverload variable inside each of the two serverinfo symbols, controlling the text they display.

12. Save and preview your work.

You'll notice that the values for each of the bars now simply sit where we placed them. They look a little out of place, given the movement that is occurring. We'd better animate them so that they fit in.

13. Still in the first frame of the Actions layer, add the following function declaration:

Example 3.12. Simple_Animation_Masking.fla Actions : 1 (excerpt)

function moveText (serverinfo, serverload)  
{  
 var startPos = serverinfo._x;  
 serverinfo.onEnterFrame = function ()  
 {  
   if (this._x <= startPos + serverload)  
     this._x += 2;  
 };  
}

This function works just like the animate function, but it moves the graphic we pass to it horizontally instead of setting its width.

Try some speedy text
For a slightly different effect that adds to the movie's visual appeal, you could have the text move more quickly than the bars by increasing the step size of the movement from two to four.

All that's left is to call this function for each of our text labels to kick off their animation.

14. Add the following code:

Example 3.13. Simple_Animation_Masking.fla Actions : 1 (excerpt)

moveText (server1info, server1load);  
moveText (server2info, server2load);

15. Save your movie and preview it.

That's it! This scripted animation of the text fields completes the effect and looks very cool!

Modifications

You can easily modify this effect to include more items. Simply create more bars, and reference them when the movie loads, to produce interesting graphs. This effect could also generate moving bars that slide into place as the movie is loaded. The direction in which you choose to take this effect really is up to you.