|
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.
|
|
|
|
|
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
|
|
 |
|
|
|
 |
|
"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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|