Creating and organizing layers

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 CC (formerly Flash Professional CC) 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.

  • Do one of the following:
    • Click the new layer button  at the bottom of the timeline.

    • Select Insert > Timeline > Layer.

    • Right-click (Windows) or control+click (Macintosh) a layer name in the timeline and select Insert Layer from the context menu.

Creating a layer folder

  • Do one of the following:
    • Select a layer or folder in the Timeline and select Insert > Timeline > Layer Folder.

    • Right-click (Windows) or control+click (Macintosh) a layer name in the Timeline and select Insert Folder from the context menu. The new folder appears above the layer or folder you selected.

    • Click the new folder icon  at the bottom of the Timeline. The new folder appears above the layer or folder you selected.

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.

  • Do one of the following:
    • Double-click the name of the layer or folder in the timeline and enter a new name.

    • Right-click (Windows) or Control-click (Macintosh) the name of the layer or folder and select Properties from the context menu. Enter the new name in the Name box and click OK.

    • Select the layer or folder in the Timeline and select Modify > Timeline > Layer Properties. Enter the new name in the Name box and click OK.

Selecting a layer or folder

  • Do one of the following:
    • Click the name of a layer or folder in the Timeline.

    • Click any frame in the Timeline of the layer to select.

    • Select an object on the Stage that is located in the layer to select.

    • To select contiguous layers or folders, Shift-click their names in the Timeline.

    • To select non-contiguous layers or folders, Control-click (Windows) or Command-click (Macintosh) their names in the Timeline.

Copying frames from a single layer

  1. Select a range of frames in a layer. To select the entire layer, click the layer name in the Timeline.
  2. Select Edit > Timeline > Copy Frames.

  3. Click the frame where you want to begin pasting and select Edit > Timeline > Paste Frames. To replace the exact number of copied frames on the target timeline, use the Paste and Overwrite Frames option.

    Overwrite_frames_process_1
    Paste and overwrite frames workflow

    A. Select frames and copy. B. Right-click the frame on which you want to paste and select Paste and Overwrite Frames. C. The pasted frames overwrite the exact number of frames on the timeline. 

Copying frames from a layer folder

  1. To select the entire folder, collapse the folder (click the triangle to the left of the folder name in the Timeline) and click the folder name. 

  2. Select Edit > Timeline > Copy Frames.

  3. To create a folder, select Insert > Timeline > Layer Folder.

  4. Click the new folder and select Edit > Timeline > Paste Frames.

Deleting a layer or folder

  1. To select the layer or folder, click its name in the Timeline or any frame in the layer.
  2. Do one of the following:
    • Click the delete layer button in the Timeline.

    • Drag the layer or folder to the Delete Layer button.

    • Right-click (Windows) or Control+click (Macintosh) the layer or folder name and select Delete Layers from the context menu.

    Note:

    When you delete a layer folder, all the enclosed layers and their content are also deleted.

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.

  1. Select one or more layers in the timeline by clicking the layer name. Shift+click to select contiguous layers. Control+click (Windows) or Command+click (Macintosh) to select non-contiguous layers.

  2. Choose Edit > Timeline > Copy Layers or Cut Layers. You can also right-click the layers and choose Copy Layers or Cut Layers from the context menu.

  3. In the timeline you want to paste into, select the layer immediately below where you want the pasted layers to be inserted.

  4. Choose Edit > Timeline > Paste Layers.

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.

Using advanced layers

You can turn on advanced layers in Animate to access features such as layer depth and camera locking. When you use advanced layers, Animate turns layers into symbols. 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: 

Var Layer:MovieClip =MovieClip(getchildbyname("L1"));
Layer.getchildbyname("symbol1");

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

Layer=this.getchildbyname("L1");
Layer.getchildbyname("symbol1");

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

Illustration on how to access symbol with and without advanced layers
Illustration on how to access symbol with and without advanced layers

Note:

The size of your published animation projects can increase when you use advanced layers in Animate. 

Creating layer depth using advanced layers

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 using the Layer Depth panel. To use layer depth, click Window > Layer Depth.

By default, the layer depth feature is in Off mode. You can change into advanced layers mode by clicking the On/Off toggle button in the timeline. A pop-up dialog appears prompting you to choose the advanced layers option. Click Use Advanced Layers to change into advanced layers mode. 

Layer depth with colored lines representing each layer
Layer depth with colored lines representing each layer

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 dialog. 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:

Content without layer depth
Content without layer depth
Content with layer depth
Content with 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, refer to Creating parallax effect with camera and layer depth.

Using layer depth at runtime

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 AS3

Method Prototype Example Description
setLayerZDepth fl.Layer.setLayerZDepth(timeline,
layerName,zDepth)
fl.Layer.setLayerZDepth("layerName", 100); Set Z depth value of a particular layer.
getLayerZDepth fl.Layer.getLayerZDepth(layerName) :zDepth fl.Layer.getLayerZDepth("layerName"); Return the Z depth value of a particular layer.
addNewLayer fl.Layer.addNewLayer(layerName,
zDepth=0)
fl.Layer.addNewLayer("layerName",-80); Add new layer to timeline and set the Z depth.
removeLayer fl.Layer.removeLayer(layerName) fl.Layer.removeLayer("layerName"); Remove a layer from timeline.

Layer depth API for HTML canvas

Method Prototype Example Description
setLayerZDepth AdobeAn.Layer.setLayerZDepth(layerName,
zDepth)
console.log(fl.Layer.setLayerZDepth
("layerName",100));
Set Z depth value of a particular layer.
getLayerZDepth AdobeAn.Layer.getLayerZDepth(layerName)
:zDepth
console.log(fl.Layer.getLayerZDepth
("layerName"));
Return the Z depth value of a particular layer.

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

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

  1. Do one of the following:
    • Double-click the layer’s icon (the icon to the left of the layer name) in the timeline.

    • Right-click (Windows) or Control+click (Macintosh) the layer name and select Properties from the context menu.

    • Select the layer in the timeline and select Modify > Timeline > Layer Properties.

  2. In the Layer Properties dialog, click the Outline color palette, select a new color, and click OK.

Note:

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

Setting layer transparency

  1. In Animate CC, create an fla file or open an existing one.

  2. Shift+click the eye icon column in the timeline to set the visibility to transparent.

    Note:

    Shift+click has no effect on the hidden layers.

    Setting layer transparency
    Setting layer transparency
  3. Use any of the following options to set layer transparency:

    • Right-click any layer and select Properties from the context menu. In the Layer Properties dialog, select Visibility>Transparent.
    • Right-click any layer and select Show Others Transparent.
    layertransperancy4
    Layer Properties

  4. Click OK.

Note:

Layer transparency has no effect on hidden layers. 

Setting properties to multiple layers

  1. In Animate CC, create a FLA file or open an existing one.

  2. Select those layers whose properties you want to modify, right-click, and select Properties.

  3. In the Layer Properties dialog, modify the properties.

  4. Click OK.

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.

Change a layer’s outline color

  1. Do one of the following:
    • Double-click the layer’s icon (the icon to the left of the layer name) in the timeline.

    • Right-click (Windows) or Control-click (Macintosh) the layer name and select Properties from the context menu.

    • Select the layer in the timeline and select Modify > Timeline > Layer Properties.

  2. In the Layer Properties dialog, click the Outline color palette, select a new color, and click OK.

Note:

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

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy