Chapter 8: Animating Layers with Effects

Follow

Animating Layers With Effects

All of the elements are now in place on the page, each in its own layer. All the images appear at once, though, so some images block out others. And none of the sounds play.

Adding one or more effects to each layer allows us to animate the layers and bring life to the page. Effects specify how and when layers appear, if they move or resize, if they change size, and much more. Adding tap points throughout adds pauses to wait for user input to continue.

Our page needs effects to pace page element presentation. The effects should:

Present the texture layer, quickly fade in the panel and the first word balloon, and start the steps sound playing.

  • Wait for a reader tap, then present the second word balloon.
  • Wait for a reader tap, then present the last word balloon.
  • Wait for a reader tap, then fade out the panel, steps sound, and all word balloons so only the texture layer remains.
  • Fade the texture layer out with a jerk, play the impact sound of crumbling rocks, and reveal the Engine at work.
  • Play the march sound as a dramatic sound track to the Engine at work.

Adding an Effect

Use the control panel to add, delete, and control effects. The control panel switches back and forth between layer controls and effect controls. When set to Layers, the control panel displays the layer stack: layer boxes for each layer on the page. When set to Effects, the control panel displays the effects stack: effects boxes for each effect created for the page.

Each effect on a page must be tied to a layer that the effect controls.

To Add a Fade In Effect to the Panel Layer

1.      Click the right arrow at the top of the control panel to see the Effects control panel.

The Effects panel appears with two buttons that add new effects and tap points.

2.      Click the “Add new effect” button.

A dialog box presents layers on the page from which you can choose.

3.      Scroll down in the box and choose “panel” to link this new effect with the panel layer, then click “Next”.

A dialog box presents the types of effects that you can apply to this layer.

4.      Select “Fade In” then click Next to create a Fade In effect for the panel layer.

A dialog box asks at what point in page playback the effect should start.

5.      Enter “0” in the “At exactly __ seconds” box to specify that the effect starts at the very beginning of playback, then click “Next”. (Specifying “At the start” sets the same start time.)

A dialog box asks how long the effect should last.

6.      Revise the text box to “0.5” to specify a half second fade in, then click “Done”.

A new effects box labeled “fade in panel” appears in the control panel for the effect you just created.

Playing Back Effects

By adding a half-second fade-in effect to the panel layer, you’ve just created a 0.5-second timeline for page playback. The timeline appears at the top of the page’s workspace, just below the tab bar, which contains playback controls for the timeline.

 

Playing back the timeline goes through all effects in the page, in this case the single fade-in you just created.

To Play Back the Timeline

1.      Click the Rewind button in the playback controls to set playback to the beginning of the timeline.

2.      Click the play button.

The timeline plays: the cursor moves along the timeline, and the panel fades in quickly.

None of the other elements change during playback because they have no effects assigned to them.

Adding Tap Points

The three word balloons should each appear in succession—1, 2, 3—so the dialog appears in the right order. The background sound “steps” will add drama to the scene. And tap points will let the reader read the word balloons at their own pace.

To Fade In Word Balloons and the Steps Sound

1.      Follow the steps you took to add a fade in for the panel, but this time specify “balloon1” as the target layer. Set effect type “fade in,” start time “0.5”, and duration “0.5”.

2.      Repeat for the target layer “balloon2” with these settings: “fade in”, start time “1”, duration “0.5”.

3.      Repeat for the target layer “balloon3” with these settings: “fade in”, start time “1.5”, duration “0.5”.

4.      Repeat for the target layer “steps” with these settings: “fade in”, start time “0”, duration “0.5”.

Four new effects appear in the control panel, one for each word balloon and one for the steps sound. There are now four fade-ins that occur every half second from the start: the panel and steps sound (simultaneous fade-in), then balloon1, balloon2, and balloon3.

5.      Click the Save icon in the tab bar to save your work thus far.

6.      Rewind the timeline then play it back to see and hear your effects.

The panel and word balloons appear in quick succession. The steps sound fades in with the panel and continues to play when the timeline ends at 2 seconds. (The sound file is almost 40 seconds long.)

7.      Click the rewind button to stop sound playback and reset the timeline.

The dialog needs a tap point after each word balloon to give the reader time to read the dialog.

To Add Tap Points

1.      Click “Add new tap point” at the top of the Effects control panel.

A dialog box asks where the tap point should be located.

2.      Enter “1” in the “At exactly __ seconds” text box to specify a tap point at 1 second in the timeline, then click Done.

A red tap point appears at 1 second on the timeline and a new tap point effect box appears in the control panel.

3.      Repeat the first two steps to create a second tap point, this time located at 1.5 seconds in the timeline.

4.      Repeat the first two steps to create a third tap point, this time located at 2.0 seconds in the timeline.

5.      Click the Save icon in the tab bar to save your work thus far.

6.      Click Rewind to set the timeline to the beginning, then click Play.

The panel and sound fade in followed by the first word balloon. Playback then stops at the first tap point, but the sound continues in the background.

7.      Click Play again to resume playback.

The second word balloon fades in, then playback stops at the second tap point.

8.      Click Play again to resume playback.

The third word balloon fades in, then playback stops at the third tap point (which is also the end of the timeline).

9.      Click Rewind to reset the timeline and turn off sound playback.

Fading Out Multiple Layers

Now that the dialog has set the scene for the Engine to appear, we need to get rid of the panel and word balloons so we can then reveal the Engine. We’ll fade the layers out simultaneously over two seconds. We’ll start the fadeout at 2 seconds, precisely where the last tap point is, so the fadeout starts once the reader taps.

To fade each layer out, we add a second “fade-out” effect to each layer. A layer may have multiple effects to animate it at different points in the timeline.

To Fade Out the Panel, Word Balloons, and Sounds Together

1.      Click “Add new effect,” select “panel” as the target layer, select “Fade Out” as the effect type, specify a start time of 2 and a duration of 2, then click Done.

2.      Repeat the first step with the same values, but specify “balloon1”as the target layer.

3.      Repeat the first step with the same values, but specify “balloon2” as the target layer.

4.      Repeat the first step with the same values, but specify “balloon3” as the target layer.

Four new effect boxes appear in the control panel and the timeline grows to 4 seconds long.

5.      Rewind the timeline if necessary, then click Play multiple times to play back through the tap points.

After the last tap point the panel and the word balloons fade out slowly to leave the texture panel fully exposed.

Revealing the Hidden Layer

It’s time now to reveal the Engine breaking through the texture layer. To do that, fade out the texture layer with an irregular fade, provide a crashing sound, and then bring up a march to accompany the image of the Engine.

To Reveal the Hidden Layer (the Engine) and Start Theme Music

1.      Click “Add new effect,” select “texture” as the target layer, select “Fade Out” as the effect type, specify a start time of 4 and a duration of 1, then click Done.

A new effects box “fade out texture” appears at the bottom of the control panel.

2.      Scroll down to the “fade out texture” effect box and, if it’s not open, click the box’s title bar to open it.

3.      In the Motion pulldown choose “Bounce at start” to give the fadeout a jolting quality.

4.      Scroll up to the top of the control panel, click “Add new effect,” select “impact” (a crashing sound) as the target layer, select “Fade In” as the effect type, specify a start time of 4 and a duration of .1 (to start the sound almost immediately), then click Done.

5.      Click “Add new effect,” select “march” (the theme music) as the target layer, select “Fade In” as the effect type, specify a start time of 4 and a duration of 2 (to fade in slowly), then click Done.

6.      Click the Save icon in the tab bar to save your work thus far.

7.      Rewind the timeline if necessary, then click Play multiple times to play the entire page.

After the panel and balloons fade out, the texture layer disappears with a shake and a crash, the Engine appears, and the theme music fades in.

 

Have more questions? Submit a request

Comments

Powered by Zendesk