|
Create the layer that appears as images load
Once you have all image layers in place and the timeline ready to go, you need a way to tell users what's happening as the images load in the browser. You may have several images in the sequence, and you don't want users staring at broken image icons. To solve this problem, create a text-only layer that covers the other layers until they're loaded.
To create a text-only layer:
| 1 |
Create a new layer that is the same size as the image layers. |
|
The idea is to hide loading from the user. You can also make the layer cover the images and the button, or make it cover the whole page. |
| 2 |
With the cursor inside the layer, type the words "loading images, please wait . . . ." |
|
Apply any text formatting (such as color, alignment, and font) using the Property inspector. |
| 3 |
Select the layer by clicking its name in the Layer inspector. |
| 4 |
In the Property inspector, change the layer's name to Loading. Set its visibility to visible and its z-index to 1. Set its left and top coordinates to the same positions as the other layers. |
 |
|
To hide the loading layer when the page has finished loading:
| 1 |
Use the tag selector at the bottom left of the Document window to select the BODY tag. |
| 2 |
Choose Window > Behaviors to open the Behavior inspector. Select Show/Hide Layers from the Actions pop-up menu. |
| 3 |
In the dialog box that appears, select the layer called Loading from the list and click Hide. Select the first image layer (Layer1) from the list, click Show and then click OK. |
| 4 |
Save your document. |
| 5 |
Choose File > Preview in Browser and select a 4.0 browser from the list. |
|
You must use a 4.0 browser; earlier browsers do not support layers. |
|
If you don't see the Loading layer, it means that everything loaded very quickly. Click the Forward button a few times to see your image sequence. If you encounter problems, open the Dreamweaver demo file in Dreamweaver and compare it to your own file. Unlike the hand-coded example file, the Dreamweaver demo file was created entirely in Dreamweaver. |
|
|
|
