Create timeline layers with Animate

Layers enable you to organize the artwork in your document. You can draw and edit objects on one layer without affecting objects on another layer. In areas of the Stage with nothing on a layer, you can see through it to the layers below.

To draw, paint, or otherwise modify a layer or folder, select the layer in the timeline to make it active. A pencil icon next to a layer or folder name in the timeline indicates that the layer or folder is active. Only one layer can be active at a time (although more than one layer can be selected at a time).

When you create an Animate document, it contains only one layer. To organize the artwork, animation, and other elements in your document, add more layers. You can also hide, lock, or rearrange layers. The number of layers you can create is limited only by your computer’s memory. Layers do not increase the file size of your published SWF file. Only the objects you place into layers add to the file size.

To organize and manage layers, create layer folders and place layers in them. You can expand or collapse layer folders in the timeline without affecting what you see on the stage. Use separate layers or folders for sound files, ActionScript, frame labels, and frame comments. Using separate layers helps you find these items quickly to edit them.

To enable creating sophisticated effects, use special guide layers to make drawing and editing easier, and to make mask layers.

There are five types of layers you can use in Animate:

• Normal layers contain most of the artwork in an fla file.

• Mask layers contain objects used as masks to hide selected portions of layers below them. For more information, see Using mask layers.

• Masked layers are layers beneath a mask layer that you associate with the mask layer. Only the portion of the masked layer revealed by the mask is visible. For more information, see Using mask layers.

• Guide layers contain strokes that can be used to guide the arrangement of objects on other layers. Also, you can use to guide the motion of classic tween animations on other layers. For more information, see Guide layers and Create classic tween motion along a path.

• Guided layers are layers associated with a guide layer. The objects on the guided layer can be arranged or animated along the strokes on the guide layer. Guided layers can contain static artwork and classic tweens, but not motion tweens.

• Motion Tween layers contain objects animated with motion tweens. For more information, see About tweened animation.

• Armature layers contain objects with inverse kinematics bones attached. For more information, see Using the Bone Tool for inverse kinematics animation.

Normal, Mask, Masked, and Guide layers can contain motion tweens or inverse kinematic bones. When these items are present in one of these layers, there are limitations to the types of content that can be added to the layer. For more information, see Motion tweens and Using the Bone Tool for inverse kinematics animation.

Creating a layer

When you create a layer, it appears above the selected layer. The newly added layer becomes the active layer.

Creating a layer folder

Organizing layers and layer folders

To organize your document, rearrange layers and folders in the Timeline.

Layer folders organize your workflow by letting you place layers in a tree structure. To see the layers a folder contains without affecting which layers are visible on the Stage, expand or collapse the folder. Folders can contain both layers and other folders, allowing you to organize layers in much the same way you organize files on your computer.

The layer controls in the timeline affect all layers within a folder. For example, locking a layer folder locks all layers within that folder.

• To move a layer or layer folder into a layer folder, drag the layer or layer folder name to the destination layer folder name.
• To change the order of layers or folders, drag one or more layers or folders in the Timeline to the desired position.
• To expand or collapse a folder, click the triangle to the left of the folder name.
• To expand or collapse all folders, right-click (Windows) or control+click (Macintosh) and select Expand All Folders or Collapse All Folders.

Renaming a layer or folder

By default, Animate assigns names to new layers by the order in which they are created: Layer 1, Layer 2, and so on. To better reflect their contents, rename layers.

Selecting a layer or folder

Copying frames from a single layer

Copying frames from a layer folder

Deleting a layer or folder

Locking or unlocking one or more layers or folders

• To lock a layer or folder, click in the lock column to the right of the name. To unlock the layer or folder, click in the Lock column again.

• To lock all layers and folders, click the padlock icon. To unlock all layers and folders, click it again.

• To lock or unlock multiple layers or folders, drag through the Lock column.

• To lock all other layers or folders, use Alt+click (Windows) or Option+click (Macintosh) in the lock column. To unlock all layers or folders, use Alt+click or Option+click (Macintosh) in the lock column again.

Copying and pasting layers (CS5.5 only)

You can copy entire layers and layer folders in the timeline and paste them into the same timeline or separate timelines. Any type of layer can be copied.

When you copy and paste layers, the layer folder structure of copied layers is preserved.

The layers appear in the timeline above the layer you selected. If you have a layer folder selected, the pasted layers appear inside the folder.

To place a layer into a mask or guide layer, you must first select a layer under that mask or guide and then paste. You cannot paste either a mask, guide, or folder layer underneath a mask or guide layer.

You can also duplicate layers by selecting layers and choosing Edit > Timeline > Duplicate Layers. The new layers have the word “copy” appended to the layer name.

Setting properties to multiple layers

Showing or hiding a layer or folder

A red X next to the name of a layer or folder in the timeline indicates that a layer or folder is hidden. In the publish settings, you can choose whether hidden layers are included when you publish a SWF file.

• To hide a layer or folder, click in the Eye column to the right of the layer or folder name in the timeline. To show the layer or folder, click in it again.

• To hide all the layers and folders in the timeline, click the eye icon. To show all layers and folders, click it again.

• To show or hide multiple layers or folders, drag through the eye icon column.

• To hide all layers and folders other than the current layer or folder, Alt+click (Windows) or Option-click (Macintosh) in the Eye icon column. To show all layers and folders, Alt+click or Option-click it again.

Viewing the contents of a layer as outlines

To distinguish which layer an object belongs to, display all objects on a layer as colored outlines.

• To display all objects on that layer as outlines, click in the Outline column to the right of the layer’s name. To turn off outline display, click in it again.

• To display objects on all layers as outlines, click the outline icon. To turn off outline display on all layers, click it again.

• To display objects on all layers other than the current layer as outlines, Alt+click (Windows) or Option-click (Macintosh) in the Outline column. To turn off the outline display for all layers, Alt+click or Option-click in it again.

 Motion paths on the layer also use the layer outline color.

Change a layer’s outline color

Viewing layers and layer folders

Showing or hiding a layer or folder

A red X next to the name of a layer or folder in the Timeline indicates that a layer or folder is hidden. In the publish settings, you can choose whether hidden layers are included when you publish a SWF file.

• To hide a layer or folder, click in the Eye column to the right of the layer or folder name in the timeline. To show the layer or folder, click in it again.

• To hide all the layers and folders in the timeline, click the eye icon. To show all layers and folders, click it again.

• To show or hide multiple layers or folders, drag through the eye icon column.

• To hide all layers and folders other than the current layer or folder, Alt+click (Windows) or Option-click (Macintosh) in the eye icon column. To show all layers and folders, Alt+click or Option-click it again.

Viewing the contents of a layer as outlines

To distinguish which layer an object belongs to, display all objects on a layer as colored outlines.

• To display all objects on that layer as outlines, click in the Outline column to the right of the layer’s name. To turn off outline display, click in it again.

• To display objects on all layers as outlines, click the outline icon. To turn off outline display on all layers, click it again.

• To display objects on all layers other than the current layer, Alt+click (Windows) or Option-click (Macintosh) in the outline column. To turn off the outline display for all layers, Alt+click or Option-click in it again.

Changing an outline color of a layer

 Motion paths on the layer also use the layer outline color.

Setting layer transparency

 Layer transparency has no effect on hidden layers.

Using advanced layers

In Animate, with Advanced Layers mode, all layers in timeline are published as symbols. Advanced layers mode allows you to access the following features:

• Layer effects
• Layer depth  
• Layer parenting
• Camera

Advanced Layers mode is enabled by default. You can enable or disable Advanced Layers using Modify > Document settings. After applying the changes, click Make default to preserve  current setting for the subsequent documents and across Animate sessions. 

While accessing these symbols using script in Animate, you have to call them using layer as an object. For example, when you are not using advanced layers, you can directly access a symbol using a script similar to the following sample: 

getchildbyname("symbol1");

But, when you use advanced layers, you can access the symbol only through a layer by using a script similar to the following sample:

Layer=getchildbyname("L1");

Layer.getchildbyname("symbol1");

A sample code to access symbols using advanced layers for AS3 document type: 

A sample code to access symbols using advanced layers for HTML5 canvas document type: 

The following illustration depicts how you can access a symbol using script with advanced layers and without advanced layers. 

 The size of your published animation projects can increase when you use advanced layers in Animate. If you find any issues while accessing camera or layer depth features, check if the advanced layers is ON. If it is disabled, enable it to get expected behavior.

Applying layer effects

The filters and color effects used to be applicable only to movie clips. With the advanced layers, filters and color effects can now be applied to a selective frame(s), which in turn applies to all its content including shapes, drawing objects, graphic symbols, and so on. Layer effects can also be tweened using classic, shape, and IK tweens across frames.

You can apply layer effects on individual or on multiple frames by selecting desired frames. You can also apply layer effects on all the frames of layer by selecting the entire layer. Layer effects can also be applied on symbol's timeline such as movie clip and graphic symbol and across all the scenes.

 Layer effects can be applied only when Advanced Layers mode is ON. You may have to enable Advanced Layers mode explicitly for files to use this functionality.

Using filters for frames

To add filters on a particular frame, first select the frame. Properties Inspector panel loads the frame specific properties. Click the + icon in Filters drop-down list. 

When you add filters on frames, the Property Inspector appears as shown in the following screenshot. 

You can set the properties for each of the filters as per your requirement and apply them at a frame level. Tweening is applicable for all the frame filters. 

 Layer effects are supported only on ActionScript 3 document type. Motion tween and camera layers do not support layer effects.

Using color effects

To apply color effect on a particular frame, first select the frame. Property Inspector panel loads the frame specific properties. Choose any of the desired color property from Property Inspector panel.

Using blend modes

To apply blend modes on a particular frame, first select the frame and choose a blending mode listed under Display section of the Frame Properties panel.

When you apply blending on layers or frames, it gets applied to all of its contents including shapes, drawing objects, and graphic symbols. All objects on one layer blend with objects on another layer according to the blending mode applied to that frame.

For more information on blend modes, see Applying blend modes.

How to enhance your animations using Layer Effects

Applying layer depth

As an Animator, you can place the layers in different planes of 2D animation creating an illusion of depth. 

You can dynamically change depths of layers from Layer Depth panel. To open layer depth panel, click Window > Layer Depth.

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

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 decrease the depth, drag slider to your left. To increase the depth, drag slider to your right. 
• You can use lower positive values to represent objects that are closer and higher positive values to represent far-away objects.

You can tween the layer depth values in any of the tween spans for your animation. 

Each layer is represented with unique colored lines in layer depth panel. You can view the colors representing each of the layers in timeline. 

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

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

An illustration depicting animations with and without layer depth:

An illustration depicting an animation when layer depth is applied:

You can use the camera on multi-plane layers to create a parallax effect or to zoom into the content on a plane. You can also lock the camera on a specific layer, or apply camera effects at runtime using interactive APIs. For more information, see Creating parallax effect with camera and layer depth.

 Layer depth is applicable only on main timeline.

Maintain size for layer depth

You can change layer depth of objects without affecting the size and position of objects. To use maintain size functionality, 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.

Applying layer depth at runtime

You can also introduce camera on objects at runtime and apply effects by using camera APIs. For more information, see Using interactive camera at runtime. 

Layer depth API for AS3

You can manage the layers at runtime by using APIs. For example, at runtime when you want to introduce an extra layer in the animation or decrease the depth of one of the layers in the animation. 

Layer depth API for HTML canvas

Layer parenting

Animate allows you to parent one layer to another. Layer parenting is an easy way to allow one layer/object of your animation to control over the other layer/object. As an animation designer or a game designer, you can speed up your animation time as you can control movements of different parts of a character more easily.

Layer parenting view requires the Advanced layers to be enabled. By default, Advanced layers is switched ON for new files. You can enable layer parenting view by clicking the hierarchy symbol icon at the top-right corner of timeline. 

 Parenting for warped objects works only when the child layer object’s transformation point is on the parent layer object.

Parent and child layers

In parenting view, when you drag layer 1 over to layer 2, then layer 1 becomes the child of the parent layer 2. The object on the child layer inherits the position and rotation of the object on the parent layer apart from carrying its own properties. So, when you move or rotate the parent, the child also moves or rotates along with the parent. You can create multiple parent-child relationships to create a hierarchy.

Parenting layers

You can connect one layer to another layer, by clicking on the layer handle (color head) and dragging it over the other layer. Alternatively, you can click anywhere on the horizontal rectangular space adjacent to layer name and drag it over the other layer. You can also use single click on any layer and choose the parent layer for it from the pop-up list. 

A dotted line appears adjacent to the layer’s color head as soon as you click and try to drag the line. A parent-child connection establishes between the two layers as soon as you release the click and drag action.

The left most color head in the layer parenting view hierarchy represents the parent. The parent-child hierarchy moves from left to right.

You can remove the connection by clicking on any layer’s color head and dragging the dotted line and releasing it. Alternatively, you can click on the horizontal space and click Remove parent as shown in the screenshot below. 

In the screenshots below, you can see the before and after views of layers hierarchy and positions when you use layer parenting.

A sample illustration representing the usage of layer parenting for human body parts is show below.

In the above illustration,

• Torso is the parent of all the parts of the body.
• Legs_thigh is the parent of various other parts of a leg such as Sneaker, Leg_lower, and Ankle.
• Head is a child of the parent, Neck and Torso is the parent of Neck. So, whenever you drag the neck away from the body, the head part also moves along with it.

 Parenting is a frame property you need to set for each key-frame on the child layer. On a key-frame, you can break or re-parent the child layer to another parent layer.

Support for Scale, Skew and Flip in Parenting

Starting Animate 2022, layer parenting has been enhanced to propagate Scale, Skew, and Flip properties in addition to Position and Rotation properties of the parent object. By default, all the properties are propagated however the scale, skew and flip propagation can be turned OFF or turned ON from the Parenting popup which can be invoked by long pressing Show Parenting view button in the Timeline panel as shown below.

In addition, propagate scale, skew and flip settings can be toggled for momentary changes using a modifier key when transformed using the Free Transform tool. Temporary override of this setting can be done by holding the Accent(`) key while Scaling or Skewing the object using the Free Transform tool. This comes in handy when you want to momentarily toggle the propagation behavior for the newly supported properties.

A tutorial on Layer Parenting