Recipe 9.2. Creating Buttons that Animate


Problem

You want to create a button that will animate in one, two, or all three of its states.

Solution

Add a movie clip instance to the button's keyframes in which the movie clip contains animation.

Optionally, use a movie clip and some ActionScript to control the timeline.

Discussion

Buttons (and movie clips with button states) allow you to define only one frame for each of their states, and that limitation may at first appear to be a challenge when you want to add animations to your button states. However, you can achieve this goal by adding movie clip instances containing animation to the keyframes of the symbol's timeline. This trick works because a movie clip's timeline can play independently of the timeline that contains it.

There are many different combinations to choose from when talking about adding animations to buttons. Some of the more common are as follows:

  • Animate the up state, and have non- animated over and down states. For example, you might have a button that spins until a user moves the mouse over it, at which point it would stop spinning.

  • Animate the over state, but not the up or down states. This is the reverse of the previous scenario. For example, a button could remain static until the user moves the mouse over it, at which point it could begin to spin or animate in some other way.

When a button state is activated, either by the user clicking on the button or moving the mouse over or away from the button, Flash automatically moves the playhead in the button's timeline to the corresponding frame. This playhead is moved to that frame only, however, and does not continue to play subsequent frames. But by utilizing a movie clip, you can achieve your goal. For example, you can animate the over state of a button by following these steps:

  1. Create a new button with up and down states as outlined in Recipe 9.1. Use a blank keyframe for the over state.

  2. Create a new movie clip symbol with animation taking place over multiple frames. (See movie clip and timeline recipes in Chapters 8 and 9 for more information on how to do this.)

  3. Return to the button symbol's timeline.

  4. Move the playhead to the over frame.

  5. Select all the contents on the stage on the over frame, and delete them.

  6. Open the library, and drag an instance of the movie clip symbol from the library onto the stage at the over frame in the button symbol.

After you have completed these six steps, you have successfully created a button that animates when the user moves the mouse over it. In order to see the button work, you must create an instance of the button symbol within your movie, and test it.

If you want to create a button that animates on a different state, you can accomplish this by placing an instance of an animating movie clip within the button at the corresponding frame. For example, you can create a button that animates on the up state by placing an animating movie clip instance within the button's up frame.

Although the preceding steps are helpful for adding continuously animating button states, they don't directly address the scenario in which each button state animates to the next. For example, you may want to make a button in which the transition between the up and over states is a gradual animation rather than relying on the default functionality in which Flash simply jumps from the Up frame to the Over frame. While you can accomplish this feat using a variation of the technique described earlier in this recipe, it's much more practical to accomplish it using a movie clip instance rather than a button instance. You can then use some relatively simple ActionScript to control the playback of the timeline appropriately:

  1. Create a new movie clip symbol.

  2. Within the symbol add two new layers, for a total of three. Name the three layers Labels, Actions, and Animation.

  3. Define six keyframes on the Labels layer. Give the keyframes the following frame labels: up, over, out, press, release, and outside. The up frame should be on frame 1. The exact frame numbers of the subsequent keyframes depend on the animation between button states. Although the up state doesn't have any animation, it's generally a good idea to leave a fewframes between it and the next keyframe so that the frame label is visible in the timeline. Therefore, if each animation requires nine frames, the keyframes can appear on frames 1, 10, 20, 30, 40, and 50.

  4. On the Actions layer, there ought to be a keyframe on frame 1 as well as the frames just prior to the out, press, release, and outside frames. And there ought to be a keyframe on the frame at which the outside animation stops. If the animations each require nine frames and the frame labels appear on frames 1, 10, 20, 30, 40, and 50, then the keyframes on the Actions layer appear at frames 1, 19, 29, 39, 49, and 59.

  5. On each of the keyframes on the Actions layer, add the following ActionScript code:

     this.stop(); 

  6. On the Animation layer add the artwork and any tweens. The up frame ought to have the default up state of the button. The over frame ought to be the starting point for the transition from the up to over state (meaning the first frame of that animation is likely identical to the up state). The out frame ought to be the starting point for the transition from the over to the up state. The press frame ought to be the starting point for the transition from the over to the down state. The release frame ought to be the starting point for the transition from the down to the over state. The outside frame ought to be the starting point for the down to the up state. Figure 9-1 shows an example of what the timeline might look like.

    Figure 9-1. An example of a timeline for an animated button movie clip

  7. Exit out of editing the symbol, and return to the main timeline or the point at which you want to add an instance of the animated button movie clip.

  8. Add an instance of the movie clip symbol, and give it an instance name. This example uses the instance name mButton.

  9. On the timeline to which the instance was added, add the following Action-Script code:

     mButton.onRollOver = function():Void {   this.gotoAndPlay("over"); }; mButton.onRollOut = function():Void {   this.gotoAndPlay("out"); }; mButton.onPress = function():Void {   this.gotoAndPlay("press"); }; mButton.onRelease = function():Void {   this.gotoAndPlay("release"); }; mButton.onReleaseOutside = function():Void {   this.gotoAndPlay("outside"); }; 

That ActionScript code tells the movie clip to play the correct transition animation for each mouse event.




Flash 8 Cookbook
Flash 8 Cookbook (Cookbooks (OReilly))
ISBN: 0596102402
EAN: 2147483647
Year: 2007
Pages: 336
Authors: Joey Lott

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net