Chapter 16: Using Child Layers and Container Layers

Follow

Using Child Layers and Container Layers

If you have a complex page with many layers, there are times when it’s convenient to manage multiple layers as a single layer, something like grouping objects in Adobe Photoshop or Illustrator. You might want a text layer and underlying word balloon drawing layer to move together on the page as you work, for example, or a panel image layer with accompanying character, object, and word balloon layers to scale at the same time and rate when you add an effect.

Child layers provide group layer management and, when used skillfully with effects, tell your story with dynamic flair.

Child Layer Basics

Child layers are easy to create, but to get the best results you must understand how they work.

Creating Child Layers

You can create child layers within any graphic layer—that is, any layer except sound layers—by clicking the “New+” button at the bottom of a layer box in the layer stack. When you create a child layer within another layer, that other layer becomes the parent layer of the child layer.

 If you click “New+” within a child layer box, you create a child layer of a child layer to place a nested child layer structure on  a page.

Figure 1:    Nested layers provide a hierarchy of layers where parent layers control child layers.

Once you’ve created layers on a page, you can rearrange those layers within the layer stack to create child layers, parent layers, and multiple levels of nested child layers. You can drag a layer onto another layer to turn the first layer into a child layer of the second; you can drag a child layer out of a parent layer to promote the child layer to a higher level; and so on. Moving Child Layers on page 118 describes how rearrange child layer structure.

Controlling Child Layers

A parent layer controls all of its child layers because each child layer uses its parent layer as its canvas instead of using the workspace canvas that standard layers use. Consider the difference between a standard layer and a child layer:

A standard layer appears directly on the canvas in the workspace. The layer’s bounding box position is reckoned from the upper left corner of the canvas and the layer’s rotation is reckoned relative to the canvas’s rotation. If the standard layer contents extend beyond the canvas margins, the margins clip the contents. The canvas never changes location, rotation, or size, so a standard layer’s position, rotation, and clipping are never affected by the underlying canvas.

A child layer appears within the bounding box of its parent layer. The child layer’s bounding box position is reckoned from the upper left corner of the parent layer’s bounding box and rotation is reckoned relative to the parent layer’s rotation. The margins of the parent layer bounding box clip child layer contents if they extend beyond the margins.

When a parent layer’s bounding box changes position, the child layer moves with it because its position is reckoned relative to the parent layer. If the parent layer rotates, the child layer rotates with it. And if the parent layer bounding box changes size, its moved margins may clip or reveal the child layer in new ways. All of this means that when you modify a parent layer as you edit in the Motion Book Tool, you modify all of its child layers as well.

Figure 2:    A child layer uses its parent layer’s bounding box as its canvas, so when the parent layer bounding box changes it affects the child layer. Notice that shrinking the parent layer doesn’t shrink the child layer, it clips the child layer as the child layer extends beyond parent layer margins.

Parent layer control applies to effects as well. If you apply an effect to a parent layer, the effect affects all of the child layers. If the effect moves or rotates the parent layer, the child layers move or rotate. If you scale the size of a parent layer up or down, the child layers scale up or down in size. And if you change parent layer transparency, child layer transparency changes with it.

Child Layer Visibility on the Canvas

Because a child layer uses a parent layer as its canvas, a child layer’s contents always appear on top of any of its parent layer’s contents. For example, if your parent layer is a panel containing a background image and you add a child layer containing a character image, the character appears on top of the panel.

If a parent layer has multiple child layers, those child layers each cover the parent layer. If the child layers overlap, the child layers higher in the layer stack cover child layers lower in the layer stack. For example, if you add multiple character child layers to a panel layer, the characters you add later are higher in the layer stack and will cover characters created earlier that are lower in the layer stack.

In nested child layers where child layers have child layers, deeper-nested child layers appear on top of less-deeply-nested child layers. For example, if a panel parent layer contains a word balloon child layer that in turn contains a text child layer, the text child layer appears on top of the balloon child layer, which appears on top of the panel parent layer.

fig-37b

Figure 3:    Child layers appear above their parent layers on the canvas.

Child layer visibility for nested child layers can be a bit confusing in the layer stack because the title bar of a parent layer appears above the title bars of any of its child layers, which implies that the parent layer might appear above its child layers in the canvas. Remembering that child layers cover parent layers will help you sort out child layer visibility.

Container Layers

There are times when you want to assemble a set of equal child layers within a parent layer that has no content of its own. If so, the Motion Book Tool provides container layers. A container layer has no content, but has a full set of standard layer controls that set the layer’s bounding box background, border, location, size, rotation, and transparency.

You can control a container layer’s child layers through its bounding box and by applying effects to the container layer. You may also use a container layer to set its child layers as mask components as described in “Using a Layer as a Mask” on page 131.

Child Layer Controls

Direct child layer controls occur in different locations: the New + button at the bottom of each image layer box creates a new child layer, the Add New Layer button at the top of the layer stack creates a container layer, and layer box dragging within the layer stack changes child layer location.

Creating a Container Layer

To Add a New Container Layer to a Page

1.      Click + on the Add New Layer button at the top of the page’s layer stack.

A dialog box appears asking what kind of layer you’d like to create.

2.      Click Container then click Done or double-click Container.

The dialog box closes and a new container layer box appears at the top of the layer stack. The container layer box is open and presents standard layer controls. A bounding box appears for the layer on the canvas.

3.      Click in the layer box heading to select the name “Layer” and replace it with a name that describes the intended content.

Once you have a container layer, fill it by creating new child layers for it or by moving other layers to become its child layers.

Creating a Child Layer

To Create a Child Layer From Scratch

1.      At the bottom of a layer box in the layer stack, click “New +”.

A dialog box asks you what type of layer you want to create.

2.      Double-click the layer type you want or click the layer type and then click “Done.”

The new child layer appears empty on the canvas. In the control panel a new layer box for the child layer appears within the original layer box (the parent layer of the new child layer).

To Create a Child Layer Using an Image Asset

l  Drag an image asset from the asset bar and drop it on “New +” at the bottom of a layer box where you want to create a child layer.

The new child layer containing the image appears on the canvas. In the control panel a new layer box for the child layer appears within the original layer box (the parent layer of the new child layer).

To Create a Child Layer Within a Child Layer

l  Click “New +” at the bottom of the child layer box in the layer stack or drag an image asset to drop on the New + button.

Note that you can also create a child layer by dragging a standard layer into another standard layer as described in a following section.

Viewing Child Layers

A page’s layer stack shows child layer structure: any layer that has child layers shows the child layer boxes enclosed within the layer box. The child layer boxes appear at the bottom of the parent layer box just above the bottom row of buttons. An easy way to tell if a layer box is a child layer or not is to look at the side of the layer stack. If a layer box has one or more additional lines along its side, it’s contained within one or more parent layers. The more lines alongside the layer box, the deeper the layer box is nested.

Figure 4:    Child layer boxes are nested within parent layer boxes (here showing just the bottoms of the boxes). The more lines you see along the side of a child layer box, the deeper the child layer is nested within parent layers.

Moving Child Layers

Rearrange child layer boxes within a parent layer box by dragging the child layer boxes in the layer stack just as you’d drag standard layers in the layer stack. You may also turn standard layers into child layers and child layers into standard layers by dragging.

To Turn a Standard Layer Into a Child Layer

1.      In the layer stack, open the layer box that you want to serve as the parent layer.

2.      Drag the intended child layer box by its heading and move it into the parent layer box.

An empty dotted box appears at the bottom of the parent layer box.

3.      Drop the intended child layer box on the empty dotted box.

The dropped layer box appears within the boundaries of the parent layer box, and is now a child layer of the parent layer.

Note that if you have any effects added to the standard layer, the Motion Book Tool removes those effects when turning the standard layer into a child layer.

To Turn a Child Layer Into a Standard Layer

1.      In the layer stack, open the parent layer box where the child layer box resides.

2.      Drag and drop the child layer box outside of the parent layer box.

The child layer box moves outside of the parent layer box so that it’s no longer a child layer.

Note that if you want to move child layers from one parent layer to another, you can drag them out of the first parent layer and drop them as standard layers in the layer stack, then drag them into the second parent layer. You may also drag nested child layers from a lower level to a higher level and vice versa. Just be sure to drop a dragged layer box onto the empty dotted box  in the intended parent layer.

Controlling Child Layers Through Parent Layers

During motion book creation, control a parent layer’s child layers through standard layer controls. These controls set the parent layer bounding box and content transparency to affect the place, size, and transparency of child layers.

During motion book playback, a parent layer controls its child layers through effects applied to the parent layer. As the effects play back and affect the parent layer, they also affect child layers within the parent layer.

Using Layer Controls

Use the parent layer’s standard bounding box controls to affect child layers.

Bounding Box Size

The parent layer’s Margin Width and Height values in the control panel set the size of the bounding box as does dragging the bounding box sizing handles in the canvas. As you change bounding box size, child layers remain in place relative to the upper-left corner of the bounding box. If you drag the upper left corner of the bounding box in to reduce bounding box size, all child layers move with the upper-left corner.

As you reduce bounding box size, the bounding box margins clip any child layer contents that extend beyond the margins. Child layers do not shrink along with the bounding box. To resize child layer content, individually resize the child layers’ bounding boxes.

If you want a parent layer and all of its child layers to shrink or grow in motion book playback, applying a scale effect to a parent layer scales both the parent layer and its child layers equally as described later.

Bounding Box Location

The parent layer’s Left and Top margin values in the control panel set the location of the bounding box, as does dragging the bounding box by its margins in the canvas. As you move the bounding box, all child layers move with the bounding box.

Bounding Box Rotation

The parent layer’s Rotation value in the control panel sets the bounding box rotation as does dragging the rotation handle in the canvas. As you rotate the bounding box, all child layers rotate with the bounding box.

Transparency

The parent layer’s Transparency slider and value box set the parent layer’s transparency. As you make a parent layer more or less transparent, you make its child layers more or less transparent.

Cumulative Layer Controls

Each child layer within a parent layer may have its own bounding box and transparency settings. These settings combine with the parent layer’s settings to determine the child layer’s final bounding box setting and transparency.

For example, if a parent layer is rotated by 30 degrees and one of its child layers is rotated by 20 degrees, the child layer is rotated a total of 50 degrees. If a parent layer is set to 50% transparency and one of its child layers is also set to 50% transparency, the child layer becomes 25% transparent. (50% of 50% is 25%.)

In nested child layers, a child layer’s settings are the sum of its parent layer settings along with its own settings. In the previous example, a child layer was rotated 50 degrees because it had a parent layer rotation of 30 degrees and its own rotation of 20 degrees. If the child layer has its own child layer, and the child’s child layer has a rotation of 40 degrees, the child’s child layer is rotated 90 degrees (30+20+40 degrees).

Applying Effects

You may apply effects to a parent layer and to each of its child layers. Like layer controls, a parent layer’s effects affect all of its child layers. When you move a parent layer with an effect, all of the child layers move with it. When you rotate a parent layer, all of the child layers rotate with it. When you fade a parent layer in or out, all of the child layers fade in or out with it.

There’s one difference with effects: if you scale a parent layer, all of the child layers scale with it. This is different from resizing a parent layer’s bounding box, which doesn’t resize child layers, but clips them instead.

Cumulative Effects

Effects, like layer controls, accumulate from parent layers to child layers. As a parent layer’s effects move, scale, rotate, or fade all of its child layers, the child layers may have their own effects added to the overall effect.

For example, if a parent layer’s effect rotates 90 degrees over two seconds and one of its child layers rotate -90 degrees over the same two seconds, the child layer won’t rotate while the parent layer rotates. (-90-degree rotation cancels out the 90-degree rotation.) Or if a parent layer’s effect moves left for two seconds while one of its child layer’s effects rotates 90 degrees over the same two seconds, the child layer simultaneously moves to the left and rotates 90 degrees.

In nested child layers, child layers deep in the nest may have many, many effects applied to them from parent layers which can create some pretty amazing results—or a complicated mess, depending on how you apply effects.

Working With Child Layers

Child layers can be a simple working convenience or a complex construction used to present some intricate animation on the page. One of the most common uses of child layers is to create a text child layer for a word-balloon parent layer. As you move the word balloon around the canvas, its text automatically moves with it, which is much more convenient that moving each layer separately. If you fade the word balloon in or out with an effect, the text fades with it.

A more involved way to use child layers is to create an image parent layer that contains the background of a story panel. Add characters, important objects, word balloons, and narrative text as child layers to the panel parent layer. This allows you to present each character, object, word balloon, and narration separately through effects on the panel and its child layers in the center of the page, then shrink and move the entire panel with its child layer contents to one side so you can present a new panel on the page.

Child layers are very useful for creating moving masks on a page, a process described in more detail in “Using a Layer as a Mask” on page 131.

Have more questions? Submit a request

Comments

Powered by Zendesk