| Now you know all the ActionScript you need to make a Flash movie navigation bar. However, you'll also need to be familiar with HTML, at least to the point of knowing how to make frames . Our navigation bar runs in a frame to the left side of the browser window. The right side of the browser window is another frame that contains the content. The Flash movie consists of various buttons that use getURL to load a new HTML page in the other frame. -
First, we'll need to create an HTML page with frames. Here is the code of the main HTML page, which defines the two frames: <HTML><HEAD> <TITLE>Flash Navigation Example</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <FRAMESET cols="120,*"> <FRAME name="navigation" src="navbar.html" scrolling="no"> <FRAME name="content" src="content1.html" scrolling="auto"> </FRAMESET> </BODY> </HTML> -
Now, we need to create the HTML pages for the two frames. We won't worry about the left frame now because that will just be taken from the HTML page created when we publish the Flash movie. The right frame, however, should have several variations. Let's create three simple HTML pages named content1.html, content2.html, and content3.html. They will all look basically like this, except that the text inside will reflect which page it is: <HTML><HEAD> <TITLE>Content 1</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> Content 1 </BODY> </HTML> -
Next comes the Flash movie. it should be 100 pixels wide by 400 high to fit in the frame allotted for it. This will be a simple movie with three buttons in it. The buttons can look like anything you want. Here is the script for the first button: on (release) { getURL("content1.html","content"); } The other two buttons will be the same, except that they will go to pages 2 and 3. -
Save the Flash movie as navbar.fla. -
Publish the Flash movie, making sure that the Publish settings are set so that an HTML file, navbar.html, is also exported. -
Combine all the pages and the Flash movie into one folder. You should have the following: navigation.html, content1.html, content2.html, content3.html, navbar.html, and navbar.swf. -
Open the file navigation.html with your standard Web browser. You should see something like Figure 17.1. Figure 17.1. This Web page has two frames. The one on the left contains a Flash movie that controls the frame on the right.  You can find all these files in the folder 17navigation. Drag and drop the Navigation.html file on to your browser. The other .html files are support for that one. This example is not too exciting. As a matter of fact, you can do it pretty easily with plain HTML and no Flash movie at all. However, the brilliance of Flash shines through if you decide to animate the buttons; then it is less of a typical navigation bar. |
