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

The fads of Internet design may come and go, but one thing that will never change is that the more dynamic you make your Flash creations, the more engaging they are to the user. This dynamism can be counterproductive under certain circumstances, especially when multiple effects battle for the user's attention, or the effects are too garish. Identifying the key to effective animation is like the search for the Holy Grail. What some users think is a cool effect, others find patently uninteresting—and vice versa. Never lose sight of the importance of striking a balance between the interface and the animations you're attempting to produce.

Flash has always had as its nucleus animation and motion. This is, after all, what Flash was originally created for—the animation of objects over time. As new versions are released and the technology evolves, so do the capabilities of Flash's scripting language. What we could once achieve only with keyframes and tweening can now be accomplished in a few lines of ActionScript. Some developers find this reality difficult to grasp, but as we saw in Chapter 2, Navigation Systems, once you understand the basics, you can build on them with new experiments.

With very few exceptions, what can be done with keyframe tweening can also be achieved through ActionScript. But, what are the advantages of scripting? The answer's simple: portability, scalability, and manageability. You can affect an animation dramatically by tweaking an equation or a few variables in its ActionScript. This process is much easier than laboriously editing motion tweens, which can sometimes appear in their hundreds in large animated effects.

This doesn't mean that motion tweening is dead, however—not by a long shot. If you create simple motion tweens (for example, an effect that shows an object increasing in size), then script the effect multiple times and experiment with it via ActionScript, you can create some pretty amazing effects with a minimum of effort.

With Flash MX 2004, and the introduction of Timeline Effects, creating these motion tween building blocks takes even less work than it did before, as we'll see in the coming chapter. I'll give you the information you need to develop both classic effects you can be proud of and exciting new animations. You'll also learn the techniques involved in creating innovative Timeline Effects. It's virtually all ActionScript from here on, so have your calculator and pencil ready! And if you need a little review of the essentials of Flash, don't miss Chapter 1 of this series.

Note also that you can download this chapter in pdf format if you'd prefer to read the content offline.

Animation Principles

If you are reading this book, then I can be pretty sure you have a copy of Flash MX or later. You probably purchased Flash because of the animation capabilities that lie at its heart. In the most basic form of Flash animation, we can smoothly transition an object's location or shape from point/shape A to point/shape B by altering the properties of that object at keyframes within the timeline. This used to be a cumbersome process in previous versions of Flash, but it's more accessible now. With a solid understanding of ActionScript and the dynamics of motion you can rapidly create animation effects that would have taken many hours to create with previous versions.

Hit the books!

What did you do with your old Physics and Math textbooks when you left school? Did you throw them away? Shame on you if you did—they can be an invaluable source of inspiration for creating mathematical and motion-related scripted animations in Flash. I'm a bit of a hoarder, which probably explains why I've still got mine!

There are many uses for Flash in creating animation. Perhaps you want to create a straightforward animation that moves an object from point A to point B. Maybe you're itching to build a more complex animation with a "real world" feel, easing objects into position or having them exhibit elastic characteristics. Both simple and advanced animations are possible in Flash via different methods: by hand, using complex keyframes and motion tweening, or with the help of ActionScript.

While the ActionScript method of animation may initially appear difficult, once you become comfortable with its methodologies for movement and learn the nuances of its quick, effective methods, you'll soon be creating increasingly complex animations and building on your existing knowledge. If this is your first experience with ActionScript, you'll soon be surprised how easy it is to create scripted animation. This should inspire you to explore your own ideas and experiments, and take ActionScript to the limit.

Animation Overload

The ability to easily include animation techniques and effects within Flash movies is usually the reason people use this technology for animation development. However, inexperienced users may succumb to "animation rage," as they become a little too carried away with the power Flash puts at their fingertips. Over-the-top animation effects are the result—effects that, upon careless replication within the same movie, succeed only in creating an unpleasant experience, to say the very least!

It's easy to become trigger-happy and animate every element of your display, but this approach is a recipe for disaster. The effect that you set out to create will soon be lost, overwhelmed by all the others that surround it.

The key to an effective animation lies in maintaining a balance between the message you're trying to convey and what's happening on the screen. Even tipping the balance slightly can ruin your effect, so adopt the following guidelines as rules of thumb for creating successful animations:

Tame the Animation

"Because you can" is not a good enough reason to animate something. Users tend to identify excessive animation as the mark of the amateur—though your site will certainly make an impression, it won't be a good one!

Err on the Side of Subtlety

Effects that are exaggerated or garish will annoy users, especially if the animation is part of the main interface or navigation. Strive to create effects that are pleasing to the eye, not intrusive.

Consider the User

Try to distance yourself from any effect you create; imagine you're a user viewing it for the first time. If you think it's "too much," then it probably is. If you don't like it, your users won't, either. Of course, you can't please all of the people all of the time, so try to strike a happy medium at which most visitors will be satisfied.

Stand back!

When previewing your movie, try standing several feet from the monitor. Believe it or not, this gives you a clear sense of the animation's movement across the screen. If you're too lazy to walk to the other side of the room, try squinting so that the screen blurs a little. You'll be able to detect the movement on the screen without the distracting details, which will help you identify whether the movie is over-animated.

Be Conservative with Animations

Yes, you can create cool animations with ActionScript, but you shouldn't include them all in one page, interface, or effect. You may lose focus by adding too many other animations to your design. Try to sprinkle animations through your designs, rather than deluging the user with an animation storm.

To Tween or Not to Tween?

A few years ago, Flash developers had no choice. To create animated effects in Flash, we used keyframes and motion or shape tweening. Now, we have the luxury of choice; we can script the motion, or create it via the traditional route. Both methods deliver benefits, as we'll see shortly, when we compare scripted animation with traditional tweening methods.

One point worth noting, however, is that with motion scripting, the entire movie need not be any longer than a single frame. The ActionScript, not the timeline, controls the animation, allowing for well-organized movies with uncomplicated structures.

Let's take a look at a simple animation technique with which you might already be familiar: linear motion. The most basic effect that you can create is movement from one point to another and, indeed, this may have been one of the effects you tried when you first opened Flash. Let's revisit it now.

Timeline Animation Example

It's easy to create this effect on the timeline. Let's walk through the steps involved.

1. Draw a simple shape (like a circle) on the stage and convert it to a movie clip symbol named Timeline_Animation. Position the symbol instance on the stage at (0, 0).


2. Select frame 10 within the main timeline, right-click, and select Insert KeyFrame (F6). Notice that the movie clip instance is copied into the new keyframe.


3. Select the instance of the movie clip in frame 10, and move it to (100, 100).


4. Select frame 1, right-click, and select Create Motion Tween.

Preview your movie. You've created a simple animation that moves your clip from one point to another. This is a simple animation; if the effect were more complicated, the timeline could quickly become messy and difficult to work with.

Creating simple motion using the timeline in this manner can also be accomplished within Flash MX 2004 and later versions via Timeline Effects (more on this in Chapter 4, Text Effects).

ActionScripted Animation Example

Let's take another look at this animation, but this time, let's build it in ActionScript.

1. Draw a simple shape (like a circle) on the stage and convert it to a movie clip symbol named Scripted_Animation. Position the symbol instance on the stage at (0, 0), and name the instance scripted_animation.


2. With the Actions Panel open and the first frame of the main timeline selected, add the following code:

var endX = scripted_animation._x + 100;
var endY = scripted_animation._y + 100;
var stepX = (endX - scripted_animation._x) / 10;
var stepY = (endY - scripted_animation._y) / 10;

scripted_animation.onEnterFrame = function ()
{
 if (this._x < endX) this._x += stepX;
 if (this._y < endY) this._y += stepY;
};

First, we set variables for the x and y endpoints (endX and endY) to equal the starting coordinates plus 100 pixels along each axis. We then use these values to calculate how much the object will have to move per frame along each axis (stepX and stepY) to reach its destination in ten frames. We then introduce an event handler that moves the object along the two axes by the calculated distances until it reaches its destination.

This code takes the previous example a step further, though, because you can place this movie clip anywhere on the stage. Regardless of its starting location, the clip will move 100 pixels along each axis from its starting position.

You may be looking for more code to complete the effect, but that's it! Simple, isn't it? Of course, ActionScript becomes more complicated as you add more interesting effects, but this method certainly saves a lot of clutter on the timeline.

Animations built using the timeline and motion tweening are useful for testing and for implementation as part of a larger animation (for example, creating simple rotation for a loading animation). The real benefits of developing animations with ActionScript are scalability and the opportunity for dynamic movement in response to user input or other variables.

Once you start animating with ActionScript, it's difficult to stop—this method really does act as a springboard for your creativity. And, don't forget to save your experimental FLA files even if you don't use them straight away. You never know when you might need them!

Creating Function Libraries

Once the ActionScript bug has bitten you, you'll be infected permanently, and there's no known antidote! You'll create many FLAs over time, and will no doubt build up your own core set of scripts and methods. But, rather than reinventing the wheel every time you need to carry out a particular function, why not save your scripts in .as (ActionScript) files? These files can then be included dynamically in your creations as you need them.

I maintain a core of scripts that I've created over the past few years, and which I back up regularly. I'm always careful to sort my ActionScript files into a logical folder structure. That way, when I start a new project, I can go and grab my existing script files without any hassle.

Any scripts that are still in development, or that I haven't had time to finish, I place in a file called unfinished.as. This way, I don't lose the code or accidentally delete it, and I can come back to it later to finish or develop it further.

Hotmail for Backups

If I lost all of my code snippets, I'd be very unhappy! And, even though I perform regular backups, I can never be sure of their integrity. For this reason, I set up a free mail account with Hotmail, and created an archive folder. Now, every month, I mail myself a ZIP archive of my .as files. This may seem a little extreme, but if you've ever lost your work in a hard drive or backup failure, you'll understand why I go to such lengths to protect my code.

Creating a Simple Function Library

A simple animation library can help you clean up your timeline and make things more manageable. To create your own library, follow these steps, or simply locate Simple_Motion.fla and Simple_Motion.as in the code archive:

1. Look at the code from the ActionScript animation example you completed above; specifically, look at the onEnterFrame event handler. We can write a function that does the same job for a specified clip, given stepX, stepY, endX, and endY values:

Example 3.1. Simple_Motion.as

function SimpleMovement (stepX, stepY, endX, endY, clip)
{
 if (clip._x < endX) clip._x += stepX;
 if (clip._y < endY) clip._y += stepY;
}

The structure of the SimpleMovement function is similar to the event handler, except that it accepts parameters to tell it exactly what to do (and what clip to do it to), instead of relying on predefined variables.

Type the code for this function into a text editor (e.g., Notepad on PC, or BBEdit on Mac) and save it as Simple_Motion.as.

2. To use this file, add the following line of ActionScript to the root of any movie, in the first frame

Example 3.2. Simple_Motion.fla Actions : 1 (excerpt)

#include "Simple_Motion.as"

This compiles the code from the Simple_Motion.as file into the SWF file when it is created, providing access to the SimpleMovement function we created above.

3. Alter the onEnterFrame event handler to use the imported function as follows:

Example 3.3. Simple_Motion.fla Actions : 1 (excerpt)

scripted_animation.onEnterFrame = function ()
{
 SimpleMovement(stepX, stepY, endX, EndY, this);
};

Here, we've created a simple function call, passing the four variables defined on the root of the timeline, as well as the movie clip we wish to animate.

4. Preview you movie in Flash, and you'll see it works exactly as before.

Including the function in another project is as simple as saving the .as file to the directory containing the FLA you're working on, and adding the #include directive to the project. You can then use the function as often as you like.