Adobe Edge Animate: The Missing Manual

Chapter 4. Learning Timeline and Transition Techniques

The art of animation is all about images changing over the course of time in a natural, pleasing, and entertaining manner. It’s the same whether you’re creating a cartoon with a long-eared rabbit or you’re developing a presentation for the next quarterly sales meeting. Elements move, change shape, and change color. In Animate, that means that the properties that define an element change over the course of time. Those properties and their changes are tracked on the timeline through the use of keyframes—those little diamond-shaped markers.

The previous chapters involved some timeline manipulation. This chapter provides more complete details on timeline basics and controls. You’ll learn how to create timeline labels and how to set, move, and remove keyframes. And of course you’ll explore transitions, learning how to tweak them to do your bidding. When you’re through, you’ll know how to operate every button and widget the timeline has to offer.

Introducing the Timeline

Master the timeline, and you’ll be an Animate Jedi. You’ll have a jump on the learning process if you’ve used a timeline in a video editor, Adobe After Effects, or Flash. If you tackled any of the exercises in the earlier chapters, you’re not a complete stranger to the timeline. When you work in Animate, you use three panels to create your animation: Elements, Properties, and the timeline. Usually you jump back and forth among them, using their features as necessary. It’s no surprise that the timeline is the panel that’s devoted to working with time—selecting specific moments in your animation and making something happen.

When you first look at the timeline, it seems to be quite complicated with all its buttons and widgets. Create a couple of transitions, and things don’t get any simpler down there in Animate south. Don’t be intimidated. Think of the timeline simply as a ruler that measures time in your animation. See Figure 4-1. The playhead lets you select a certain moment in time. For example, drag it to 0:02 on the timeline, and the stage displays the elements as they appear 2 seconds into your animation. As explained in the earlier chapters, elements’ position on the stage and their appearance is controlled by properties: Location properties, Color properties, Size properties, and so on.

Figure 4-1. The timeline lists elements in your animation and their properties. The playhead lets you select a certain moment during the animation. Keyframes mark a point in time when the value of a particular property changes.

Initially, the timeline displays numbers like 0:01 and 0:02, with minutes on the left side of the colon and seconds on the right. As you’re working, you’ll want to zero in on a particular portion of the timeline and the property keyframes it holds. You can zoom in and out of the timeline; however, doing so changes the tick marks and numbers displayed. The controls for zooming in and out of the timeline are in the lower-right corner, as shown in Figure 4-2. When you zoom in on the timeline, you’ll begin to see fractions of seconds displayed, like 0:00.500 and 0:00.250, as shown in Figure 4-2.

Figure 4-2. Want a better view of a particular segment of the timeline? Drag the slider to zoom in and out of the timeline. Click the Zoom Timeline to Fit button to see the entire active portion of the timeline.

Choosing a Moment in Time

To select a particular moment in time, drag the playhead along the timeline. The playhead and its red marker line selects a point in the animation’s run time. As you move the playhead, the time counter to the right of the playhead changes to display the selected time in numbers (Figure 4-3). The three playback buttons in the upper-left corner of the timeline work just like the ones on your iPod or Blu-ray player. The left button jumps to the beginning of your animation, and the right button jumps to the end, wherever that may be on the timeline. The big triangle in the middle plays your animation in real time. If the animation is playing, the same button works as a pause button. You won’t always want to play your entire animation. Sometimes, you’re just interested in a segment. The play button starts to play your animation from the playhead’s position. After you’ve watched your animation, click the return arrow next to the playback controls to move the playhead back to its previous position.

Tip

If you can see the point in time you want to select, but the playhead is missing in action, click the timeline. The playhead will jump to that spot.

Figure 4-3. On the far left of the timeline, you have playback controls, just like those on your iPod. The time counter numerically displays the position of the playhead. You use the playhead and the pin to mark two points in time when you create transitions.

If you want some additional help dividing time into little pieces, check out the Grid, which displays subtle vertical lines over the timeline at regular intervals. You can turn the grid on and off with the Timeline→Show Grid tool. Once it’s displayed, use the Timeline→Grid submenu to set the time increments. As you can see in Figure 4-4, you can choose from 1 per second through 30 per second. Even though Animate doesn’t work in film frames, you can emulate the cinematic frame-per-second rates with settings of 24 fps or 30 fps. The standard frame rate for film is 24 fps while the video rate is usually 30 fps. The grid is more than just a visual aid; as you’ll see in the next section, you can use snapping to assist marking a point in time.

Figure 4-4. When you turn on the timeline grid, the vertical lines displayed are faint but visible. You can use the Timeline→Grid submenu to choose just the right incremenet for your project.

As you drag the playhead around, you may notice some snapping action as the playhead jumps to a particular tick mark on the timeline’s ruler or jumps to a keyframe. That snapping action is deliberate, but you’re in complete control over how it works. Go to Timeline→Snapping to turn the feature on or off, as shown in Figure 4-5. (That’s right. The timeline is important enough to have an entire menu of its own.) To fine-tune snapping behavior, you can choose the things that the playhead snaps to. Go to Timeline→Snap To and then turn on or off a snapping feature. These are your choices:

• Grid. The playhead snaps to the grid lines displayed when turn on the grid (Timeline->Show Grid). You can choose increments such as half-second, quarter-second, or 24 frames per second.

• Playhead. The playhead comes in two parts, top and bottom. With this feature turned on, the two parts snap to each other when they’re moved. For more details on using the bottom portion of the playhead while making transitions, see the note on Creating Instant Transitions.

• Keyframes, Labels, Triggers. You manually add keyframes, labels, and triggers to the timeline. That means they have significance to the timing of your composition. Often, you’ll want to change multiple properties at a single point in time, which means you’ll want this Snap To option turned on most of the time.

The Snap To options work when you’re moving the playhead, but that’s not the limit of their assistance. Later on, as you edit and fine-tune animations, you’ll find snapping handy for lining up keyframes and the edges of transitions.

Figure 4-5. With snapping on, the playhead jumps to specific things in the timeline, and you don’t have to be such a mouse marksman. With snapping off, you’re in complete control to move the playhead as you wish.

Adding Labels to the Timeline

Computers like numbers more than most human beings do. People appreciate the precision of numbers, but often the descriptive value of a word like BOUNCE or ChangeSlide trumps something like 0:03.720. You can add labels to the timeline to mark important points in your animation. They appear right beneath the number scale, giving you the benefit of both a word and a number.

Drag the playhead to that special point on the timeline that you want to label. Then go to Timeline→Insert Label (or press Ctrl+L or ⌘-L). A label appears on the timeline with a less-than-helpful name like Label 1 or Label 2. See Figure 4-6. It’s up to you to give the label a useful name. Just start typing after you create a label. When you’re done, that label serves as a meaningful bookmark for you in the future. What’s more, as you’ll see on Using Labels in Your Timeline Code, labels are extremely useful when it comes to creating triggers and actions that control your animation.

Figure 4-6. Use timeline labels to mark the important points in your timeline. As you’ll see on page 112, you can also use labels in JavaScript when you want to jump to a point in the timeline or to trigger an event.

Tip

There’s one more way to create a label. Just to the left of the timeline’s time scale, there’s a down arrow button. Clicking it adds a label to the timeline at the playhead position; type a descriptive name.

Editing Labels

Labels aren’t chiseled in stone once you create them. Change the name of a label by double-clicking on the label and typing in a new name. Unlike elements, labels can include the space character, so they can be more than one word. On the timeline, labels display about 20 characters; still it’s often best to keep them short and sweet.

You can move labels to a different point on the timeline by clicking and dragging them to a new spot, as shown in Figure 4-7. To delete a label, click to select it. Once it’s highlighted, press Delete or Backspace (just Delete on a Mac).

Figure 4-7. Click to select a label. When it’s highlighted you can delete it or move it, as shown here. If you’re moving a label along the timeline, don’t worry about the other labels. They won’t bump into one another. Simply drag the selected label past any others on the timeline.

Understanding Elements’ Timeline Controls

The busiest part of the timeline is over on the left side, where the elements are listed. Elements are the objects displayed on the stage. Actually, even the stage itself is considered an element, as you can see in Figure 4-8. As explained back on Setting the Stage, each element has a number of properties that you use to control it. For example, text has a Color and a Size property. Rectangles have Width and Height properties. All visible objects, except the stage, have Position properties: X and Y. These properties are listed in in “lanes” under the element’s name in outline fashion, with properties subordinate to their element. Click the triangle button to show or hide the property lanes under an element. You can also use the Timeline→Expand/Collapse Selected option as long as you have an element selected in the timeline, or its related shortcut key Ctrl+period (⌘-period for the Mac). There’s also a handy command that expands and collapses all the elements at once. Use Timeline→Expand/Collapse All. The shortcut for that command is Ctrl+Shift+period (Shift-⌘-period on the Mac).

Tip

To the left of each element name, there’s a small color bar. Animate automatically labels each element with a specific color that you see in the timeline and the Elements panel. The same color appears on the transition bars in the timeline. This color coding of elements makes it a little easier to quickly identify them. The colors don’t serve any other function.

Even though you’re building an animation, that doesn’t mean every single element in your animation is going to change over time. Perhaps you have several background elements that remain static through the whole show. In that case, there’s no need to clutter up the timeline with elements that aren’t animated. Click the Only Show Animated Elements button (Figure 4-8) to filter out the lazier elements in your animation. When necessary, you can always toggle them back on.

In the timeline to the right of each property name, you see the value for that property based on the current playhead position. You can create new property keyframes by changing the values. If the playhead is already over a keyframe, you can change the value of that keyframe.

Figure 4-8. Each element in your project, including the stage, gets a row in the timeline. Click the Expand/Collapse button next to the element’s name to show or hide the properties that are used in your animation. Here the squirrel properties are shown, while the farmhouse and bike properties are hidden.

Showing, Hiding, and Locking Elements

When you’re working with a lot of elements and a complex animation, you tend to have some of those “can’t see the forest for the trees” moments. You need to hide some elements on the stage so you can focus on others. That’s the job of the show/hide toggle buttons next to each of the element’s names in the timeline. See Figure 4-9. When the button looks like an eyeball, the element is visible. When it looks like a period, the element is hidden. Keep in mind that this affects elements’ visibility only while you’re working in Animate. It doesn’t affect your finished animation when it’s viewed in a web browser. To control the visibility in the finished animation, you need to use the On/Off property, the Alpha property, or the JavaScript show/hide methods, as explained on More Showing and Hiding Tricks.

Accidentally moving an element while you’re working is another design-time problem. Perhaps you want to select some text but accidentally grab a background photo, and now you’ve dragged it out of position. To avoid these problems, you can lock elements in place. When they’re locked, you can’t move them—you can’t even select them in the Elements panel or on the stage. The Lock button looks like a lock when it’s enforcing the no-move, no-select rules. When an element is unlocked, the button looks like a period (Figure 4-9).

Figure 4-9. The elements part of the timeline is very busy with buttons and toggles. Many of these controls duplicate controls elsewhere. For example, the show/hide and lock/unlock buttons work exactly as they do in the main Elements panel.

Using Timeline Keyboard Shortcuts

Like most applications, Animate gives you several ways to do the same thing. When it comes to managing the timeline, you may be able to perform the necessary acts using the menus, buttons, or keyboard shortcuts. The good thing about keyboard shortcuts is that they give you a quick way to trigger a command, such as “create a label” or “turn on Auto-Keyframe Properties.” The bad thing about keyboard shortcuts is that you have to remember the key combinations. That means you’ll probably learn just a few shortcuts for the things you do the most.

Note

Forgot the keyboard shortcut for one of your favorite commands? You can usually find keyboard shortcuts listed next to commands in the menu.

Here’s a quick cheat list for common timeline tasks, along with their menu commands and keyboard shortcuts:

ACTION	MENU COMMAND	WINDOWS KEYBOARD SHORTCUT	MAC KEYBOARD SHORTCUT
Play or Pause the animation	Timeline→Play/Stop	Space bar	Space bar
Go to the beginning	Timeline→Go to Start	Home	Home
Go to the end	Timeline→Go to End	End	End
Go to previous keyframe	Timeline→Go to Previous Keyframe	Ctrl+Left Arrow	⌘-Left Arrow
Go to next keyframe	Timeline→Go to Next Keyframe	Ctrl+Right Arrow	⌘-Right Arrow
Zoom in on timeline	Timeline→Zoom In=	=	=
Zoom out on timeline	Timeline→Zoom Out	–	–
Show all active time	Timeline→Zoom to Fit	\	\
Toggle snapping on or off	Timeline→Snapping	Alt+;	Option-;
Add a label to the timeline	Timeline→Insert Label	Ctrl+L	⌘-L
Add trigger to timeline	Timeline→Insert Trigger	Ctrl-T	⌘-T
Toggle Auto-Keyframe Mode	Timeline→Auto-Keyframe Mode	K	K
Toggle Auto-Transition Mode	Timeline→Auto-Transition Mode	X	X
Expand or collapse a selected element’s properties	Timeline→Expand/Collapse Selected	Ctrl+. (period)	⌘-. (period)
Expand or collapse all elements’ properties	Timeline→Expand/Collapse All	Ctrl+Shift+. (period)	Shift-⌘-. (period)
Activate the pin portion of the playhead	Timeline→Toggle Pin	P	P
Switch pin and playhead positions	Timeline→Flip Playhead and Pin	Shift+P	Shift-P

Creating Transitions

Transitions have been part of this book since the first exercise in Chapter 1, so chances are you’ve created a transition or two by now. This section examines transitions and highlights some of the ways you can tweak and modify them. If you want to experiment along with the discussion, go ahead and create and save a new Animate document. Turn off Auto-Keyframe and the other buttons on the top of the timeline. Draw a rounded rectangle that’s about 100 to 140 px—no need to be too precise. Drag the playhead away from the starting point 0:00. Now, move the element. As expected with Auto-Keyframe Properties turned off, no keyframe or transition is created. This is simply the new location for the element along the whole timeline. Scrub the playhead a bit, and you can confirm this.

Creating Instant Transitions

A traffic light changes from red to green. A headline says “98 Degrees in the Shade” and then flashes “It’s HOT!” Those are instant transitions; there’s no gradual change over the course of time. Here’s a quick experiment you can perform with the Missing CD project called 04-1_Instant_Transition (www.missingmanuals.com/cds/animatemm). A simple traffic light graphic is made from a black rectangle and three colored circles. The elements are appropriately named: redLight, yellowLight, and greenLight. Initially the opacity for greenLight is set to 100% while the opacity for the other two lights is set to 30%, making them appear turned off.

1. At 0:00 on the timeline, click the Add Keyframe button next to Opacity for redLight, yellowLight, and greenLight.

   You can select all three lights in the Elements panel and then click Add Keyframe for Opacity once. The advantage of selecting elements in the Elements panel is that you won’t inadvertently move them on the stage. After you click the button, Opacity lanes appear in the timeline for each of the elements, as shown in Figure 4-10. Next to the word Opacity, you see the value for the property and a second Add Keyframe button you can use to create new keyframes for that specific property.

2. In the timeline, turn on Auto-Keyframe (K) and turn off Auto-Transition Mode (X).

   These buttons work as advertised: Auto-Keyframe automatically creates keyframes when you change a property and Auto-Transition Mode automatically creates smooth transitions between property keyframes. That’s not what you want for your traffic light: You want instant transitions so the light changes immediately.

3. Move the playhead along the timeline a second or two. Then change the Opacity value for greenLight to 30% and the value for yellowLight to 100%.

   You can change the Opacity property for each element in the Properties panel, or you can input the value in the property lane. When you change the value, new keyframes automatically appear in the timeline.

Test your animation and you see the instant transition as one light turns off and the other turns on.

Figure 4-10. Turn off the Auto-Transition Mode button when you want a property to change from one value to another without a gradual transition. You can change the property values and add keyframes using the controls in the property lanes of the timeline.

Setting the Pin for a Smooth Transition

When you want to animate Newton’s apple falling from a tree, Pinocchio’s nose growing, or a car driving down the road, you need to create a smooth or gradual transition. Often you’ll want to make these kinds of smooth transitions as the value of a particular property changes. Smooth transitions aren’t limited to a location on the stage. You can smoothly change from one color to another—the element will pass through several shades of the two colors. You can smoothly change the size of an element, making it appear to grow gradually.

Here’s a quick experiment you can do with a rounded rectangle or any other element:

1. Create a new Animate project, turn on Auto-Keyframe Mode (K), and turn on Auto-Transition Mode (X).

   When Auto-Keyframe Properties is turned on, Animate automatically creates keyframes when you change an element’s properties.

2. Draw a rectangle, rounded rectangle, or some other element on the stage.

   Any old element will work for this quick experiment.

3. Turn on the Pin (P).

   When the pin is toggled on, you can move the playhead and the pin separately. This makes it easy to mark two positions on the timeline at once. More importantly, it makes it easy to mark the beginning and end point for a smooth transition.

4. Drag the playhead to 0:01 and move the pin to 0:00.500.

   A gold transition bar appears in the timeline with arrow pointing toward the playhead. The blue numbers next to the pin display the length of time for the transition. A negative number is displayed when the pin is to the left of the playhead.

5. Move the element to a new location on the stage.

   Animate creates keyframes; one at 0:00.500 marking the original location of the element and one at 0:01, marking the new location, as shown in Figure 4-11. Colored bars signal a smooth transition, and if you scrub the playhead over the transition, you’ll be able to appreciate the smooth motion.

Note

It’s worth taking a moment to consider how the two-part playhead works. Both the top and the bottom portion create keyframes. The changes you make on the stage are recorded in the keyframes at the playhead position. The pin (top part) creates keyframes that match the property values before the change. Why are these keyframes that duplicate property values important? In the previous example, if you don’t set the pin, the element’s motion would begin immediately at 0:00. Setting the pin ensures that the rounded rectangle remains motionless between 0:00 and 0:00.500. The element’s motion begins at the point of the pin, and it ends at playhead position 0:01.

In the timeline, there are numbers to the right of the Top and Left properties. These values are editable by typing or scrubbing. Select the transition in the timeline, and you’ll see values next to each keyframe. These are quick references that you can use when you’re working with multiple elements with lots of transitions.

Figure 4-11. Color bars mark smooth transitions in the timeline. The colors match the identifying color of the element. You can select a single property transition by clicking on the bar. You can select all the transitions by clicking the element’s bar.

Your transition has three colored bars: the two bars for the Position properties and one bar at the top for the element. For example, note RoundRect, as shown in Figure 4-11. If you collapse RoundRect to hide the properties, you still see the top bar as a signal that there’s a transition.

It’s worth noting that the pin doesn’t always have to be positioned behind the playhead in the timeline. So, for example, in the current animation you can put the playhead at 0:01.500 mark and the pin at 0:20 and create another transition, by moving the rectangle again. Keep in mind the element’s new location is marked by the playhead, while the pin retains the value prior to the move. The result is the rectangle moves to the new location (playhead) and then returns to the previous position (pin). This is a handy trick whenever you want to create a repeating or yoyo kind of motion or if you want to an element to grow and then shrink back to its original shape.

Manually Adding and Removing Property Keyframes

Sometimes, you’ll want to add keyframes manually. Exercises earlier in the book showed how to create keyframes with the Auto-Keyframe (K) button toggled off. Simply click the Add Keyframe button next to the property you want to add. To create a transition, you need to have two keyframes with different values—see the box below. If you want to remove a property keyframe, the process is similar to deleting a word in a document. Click to select the doomed keyframe. It shows a gold highlight (Figure 4-12). At that point, just press Delete (Mac or PC) or Backspace (PC). If you delete the two and only keyframes for your rounded rectangle, it still remains visible on the stage. You’ve deleted the keyframes that recorded its position, but you didn’t delete the element.

Figure 4-12. Here the Left and Top properties each have a single keyframe in the timeline. As a result, there won’t be a visible change. It takes two property keyframes with different values to make a change in the timeline.

UP TO SPEED: Don’t Forget the Starting Position Keyframe

Consider the following scenario: You’ve got Auto-Keyframe Mode turned on. You import a photo to your project. Animate automatically places the images on the stage with the upper-left corner at X=0, Y=0. You move the playhead down to the 2-second mark and then move the photo to another location. That’s fine and good. But when you move the playhead back to 0:00, the photo is no longer in its original position: X=0, Y=0. What happened?

In short, you’re missing a keyframe. Even with Auto-Keyframe Properties turned on, Animate doesn’t create a keyframe when it imports a graphic. It creates keyframes only when properties change. When you’re starting out with Animate, the previous scenario and similar gotchas occur every so often. Just keep in mind that when transitions or changes don’t work as expected, it’s very possible you’re missing a keyframe at the beginning of the animation. It takes at least two keyframes for a transition or a change in an element to take place—one at the beginning and one at the end.

So the solution is to explicitly create a keyframe for the starting position of the element. If you remember to do this when you add elements to the stage, you’ll avoid these problems.

Editing Transitions

In most animations, timing is critical. If you’re animating a bouncing basketball, your audience will immediately notice if the ball hangs too long in midair. If you’re syncing a slideshow to a music track, your audience will notice if you miss the beat. So don’t be surprised if you don’t get it right the first time you create a transition. Often, it’ll need a little tweaking to get the timing just right. Fortunately, it’s not hard to tweak transitions in Animate, and there are a few different ways to do it.

You can change the timing of transitions by dragging individual keyframes or the entire transition left and right along the timeline. For example, if you drag the keyframe on the end of a transition to the right, making the transition bar longer (as shown in Figure 4-13), you extend the time it takes for the transition to take place. If you’re animating a car and you extend the transition, the car drives slower, taking more time to reach its destination. Want the car to go faster? Make that transition shorter.

When it comes to changing the duration of a transition, you don’t have to edit each property separately. If you want to change all the properties at once, select the element bar. This selects all the properties below. Then you can drag the ends to change the duration.

In some cases, you’ll want to move a transition without changing its duration. That’s easy to do, too. Just select the transition you want to move and then move the cursor over the middle, until it changes to a hand. Then click and drag the transition to its new home.

Figure 4-13. You can change the duration of a transition by dragging the keyframe at the beginning or the end. Here, the keyframe at the end of the Left property is being dragged down the timeline, extending the transition. RoundRect will continue to move horizontally after the vertical motion stops.

Tip

The timeline displays your element’s properties and the transitions visually. Often that’s just the ticket for fine-tuning a particular effect. If you need numerical precision, you can see the time displayed on each end of the currently selected transition.

The Insert Time command can also be used to extend the length of a transition. Move the playhead to the point where you want to add more time, and then choose Timeline→Insert Time. As shown in Figure 4-14, a dialog box appears, where you can type or scrub in a time value in the usual 0:00.000 format. Bear in mind that the Insert Time command affects the entire timeline. If three transitions are taking place at that point in time, Insert Time extends them all. It also adds to your project’s overall running time.

Figure 4-14. You can insert time at any point in the timeline by moving the playhead to a position and then using the Timeline→Insert Time command. Dial up the amount of time you want to add and click the Insert Time button shown here.

Adding Easing, Reversing Motion, and Fine-Tuning Transitions

Want to practice fine-tuning a transition? Here’s a project that will give you a little exercise. You can find 04-3_Basketball_Bounce with the Missing CD folders at www.missingmanuals.com/cds/animatemm. The goal is to make the basketball bounce with a realistic motion. As the ball bounces on the big letter B, it squashes the letter against the ground. When the ball comes back up, the letter re-inflates to its natural stature. See Figure 4-15. Along the way, you’ll apply some easing to the basketball bounce, and copy and paste a transition. Most likely, you’ll want to adjust the timing a bit by shortening or lengthening the transition bars.

Figure 4-15. In this animation, the basketball drops from above (left). When it meets the letter B, it squashes the letter (middle). By the time it hits the ground, the letter is flat (bottom). As the ball bounces up, the letter springs back into shape.

Here goes! Follow the bouncing ball.

1. Open 04-3_Basketball_Bounce.edge in Animate.

   There are two elements on the stage: a basketball image and a text box with a big bold letter B sitting at the bottom of the stage.

2. Press K to turn on Auto-Keyframe Mode; press X to turn on Auto-Transition Mode; finally, press P to toggle the pin.

   The shortcut keys give you a quick and easy way to toggle these features on and off. As an alternative, you can click the buttons on the timeline or use Timeline menu commands.

3. Drag the playhead to 0:01 and leave the pin at 0:00.

   With the playhead and pin in this position, you can create a transition that lasts 1 second—a good first try for the basketball’s downward motion.

4. Drag the basketball down so its bottom edge is at the bottom of the stage.

   The basketball should hide the letter B, for the most part. The bottom of the basketball graphic should snap to the bottom of the stage. If you drag the ball straight down, only one property is added to the timeline: the basketball’s Top property.

5. Press P to toggle the pin off. Click to select the basketball’s Top transition and press Ctrl+C (⌘-C).

   This copies the transition. You can now paste it back into the timeline. You can paste it into a different timeline location, or you can paste the transition in the timeline for a different element.

6. With the playhead still at the end of the transition, go to Edit→Paste Special→Paste Inverted.

   This handy command not only pastes the transition into the timeline, but it also reverses the action. So the basketball will go from the bottom of the stage back to its original position. You now have both motions for the bounce.

7. Press Home and the space bar to test the animation.

   The ball goes up and down, but you wouldn’t call it realistic animation. It feels a bit wooden. Time for some easing.

8. Select the first section of the Top transition. Then, in the timeline, click the Easing button. When the Easing panel appears, choose Ease in and then choose Cubic.

   When you first see the transition panel, Easing is set to linear. That makes the ball travel at the same speed the whole length of the motion. With the Ease In, Cubic applied, the ball moves more slowly at the beginning of the journey, picks up speed, and is moving faster by the time it hits the ground. If you’re curious, go ahead and test some of the other easing options.

9. Select the second section of the Top transition and apply the Ease Out, Cubic easing.

   This easing option is the reverse of the first one. That means the ball will slow as it reaches its highest point on the stage.

10. Press Home and the space bar to test the animation.

    The motion feels better. The ball seems to react to hitting the ground, and with the slowing down at the top, it feels like gravity is in play.

11. With the playhead at 0:00, click the Add Keyframe button (next to Rotate in the Properties panel).

    This step locks sets the ball’s Rotate property to zero when the animation begins.

12. Move the playhead to the 0:01 point where the ball hits the ground. Then select the ball and set its Rotate property to 40 degrees.

    The ball rotates rather lazily as it drops. Realistic enough. You can give it more or less spin by changing the Rotate value.

13. Move the playhead to 0:02 and set Rotate to 80 degrees.

    This makes the ball continue to spin in the same direction. If you prefer, use a negative number to make the ball spin back when it hits the ground. At this point, the ball is doing pretty well. Time to focus on that letter B.

14. Drag the playhead to the point where the ball first touches the top of the letter B, then select the letter B, as shown in Figure 4-16.

    The Properties panel shows B’s properties, including Transform Origin and Scale. The transform origin is the point around which transformations such as rotate and scale take place. For more details, see Transforming Your Rectangle. When B is selected, the transform origin is shown as a blue square. It starts out centered in the text box.

15. Adjust the Transform Origin Y property so that the transform origin is at the bottom of the letter B.

    With the transform origin at the bottom of the character, that point will stay in place when you apply transformations like Scale. Click the link next to Scale (x) and Scale (y).

    

    Figure 4-16. Here the transform origin (blue square) for the text box is positioned at the bottom of the stage. Now the bottom of the letter will stay positioned at the bottom of the stage when transformations are applied.

16. In Properties, with B selected, click to break the link next to the horizontal and vertical scale properties. Then click the keyframe diamond next to the vertical value.

    Animate creates a keyframe where B is scaled at 100 percent. You’re breaking the link between X and Y because you want to scale Y independently.

17. Drag the playhead to the point where the basketball hits the bottom of the stage. Then set B’s vertical scale to 0 percent.

    This makes it look like the basketball is squashing the letter.

18. Select the letter B’s Scale (y) transition bar and press Ctrl+C (⌘-C).

    The transition is copied, and now you can paste it back into the timeline at a different point.

19. With the playhead at the end of the transition, and B still selected, go to Edit→Paste Special→Paste Inverted.

    As with the basketball motion (step 6), this reverses the scale transition. So, as the basketball bounces up, the letter bounces back to its regular size.

At this point, the basketball bounce is pretty good. If you want to compare your work to another example, check out 04-4_Basketball_Bounce_done. Naturally, there’s a lot more you can do. For example, if you don’t find the motion realistic enough, you can speed it up or slow it down by adjusting the length of the transitions. To adjust everything at once, Shift-click to select both the basketball element and the B element. Then drag the end of the basketball transition. Don’t like the results? A simple Undo (Ctrl+Z or ⌘-Z) puts everything back the way it was. If you’re ambitious, you can have the basketball bounce out an entire word. (LeBron, anyone?) Or you can apply the bounce-squish to some of your own artwork. Experimentation is an artist’s best tool.

Animating a Filmstrip

Here’s another way to create a slideshow, one that’s based on a filmstrip metaphor. (Hope you like slideshows…you’ll see several increasingly complex slideshows as you work your way through this book.) In this example, a single .jpg file has five photos of flowers arranged horizontally, as shown in Figure 4-17. Each flower pic is 500 pixels wide and 375 pixels tall. So, the entire .jpg file is 2500 x 375 pixels. If you set the stage to be 500 x 375 pixels and set the stage’s overflow property to Hidden, you create a viewer that shows one image at a time. Then you can create timeline transitions that slide the filmstrip left or right, to view different photos.

Figure 4-17. Here’s a zoomed out view of the stage with the filmstrip in place. The daisy picture in the middle is directly over the stage, so it’s the one currently displayed. Slide the filmstrip 500 pixels in either direction to show a different picture.

1. Open project 04-5_Film_Strip.

   The project is empty except for a single image called flowerStrip375x2500.jpg. The stage is already set to dimensions of W = 500 and H = 375.

2. Drag flowerStrip375x2500.jpg on to the stage, and then, in Properties, change the ID to flowerStrip.

   It doesn’t matter exactly how you place flowerStrip on the stage, you position it in the next step.

3. Set the location to X=0 and Y=0.

   This puts the first image directly over the stage.

4. Set the stage’s Overflow property to Hidden.

   If the Overflow isn’t set to Hidden, the entire filmstrip is visible when viewed in a web browser.

5. On the timeline, turn on Auto-keyframes (K) and Auto-Transition (X).

   These settings ensure that Animate creates smooth transitions, making the filmstrip’s sliding action visible as it moves from one picture to the next.

6. Drag the playhead to the 1 second mark.

   The first image will be visible for a second before the transition to the next picture begins.

7. Press P to toggle the pin.

   You can create transitions quickly when the pin and the playhead move independently. The playhead marks the current position, so when you change a Property, the new value (keyframe) takes place at the playhead. The pin marks the other end of the transition. It creates a keyframe with the previous property value.

8. Drag the playhead to the right so there’s one quarter of a second between the playhead and the pin.

   The cyan-colored time display next to the pin will read -0.250 when there’s a quarter second between the pin and playhead.

9. Change flowerStrip’s location X property to -500px.

   The filmstrip moves, placing a new flower picture over the stage. Animate creates a smooth transition to animate the motion as shown in Figure 4-18. The entire transition, sliding the filmstrip to expose a new picture, takes a quarter of a second.

10. Repeat steps 6 through 9 to create transitions to display the rest of the images in the filmstrip.

    Each photo is 500 pixels wide, so keep subtracting 500 to reposition the filmstrip: -1000px, -1500px, -2000px. This timing displays a photo for a second, with a quarter second for the transition, but you can use whatever timing suits your project. If a photo deserves a better look, let it stay on the stage a little longer.

11. Optional: At the end of the filmstrip, you can create a transition that returns to the first image. Just set the X value back to 0.

    In the next chapter, you’ll see how to use a timeline trigger to loop an animation. Looping is a perfect fit with this project.

Figure 4-18. The filmstrip is in mid-transition, with the rose moving offstage and the daisy moving on. The motion for the entire filmstrip is created by changing the Left property of the flowerStrip image. You can choose whether or not the audience sees the sliding action. Don’t want the animated motion? Turn Instant Transitions off and don’t bother with the pin when you create the value of the Left property.

There’s a certain logic behind the filmstrip concept that might not be apparent at first. A single large image travels the web and loads faster than several small images. Early computer game designers took advantage of this when they animated characters or gaming action. Want a walking villain? Designers created multiple frames that showed Murderous Mike walking and stored them all in a single graphic called a sprite. Then, when it was time for Mike to walk over to the hatchet, the animation displayed different portions of the sprite to show his walking action. At the same time, they’d move Mike across a pre-designed background. Once a computer has loaded an entire sprite into memory, it can quickly jump from one image to the next, which makes for a smooth, hesitation-free animation.

Dealing with Timeline Claustrophobia

If you’re working on a computer with modest screen real estate, the area available to the timeline is probably minimal. That becomes a problem when your projects get bigger and more complex. The best long-term solution is to move up to a larger monitor or add a second monitor. Many computers, including laptops, let you run two monitors at once. With that kind of a setup, you can devote an entire monitor to your timeline and stage. Then you can move the Properties, Elements, and Library panels to a separate monitor. That gives you room to see all of the elements and their properties at a glance. It will definitely cut down on that constant scrolling to find a new moment on the timeline. If your time is valuable, a large monitor or a second monitor will pay for itself.

An alternative short-term solution is to set up and save a special workspace that maximizes the area devoted to the timeline. Go to the Windows menu and turn off everything except the timeline and tools, as shown in Figure 4-19. That leaves just the stage and the timeline visible. Drag the top edge of the timeline up, giving it as much space as you need. You can hide the stage entirely if you want. Go to Window→Workspace→New Workspace and save your new layout with a name like Timeline Max. Now you can quickly jump from one space to another using the workspace menu.

Tip

You may have similar claustrophobia issues when you’re working with elements on the stage. There’s a built-in solution to this problem. Click the menu in the upper-right corner of the stage panel and choose Maximize Frame. At that point the frame fills the workspace. Use the same menu to jump back to the previous workspace layout; choose Restore Frame Size.

Figure 4-19. When the timeline seems too small for serious work, create your own Timeline Max workspace like the one shown here. In the Windows menu, turn everything off except the timeline and Tools panel.