.
.
 
Flawless Rollover Buttons and
JavaScript Integration,
(Version 3)

The following tutorial demonstrates how we extended the functionality of the rollovers for our Flash frames navigation. Integrating Flash with JavaScript for two-way communication between the Flash navigation movie and each page in the website. If you missed the previous tutorials, it is necessary that you complete them before continuing with this one as the information is not repeated.We will be adding to new functionalities to the current navigation design. The first is to update the window status so that your Flash navigation buttons behave exactly as regular HTML hyperlinks. The other updates your navigation selection to match the currently selected page. If a user clicks the back button or any navigation method outside the Flash buttons, the Flash navigation is updated automatically based on the active page. This makes the navigation buttons a seamless integration to your entire website.

Dissymmetry Advanced Flash Tutorial (5,214 bytes)

Prerequisite Tutorials:

Flawless Rollover Buttons, Version 1 - (Advanced) The first tutorial in this series gives the basic definition and layout of the y
Flawless Rollover Buttons, Version 2 - (Advanced) Takes the desing a step further, streamlines the design for faster execution and download time for large navigation movies.
Symbol Combinations - (Intermediate) Combining Buttons and Movie Clips
JavaScript and Flash Integration - (Intermediate) Controlling Flash with JavaScript, and sending variables to JavaScript from Flash

I apologize for the continued use of TellTarget(). I am aware that it is a deprecated function. I have continued to use it here for simplicity in updating the design. Please feel free to change the code to the preferred "dot syntax" at your pleasure.

1) Begin by opening the .swf or .fla file used in the previous tutorials. The buttons are going to have some minor modifications made. Open the "GradientAni" for editing (note: some of your downloads may use "GradientAni2" instead.) Change the actions for the "TransperentButton" to the following:

on (rollOver, dragOver) {
  if (/:active ne "/" add _name) {
    out = "0";
    if (Number(start) == 1) {
      gotoAndPlay (2);
    } else {
      gotoAndPlay (Number(_totalframes)+1-_currentframe);
    }
  }
  getURL ("javascript:UpdateWindowStatus('" add varStatus add "')", "_self");
//URL=Expr., Window=String, Variables="Don't Send"
}
on (rollOut, dragOut) {
  if (/:active ne "/" add _name) {
    out = "1";
    gotoAndPlay (Number(_totalframes)+1-_currentframe);
    if (Number(stop) == 1) {
      stop = "0";
      gotoAndPlay (Number(_totalframes)+1-_currentframe);
    }
  }
  getURL ("javascript:UpdateWindowStatus('')", "_self");
//URL=Expr., Window=String, Variables="Don't Send"
}
on (release) {
  tellTarget (/:active) {
    play ();
  }
  /:active = "/" add _name;
//Variable=String, Value=Expr.
  /:Selector = "/" add _name;
//Variable=String, Value=Expr.
  gotoAndStop (20);
  getURL (varURL, varWindow);
}
Notice some changes here. We've added a JavaScript function call everytime a button is rolled over and rolled out called UpdateWindowStatus(). Also note how this call is made. The argument sent to the getURL action is a constructed string. Notice the use of single quotes within the string to delineate the string arguments for the JavaScript function. In the function call for the on(rollover) event, we have inserted a variable to update the window status of the window. This basically will update the status bar whenever the button is rolled over and then clears it again when the button is rolled out of. The on(release) event has another change in it. The additions of the "active" and "selector" variables are for the change in menu highlight selection. We will take a closer look at these later. For now, just note that "_name" is the name of the "GradientAni" executing the code. This causes the "GradientAni" executing the code to set itself as the "active" as well as the "selector" button.

2) The main movie has been given these variables, "active" and "selector". "Active" holds the name of the currently highlighted button and "selector" holds the information recevied from each webpage as they load through JavaScript. The movie compares "active" to "selector" and change the currently highlighted button to the contents of "selector" when the variable changes.

3) Drag

4) Here:

_totalframes + 1 - _currentframe

5) The

6) Exit

7) To

 

.
Right-Bottom 006699.gif (866 bytes)

"The Internet is the foundation for a new industrial order. ... If you don't believe deeply, wholly...that the Net is going to change your business, you're going to lose."  - Fortune Magazine

All graphics on this site are copyrighted by their respective distributors and may not be duplicated, modified in any fashion or used in any way without consent.

Last Updated: 12/5/07

Home |  Tutorials |  Basic |  Intermediate |  Advanced |  Contact Us