Send Information to Flash with JavaScript--tutorial.jcwcn.com

The aim of the tutorial is to 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.

In the example below it is the width of the car:

Example: Download the Flash file Int 120a

Example of a variable controlled via the JavaScript.

Using JavaScript to send a Text Message to Flash

Below is the example of what you will build in this tutorial.

Example: Download the Flash file Int 120b

Example of sending information to Flash with JavaScript.

NOTE: This method works in Netscape 7.1, Mozzila's Fire Fox 1.0 and Microsoft Internet Explorer 6.0 service pack 2 but not Opera 7.54

Method One: Send Information to Flash with JavaScript:

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:

this.text.autoSize = "center"; //or
this.text.autoSize = "right";
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:

<OBJECT id="GetInfo" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="410" height="160">
<PARAM NAME="movie" VALUE="send-info.swf">
<PARAM NAME="quality" VALUE="high">
<PARAM NAME="menu" VALUE="true">
<EMBED src="send-info.swf" quality="high" menu="true" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="410" height="160" swLiveConnect="true" NAME="GetInfo"> </EMBED>
</OBJECT>

<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>
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!");"

Method Two: Send Information to Flash with JavaScript

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:

this.text.autoSize = "center"; //or
this.text.autoSize = "right";
Create a new web page and use this code:
/* -----------------------------------------------------------
----------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:

<OBJECT id="GetInfo" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="410" height="160">
<PARAM NAME="movie" VALUE="send-info.swf">
<PARAM NAME="quality" VALUE="high">
<PARAM NAME="menu" VALUE="true">
<EMBED src="send-info.swf" quality="high" menu="true" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="410" height="160" swLiveConnect="true" NAME="GetInfo"> </EMBED>
</OBJECT>

<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>
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.

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]

Send Information to Flash with JavaScript

relation tutorial

Category

New

Hot