By: Icarus

April 24th, 2002

Reader Rating: 7.5

Lights, Camera, Action!

The last time out [1], 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 [2], 2000. All rights reserved.

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.

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?

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.

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.

Copyright Melonfire [3], 2000. All rights reserved.

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.

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 [4], 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!

Note: All examples in this article have been tested on Macromedia Flash 5.0. Examples are illustrative only, and are not meant for a production environment. YMMV!
Copyright Melonfire [5], 2000. All rights reserved.

[1] http://www.webmasterbase.com/article/730
[2] http://www.melonfire.com/
[3] http://www.melonfire.com/
[4] http://www.webmasterbase.com/article/737
[5] http://www.melonfire.com/