Learn Flash 3 - shockwave flash tutorial covering all buttons & menu's - shape tint and motion tweening

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.

This is FLASH

This is HTML

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.

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.

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);">

flash and javascript