Section 7.4. Timeline Versus ActionScript Animation

7.4. Timeline Versus ActionScript Animation

Throughout the remainder of this book, you'll use ActionScript more and more to add interactivity and logic to your Flash content. For now, however, start by creating a simple animation once with the timeline and once with ActionScript. Comparing the two processes will help you identify which is most suitable for each situation you encounter.

Many of the same effects that are achieved using motion tweens can also be created using ActionScript. Simple animations may be quick and easy with the timeline, but speed isn't always the only thing to consider. When animating an object on the Stage, for example, ActionScript is smoother. Occasional pauses due to timeline looping can be eliminated with this approach, as can hiccups caused by duplicated frames.

Scripted motion also allows for many (even random) runtime variations, whereas timeline-only motion can't be changed at all. Similarly, scripted animations can respond to user actions (such as following the mouse) in ways that timeline-based animations cannot. This opens up new possibilities for games, physics simulations, and animations that are impractical to create by hand. Therefore, scripted animation can be used when timeline-based animation is not possible or is prohibitively difficult or time-consuming.

7.4.1. Motion Tweens Revisited

As the first step in this part of the project, you'll animate a clock strictly with the timeline. Since you want to concentrate on the pros and cons of timeline tweening and ActionScript animation, it's best to start out with the same conditions in both situations. For this reason, you'll start with a basic clock ready to animate:

1. Using the same file you've been working on, add a new layer above the headline and name it clock.

2. In frame 85, add a keyframe.

3. Open the animated_ad_library.fla using the File Import Open External Library menu option.

4. Double-click the clock to edit it. You will see that the bottom layer consists of the clock face, the middle layer contains the minute hand, and the top layer contains the hour hand.

5. Zoom in until you can see the hour hand quite clearly. Click on it and notice where the transform point is. You will probably recall that the crosshairs are the registration point. This is usually the point used to position symbols on the Stage. The small white circle is the point around which transformations (scaling, rotation, skewing, etc.) occur. Choosing the Free Transform tool and selecting any symbol instance adds handles around all sides of the symbol and allows the transform point to be moved. By default, the transform point is the geographical center of a symbol. You will notice in each of the clock hands that the transform point has been moved down to the bottom of the hand, as seen in Figure 7-12. This makes it possible to rotate the symbol instance not around its center point, but around the base of the hand, just like on a real clock.

   Figure 7-12. Moving the transform point to the base of the clock hand symbol allows for easier rotation

   

6. Move the playhead to frame 96. Select frame 96 in all three layers, and add frames (F5). This ensures that each layer's content is visible through to frame 96.

   Figure 7-13. Set the clockwise rotation of the hour hand

   

7. Select the first keyframe, at frame 1, of the hour_hand layer and create a motion tween. Rather than rotating the hour hand manually, however, look below the Tween menu at the controls that have just been enabled. Select CW from the Rotate drop-down menu and enter 1 for the times value, as shown in Figure 7-13. This causes the clock hand to automatically rotate clockwise once throughout the course of the tween.

8. Repeat the process for the minute_hand layer, this time entering a value of 8 in the times field. This causes the minute hand to rotate eight times during the tween, causing it to appear as though it's moving much faster than the hour hand as time flies by.

9. Test the movie. The clock pops in at the end of the ad like it should (so it won't detract from the house animation), but it looks a little funny there without anything to tie it to the ad. Place a static text box next to the clock that says:

    Time is Short. Act Now! 

   
   

   Right-justify the text to make it fit nicely with the clock and the slope of the house outline's roof.

10. Save your work and test the movie again. Compare your work with animated_ad_10.fla.

    Getting the clock hands to rotate around the face of the clock was definitely quick and easy. For simple animations that never change, timeline tweens can be very useful. However, your animation is now set. Although you can certainly make changes to the timeline, the animation cannot vary at runtime. In the next section, you'll replace your clock tweens with an ActionScript solution.

7.4.2. ActionScript Alternative

When animations are created strictly using the timeline, there is little or nothing the user, or you as a programmer, can do to influence those animations at runtime. However, if the movement is controlled with ActionScript, the options available to you and your users are vast. Start by removing the tweens from your timeline-based clock and converting to a simple rotation script:

1. In frame 85, double-click your clock to edit it in place. Delete all frames, except for the last keyframes, in all layers. To do this, select all frames in all layers (except the last keyframes) and press Shift-F5.

2. If you click on each of the hands, you will notice they already have instance names. If this is no longer true, name the smaller hand hour_mc and the longer hand minute_mc.

3. Above the timeline, click Scene 1 to get back to your root movie. Still in frame 85, select the clock movie clip and give it an instance name of clock_mc.

4. In frame 85, add to the frame script in the actions layer. Add the following movie clip event handler to control the clock:

    clock_mc.onEnterFrame = function() { this.hour_mc._rotation ++; this.minute_mc._rotation += 12; }; 

   
   

5. Save your work and test your movie. With the previous simple script, you have achieved the same kind of animation that you previously did with the timeline with less work, and the result is not only smoother but, as you will soon find out, can be changed at runtime.

Before continuing, review your operators by looking at the functionality of the previous script. Every enterFrame handler updates the rotation property of each hand. Because the event handler is applied to the clock_mc movie clip, the this keyword in the handler refers to the clock itself. Within the handler, you see the hour_mc and minute_mc movie clips inside clock_mc targeted. The hour hand should move slowly, so the ++ mathematical shortcut is used to add one degree of rotation to the existing rotation. This is just a shorter way of writing:

 this.hour_mc._rotation = this.hour_mc._rotation + 1; 

The minute hand moves 12 times as fast because the += shortcut adds 12 degrees of rotation. Again, this is a shorter way of writing:

 this.minute_mc._rotation = this.minute_mc._rotation + 12; 

Now it's time to learn how to change the animation on the fly. You are going to write a very simple routine that doesn't even require conditionals to change the rotation direction of the clock hands. To do this, you need to first create a variable that will be used as a multiplying factor.

If you multiply the degrees you're adding to the rotation of each hand by 1, nothing will change: 1 multiplied by 1 is still 1, and 12 multiplied by 1 is still 12. However, if you multiply 1 and 12 by1, you will get1 and12, respectively. When you add a negative rotation, the hands will rotate backwards!

1. In the same script, replace the existing clock_mc event handler with the following script:

    speedFactor = 1; // clock_mc.onEnterFrame = function() {         this.hour_mc._rotation += 1 * speedFactor;         this.minute_mc._rotation += 12 * speedFactor; }; // clock_mc.onRelease = function() {         speedFactor *= -1; }; 

   
   

2. Save your work and test your movie. The clock will now rotate backwards if you click on it. Better yet, if you click on it again, it will rotate forwards again. Why? Because, as you saw previously, if you multiply 1 by1, you will get1, causing a backward rotation. However, if you multiply1 by1, you will get 1 again, causing a forward rotation. Again, a simple script makes your file much more dynamic and fun for the user. But you're not finished yet…

3. Add the following two event handlers, save your work, and test your movie:

    clock_mc.onRollOver = function() { speedFactor *= 4;  }; clock_mc.onRollOut = function() { speedFactor *= .25; }; 

   
   

The first event handler adds a new change when you roll your mouse over the clock. It takes whatever the existing speedFactor variable is (either 1 or1) and multiplies it by 4. This makes the hour hand rotate at 4 or4 degrees per enterFrame while the minute hand rotates at 48 or48 degrees per enterFrame, making the rotation four times as fast.

The second event handler changes the variable again when your mouse is moved off the clock. In this case, it multiplies the speedFactor value by one-quarter, restoring it to its previous speed. Now the clock can be changed with three different event handlers, moving smoothly in two directions at two different speeds.

Your ad is finished. If you want to compare your work to the source files provided, your movie should now be very similar to animated_ad_complete.fla.