The Flash Anthology: Cool Effects & Practical ActionScript

Sometimes you want a Website to look, well, a little more animated. When that happens it's time to turn to Flash. In The Flash Anthology: Cool Effects & Practical ActionScript by Steve Grosvenor you'll see how to build over 60 real-world Flash applications that can add wow factor to your Web site.

This book is aimed at developers who've got the basics of Flash under their belt but haven't yet delved too far into ActionScript. By providing solutions to some of the most common Flash problems, and addressing frequently desired tasks this book aims to inspire, educate and motivate.

DMXzone will be reviewing the book shortly (see here) but before then, courtesy of the publishers Sitepoint, we've got a sample chapter from the book covering Animation Effects available for download (and a short snippet extracted below).

 Order The Flash Anthology: Cool Effects & Practical ActionScript, direct from Sitepoint >>

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:

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!