Next, with your button selected, go to the top nav bar and highlight “Window” then select “Behaviors”.

Select “+” and then “Web” – “Go to Webpage”.

Type in the URL and set your Open in command.

Click OK and you are set.

So how do I do it?

Simple CSS and animated gifs.

First, make an animated gif the size of you nav button:

Next, a little CSS:

#nav {
    height: 35px;
    width: 500px;
}

div.button {
    float: left;
    width: 100px;
    height: 35px;
    margin: 0 3px 0 0;
    background: #fff;
    border: 1px solid #000;
}

div.button a {
    display: block;
    margin: 0;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;
    font: bold 13px Georgia, serif;
    color:#039;
    text-decoration: none;
    background: #fff;
}

div.button span {
    display: block;
    margin:0;
    padding: 9px 0 0 0;
    text-align: center;

}

div.button a:hover {
    background: url( 'http://itscalledwebdesign.com/files/gif_hover/bg03.gif' ) top center no-repeat;
    color: yellow;
}

Next, the following div is placed:

<div id="nav">
    <div class="button"><a href="#"><span>Nav 1</span></a></div>
    <div class="button"><a href="#"><span>Nav 2</span></a></div>
    <div class="button"><a href="#"><span>Nav 3</span></a></div>
</div>

You are pretty much just making a div and placing the animated gif as the image for the hover.  In this example, the “a” simply has a white background.

CLICK HERE to see how it looks, it’s the “Fast” example.

View the CSS and source of that example page to see that the other examples are set up using the same code.  You just need to use different animated GIFs as the hover image.

One thing you need to think about is the possibility that animations are turned off on the users computer.  The only problem this might cause will be if you have your hovered text turn into the same color as the original background.  That would then cause the text to disappear.

I would suggest trying it with the animation turned on and off just to see what it would look like.

So there you have it.  Simple, quick CSS animated hovers.

Remember to get the flvplayer.swf first.

Here’s the embed code -

<embed src="http://yourdomain.com/flvplayer.swf" width="480" height="360" allowscriptaccess="always" allowfullscreen="true" flashvars="height=360&width=480&file=http://yourdomain.com/yourplaylist.xml&displaywidth=480&autostart=false&shuffle=false&playlist=false&scroll=true" />

Once again, you can modify any of the variables (height, width, autostart).  I have the display set so that it will hide the playlist.

Now for the xml playlist, you need to have your XML file and your FLV’s in the same folder.  The XML needs to be formatted like this -

<?xml version='1.0' encoding='UTF-8'?>
<playlist version='1' xmlns='http://xspf.org/ns/0/'>
<trackList>
<track>
<location>http://yourdomain.com/folder/video1.flv</location>
</track>
<track>
<location>http://yourdomain.com/folder/video2.flv</location>
</track>
<track>
<location>http://yourdomain.com/folder/video3.flv</location>
</track>
</trackList>
</playlist>

You can have as many or as few “tracks” as you’d like.  Just modify the XML to reflect that.

You will need to put the following swf somewhere on your server – flvplayer.swf

Then use the following code -

<embed src="http://yourdomain.com/flvplayer.swf" width="480" height="360" allowscriptaccess="always" allowfullscreen="true" flashvars="height=360&width=480&file=http://yourdomain.com/video.flv&displaywidth=480&autostart=false&shuffle=false&playlist=false&scroll=true" />

You will want to change the location of the swf and the filename and location of your flv. The width and height can be modified to fit with whatever size flv you are playing. If you do change these, make sure you change all of the heights and widths accordingly.

The other listed variables allow you to change things like autostart just by switching between “true” and “false”.

If you want to have more than one video to play in order, check this tutorial out -
XML Driven FLV Player