First time here? First time here? Newsletter Signup Newsletter
651326 Members and growing! | Flash Jobs
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' 
	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="/imagesvr_ce/flashkit/tutorials/Interactivity/How_to_a-Chris_Pe-577/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
» Level Intermediate

Added: 2001-02-19
Rating: 8 Votes: 235
(10 being the highest)
» 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!

Comments

  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: doc_chin7
» Description:

The flash's horizontal road drive was done in CS4 and was upgraded to CS6. The car responds to right/ left key and flash will auto-generate the movement of roads from left-right or right-left based on random number. Have fun driving in this virtual environment and avoid other cars... :) If you are creative, a road driving game can be created from it.

Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
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: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.