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

Creating Master Libraries

When you're working on a series of projects that share a similar theme, you may find they also share bitmaps and vector and sound objects. If you've forgotten which FLA these shared objects reside in, you're left to choose between a time-consuming search or laborious replication.

To avoid this situation, I create what I call master libraries for my buttons, movie clips, and animations, which I name according to their content. For example, I might create an FLA file that contains all plastic- or glossy-looking buttons, and call it Buttons - Plastic_Gloss.fla. I would then save this in a master directory. When I need them, I simply select File > Import > Import to Library…, locate my FLA file and, presto! The buttons appear in the Library Panel for use in the current project.

Even after several months, you may come back to a project to enhance it or add extra functionality. If you can't remember where the source FLA files are, you're going to waste a lot of time. Using this procedure allows you to be smart with your time and resources, and maintain a consistent look and feel across projects.

I think that, by now, we've covered most of the best practices and methods for increasing productivity when you work with Flash. The practices I've outlined here are only guidelines to make your life a little easier; they're not hard and fast rules. So, feel free to embrace as many or as few of them as you wish.

Now it's time again to "holster up" and get ready for a showdown with some very cool ActionScripted effects!

Random Motion

Have you ever wanted to create random movement for an object or a number of objects? There's a simple technique that will take a single movie clip, create many copies of the object, and randomly place these on the canvas. It then creates the illusion of constant random movement. Best of all, this technique is easily extensible, allowing you, for example, to dynamically alter many of the properties of the object, including opacity and scale.

If you'd like to play the finished product before you proceed, have a look at Random_Motion.fla in the code archive.

Setting the Scene

First, you'll need to create a new Flash movie to showcase your effect.

1. Select File > New to create a new Flash movie.


2. Select Modify > Document and set both the width and height of the movie to 300 pixels.

In order to randomly place and move copies of your object, you'll first need an object to use. In this example, we'll create a movie clip container named MCWorld, which will contain another movie clip, called World.

3. Select Insert > New Symbol, select Movie clip, and name the clip MCWorld. Click on the Advanced button to view the clip's linkage parameters, select Export for ActionScript, and name the identifier MCWorld, as shown in Figure 3.1.


Figure 3.1. Set linkage properties for the parent movie clip.

Note: We select the Export for ActionScript button because, in a moment, we'll use ActionScript dynamically to create instances of this clip. To do that, we need to make it available to ActionScript by choosing this option and assigning the clip a unique identifier.

4. Create a graphic symbol that contains the object or image to which you want to assign random movement. Select Insert > New Symbol… and choose Graphic. Name this symbol World, then create the object either with the drawing tools, or by importing an image or other object from an external source.

The Library Panel should now contain a graphic symbol named World, as in Figure 3.2.


Figure 3.2. Add the child movie clip.

5. Double click the MCWorld movie clip to open it. Drag an instance of the World symbol into it and name the instance World.

Adding the ActionScript

Great! We've created a clip called MCWorld that contains a graphic called World. Now, we can begin to add the ActionScript that will control what takes place on the stage:

6. Select Layer 1 within the main timeline, and give it the name ActionScript. Expand the Actions Panel (select Window > Development Panels > Actions or press F9).
7. Add the following code within the Actions Panel. This code creates thirty instances of the MCWorld clip and places them on the canvas at random. It also randomly alters the clips' opacity.

Example 3.4. Random_Motion.fla ActionScript : 1

var numObjects = 30;  
for (i = 0; i < numObjects; i++)  
{  
 var randomObject = attachMovie ('MCWorld', 'MCWorld' + i, i);  
 randomObject._x = random (300);  
 randomObject._y = random (300);  
 randomObject._alpha = random (100);  
}

The key here is the attachMovie method, which lets you add a new movie clip to the current movie. The parameters we pass to this method are: the identifier we gave the clip in the library (MCWorld), a unique name for each clip instance (in this case, MCWorld with a number appended to it), and a number that indicates where to place the clip in the stacking order.

Also of note in this code is the random function, which returns a random integer between zero (inclusive) and the specified number (exclusive). So random (300) returns a number from 0 to 299. We use this function to generate the position on the stage and the opacity for each instance we create.

With our stage filled with randomly-positioned graphics, it's now time to move them around.

8. Double-click the MCWorld movie clip in the Library Panel to open it. Select Layer 1 and rename it ActionScript.
9. Add the following code within the Actions Panel. It uses setInterval (a standard JavaScript function) to move the graphic symbol instance (World) to a new random position within two pixels of its current position every tenth of a second.

Example 3.5. Random_Motion.fla MCWorld : ActionScript : 1

setInterval (Randomizer, 100);  
function ()  
{  
 var xShift = random (5) - 2;  
 var yShift = random (5) - 2;  
 World._x += xShift;  
 World._y += yShift;  
}

We could instead have used an onEnterFrame event handler to do this, but setInterval allows us to define the speed of the motion independent of the movie's frame rate, which can be useful in many circumstances.

Testing the Movie

You've created your movie clips; now, let's take the movie for a test-drive.

10. Select Control > Test Movie to preview your movie.

    
    Figure 3.3. Preview the movie within Flash.

    If everything has gone according to plan, you should see an animated random movie similar to the one shown in Figure 3.3, where the x and y coordinates of the graphics change every tenth of a second.

Random movement is simple to achieve using the basic building blocks outlined here. With experimentation, you'll realize that the possible applications of this technique are limitless.

Modifications

It's easy to modify the Randomizer function to alter the presentation of the movie. Changing various properties of the object at different points within the code can have quite dramatic effects—as we're about to see.

Flickering Opacity

Returning to the Randomizer function, let's add an extra line that alters the opacity of the graphic.

1. Locate the Randomizer function in the first frame of the MCWorld movie clip, and adjust it as follows:

Example 3.6. Random_Motion_Alpha.fla MCWorld : ActionScript : 1 (excerpt)

function ()  
{  
 var xShift = random (5) - 2;  
 var yShift = random (5) - 2;  
 World._x += xShift;  
 World._y += yShift;  
 World._alpha = random(100);  
}

2. Save and preview the movie.

Every tenth of a second, at the same time each graphic is given a little nudge, the opacity is now reset to a random value between zero and 99%, producing a flickering effect. How easy was that?

You can even insert additional object properties to, for example, alter the horizontal and vertical scale of the object. Adding the following lines to the above code will randomly scale the graphic objects:

World._xscale = random(100);  
 World._yscale = random(100);

Increasing the Redraw Rate

As I mentioned earlier, using setInterval to trigger the changes to our graphics disconnected this animation from the frame rate of the movie. To increase the rate of the animation, simply change the delay specified when calling setInterval:

Example 3.7. Random_Motion.fla MCWorld : ActionScript : 1 (excerpt)

setInterval(Randomizer, 100);

Reducing this value will increase the redraw rate (how often the Randomizer function is called). Bear in mind that these values are counted in milliseconds. To change the redraw rate to one second, you'd set the value to 1000. Keep in mind that decreasing the amount of time between redraws will increase the load on the CPU. If your movie uses a large number of objects, or objects that are complex, the user's computer might have a tough time keeping up with the changes.

Increasing the Number of Objects

To increase the number of objects initially drawn on the screen, simply change the numObjects variable in the main timeline code:

Example 3.8. Random_Motion.fla ActionScript : 1 (excerpt)

var numObjects = 30;  
for (i = 0; i < numObjects; i++)  
{

The for loop uses this variable to control the number of objects created, so changing the number of objects couldn't be easier!

If those objects are complex, the CPU load will also increase proportionally. Be careful!

Altering the Random Shift Value

After the objects are originally placed on the canvas at random, the Randomizer function shifts the x and y coordinates of the graphics every tenth of a second to give an appearance of jittery nervousness. To increase or decrease this quality, simply locate and edit the following lines within the Randomizer function:

Example 3.9. Random_Motion.fla MCWorld : ActionScript : 1 (excerpt)

var xShift = random(5) - 2;  
 var yShift = random(5) - 2;

To keep your graphics from wandering off the stage, make sure that the first number on each line is twice the second number plus one. This relationship ensures that the calculated shift values tend to average out to zero. Of course, the easiest way to maintain this relationship is to make it explicit in the code:

var nervousness = 2;  
 var xShift = random(nervousness * 2 + 1) - nervousness;  
 var yShift = random(nervousness * 2 + 1) - nervousness;

As you can see, once you become comfortable with editing the properties of objects, and randomizing their values, you can create some very interesting effects. The key to finding out what you can do is to experiment with values, explore the ActionScript reference, and have fun!