Tutorial: Send Information to Flash with JavaScript
Free Flash & JavaScript Tutorial
In this tutorial you will learn how to send any information to Flash with JavaScript.
This info could be a variable or a text message. There are two examples in
this tutorial. One sends a text message and the other a variable. For those
unfamiliar with programming: a variable is something that 'varies'. It could
be anything you want.
Example of sending information to Flash with JavaScript.
NOTE: This method works in Netscape 7.1, Mozzila fire fox 1.0 and Microsoft Internet Explorer 6.0 service pack 2 but not Opera 7.54
Method One: Creating the Flash Movie
Open a new: Flash Movie I set my width and height to: 410 x 160 pixels.
Save your Flash Movie as: send-info
With the text tool create a: Dynamic Text Box
Note: The dynamic text box has to be big enough to hold a sentence.
Select the: Text box
In the Property Inspector set the text box Variable Name (Var) to: text
Note: Don't get the Variable Name mixed up with the Instance Name.
If you wish you can set the Text Box to re-size automatically depending on the number of words sent to it. To do this add the following to frame 1 of the Timeline:
this.text.autoSize = "left";
Note: This will only work if the Text Box is set to Single Line in the Property Inspector.
As an alternative you can also use the one of the following:
Open up your normal web editor: Dreamweaver or FrontPage etc.
Create a new: Web Page
Go to code view in your web editor and add the following to the Head section of your web page:
<script language="javascript" type="text/javascript">
function SendMyInfo(){ // Remove the "Enter A Number To Change The Car Size And Press Ok" if you do not what a default message to appear in the prompt
// The "Enter a number to change the car size and press ok" is the question that you want to prompt the user for an answer to.
// You may change this to anything question you like
var GetMessage = prompt("Enter A Number To Change The Car Size And Press Ok","Please Enter A Message To Be Sent To Flash");
if(GetMessage == null){ // Remove The Line Below If You Do Not Want A Cancel Message Sent To Flash
window.document.GetInfo.SetVariable("carWidth" "100");
}else{
window.document.GetInfo.SetVariable("carWidth" GetMessage);
}
}
</script>
Change the User Prompt... or the Please Enter... as appropriate. They change the text in the dialog box that appears.
The first section displays a message above the Dialog's Input Box and the second section changes the message in the Input Box. See illustration below:
Dialog text and message box text is determined by what you type in the JavaScript code on your web page.
If your text box (or variable) is not called text, change
the code above accordingly.
Add the following HTML code to the Body section of the HTML in code view of your web page editor:
<form name="formSendInfo">
<input type="button" name="Button" value="Click Here To Send Your Own Message To Flash" onClick="SendMyInfo();"><br /> // Note: You can also use:
<input type="button" name="Button" value="Click Here To Set the car width to 50" onclick="window.document.GetInfo.SetVariable("carWidth" "50");" /> // If you want to set a variable in the flash movie with out using a prompt or giving the user an option to enter their own value
// This just allows you other ways to send information to flash. You could use a text link or anything you like =0)
</form>
Note: You MUST use this code or the Flash Movie will not work !
Now change the 410 and 160 values for so that the width and height values are how you want your Flash Movie to display.
If your movie has a different name then replace send-info with the file name of your movie.
Note: Be careful with file names as they are case sensitive and never use spaces for file names that are used on the web.
If you wish you can replace the default message: Click Here To Send Your Own Message To Flash
If you wish you can define a start up message too by adding by adding the following into the Body Tag like this:
<body onLoad="window.document.GetInfo.SetVariable("text" "Hello this is a start up message!");"
If you wish you can view an example of what the HTML source code would look like: View source code
Method Two: Creating the Flash Movie
NOTE: This method is said to work in all browsers but I tested it and found it to only works in Microsoft Internet Explorer 6.0 service pack 2. I personally recommend the above method but you may want to try it and may find it works for you
Open a new: Flash Movie I set my width and height to: 410 x 160 pixels.
Save your Flash Movie as: send-info
With the text tool create a: Dynamic Text Box
Note: The dynamic text box has to be big enough to hold a sentence.
Select the: Text box
In the Property Inspector set the text box Variable Name (Var) to: text
Note: Don't get the Variable Name mixed up with the Instance Name.
Add this code to frame one of your movie:
#include "setvariables.as"
If you wish you can set the Text Box to re-size automatically depending on the number of words sent to it. To do this add the following to frame 1 of the Timeline:
this.text.autoSize = "left";
Note: This will only work if the Text Box is set to Single Line in the Property Inspector.
As an alternative you can also use the one of the following:
/* -----------------------------------------------------------
----------Supporting Browsers----------
PC:
IE 5 and higher
Netscape 6 and higher
Moz/Firebird all
Opera 7 and higher Mac OSX:
IE 5.2
Safari all
Netscape 6 and higher
Moz/Firebird/Camino all
Opera 6 and higher
Linux:
Konqueror assumed
----------------------------------------------------------- */ var ua = navigator.userAgent.toLowerCase();
var is_pc_ie = ((ua.indexOf('msie') != -1) && (ua.indexOf('win') != -1) && (ua.indexOf('opera') == -1) && (ua.indexOf('webtv') == -1)); /* ----------------------------------------------------------- function setFlashVariables(movieid, flashquery)
movieid: id of object tag, name of movieid passed in through FlashVars
flashquery: querystring of values to set. example( var1=foo&var2=bar )
----------------------------------------------------------- */ function setFlashVariables(movieid, flashquery) {
var i, values;
if (is_pc_ie) {
var chunk = flashquery.split("&");
for (i in chunk) {
values = chunk[i].split("=");
document[movieid].SetVariable(values[0], values[1]);
}
} else {
var divcontainer = "flash_setvariables_"+movieid;
if (!document.getElementById(divcontainer)) {
var divholder = document.createElement("div");
divholder.id = divcontainer;
document.body.appendChild(divholder);
}
document.getElementById(divcontainer).innerHTML = "";
var divinfo = "<embed src='YourFileName.swf' FlashVars='lc="+movieid+"&fq="+escape(flashquery)+"' width='0' height='0' type='application/x-shockwave-flash'></embed>";
document.getElementById(divcontainer).innerHTML = divinfo;
}
}
Only on the line where it reads: var divinfo = "<embed src='YourFileName.swf' FlashVars='lc="+movieid+"&fq="+escape(flashquery)+"' width='0' height='0' type='application/x-shockwave-flash'></embed>";
Change the: YourFileName.swf to the name of your flash movie
Now save the file as: setvariables.js in the same location as your flash movie and web page
Now open note pad and add this code:
// -----------------------------------------------------------
// Universal method for javascript->flash setvariable
// ----------------------------------------------------------- if(!_level0.$jslisten_init){
Stage.$jsvarlistener = new LocalConnection();
Stage.$jsvarlistener.setVariables = function(query) {
var i, values;
var chunk = query.split("&");
for (i in chunk) {
values = chunk[i].split("=");
_root[values[0]] = values[1];
}
};
Stage.$jsvarlistener.connect(_level0.movieid);
_level0.$jslisten_init = true;
}
Save the file as: setvariables.as in the same location as your flash movie and web page
Save your Flash Movie: File > Save
Publish the Movie: File > Publish
Step Two: Setting up the HTML Web Page
Open up your normal web editor: Dreamweaver or FrontPage etc.
Create a new: Web Page
Go to code view in your web editor and add the following to the Head section of your web page:
<script language="javascript" type="text/javascript" src="setvariables.js"></script> <script language="javascript" type="text/javascript">
function SendMyInfo(){
// Remove the "Please Enter A Message To Be Sent To Flash" if you do not what a default message to appear in the prompt
// The "Enter a number to change the car size and press ok" is the question that you want to
prompt
the user for an answer to.
// You may change this to any question you like
var GetMessage = prompt("Enter a number to change the car size and press ok","Please Enter A Message To Be Sent To Flash");
if(GetMessage == null){
//Remove The Line Below If You Do Not Want A Cancel Message Sent To Flash
setFlashVariables('GetInfo','carWidth=100')
}else{
setFlashVariables('GetInfo','carWidth='+GetMessage+'')
}
}
</script>
Change the User Prompt... or the Please Enter... as appropriate. They change the text in the dialog box that appears. The first section displays a message above the Dialog's Input Box and the second section changes the message in the Input Box. See illustration below:
Dialog text and message box text is determined by what you type in the JavaScript code on your web page.
If your text box (or variable) is not called text change the code above accordingly.
Add the following HTML code to the Body section of the HTML in code view of your web page editor:
<form name="formSendInfo" method="post" action="">
<input type="button" name="Button" value="Click Here To Send Your Own Message To Flash" onClick="SendMyInfo();"><br /> // Note: You can also use:
<input type="button" name="Button" value="Click Here To Set the car width to 50" onclick="setFlashVariables('GetInfo','carWidth=50')" /> // If you want to set a
variable
in the flash movie without using a prompt or giving the user an option to enter
their own value
// This just allows you other ways to send information to flash. You could use a text link or anything you like =0)
</form>
Note: You MUST use this code or the Flash Movie will not work !
Now change the 410 and 160 values for so that the width and height values are how you want your Flash Movie to display.
If your movie has a different name then replace send-info with the file name of your movie.
Note: Be careful with file names as they are case sensitive and never use spaces for file names that are used on the web.
If you wish you can replace the default message: Click Here To Send Your Own Message To Flash
If you wish you can define a start up message too by adding
the following into the Body Tag like this:
<body onLoad="setFlashVariables('GetInfo','text=Hello this is a start up message!');">
If you wish you can view an example of what the HTML source code would look like: View source code
That's it, you can send any message to Flash. It is worth noting that you can also send a variable to Flash using this method.
For more information on other ways of interaction between Flash and JavaScript see JavaScript in the: webwasp index
See these sites here for the more information on the second method:
Free Flash & JavaScript Tutorial 
Example: Download the Flash file Int 120a
Webwasp Community: