Creating Animation

Setting Up a Motion Tween Animation

As you just found out, motion tweens are used to change the properties of an object over a certain number of frames. You can change properties such as position, size, alpha, tint, or rotation, and also motion tween along a path. You should always change an object into a symbol before motion tweening the instance, which helps keep your file size lower when exporting the SWF. The file size is kept low because Flash can reuse assets in the Library instead of re-creating the data each time it is encountered on the Timeline.

Note: You can shape tween raw data, but you cannot shape tween instances or bitmaps. They have to be broken apart into raw data first by choosing Modify>Break Apart. You will learn how to apply a shape tween to raw data (vector drawings) later on in this lesson.

There are a few different ways you can add motion tweens to an FLA document, which you will learn how to do in the following exercises. In this exercise, you will be adding a motion tween to the bookstore menus you built in earlier lesson, which causes the menu to open and close when a user clicks or rolls off a menu. You will also add the stop action to stop the animation from repeatedly looping when the SWF file plays.

1. Open bookstore8_complete.fla (located in the sample files you downloaded) and save a new version of the file as bookstore9.fla.

   In Lesson 4, you created most of the symbols you will animate in this lesson. Save a new version of the file because you will add a lot of new information in this file. By saving a new version, you can always revert to the old one if you want to redo your edits and try again.

2. Find products_mc on the Stage, press F8 to convert it to a movie clip, and name the movie clip productsMenu_mc.

   This process might seem strange to you. The reason you are inserting the graphic, buttons, and line inside a single movie clip is to animate all these elements together. It would be much too tedious to try animating each element separately, and the way the FLA is set up it is not possible to animate products_mc directly on the Stage. This way, you can easily motion tween the entire movie clip as one object and then target it using ActionScript later on because it can be given an instance name.

   Tip: If you have difficulty selecting the menus because the buttons are layered on top of them, make sure that the buttons layer is locked and then hide the layer by clicking the Hide Layer button in the Timeline.

3. Double-click productsMenu_mc to edit it on the Stage. Zoom in on the menu if necessary.

   After you double-click productsMenu_mc, the rest of the Stage is greyed-out so you can concentrate on the symbol you’re editing. Editing a symbol this way allows you to animate the menu in relation to the other symbols on the Stage.

   Note: To zoom in to the menu, select the Zoom tool from the Tools panel. The Zoom tool is set to zoom in if you can see a plus symbol on the tool. If not, select the Enlarge tool in the Tools panel’s Options area.

   Click the menu on the Stage using the Zoom tool, and the Stage zooms in while placing the menu at the center. Zoom in a couple of times, but make sure that you can still see the products_btn button above the menu. Select the Selection tool from the Tools panel when you finish.

4. Select Layer 1 and rename it menu tween; then insert a new layer and rename it actions. Add keyframes to the actions layer on frames 11 and 20.

   Select the menu tween layer, click the Insert New Layer button and rename it actions. Create new keyframes on frames 11 and 20 of the actions layer by selecting each frame and pressing the F6 key. You will change the position of the movie clip in each keyframe. Changing the movie clip position creates the animation after you add the tweens in between each keyframe. You will add the tweens in the following exercise.

   If you leave a movie clip on the Stage containing content on more than one frame, it continuously loops unless you stop the movie clip using ActionScript. You will add the stop action in the following step so the movie clip does not endlessly loop anymore.

5. Add stop actions on the Timeline to control the animation.

   Open the Actions panel by choosing Window>Development Panels>Actions from the main menu. The Actions panel opens docked below the Stage on Windows or as a floating panel on the Mac. The Script pane is the large text field located to the right of the Script navigator and Actions toolbox. The following figure shows you the different parts of the Actions panel.

   

   Figure 2. The Actions panel

   Now you are going to add some ActionScript into the Actions panel. Select the keyframe on frame 1 and type stop(); into the Script pane. Then select the keyframe on frame 11 and type stop(); into the Script pane again and then repeat the same for frame 20. The stop action stops the playback of the current movie clip at these locations, and in Lesson 11 you will add the ActionScript to make the menu animate properly. The reason you place the stop action before the keyframe on frame 12 (which you will create in the following step) is so the animation doesn’t stop when the playhead is directed to tween the menu upwards. Instead, it stops at the end of the animation when the menu goes downwards. The animation gets confused if you tell the playhead to slide upwards on frame 12, and there is a stop action there as well.

   When you finish adding the ActionScript, lock the actions layer by clicking the dot underneath the Lock Layer icon, which prevents anything being added to the Stage on the actions layer. It is a good practice to never place any raw data, symbols/instances, components or assets onto a layer that has ActionScript. If you place code on the same layer as objects, such as components or movie clips that contain ActionScript, then sometimes code conflicts can arise in the SWF file. Your FLA file might also more difficult to debug.

   

   Figure 3. The Timeline its layers

6. Insert a new layer and rename it labels. Then add new keyframes and frame labels to frames 2 and 12, and lock the layer when you finish.

   Create the new layer directly below the actions layer and rename this layer labels. Create new keyframes on frame 2 and frame 12 by selecting each frame and pressing F6.

   Select frame 2 on the labels layer and enter a frame label named slidedown into the <Frame Label> text field in the Property inspector. Then select frame 12 on the labels layer and enter slideup into the <Frame Label> text field. When you finish, lock the layer as you did in the previous step to prevent accidentally adding any content to it later on.

   

   Figure 4. The labels layer and the slidedown and slideup keyframes

7. Insert new keyframes on frame 12 and 20 of the menu tween layer.

   These frames determine how the menu animates. Frame 12 is the end of the animation for the menu opening and the beginning of the animation for the menu closing.

8. Change the position of the product_mcmovie clip at frame 12.

   Select product_mc on the Stage at frame 12. Move the movie clip straight downward by holding the Shift key and pressing the Down arrow key until the clip is directly underneath the bar_gr, as shown in the following figure.

   

   (+) View Larger

   Figure 5. The Stage, with the movie clips in place

9. Return to the main Stage and repeat each of these steps for the other two menus.

   Click Scene 1 in the edit bar to return to the main Stage. Repeat Steps 2 through 8 for company_mc and contact_mc. When you finish, all three menus are ready to animate using tweening.

10. After you finish, remember to save the changes you have made to the FLA.

    You have now set up the menu movie clip so you can easily add motion tweens. Instead of inserting a motion tween and then adding content, you have organized your content before adding a motion tween. Flash is flexible and allows you to use either way to animate content: Add a motion tween and then move the instance, or move the instance and then create the motion tween. In the following section, you will add the motion tweens that make the animation work.

    Tip: You can create only one motion tween on a single layer. If you want to tween multiple symbols concurrently, you have to place each symbol on its own layer. To distribute a bunch of separate symbols to their own layers, select the symbols you want to move and choose Modify>Timeline>Distribute to Layers.

    Distribute to Layers is useful when you need to animate individual characters of a text block (that has been broken apart) or if you are importing a group of items onto the Stage while you are creating your FLA. Flash renames each layer for you using the imported file’s filename. Distributing to layers also keeps your FLA organized and this speeds up development.

Page 3 of 4

Previous Page

Next Page