Flash 101 - Part 5: Spiralling Out Of Control

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, 2000. All rights reserved.