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

Lesson 15. Creating Layers > Changing Layer Visibility

Changing Layer Visibility

You can change layer visibility in order to show or hide a layer. This can be useful when using layers to add user interactivity. You may need to change the visibility of a layer if you are creating dynamic content that displays in response to user interaction. For example, you can use timelines (covered in Lesson 16) to hide a layer until the user clicks a button or rolls over an image.

1.
Select the Layer3 layer in the layers.html document. Click in the column to the left of the Layer3 name in the Layers panel to change the visibility of that layer. Click until you see a closed eye icon.

TIP

To change the visibility of all layers at once, click the eye icon at the top of the column.

There are three visibility options on the Layers panel: inherit, visible, and hidden.

  • Inherit uses the visibility property of the layer's parent. For this option, there is no icon displayed in the visibility column.

  • Visible displays the layer contents, regardless of the parent's value. For this option, there is an open eye icon displayed in the visibility column.

  • Hidden displays the layer content as transparent, regardless of the parent's value. If you set a layer to hidden, the layer markers and the Layers panel may be the only ways for you to select that layer. For this option, there is a closed eye icon displayed in the visibility column. Even though you have set the Layer3 layer to hidden, you will still see scroll bars because hidden layers take up the same space as if they were visible.

On the Property inspector, there is a fourth visibility option: Default does not specify a visibility property, but most browsers interpret this as inheriting the parent's value.

NOTE

Choose Edit > Preferences and select the Layers category to set the default visibility for new layers.

2.
Save the layers.html document.

When the Layer3 layer is selected, you will be able to see it in the document window. When it is not selected, the layer will disappear, making the document window look just like it will in the browser.

Leave this 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