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

Lesson 16. Animating with Timelines > Creating the Animation Layers

Creating the Animation Layers

You can easily create more complex animations in Dreamweaver. The remaining exercises in this lesson take you through the process of creating a more complicated animation. You'll start off by creating all the layers that will be used in the animation.

1.
Create a new page and save it as navigate.html in the Lesson_16_Timelines folder. Title the page Lights of the Coast: Coastal Navigation. Set the background of the page to white and the text to black. Draw one large layer on the page, name the layer cliffs in the Layers panel, insert the cliffs.jpg image from the Lesson_16_Timelines folder into the layer, and give the image a 1-pixel border.

The cliffs image depicts a fictitious environment. This mock coastline will serve as the background for an animation that you will create to serve as an illustrative example of how lighthouses aid navigation.

2.
Draw three small layers along the edge of the coast. Name the topmost layer white and insert LHW_off.gif into it; name the middle layer red and insert LHR_off.gif into it; and name the bottommost layer black, inserting LHB_off.gif into it.

All images are in the Lesson_16_Timelines/Images folder. These layers now contain the graphics that each change during the animation.

TIP

While a layer is selected, you can use the arrow keys to get that layer into the exact location you want.

3.
Draw a small layer in the lower right corner of the cliffs image. Name the layer ship and insert ship_Y.gif into it.

In the finished animation, the ship layer will move and cause changes to occur to the white, red, and black layers.

Your document should now look similar to the example shown here.

4.
Draw a layer to the left of the black layer and name it blackText. Insert a table into the layer with 1 row, 1 column, cell padding of 1, cell spacing of 0, width of 150 pixels, and a 0 border. Set the background of the table to black. Click inside the table and insert a table with 1 row, 1 column, cell padding of 2, cell spacing of 0, width of 100 percent, and a 0 border. Set the background of this nested table to white. Type Captain sees Black Stripe Lighthouse and knows he needs to head northeast. into the nested table and format it as Verdana, –2.

You have just inserted a table with a second table nested inside of it in order to create a border like you did in Lesson 4. You may need to adjust the position of this new layer so it does not overlap the black layer containing the lighthouse icon.

5.
Repeat step 4 to add a layer called redText next to the red layer with the text Captain recognizes through the fog the flashing pattern of the Red Stripe Lighthouse and knows he needs to head north. Repeat step 4 again to add a layer called whiteText next to the white layer with the text Captain sees the White Lighthouse and drops anchor at the final destination.

TIP

To speed up the process, you can copy the outer table inside the blackText layer and paste it into the new layers you create in this step. Then simply replace the text in the table with the corresponding text for that layer.

These text layers will be hidden at the beginning of the animation. They will appear individually over the course of the animation.

6.
Add the black, blackText, red, redText, and ship layers to the timeline. Place each layer in its own animation channel, starting each one in frame 1. Check the Autoplay box.

The timeline now contains five animation channels: black, blackText, red, redText, and ship. The animation is set to begin when the page loads. The white, whiteText, and cliffs layers should not be added to the timeline.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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