Establish keyframes containing different shapes

In the following steps, you’ll animate the flame that will sit on top of the company name.

1. Select frame 40 in all three layers and choose Insert > Timeline > Frame (F5).

   Forty frames are added to all three layers to define the overall length of the animation.

   

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

3. Select frame 40 in the flame layer and choose Insert Keyframe above the Timeline (or right-click and choose 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.

4. Select the Selection tool.

5. 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 ending keyframe now contain different shapes—a fat flame in the beginning keyframe, and a skinny flame in the ending keyframe in frame 40.

Apply the shape tween

Next, you’ll apply a shape tween between the keyframes to create the smooth transitions.

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

2. Press and hold the Create Tween button above the Timeline and choose Create Shape Tween. Or right-click, and choose Create Shape Tween or choose Shape Tween from the Insert menu.

   

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

   

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

   

   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.

Blend types

In the Properties panel, you can modify your shape tween by choosing either the Distributive or the Angular option for Blend. These two options determine how Animate makes the interpolations to change the shapes from one keyframe to the next.

The Distributive option is the default and works well for most cases. It creates animations in which the intermediate shapes are smoother.

Use the Angular blend if your shapes have many points and straight lines. Animate attempts to preserve apparent corners and lines in the intermediate shapes.

Moving a keyframe

The flame slowly transforms from one shape to another over a period of 40 frames. If you want the flame to make the shape change more rapidly, you need to move the keyframes closer together.

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

   

2. Make sure the box icon appears near your cursor as you drag the last keyframe to frame 6.

   The shape tween shortens.

   

3. Press Return/Enter to play your animation.

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

Insert additional keyframes

You want the flame to continually change shape, just as a real flame would. You’ll add more keyframes throughout the animation and apply shape tweens between all the keyframes.

1. Select frame 17 in the flame layer and choose Insert Keyframe above the Timeline. Or choose Insert > Timeline > Keyframe (F6).

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

   

2. Select frame 22 in the flame layer and choose Insert Keyframe (or F6) to copy the contents of the previous keyframe 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 blue playhead to frame 17.

   

5. Select 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.

   

Extending the shape tweens

Your next step is to extend the shape tween so that the flame morphs from one shape to the next.

1. Select any frame between the second and third keyframes, and choose Create Shape Tween. Or choose Insert > Create Shape Tween.

   

   A black forward-pointing arrow on an orange 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 Return/Enter 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 later in the lesson to refine your animation with shape hints.

Broken tweens

Every shape tween needs a beginning and an end keyframe with a shape inside each. If the last keyframe of a shape tween is missing, Animate shows the broken tween as a dotted black line (rather than a solid arrow).

In this example, insert a keyframe at frame 40 to fix the tween.

Duplicating keyframes

Make the first keyframe identical to the last keyframe by duplicating its contents.

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.

Previewing the loop

Use the Loop button at the top of the Timeline panel to preview your animation.

1. Click the Loop button or choose Control > Loop Playback (Option+Shift+L/Alt+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. Drag the markers to include all the frames on your timeline (frames 1 through 40). Hold down the Command/Ctrl key while you’re dragging either marker to move both of them in equal amounts.

   

3. Press Return/Enter to test the animation.

   The flame animation plays and loops continuously. Click the Pause button or press Return/Enter again to stop the animation. Deselect the Loop button at the top of the Timeline panel to hide the markers and end the loop playback mode.

Inserting the animation into a graphic symbol

When your animation plays in a graphic clip symbol, the animation loops automatically as long as there are sufficient frames on the main timeline.

1. Select all the frames on the flame layer, 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 (Command+F8/Ctrl+F8).

   The Create New Symbol dialog box appears.

   Enter flame as the name of the symbol, and choose Graphic from the Type menu. Click OK.

   

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

3. Right-click the first frame on your graphic symbol timeline and choose Paste Frames. Or choose Edit > Timeline > Paste Frames.

   

   The flame animation from the main timeline is pasted into your graphic symbol’s timeline.

   

4. Click the arrow button on the Edit bar at the top of the Stage to exit symbol-editing mode, or choose Edit > Edit Document (Command+E/Ctrl+E).

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

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

   

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

6. Press Return/Enter.

   Animate plays the animation on the timeline. Since your graphic symbol contains 40 frames and the main timeline contains 40 frames, the entire animation of the flame flickering fits into the main timeline.

Adding shape hints

Now you’ll add shape hints to the shape of the flame to modify the way it morphs from one shape to the next.

1. Double-click the flame graphic symbol in the library to enter symbol-editing mode. Move the playhead to frame 1 of the shape tween in the flame layer.

   

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

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

   

3. Select the Selection tool and make sure that Snap To Objects in the Doc tab of the Properties panel is selected.

   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 them so that they correspond to equivalent locations in the first keyframe.

   

9. Select the first keyframe.

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

   

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 force 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.

Removing shape hints

If you’ve added too many shape hints, you can easily delete the unnecessary ones. Removing a shape hint in one keyframe will remove its corresponding shape hint in the other keyframe.

• If you want to remove a shape hint, drag an individual shape hint entirely off the Stage and pasteboard.

• If you want to remove all shape hints, choose Modify > Shape > Remove All Hints.

Turning on onion skinning

The Onion Skin button is above the Timeline, allowing you to toggle it on or off. Pressing and holding the Onion Skin button displays additional options.

1. Click the Onion Skin button at the top of the Timeline panel.

   

   Animate shows several shapes for the flame, representing the shapes in previous and future frames. Seeing multiple frames all on the Stage at once allows you to compare the changes between frames. The currently selected frame is in red. The previous frames are shown in blue, and the future frames are shown in green. The outlines of the flame fade the farther away they are 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.

Adjusting the markers

You can move either marker to show more or fewer onion skin frames.

• 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 Command/Ctrl while dragging either marker to move the past and future markers in equal amounts.

• Hold down Shift 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).

• Press and hold the Onion Skin button at the top of the Timeline panel and choose Anchor Markers. With the Anchor Markers option enabled, you can move your playhead on the Timeline and the bracketed onion-skinned frames will remain locked in place.

  

• Press and hold the Onion Skin button at the top of the Timeline panel and choose All Frames. With the All Frames option enabled, the brackets will automatically move to cover the first frame and the last on the Timeline.

  

Advanced onion skin options

If you don’t like the blue and green color coding of previous and future frames, or you want to change the opacity of the onion skins, you can change them in the advanced settings.

• Press and hold the Onion Skin button at the top of the Timeline panel and choose Advanced Settings.

  

  The Onion Skin Settings dialog box appears.

You can fine-tune how the onion skin frames appear by adjusting the following settings:

• Choose the previous or future frame range numerically.

• Click the color swatches to change the color of the previous or future frames.

• Choose between seeing the onion skin frames only as outlines, as shown here, or fully rendered.

  

• Move the opacity sliders to change the starting opacities and how quickly the onion skin frames fade.

• Choose to see only keyframes.

• Anchor the frame markers.

  Note

  Animate remembers the most recent preferences set in the Onion Skin Settings panel. Clicking the Onion Skin button above the Timeline will toggle onion skins with those settings on and off.

Adjusting the gradient fills

Use the Gradient Transform tool to change the way the color gradient is applied to a shape, and use the Color panel to change the actual colors used in a gradient.

1. If you’re not already in symbol-editing mode for your flame symbol, double-click the flame graphic 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. (The Stage color is shown in white so that you can better see the Gradient Transform tool control points.)

   

4. Use the control points to tighten the color gradient into the base of the flame. Reduce the gradient’s size, make it wider, position it 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. Select 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 (#FF33CC).

    

    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.

Define the mask layer

From the “Fire starter” text, you'll create a mask that will reveal an image of a fire beneath it.

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.

   

   Tip

   Masks do not recognize strokes, so use only fills in the mask layer. Text created with the Text tool also works as a mask.

   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 are 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.

Create the masked layer

The masked layer is always indented under the mask layer.

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 07Start folder. Then click Open.

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

   

See the effects of the mask

To see the effects of the mask layer on its masked layer, you must lock both layers.

1. Click the Lock option for both the text layer and the fiery_effect layer.

   

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

   

   Note

   You can have multiple masked layers under a single mask layer.

2. Choose Control > Test.

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

Adding a tween to the masked layer

To make the logo more compelling for your client, you’ll add a shape tween to the masked layer. The shape tween will move a glow from left to right for a portion of the movie under the letters.

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. Select 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 far left (#FF0000), goes to yellow in the middle (#FFFC00), and becomes red again on the far right (#FF0000). Make sure your Alpha is set to 100% so that 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 that 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. Select frame 20 in the fiery_effect layer and choose the Insert Keyframe button above the Timeline (or F6).

   

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

10. Select the last frame (frame 40) in the fiery_effect layer and choose the Insert Keyframe button above the timeline (or 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. Select any frame on the timeline between the second and third keyframe in the fiery_effect layer, and choose Create Shape Tween above the timeline. Or, from the main menu bar, choose Insert > Shape Tween.

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

    

14. Watch your animation by choosing Control > Test or by pressing Return/Enter.

    

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

Adding an ease-in

You’ll make the glow that flashes across the letters of the logo begin slowly and then pick up speed. The ease-in will help viewers take notice of the animation before it proceeds.

1. Click anywhere inside the shape tween in the fiery_effect layer.

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

   

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

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

   Note

   As with classic tweens, you can apply more advanced eases or even custom eases. Click the Classic Ease button to access the additional ease options, or click the pencil icon to customize your ease curve.

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

Exporting the finished animated GIF

Your project is done, and you’ll export the animated GIF to be used as your client’s Facebook profile image.

1. Choose File > Export > Export Animated GIF.

   Animate opens the Export Image dialog box. It shows a preview of the image and various options for optimizations. In the Preset area, make sure the Transparency option is unselected.

   

2. In the Preset area, choose GIF from the Optimized File Format menu. Choose 0 from the Lossy menu and 256 from the Colors menu. This will maximize the quality of your image. You can select Selective and Diffusion for the other two menus. These options determine how the 256 colors are chosen and mixed to create the final image.

   

3. In the Image Size area, keep all the values at their default settings. The Width and Height should match the original Stage size.

4. In the last area, Animation, you can choose the type of looping behavior for your animated GIF. Select Forever, which will make your animated GIF loop endlessly. You can preview the animation by clicking the Play button. You can also examine each of the 40 frames individually by moving forward or backward one frame at a time.

   

5. Click Save, and in the dialog box that appears, provide a filename and navigate to the 07End folder to save your animated GIF.