6. Animating Shapes and Using Masks

1. Double-click the 06End.html file in the Lesson06/06End folder to play the animation in a browser.

The project is an animation of a flame flickering at the top of a fictional company name. Not only does the shape of the flame change constantly, but so does the radial gradient fill inside the flame. A linear gradient sweeps across the letters of the company name from left to right. In this lesson, you’ll animate both the flame and the colors that move across the letters.

2. Close your browser. Double-click the 06Start.fla file in the Lesson06/06Start folder to open the initial project file in Animate.

3. Choose File > Save As. Name the file 06_workingcopy.fla and save it in the 06Start folder. Saving a working copy ensures that the original start file will be available if you want to start over.

Shape tweening is a technique for interpolating stroke and fill changes between different keyframes. Shape tweens make it possible to smoothly morph one shape into another. Any kind of animation that requires the stroke or the fill of a shape to change—for example, animation of clouds, water, or fire—is a perfect candidate for shape tweening.

Because shape tweening applies only to shapes, you can’t use groups, symbol instances, or bitmap images.

The text layer is at the very top and contains the company name, “Firestarter.” The flame layer contains the flame, and the bottom layer, called glow, contains a radial gradient to provide a soft glow.

There are no assets in the library.

1. Select frame 40 for all three layers.

2. Choose Insert > Timeline > Frame (F5).

Frames are added to all three layers up to frame 40 to define the overall length of the animation.

3. Lock the text layer and the glow layer. This prevents you from accidentally selecting or moving the graphics in those layers.

4. After making sure that none of the frames is selected, right-click frame 40 in the flame layer and select Insert Keyframe, or choose Insert > Timeline > Keyframe (F6). The contents of the previous keyframe in frame 1 are copied into the new keyframe.

You now have two keyframes on the Timeline in the flame layer, at frame 1 and at frame 40. Next, you’ll change the shape of the flame in the end keyframe.

5. Choose the Selection tool.

6. Click away from the shape to deselect it. Move your cursor close to the outlines of the shape and drag the contours of the flame to make the flame skinnier.

The beginning keyframe and the end keyframe now contain different shapes—a fat flame in the beginning keyframe, and a skinny flame in the end keyframe in frame 40.

1. Click any frame between the beginning keyframe and the end keyframe in the flame layer.

2. Right-click and select Create Shape Tween. Or, from the Insert menu choose Shape Tween.

Flash applies a shape tween between the two keyframes, which is indicated by a black forward-pointing arrow and a green fill in the tween span.

3. Watch your animation by choosing Control > Play (Enter/Return), or by clicking the Play button at the bottom of the Timeline.

You have created a smooth animation between the keyframes in the flame layer, morphing the shape of the first flame into the shape of the second flame.

1. Select the last keyframe of the shape tween in the flame layer.

2. Drag the last keyframe to frame 6.

The shape tween shortens.

3. Press Enter/Return to play your animation.

The flame flickers quickly, and then remains static until frame 40.

1. Right-click frame 17 in the flame layer and choose Insert Keyframe. Or, choose Insert > Timeline > Keyframe (F6).

The contents of the previous keyframe are copied into the second keyframe.

2. Right-click frame 22 in the flame layer and choose Insert Keyframe (F6).

The contents of the previous keyframe are copied into the new keyframe.

3. Continue inserting keyframes at frames 27, 33, and 40.

Your Timeline now has seven keyframes in the flame layer, with a shape tween between the first and second keyframes.

4. Move the red playhead to frame 17.

5. Choose the Selection tool.

6. Click away from the shape to deselect it. Drag the contours of the flame to create another variation in its shape. You can make the base thicker, or change the curvature of the tip to make it lean left or right.

7. Modify the flame shapes in each of the newly inserted keyframes to create subtle variations.

1. Right-click any frame between the second and third keyframes and choose Create Shape Tween. Or choose Insert > Shape Tween.

A black forward-pointing arrow on a green background appears between the two keyframes, showing that you’ve applied a shape tween.

2. Continue to insert shape tweens between all the keyframes.

You should have six shape tweens in the flame layer.

3. Press Enter/Return to watch the animation play.

Your flame flickers back and forth for the duration of the animation. Depending on how extensive your modifications to the flame have been, your flame may undergo some weird contortions between keyframes—for example, flipping or rotating unpredictably. Don’t worry! You’ll have a chance to refine your animation later in the lesson with shape hints.

1. Right-click the first keyframe on the flame layer and select Copy Frames. Or choose Edit > Timeline > Copy Frames.

The contents of the first keyframe are placed on your clipboard.

2. Right-click the last keyframe on the flame layer and select Paste Frames. Or choose Edit > Timeline > Paste Frames.

The first and last keyframes now contain identical flame shapes.

1. Click the Loop button at the bottom of the Timeline, or choose Control > Loop Playback (Alt+Shift+L/Option+Shift+L) to enable continuous playback when you play the movie.

Markers appear on the Timeline header indicating the range of frames that loop during playback. Next, adjust the markers to extend the loop to include the entire movie.

2. Extend the markers to include all the frames on your Timeline (frames 1 through 40), or click the Modify Markers button and choose Marker Range All.

3. Press Enter/Return to test the animation.

The flame animation plays and loops continuously. Click the Pause button or press Enter/Return again to stop the animation.

1. Select all the frames on the flame layer, and right-click and choose Cut Frames. Or, choose Edit > Timeline > Cut Frames.

The keyframes and shape tweens are removed from the Timeline and placed on the clipboard.

2. Choose Insert > New Symbol (Ctrl+F8/Command+F8).

The Create New Symbol dialog box appears.

3. Enter flame as the name of the symbol, and choose Movie Clip as the Type. Click OK.

A new movie clip symbol is created and opens in symbol-editing mode.

4. Right-click the first frame on your movie clip timeline and select Paste Frames. Or, choose Edit > Timeline > Paste Frames.

The flame animation from the main Timeline is pasted into your movie clip symbol’s timeline.

5. Click the Scene 1 button on the Edit bar at the top of the Stage, or choose Edit > Edit Document (Ctrl+E/Command+E).

You exit symbol-editing mode and return to the main Timeline.

6. Select the flame layer, which is currently empty. Drag your newly created flame movie clip symbol from the Library panel to the Stage.

An instance of the flame movie clip symbol appears on the Stage.

7. Choose Control > Test (Ctrl+Enter/Command+Return).

Flash exports the SWF in a new window, where you can preview the animation. The flame flickers continuously in a seamless loop.

Shape hints force Animate to map points on the start shape to corresponding points on the end shape. By placing multiple shape hints, you can control more precisely how a shape tween appears.

1. Double-click the flame movie clip symbol in the library to enter symbol-editing mode. Select the first keyframe of the shape tween in the flame layer.

2. Choose Modify > Shape > Add Shape Hint (Ctrl+Shift+H/Command+Shift+H).

A red circled letter “a” appears on the Stage. The circled letter represents the first shape hint.

3. Choose the Selection tool and make sure that Snap To Objects is selected.

The magnet icon at the bottom of the Tools panel should be depressed. Snap To Objects ensures that objects snap to each other when being moved or modified.

4. Drag the circled letter to the tip of the flame.

5. Choose Modify > Shape > Add Shape Hint again to create a second shape hint.

A red-circled “b” appears on the Stage.

6. Drag the “b” shape hint to the bottom of the flame shape.

You have two shape hints mapped to different points on the shape in the first keyframe.

7. Select the next keyframe of the flame layer (frame 6).

A corresponding red-circled “b” appears on the Stage, hiding an “a” shape hint that is directly under it.

8. Drag the circled letters to corresponding points on the shape in the second keyframe. The “a” hint goes on the top of the flame, and the “b” hint goes on the bottom of the flame.

The shape hints turn green, indicating that you’ve correctly placed the shape hint.

9. Select the first keyframe.

Note that the initial shape hints have turned yellow, indicating that they are correctly placed. The shape hints in the beginning keyframe turn yellow and those in the ending keyframe turn green when placed properly.

10. Scrub the playhead through the first shape tween on the Timeline to see the effect of the shape hints on the shape tween.

The shape hints force the tip of the flame in the first keyframe to map to the tip of the flame in the second keyframe and the bottoms to map to each other. This restricts the transformations.

To demonstrate the value of shape hints, you can deliberately create a mess of your shape tweens. In the end keyframe, put the “b” hint at the top of the flame and the “a” hint at the bottom.

Animate forces the tip of the flame to tween to the bottom of the flame, and vice versa. The result is a strange flipping motion as Animate tries to make the transformation. Put the “a” back at the top and the “b” back at the bottom after you’re done experimenting.

• Drag an individual shape hint entirely off the Stage and pasteboard.

• Choose Modify > Shape > Remove All Hints to delete all the shape hints.

Only the content in the keyframes of a shape tween is displayed fully rendered. All other frames are shown as outlines. To see all frames fully rendered, use onion skinning, as described in the next exercise.

Onion skinning shows the contents of the frames before and after the currently selected frame.

The term “onion skin” comes from the world of traditional hand-drawn animation, in which animators draw on thin, semitransparent tracing paper known as onionskin. A light box shines a light behind the drawings to help see them through several sheets. When creating an action sequence, animators flip back and forth quickly between drawings held between their fingers. This allows them to see how the drawings smoothly connect to each other.

1. Click the Onion Skin Outlines button at the bottom of the Timeline.

Animate shows several outlines of the flame, with the currently selected frame in red. The previous two frames are shown in blue and the future two frames are shown in green. The outlines of flame fade the further away it is from the current frame.

On the Timeline, Animate displays markers to bracket your currently selected frame. The blue-marked bracket (to the left of the playhead) indicates how many previous frames are shown on the Stage, and the green-marked bracket (to the right of the playhead) indicates how many future frames are shown.

2. Move the playhead to a different frame.

Animate keeps the markers around the playhead no matter where you move it, always showing the same number of frames behind and ahead.

3. Click the Onion Skin button at the bottom of the Timeline.

Onion skinning switches from outline mode to the standard onion skin mode, showing the onion skins of your flame fully rendered. The flames from previous frames are tinted blue, and the flames from future frames are tinted green.

• Drag the blue marker to adjust the number of past onion skin frames shown.

• Drag the green marker to adjust the number of future frames displayed.

• Hold down the Ctrl/Command key while dragging either marker to move the past and future markers in equal amounts.

• Hold down the Shift key while dragging either marker to move the onion skin range to a different spot on the Timeline (as long as it still encompasses the playhead).

• Click the Modify Markers menu button to select a preset marker option. For example, you can choose Marker Range 2 or Marker Range 5 to have the markers show two or five frames in front and behind the current frame.

1. Choose Edit > Preferences (Windows)/Animate CC > Preferences (Mac).

The Preferences dialog box appears.

2. In the Onion Skin Color section, click the color boxes for Past, Present, or Future to choose new colors.

1. If you’re not already in symbol-editing mode for your flame symbol, double-click the flame movie clip symbol in the library to edit it.

2. Select the second keyframe on the flame layer (frame 6).

3. Select the Gradient Transform tool, which is grouped with the Free Transform tool in the Tools panel.

The control points for the Gradient Transform tool appear on the gradient fill of the flame. The various control points allow you to stretch, rotate, and move the focal point of the gradient within the fill.

4. Use the control points to tighten the color gradient into the base of the flame. Reduce the gradient’s size, make it wider and positioned lower on the flame, and move the focal point (represented by a tiny triangle) of the gradient to one side.

Your flame’s orange core appears lower and more intense because the colors are distributed in a smaller area.

5. Move the playhead along the Timeline between the first and second keyframe.

The shape tween automatically animates the colors inside the flame as well as its contours.

6. Select the third keyframe on the flame layer (frame 17). In this frame, you’ll adjust the actual color of the gradient.

7. Choose the Selection tool and click the fill of the flame on the Stage.

8. Open the Color panel (Window > Color).

The Color panel appears, showing you the gradient colors of the selected fill.

9. Click the inner color marker, which is currently yellow.

10. Change the color to a hot pink (#F109EE).

The center color of the gradient turns pink.

11. Move the playhead along the Timeline between the second and third keyframes.

The shape tween automatically animates the center color in the gradient from yellow to pink. Experiment with the other keyframes by modifying the gradient fill and see what kinds of interesting effects you can apply to your flickering flame.

For the animated logo you’re creating in this lesson, you’ll make the text a little more visually interesting by using the text itself as a mask.

1. Return to the main Timeline. Unlock the text layer. Double-click the icon in front of the text layer name, or select the text layer and choose Modify > Timeline > Layer Properties.

The Layer Properties dialog box appears.

2. Select Mask and click OK.

The text layer becomes a mask layer, indicated by the mask icon in front of the layer name. Anything in this layer will act as a mask for a masked layer below it.

For this lesson, we’re using the text already in place as the mask, but the mask can be any filled shape. The color of the fill doesn’t matter. What’s important to Animate is the size, location, and contours of the shape. The shape will be the “peephole” through which you’ll see the content on the layer below. You can use any of the drawing or text tools to create the fill for your mask.

1. Click the New Layer button, or choose Insert > Timeline > Layer.

A new layer appears.

2. Rename the layer fiery effect.

3. Drag the fiery effect layer under the mask layer (named “text”) and a little to the right so that it becomes indented.

The fiery effect layer becomes a masked layer, paired with the mask layer above it. Any content in the masked layer will be masked by the layer above it.

4. Choose File > Import > Import To Stage, and select fire.jpg from the 06Start folder.

The bitmap image of fire appears on the Stage, and the words appear over the image.

1. Click the Lock option for both the text layer and the fiery effect layer.

Both mask and masked layers become locked. The shapes of the letters in the mask layer reveal parts of the image in the masked layer.

2. Choose Control > Test.

As the flame flickers above the text, the letters reveal the fiery texture in the layer below it.

Fortunately, you can include animations in either the mask or the masked layer. You can create an animation in the mask layer if you want the mask itself to move or expand to show different parts of the masked layer. Or, you can create an animation in the masked layer if you want the content to move under a mask, like scenery whizzing by a train window.

1. Unlock both the text layer and the fiery effect layer.

The effects of the mask and masked layer are no longer visible, but their contents are now editable.

2. Delete the bitmap image of the fire in the fiery effect layer.

3. Choose the Rectangle tool and open the Color panel (Window > Color).

4. In the Color panel, make sure Fill Color is selected and choose Linear Gradient from the Color Type menu.

5. Create a gradient that starts with red on the left (#FF0000), yellow in the middle (#FFFC00), and red again on the right (#FF0000). Make sure your Alpha settings are at 100% so the colors are not transparent.

6. Create a rectangle in the fiery effect layer that encompasses the letters in the text layer.

7. Choose the Gradient Transform tool and click the fill of your rectangle to select it.

The control handles for the Gradient Transform tool appear on the fill of the rectangle. We’ll use this tool to position the gradient off the Stage so it can make a dramatic entrance.

8. Drag the center point of the gradient so that the yellow color appears on the far left side of the Stage.

The yellow glow will enter from the left and move to the right.

9. Right-click frame 20 in the fiery effect layer and choose Insert Keyframe (F6).

The contents of the previous keyframe are copied into the new keyframe.

10. Right-click the last frame (frame 40) in the fiery effect layer and choose Insert Keyframe (F6).

The contents of the keyframe at frame 20 are copied into the new keyframe. You now have three keyframes in the fiery effect layer.

11. Make sure that your playhead is still in the last frame (frame 40).

12. Drag the center point of the gradient far enough to the right so that the yellow color is just barely visible on the right side of the Stage.

13. Right-click anywhere on the Timeline between the second and third keyframe in the fiery effect layer and select Create Shape Tween. Or, from the top menu, choose Insert > Shape Tween.

The color gradient is shape-tweened so the yellow glow moves within the fill of the rectangle from left to right.

14. Watch your animation by choosing Control > Test.

While the flame burns above the letters, a soft yellow glow flashes across the letters.

You add an ease to a shape tween in the Properties panel. Ease values range from −100, which indicates an ease-in, to 100, which indicates an ease-out. An ease-in makes the motion start off slowly. An ease-out slows down the motion as it approaches its end keyframe.

1. Click anywhere inside the shape tween in the fiery effect layer.

2. In the Properties panel, enter -100 for the Ease value.

Animate applies an ease-in effect to the shape tween.

3. Make sure your mask and masked layers are locked, and choose Control > Test to test your movie.

The soft yellow glow flashes across the letters, starting off slowly, and then adding a little more sophistication to the entire animation.

2. What are shape hints, and how do you use them?

3. What does the color-coding of the onion skin markers indicate?

4. How is a shape tween different from a motion tween?

5. What is a mask, and how do you create one?

6. How do you see the effects of a mask?

2. Shape hints are labeled markers that indicate how one point on the initial shape of a shape tween will map to a corresponding point on the final shape. Shape hints help refine the way the shapes will morph. To use shape hints, first select the initial keyframe of a shape tween. Choose Modify > Shape > Add Shape Hint. Move the first shape hint to the edge of the shape. Move the playhead to the final keyframe, and move the corresponding shape hint to a matching edge of the shape.

3. By default, Animate shows the onion skins in previous frames in blue and the onion skins in future frames in green. The onion skin in the currently selected frame is in red. The colors can be customized in the Preferences panel.

4. A shape tween uses shapes, whereas a motion tween uses symbol instances. A shape tween smoothly interpolates the change of stroke or fill of a shape between two keyframes. A motion tween smoothly interpolates the changes in location, scale, rotation, color effect, or filter effect of a symbol instance between two keyframes.

5. Masking is a way of selectively hiding and displaying content on a layer. In Animate, you put a mask on the top mask layer and the content in the layer below it, which is called the masked layer. Both the mask and the masked layers can be animated.

6. To see the effects of the mask layer on the masked layer, you must lock both layers, or test your movie with Control > Test.