Flash 101 (part 5): Spiralling Out Of Control

By Vikram Vaswani

This article copyright Melonfire 2000−2002. All rights reserved.

 Flash 101 (part 5): Spiralling Out Of Control

Table of Contents
Lights, Camera, Action!.....................................................................................................................................1

Recycle Bin..........................................................................................................................................................2

Rebirth.................................................................................................................................................................4

Dynamic Buttons.................................................................................................................................................5

Mousing Around.................................................................................................................................................6

Remote Control...................................................................................................................................................8

Projecting Your Image.......................................................................................................................................9

i
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...

This article copyright Melonfire 2001. All rights reserved.

Lights, Camera, Action! 1

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

Recycle Bin 2
 Flash 101 (part 5): Spiralling Out Of Control
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.

This article copyright Melonfire 2001. All rights reserved.

Recycle Bin 3
Rebirth
The example you just saw demonstrates how to create a movie clip symbol from scratch. But what happens if
you already have an existing animation sequence (which is not a symbol), and you'd now like to convert it to a
symbol? Do you have to create the entire sequence anew?

Flash allows you to convert an existing animation sequence to a movie clip symbol via a simple copy−paste
process. First, open up the file containing the animation sequence you plan to convert, and select all the
frames containing the sequence. Use the Edit −> Copy Frames command to copy these frames.

Now, create a new movie clip symbol using the Insert −> New Symbol command. Flash will drop you into
symbol−editing mode, as in the previous example. Select the first frame in the Timeline, and use the Paste
Frames command on the shortcut menu to paste the copied frames into the movie clip symbol's Timeline. You
now have a movie clip symbol which you can re−use throughout your Flash movie.

To test the symbol, go back to the Stage, and delete the animation sequence from the Timeline of the main
movie. Insert an instance of the symbol you just created, and use the Control −> Test Movie symbol to test
whether the movie clip works correctly.

This article copyright Melonfire 2001. All rights reserved.

Rebirth 4
Dynamic Buttons
By allowing authors to separate animation sequences into separate movie clip symbols, Flash makes it
possible to add animation and interactivity to buttons as well.

In your existing Flash movie, create a new button symbol named "spiral−button", and insert an instance of the
static graphic symbol "spiral−image" for the Up state (in symbol−editing mode). Next, insert instances of the
rotating movie clip symbol "spiral−movie" for the Over and Down states. Finally, for the Hit state, draw a
filled box which encloses the entire spiral − this identifies the active area of the button.

Now, each time the button symbol receives a "hover" or "click" event, it will automatically activate and play
the movie clip.

Go back to the Stage, and insert an instance of your new button symbol "spiral−button". Use Control −> Test
Movie to view the movie clip − you'll see something like this:

Now, isn't that just dandy?

This article copyright Melonfire 2001. All rights reserved.

Dynamic Buttons 5
Mousing Around
Next up, actions.

Actions allow you to add interactivity to a Flash movie, by executing specific commands in response to user
actions. Flash comes with a full−featured scripting language, ActionScript, which is very similar to Javascript;
you can either manually create scripts, or use Flash's built−in Actions panel to insert actions through a
point−and−click mode of operation.

A number of pre−defined actions are available in Flash, which are more than sufficient for basic requirements;
you've already seen one of them, the Get URL action, in last time's article. Typically, these actions are
triggered in response to either a mouse or keyboard event, or when a specific frame is reached in the
animation sequence.

When you specify an action for a button, Flash automatically inserts an onMouseEvent handler to it − this
specifies whether the action is to be triggered when the mouse button is pressed or released, when the mouse
pointer rolls over the button or when it rolls outside it, or when the user drags the pointer over the button.
Additionally, you can specify an action to be triggered when the user taps a specific key on the keyboard.

For example, this code snippet specifies that the Flash player stop playing the animation sequence when the
user releases the mouse button, or taps the X key on the keyboard.

on (release, keyPress "X") {

stop ();
}

In a similar manner, you can assign actions to a movie clip − Flash automatically inserts an onClipEvent
handler, which can trigger actions based on mouse movement, keyboard entry, or at specific positions in the
clip.

Mousing Around 6
 Flash 101 (part 5): Spiralling Out Of Control

Finally, you can also assign actions to a specific keyframe in the clip by right−clicking the frame and selecting
the Actions command on the shortcut menu.

Note that you should use the Control −> Test Movie command to test whether or not your actions are working
correctly.

This article copyright Melonfire 2001. All rights reserved.

Mousing Around 7
Remote Control
The basic actions available to you in the Actions panel allow you to add very simple interactivity to your
movie. For example, the Go To action allows you to jump to a specific frame, while the Play and Stop actions
allow you to pause and resume the animation sequence respectively. You can toggle the quality of the movie
with the Toggle High Quality action, or send commands to the Flash player (assuming you're using the
standalone Flash player to play back the clip).with the FSCommand action.

In order to illustrate these actions, I've put together a simple animation sequence (you may remember it from
one of the previous articles) and added buttons to it in order to allow the user to control the movie. All actions
are triggered when the user clicks a button, or hits the key corresponding to the first letter of the command.

The first button uses the Play action, the second uses the Go To And Play action, the third uses the Stop
action, and the last one uses the FSCommand action to send a quit message to the standalone player (if it
exists).

You can also assign these actions to a specific keyframe − I'll leave you to experiment with this on your own.

You can do a lot more with ActionScript, including writing your own scripts to alter the size, shape and
appearance of the objects in your Flash movie; however, I'm not going to be covering ActionScript syntax in
this tutorial. Keep an eye out for a separate tutorial on the subject, or take a look at the ActionScript reference
guide which ships with Flash 5.

This article copyright Melonfire 2001. All rights reserved.

Remote Control 8
Projecting Your Image
Once you've created a Flash movie, it's common to immediately export it as an SWF file and embed it into a
Web page. However, Flash also allows you to export your movie in various other formats. For example, if you
take a look at the File −> Export Movie command, you'll see that Flash allows you to export your movie as a
Windows AVI file, an animated GIF, a sequence of standalone GIF, JPEGs or bitmaps, an Adobe Illustrator
document, an AutoCAD document, and a Windows Metafile.

Similarly, if all you want is a single still from the movie, you can select the frame and use the File −> Export
Image command to export the selected frame as a GIF, JPEG, PNG or BMP image.

And finally, you can also export your Flash movie to a standalone executable, which can be played back on
any PC. In order to do this, you need to use something called a Projector, which provides a "wrapper" capable
of playing back a Flash movie.

To create a Flash projector, first export the movie as an SWF file, and then open the exported file in the
standalone player which ships with Flash 5. Use the File −> Create Projector command to create a single
executable which contains a stripped−down Flash player and your movie clip. You can then distribute this
Projector to friends, clients and old girlfriends.

And that's about it for this week. Next week, I'll be wrapping this tutorial up with a explanation of how you
can add sound to your Flash movie, and use GIF, JPEG and other pixel−based images in your Flash movies.
See you then!

This article copyright Melonfire 2001. All rights reserved.

Projecting Your Image 9