8

DHTML:  Creating a rotating graphic banner

Home The trick behind creating a rotating ad banner is to insert your images in layers, put your layers in a timeline set to Autoplay and Loop, and use the Show-Hide Layers behavior to display the images sequentially.
 

Inserting layers and images

  1. In Dreamweaver, insert a layer by either clicking on the Draw Layer icon, or by Insert > Layer from the drop down menu.
  2. With the cursor blinking within the new layer, use the Insert Image icon or Insert > Image from the drop down menu to browse to the desired image.

Stacking and hiding the layers

  1. If you want the images to show one at a time, be sure to align your images one on top of the other.  Else, you can have images appear randomly on the page.
  2. Select layers by clicking on the box that appears in the upper left corner of a layer, or by accessing by the icon (if your Preferences allows you to view Invisible Elements.)  You can also use the Layers Palette (Window > Others > Layers) to choose individual layers.
  3. Note the X and Y coordinates within your Properties Inspector.  You can use this to align each individual layer, if you wish. 
  4. If instead of the layer, you select the individual image on top of the layer, you can link to another page just like any other image.
  5. Set visibility of Layer 1 to visible and the remaining layers as hidden.  Do this either by clicking the eye in an open or shut position (on the layers palette), or by changing Vis in the Properties Inspector.

Setting the Show-Hide Layers Behavior

  1. Window > Others > Timeline to access the Timeline panel.  Here we can insert Behaviors in the channel marked B just like you would in Flash.  Click on Frame 15 in the behaviors channel, and then open your Behaviors window.  Click on the + sign to add a behavior and scroll down to the Show-Hide Layers behavior to add it to the timeline.
  2. I chose Frame 15 because Dreamweaver is generally set to 15 frames per second (fps), and it generally runs at a pretty good speed at 15 fps.  However, you can add more frames or less to speed up or slow down your animation.
  3. When you add the behavior to Frame 15, a dialog box will appear.  Make layer 2 visible, and all other layers hidden.
  4. Continue every 15 frames inserting the Show-Hide Layers behavior.  Choose the next layer in the sequence each time to Show, and have the remaining layers Hidden.  The very last behavior should be exactly hwo you started - layer 1 showing and the rest hidden.
  5. Be sure to check Loop and Autoplay in the Timeline window.  If you can't see these in your Timeline window, make it larger by dragging the lower right hand corner.

http://www.casabasa.com * email me sharon@casabasa.com * © copyright 1998-2008  * :::last revised: October 19, 2008

Return to the Top