JavaScript in love with Flash — Swf also wants to order JavaScript around

 

l          Swf also wants to order JavaScript around

       Through two ways a Flash movie can communicate with its hosting scripting environment.

       The most common way is to use GetURL function in ActionScript. You may wonder what the relationship is between JavaScript and a URL. Well, launch your web browser and type javascript:alert("calling JavaScript via URL") in the address bar then press enter. Did you see a MessageBox? Let’s try a more complex one, type javascript:a=3;b=2;c=a*b;alert(c); and press enter. You can even have a loop! Try javascript:var s = ""; var i = 0; var s = ""; while(i < 100) {i++;s+="1";}alert(s); and you’ll get a long string : )

       That’s what you are going to write in GetURL‘s argument.

       In ActionScript,

       getURL("javascript:alert(‘called from flash’);");

will pop up an Alert box in your browser. You can call any user defined JavaScript function via getURL as well. The getURL function is terse, flexible and easy to use but a little bit error prone. A syntax error in the JavaScript statement may cause the invocation fail silently.

       The well-known fscommand is a formal and official highway linking Flash movies and JavaScript. The fscommand lets the swf send an event to its hosting application. Every event consists of two parts: the command and the parameters. Both are specified in ActionScript as string. The command indicates the name of the event and the parameters include information related to the event. An event handler can be defined in the hosting application. When fscommand triggers, both the command and the parameters are passed to the event handler as a string.

       The syntax of fscommand in ActionScript is:

       fscommand("command", "parameters")

       To use fscommand with JavaScript, we must define a handler function named flashObjId_DoFSCommand in which flashObjId is id attribute you set for the <object> HTML tag (For Microsoft Internet explorer, we have to add additional code to make the fscommand handler work as shown in the following sample).

       Let’s look at an example.

Suppose our Flash movie will possibly send fscommand to JavaScript with the following combination of command and parameters

fscommand("alert", "Hello);

fscommand("showTime", "");

fscommand("setStatusBar", " Hello world");

fscommand("closePage", "");

fscommand("changeBg", " #FF0000");

fscommand("showSum", " 1,2,3,4,5,6,7,8,9");

 

       The HTML document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml&quot; xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>fscommand</title>

</head>

<body bgcolor="#ffffff">

<script language="JavaScript">

<!–

var isInternetExplorer = navigator.appName.indexOf("Microsoft") != -1;

 

// Handle all the FSCommand messages in a Flash movie.

// This function is called when the Flash movie triggers fscommand

function fscommand_DoFSCommand(command, params) {

       command_txt.value = command; //show the command part of current fscommand on page

    parameters_txt.value = params; //show the parameters part of current fscommand on page

      

       // Use a switch to deal with different commands

       switch(command) {

              case "alert":

                     // show an alert box

                     alert(params);

              break;

              case "showTime":

                     // show current time in an alert box

                     alert(new Date().toString());

              break;

              case "setStatusBar":

                     // change the status bar text of the window

                     window.status = params;

              break;

              case "closePage":

                     // close current page

                     window.close();

              break;

              case "changeBg":

                     // change the background color of the current document

                     document.bgColor = params;

              break;

              case "showSum":

                     //calculate and display the summation of a list of numbers.

                     //the numbers are passed as a comma separated list

                     //parse and extract needed data from the parameters string

                     var t = params.split(",");

                     var s = 0;

                     for(var i = 0; i < t.length; i++)

                            s += Number(t[i]);

                     alert("sum of " + params + " is " + s);

              break;

              default:

              break;

       }

       //

       // Place your code here.

       //

}

 

// Hook for Internet Explorer.

if (navigator.appName && navigator.appName.indexOf("Microsoft") != -1 && navigator.userAgent.indexOf("Windows") != -1 && navigator.userAgent.indexOf("Windows 3.1") == -1) {

       document.write(‘<script language=\"VBScript\"\>\n’);

       document.write(‘On Error Resume Next\n’);

       document.write(‘Sub fscommand_FSCommand(ByVal command, ByVal args)\n’);

       document.write(‘  Call fscommand_DoFSCommand(command, args)\n’);

       document.write(‘End Sub\n’);

       document.write(‘</script\>\n’);

}

//–>

</script>

<!–url’s used in the movie–>

<!–text used in the movie–>

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0&quot; id="fscommand" width="518" height="345" align="middle">

<param name="allowScriptAccess" value="sameDomain" />

<param name="movie" value="fscommand.swf" />

<param name="quality" value="high" />

<param name="bgcolor" value="#ffffff" />

<embed src="fscommand.swf" quality="high" bgcolor="#ffffff" width="518" height="345" swLiveConnect=true id="fscommand" name="fscommand" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer&quot; />

</object>

<p>

fscommand information:<br/>

<!– For displaying the command of current fscommand –>

command:<input name="command_txt" type="text"/><br/>

 

<!– For displaying the parameters of current fscommand –>

parameters:<input name="parameters_txt" type="text"/><br/>

</p> 

</body>

</html> 

 

       Notice the part with comment // Hook for Internet Explorer. is needed if you are writing for IE. You can use the switch statement when you have multiple possible commands. Multiple parameters of an fscommand are passed as a comma separated list.

 

Advertisements
This entry was posted in Flash and ActionScript. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s