Work: Articles
Smart Flash Navigation
Assumptions: Basic Dreamweaver, HTML and Flash know-how.
What if your client insists on having daisies grow out of a navigation item when a user rolls over it?. You would probably think, that's lame as hell, but you would say, "Sure. I can do that with Flash."
Like any good navigation system, you want to be able to indicate where the user is within the web site by highlighting the selected navigation item. You do not want to create a different Flash file for every section so how do you tell Flash what navigation item should be highlighted? It's easy. Pass a variable into Flash from the HTML page. I will show you how.
Step 1: Set Up Your Flash File
Design whatever navigation buttons you want and place them on their own layer. Create a new keyframe for each section. Label each keyframe with the appropriate section name (i.e. home, about, etc.). Keep to Flash's naming conventions.
On each keyframe display the properly highlighted navigation item. You may want to place the highlighted item on its own layer as I did in the sample files.
On each keyframe add ActionScript to stop the movie. The ActionScript would be:
Stop();
On the first keyframe add the ActionScript that enables the movie to jump to the proper frame based on the variable called "current_page". The ActionScript for the first frame would be:
Stop();
gotoAndStop(current_page);
The variable "current_page" will be sent into the Flash movie when the HTML page loads. Let's move on to create the HTML page.
Step 2: Create the HTML Page
Launch Dreamweaver and create a new page. Add a flash object to the blank page using SWFObject. If you have installed SWFObject it can be accessed in the tool panel under the tab labeled Common. Select SWFObject. The SWFObject dialog box will appear. Fill out all the necessary information (div id, swf file location, movie dimensions,etc. You'll notice at the bottom there's a field called FlashVars. This is where you create and set the variable you wish to send to you Flash movie. Input "current_page=home".
Step 3: Set Variable for All the HTML Pages
Now you need to set the "current_page" variable for each new HTML page that you create for your web site. If you go into the code view in Dreamweaver you will notice that the SWFObject inserted a new div and some javascript. Within the javascript you will see that the variable "currrent_page" has been set to "home".
For each new HTML page go into the code view and set the "current_page" variable to the proper page section (i.e. about, contact, etc.).
That's it. The ability to pass variables into Flash opens up many opportunities. I hope you'll explore this more and come up with your own solutions.
Download the sample files to get a closer look at the Smart Flash Navigation.
Questions? Contact me.