It s the Result, Not the Technology

It's the Result, Not the Technology

When you see a magician saw his assistant in half, no one actually gets hurt. The magician creates an illusion, and you can almost believe the result. Similarly, in animation nothing actually moves. Watching a series of still images can make you believe you're watching something move. In addition to the persistence of vision effect described in Hour 6, "Understanding Animation," animators can use tricks (not unlike magicians) to fool the user into believing he sees something that never happened.

To make someone believe a ball is moving across the screen, for example, really moving it across the screen may not be necessary. That is, a motion tween might display the ball each step along the way and if the user could slow down the movie, he would see it actually move. However, if the user thinks the ball moved across the screen, it doesn't matter whether it really did. Even if you're trying to communicate a principle of physics, being completely accurate in your display is not necessary. It's okay to lie. There's little value in being perfectly accurate if the result doesn't look like you intended.

You're about to look at a few tricks that you can use to enhance your animations. Remember, though, that the techniques are not as important as the results.

Simple Techniques to Use Sparingly

A trick often used in television commercials (especially those played late at night) is to make the screen blink. Sometimes several flashes of white light cause viewers to look at the TV even if they were not paying attention. This technique is arguably appropriate for TV because people don't tend to give it their full attention.

In the case of a website, you can rely on the fact that the user is more involved than a TV viewer. She is sitting up, maybe even leaning toward the screen a totally different profile. If you flash the screen, you should do so only sparingly, if at all.

If you want to grab the user's attention, you can use a modified version of flashing the screen just make a small button or area of the screen blink. For example, if something's about to move, make it blink first. This will draw the user's attention to the blinking object, and then she'll likely be watching when it moves. Technically, this is simply a matter of alternating between filled and blank keyframes.

There are other simple (and potentially annoying) techniques to consider. In the first frame of a movie, instead of starting with the entire interface, animate each element into its final location. If you have an interface with six buttons, you can have each appear, one by one, and move into position. This way, you can control the order in which the user "reads" the interface. Be aware, however, that building in such a way can become tedious and bothersome if it's slow or if the user must sit through the same sequence many times. If the home screen builds again every time the user returns to it, that's probably too much.

Consider also that techniques such as blinking and building are ways to resolve challenges in communication. Sometimes these are good solutions, but the best way would be to simply avoid the problem in the first place. For example, when you find people aren't watching the right part of the screen, don't jump to the blinking solution. Try to first identify whether the problem can be resolved; maybe the rest of the screen is too crowded and that's distracting the users. Cleaning up the interface might resolve the issue. Try to fix the root cause of a problem instead of addressing a single symptom.

You'll probably discover other tricks to solve problems, but use them sparingly. We'll talk about some more dependable techniques later this hour, but always ask yourself if the problem you're trying to resolve can be avoided in the first place. That is, treat the cause rather than the symptom.

Ways to Fool the User

Unlike magic, where the key to success is often found in the art of distraction, animation doesn't need to overcome any physical limits. The challenges in animation include how to show or imply motion where there isn't any, make things look natural, and exploit the user's expectations (either to help you show something that's not there or to create surprises). Pulling a rabbit out of a hat is easy in Flash, but making the rabbit look like it's alive is a real challenge. Let's look at a few ways to address the three goals implying motion, appearing natural, and exploiting expectations. Later this hour you'll apply what you learn.

There are several ways to imply motion. Although it's rare that something moves so fast your eyes see only a blurred image, it's quite common in photographs. People believe a blur is an indicating of motion. Making something appear to streak across the screen can be as simple as drawing lines in the opposite direction of the motion (kind of like exhaust from an airplane). Naturally, Flash 8 Professional's Blur filter implies motion when you apply the blur to just one axis (say, the x axis when the object is moving from left to right). However, the visual impact is often so blurry that the Blur filter can make the object look out of focus . In the upcoming task "Add a Motion Blur" you'll see how the Drop Shadow filter can more effectively communicate motion because the out-of-focus and blurred portion is just the shadow. It's as though you're adding a tail to a comet sometimes you still want to see the comet.

Making things look natural is possibly the biggest challenge in animation. To animate someone walking is not easy. That's because viewers know how that's supposed to look, and if it doesn't look right, they know. There's no button in Flash that will create natural motion. However, you can learn to animate in a way that looks natural. When you are going to animate something from the real world, study the object you're animating. Carefully watch people walking and ask yourself how you know they're walking. Don't watch just the legs and feet, but look at the arms, hands, and head. Try to identify peculiar and subtle movements. Sometimes overemphasizing unique identifiers, such as the way your hands move while walking, can make an animation more believable.

Here's a good trick to make animations look natural: Insert elements that would be considered mistakes in traditional media. For example, people sometimes simulate dust and scratches to make an animation look like a conventional film. To make something flicker like an old-fashioned movie, just make a two-frame movie clip with a rectangle shape the size of the stage (and the same color as the stage) in Frame 1 and a blank keyframe in Frame 2. Put this two-frame clip in a layer above everything else in the main timeline and apply an Alpha effect of, say, 10%. It will loop continuously to create a flicker effect. People see flickering and they think "old movie." Just study what is peculiar in real life and bring attention to these details this will make your animation more believable.

Finally, you can exploit the users' expectations in two ways. You can take advantage of their expectations that is, let them think they saw something because they expected to see it, not necessarily because they did see it. For example, if they see a bowling ball move toward some pins and then they hear the sound of a crash, even if the pins are simply removed from the Stage, they'll imagine the pins fell over. You don't have to animate each pin meticulously. Just remove them. The sound and the expectation are enough to make it believable.

You can also use users' expectations to add more impact by showing the opposite of what they expect. In the case of the bowling ball, imagine a long and drawn-out tween of the ball moving toward the pins. Then, at the last minute, an elf character appears and stops the ball with a screeching sound. Certainly not what the user expects, and that's what gives it impact.

These techniques require some imagination on your part. You'll practice them in the next section. Just don't be afraid to "lie" to the user. They'll thank you later if it means you can make something more believable.