Flash 8: Projects for Learning Animation and Interactivity (OReilly Digital Studio)

6.3. More Movie Clip Control

In addition to using a simple stop() command, you can also allow the user to control Box Guy if you implement the necessary functionality. For example, you can tell Flash to restart the animation when the user clicks on the character. To accomplish this, add an event handler to your ActionScript. An event handler tells the Flash Player, "When an eventsuch as the user clicking on the characteroccurs, perform the following action(s)." In this case, the desired action is to replay the animation. How do you do this?

Whenever the user clicks on Box Guy, you'll tell the main timeline to play again, and send the same instructions to the legs. Since timelines automatically loop by default, this will keep both timelines playing until the next stop instruction is received. Here's how it's done:

Note: Note that, as is a best practice, you placed this code in the main timeline, not the clip's timeline. Because the script is written in the main timeline, the clip paths are relative to the main timeline. This means that the play() command instructs the main timeline to play. (If you haven't read the "Absolute and Relative Target Paths" sidebar, you may want to do so now.)

  1. In frame 60 of the actions layer, add the event handler code below, using the Actions panel. You will probably quickly grasp the onRelease event handler, as a variant of on (release) from your work with buttons in Chapter 4. The onRelease event handler allows the movie clip to react to a user's mouse input just like a button. It tells Flash to perform this action when the user clicks the mouse on the specified clip (in this case, box_guy_mc). Movie clips also have their own unique event handlers, which you'll learn about in the next chapter. For now, use onRelease to make your movie clip behave like a button:

    box_guy_mc.onRelease = function() { play(); };

  2. Test your movie to see the main timeline play from the beginning. Notice that the legs remain stopped.

  3. Edit the script to add the same play() action to the legs (changes shown in bold):

    box_guy_mc.onRelease = function() { play(); this.legs_mc.play(); };

  4. Remember, the this keyword refers to the timeline in which the path is used. Here, that's box_guy_mc. Since the script is written in the main timeline, all paths need to be relative to that timeline. Your desired target, legs_mc, is not in the main timeline, but rather inside box_guy_mc. Therefore, you need to begin the relative path with this. Save your work and test the movie.

  5. When the character stops walking, click on it to replay the animation.

The script you wrote sets up a function that runs when you click on the box_ guy_mc clip in the movie. In the previous chapter, we briefly discussed how to write and call a function. If you look closely, this format is a bit different. These functions do not have names, and are on the right side of an equation. In this format, the function is directly assigned to the event handler.

Movie Clip Event Handlers

To keep things simple, you used familiar button event handlers with your movie clips, which is appropriate within the context of these exercises. (If you need to refresh your memory on event handlers, see the sidebar of the same name in Chapter 4.) Movie clips also have their own special event handlers designed for specific purposes.

One such purpose is to trap repeating events that occur within a frame. For example, frame scripts execute only once when the playback enters the frame. By contrast, the movie clip event onEnterFrame can cause a script to execute multiple times within a frameas many times as your movie's frame rate allows.

To see this in action, create a new movie and place this action in frame 1:

trace("frame event");

Test your movie and notice that "frame event" is placed in the Output panel only once.

Next, draw a shape on the Stage, and convert it to a movie clip symbol using Modify Convert to Symbol (F8).

Test your movie again and notice that, while you still see the single trace of "frame event" in the Output panel, you also see many occurrences of your movie clip trace.

This separation of functionality between frame, button, and movie clip events allows you to pick the right tool for the job when you write your scripts. You might use a frame script to perform an action once in a frame, a button event handler to easily respond to user interaction, or a movie clip event handler to respond to universal or repeating events.

There are additional movie clip event handlers with their own specific purposes, and you'll learn about some of them later in this book. If you're anxious to explore, testing their functionality is a great way to learn more about them.

These are called anonymous functions, and because they don't have names, they can't be called in the traditional sense. In this case, they are assigned directly to an event handler and are automatically called when the event in question (here, a mouse press) occurs.

In future chapters, you will see that event handlers can also call named functions. This is convenient when the function must be called from other locations as well, or when two different event handlers must call the function.

6.3.1. What's Next?

Before moving on to the next chapter, try using your new ActionScript knowledge to make the character's eyes stop blinking. (Hint: You'll need to give instance names to the on-Stage instances of the face_mc and eye_mc movie clip symbols so you can target them from ActionScript, and you'll need to stop each eye_mc instance separately.)

If you feel inspired, try to improve Box Guy's walk cycle by making sure the first and last frames of the movie clip do not appear to be identical. See the last Note in "Making Him Walk" for tips on how to do so.

Finally, flip the character horizontally (by selecting the movie clip instance and choosing Modify Transform Flip Horizontal), and make him walk from right to left. Can you make him walk back and forth?

Movie clips are arguably the most powerful objects in Flash. They can be used for independent animations, such as the one you created in this chapter, or as self-contained pieces of functionality and logic for a movie. For example, later in this book, you'll use a movie clip to create a preloader for external assets that load into a Flash movie while it's running. (A preloader gives users a visual progress update when an external asset is being loaded.) The preloader clip contains nothing but ActionScript and a text field.

Another great benefit of using movie clips instead of animating everything in the main timeline is that clips can be used in more than one project. If you plan to create an entire series of cartoons using the same characters, for example, you can create walk cycles for each character and simply import them into each new movie.

In the next chapter, you'll use what you've learned to build an animated ad. You'll focus on:

  • How to reveal content over time in your next look at animating text

  • How to hide and reveal content with masks

  • How to morph shapes with shape tweening

  • Basic ActionScript movement

  • More about variables and conditional scripting

Related

Категории