Understanding the project file

Your 07_workingcopy.fla project file includes three animated layers—earth, juno, and jupiter—containing classic tweens with a motion guide layer for each. The motion guides keep the animation on track. Remember that the motion guides for classic tweens are not visible when the animation is published, so to show the orbits of the planets and the trajectory of Juno, the guides have been duplicated in the layers called orbits and juno_trajectory. The bottom layer, called sun, contains the sun in the middle of the solar system.

Enabling the camera

Enable the camera with the Camera tool in the Tools panel (it may be hidden in the Drag And Drop Tools panel) or by clicking the Add/Remove Camera button at the top of the Timeline panel.

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 from a normal layer to which you add graphics:

• The size of your Stage becomes the frame of your camera view.

• You can have only one Camera layer, and it is always at the top of all your other layers.

• You cannot rename the Camera layer.

• You cannot 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 the Camera tool is selected, you cannot move or edit objects in other layers. Disable the camera by selecting the Selection tool or by clicking the Remove Camera button at the top of the Timeline panel.

Setting the camera frame

First you’ll use the camera to frame just a small part of the solar system to focus on the beginning of the action: the launch of Juno from Earth.

1. Make sure your Camera tool is active and that the on-Stage controls are present. There are buttons for two modes on the controls: one for Rotate and another for Zoom. The Zoom mode should be highlighted.

   Tip

   Clicking the Remove Camera button at the top of the Timeline panel doesn’t actually delete your Camera layer; it only disables it. 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).

   

2. Drag the slider to the right.

   The camera view zooms closer into the Stage.

3. When your slider reaches the edge of the camera control, release your mouse button.

   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’s Camera Settings section.

   

4. Continue zooming the camera until you’ve reached about 260%.

   

5. Now drag your camera so that the sun in the middle of the solar system is more or less centered in the Stage, with many of the orbits in view. The Properties panel should display an X value of about –309 and a Y value of about 221.

   Note

   When using the camera’s 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.

   

   It may seem backward to see the objects on the Stage move in the opposite direction that you drag, but remember that you’re moving the camera and not the objects.

   As you scrub the timeline to see the animation, notice that your point of view is now closer into the action.

Animating a zoom-out

Since your camera is zoomed in on Earth, you can more easily see the launch of the Juno spacecraft. However, at about frame 60, Juno leaves the Stage boundaries. You’ll want to zoom the camera out to keep the spacecraft in view. For this lesson, disable the Auto Keyframe option on the timeline. You will be inserting all your keyframes manually.

1. Select frame 24 on the Camera layer.

   

2. Insert a new keyframe (F6) at frame 24.

   

   You’ll keep the camera in the zoomed-in position from frame 1 to frame 24 and then begin to animate the camera motion from frame 24.

3. Select the keyframe you just created on frame 24 on the Camera layer, and choose Create Motion Tween above the timeline.

   

   A motion tween is applied starting at frame 24, indicated by the gold tween span on the Camera layer.

   

4. Move the playhead to frame 72.

5. Drag the camera zoom slider on the Stage to the left to zoom out and see more of the solar system. The Zoom percentage in the Properties panel should be about 170%.

   

   Move the camera so that Juno remains roughly in the center of the Stage. The camera position should be close to X=20 and Y=90.

   

   A keyframe is automatically created at frame 72 with the new zoom value and position for the camera.

   

6. Scrub the timeline between frames 24 and 72 to see the animated zoom.

   As Juno moves farther away from Earth, the camera zooms out to keep it in the frame.

Animating a pan

A pan is the motion of the camera side to side or up and down. You’ll pan the camera slowly from left to right to follow the motion of the Juno spacecraft.

1. Move the playhead on the timeline to frame 160.

   At this point in time, you’ll create another keyframe that establishes a new position for the camera.

2. Move the camera on the Stage to the right. Hold down the Shift key to constrain the movement to the horizontal direction only. You can also just drag the X value in the Properties panel to change the horizontal position to about –250.

   

   The spacecraft should remain roughly at the center of the frame.

   

3. A new keyframe is automatically created at frame 160.

   

4. Press Return (macOS) or Enter (Windows) to preview the motion tween, which animates your camera zooming out from frames 24 to 72 and then panning from left to right from frames 72 to 160, tracking the spacecraft.

Animating a zoom-in

A crucial part of this animation is when Juno does a flyby of Earth, using its gravity as a slingshot to get a boost to Jupiter. You’ll zoom in closer to show how the spacecraft approaches Earth.

1. Right-click frame 160 and choose Insert Keyframe > All.

   

   Inserting a keyframe for all the camera properties at frame 160 ensures that any future changes in zoom, position, or rotation occur from frame 160 and not from an earlier point on the timeline.

2. Move the playhead on the timeline to frame 190.

   At this point in time, Juno is at its closest to Earth.

3. Zoom and move the camera on the Stage so that Earth and Juno are close up and nearly centered. The Zoom value should be about 760%, and the Position should be about X=–1309 and Y=767.

   

   A new keyframe is automatically created at frame 190.

4. Move the playhead to the start of the timeline at frame 1 and press Return/Enter to preview the motion tween.

   From frame 160 to frame 190, the camera does a dramatic zoom in as Juno flies toward Earth.

Animating a rotation

Rotating the camera is unusual, but in some cases, the motion can be quite dramatic and effective. In this project, rotating the camera will intensify the feeling of flying right next to the spacecraft as it approaches Earth.

1. Make sure the playhead on the timeline is still on frame 190.

2. Click the Rotate button on the camera slider.

   

3. Drag the camera slider to the right so that the camera rotates clockwise (and the objects in view rotate counterclockwise).

   The Rotation value should be about –39 degrees.

4. Change the camera option back to the Zoom option and move the camera so that the spacecraft behind Earth is roughly in the center.

   

5. Preview the animation by pressing Return/Enter or by scrubbing the timeline.

   The dramatic flyby of Earth by Juno is captured by the camera zooming in and rotating to be close to the action.

Finishing the camera moves

After the Earth flyby, Juno continues its trajectory toward Jupiter. You’ll animate the camera to frame the rest of its journey with additional zooms, rotations, and pans.

1. Move the playhead to frame 215 and click the Camera frame on the Stage.

2. Reset the rotation value of the camera to 0 degrees by entering 0 for the Rotation value in the Properties panel or by clicking the Reset Camera Rotation button in front of the Rotate label.

   

   The camera view tilts back to its default angle.

3. Move the camera so that Earth and Juno are at about the center.

   

4. Now move the playhead to frame 228.

   Juno is moving farther out from the inner solar system, so you’ll need to keep backing up the camera.

5. Change the Zoom value to about 90%. Move the camera so that most of the solar system, including Jupiter’s orbit, is in view.

   

6. Select frame 480. Right-click and choose Insert Keyframe > All to create a new keyframe.

   Your final camera move is to zoom in to Juno’s approach to Jupiter, so you have to create a beginning keyframe to establish the beginning values for the camera’s zoom, position, and rotation.

   

7. Zoom in for a close-up of Jupiter. The Zoom value of the camera should be about 1400%.

8. Move the camera to keep Jupiter and Juno in the frame.

   

9. Preview the entire animation by choosing Control > Test.

   Tip

   When you zoom in too far all at once, you may lose sight of your graphics and may have trouble putting them back into the camera frame. It’s best to zoom a little bit at a time, and to move the camera to keep the graphics that you want to zoom in on within the frame.

   Animate exports the animation as a SWF in a new window. The animation plays with camera pans, zooms, and rotations that closely follow Juno’s journey from Earth to Jupiter.

   

Camera easing, the Motion Editor, and motion paths

Animating the camera is just like animating any other object on the Stage with motion tweening or with classic tweening. As with motion tweening and classic tweening, you can also apply eases to the camera motion to make any of your pans, zooms, and rotations ease in or ease out for a more natural movement. If you’re using motion tweening, you can even access the Motion Editor (see Lesson 6, “Animating Symbols with Motion Tweens”) by double-clicking the tween span (or by right-clicking the span and choosing Refine Motion Tween) in the Camera layer to apply a complex ease or to customize the property curve. The following figure shows the Motion Editor for the camera moves that you just completed.

However, not all features of motion tweening or classic tweening are available to the camera. You cannot animate the camera on a path. If you use classic tweens, you can’t add a motion guide to the Camera layer for your camera to follow. If you use motion tweens, there is no path on the Stage for you to edit.

Creating depth

When you move a camera to film a scene in real life, you get a sense of depth because foreground elements move across the frame a little quicker than background elements. This is called a parallax effect. This is the effect you see when you look out the window of a moving car: closer objects zip past your window, whereas distant objects move very slowly.

Animate offers the ability to create the same sense of depth when you animate camera moves using the Layer Depth panel. The Layer Depth panel allows you to set a layer’s z-depth, which is its distance from the Camera layer.

By default, all layers have a z-depth value of 0, which means they all are the same distance from the camera. Camera movements do not show a sense of depth, and the overall effect is as if the camera were panning across or zooming into or out of a flat picture. The picture moves or gets bigger or smaller, but there is no differential movement of separate layers.

Adding layers of stars

In the following tasks, you’ll enhance the animation of Juno’s journey to Jupiter by creating a sense of depth. You’ll also add a few layers of stars and position them at different z-depth distances, which will enhance the vastness of space.

1. Add a new layer in your timeline and move it to the bottom of the layer stack.

2. Rename the layer stars1.

   

   The stars1 layer will contain the first layer of stars.

3. In the Library panel, drag the graphic symbol called stars1 from the library onto the Stage.

   

   The graphic is simply a collection of gray and white dots randomly scattered over a large area. Don’t worry too much about precise placement; using the Selection tool, just position the instance to cover most of the solar system and a little of the space on the left, since that’s where the camera moves.

   It might be helpful to change the Stage view magnification level so that you can see more of the graphics that may be off the Stage (and out of the camera view).

4. Add a layer called stars2 below stars1, and add an instance of the stars1 graphic symbol in that layer.

5. Use the Free Transform tool to rotate the instance 180 degrees so that the stars in this layer don’t align exactly with the stars in the stars1 layer. Again, make sure the stars cover most of the solar system.

   

6. Add a third layer of stars, called stars3, below all the others, and add an instance of the stars1 graphic symbol in that layer.

7. Use the Free Transform tool to rotate the instance about 55 degrees so that the stars in this bottommost layer don’t align exactly with the stars in the layer above it.

   

8. Select the first keyframe of the stars3 layer, and in the Properties panel, change the Color Effect so that the Brightness value is at –60%.

   The stars in that layer become slightly dimmer, which will reinforce the sense of distance.

   

9. Preview your animation by pressing the Return/Enter key.

   Although the stars add a nice touch of realism to the highly diagrammatic solar system, the stars are still flat and don’t move with any parallax effect. You’ll change that next with the Layer Depth panel.

Setting the z-depth in the Layer Depth panel

The Layer Depth panel manages the distances of each layer from the Camera layer.

1. In the Timeline panel, click the Layer Depth button, or choose Window > Layer Depth.

   

   The Layer Depth panel appears, showing all the layers in the order in which they appear in the timeline. Next to each layer is a 0, indicating its current z-depth value. Next to the z-depth value is a color that is coded to the depth diagram on the right of the panel (which is also the color selection in your Layer Properties preferences).

   

   Since all the layers are currently at a z-depth of 0, they are at the same depth level, and they lie at the same plane as the camera frame.

   The camera is indicated by the ball with the dotted lines radiating from it. The flat blue line attached to the dotted diagonal lines shows the camera’s field of view.

2. Make sure your view of the Stage is at 100% (View > Magnification > 100%). In the Layer Depth panel, drag to the right on the z-depth value for the stars3 layer to increase it to 500. You can also click the value to enter a numeric value, or you can drag the corresponding colored line.

   

   Notice the effect of the stars1 graphic on the Stage as you change the z-depth value. As the z-depth increases, the layer’s distance from the camera increases and the stars recede on the Stage. If you drag the opposite way, you can decrease the z-depth into negative values and you can make the layer appear behind the camera (try it out!).

3. The problem with changing the distance of the stars3 layer is that the graphics in that layer get small—sometimes too small for your animation. You can use the Maintain Size option to prevent your graphics from changing size as you change the layer distance. Move the z-depth value for the stars3 layer back to 0.

4. Now click the Maintain Size option in the Layer Depth panel to select it.

   

5. Drag the z-depth value for the stars3 layer to increase it to 500.

   Notice how the size of the stars remains constant. The Maintain Size option must be clicked before every z-depth change, so if you drag the stars3 layer z-depth value three times to get to 500, make sure you click the Maintain Size option three times.

6. Click the Maintain Size option and set the z-depth value for the stars2 layer to 300 and the z-depth value for the stars1 layer to 150.

   

   The diagram on the right in the panel indicates the positions of the three layers relative to the camera and the other layers (which remain at a z-depth value of 0). The bold highlighted layer in the diagram is the layer that is currently selected.

7. That’s all you have to do! Close the Layer Depth panel. Preview the effects of setting your last three layers farther behind the others.

   Tip

   To maintain your sanity, it’s best to keep your layers’ order and their z-depth order the same. As you may have noticed, you could change the z-depth value of a top layer so that it is actually farthest from the camera and, hence, won’t overlap graphics in the other layers. This can get very confusing. So you should maintain the same overlapping order of your layers in the Timeline panel as you do in the Layer Depth panel. Change the z-depth values just to change the different spacing between layers.

   The parallax effect due to the motion of the camera over layers at varying depth levels is most noticeable if you scrub the timeline between frames 72 and 160. That’s when the camera is panning from left to right, tracking Juno. You see the orbits sliding by faster than some of the stars, which are sliding by faster than the more distant stars. The overall effect is a realistic sense of space.

Attaching a layer to the Camera layer

The attached layer is an option in the Layer Properties dialog box. You can also attach a layer by selecting the Attach Layer To Camera option in the timeline.

1. Create a new layer, drag it to the bottom of the layer stack, and rename it information.

   This new layer will contain the captions that appear at various points along your animation.

   

2. Click next to the layer name under the Attach All Layers To Camera icon in the timeline.

   A chain-link icon indicates that the layer is currently locked to the Camera layer.

   

3. Double-click the layer icon in front of its name, or choose Modify > Timeline > Layer Properties.

4. The Layer Properties dialog box appears. Confirm that the Attach To Camera option is selected, and click OK to close the dialog box.

   

Adding the captions

Now you’ll add the information for the animation in keyframes along the timeline.

1. Add about 2 seconds’ worth of time (48 frames) at frame 1 before the animation begins (F5). The easiest way to do this is to drag-select frame 1 in all the layers and then press F5 (add frames) 47 times to add 2 seconds of time before the tweens in the earth, juno, and jupiter layers.

   

   The slight pause before the animation begins will give your audience a chance to read the first caption.

2. Select frame 1 of the information layer.

3. Select the Rectangle tool. Choose None for the Stroke Color and a 50% transparent white for the Fill Color.

4. Create a long rectangle from the upper-left corner about 700 pixels wide and 50 pixels high. The Position for your rectangle should be X=0 and Y=0.

   The semitransparent rectangle will be the box for your text.

   

5. Select the Text tool and choose Static Text in the Properties panel.

6. Choose a font that appeals to you by choosing from the Family and Style menus in the Character section of the Properties panel. Make the size 28 points (but note that you may have to increase or decrease the size depending on your font) and the color black. Click the Format: Align Center button in the Paragraph section.

7. Making sure Opacity is set to 100, drag out a text box over the semitransparent white rectangle in your information layer.

8. Type Juno’s journey to Jupiter begins and use the Align panel to center the text over the box horizontally and vertically (see Lesson 2 if you don’t remember how to use the Align panel).

   The first caption is complete.

   

9. You’ll make the first caption disappear before the next one appears, so at frame 90 in the information layer, right-click and choose Insert Blank Keyframe (F7).

   A blank keyframe appears at frame 90, and the caption disappears from the Stage.

10. The second caption appears as Juno doubles back toward Earth, so create another keyframe at frame 118.

11. Copy your text and semitransparent rectangle from frame 1 and paste them into this new keyframe at frame 118.

    

12. Change the contents of the text to read Juno heads back to Earth.

    

13. Continue in a similar manner to add the third caption. The second caption should disappear at about frame 192, with the third caption appearing at frame 236. The third caption should read Juno uses Earth’s gravity as a slingshot. The third caption should disappear at frame 336. Feel free to play around with the timing and positioning of the caption!

    

14. The final caption, which should appear at about frame 454 as the camera zooms into Jupiter, should read Juno arrives at Jupiter 5 years later.

    Note

    You can still change the z-depth value of a layer that is attached to the Camera layer.

    

    Note

    You can have more than one layer attached to the Camera layer.

15. Move the information layer higher in your layer stack just below the Camera layer so that the captions overlap all the other graphics.

16. Test your movie.

    As the animation plays, your captions appear one by one. Since the information layer is attached to the Camera layer, the rotations, pans, and zooms do not affect the contents of the layer.

Camera color effects

You can also apply and animate camera color effects to create a color tint and to change the contrast, saturation, brightness, and hue of the entire view on the Stage. The effect simulates a filter that a cameraperson might put on a lens to heighten certain colors for a mood or to create a black-and-white film noir feeling.

To apply a color effect, select a keyframe in your Camera layer and choose the Tool tab in the Properties panel. Expand the Color Effects section and choose Tint. Select the color of the tint or change the Red, Green, and Blue values individually, and then change the value of the Tint to set the amount. A value of 100 is the maximum.

For example, you could apply a sepia tint like this one to your camera to simulate an old-fashioned, aged film reel.

The color effects are applied to each keyframe of the Camera layer. In this project, since you’ve already animated your camera (and the Camera layer contains multiple keyframes), you would have to apply a color effect to each new keyframe if you want the effect to be consistent throughout the movie.