5.2 Motion Paths
smoothly animating movement emphasizes the feeling of interaction
In Chapter 5.1, you probably noticed that the cursor, which was embedded in each frame, jumps from one position to another as the frames are played as a slide show. This breaks the viewers’ feeling that they are ‘watching’ someone interact with the system. We will fix this by animating the cursor in each frame using the motion paths facility found in most slideware presentation software (such as Microsoft PowerPoint) or animation systems (such as Adobe Flash). Apple’s Keynote calls these move actions. As our example, let’s look at just frames 2 and 3 from the equipment rental sequence introduced in Chapter 5.1. Our goal is to animate the cursor so it moves smoothly from its position in Frame 2 to its position in Frame 3.
We will use PowerPoint; if you use different software, it will likely have a similar animation capability although perhaps under a different name. In my version of PowerPoint, I access motion paths from the animations tab. I’ll also reveal the animations pane, which will let me play the animation. All my animations will happen in the first frame above, where my goal is to move the cursor from its position above the ‘Check out’ button to its new position above the ‘Gloves’ checkbox.
Because I need to know the final position of the cursor, I’ll copy and paste the cursor from Frame 3 to Frame 2 (I will delete this later – it’s just for reference). I’ll now select the original cursor, as that is what I want to animate. My window now looks something like this. Note that the cursor is selected.
Explore Your Animation Tools
Animation facilities in modern slide presentation and animation tools are very powerful. If you have a tool that you use regularly, it is definitely worth your while to explore its animation facilities. You can add effects such as transitions between frames, compound animations (e.g., by stacking one animation after another), complex sound effects, and so on.
While we will revisit a few other animation methods in Chapter 5.4, it’s beyond the scope of this book to get into them in detail.
Because a graphical object (the cursor) is selected, the Add Animation button is active. When I select that, a drop-down menu appears that shows all the ways I can animate that graphic. Motion paths are at the bottom, where I can choose several pre-formatted motion paths (e.g., straight line, and arc, a turn). I can also specify the motion path manually by the ‘Custom Path’ option, which is what I will do here.
Other Animation Tools
Presentation tools are primarily for creating slide shows; animations were added to them as another way to craft compelling presentations. While simple animations can be added to your sequence, complex ones tend to be either impossible because the tool doesn’t support them, or hard to do.
If you regularly design scripted slide shows (see Chapter 6.4), or if you are interested in complex animations, you should learn an animation tool specifically designed to animate graphics, suc as Adobe’s Flash. While the learning curve is higher than a presentation tool, such applications provide far more creative power (we show a few in Chapter 5.4). The danger is that you will spend your time creating lovely animations rather than developing your ideas. Remember the role of your sketch!
The next step is to draw a line that indicates the actual path of movement of the cursor. You do this simply by drawing a line from the center of the cursor to the center of the other cursor. After this is done (and checking to make sure the animation works), you can remove the reference cursor you had pasted in.
At this point (and depending on your software), you can further control the animation. In PowerPoint, I can select the animation in the animation pane (on the right side) and raise a menu and control panel window that gives me this control. For example, I can control when the animation starts, and how slowly or quickly the animation plays (via its timing).
I can also add a variety of effects to the animation. In this case, I added a clicking sound to this animation, to emulate the user clicking the ‘Gloves’ checkbox.
