Chapter 20: Effects Basics


Effects Basics

“Assembling a Page” on page 47 showed you how to switch to effect controls on a page, how to add effects to layers, and how play back effects using the playback controls. Before you get into working with specific effects, this chapter describes the basics of effects and how to work with features common to all effect types: the timeline, effect controls, and effect groups. It also describes how to avoid effect conflicts.

About Effects

Layers place assets on a page; effects change those assets over time. Effects may move, rotate, or scale a layer, change a layer’s transparency, or add moving highlights. They may also fade sound layers in and out. Effects animate static pages.

Effect Types

The Motion Book Tool offers ten different types of effects. Three of them move layers:

l  Slide In starts a layer from outside the canvas where it’s not visible and moves the layer in from the top, bottom, left or right of the canvas to its original position inside the canvas.

l  Slide Out starts a layer from its original position inside the canvas and moves the layer left, right, up, or down until it leaves the canvas and is no longer visible.

l  Move moves a layer in any direction from its original position to a new position anywhere in the workplace (including on or off the canvas).

Move is the most versatile moving effect and can define any linear move. Slide In and Slide Out are, in effect, Move presets designed to quickly implement two of the most common types of layer movement.

Three effect types change layer transparency. Two of these also change sound volume:

l  Fade In starts a layer from complete transparency (invisible) and increases opacity to the layer’s original transparency setting (usually completely opaque). If applied to a sound layer, it starts from complete silence and increases volume to the layer’s original volume setting.

l  Fade Out starts a layer from its original transparency setting (usually completely opaque) and increases transparency until the layer disappears. If applied to a sound layer, it starts from the layer’s original volume setting and decreases volume to silence.

l  Alpha starts a layer from its original transparency setting and changes to a second transparency setting over time. Alpha does not affect sound layers.

Alpha is the most versatile transparency effect. Fade In and Fade Out are effectively Alpha presets that implement two of the most common transparency transitions.

Other effect types:

l  Scale increases or decreases the size of a layer and its asset from their original size.

l  Rotate rotates a layer a number of degrees clockwise or counterclockwise from its original orientation.

l  Highlight adds a short gleam to a layer to show that the user can tap the layer in the Madefire Reader to go to the layer’s link. (“Linking a Layer” on page 132 provides more details.)

And finally an effect that isn’t linked to a layer:

l  A tap point adds a pause in page playback where the Madefire Reader waits for the reader to tap to continue.

Effect Definition

The Motion Book Tool defines each effect (except tap points) by:

l  Effect type

l  Target layer, the page layer that the effect controls

l  Offset, the time in seconds after the start of the page that the effect starts

l  Duration, the number of seconds the effect lasts

l  Effect properties, a group of settings specific to the effect type such as degrees to rotate or pixels to move horizontally or vertically

Once an effect is in place, effect controls can change the effect settings to control when and how the effect executes during motion book playback.

Effect Groups

Some effects combine to create more elaborate effects: a move effect and a rotate effect can work together, for example, to move a layer across the canvas while rotating it. Or a set of fade-in effects can work on a set of layers to fade in all the layers simultaneously.

An effect group collects two or more effects into an easily manageable group of member effects. The group defines its own offset (start) time. All member effects within the group have offsets that are reckoned from the effect group offset, not from the beginning of the page playback.

For example, consider an effect group with an offset of 5 seconds. One of its member effects has an offset of 0 seconds while a second member effect has an offset of 1. The first member effect starts at 5 seconds (5+0) while the second member effect starts at 6 seconds (5+1).

By changing the effect group offset, you move all of its member effects with it on the timeline. If, in the last example, you changed the effect group offset from 5 seconds to 2 seconds, then the member effects would start at 2 (2+0) seconds and 3 (2+1) seconds.

Effects and Child Layers

If you apply an effect to a layer that has one or more child layers, the effect applies equally to the parent layer, all of its child layers, and down through nested layers to children of child layers if they exist. If a child layer has its own effect that executes at the same time, then the child’s effect combines with the parent’s effect to control the child layer.

For more information on parent and child layers, read “Using Child Layers and Container Layers” on page 111.

Working With Effects on the Timeline

The timeline appears at the top of a page’s workspace when you first add an effect to the page. It represents, from left to right, the total time it takes to play all the page’s effects. As you add and change effects to increase the playback time for the page, the timeline stays the same length but changes scale to show the full page playback time.

Each tick along the bottom of the timeline represents a second. Any tap points on the page appear as red dots below their locations on the timeline.


Figure 1:    The timeline represents the total playback time of a page.

The timeline cursor represents the current position in page playback. As you play the page using the playback controls (described in “Playing Back Effects” on page 58), the cursor moves along the timeline to show you where you are in the playback. You can also drag the cursor along the timeline in either direction (called “scrubbing” the timeline) to view any part of playback at whatever speed you drag.

The effects triangle at the left end of the page timeline opens the effect bars above the timeline where you can view effect position and change the offset and duration of effects. It also reveals the page thumbnail button.


Figure 2:    The effects triangle opens effect bars above the timeline and reveals the page thumbnail button.

Changing Effect Offset and Duration

To Change an Effect’s Offset and Duration in the Timeline

1.      If the effect bars aren’t visible in the timeline, click the effects triangle to open them.

2.      To increase or decrease an effect’s duration, drag either of the sizing handles of the effect’s bar in or out.

The shorter the effect bar, the shorter the effect duration. If you drag the left handle in or out, you change the effect offset as you change duration. The Duration value and possibly the Offset value) in the effect’s effect box changes to reflect your changes here.

3.      To change an effect’s offset without changing duration, drag the effect’s block left or right anywhere along the block’s length (the cursor turns into a four-headed arrow when it’s ready to drag the block).

Dragging left decreases the offset; dragging right increases it. The Offset value in the effect’s effect box changes to reflect your changes here.

Setting a Page Thumbnail

When you save a page, the Motion Book Tool creates a page thumbnail to represent the page in the asset bar and in a project page if you drag the page into a project.

Figure 3:    A page thumbnail represents a page in the asset bar.

When you publish a project as a motion book, the Motion Book Tool publishes each page’s thumbnail for use in the motion book. Whenever a reader taps the center of the screen in the Madefire Reader, the pages of the motion book appear as page thumbnails across the bottom of the screen. The reader can tap any page thumbnail to jump to that page.

The Motion Book Tool creates a page thumbnail by default by capturing the page as it appears at the end of playback. That’s not always the best image to use, though, because it might reveal something in the page that would ruin the story, or it might show the page after many layers have disappeared from the page, leaving the page mostly blank.

The page thumbnail tool sets the point in playback where the Motion Book Tool captures the page’s thumbnail.

To Set a Thumbnail Image for a Page

1.      If the page thumbnail button isn’t visible to the left of the timeline, click the effects triangle to present the button.

2.      Drag the cursor in the timeline until the canvas displays the version of the page you want as the thumbnail.

3.      Click the page thumbnail button.

A small turquoise triangle appears beneath the page timeline at the location where the Motion Book Tool will capture the thumbnail image.

4.      To save the new thumbnail in the cloud with the page, save the page.

Working With Effect Groups

Once you create an effect group (described in “Creating Effect Groups” on page 144), the group appears as an effect bar with its own triangle to the left. Clicking the effect group triangle opens the effects group to show its member effects.


Figure 4:    An open effect group shows its member effects.

You can work with the effect group or with each of its member effects individually.

To Change Offset and Duration in an Effect Group

1.      If the effects bars aren’t visible, click the effects triangle to open them.

Any effect group bars in the timeline appear preceded by an effect group triangle.

2.      To change the effect group’s offset, drag the effect group timeline left or right.

All member effects change their location and timing along with the effect group. Note that you can’t change the effect group duration, which is the sum of its member effects’ durations.

3.      To see the effect group’s member effects, click the effect group triangle to open the group.

The member effect bars appear below the effect group timeline.

4.      To change a member effect’s offset or duration, drag its effect bar or effect bar handles just as you would for independent effects.

The effect group changes duration to match the sum duration of its member effects.

Working With Effect Controls

When you create an effect in a page, an effect box appears in the page’s effect stack. You can open the effect box by clicking its heading or by clicking on the effect’s timeline above the canvas. Use the effect box controls to set the parameters of the effect.


Figure 5:    An effect box contains controls that set effect parameters.

Each effect has effect-specific controls described in later chapters describing those effects. Each effect also has a set of controls common to all effects, described here.

Changing Name, Offset, Duration, and Target Layer

To Change an Effect’s Name, Offset, Duration, and Target Layer

1.      To change an effect’s name, click on the effect box to select the box, click on the name to select the name text, enter a new name and press Enter.

2.      To change the offset (start time), enter a new offset value in seconds in the Offset value box or use the up/down arrows to increase or decrease the value.

If this is an independent effect, it now starts after the page start by the offset value. If this is a member effect of an effect group, it now starts after the page start by the sum of its own offset and the effect group offset.

The effect bar shifts above the timeline to reflect the new offset.

3.      To change the effect’s duration, enter the number of seconds you want the effect to last in the Duration value box or use the up/down arrows to increase or decrease the value.

The effect bar grows or shrinks to reflect the new duration.

4.      To select a new layer for the effect, choose a layer name from the Target frame pull-down.

The effect now affects the new layer and no longer affects the old layer.

Changing Effect Progression (Movement or Easing)

As an effect executes on the page, its progression can be steady or varying depending on the quality you want. The effect can, for example, progress quickly at the start, then slow down at the end, or can reverse itself briefly at the beginning, shake a bit at either end, or progress in a variety of other ways.

Each effect’s controls offer a progression pull-down labeled “Motion” that offers a variety of different progression rates. The Move effect replaces the Motion pull-down with two progression pull-downs. One—Horizontal easing—affects horizontal movement. The other—Vertical easing—affects vertical movement.

Each option in the pull-down shows a small graph of progression over time to give you a feel for its quality. The best way to understand how each option affects an effect’s execution is to try them. You can see their effect most easily in a move effect.

Figure 6:    Progression options each show a small graph representing how the option progresses over time.

The following table describes the progression options.

                                              Table 1:   Progression options (for Motion, Horizontal easing, or Vertical easing pull-downs).

Progression Option

Progression Quality


The effect progresses smoothly.

Back at start

The effect progresses in the opposite direction (or transparency) at the start, then smoothly changes direction to progress forward.

Back at end

The effect progresses smoothly until the end, where it goes beyond the final location (or transparency) and then reverses smoothly to return to the final location.

Back at start & end

Combines Back at start and Back at end.

Bounce at start

Adds a series of increasing jerks forward until the effect takes off to progress to its end. In essence a reverse-motion bounce, the opposite of Bounce at end.

Bounce at end

Adds a series of diminishing jerks back when the effect reaches its end location: looks (in motion) like the object is bouncing against its final destination.

Bounce at start & end

Combines Bounce at start and Bounce at end.

Elastic at start

Adds a series of increasing oscillations back and forth until the effect reaches its end location (or transparency)

Elastic at end

Adds a series of decreasing oscillations back and forth that occur when the effect reaches its end location (or transparency); the opposite of elastic at start.

Elastic at start & end

Combines Elastic at start and Elastic at end.

Quadratic at start

A slow start to the effect that increases in pace until the effect finishes abruptly.

Quadratic at end

The effect starts abruptly with a slow ending that decreases in pace until the effect finishes.

Quadratic at start & end

Combines Quadratic at start and Quadratic at end.

Quintic at start

An exaggerated version of Quadratic at start: a very slow start to the effect that increases pace dramatically until the effect finishes abruptly.

Quintic at end

An exaggerated version of Quadratic at end: an abrupt start and fast progression to the end, when progress slows down dramatically to finish at the final location (or transparency).

Quintic at start & end

Combines Quintic at start and Quintic at end.

To Change an Effect’s Progression

l  In the effect box, choose the progression you want from the Motion pull-down.

If it’s a Move effect, choose a progression from either or both of the Horizontal easing pull-down or the Vertical easing pull-down.

Turning Off or Deleting an Effect

If you want to see a page play back without an effect executing, you can turn off the effect without removing it.

To Turn an Effect Off or On

1.      To turn an effect off, in the effect box heading click the eye icon on the right ().

A slash appears through the icon to show that the effect is turned off. The effect won’t execute when you play back the page.

2.      To turn an effect back on, click the eye icon.

The slash disappears to show that the effect is turned off. The effect executes when you play back the page.

If you no longer want an effect in place, you can delete it completely.

To Delete an Effect

l  In the bottom of the effect box, click “Delete x”.

The effect box disappears along with the effect timeline above the page timeline. The effect no longer executes.

Using Effect Groups

Effect groups, as described earlier, create a group of two or more member effects that execute as a group. Each member group’s offset is reckoned from the group’s offset, so by changing the group offset you can move all of its member effects together in the timeline.

Creating Effect Groups

Create an effect group by linking two effects together through their start times.

To Create an Effect Group

1.      Create the first member effect as an independent effect whose offset is at the location where you want the effect group to start.

2.      Click Add new effect + at the top of the effect stack to create a new member effect.

3.      When the dialog box asks for the effect’s start time, choose the option that says “When <first effect name> starts,” then finish creating the effect.

The new effect box appears within a new effect group box that now also contains the first effect as a member effect. The name of the new effect group is the same as the name of the first member effect.

Change the name of the effect group to something that reflects the nature of the group.

Note: if you want to create a new independent effect that starts at the same time as another effect and you do not want the new effect to become a member effect, don’t choose any of the “start” options in the start dialog box. Enter a start value in seconds instead.

Modifying Effect Groups

An effect group’s effect box contains simple controls and effect boxes for each of its member effects. The simple controls (Offset and Delete) work just as they do in independent effect boxes.

Each of the member effects within an effect group has its own effect box that works just as it does for an independent effect with one important difference: the offset value is now reckoned from the effect group offset instead of from the page start.

To Change an Effect Group’s Offset in the Effect Group Box

l  Enter a new value in seconds in the Offset value box or use the up/down arrows to increase or decrease the offset.

All member effect offsets are reckoned from the effect group’s offset, so moving the offset forward or backward in the timeline moves all member effects with the effect group.

To Delete an Effect Group

l  Click “Delete x” at the bottom of the effect group box.

The Motion Book Tool deletes the effect group and all of its member effects.

Once you’ve created an effect group, you can move independent effects into the group as member effects, or remove member effects from the group to turn them into independent effects.

To Add an Independent Effect to an Effect Group

l  In the effect stack, drag an independent effect box into an effect group box until an empty space appears, then drop the effect box.

The independent effect box becomes a member effect box, enclosed within the effect group box. The effect’s offset is now reckoned from the effect group offset instead of from the page start.

To Remove a Member Effect from an Effect Group

l  In the effect stack, drag a member effect box outside the effect group box and drop it there.

The member effect box becomes an independent effect box outside the effect group box. The effect’s offset is now reckoned from the page start instead of from the effect group offset.

Avoiding Effect Conflicts

You cannot apply two motion effects (Slide in, Slide out, or Move) or two transparency effects (Fade in, Fade out, or Alpha) to a layer if the effects execute at the same time. If two motion effects or two transparency effects overlap at all for the same layer, the effect bars in the timeline turn red and the effects’ boxes in the effect stack display a red heading. If you roll your pointer over any of these red displays, a pop-up describes the conflict.

To fix a conflict, you can move the effects so they no longer overlap, link the effects to different layers, or delete one of the effects.


Have more questions? Submit a request


Powered by Zendesk