• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Lesson 16. Animating with Timelines > Changing the Visibility of Layers

Changing the Visibility of Layers

Timelines allow you to do more than simply moving layers. You can also use timelines to change the visibility of a layer over time. For example, you might want a layer to be displayed only after another layer animates across the screen. The initial state of the second layer would be hidden and would then become visible at a certain frame.

1.
Select the last keyframe of the black layer and move it to frame 10.

The default length of an animation bar is 15 frames, so you need to adjust the black animation bar to match up with the second position of the ship you set at frame 10 in the previous exercise.

TIP

You can also use the eye icons on the Layers panel to change visibility. This was covered in Lesson 15.

2.
Select the first keyframe of the blackText layer and use the Vis drop-down menu on the Property inspector to change the visibility of the layer to hidden. Select the last keyframe of the blackText layer at frame 10, and use the Vis drop-down menu to change the visibility to visible.

In this step, you have changed the visibility of the blackText layer so it will be hidden when the page loads initially. This layer will appear when the ship moves to its second position in frame 10.

NOTE

You have not changed the visibility of the black layer; the Black Stripe Lighthouse will remain visible throughout the animation.

3.
Select the first keyframe of the red layer and change the visibility of the layer to hidden. Select the last keyframe of the red layer, drag it to frame 20, and change the visibility of the layer to visible.

The visibility of the red layer is changed to visible when the last keyframe is selected, because the layer should only appear at that point. Frame 20 is the third position of the ship layer.

4.
Repeat step 3 for the redText layer.

You have changed the visibility of both the Red Stripe Lighthouse and its corresponding text. Both layers will be hidden initially and become visible at the same time the ship layer moves near them in frame 20.

Your Timelines panel should now look like the example shown here.

5.
Save the navigate.html file and test it in the browser.

NOTE

If the animation doesn't play, make sure Autoplay is selected in the Timelines panel.

The ship moves from its first position in the lower right corner of the image of cliffs and water, and it stops at the second position. The Black Stripe Lighthouse is set to be visible throughout the animation, but the blackText layer was set to hidden in the first frame and now appears when the ship reaches the lighthouse. As the ship moves up and stops at the third position, the hidden red and redText layers become visible. The ship continues upward to the fourth position, reaching the last layer, white, which has been visible during the entire animation. The ship then moves slightly to its ending position.

NOTE

In addition to changing the visibility of a layer, you can also change the size of a layer. The process is the same as the techniques you used to change the visibility during the animation: To change the size of a layer, you would select the keyframe at which you want the change to occur on the animation bar for the layer you wish to affect, then change the W and H text fields on the Property inspector or use the resize handles in the document window. Keep in mind, browsers have varying capabilities and not all will display properly—test your pages to be sure.

Leave the navigate.html file open for the next exercise.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint