Creating an Animated Map – Lesson 91 Creating an Animated Map Lesson 9

2 Creating an Animated Map – Lesson 9 Objectives Create a mask to control the view of a large graphic. Create motion tweens that zoom in and shift position. Use the Pen tool to draw map highlights. Add sounds to animation. Use the stop action to control movie segments.

3 Creating an Animated Map – Lesson 9 Use a mask to control the view of a large graphic A mask is a hole in a layer that can be used to make some sections of the layer visible and others invisible. Layers below the mask layer are affected by the mask, while layers above the mask layer are not. You create objects on the mask layer that are the holes that allow the viewing of objects on layers below the hole. A mask could be used to view a section of a map on the layer below the mask. As the viewer wants to see a new section of the map, the mask remains fixed in place, but the image on the layer below can be moved or zoomed to reveal a different area.

4 Creating an Animated Map – Lesson 9 Create a rectangular mask To create a mask layer: Create a new layer to contain the mask. Select the Rectangle tool and draw a rectangle. Hint: Set the stroke to None to make the object easier to select. The Fill color does not matter for a mask object. Select the object, set its proportions, and move it to the desired location. Click the layer name to select it, click the Modify menu, point to Timeline, and then click Layer Properties to open the Layer Properties box. Select Mask from the Type category and click OK. The mask layer will mask any layers below it in the Layers column. Those above it will not be masked.

5 Creating an Animated Map – Lesson 9 The mask in effect This figure shows a rectangular mask in effect and how it blocks a portion of the image from being seen. Note that, for the mask to take effect, the layers must all be locked. Do this by clicking the padlock icon above the layers in the Layers column. Visible area Hidden area

6 Creating an Animated Map – Lesson 9 Creating motion tweens You can create motion tweens that zoom in or out on an object or that cause it to shift positions. You first need to set up the Timeline by inserting keyframes in the frames that will be the starting points for the motion tweens. It is often useful to create a new layer to be used to define the actions and labels that will be used by the motion tweens. Assign frame labels to the frames that will be referenced by the actions you define.

7 Creating an Animated Map – Lesson 9 Create a zoom motion tween You can create a tween that will zoom in or out on an image due to some action. Create a keyframe for the ending frame of the zoom. Set the zoom factor for that frame in the Transform panel. (Use the Constrain option to keep the object size proportional to itself.) Create a motion tween between the starting point of the object and the keyframe where it reaches the specified zoom factor. Test the movie to see if the zoom effect works correctly.

8 Creating an Animated Map – Lesson 9 Create highlights with the Pen tool As shown in the text, the Pen tool could be used to create a highlighted line on a map showing directions to someone. To do so: Click the Pen tool in the toolbox and select a stroke color (yellow or orange are good). Click at the starting point for the highlight line on the graphic to be highlighted. Click again on each location where the road on the map bends or changes direction. Double-click the Pen tool on the last point to end the line. You can increase the line width in the Property inspector if you want the line to be thicker.

9 Creating an Animated Map – Lesson 9 A map with a highlighted route The figures below show two examples of how the Pen tool can be used to highlight a route on a map. It can also be used to highlight text, if so desired, or just about any object. The orange lines were drawn using the Pen tool.

10 Creating an Animated Map – Lesson 9 Add sounds to your animation It is very easy to add a sound clip to a button or some other section of your animation. You could use a sound to indicate a transition from one section of the site to some other section. Sounds can be added from the Sounds section of the Common Libraries menu.

11 Creating an Animated Map – Lesson 9 How to add a sound to a transition Click the Window menu, point to Other Panels, then Common Libraries, then Sounds. Select the frame number for the layer where the sound is to be inserted. Select the sound you want from the available choices and drag it onto the stage. The sound is now inserted into that frame on that layer. The sound can be dragged to any other frame that is marked as a transition in your movie, and it will play when that frame is played.

12 Creating an Animated Map – Lesson 9 Insert stop actions to control the play of your movie You can divide a movie into segments that only play when the viewer wants to see that section using stop actions. The movie will play uninterrupted until it encounters a stop action and will then halt and wait for some other action to occur. To add a stop action: Click the frame where the action is to be inserted. Open the Actions panel and double-click the stop action in the Timeline Control category to insert it into the selected frame. Add the same action to any other frames where you want the movie to stop playing.

13 Creating an Animated Map – Lesson 9 Summary In this lesson, you learned: To create a mask to control the view of a large graphic. To create motion tweens that zoom in and shift position. To use the Pen tool to draw map highlights. To add sounds to animation. To use the stop action to control movie segments.