Sponsored by

  • Intel
  • HP

FlashTutorial

Flash navigation menus made easy

Paul Wyatt explains how to create slick, user-friendly Flash navigation bars and integrate them into an HTML page with Dreamweaver CS3

 

 finished project

It doesn’t matter what kind of content your website provides, ifpeople can’t navigate it easily, they’ll soon go elsewhere. Some sites score highly, with expertly designed, user-friendly navigation bars that function slickly while seamlessly enhancing the look and feel. Others are just downright annoying, expecting you to know that those unlabelled 3D cubes in the bottom corner are actually the navigation bar.

Most navigation that extends to a sub navigation relies on the same function: clicking a button that prompts an animation to play and load the sub nav bar and content. On clicking another navigation option, this animation then ‘rewinds’. This technique is easy to learn and uses a conditional statement in Flash. We’ll cover how to do that in this tutorial. It’s a technique you can develop to produce your own inspired, creative and, above all, usable navigation bars. We’ll also dip our toes into Dreamweaver, looking at the accessibility options it offers in Flash.

Open up partial_tutorial.fla from your source files. On the stage we have the site creative and four buttons – home, about, my music and contact. Scrub along the timeline by dragging the small red rectangle above it. You’ll see an animation that contains three other buttons. This is the Flash navigation, which loads when the my music button is pressed. You’ll also notice two frame labels: one at frame 2, named start, and the other, at frame 13, with the label play out. These are important – we’ll use ActionScript to refer to these labels, to control when the play head goes to thestart frame and when it moves to play out.

In the middle of the two labels is a stop action on frame 12. The animation will stop at this point, but will continue once the prompt from the ActionScript causes it to play again from the second frame label. Making sure that the frame play out doesn’t play after each button selection is made requires the use of an ActionScripted conditional statement. A conditional statement checks to see if a declared condition is true or false. It is shown like this:

if ( condition ){

In the next line we tell it to go and do something if the statement is true:

gotoAndPlay("play out");

If the condition is false, Flash looks at the else section of the code, which tells it to carry out an alternate action. If and else conditional statements operate under very simple logic. If the first statement declared is true, then follow this path of action. If it’s false, then follow this path instead. We’ll be using an example of this later to make our sub navigation menu work.

To put this into action, we need to hook up our button instances so they’ll work with ActionScript. On the stage of partial_tutorial.fla, select the first button, home. In the Properties Inspector, give this the instance name of btn_1. Select each remaining button in turn and give them instance names of btn_2, btn_3 and btn_4. With the buttons now associated with instance names, we can add the script to make them load the content into the site.

 'content loader' clip
Create a rectangle to cover the stage. This will become the 'content loader' movie clip - a blank clip into which you can load your content swf files

Hit F9 to bring up the Flash Actions panel. To prevent our sub navigation animation playing out as soon as the movie is loaded, we need to add an ActionScript stop(); on line one, before entering any other code. Each button will load an swf file into a blank movie clip on the Flash stage.

Create a blank movie clip

Create a new layer and name it content loader. Lock all the other layers by clicking on the small dot underneath the padlock icon for each. In the Tools palette, select the Rectangle tool. Position the mouse over the state and you’ll notice that the cursor has changed to a crosshair. Position the centre of this at the top left-hand corner of the stage. The stage should now be covered by a large rectangle. Select this and, in the Properties Inspector, change the width and height parameters to 800x550 pixels. Change the X and Y coordinates to O. Select the rectangle again and hit F8 to convert it into a movie clip. Give it the name content loader and then hit the OK button.

 ActionScript to control the animation
Add the code to the Actions panel to control when the animation plays, and to define the different buttons that will be used in the sub navigation

In the Properties Inspector, give the content loader movie clip the instance name of loader. Now double-click the content loader movie clip on the stage to enter editing mode for it. Select the rectangle within the movie clip and hit Delete. Return to the stage and you’ll notice the rectangle has vanished and has been replaced by a small circular symbol in the top left corner of the stage. Lock this layer and unlock the rest. You’ve just created a blank movie clip that matches the size of the stage but has no content in it.

We’ll use this to load in our content swf files. As they’re exactly the same size as the stage of partial_tutorial.fla, it’s important that when they’re loaded in they’re positioned accurately. We’ve taken care of this by ensuring that the content loader movie clip loads in the right position on the stage.

Now we have a content loader set up, we can target it and the buttons to load the swf content files. In the Actions panel, add the following code:

btn_1.onRelease = function() {loader.loadMovie("btn1_content.swf");        }

This code instructs our first button (with the instance name of btn_1) to carry out the function of loading our content movie (btn1_content.swf) into the blank movie clip with the instance name of loader.

Adapt this code for the remaining buttons by changing the button instance name, and the name of the swf file to be loaded into the blank movie clip. Copy the code three more times and change the button instance names to btn_2, btn_3 and btn_4. The content files change to btn2_content.swf, btn3_content.swf and btn4_content.swf. For the full code refer back to the final example, final_project.fla on the tutorial files.

Hit Ctrl and Enter to test the movie. If any of the buttons fail to work, the most likely cause is incorrect naming of the instances within the ActionScript. Check that these have been named correctly and preview the movie again.

Adding the conditional statement

The my music button will cause a content swf and our sub navigation to load. Return to the Actions panel and, after the ActionScripted stop on line 1, enter the following code:

var sect_selected:String = "home";function Subnav(nextSection) {  if (sect_selected == "my music") {  gotoAndPlay("play out");  sect_selected = nextSection;  } else {  sect_selected = nextSection;  } }
 into Dreamweaver
Draw up an AP <div> to contain your Flash movie, and use Dreamweaver to change the movie's properties and combine Flash and HTML elements

Let’s have a closer look at this code and what makes it tick. We’ve created a function named Subnav. This uses a conditional statement to see if the section currently selected is my music. If it is, the play head will move to the frame with the label play out. If another button has been selected and this isn’t the my music one, then the play head will stay where it is.

For this to work, we need to add an extra line of code to each button’s ActionScript. First, we need to assign each button a name so that our Subnav function knows which has been selected. For btn_1, add the code:
 

Subnav("home");

under the second line of the button’s ActionScript. The full script for the button now reads:

btn_1.onRelease = function() { loader.loadMovie("btn1_content.swf");  Subnav("home");  }

Add the same code to the remaining three buttons. Change the associated name to that of the button itself. So btn_2 becomes Subnav(“about”);, btn_3 becomes Subnav(“my music”); and btn_4, Subnav(“contact”);. Btn_3 has two additional lines of code added to it:

this._parent.sect_selected = "my music"; gotoAndPlay("start");

This ActionScript states that this selection is defined as current and that, when clicked, the play head will move to the frame labelled start after loading the content. That’s it for buttons. Hit Ctrl and Enter to preview and test your movie.

Switching to Dreamweaver

Now that your Flash navigation is complete, select File > Export > Export movie. Name your swf file content_site.swf and save it into your onthedisc working folder. Open up Dreamweaver and, from the splash screen’s Create New menu, select HTML. Save your file into the same folder as your Flash swf. Name it index.html. At the top of the interface are a number of panels and options. Select the Design view from the available view options. Select the layout category in the list of options under the topmost menu. Here, you’ll find options for creating <divs>, tables and collapsible panels. The second icon along is the Draw AP Div option. Click this and drag out a container for your Flash file. Click on the handle of the Ap <div> and, in the Properties panel, change its size to 800x550 pixels.

When an AP <div> is created, you’ll see the outline of this in the Design view of Dreamweaver. If you flip to the Code view, you’ll notice that Dreamweaver has inserted a <div> tag and given this the value apDiv1. You can use the Properties Inspector to rename this, or use the AP Elements panel.

Select an insertion point by clicking within the AP <div>. Select the Insert menu and choose Media and then Flash. A pop-up box with the heading Object tag accessibility attributes will appear. The data entered here allows a screen reader to read the title of the Flash object. Enter a name for the Flash object and a one-letter keyboard equivalent in the Access key text box. Working with Dreamweaver, you’ll find that it has a number of functions for helping implement the accessibility standards in web pages.

By selecting the Flash movie, you can change a number of properties for it in the Properties panel. As well as changing the object’s scaling preferences, you can also launch Flash directly from Dreamweaver. Do this by clicking on the Flash edit button in the Properties panel. If you’re combining Flash and HTML elements, Dreamweaver lets you play the Flash movie from the interface by hitting the Play button. You can test the Flash button functions directly from the Dreamweaver interface.

Right-click in the Design view to select Page Properties from the pop-up menu. Select this and change the background colour to a mid-range grey. Click OK, save the file and then hit F12 to preview the HTML page.

Subscription offer

Log in to Creative Bloq with your preferred social network to comment

OR

Log in with your Creative Bloq account

site stat collection