Accessibility
 
Home > Products > Dreamweaver > Support > Linking and Navigation
Dreamweaver Icon Macromedia Dreamweaver Support Center - Linking and Navigation
Creating an animated navigation bar in Flash

To take full advantage of the dynamic visual capabilities of the Web, use Flash to create a navigation bar with animated buttons.

View the navigation with animated buttons created in Flash.

Example 3: Animated navigation bar made in Flash

To make an animated navigation bar in Flash, create a button symbol for the static (non-animated) button states and an animated symbol for the animated button states:

Create or import a graphic to use as a button. The example above uses a simple ellipse with a solid-color fill.
Convert the graphic into a symbol, and then choose the Button behavior. You use the button's four-frame timeline to specify the different states of the button.
Create another symbol from the original button graphic and choose the Movie Clip behavior to create the animation for the Over or Down state of the button.
In Edit Symbol mode, use the Flash tweening features to create an animation that varies the button's appearance over a specified number of frames. The example above uses tweened frames to create an animation that varies the size and alpha setting (transparency) of the button ellipse.
After creating the movie clip, select the appropriate keyframe in the button symbol timeline and drag the movie clip symbol onto the stage with the button symbol. For example, to have the animation play as the Over state for the button, select the Over keyframe in the button symbol timeline and drag the movie clip symbol onto the stage with the button symbol.

Copy the button symbol and modify it to create additional buttons for the navigation bar. For more information on creating animated buttons, see Create an animated symbol and Create animated buttons in the Tutorial in Flash 4 online Help.

After you've completed the navigation bar, use the Flash Publish command to publish the movie for placement on the Web. The Publish command exports the navigation bar as a Flash Player movie and creates additional files that may be needed to display the navigation bar, including a supporting HTML document that specifies display parameters for the movie and alternative graphic versions of the navigation bar, such as an animated GIF or a JPEG, to be displayed in browsers that don't support Flash Player.

If you are using Dreamweaver to create your Web site, you can place the Flash Player movie directly on an HTML page in Dreamweaver without creating HTML code in Flash. Dreamweaver automatically adds the HTML for the Flash movie to the HTML page (see Inserting Flash movies in Dreamweaver 3 online Help).

If you are using an HTML editor other than Dreamweaver to create your Web site, you can use the Flash Publish command to prepare the supporting HTML document needed to display the movie, and then copy the Flash HTML code into an HTML document in your image editor to place the navigation bar on a Web page in your site (see Publishing and Exporting in Flash 4 online Help).

This excerpt from the Flash- generated HTML code specifies parameters for the object and embed tags, including the movie name ( src ), size ( width and height ), and location of the Flash Player plugin ( pluginspage ):

<body bgcolor="#FFFFFF">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,30,0"
 width="110" height="150">
<param name=movie value="buttons.swf">
<param name=quality value=high>
<embed src="buttons.swf" quality=high  pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
 type="application/x-shockwave-flash"  width="110" height="150">
</embed> </object> </body>
To Table of Contents Back to Previous document