Chapter 6: Assembling a Page

Follow

Assembling a Page

Once you have assets in place in the Madefire cloud, create a page to use those assets. Within the page, you can select a canvas size to match device playback, add assets in layers, then attach effects to animate the assets. A page offers playback controls so you can play back the effects and see how your page will appear to your readers.

This chapter describes the basic processes that create a page, select a canvas size, add layers, add effects, and play back effects. You’ll find detailed information about layers in the chapters of the section “Working With Layers” and about effects in the chapters of the section “Working With Effects.”

Creating and Naming a Page

To Create and Name a New Page

1.      In the Home tab, click + on the New Page button at the top of the control panel.

A new page tab opens in the tool with a default canvas in the workspace and the page control panel that displays the layer controls.

2.      In the Name box at the top of the layer controls, replace “Page” with a name that describes your new page.

You can change this name at any time.

Selecting a Canvas Size

A new page contains a single default canvas in the workspace on which you can place layers. A canvas defines a screen aspect ratio and resolution that matches a device that can play back your motion book. It also defines the screen orientation you want readers to use when viewing your book: portrait (higher than it is wide) or landscape (wider than it is high).

Figure 1:    A canvas represents the motion book display.

This guide assumes that you use the default canvas, which is an iPad in portrait orientation. You may want to change that canvas, however, if you have a different target device or if you want to use landscape orientation, which works better for motion books viewed in a web browser on a computer.

Note that you can set up multiple canvases on a page so that a single motion book is set up to play on multiple devices, an advanced topic described in “Adapting a Motion Book to Different Devices” on page 189.

Canvas Settings

The Motion Book Tool currently offers these canvas settings that match current Apple iOS devices:

l  iPad, which has a resolution of 768x1024 pixels (portrait) or 1024x768 pixels (landscape). That’s an aspect ratio of 3:4 or 4:3.

l  iPhone, which has a resolution of 320x480 pixels (portrait) or 480x320 pixels (landscape). That’s an aspect ratio of 2:3 or 3:2.

l  iPhone 5, which has a resolution of 320x568 (portrait) or 568x320 (landscape). That’s an aspect ratio of almost exactly 9:16 or 16:9.

 

 

Note that some devices have a Retina display that quadruples resolution—1536x2048 in the case of an iPad, for example. You need not specify a special canvas for the Retina display. Use instead the “Retina double” option for image layers as described in “Retina Double Publication” on page 85.

The Motion Book Tool also offers a canvas setting designed to create a thumbnail image that represents a motion book in the App Store or within deviantART:

l  Store thumb, which has a resolution of 180x240 (no landscape orientation available). That’s an aspect ratio of 3:4.

Changing Canvas Size

To Change an Existing Canvas Size

1.      Click on the Selected pull-down at the top of the page workspace to see the entry for the single canvas on the workspace.

2.      Click “/” next to the canvas name to open a canvas size dialog box.

3.      Select the device type and orientation you want, then click Change.

The canvas on the workspace changes size and orientation to match your selection. You should reset the page’s background layer to match the new size and orientation as described later in “Setting the Background Layer to Match a New Canvas Size” on page 50.

Viewing the Canvas Boundaries and Tap Point

It’s important to realize that the rectangle you see in the workspace is not the canvas—it’s the black background layer that the Motion Book Tool creates automatically to set a background color for the page. The canvas is usually invisible on the workspace except for a set of dimensions that appears just below the canvas.

To see the boundaries of a canvas momentarily, put your pointer over the canvas’s entry in the Selected pull-down: a red boundary flashes briefly to show the canvas size.

You can also turn on a lasting canvas boundary accompanied by a small rectangle that shows where the tap point symbol appears on a page during motion book playback. The tap point rectangle can help you avoid too much visual clutter where the tap point symbol appears on the page.

To Turn On the Canvas Boundary and Tap Point

1.      At the top of the page tab, click the canvas boundary button just to the right of the effects playback controls.

A color dialog box opens where you can choose a color for the canvas boundary. See “Specifying Color” on page 68 for instructions on choosing a color. Note that you can’t set opacity for the canvas boundary.

2.      Choose your color, then close the dialog box.

A canvas boundary appears on the workspace in the color you set. A small tap point rectangle appears on the mid-right of the canvas to show where the tap point symbol will display during motion book playback. The tap point rectangle is in Madefire red, which is the color of the tap point symbol.

Setting the Background Layer to Match a New Canvas Size

If you change the size or orientation of a canvas, the Motion Book Tool resizes all existing layers to fit within the new size, but maintains the layers’ original aspect ratio so that the layers don’t completely fill the new canvas size. When you reset a new page’s canvas size, the background layer won’t fit the new size.

Figure 2:    The canvas on the left (outlined in yellow) has a black background layer that fills it completely. After resizing from portrait to landscape orientation shown in the canvas on the right (again outlined in yellow), the background layer is resized to fit within the new canvas size. The background layer retains its original portrait aspect ratio so the layer doesn’t fill the resized canvas.

To Resize a Background Layer to Match a Resized Canvas

1.      In the layer controls to the left of the workspace, click the “background” box to open the background layer box.

2.      Change the Width and Height value boxes in the background layer box to match the width and height of the new canvas size. (You can find the width and height displayed just below the canvas in the workspace.)

The background layer size changes to match the canvas size, but the layer isn’t aligned to fit exactly on the canvas.

3.      Set the Left and Top value boxes in the background layer box each to 0 to move the upper left corner of the background layer to the upper left corner of the canvas.

The background layer now fits the resized canvas exactly.

You’ll find more information about resizing layers to match new canvas sizes, including the Crop option in the canvas size dialog box, in “Adapting a Motion Book to Different Devices” on page 189.

Changing the Workspace View

You can change your view of the workspace to best help your work in a canvas. You can zoom in to work with fine detail or zoom out to see overall layout. And you can move the entire contents of the workspace around to see different parts of a zoomed-in canvas or to move a canvas out of the way.

Zooming the Workspace

You can zoom the workspace using the zoom slider or, if your mouse has one, a scroll wheel.

To Zoom the Workspace Using the Slider

l  In the upper left corner of the workspace, drag the zoom slider up to zoom in, down to zoom out.

To Zoom the Workspace Using the Scroll Wheel on a Mouse

l  With the pointer over the workspace, roll the scroll wheel forward to zoom in, backward to zoom out.

Dragging the Workspace

To move the canvases in a workspace around, you can drag the workspace.

To Drag the Workspace

l  Move the pointer anywhere in the workspace, then drag using the mouse.

Note that you can’t drag the workspace in a few places—if the pointer is resting on a layer boundary, for example, in which case dragging moves the layer, not the workspace. The pointer will always change to an open-hand icon when you hold down the mouse button if you can drag the workspace at that location.

Maximizing Workspace Size

A bigger workspace size allows you more space to work on a canvas and see details. One of the most effective ways to increase workspace size is to maximize your browser window so the browser fills the entire screen. You can further increase workspace size by hiding the top half of the tab bar.

To Hide or Reveal the Top Half of the Tab Bar

l  Click the Maximize button  in the upper right of the tab bar.

The button toggles between hiding and revealing the top half of the tab bar.

Other View Options

The Selected pull-down above the workspace lets you hide canvases if you’re working with multiple canvases, a feature described in “Adapting a Motion Book to Different Devices” on page 189.

Viewing Layers and Effects Control Panels

A page tab has a choice of two different control panels:

l  The Layers control panel presents controls that add and set layers within the page.

l  The Effects control panel presents controls that add and set effects within the page.

Select which control panel appears using panel switching controls at the top of the control panel.

Figure 3:    Panel switching controls

To Select the Layers Control Panel

l  Click the left arrow in the panel switching controls or

l  Click the pull-down menu in the center of the panel switching controls and choose “Layers.”

To Select the Effects Control Panel

l  Click the right arrow in the panel switching controls or

l  Click the pull-down menu and choose “Effects.”

Adding a Layer to a Page

To Add a Layer to a Page

1.      In the Layers control panel of a page tab, click + in the Add new layer button.

A dialog box asks you to specify the layer type.

2.      Click the layer type you want and click Done or double-click the layer type.

A layer with a bounding box appears on the canvas and a new layer box appears in the layer stack of the Layers control panel. The new layer box is open to reveal controls for the new layer.

Working With the Layer Stack

The vertical collection of layer boxes within the Layers control panel is the page’s layer stack. Each layer you add to a page adds a layer box to the layer stack. The order of layers in the stack determines which layer covers which other layers: higher layers cover lower layers.

You can open any layer box to work with the layer’s controls, and you can change stack order to change which layers cover others on the canvas. To help you work, you can temporarily turn off higher layers so they no longer appear on the canvas and no longer obscure lower layers.

p58-fig18

Figure 4:    The layer stack in a page’s control panel shows the order of layers on the canvas. You can open each layer box in the stack, can hide any layer, and can change the order of the layers.

To Select a Layer and Open Its Layer Box

l  Click the heading of the layer’s box in the layer stack.

To Change the Name of a Layer

1.      In an open layer box, click the layer box heading name text to select it.

2.      Replace the name with a new name, then press Enter.

To Close an Open Layer Box

l  Click the layer box’s heading.

To Hide and Reveal a Layer on the Canvas

l  Click the Hide button  in the layer’s box to hide it; click it again to reveal the layer.

To Change the Order of Layers in the Layer Stack

l  Drag a layer box by its heading up or down the stack and drop it in a new location.

Adding an Effect to a Page

Each effect you add to a page must be linked to a layer. You can add an effect directly from the Effects control panel, in which case you specify a linked layer, or you can add an effect from within a layer box.

To Add an Effect From the Effects Control Panel

1.      In the Effects control panel of a page tab, click + in the Add new effect button.

A dialog box appears asking you to specify the layer you want the effect to animate.

2.      Click the layer you want to link then click Next or double-click the layer.

A dialog box or series of dialog boxes may appear asking you to define effect settings. The dialog box contents depend on the effect type you add. You’ll find details about these settings in the chapters of the section “Working With Effects.”

3.      Specify the effect settings you want, then click Next for each of the settings dialog boxes.

An open effects box appears in the effects stack in the Effects control panel. The box displays controls for the new effect.

To Add an Effect From Within a Layer Box

1.      In the Layers control panel of a page tab, click Effect + at the bottom of the layer box for the layer to which you want to add the effect.

A dialog box appears asking you to specify the layer whose layer box you just clicked.

2.      Click the layer name then click Next or double-click the layer name.

A dialog box or series of dialog boxes may appear asking you to define effect settings. The dialog box contents depend on the effect type you add. You’ll find details about these settings in the chapters of the section “Working With Effects.”

3.      Specify the effect settings you want, then click Next for each of the settings dialog boxes.

An open effects box appears in the effects stack in the Effects control panel. The box displays controls for the new effect.

Adding a Tap Point to a Page

A tap point is a special type of effect that has no linked layer. It specifies a pause point in motion book playback where the reader must tap or click to continue playback.

To Add a Tap Point to a Page

1.      In the Effects control panel of a page, click + in the Add new tap point button.

A tap point dialog box opens asking you to specify the point in page playback where you want the tap point to occur.

2.      Select an event from the list or specify a number of seconds at the bottom of the dialog box, then click Done.

An open tap point effect box appears in the effect stack. The effect box controls show the current offset of the tap point.

The events that appear in the tap point dialog box vary depending on what effects you’ve already placed on the page. “Using Tap Points” on page 171 describes tap points in more detail.

Playing Back Effects

When you first add an effect to a page, a timeline appears at the top of the workspace. The timeline represents the time needed to play back all the effects on the page. “Working With Effects on the Timeline” on page 136 describes the timeline in detail.

Playback controls above the timeline play back the effects and tap points on a page.

Figure 5:    Playback controls play back a page’s effects.

A cursor on the timeline shows current playback location.

Figure 6:    The timeline cursor shows current playback position.

To Play Back Effects

l  Click the play/pause button  in the playback controls (which appears as a play triangle whenever playback is paused).

The page plays back from whatever point playback is paused until the next tap point, the end of all effects, or until you manually pause playback. The playback time in the center of the controls displays the current playback time in seconds after the start of the page.

Note that at a tap point pause, clicking the play button is the equivalent of tapping in motion book playback.

To Pause Effects Playback

l  Click the play/pause button  in the playback controls (which appears as double pause bars whenever effects are playing).

Page playback pauses. The playback time shows the time in seconds after the start of the page where playback is paused.

To View Effects in Fast Motion or Reverse

l  Drag the cursor along the timeline in whatever direction you want to play back.

Playback occurs at the speed and in the direction you drag. This is called “scrubbing” the timeline. Playback stops wherever you drop the cursor.

To Set Playback to the Start of the Page

l  Click the Rewind button  or

l  Drag the cursor to the beginning of the timeline.

To Set Playback to the End of the Page

l  Click the Fast Forward button  or

l  Drag the cursor to the end of the timeline.

To Mute Audio During Playback

l  Click the audio mute button  once to mute audio and again to unmute audio.

Saving a Page

You can save a page to the Madefire cloud at any time. When you save a page, you save its layers, effects, and page properties. You don’t save any assets used in the page. Assets are already stored in the cloud. A page’s layers link to assets; those links are saved with the page.

To Save a Page

l  In the page tab, click the save button  on the right of the tab bar.

The Motion Book Tool saves the page to the Madefire cloud. The page appears under “Recent pages” in the asset bar. Its page name there is the name assigned in the Name box in the page tab’s control panel.

Note that you can assign the same name to different pages you save to the Madefire cloud. The cloud distinguishes the pages internally with its own internal ID, so duplicate page names aren’t a problem for the cloud. You should, however, use unique page names if possible to help you distinguish your own pages from each other.

Saving a Duplicate Page

You may at some point want to create a duplicate of a saved page. Duplicating a page is useful, for example, if you have a base page that defines the beginning of each page in your motion book (common frames, design elements, and so on). You can duplicate the simple base page once for each page in your motion book, then fill in each base page copy with the contents for each individual page.

Duplicating a page is also useful for splitting up a page that’s gotten too big, filled with too many layers and effects to work with easily. By duplicating the page, you can then remove the second half of the original and the first half of the duplicate to create two separate consecutive pages that are, in effect, the original page split in two.

To Save a Duplicate Page Under a Different Name

1.      Click the save as button  on the right of the tab bar.

A save as dialog box opens asking you to enter a new name for the duplicate page.

2.      Enter a new name in the dialog box then click Submit.

The Motion Book Tool saves a copy of the page to the Madefire cloud using the new name you provided.

Have more questions? Submit a request

Comments

Powered by Zendesk