Chapter 8: Layer Basics

Follow

Layer Basics

“Assembling a Page” on page 47showed you how to add layers to a page. The Motion Book Tool offers a variety of layer types, each with its own set of controls in the control panel. Many of those layer controls appear for multiple layer types—color controls, for example. If you learn the controls for one layer type, you won’t have to relearn them for another layer type.

This chapter introduces layer types and describes basic layer controls that occur in all graphic layer types.

Layer Types

The Motion Book Tool offers seven different types of layers. All but one of them add graphic elements to a page. The layers:

l  A background layer sits below all other layers on a page and provides a background color to the page.

A background layer isn’t technically a layer type—it’s simply a preset collection layer that the Motion Book Tool creates to provide a background color for each new page.

l  An image layer places an image asset on the page.

l  A text layer creates, edits, and formats text on a page.

l  A drawing layer creates one or more simple drawn objects on a page.

l  A panorama layer stitches together a set of image assets to create a 360-degree set of surroundings on a page.

l  A parallax layer combines a set of images on a page that move in relationship to each other to create a feeling of three dimensions (an effect sometimes called 2 ½ D).

l  A collection layer assembles and controls a set of graphic child layers that appear on the page.

l  A sound layer adds sound effects and music to a page.

You’ll find each of these layers described in detail in the chapters following this one.

Specifying Color

Many of the motion book elements you create using the Motion Book Tool come in a color that you can specify: fill color for a background, for example, or color for drawn objects, text, or borders. Whenever you can specify color within a layer, the control panel presents a color button that shows the currently set color for t element.

Figure 1:    A color button.

If the currently set color is transparent, you see a checkerboard pattern that dims the less transparency is in the color.

When you click the color button, it opens a color dialog box where you can specify a color or a color gradient among two or more colors. After you specify a color, click the X in the upper right corner to close the dialog box and put your color into effect.

p47-fig09

Figure 2:    A color dialog box provides controls to set a color or a gradient between colors.

Specifying a Color by Color Theme

The simplest way to specify a color is to click on any of the coordinated colors in sets offered by color themes. The color themes appear in a scrolling list;  scroll through them to find a color or set of colors you like. When you click on a color in a theme, the color appears in the color box and you’ve specified that color.

Specifying a Color by Color Value

The color value box next to the color box shows a hexadecimal value that defines the color in the color box. The hexadecimal value is a set of three two-digit hexadecimal numbers. The first pair of digits specifies the red component of the color, the second pair the green component of the color, and the third pair the blue component of the color.

If you know how to specify a color using a hexadecimal RGB value, you can enter the value directly in the color value box to specify the color  in the color box.

Picking a Color Outside the Dialog Box

If there’s a color anywhere in the Motion Book tool that you’d like to use to specify the color in the color dialog box, you can use the color picker to point to that color.

To Specify a Color Using the Color Picker

1.      Click the color picker button to activate the color picker.

The cursor turns into an eye dropper that you can move anywhere over the Motion Book Tool display. The color box shows the color currently under the tip of the color picker.

2.      Click when you’ve pointed to a color you want.

The color you pointed to appears in the color box and you’ve selected that color.

Specifying a Color With HSV or RGB Values

If you’d like to specify a specific color through hue, saturation, and value settings or red, green, and blue settings, the color dialog box offers two sets of sliders to specify a color using either of those systems.

To Specify a Color Using HSV or RGB Values

1.      Click the color value pull-down to the left of the color box to open the HSV and RGB sliders.

p48-fig10

Figure 3:    The HSV slider controls hue, saturation, and value; the RGB sliders control red, green, and blue color components.

2.      Drag the hue, saturation, and value sliders left or right or enter a value from 0-255 in the HSV slider value boxes to specify the color you want.

Hue sets the tint; saturation sets how much of the tint permeates (from grey scale with no color to full color expression); value sets the brightness (from black to fully bright).

or

3.      Drag the red, green, and blue sliders left or right or enter a value from 0-255 in the RGB slider value boxes to get the color you want.

The red slider determines how much red is present in the color; the green slider how much green; the blue slider how much blue.

HSV and RGB are two alternative systems for color specification; use the one that works best for you. As you set the sliders, you see their effect on the color box above them and on the sliders in the other system.

Specifying a Color’s Brightness or Transparency

The value (V) slider and transparency (O) slider are always present in the color dialog box whether the HSV/RGB sliders are open or not. The value slider works just as it does as part of the HSV sliders: slide it right to increase color brightness; slide it left to decrease brightness.

The transparency slider controls how much of the graphic elements below show through. Transparency ranges from completely transparent (0) to completely opaque (100).

You can set brightness or transparency using the sliders, or you can enter values in the slider value boxes.

Setting a Color Gradient

The color dialog box can set a color gradient instead of a single color—an even gradation from one color to another within the element whose color you set. The Motion Book Tool offers two types of gradients: linear and radial.

Figure 4:    A radial gradient (left) radiates out from a central point (here on top of the rectangle). A linear gradient changes evenly parallel to a border (here the top of the rectangle).

A gradient by default starts with the first color at one border and ends with the second color at the opposite border. The Motion Book Tool lets you specify whether you want the gradient to progress up, down, left, or right. It also provides a feature that lets you set the start and end points anywhere on or off the canvas for special gradient effects.

A gradient typically shades between two colors, but may shade between multiple colors, moving evenly from one color to the next like gradations in a rainbow.

To Create a Two-Color Gradient

1.      In the color dialog box, click “Create gradient +” to open a second color box below the first and to present gradient controls above and below the color boxes.

p50

2.      Click the first color box and use the standard color controls to set the first gradient color.

3.      Click the second color box and set the second gradient color.

The element on the canvas whose color you’re setting shows the gradient from the first color to the second color.

4.      To change to a radial or linear gradient (it’s linear by default), click the radial or linear gradient button.

5.      To change the direction of the gradient, click the appropriate gradient direction button.

To Create a Multi-Color Gradient

1.      In the color dialog box with the gradient tools open, click “Add color.”

A third color box appears.

2.      If you want more colors, click “Add color” until you have as many colors as you want.

3.      Set the colors you want in each of the color boxes.

4.      Set the gradient to radial or linear and set the direction you want the gradient.

The gradient appears in the element on the canvas. The gradient shades evenly from one color to the next from the starting border to the ending border.

5.      To remove colors from the gradient, click the minus symbol next to the color box.

To Change the Axis of a Gradient

1.      In the color dialog box with the gradient tools open, click the “Enable gradient dragging” check box to open the gradient axis tool on the canvas.

2.      Drag the start (top) end of the gradient axis tool to the location where you want the gradient to start.

3.      Drag the stop (bottom) end of the gradient axis tool to the location where you want the gradient to end.

The gradient changes direction and shading rate to match the positions of the start and stop points.

Figure 5:    The start end of the gradient axis tool sets the location of the first color; the stop end sets the location of the second color.

Setting Size, Placement, and Rotation

When you add a layer to a page, it appears on the canvas with a dashed bounding box around it. The margins of the bounding box determine the size, placement, and rotation of the layer. All the visible contents of the layer appear within the bounding box. If you drag an element in the layer (such as text or a drawing) to extend beyond the layer margins, the margins clip the element. A bounding box that contains an image controls the size of the image, which grows or shrinks to touch the nearest margins of the bounding box.

p52-fig13

Figure 6:    Bounding box margins define the size, placement, and rotation of a layer on the canvas. Use the bounding box handles and margins to change the bounding box.

You can change a layer’s size, location, and rotation directly on the canvas using the bounding box’s margins and handles, or you can specify size, location, and rotation using the layer’s control panel.

p52-fig14

Figure 7:    The bounding box controls in a layer’s control panel set the layer’s size, location, and rotation.

Setting Size, Placement, and Rotation on the Canvas

To Change a Layer’s Size, Placement, and Rotation on the Canvas

1.      Click on the layer in the canvas to select the layer.

The layer’s bounding box appears. If you can’t find the layer in the canvas to select it, click the layer’s box in the control panel to select the layer.

2.      To change the size of the bounding box, drag any one of the bounding box’s sizing handles (on the corners or the sides) in or out.

The cursor turns into a double-headed arrow whenever it’s over a sizing handle. Shift-drag the sizing handles for mirror sizing: the sizing handle opposite the one you drag moves in the opposite direction for quick sizing.

3.      To move the bounding box around the canvas, drag any one of the four bounding box margins.

The cursor turns into a four-headed arrow whenever it’s over a margin. Note that if you drag a layer beyond the canvas borders the contents of the layer are clipped by the borders.

4.      To rotate the layer, drag the rotation handle to pivot the layer around its center point.

The cursor turns into a curved arrow when it’s over the rotation handle.

As you work with the layer’s bounding box in the canvas, the bounding box controls in the layer’s control panel change their values to reflect the changing bounding box. You can read the values as you work to help make more precise changes.

Setting Size, Placement, and Rotation in the Control Panel

The layer’s bounding box controls in the control panel offer very precise bounding box change: you can specify size and placement by pixels and rotation in degrees.

To Change a Layer’s Size, Placement, and Rotation in the Control Panel

1.      Click the layer box in the canvas to select the layer and open the control panel.

The layer’s bounding box appears in the canvas.

2.      To change the location of the bounding box, enter new Left and Top margin values.

The Left value sets the number of pixels from the left border of the canvas to the left margin of the bounding box. The Top value sets the number of pixels from the top border of the canvas to the top margin of the bounding box. Set negative values to move outside the canvas boundaries.

3.      To change the size of the bounding box, enter new Width and Height margin values.

The Width value sets the width of the bounding box in pixels; the Height value sets the height of the bounding box in pixels.

4.      To change the rotation of the bounding box, enter a new Rotation value.

The Rotation value sets the number of degrees clockwise from straight up (0 degrees) to rotate the bounding box. You can enter negative values to rotate counterclockwise.

Setting a Border and Background

A graphic layer’s controls include settings for a border and a background. A border can be any color, including a gradient, or transparent, in which case the border reduces the visible size of the layer. The border can also be any thickness from 0 pixels (no border) to as many pixels as are available in the layer (filling the whole layer). As a border gets thicker, it fills in toward the center of the layer. The border can have square or rounded corners, and the rounded corners can range from sharp to very gentle.

A border appears on top of the rest of the layers contents including the background and any drawings, text, or images the layer might contain.

Figure 8:    A border (here in gold) may be any thickness and color, and may have rounded or sharp corners. It fits along the interior of the bounding box and covers the layer contents. In this example, the border appears in an image layer.

The background of a layer fills all empty space inside a layer’s border (or bounding box if there’s no border). The background is transparent by default, and so doesn’t appear in the layer. You can set it to any color and any level of transparency you wish.

Figure 9:    A background fills in all empty space within a layer’s borders (or bounding box). In this example, the background color is set to yellow and fills the empty space along the top and bottom of the image.

To Create a Layer Border

1.      In the layer’s box in the control panel, set a Thickness value to any value 1 or greater to specify the thickness of the border.

Thickness is measured in pixels.

2.      Click the Border color button to open a color dialog box where you can specify a color or color gradient for the border.

If you leave the border set to transparent, it will effectively crop the layer contents as the border gets thicker.

3.      If you want rounded corners, enter a Radius value greater than 0.

The larger the Radius value, the more rounded the corners.

Setting Layer Transparency

A layer’s Transparency slider sets the overall transparency of the layer from 0 (completely transparent) to 100 (opaque). Move the slider or enter a value next to it to set layer transparency.

Figure 10:               A layer’s Transparency slider sets the layer’s transparency.

Layer transparency controls overall transparency for the entire layer, which may include components (such as drawings or text) with their own specified level of transparency. As a layer becomes more transparent, its transparency increases the transparency of any layer elements, including elements that are already partially transparent.

Masking and Linking

You can use any layer to mask another layer or to link to an external resource. “Using a Layer as a Mask” on page 131 and “Linking a Layer” on page 132 describe these advanced topics in detail.

Showing Clipped Content While Editing

As you move a graphic layer around a canvas, if any part of the layer extends beyond the canvas border the border clips the layer so that nothing appears (other than an empty bounding box) outside of the canvas. If you’d like to see clipped parts of a layer outside canvas boundaries, click “Show clipped content while editing” to check it. Uncheck it to return boundary clipping.

Viewing a Layer’s Asset in an Asset Tab

If you’d like to view a layer’s asset—an image in an image layer, for example, or a sound in a sound layer—in an asset tab, click the content box at the top of the layer controls. The Motion Book Tool opens a new asset tab that displays the asset and provides information and controls for the asset.

Other Common Layer Controls

Layer boxes all contain a set of common controls at the bottom of the box.

Cloning a Layer

Click the Clone button at the bottom of the layer box to create a duplicate of this layer and place it on the current page’s layer stack just above this layer.

Deleting a Layer

Click the Delete button at the bottom of the layer box to delete this layer and all of its contents. This deletes the layer from the page file in the Madefire cloud so you can’t recover the layer once it’s deleted.

Adding an Effect to a Layer

Click the Effect button at the bottom of the layer box to add an effect to a layer. “Adding an Effect to a Page” on page 56 describes adding effects in more detail.

Adding a Child Layer to a Layer

Click the New button at the bottom of the layer box to add a child layer to this layer. You can read more about child layers in Using Child Layers and Container Layers on page 111.

Have more questions? Submit a request

Comments

Powered by Zendesk