Layer depth and Camera Z-depth

Create a parallax effect for your animations easily with Camera by using layer depth feature.

In this release, you can create animations involving multiple objects across different depths. Add parallax effect to the animations with Camera tool. Previously, Animators had to create parallax effect by guessing the size of the objects when they are near or far from the Camera tool. 

In June 2017 release, this feature is available on ActionScript 3.0 and WebGL platforms in Animate. 

Layer depth

An Animate designer can place the layers in different planes creating the illusion of depth. Earlier, the layers in an Animate composition used to exist on the same plane. 

You can dynamically change depths of layers using the Layer Depth panel. To use layer depth, click Window > Layer Depth

Open layer depth panel
Open layer depth panel

As shown in the above screenshot, the layer depth values are displayed next to each layer name for a given frame.

  • Hover the mouse on each value, click, and drag slider to your right or left.
  • To increase the depth, drag slider to your left and to decrease the depth, drag slider to your right. 
  • You can use negative values to represent objects that are closer and positive values to represent far-away objects.

Each layer is represented with unique colored lines in layer depth dialog. You can view the colors representing each of the layers at Timeline window. 

You can also increase or decrease the depth of objects in each layer by moving the multi-colored lines up or down.

  • To increase depth of objects in a layer, move the line in upward direction.
  • To decrease depth of objects in a layer, move the line in downward direction.

You can view before and after effects of Layer depth feature in the following illustration: 

Content without Layer Depth

Content with Layer Depth

Maintain size for layer depth

You can change layer depth of objects without affecting the size of objects at the stage. To enable this feature, click the Maintain size button at the upper-right corner of the Layer Depth panel.

You can use maintain size option in two modes:

  • Click Maintain size button and modify the layer depth of the desired layer. Maintain Size button toggles up automatically.
  • Press and hold the Alt key to temporarily enable Maintain size option while dragging the layer depth values.
Maintain size for layer depth
Maintain size for layer depth

You can set the minimum and maximum values of layer depth within -5000 to 10000 range. 

Parallax effect with Camera Z-depth

You can create parallax effect for objects with Camera by using layer depth feature.

  1. Create multiple objects on different layers in Animate. 

  2. Add different layer depths to each of the objects.

  3. Click the Camera tool and pan the camera on objects.

The objects closer to the camera and the objects that are far behind move at different speeds creating a parallax effect.

You can view the depth and perspective of objects with this effect.

  • The objects that are closer to the camera move faster than the objects that are far-away from the camera.
  • Objects closer to the Camera possess high negative layer depth values and objects far-away from the Camera possess high positive layer depth values.

 The size of the object remains unchanged while changing the depth. This feature enables you to position the objects in the right order and then use the Camera pan to simulate a parallax effect.


Get help faster and easier

New user?