Adobe Edge Animate CC For Dummies (2013)

Part II

Adopting Tools and Techniques

Visit www.dummies.com/extras/adobeedgeanimatecc for great Dummies content online.

In this part . . .

Operating the Timeline

Managing actions

Customizing your workspace

Visit www.dummies.com/extras/adobeedgeanimatecc for great Dummies content online.

Chapter 4

Using the Timeline for the First Time

In This Chapter

Playing, rewinding, and fast-forwarding from the Timeline

Toggling the different Timeline modes

Animating with Motion Paths

Keeping the Timeline at peak efficiency with keyframes and animation sequences

Fine-tuning the Timeline view to match your preferences

The Adobe Edge Animate CC Timeline is a crucial part of the software. The Timeline is where you determine when different actions take place and which elements are affected. You can find the Timeline at the bottom of the screen. This chapter covers many elements of the Timeline, including the finer details — including the creation of animation sequences, also known as transitions.

Controlling the Timeline

The Timeline is located at the bottom of the interface. It has Play controls such as Play, Rewind, Fast Forward, and Return to Last Play Position (see Figure 4-1).

The Play controls include the basics and one that proves extremely convenient:

Play, Rewind, and Fast Forward: These are the basic controls you’ll find on any kind of media player, and Adobe Edge Animate CC has them for your use.

Return to Last Play Position: Sometimes you don’t want to return to the beginning of an animation when you finish watching it. That’s especially true when your animation starts to get long and (say) you have a particular section that you want to tweak. This control gets you back to the point at which you last stopped playing the animation, as often as you like, with no fuss.

Play, Rewind, and Fast Forward

When you have your animation ready to test or view, you can click Play to watch the animation play out on the Stage. Likewise, you can click Fast Forward or Rewind to (respectively) advance the animation quickly or back it up just as fast.

The Return to Last Play Position will return to the point in the Timeline to where you left the Pin.

Figure 4-1: The Play controls on the Timeline.

You can also press the spacebar on your keyboard to play the animation. The animation will play in its entirety if the Playhead (explained in detail later in this chapter) is at the end of the Timeline. You can also watch your animation unfold simply by clicking and dragging the Playhead back and forth over the Timeline.

Return to Last Play Position

By default, the Return to Last Play Position icon is grayed out, because the last play position was at the beginning of the Timeline. When you start to create your composition, you can move the Playhead further out along the Timeline. Doing that activates the Return to Last Play Position button as shown in Figure 4-2.

Figure 4-2: The Return to Last Play Position and the Playhead.

When you click the Return to Last Play Position after you play the composition, Edge Animate brings you back to where the Playhead was on the Timeline, as opposed to bringing you all the way back to the beginning.

Toggling the Timeline Modes

Directly after the Play controls are another set of tools where you can set the Keyframes mode, set the Auto-Transition mode, and you can also toggle the Pin and set the Easing attribute. These tools are shown in Figure 4-3.

Figure 4-3: Keyframe tools are to the right of the Play controls.

Adobe Edge Animate CC uses keyframes for animations. Keyframes appear as white diamonds in the Timeline. The green horizontal bars in Figure 4-2 represent the transitions (animation sequences) between keyframes for a rectangle element that moves from the left corner to the bottom-right corner over a period of 5 seconds. That’s a lot of information, and you can find it all within the Timeline and keyframe.

Adobe Edge Animate CC contains several toggle modes within the Timeline area:

Keyframes: You can toggle them on or off if you want or don’t want Edge Animate to create keyframes automatically for you while you’re creating your composition.

Auto-Transition: You can toggle this feature on or off if you want or don’t want Edge Animate to create animation sequences automatically when you move elements around the Stage.

Playhead and Pin: When it comes time to start animating, make sure the Pin is toggled on, otherwise Edge Animate won’t create animation sequences.

Easing: You may not necessarily call this a toggle, but you can choose your preferred Easing attributes; your choices affect the way Edge Animate brings your elements to life.

Keyframes modes

To create keyframes automatically, you must first activate keyframes by clicking the red Stopwatch icon. By default, when you first start a new animation, the Stopwatch is red but has gray lines running through it (as shown in Figure 4-4).

Figure 4-4: Here the default state of the Auto-Keyframe mode is disengaged.

You’ll want the Stopwatch to appear red as you create your composition so that Edge Animate automatically creates keyframes for you. Simply click the Stopwatch to activate Auto-Keyframes and turn the Stopwatch red (as shown in Figure 4-5).

When the Stopwatch is disengaged, you don’t have to click the Stopwatch to enable it. Simply toggle the Pin and Auto-Keyframes will become enabled. You can learn more about toggling the Pin and moving the Playhead in the following sections.

Figure 4-5: Here Auto-Keyframes are enabled.

If you click the Stopwatch and it dims to gray instead of red, then you’ll need to manually insert your keyframes.

If you want to arrange elements on the Stage without triggering keyframes, then make sure the Stopwatch is dimmed by clicking it, as shown in Figure 4-6. When the Stopwatch is gray, that means Auto-Keyframes are disabled.

Figure 4-6: Auto-Keyframes are disabled when the Stopwatch is gray.

Auto-Transition mode

By turning Auto-Transition mode on or off, you toggle the capability to create smooth transitions between keyframes. Transitions are the animations that you create to show (for example) an element moving from left to right on the Stage (transitions are also referred to as animation sequences). When you create a new file, the Auto-Transition mode is enabled for you (as shown in Figure 4-7). You’ll also see a colored arrow between the Pin and the Playhead. This orange-colored bar-with-arrows is discussed in detail later in this chapter, in the Animating forward andAnimating backward sections.

Figure 4-7: Here the default state for Auto-Transition mode is enabled.

When Auto-Transition mode is turned on, Edge Animate creates an animation effect when you move elements around the Stage, provided you’ve toggled the Pin and Playhead as outlined in the next few sections.

You’ll know when you’ve created an animation: The color-coded bars appear between the keyframes, as shown in Figure 4-2.

If you click the Auto-Transition icon, it dims, and Edge Animate will not create an animated sequence. Instead, Edge Animate only inserts the keyframe diamonds; you won’t see the colored bars (see Figure 4-8).

Figure 4-8: When Auto-Transition is turned off, Edge Animate won’t create animations.

If you want animation sequences to appear when you move elements around the Stage, make sure that the Stopwatch icon is red and the Auto-Transition mode is enabled. If you want to move elements around on the Stage without creating keyframes or animation sequences, then disable both the Stopwatch and the Auto-Transition icon. You also have to toggle the Pin, as discussed next.

Toggling the Pin

When you start creating animation sequences, you need to toggle the Pin. When you first start a new composition, the Pin is turned off, as shown in Figure 4-9. In this state, you can’t create animation sequences.

Figure 4-9: Here the default state of the Pin is turned off.

To create animation sequences, you turn on the Stopwatch, make sure the Auto-Transition mode is on, and then click the Pin icon. The Pin icon activates (as shown in Figure 4-10) and turns light blue.

Figure 4-10: Click the Pin to activate it.

With the Pin turned on, you can now move it up and down the Timeline to determine where and for how long you want an animation sequence to last. You can find more details in the following sections.

Easing tool

The Easing tool is the last icon right before the Timeline. You can use the Easing tool to affect how animations play. To add Easing to an element, select an element’s transition from the Timeline, and then select an attribute from the Easing menu (as shown in Figure 4-11).

For example, if you want your element to bounce like a ball, choose Ease Out from the left column, and then choose Bounce in the right column.

The default setting for Easing is Linear, which has no effect on your elements. If you change Easing from Linear to something else, then all new elements that you create will default to this new Easing attribute. You can have different Easing attributes for each element on the Stage. To edit a particular element’s Easing attribute, you must select that element’s transition from the Timeline.

If you’re mathematically inclined, you’ll appreciate the graph on the far right, which shows the effects of the Easing attributes.

Figure 4-11: The Easing attributes.

The Playhead and the Pin

The Playhead and the Pin are located along the time markers in the Timeline. You’ll use them for a couple of different tasks. The first task is to determine the points in time where you want an animation to start and end. The second task is to tell Edge Animate where you want to start viewing your animation when you click Play.

The Pin is the blue icon on top; the Playhead is the yellow chevron below it.

When you’re ready to start animating, you’ll want to drag either the Pin or the Playhead down the length of the Timeline. Dragging either the Pin or the Playhead down the Timeline, as shown in Figure 4-12, determines whether your animation plays forward or backward. This is discussed in more detail in the following sections.

Figure 4-12: The Playhead and the Pin.

Working with Keyframes and Animation Sequences

It’s important to get a handle on working with keyframes and animation sequences so you can create them and edit them to do what you want. The following sections introduce you to all the parts of Edge Animate that you need for creating keyframes and animation sequences. Here’s where you actually create those keyframes and animation sequences — which boils down to getting familiar with these processes:

Creating keyframes: When you start animating, depending on how you set the Pin and the Playhead, you can create transitions that play either forward or backward, depending on how you create them.

Selecting keyframes: After you create keyframes, you can select them so that you can edit them.

Editing keyframes: After creating a keyframe, and then selecting it, you can edit it.

Copying and pasting keyframes: You can copy and paste the keyframes you want to reuse. This should save you plenty of time; you don’t have to recreate the same keyframe over and over for similar animation sequences.

Creating sequences

To create a keyframe and an animation sequence (transitions), follow these steps.

1. Place an element on the Stage with the drawing tools or by importing an image.

2. Toggle the Pin so that it turns light blue.

3. Click and drag either the Pin or the Playhead down the Timeline.

The differences between moving the Pin and moving the Playhead are described later in this section.

The amount of space that separates the Pin from the Playhead determines the length of time the animation takes to play out.

4. Click and drag the element around the Stage, for example, move the element from the top-left corner down to the bottom-right corner.

Edge Animate adds color-coded bars to the Timeline.

To preview your animation, click Play or press the spacebar.

Animating forward

Where you place the Pin and the Playhead on the Timeline affects your animation sequence. For example, you may be scratching your head and wondering why, when you play your animation, the element goes from the bottom-right corner up to the top-left corner instead of the other way around.

To animate forward — that is, to have the animation sequence play in the same direction in which you moved the elements on the Stage — you must move the Playhead farther down the Timeline than the Pin so that you see a yellow bar-with-arrows (as shown in Figure 4-13).

Figure 4-13: Animating forward by moving the Playhead down the timeline.

Animating backward

If you want your animation to appear in a backward sequence relative to the direction in which you move the element on the Stage, then move the Pin farther down the Timeline than the Playhead: You see a blue bar-with-arrows, as shown in Figure 4-14.

Figure 4-14: Animating backward by moving the Pin down the Timeline.

Adobe Edge Animate CC is full of keyboard shortcuts. One of them is Shift+P, which reverses the direction of your timespan from blue to orange (or vice versa). This comes in useful when you realize you want to play an animation sequence in the opposite direction.

Animating with Motion Paths

Motion Paths enable you to create animation sequences that follow a curved path, or a loop, such as a bird in flight or an image that dances across the stage. Animate provides plenty of options to working with Motion Paths, as described in the following sections. You can toggle Motion Paths off or on from the Properties panel as shown in Figure 4-15 (be sure to select an element on the Stage so you can see the Motion Path property).

Toggle the Auto-Orient option so that the element’s rotation follows the Motion Path. If you leave Auto-Orient off, then the element’s rotation is not affected by the Motion Path.

Use the Layout Defaults from the toolbar to set Motion Paths as a default for all new elements that you add to the Stage (see Figure 4-16). When you change the Layout Defaults, the settings for all previously existing elements are not affected.

With Motion Paths toggled on, when you create an animation sequence for an element, you will see a thin blue line with arrows at each end; these arrows represent the direction of the element’s movement (see Figure 4-17). This blue line indicates the path the element travels during the animation. Remember to toggle the Pin and set the Playhead to create an animation sequence.

Figure 4-15: Toggle Motion Paths off or on from the Position and Size panel.

Figure 4-16: Set the default for Motion Paths from the Layout Defaults in the toolbar.

To move a Motion Path around the Stage without adding a new anchor point, hover the mouse over the thin blue line (at a place in the line with no anchor points), hold down Cmd or Ctrl, and then drag with the mouse.

Figure 4-17: The thin blue line indicates the Motion Path for the element.

Adding an anchor point

When you first draw a Motion Path (dragging an element across the Stage with the Pin toggled), Animate creates a straight path. To add curves to your path, you must insert anchor points. To add an anchor point, hover the mouse over the thin blue line until you see the pen tool as shown in Figure 4-18.

Figure 4-18: The pen tool indicates that you can edit the Motion Path.

With the pen tool showing, click and drag with your mouse to insert an anchor point and to add a curve to the Motion Path. This action also creates a Bézier handle. You can use the Bézier handle to further manipulate the curve of the Motion Path by clicking and dragging those points, as shown in Figure 4-19.

Figure 4-19: Motion paths can have Bézier handles to help you create the perfect curve.

To delete, or remove an anchor point, hover on the existing anchor and use the keyboard shortcut Ctrl+Click for the PC or Cmd+Click for a Mac.

Creating a sharp point instead of a curved path

While curved paths are pretty awesome, 90 degree angles can look pretty sharp as well (pun intended). To create a sharp angle in your Motion Path, you have to remove the Bezier handle from the anchor point. To remove the Bezier handle, position the mouse over the Bezier handle and use the keyboard shortcut Alt+Click (Option+Click for Mac). When you do that, the Bezier handle is removed from the Motion Path and the anchor point becomes a sharp angle as shown in Figure 4-20.

Figure 4-20: A Motion Path with a sharp angle.

Keyframes and Easing with Motion Paths

You can split up a Motion Path to have more than one keyframe. The keyframe diamonds in the Timeline represent different Motion Paths (also known as animation sequences or transitions). To add a keyframe to a Motion Path, place the Playhead and Pin in the portion of the Timeline where you want to add the keyframe, then simply click the diamond from the Timeline next to the transition you want to add a keyframe to as shown in Figure 4-21.

Figure 4-21: Add keyframes to a Motion Path to create separate animation sequences.

Breaking a single Motion Path into more than one transition can be useful. For example, you can add one Easing attribute to the first keyframe of the path and have a different Easing attribute assigned to the second part. To do that, select the first keyframe transition from the Timeline (seeFigure 4-22) and then add an Easing attribute to it (see Chapter 17 for more details on Easing). Then select the second Motion Path sequence and add a different Easing attribute. You can then preview the entire animation sequence on the Stage (press the Space Bar to preview on the Stage or press Ctrl+Return to preview in a browser).

Figure 4-22: Select the animation sequence from the Timeline to edit the Easing attribute.

Splitting and joining Motion Paths

Motion paths are fully editable. Meaning you can bend and twist them to your will as well as splitting them apart and putting them back together.

To split a Motion Path, you have to first add a keyframe diamond to the animation sequence as discussed in the last section. Adding the keyframe to the path creates two separate Motion Paths that happen to be connected. To split these two Motion Paths, hover the mouse pointer over the middle arrow that was created when you added the keyframe diamond (as indicated in Figure 4-22), and then Ctrl+Click (Cmd+Click) and drag to separate the two Motion Paths. Figure 4-23 shows the saw cursor that appears when you Ctrl+Click over an arrow.

To join two Motion Paths together, simply click an end arrow and drag it over to the other Motion Path’s end arrow until they snap together.

Figure 4-23: Separate the Motion Paths when you see the saw icon.

Don’t be alarmed if you see the element attached to only one of the separated paths. If you move the Playhead up and down the Timeline, you’ll see that the element is still attached to both Motion Paths. Previewing the animation also shows that the element is still associated to both of the Motion Paths. It’s just that one of the Motion Paths will appear as if it doesn’t have the element simply based on where the Playhead is on the Timeline.

If you split a Motion Path and place one segment on the far side of the Stage and the other path on the opposite side of the Stage, then you’ll see your element follow the first path and then jump to the second path. To exaggerate this effect, try adding time in the Timeline between when the first Motion Path ends and the second starts. To separate the keyframe diamonds (and the animation sequence), place the cursor over the second animation sequence and then click and drag down the Timeline (see the next two sections on selecting sequences and editing sequences for more information). See Figure 4-24 as an example.

Figure 4-24: Add time between the Motion Paths to delay the jump between paths.

You cannot set Motion Paths to use percentage-based layouts to create a responsive layout (see Chapter 21 on how to build a responsive web design). As a work-around, you can nest your Motion Path element inside a group, parent, or Symbol and then set the parent to use percentage based positioning (see Chapter 11 for nesting elements, Chapter 21 for layout preferences and layout defaults, and Chapter 12 for information on Symbols). You can alsouse this nesting method to set the Motion Path relative to top, right, bottom, and left.

Experiment with the Transform Origin point when animating with Motion Paths. The element’s travel along the Motion Path is based on the origin point, which doesn’t necessarily have to be the center of the element itself. For more information on origin points and the Transform tool, see Chapter 7.

Selecting sequences

After you create keyframes and animation sequences, you may want to select them so you can edit them. You have several ways you can select keyframes.

Place the cursor over the top bar (also called the rollup bar). When the cursor turns to the shape of a hand, as shown in Figure 4-25, you can click to select all associated animation sequences.

Select keyframes by clicking and dragging with the mouse.

You can select several keyframes at once.

Hold the Shift key down while clicking different keyframes to select more than one at a time.

Figure 4-25: Select keyframes and animation sequences by clicking the rollup bar.

Edge Animate also allows you to select just one animation sequence by clicking a specific colored bar.

You can edit animation sequences and keyframes after you’ve selected them.

Editing sequences

Adobe Edge Animate CC provides an easy means to not only move keyframes and animation sequences, but you can shorten or lengthen them as well.

Moving sequences

To move keyframe and animation sequences either up or down the Timeline, simply select the color-coded bar and then drag it while keeping the left mouse button depressed.

You can move multiple keyframes in the same manner. To select more than one keyframe at a time, hold the Shift key down while clicking different keyframes.

Lengthening or shortening sequences

Not only can you move where the keyframe appears in the Timeline, you can also lengthen or shorten the keyframe so that the animation takes a longer or shorter time to play.

To lengthen the keyframe, move the mouse cursor to either end of the keyframe until the cursor turns into a double-arrowed line (see Figure 4-26). Then simply click and drag.

Figure 4-26: Lengthening or shortening animation sequences.

Copying and pasting keyframes and sequences

Adobe Edge Animate CC allows you to copy and paste keyframes and animation sequences. This makes it easy to create multiple instances of the same animation.

To copy a keyframe, simply select it and then use Ctrl+C. Then place your Playhead at the point in the Timeline at which you want to paste the keyframe. Finally, use Ctrl+V to paste in the keyframe.

Before you paste in the keyframe you copied, make sure the Playhead is located at the point in the Timeline where you want it to appear. Otherwise you might paste the keyframe into a section of the Timeline that isn’t where you want it. The keyframe that you’re pasting into the Timeline will appear wherever the Playhead is located.

Finer Details of the Timeline and Stage Controls

Edge Animate offers many ways to configure the Timeline and Stage; you can adjust them to your own liking. This includes an easy way to center the Stage, magnify the Stage, filter elements, and turn Timeline snapping on or off.

The finer controls for the Stage and Timeline include these:

Centering the Stage: If you start moving, adjusting, resizing, and so forth, you may need to re-center the Stage for better viewing.

Magnifying the Stage: For those times you want to see every last pixel of your elements.

The Playhead and Pin timestamp: Edge Animate provides more than one way to move the Playhead and Pin up and down the Timeline.

Filtering elements: Sometimes you only want to see certain elements.

Timeline snapping: Do you like your elements to snap into a precise place on the Timeline or do you prefer more freedom?

Configuring the grid view: You can set the grid view to your preference so that you either see a grid or you don’t.

Viewing more or less of the Timeline: Sometimes you may want to see the entire Timeline for your composition; sometimes you may want to zoom in.

Adding more time: If you run out of time, you can always add more!

You might be wondering how Edge Animate determines the vertical order in which elements appear in the Timeline. It all depends on how the elements are arranged. The element that is most in front (appears on top of all other elements) is the first element listed in the Timeline. The element that is most in back (appears behind all other elements) is the last element listed in the Timeline.

Stage controls

There are a couple of controls for the Stage that enable you to center it and magnify it.

Centering the Stage: If, for some reason, the Stage has gone off-kilter on you and you want a one-click solution to re-center the Stage on your screen, then simply click the Center the Stage icon. This icon is located in the bottom-left corner of the Stage (as shown in Figure 4-27).

Magnifying the Stage: If you want to zoom in on the Stage, you can use the magnification tool (as shown in Figure 4-28). You can either click the orange number and type in a specific zoom level or place your mouse pointer over the number and then click and drag to adjust.

Figure 4-27: Center the Stage on your screen with the Centering the Screen icon.

Figure 4-28: Magnifying the Stage.

Timeline controls

Adobe Edge Animate CC provides several tools to help you configure the Timeline so that it appears just the way you want.

Playhead and Pin stamp: Provides a means to show you where the Playhead is in the Timeline and the length of time for the animation sequence. The Playhead is represented by the yellow numbers on the left, and the Pin is represented by the blue numbers on the right (see Figure 4-29). You can place your cursor over these numbers and then click and drag to change the location of the Playhead and Pin on the Timeline.

Figure 4-29: Playhead and Pin stamp.

Filtering elements: Edge Animate provides a way for you to see only the elements with animation sequences or to see all of the elements at once. This doesn’t affect what you see on the Stage, but it does affect what you see in the Timeline. In Figure 4-30, on the left, the filtering is turned off, and you see all of the elements; on the right, filtering is turned on, and you see only the animated elements. The Filter control is identified.

Figure 4-30: Filtering elements.

Configuring the grid view: If you want to see precise measurements in the Timeline — anywhere from a full second to a 30th of a second — you can set that view (as shown in Figure 4-31); you can pull up your choices and toggle the grid view on or off.

Figure 4-31: Configuring the grid view.

Timeline snapping: If you choose to turn on the grid view, then you can have the Pin and Playhead snap to the grid by turning on Timeline snapping (as shown in Figure 4-32).

Figure 4-32: Toggling Timeline snapping.

Magnification scrollbar: You can view more or less of the Timeline by scrolling the magnification bar (as shown in Figure 4-33). You can click to view the entire Timeline, click to either zoom the magnification in or out, or click and drag the icon on the scrollbar.

Figure 4-33: The magnification scrollbar.

Inserting more time into the Timeline: You can add more time into your Timeline at any point while you’re designing your composition. From the main menu, click Timeline and then choose Insert Time, which is about halfway down the menu. When you do that, a dialog box opens (as shown in Figure 4-34).

Figure 4-34: Inserting more time into the Timeline.

Place the Playhead in the Timeline at the point at which you want to insert more time.