The Flash Anthology: Cool Effects & Practical ActionScript - Chapter 1: Flash Essentials

The Timeline, Simplified

In our reality, time can only go forward (though some may argue otherwise!); the same is not true in Flash. The playhead within the timeline can move forward and backward—it can even jump frames.

The Flash timeline is integral to creating effects, and all Flash movies use the timeline, even if only for the first frame. The introduction of Timeline Effects in Flash MX 2004 has made it very easy to create rapid animations and transitional effects within your projects. With basic ActionScript, you can start the playhead, play an animation, and send the playhead back to the beginning of the timeline to play again. And, with only slight modification, you can add an auto-incrementing counter to either conditionally jump to another point on the timeline or return to the start of the timeline. It's simple to create basic effects and build them up into something extraordinary.

Timeline Effects also make it easier to develop complex effects that are transferable to other projects or collaborators. Indeed, this concept of scalability should always be considered at the start of a project. Before you begin, ask yourself, "Will I easily be able to use this effect again in the same movie, or another project, without extensive recoding?" If the answer is no, you need to identify ways to make it scalable.

The easiest path to scalability is to invest a little time in scripting common tasks. If you can animate an object using four lines of ActionScript that represent a reusable function or snippet, go for it! This approach makes for easier maintenance than a script containing multiple duplicated, nested movie clips in which the variables may clash.

Ask yourself these questions before creating a new effect or starting any project:

1. Will multiple effects occur on the stage at the same time?


2. Will I use the same effect more than once in the movie?


3. Can I script the effect I wish to create?


4. Can I make the effect easily portable between projects?


5. Can I easily add new functionality to the effect?


6. If the clients or I don't like the effect, can I easily tweak it?

You can create complex effects using the timeline—in fact, before the release of Flash 5 and later versions, this was the only way to do so. Even today, most of the animation effects we see rely on timeline tweening between frames to create animation, movement, and opacity fading. The combination of Timeline Effects and ActionScript can be a powerful one, but this approach also has a technical advantage. Effects developed this way are more 'tweakable;' changing a few settings here and there impacts the final product considerably in very little time.

The importance of the timeline should not be underestimated. Every single object, from layers to movie clips, is present within the timeline when it's added to the stage. Take some time to become familiar with the best practice principles for working with the timeline.

Label Me Up

After a weekend or holiday, how long does it take you to come to terms with the Flash projects you left behind? Organization is the key to minimizing this "re-familiarization" time. There's no excuse for sloppy code or disorganized Flash projects. Invest a little extra time at the start of a project, add elements with care, and you'll reap the rewards when you return to it after time away or hand it over to your colleagues.

I advocate the creation of a layer named 'Labels' to hold commentary, conditions, and pointers as to what's happening at each step on the timeline. This process is as simple as selecting a frame from the timeline, and adding a Frame Label within the Property Inspector. Maintaining these rolling labels allows you to see what's happening within your movies—you can even add small notes, for example, to remind yourself that code requires alteration, or graphics need to be swapped out.

Note: Flash MX 2004 allows you to efficiently alter the frame label type. To change a name, label, or anchor's representation within the timeline, simply click the drop-down box that appears beneath the frame label within the Property Inspector.

Adding a Labels layer keeps this information separate and helps you organize your thoughts regarding timeline planning.

Organize Your Layers

In Flash version 5 and earlier, users had the ability to organize work into distinct layers within the timeline. This facility was extremely helpful for separating out design components within the stage. A little planning and organization of these layers can benefit you both during the initial development process and when revisiting a project at a later date.

In Flash MX and Flash MX 2004, you can organize these layers into discrete folders. Let me show you how this seemingly small enhancement can improve your workflow.

Let's say you've been working for a while on a project that has many movie clips, buttons, and bitmaps on the stage. You're using many layers, though they're not organized into any particular format, and you're scrolling up and down the timeline window to access them as you go. To make matters worse, the project is growing more complicated, which means more layers and even more scrolling. Fear not—this is all about to change! Figure 1.6 shows how you can create and organize folders into discrete compartments, placing relevant layers within each. When you finish editing a folder, just click the arrow next to it to roll it up and give yourself more space within the timeline. As the projects you undertake become more involved and larger, the improved efficiency you can gain from this approach will become self-evident.

In adding components to a project, I usually start with a standard framework. I have a folder containing two layers—one for ActionScript, the other for labels. I have another folder for Animations, which is then subdivided into relevant sections, and a folder for static imagery. Obviously, you can change this structure to suit your development needs and personal preferences.

Figure 1.6. Organize folders and layers with ease in Flash MX and Flash MX 2004.

Timeline Effects (New in Flash MX 2004)

New within Flash MX 2004 is a much-anticipated addition to the arsenal of experienced programmers and non-programmers alike: Timeline Effects. These are available from the Insert menu after you've selected an object from the stage. You can access them at: Insert > Timeline Effects > Effect.

There are several effect categories, each containing many possible choices:

• Blur
• Expand
• Explode
• Fade In
• Fade Out
• Fly In
• Fly Out
• Grow
• Shrink
• Spin Left
• Spin Right
• Wipe In
• Wipe Out

We'll cover these in depth, and see how they can be used to create engaging effects, in Chapter 4, Text Effects.

Traditionally, to fade the opacity of an object from completely transparent to completely opaque, I would access the timeline and tween between two instances of a movie clip, altering the alpha values accordingly. Though functional, this technique can be quite time-consuming and fiddly, especially if you're looking to build an effect with multiple movie clips fading in, in a stepped manner, to produce a blur. The addition of Timeline Effects provides developers a large degree of control over setup parameters. With so many of these at your disposal, it's quick and easy to create compositions for yourself or for presentation to clients.

Figure 1.7 shows that many properties are available within the Fade In command. Straight out of the box, the effect can be applied and previewed within a matter of seconds, shaving considerable time off the old techniques, especially if you're using multiple iterations of the same effect. Combining Timeline Effects often produces unexpected yet pleasing results. The key to creative success is, as always, to experiment until you're happy with the outcome.

Figure 1.7. Edit the Fade In Timeline Effects parameters within Flash MX 2004.

Wrapping Up the Basics

We've covered the basics of ActionScript and the Timeline, and discussed best practices for both. Now it's time to apply these tactics to create stunning effects that are appealing, easily transferable among projects, and fun to explore and expand. In the next few chapters, we'll cover a range of subjects, with examples, suggestions, and explanations of techniques that will prove invaluable in your day-to-day Flash projects.

If you can't wait for the next installment, download all three free chapters now. And check out the details of The Flash Anthology: Cool Effects & Practical ActionScript.