In the previous chapter, we spent time working with the Asset Warp tool to establish mesh distortions while defining both hard and soft bones within Warped Objects for complex rigging and animation.
In this chapter, we will examine the Camera, Layer Depth, and Layer Effects. All of these features rely on Advanced Layers mode, which we first put to use in Chapter 7, Character Design through Layer Parenting. Using these features, we can create some pretty amazing parallax animations by making just a few alterations to the depth of our layers and by manipulating the document-level camera. In the following sections, we'll explore various properties and workflows associated with the camera and learn how to animate smoothly between various camera states. Once that has been covered, we'll learn how to apply filters, effects, and blend modes across entire layers within our animation.
After reading this chapter, you will learn the following:
You will need the following software and hardware to complete this chapter:
While we've done a lot of animation so far with individual layers and objects, the document-level camera in Animate allows us to achieve even more. We can use it to zoom, pan, and rotate the entire contents of the stage as though we are using a real camera on our animation. Not only that, but we can still layer and nest animated content as usual through the normal methods to create multiple levels of animation across any project.
One of the most common uses of the camera is to zoom in on a scene:
This can be an animated zoom or even a simple cut from one zoom level to another.
Note
The camera can only be used at the document level and not within individual symbol timelines.
We'll be using the camera in this chapter to add all sorts of interesting motion and effects to our content.
To make use of the camera right away, we have a starter project specifically for this chapter that you can use to follow along with as we go over the different concepts involved. You can always use your files if you wish to as these concepts can be applied to just about any content.
Note
You can find the starter file we are using here within the exercise files at https://github.com/PacktPublishing/Adobe-Animate-2022-for-Creative-Professionals-Second-Edition.
If you open CameraStarter.fla, you'll notice that the stage has been laid out, with several varied assets ready to go:
The scene is that of a vast desert with rolling sand dunes. Far away are a set of rocky outcroppings and a steep cliff face. The sky appears free of clouds and a strange haze hangs over the horizon. The view is expansive with no obstructions apart from the dunes themselves.
Set across the various dunes of sand are animated characters that have been brought into our project through the Assets panel. They are all symbol instances that contain internal animations with Graphic or Movie Clip behaviors.
Looking at the timeline, you will see that these various objects have been organized into layers according to how close or far away they are from the viewer:
These layers have a particular order to them, with the closer layers being toward the top of the layer stack and the layers that are more distant being closer to the bottom. At the very top of the stack is an empty Watermark layer, which we will use later to add some text to our animation. At the very bottom of the stack is the Sky layer, which contains the background sky elements.
In between these two are the layers that focus on scenic content. Most of them only contain various shapes that make up the levels of the sand dunes, but there are a few layers with additional character elements that you should take note of:
None of the layers include any motion. We are focusing on the camera in this chapter and will be using that mechanism alone to provide motion for our project, apart from any internal symbol animations.
Go ahead and click the Test Movie button to see the current state of the project. With only a single frame included as part of the main timeline, we only see movie clip symbol instances exhibiting any animation. Graphic symbol instances require additional frames to be in the main timeline for playback, so our graphic symbol instances only display a single frame, thus no animation. It's a fairly lifeless scene!
It doesn't have to stay that way, though. We'll explore how to activate and use the camera next.
To use the camera within our document, we must be using Advanced Layers mode, as described in Chapter 7, Character Design through Layer Parenting. This is the default layer mode within all recent versions of Animate, so you will not need to do anything to enable this mode. With the camera available, you must activate it to use it in your document, as the camera is not activated by default.
Note
The camera is not available in WebGL-based documents, including VR document types.
The camera can be activated by clicking the Add Camera button at the top of the timeline:
Once the camera has been activated within a document, the same control is switched to a Remove Camera button. When you're toggling this button to add or remove the camera, it is only activating or deactivating the camera. If you deactivate and then reactivate the camera at any time, all of your changes and settings will still be present!
Note
You can also activate the camera by selecting the Camera tool from the toolbar. You may need to edit the toolbar to be able to access this tool.
With the camera active, several changes across the Animate interface will become immediately apparent.
Across the timeline, a new Camera layer will be added at the very top of the layer stack:
This layer, indicated by a small camera icon and with the fixed layer name of Camera, is dedicated to the document Camera. The layer must exist at the very top of the stack and it cannot be moved. You also cannot add any content to this layer as it is meant to hold the camera; nothing else is allowed. In addition, the layer cannot be locked, have its visibility disabled, or be placed in outline mode as normal layers can.
You'll notice that a new icon has been added to the timeline that appears as a small camera with a chainlink attached. We'll see what this option does shortly.
Another big change to the interface occurs on the stage. A control overlay appears over the stage's content, toward the bottom:
The camera overlay includes a slider for either zooming in/out or rotating the camera. This mode can be changed by activating either the rotation or zoom options, which appear to the left of the overlay. Moving the slider to either side will adjust the selected property and snap it back to the center once released, allowing for additional adjustments.
In addition to the overlay, if you hover over the stage, you will see the cursor change to indicate the ability to pan the camera. If you click and drag anywhere on the stage with this icon visible, you can pan the camera.
Tip
When you pan the camera, the actual view moves the opposite way to the camera's pan direction. This may feel a bit odd at first but try to imagine you are actually moving a camera and not moving the stage content and it will likely feel more natural.
With the camera activated and the Camera tool selected, we can view the various properties associated with it in the Tool tab of the Properties panel:
The Camera properties entail everything you'd expect from a virtual camera. The settings include X/Y position, zoom, and rotation values. Each of these properties can be set in either the overlay controls or through the Properties panel. Setting them this way is more precise, and each setting includes a button for quickly resetting each property to its default.
Note
There are also color effects and filters that can be set within the Camera properties, but these are only available when you're using an ActionScript 3.0-based document.
It is also important to mention that these property settings are bound to keyframes across the timeline. So, if you want to change a camera property at any point, you can simply insert a new keyframe and make adjustments through the overlay controls or the Properties panel – whichever works best for your current task.
In this section, we looked at the starter document and learned how to activate the camera and make adjustments to its properties. Next, we'll look at the layer depth settings and prepare our starter document to make use of this feature.
In this section, we are going to learn how to manipulate the depth of layers within an Animate project. While panning and zooming the camera can be very effective, we can enhance everything we do with the camera by using another feature of Advanced Layers mode in the form of Layer Depth. This feature allows us to place specific layers closer or farther from each other and the camera to simulate a difference of depth across each. The result is that as the camera changes property setting values across time, the view shifts across the variety of depth settings, providing a feeling of enhanced immersion.
Let's explore the mechanism that allows us to adjust the depth settings of our various layers. Then, we'll use it to modify the depth of the layers that are currently within our project.
By default, the Layer Depth panel is visible in the Essentials workspace area, minimized to the icon view along the right-side column, along with several additional panels. It can be difficult to locate this way. You can also invoke the Layer Depth panel by choosing Window | Layer Depth from the application menu, but a more direct method is to invoke it from the timeline itself.
The simplest way to invoke the Layer Depth panel is to click the Toggle Layer Depth button at the top of the timeline:
Wherever the Layer Depth panel resides, it will then appear and allow us to visualize and manipulate the depth settings of our various layers.
Let's have a look at some of the features of the Layer Depth panel to become more familiar with its layout and function:
With the Layer Depth panel open, you can view the current depth setting for each layer and even visualize how close or far layers are from one another with the current settings. Since we haven't made any alterations yet, all the layers have a depth of 0 and are equidistant from the camera itself.
Within the Layer Depth panel, there are several important things to note:
All of these settings can be manipulated within the Layer Depth panel, but we should also keep a close eye on both the timeline and the stage as we do so. It will be easy to spot mistakes as changes are immediately reflected within the stage.
Tip
Normally, you need to click the Maintain size button each time you want to change the layer's depth. This can become tedious. If you hold down the Alt or Option key while dragging the layer depth values, Animate will maintain the size of the layer without needing to interact with the button each time.
With that, we have provided an overview of the Layer Depth panel. Next, we'll learn how to use the various settings within it to modify the depth of our layers across the timeline.
While you can make adjustments to the depth of a layer at any time, it is best to do so before making any adjustments to the camera settings. As we're working through these concepts, have you noticed how we haven't done any work with the camera yet aside from exploring its various settings? This is because we want to establish the initial layer depth settings first. With the Layer Depth panel open, let's go ahead and assign a depth setting to each layer. Using the panel controls, there are two different ways of setting the depth of any layer.
The first way to adjust the layer's depth is to either manually enter a number into the value field beside the layer's name, or simply drag the value to either increase or decrease it:
When making slight adjustments, dragging across the value field works well to nudge the layer, but if you're changing the depth by a larger number, you will likely want to simply click the value and type a new one in manually.
The second method of adjusting the layer's depth values is to do so visually, by selecting a layer and dragging the highlighted layer marker up or down:
You can keep an eye on the value that's been attributed to the selected layer to monitor its actual depth setting.
Positive numbers indicate that the layer is far from the normal field of view and more distant, while negative numbers indicate that the layer sits between the normal field of view and the camera's position. If the layer is set to a depth that is behind the camera, as indicated by the blue dot intersected with dashed lines, then that layer is no longer in view at all as it is behind the camera.
Tip
If you have layers arranged as part of a layer folder, the folder will appear within the Layer Depth panel as well, allowing you to modify the depth of all the contained layers simultaneously.
Let's set our layer depth values from top to bottom:
Your completed depth settings within the Layer Depth panel should look like this:
Notice that in our example, the layer's order in the timeline and the Layer Depth stacking order both share the same general order. They do not have to, though, as Layer Depth overrides the normal layer order in the timeline. We will see an example of this shortly.
A good way to see the effect that these depth settings have on our layers is to use the camera to pan around the stage:
You will see the various layers all moving at different speeds, depending on how far or close they are. Once you have finished playing around with the camera, be sure to reset any of the values to their defaults.
With that, we have set up all our layers in this project to utilize the layer depth settings, along with the camera. We can also modify the depth of the layers across time without using the camera to create additional effects. We'll have a look at that workflow next.
As alluded to earlier in the chapter, you don't have to enable the camera to use Layer Depth, and you don't have to have the layers in any proper order either since the depth setting overrides the layer order.
Take a look at the exercise file named NoCameraDepth.fla for a quick example of this:
In this example, we have two objects on the stage: a rocket ship and a moon. In the timeline, there is a layer for each of these objects and the rocket is animated in such a way that it travels behind the moon first and then returns to pass in front of it.
The Rocket Ship layer is always above the Moon layer, though, so how does the rocket pass behind the moon at all? Via the Layer Depth settings, of course!
Notice that the Moon layer isn't animated at all but includes two keyframes along the timeline:
At frame 1, the Moon depth value is set to -10, while the Rocket Ship depth is set to 0. This brings the moon closer to the viewer than the rocket. At frame 36, both layers have a depth of 0 and since their timeline order has the Rocket Ship layer above the Moon layer, the rocket is visible above the moon. This technique can be used in many cases to swap depths across time for similar effects.
In this section, we explored the fundamental properties of the camera and explored how to manipulate the Layer Depth settings in a variety of ways. Next, we'll put all of this into practice as we create different camera states and animate between them.
The camera is integrated into the timeline just like any other object in Animate, with certain restrictions. For instance, it is contained within its own layer and this special layer does not behave as the other layers do. However, certain aspects of a normal layer workflow precipitate onto the Camera layer as well. Primary among these is how motion is handled.
In this section, we'll establish camera states through keyframes and animate between these states using the techniques we've already addressed in this book.
As the document exists now, we have a single frame across all layers. To have any actual motion occur, camera-based or otherwise, we need additional layers.
First, be sure to lock all the existing layers. It's a good habit to lock and unlock specific layers as needed. The Camera layer can never be locked. Add frames up to and including frame 540 across all of the layers, including the Camera layer.
We now have 18 seconds of total frames across all layers:
With our frame spans fully extended, we'll add keyframes at specific points along the Camera layer and make adjustments to the Camera properties, such as zoom and pan. It is best to set the zoom value first, followed by the panning adjustments.
Let's plot out the keyframes to signify specific key points across the animation:
The focus for this keyframe is on the Complainer animation:
This will focus the camera on the Boy with Flower Monster animation:
This will zoom out somewhat and reposition the camera to focus on the Cat Fight animation:
From the Cat Fight animation, we'll pan up and zoom toward the base of the craggy cliff face in the distance.
You will begin to notice that the more extreme the zoom becomes, the more variable the numbers you input will be. Don't worry if Animate changes the values by a few units each time you change the camera settings – this is expected.
Notice that we've zoomed in a huge amount and can see all the details of the cliff, such as the tree and stone present there. At 100% zoom, this is almost impossible to see:
If we play our project at this point, it will consist of a collection of quick cuts as each keyframe is encountered. While a jumpcut like this can work in certain scenarios, we require a smoother motion from keyframe to keyframe.
Now that we have keyframes across the Camera layer holding specific camera settings at each, we can add tweens and eases to establish smooth motion between them.
Motion can be applied to the Camera layer by using either motion tweens or classic tweens. We will be using classic tweens in this project since it is simpler to plot out camera settings in keyframes beforehand and the ease effect presets can be interpreted and applied easily.
Tip
To achieve believable, smooth camera movement, Ease Effect presets are a must!
Our Camera layer currently contains keyframes for each camera state. Certain frame spans are meant to hold the camera at a specific position and zoom level, while others are meant to contain movement from one keyframe to the next. We will be adding classic tweens and ease effect presets to those that are intended to feature camera movement.
Additionally, following the focus on certain character animations, we will insert keyframes into the layers that contain them and remove the characters from the stage. This will be good practice for toggling the camera off and on to best select each character for removal.
For each of the following frame spans, add a classic tween and the indicated ease effect preset:
Once you've done this, your timeline should look similar to the following:
Note that the frame spans of the Camera layer that are meant to serve as a motion hold do not contain tweens and certain additional layers include keyframes to remove characters following their focus.
The bulk of our camera animation is now complete. Perform a test movie to see it in action!
As you may recall, we still have an empty layer right below the Camera layer named Watermark. This layer will be used to display a small, text-based #AdobeAnimate hashtag identifying the animation as having been created in Adobe Animate.
Let's create this text object now:
Be sure to choose Static Text from the dropdown. We'll explore additional text options, including the use of dynamic text, in Chapter 11, Developing Web-Based Games, and Chapter 13, Building Apps for Desktop and Mobile.
We want the text to stay exactly where it is, no matter what the camera does. To do this, we have to attach the layer the text exists within to the camera. This will have the layer ignore anything to do with the Camera layer and its various settings.
Playing the project now will exhibit completely different behavior when it comes to our text overlay. It stays put throughout the animation, unaffected by the camera.
In this section, we looked at establishing camera states and animating the camera across the timeline. We also spent a good deal of time adjusting our tweens and additional layer frame properties to achieve an interesting, dynamic animation, using nothing but the Camera and Layer Depth settings. Next, we'll finish this animation by adding some camera effects and layer filters.
Another advantage of Advanced Layers mode is that you can have effects and filters applied directly to a layer, which, in turn, affects all the objects within that layer without you having to modify the objects themselves. You can also add effects directly to the camera in a similar way.
Note
Layer effects, filters, and camera effects are all only available when you're using ActionScript 3.0-based document types.
We are going to add some effects to the camera to simulate a fade in/fade out to black and add a filter to our Watermark layer to add some drop shadow to the text within it.
The camera effects and layer effects both work very similarly, with the only difference being that camera effects are applied via the Camera tool properties and the layer effects are applied through the Frame properties.
Let's add both a fade in and a fade out to our Camera layer:
The entire stage will go black except for any of the layers attached to the camera. This is the first step in creating a fade in from black.
If you preview the animation, you'll see that the movie begins by quickly fading in from black, proceeds as normal, and then fades out to black before completion.
In the next section, we'll finish this project by adding a layer filter to the Watermark layer.
Layer filters and layer effects are both added through the Frame tab of the Properties panel. We want to have our text within the Watermark layer pop out against the background. So, for this, we will add a drop shadow to the entire layer via the Filters section of the Properties panel.
To add a filter to the Watermark layer, perform the following steps:
At this point, you can modify any of the settings of this filter. The filter's settings will differ between each filter type, but for any that allow a Quality selection, I normally choose Medium.
Looking at the timeline, notice that the keyframes within the Watermark layer now appear white instead of black as they normally do. A white keyframe indicates that a filter or effect has been added to that layer.
In this section, we looked at how to add effects to the camera that affect all the layers and filters for individual layer effects. Both of these features are available as part of Advanced Layers mode and help us perfect our overall animation.
In this chapter, we learned how to animate an entire project by using the document's Camera, without that content itself being animated within the main timeline. We also explored how to manipulate layer depth and learned how to work with both the camera and layer depth to create some amazing dynamic parallax movement within our animation. We wrapped everything up by implementing both camera effects and layer filters to add a feel of completion to our animation.
In the next chapter, we'll begin working with additional platforms and have a look at writing JavaScript code to target HTML5 Canvas in the form of a simple web-based game.