Animating Camera Moves
So far, you’ve learned to animate different properties of symbol instances on the Stage—their position, scale, rotation, transparency, filters, and 3D position.
However, as an animator, you’re not just directing the motion of your characters and objects on the Stage like a play. You’re also in control of the camera, making you more like the director of a movie. That means controlling where to point the camera to frame the action, zooming in or out, panning, or even rotating the camera for special effect. All of these camera movements are available in Animate with the Camera tool.
Enabling the camera
Enable the camera with the Camera tool in the Tools panel or with the Add/Remove Camera button below the Timeline. You’ll be animating the camera to simulate a zoom-out and a pan effect to focus on different parts of a larger static version of the movie opener that you worked on in this lesson.
Choose File/Open and navigate to Lesson04/04Start folder to open 04CameraStart.fla. This file is an ActionScript 3.0 document that is partially completed and contains the graphic elements already in place on the Stage. The Timeline contains added frames and a motion tween in the title layer.
Select the Camera tool on the Tools panel, or click Add Camera at the bottom of the Timeline.
A Camera layer is added to the top of your Timeline and becomes active. On the Stage, the camera controls appear.
)
)
)
Characteristics of the camera
The Camera layer operates a little differently than a normal layer in which you are accustomed to adding graphics.
The size of your Stage becomes the frame of your camera view.
You can only have one Camera layer, and it is always at the top of all your other layers.
You cannot rename the Camera layer.
You can’t add objects or draw in the Camera layer, but you can add classic or motion tweens to the layer, which allows you to animate the camera motion and camera filters.
When your Camera layer is active, you cannot move or edit objects in other layers. Disable the Camera layer by choosing your Selection tool, or by clicking the Remove Camera button at the bottom of the Timeline.
NOTE
Clicking the Remove Camera button at the bottom of the Timeline doesn’t actually delete your Camera layer; it only hides it from view. You can click the button again to restore the Camera layer. To delete the Camera layer entirely, select it and click the Delete button (trash can icon).
Zooming the camera
First, you’ll use the camera to zoom into a small part of the Stage to focus on the woman on the left. Your camera will initially hide a part of her face to create a little bit of mystery.
Make sure your Camera layer is active and the on-Stage controls are present. There are two modes on the controls, one for Rotate and another for Zoom. The Zoom mode should be highlighted.
Drag the slider to the right.
The Camera view zooms closer into the Stage.
When your slider reaches the edge of the slider, release your mouse.
The slider snaps back to the center, allowing you to continue dragging to the right to continue zooming.
You can also enter a numerical value for the zoom in the Properties panel in the Camera Properties section.
Continue zooming the camera until you’ve reached about 270%.
Your Stage shows a close-up view of the cityscape between the two main characters.
)
)
)
NOTE
When using the camera zoom mode, be aware of the image resolution. As with any bitmap, zooming in too dramatically will reveal the limitations of the original embedded image.
Moving the camera
You don’t want the camera to focus on the empty space between the two characters, so you’ll move the camera to focus on the woman.
With your pointer on the Stage, drag the camera to the left.
The contents of the Stage move to the right. It may feel a little counterintuitive, but remember, you’re moving the camera and not the contents of the Stage. So if you point your camera to the left, the objects in view will move to the right.
Continue dragging the camera to frame the woman so that she’s in the middle with her eyes cut off at the top edge of the camera.
)
Animating a pan
A pan is the motion of the camera left to right or up and down. In this next step, you’ll pan the camera slowly upward to reveal the woman’s face. You’ll use a motion tween to animate the camera movement.
On the Timeline, select any frame in the Camera layer and right-click. In the context menu that appears, choose Create Motion Tween.
A motion tween is added to the Camera layer, indicated by the blue-colored frames. You currently only have a single keyframe, so you’ll be adding additional keyframes further along the Timeline to complete the motion.
Move the playhead to frame 25.
With your pointer over the Stage, drag the camera upward to reveal the woman’s face. Hold down the Shift key to constrain the motion to a straight vertical line.
A new keyframe is established at frame 25, and Animate creates a smooth motion of the camera between the two keyframes.
Select Loop at the bottom of your Timeline and move the start marker to the first of the Camera layer keyframes and move the end marker a few frames beyond the second keyframe.
Press Enter/Return to preview the motion tween, which animates your camera panning upward to reveal the woman’s face.
)
)
)
)
)
Panning across the Stage
Your viewers now see this mystery woman, who is looking to her left. But who or what is she looking at? Next, you’ll animate the camera to pan across the Stage to reveal the target of her gaze.
On the Timeline, still in the Camera layer, create a keyframe (F6) at frame 40.
The camera will hold its position from frame 25 to frame 40.
Move the playhead to frame 70.
Hold down Shift and drag the camera to the right to reveal the man’s face.
A new keyframe is automatically created at frame 70 with the camera in its new position. The camera pans across the Stage from left to right between frames 40 and 70.
However, the man’s face isn’t completely in view. Next, you’ll zoom the camera out slightly and Animate will tween both the pan and the zoom together.
Drag the slider on the on-Stage camera control to the left to zoom out slightly.
The zoom positions the man’s face off-center, so you’ll have to adjust the framing slightly.
Drag the camera to re-center the man’s face.
Deselect the Loop option and preview your animation by pressing Enter/Return.
The Camera slowly pans upward on the woman’s face. It pauses a moment, and then pans to the right while slightly zooming out to show the man’s face.
)
)
)
)
)
Zooming out
To complete the animation, you’ll zoom the camera all the way out to reveal both characters and the whole Stage.
On the Timeline, create a keyframe (F6) at frame 90.
The camera will hold its position from frame 70 to frame 90.
Move the playhead to frame 140.
In the Properties panel, in the Camera Properties section, enter 100% for the Zoom.
Drag the camera on the Stage to re-center the view.
Preview the whole animation by pressing Enter/Return.
After the mystery man is revealed, the camera zooms out to show both characters, the cityscape, and the animation of the title fading into view.
)
)
NOTE
Although you only animated camera zoom and pans in this task, you can change and animate the rotation of the camera in much the same way with the Rotate on-Stage camera control or Rotate option in the Camera Properties section of the Properties panel.
Animating camera color effects
You can also apply and animate camera color effects to create a color tint or to change the contrast, saturation, brightness, or hue of the entire view on the Stage. In the next step, you’ll animate the camera to desaturate the view, emphasizing the film noir genre of this fictional movie promotion.
On the Timeline, create a keyframe (F6) at frame 160.
In the Properties panel in the Camera Color Effects section, select Adjust Color.
The Brightness, Contrast, Saturation, and Hue values appear, all of them with a value of 0.
Move the playhead to frame 190 and create a new keyframe (F6).
Change the Saturation to –100 by dragging on the value, or by double-clicking on the value and entering the number.
The view through the camera becomes desaturated and all the graphics on the Stage appear black and white. Animate creates a motion tween of the camera becoming more desaturated from frame 160 to frame 190.
)
)
)