EchoEcho.Com
COMPLETE TUTORIALS

THIS PAGE: HOME  TUTORIALS  FLASH TUTORIALS  FLASH AND JAVASCRIPT         

EchoEcho.Com
TOOLS & RESOURCES
 HOME 
 
 TUTORIALS 
 
 RESOURCES 
 
 TOOLS 
 
 DOCUMENTATION 
 
 NEWS 
 
 SITEMAP 
 
  SEARCH THIS SITE


THIS TUTORIAL


 ALMO'S TUTORIAL
  USER INTERFACE
  MOTION TWEENING
  TINT TWEENING
  SHAPE TWEENING
  FLA-ARCHIVE

 PLUGIN DETECTION

 FLASH EMBED TOOL

 FLASH + JAVASCRIPT



RELATED PAGES


 OTHER TUTORIALS:
   HTML
   JAVASCRIPT
   JAVA APPLETS



menumidline.gif (281 bytes)
flash and javascript

menumidline.gif (281 bytes)

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.

<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





Tell Your Friends About This Site!
Your name and e-mail-address will appear
as "sender" in the mail sent to your friends.

Your Own Name:
Your Own E-mail:

Friends E-mail 1:
Friends E-mail 2:
Friends E-mail 3:

Your Comment:


PRIVACY STATEMENT:
This Tool Sends Out One E-mail To Each Friend
The Information Will Not Be Used For Any Other Purpose.







Click Here!
Tell a friend about this site

CLICK & SUGGEST THIS SITE


FEED BACK


 FORUM & HELP

 GUESTBOOK

 AWARDS

 LINK TO US



OTHER SITES


 MACROMEDIA

 VIRTUAL-F/X

 FLASHERNET

 FLASHZONE

 NRG

 GABOCORP

 MATINEE

 EMPIRE-US

 WEBTRIPS

 EYE4U