Create and organize layers

Layers help you 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 help create 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 or 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.

  1. 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

  1. 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.

Organize layers and layer folders

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

Layer folders help 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.

Rename 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.

  1. 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.

Select a layer or folder

  1. 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.

Copy 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. 

Copy 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.

Delete 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 Layer from the context menu.

    Megjegyzés:

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

Lock or unlock 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, Alt+click (Windows) or Option+click (Macintosh) in the lock column. To unlock all layers or folders, Alt+click or Option+click 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.

Creating layer depth using advanced layers

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.

By default, the layer depth or the advanced layers option is in OFF mode. You can move 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. 

Megjegyzés:

Using advanced layers option turns your layers into symbols. Converting layers to symbols can affect your script. You can go back to basic layers option anytime by clicking the ON/OFF toggle button in layer depth panel or timeline. 

color-coded-lines
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 increase the depth, drag slider to your left and to decrease 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.

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 screenshots: 

before-layer-depth
Content without layer depth
after-layer-depth
Content with layer depth

You can use the camera on multi-plane layers to create a parallax effect or 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 Working with camera in Animate CC.

Using layer depth at runtime

You can manage the layers at runtime by using APIs. 

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
addNewLayer AdobeAn.Layer.addNewLayer(layerName, zDepth = 0 ) fl.Layer.addNewLayer("layerName",-80); Add new layer to timeline and set the Z depth value
removeLayer AdobeAn.Layer.removeLayer(layerName) fl.Layer.removeLayer("layerName"); Remove particular layer from timeline

Viewing layers and layer folders

Show or hide 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.

View 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.

Megjegyzés:

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 on the eye icon column in the timeline to set the visibility to transparent.

    Megjegyzés:

    Shift+click has no effect on the hidden layers.

    LayerTransparency1
  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.

Megjegyzés:

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.

Show or hide 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 column to the right of a layer or folder name. To show all layers and folders, Alt+click or Option-click it again.

View 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 the right of a layer’s name. 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.

Megjegyzés:

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

Ez a munka a Creative Commons Nevezd meg!-Ne add el!-Így add tovább! 3.0 Unported licenc alatt lett közzétéve.  A Twitter™ és Facebook közzétételeket a Creative Commons jogi feltételei nem szabályozzák.

Jogi közlemények   |   Online adatvédelmi nyilatkozat