|
|
Below is an example of FLASH communicating with the HTML-page using
JavaScript.
-
Click the FLASH-buttons to change the HTML-page-background-color.
-
Click the HTML-buttons to change the FLASH banner-background.
THE TECHNIQUE:
NOTE: THE FOLLOWING EXPLANATION ASSUMES THAT YOU ARE FAMILIAR WITH JAVASCRIPT BASICS. OTHERWISE YOU SHOULD CHECK OUT OUR JAVASCRIPT TUTORIALS (FOR A WEEK OR TWO) BEFORE READING ON.
You have probly seen the option "FS-COMMAND" when playing around with actions in flash. These FS-Commands are used when you want to pass information from Flash to Javascript.
In this tutorial we will also cover how javascript can force Flash to jump to a specific frame.
This means that after reading this tutorial you should be able to call any javascript function from the Flash-movie and on the contrary also be able to let javascript force Flash to jump to a specific frame.
With a little creativity this can be a very powerful combination!
Note: Do NOT change the name FLASHFILE into something else unles you change the script from step 1 according to it
STEP 1 - COPY THE SCRIPT TO YOUR HTML-FILE
First you must copy this script and paste it to the <HEAD>-part of the HTML-file.
<script LANGUAGE="JavaScript">
<!-- Hide JavaScript from old browsers
function flashfile_DoFSCommand(command, args)
{
if ( command == "color" ) {document.bgColor=args}
}
// done hiding -->
</script>
<script LANGUAGE="VBScript">
<!--
Sub flashfile_FSCommand(ByVal command, ByVal args)
call flashfile_DoFSCommand(command, args)
end sub
// done hiding -->
</script>
|
STEP 2 - MAKE SURE TO IDENTIFY YOUR FLASHMOVIE CORRECT
There are many different ways to embed Flash into HTML.
In the example below we have highlighted how the ID of our flashmovie is specified in the HTML-code.
Dependent on how you embedded your own flashmovie your HTML-code will be slightly different.
In any case you should always have both an EMBED and an OBJECT tag. No matter how your embedding was done you should enter the ID-name to these tags just like we did in this example.
<object CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
CODEBASE="NEED%20NEW%20CODEBASE%20FROM%20RAVEN"ID="flashfile" WIDTH="400" HEIGHT="150">
<param name="movie" value="flashcolors.swf">
<param name="play" value="false">
<param name="quality" value="high">
<embed NAME="flashfile" SRC="flashcolors.swf" WIDTH="400" HEIGHT="150" PLAY="false"
SWLIVECONNECT="true" QUALITY="high">
</object>
|
STEP 3 - ADD FS-COMMANDS TO YOUR MOVIE
In the movie used on this page we went through these steps for each of the buttons in our flashmovie:
- Right-click the button -> A menu appears.
- Choose "properties" -> A menu appears.
- Choose "Actions" -> The Action-options shows up.
- Click the + in upper left corner of the Action-option-menu -> A menu appears.
- Choose "FS Command" -> Flash enter three lines of code.
On (Release), FS Command and End On
- Click the 2nd line ("FS Command") -> Parameter-options shows up.
- In the field called "Command" enter the word color
- In the field called "Arguments" enter the word lime
- Click the "OK"-button.
The FS Command we assigned to the action tells Flash that when the action is triggered it should pass two values to the browser: color and lime.
The javascript in step 1 grabs these values and turns them into normal javascript variables.
The final step is to change the script from step 1 so it will perform whatever javascript function you'd want it to - rather than just change the backgroundcolor of the page.
STEP 4 - CUSTOMIZING THE JAVASCRIPT
If you look at the javascript from STEP 1 you will see this line:
if ( command == "color" ) {document.bgColor=args}
Note that the value we entered in STEP 3 as "Command" is now stored in a javascript variable called command.
The value we entered as "Arguments" is stored in another variable called args.
Now let us assume that instead of changing the background-color for the page you wanted javascript to force Flash to jump to frame 30 if the value stored in args was "lime".
You would then change the above line into:
if ( args == "lime" ) {document.flashfile.GotoFrame(30);}
Note that this example shows how to let javascript control which frame Flash should be in. This can be extremely useful if you have, say the same flash-movie on several pages, and depending on which page it is seen on it should start in a different frame. To obtain this effect you can add an onLoad-event to the <BODY>-tag:
<BODY bgcolor="#FFFFFF" onLoad="document.flashfile.GotoFrame(120);">
|
| Home | SiteMap | Index | Search | Contact Us | About Us | E-Mail Us |
| HTML | JavaScript | Applets | Flash | Graphics | Free Stuff | Products |
This page is created & maintained by
NetKontoret
All contents Copyright © 1997, 1998, 1999 - NetKontoret - All Rights Reserved
|
This document was last modified on: 04/15/2000 12:26:25
|
CLICK & SUGGEST THIS SITE
| |