Section 3.6. Motion Effects

3.6. Motion Effects

Successful designers communicate in myriad ways. Themes are communicated through type, blocking, pacing, color, and movement. Combining these elements can have a powerful effect. Convoluted intros on web sites are virtually extinct now (fortunately), but motion design is still alive and well, as it should be. How, then, can motion help bring your files to the next level?

3.6.1. Animating Along a Motion Guide

So far, your animated sequences have been linear and fairly conventional. True, you've added some color changes and an opacity fade, but mostly you've focused on scaling and sliding along straight lines. Now it's time to add a little spice by leading an asset along a stylized path:

Using a motion guide, it's possible to draw a path for an object to follow. Motion guides are lines that guide an asset where you want it to go but aren't visible when the file is rendered. Next, you'll add a motion guide to the eight layer, so that it waves in with a bit of punch.
Select the eight layer, and then click the Add Motion Guide button at the bottom of the timeline. Its icon resembles a red arc guiding a shape, and it sits between the Insert Layer and Insert Layer Folder buttons you used earlier.
Insert a keyframe in frame 14 of the motion guide layer so it starts at the same time as the eight layer.
Using the Pencil tool, or the Pen tool if you prefer, draw a flowing line that resembles a sideways S, as seen in Figure 3-12. Be sure it starts off Stage bottom and ends in the lower-left corner of the first box. If you want to start with a predrawn line, open animation_09.fla in the 03 folder in your working directory.

Figure 3-12. The motion guide for the eight layer
Switch to the eight layer, and select the second keyframe. You will see an outline of the currently invisible eight symbol instance. Single-click on the eight symbol instance and look for the centered crosshair. Grab the symbol by this crosshair and snap it to the below-Stage right end of the motion guide. If it doesn't snap, be sure View Snapping Snap to Objects is enabled. (If it helps, you can disable the alpha color effect you applied earlier. The sample file is configured this way to make it easier for you to see the symbol instance.)
Play the animation. The eight symbol instance should follow the path of the motion guide from start to finish, as seen in animation_10.fla.
You can make it look even better with one simple enhancement. Click on the first keyframe in the motion tween you created for the eight symbol. In the Properties panel, beneath the Tween menu, enable the Orient to Path option. This will cause the 8 to rotate automatically along the path of the motion guide. Sometimes it helps to rotate the symbol instance a bit at the start and end points of the motion guide, to align its direction with the path.
Test your file and save your work. It should look like animation_ 11.fla.

Note: Guide layers not used for motion tweens are not exported when you publish a movie; therefore, content on an otherwise unused guide layer does not affect the file size of a movie. You can use guide layers to store design notestext or graphics to help describe how a file worksto document the process or specify future enhancements under consideration. You can also temporarily convert a normal layer into a guide layer to hide its contents during testing.

You're now almost done with your first animation, but there's one final touch you can add to enhance its realism and style.

3.6.2. Realistic Motion

Beginner animators logically don't have the experience to know what makes an animation pop. Most linear animations are fairly flat and uniform, but there are a few simple tricks that can make your tweens come to life.

One shortcut to relatively realistic motion is to use easing. Easing refers to when you slowly ease out of, or into, a keyframe. Think of a bouncing ball example. When you throw a ball up in the air, gravity causes it to slow down and eventually stop at the top of its travels. It then accelerates up to a point, bounces on the floor, and begins the trip all over again. A flat animation would show the ball moving at a constant rate through all the frames. However, with the help of easing (and a few other tricks), you can more closely simulate the way the ball might move in the real world.

3.6.3. Bouncing ball

To experience this firsthand, take a look at the bouncing_ball files in the 03 folder of your working directory. This is not an accurate simulation, because the ball will continue to bounce infinitely. However, this simplified example will allow you to focus on the issues at hand.

The first file, bouncing_ball_01.fla, shows a straightforward bouncing ball animation. The ball moves at a continuous pace, and no keyframes have been edited.

The second file illustrates the first trick for more realistic motion. In a repeating sequence, the animation will look smoother if keyframes are not duplicated back to back. For example, look at the ball bounce in the first file. The ending keyframe of the down sequence is the same as the beginning keyframe of the up sequence. This causes a "stutter" at the point of the bounce. (In a down/up animation like this it is common to just use three keyframes, so the middle keyframe can be shared by both sequences, preventing this duplication. However, another trick is on the way, so unique keyframes are preferred.) In bouncing_ball_02.fla, the y-coordinate of the bouncing ball in the ending keyframe of the sequence has been moved up slightly to avoid the visual duplication.

The third file adds a little nicety that is specific to this type of animation. Inserting another keyframe between the two sequences enables you to squash the ball down a little bit, as it would deform during the bounce. These types of extra touches are not universally implemented, but they can really sell an animation.

Finally, bouncing_ball_04.fla introduces easing. The first sequence accelerates before the bounce and decelerates after the bounce. If you compare this file to the first animation, the difference is fairly amazing considering the simplicity of the enhancements.

Realistic motion isn't just handy for a bouncing ball, though. The effect can be applied in many situations. A sliding panel in an interface, for example, could be designed to slide quickly at first and slow gradually to a stop, helping to make the interface more elegant: instead of just plopping into position, it comes to rest gracefully.

3.6.4. Custom easing

Flash 8 makes graceful transitions easier than ever to achieve. The custom easing dialog, shown in Figure 3-13, allows you to draw a simple graph that will dictate the change in your animation over time. To get to the dialog, select the first keyframe of a motion tween, like you would when invoking the tween. Beneath the Tween menu, where you previously selected Motion, there is a button marked Edit. Clicking this button will open the Custom Ease In / Ease Out dialog and allow you to add easing to the tween you are manipulating.

Figure 3-13. The Custom Ease In / Ease Out dialog

You can adjust the Position, Scale, Rotation, Color, and Filter effects independently by drawing separate graphs, or manipulate all five effects at once with the same graph. In this example, you will focus on position, so no change to the dialog menu will be required.

The custom easing graph represents the length of your animation in frames along the horizontal axis and the percentage of your animation that is complete along the vertical axis. The default straight line means that your animation will complete itself consistently across the span of frames used to create it.

You can add control points by clicking on the graph's line, and then you can drag a point to add acceleration or deceleration. Look at the easing graph in the second span of frames in bouncing_ball_04.fla, for example, pictured in Figure 3-13. This 12-frame segment of the animation begins at frame 14 and concludes at frame 26. From a visual standpoint, it starts immediately after the ball bounces on the floor and stops when the ball slows to a stop at the top of its bounce, due to gravity.

Because the ball rebounds from the bounce quickly and slowly comes to a stop, the new control point (selected) is positioned so that 80% of the tweened animation takes place in only the first third of the allocated frames. This means that the ball moves very quickly during the first four frames and then slowly finishes the remaining 20% of the distance it needs to travel over the final eight frames of the span.

3.6.5. Easing the number 8

The eight movie clip in your first animation currently follows something akin to the track of a virtual roller coaster, but unfortunately it moves at a constant rate, so it doesn't look very exciting. If you add easing, you can make it look even more like a car on a roller coaster. Try to make it climb the first hill slowly, rush down the slope, and then slow again at the last upturn before coming to a halt:

If you're not already there, pick up where you left off in the last step in your animation series. If you prefer, open animation_11.fla and start from there.
Expand the eight layer folder and select the first keyframe of its tween.
In the Properties panel, click the Edit button to open the Custom Ease In / Ease Out dialog.
Note: The following easing values correspond to the sample file, but your motion guide may be different. The idea is just to match the animation speed with the curves of the guide. Experiment until you are happy, or try working with the sample file, animation_complete.fla. You can reset the graph and use the following matching values, if you prefer.
Add a new control point by clicking on the straight line. Drag it to approximately frame 21 along the bottom of the graph and approximately 40% along the left of the graph.
Add another new control point and drag this one to the approximate intersection of frame 27 and 90%.
You've now created a segment that will move slowly for the first 40% of the animation, slightly faster than normal for the next 50% of the animation, and then slowly again for the last 10% of the span. Click on each control point and adjust the handles to smooth out the curve. Your custom easing graph should look like Figure 3-14.

Figure 3-14. The custom easing graph for your final animation
Use the Play button in the dialog to preview your animation. When you are happy, click the OK button to dismiss the dialog.
Save your work and test your file. The animation should be a bit livelier.