First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: Chris Petersen | Website: http://www.petersenonline.net

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' 
	<PARAM NAME=movie VALUE="text.swf">
	<PARAM NAME=quality VALUE=high>
	<EMBED NAME='FlashTest' 

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

 function interactive(text) {
 window.document.FlashTest.SetVariable("jtext", text);
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
» Level Intermediate

Added: 2001-02-19
Rating: 8 Votes: 235
» 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.
» Forums
More help? Search our boards for quick answers!
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.