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:
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: