Tutorials Home What's New Top Rated Submit myTutes Random!

How to affect Flash with Javascript.
Author: Chris Petersen | Website: http://www.petersenonline.net |

Page 1
1

Javascript Flash interaction tutorial.

There is a lot of documentation on how to call Javascript from within Flash. I am fairly new to Flash, having only used it over the last couple of months and I had no trouble figuring out how to make calls to Javascript from with in my Flash movie. I did however encounter a lot of trouble finding information on how to do the opposite. That is how to affect change in a Flash movie from Javascript.

 This is surprisingly easy considering the difficulty I had tracking down how to do it. The first step is to create a very simple flash movie. All you need to add to this movie is one text string. Type whatever you like into it. Next move to the "Text Options" window and switch the first drop down to "dynamic text". In the text box underneath the word "Variable" you can type what ever variable name you want. For the purpose of this tutorial we'll use the name "jtext". Next save and publish the movie.

 Once you publish the movie, copy the html page that flash built for you. We can use this as our template. Edit the copy you just made. First think of a name for your movie. This is how the JavaScript willl reference your movie. I chose the name "FlashTest". In the OBJECT tag that Flash created for you, place the parameter ID='FlashText' and in the EMBED tag, place the parameters NAME='FlashTest' and swLiveConnect=true. It is very important that the ID tag and the NAME tag have matching names. The swLiveConnect parameter is only nessacary for Netscape. Now your Flash tags should look something like this:

<OBJECT ID='FlashTest'
 classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
 WIDTH=550
 HEIGHT=400>
 <PARAM NAME=movie VALUE="text.swf">
 <PARAM NAME=quality VALUE=high>
 <PARAM NAME=bgcolor VALUE=#FFFFFF>
 <EMBED NAME='FlashTest'
 src="text.swf"
 quality=high
 bgcolor=#FFFFFF
 WIDTH=55
 HEIGHT=40
 TYPE="application/x-shockwave-flash"
 PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
swLiveconnect=true>
 </EMBED>
</OBJECT>

 Now it is time to add some interactivity. Place the following JavaScript function in your tag.

<SCRIPT LANGUAGE='JavaScript'>
<!--
 function interactive(text) {
 window.document.FlashTest.SetVariable("jtext", text);
 }
-->
</SCRIPT>

That script will change the text in your flash movie to whatever it is passed. It is important to note that the text in bold has to match the name of your variable in your flash movie. The final step in this process is to give the user a means of changing the text. Add a text input anywhere on the page, and add an onChange event. It should look like the following:

<INPUT TYPE=text NAME=flash_text onChange='interactive(this.value)'>

That says that whenever the user changes the text that is in the text box, update your flash movie accordingly. Voila, you have made your flash movie change from Javascript.

--By Chris Petersen

1

» Level Intermediate

Added: : 2001-02-19 Rating: 8.37 Votes: 235 Hits: 3532

» Author

I am a web developer specializing in Enterprise Development using Java. I work as a contractor and have only recently started dabbling in with Flash.

» Download

Download the files used in this tutorial.

Download (3 kb)

Get conversion and unzipping tools for PC and Mac here!

» Forums
	More help? Search our boards for quick answers!

Please rate this tutorial, 10 is the top rating, you can also click the comments link to read/write a review.

10 9 8 7 6 5 4 3 2 1