Atmospheric Perspective

Here we're returning to what is referred to as atmospheric perspective. We introduced this concept in Chapter 3 when we started to look at scaling for 3D. Atmospheric perspective is an effect created by the environment. For example, photos with mountains in the horizon often look slightly bluish and hazy. The reason for this is that there are dust and water particles in the air between the camera and the mountains , so the farther away the object, the hazier it may look. Changing the opacity of an object or moving the object's overall color toward an atmospheric color changes our perception of the object's sharpness and depth. The overall effect is similar to that of depth of field when the plane of focus is near. Thus, it is often useful to use these effects together. You'll find this example in the support files as focus2.fla . Let's see how it was constructed :

1. Press CTRL/CMD+N to create a new movie, and then click on the Size button in the Property Inspector to edit the movie properties. Set the frame rate to 20 fps.

2. Next , you need to create the object or character that you can use to demonstrate the idea of approaching the plane of focus. You should exercise some care in creating your character so that when the character's overall opacity is changed it doesn't show undesirable construction lines or artifacts. You can see an example of what not to do by opening the focus2_poor_opacity.swf animation from this book's website. Taking a little more care than you see in the poor-opacity example, we've created a simple UFO and named the corresponding Flash symbol ufo (pretty logical, huh?):

   

3. After you've designed the main character, you'll need to create an animation of that character showing a transition from a blurry state to a sharp state. Select Insert > New Symbol... (CTRL/CMD+F8) to create a new movie clip, and name it ufo_blur .

   

4. Within the ufo_blur movie clip, drag the ufo symbol from the Library (F11) onto the center of the stage. Give it an opacity of 15% by setting the Alpha value accordingly in the Property Inspector.

   

5. Create seven new layers in the timeline window. Remember, you're still within the timeline of the ufo_blur movie clip. Click on the single frame that you created on the first layer when you dragged the ufo movie clip onto the stage, and then select Edit > Copy Frames (CTRL+ALT+C/CMD+OPT+C). Paste this frame to the seven new layers (CTRL+ALT+V/CMD+OPT+V).

   

6. Create a keyframe ( Insert > Keyframe , or press F6) on frame 45 of each layer, and extend the animation to frame 60. Frame 45 is where the character will be sharp, or in focus, and it will remain in focus until the last frame. By clicking on the layer names, we've given them names that will be useful in the next step.

   

7. On frame 1 of each layer, you need to offset the UFO in eight different directions. Start by clicking the first frame of the first layer. Then use the arrow keys to nudge it over a little to the left. Next, click the frame 1 of the right layer and nudge that UFO a little to the right. Nudge the UFOs on the other layers (from top to bottom) upward, downward, left-upward, right-upward, left-downward, and right-downward. Don't worry about being too precise ”messing up a little probably won't hurt the overall effect. The completed blur effect should look something like this:

   

8. Click on frame 1 of each layer and then select Insert > Create Motion Tween (of course, you can also create the tween by selecting each frame and choosing Motion from the Tween option in the Property Inspector).

   

   You should now have a fairly convincing transition (from fuzzy to clear) as you move from frame 1 to frame 45. So let's now put this effect into context. Return to the main timeline and drag a copy of the ufo_blur symbol that you just created from the Library onto the stage. Position the UFO in its initial position in the upper left of the stage, and scale it so that it is relatively small. You can also add a more suitable background at this point. Check out the Martian landscape we've used in focus2.fla.

   

9. Next, add a keyframe (F6) on frame 45 and move the UFO to the position it will be in when it is hovering in front of you. Scale the UFO so that it is much bigger than it was on the first frame.

   

10. Add a keyframe on frame 55 and then another on frame 70. On frame 70, position the UFO slightly above the upper edge of the canvas.

11. Create a couple of motion tweens by selecting frames 1 and 55 and choosing Motion from the Tween option in the Property Inspector.

    

12. Finally, when you play the movie, the UFO will initially be fuzzy and then it will seem to sharpen as it approaches the plane of focus. This is essentially because you've synchronized the main timeline with the timeline of the ufo_blur movie clip. This movie clip becomes fully focused in frame 45, at which point it is also at the forefront of the main movie.

    In this example, you've used eight copies of the ufo to simulate a blur effect. Because doing tweens in Flash can be computationally expensive, you could apply this same technique to fewer instances of the UFO. In the next example, you will be working with more than one object, and you'll accomplish the blur effect with only four duplicates per object in order to keep the movie fast.