Flash 101 - Part 5: Spiralling Out Of Control

Lights, Camera, Action!

The last time out, I showed you how to create simple Flash buttons, and attach actions to them. But that's just the tip of the iceberg - there's a whole lot more you can do with the built-in Flash actions.

This week, I'm going to expand on that theme, with demonstrations and illustrations of how the various Flash actions can be used in your Flash movie; I'll also be explaining the various mouse and keyboard events that can be used to trigger them. If you're familiar with JavaScript, you'll notice numerous similarities between that language and the Flash event model; if you're not, don't worry - all will become clear to you soon.

First, though, it's time to make a movie...

Recycle Bin

Thus far, you've learnt how to use two types of symbols: buttons and graphic symbols. However, Flash also allows you to create a third type of symbol - the movie clip.

Unlike buttons and graphic symbols (which are largely static), movie clip symbols are reusable pieces of animation, each with its own Timeline, layers and objects. Think of a movie clip symbol as a mini-movie, which can be dropped into a larger movie and used over and over again.

This may sound a trifle confusing - after all, how can you place one animation clip within another? - but it's not as complicated as it appears. Consider the following situation: you have a Flash clip which includes an object performing some repetitive motion (for example, a ball bouncing up and down, or a segment of blinking text). If your animation clip is a long one, it is tiresome to animate this repetitive movement for the entire length of the clip.

A simpler alternative is to animate the repetitive sequence once, turn it into a movie clip symbol, and then insert this movie clip into the larger Flash movie, where it can play repetitively. And since this is now a symbol, you can reuse the animation sequence at different points in our movie without adding to file size - a significant advantage.

An example might help to make this clearer. Open up a new Flash clip, and create a new movie clip symbol named "spiral-movie". Flash will drop you into symbol-editing mode (you'll notice that this symbol has its own timeline and layers).

Next, create a simple spiral using the various drawing tools - it might look something like this:

Still in symbol-editing mode, convert this spiral object into a graphic symbol, called "spiral-image". You should now see two symbols in your Library, one a movie clip and the other a graphic.

Still in symbol-editing mode, insert a new keyframe at frame #30, and create a motion tween between the frames. On the Frame panel, set the symbol to rotate counter-clockwise as it tweens. You can have it rotate as many times as you like. When you play the clip, you'll see something like this.

Note that this animation sequence is actually a movie clip symbol - if you take a look at its entry in the Library, you'll notice a tiny play/stop button in the preview window, which lets you play the movie clip symbol.

Now that your movie clip symbol has been created and is functioning as advertised, switch back to the Stage. Your Timeline should be empty, with no objects on the Stage.

Drop the movie clip symbol you just created from the Library on to the Stage, and use the Control -> Test Movie command to play the clip. You'll notice that although your Flash clip contains only a single frame, the instance of the movie clip symbol in that frame will play continuously in a loop.

Since the movie clip is a symbol, you can place multiple instances of it on the Stage, and manipulate the visible characteristics of each one - as the following example demonstrates.

Obviously, for repetitive animation, converting the sequence to a movie clip symbol offers numerous advantages: it reduces file size, improves performance, and makes changing object properties a simpler and more efficient process.

Copyright Melonfire, 2000. All rights reserved.