Beginning ActionScript 2.0 2006

Chapter 23

you can recommend that your application be allowed a megabyte of disk space. This is a lot of data. To do this you don’t need to have any data to flush. You can simply call the static method flush with the byte parameter. After the user okays this allotment, he would need to exceed the allotment before the settings dialog became a problem again.

Be aware that users are suspicious of cookies and local information. Be clear about how you plan to use the space and how it benefits their overall experience at your web site.

Sharing SharedObects

These objects wouldn’t be called shared if you couldn’t share them. The getLocal function’s second parameter, which defines the URL of the origin of the SWF file, which creates the sharedObject.

If the URL of the SWF file were, for example, http://wwwsomeserver.com/media/flash/ myApp.swf, you could call the getLocal method with the following paths and results:

By climbing up the URL path of the SWF, you can selectively allow different levels of access to the sharedObject.

Leaving this parameter blank inserts the default value. The default value is the full path to the SWF and the SWF name. In this case, only an SWF in the same folder with the same name could access the sharedObject.

Giving a Flash Movie Data on Star tup with FlashVars

FlashVars is the term given to variables that are added to the Flash root timeline via the object/embed tags in the HTML page, which the SWF resides on. Because these variables are written as HTML tag attributes, you can use servlets and JavaScript to define them at runtime, or you can simply write them into the attribute when you create the Object/Embed tags.

588

Communicating Between the Macromedia Flash Plug-in and the Browser

These variables can be handy when you need to create an SWF file that is populated with page-specific details and information without having to use LoadVars or XML.

Introduction to Flash Object and Embed Tag Parameters

ActionScript is not affected by Object and Embed tags other than by FlashVars, so this section provides you with the explanation for these HTML tags here, before you attempt to use them for FlashVars.

The Object and Embed tags can find their roots all the way back to the early days of Netscape and Internet Explorer and were created separately. Although most new browsers can use the Object tag exclusively, you should nest the Embed tag within the Object tag for those browsers that still use the Embed tag. The Object and Embed tags merely alert the browser of an object that requires a plug-in to display content.

The following table describes the required attributes:

And here are descriptions of the optional attributes:

589

Chapter 23

Adding FlashVars

Adding FlashVars to an Object and Embed tag is very easy. Here you have a before and after addition of FlashVars in the Object/Embed tag. The basic HTML here is the automatic Flash output HTML template you can specify in the HTML tab of the Publish Settings dialog. Different templates are available for different situations.

Before:

<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000” codebase=”http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ver sion=8,0,0,0” width=”550” height=”400” id=”FlashVarsTest” align=”middle”>

<param name=”allowScriptAccess” value=”sameDomain” /> <param name=”movie” value=”FlashVarsTest.swf” /> <param name=”quality” value=”high” />

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

<embed src=”FlashVarsTest.swf” quality=”high” bgcolor=”#ffffff” width=”550” height=”400” name=”FlashVarsTest” align=”middle” allowScriptAccess=”sameDomain” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” />

</object>

590

Communicating Between the Macromedia Flash Plug-in and the Browser

After:

<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000” codebase=”http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ver sion=8,0,0,0” width=”550” height=”400” id=”FlashVarsTest” align=”middle” >

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

<param name=”FlashVars” value=”testValue1=Jeff&testValue2=Nathan” />

<param name=”movie” value=”FlashVarsTest.swf” /> <param name=”quality” value=”high” />

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

<embed src=”FlashVarsTest.swf” FlashVars=”testValue1=Jeff&testValue2=Nathan” quality=”high” bgcolor=”#ffffff” width=”550” height=”400” name=”FlashVarsTest” align=”middle” allowScriptAccess=”sameDomain” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” />

</object>

You can see for the Object tag, you needed to add a param element node. You then specified a name and value for the FlashVars. These FlashVars will be read by those browsers that use the Object tag.

In the Embed tag, you can set FlashVars through an attribute within the main Embed node. These variables will be read by any browser that uses the Embed tag rather than the Object tag.

Any FlashVars that contain special characters such as spaces and question marks must be URL-encoded.

Creating FlashVars with JavaScript

HTML can be manipulated by JavaScript and written on-the-fly by server-side scripting languages such as PHP and ASP. With JavaScript you can obtain variables from Web forms, XmlHttpRequest (Ajax) cookies, and more. This example uses a simple JavaScript object to store values. Those values will then be inserted into the Object and Embed tags.

1.Open a new Flash document and save it as flashVarsTest.fla in your work folder.

2.Click the first frame in the timeline, open the Actions panel, and enter the following ActionScript code:

this.createTextField(“FlashVars1_txt”, 0,10,10,200,20); this.createTextField(“FlashVars2_txt”, 1,10,30,200,20);

this.FlashVars1_txt.text = _root.JSvalue1; this.FlashVars2_txt.text = _root.JSvalue2;

3.Select File Publish Settings and select the HTML tab. If you don’t see an HTML tab, click the Formats tab and be sure the HTML format checkbox is selected. Select the Flash Only from the Template drop-down menu.

4.Publish the FLA.

5.Navigate to your work folder, find the flashVarsTest.html, and open it in your favorite text editor. Modify the file by making some additions:

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”> <head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1” />

591

Chapter 23

<title>FlashVarsTest</title> <SCRIPT LANGUAGE=”JavaScript”> <!--

var JSvalue1=”Jeff”; var JSvalue2=”Nathan”; function getVar(name)

{

return eval(name);

}

//--> </SCRIPT> </head>

<body bgcolor=”#ffffff”>

<SCRIPT LANGUAGE=JavaScript1.1> <!--

document.write(‘<OBJECT classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000”’); document.write(‘ codebase=”http://download.macromedia.com/pub/shockwave/;

cabs/flash/swflash.cab#version=8,0,0,0” ‘);

document.write(‘ ID=”FlashVarsTest.swf” WIDTH=”550” HEIGHT=”400” ALIGN=””>’);

document.write(‘ <PARAM NAME=FlashVars VALUE=”JSvalue1=’+getVar(‘JSvalue1’); +’&JSvalue2=’+getVar(‘JSvalue2’)+’”>’);

document.write(‘ <PARAM NAME=movie VALUE=”FlashVarsTest.swf”> <PARAM NAME; =quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> ‘);

document.write(‘ <EMBED src=”FlashVarsTest.swf” quality=high bgcolor=#FFFFFF; FlashVars=”JSvalue1=’+getVar(‘JSvalue1’) +’&JSvalue2=’+getVar; (‘JSvalue2’)+’”’);

document.write(‘ swLiveConnect=FALSE WIDTH=”550” HEIGHT=”400” NAME=; “FlashVarsTest.swf” ALIGN=”middle”’);

document.write(‘ TYPE=”application/x-shockwave-flash” PLUGINSPAGE=”http:; //www.macromedia.com/go/getflashplayer”>’);

document.write(‘ </EMBED>’); document.write(‘ </OBJECT>’);

//--> </SCRIPT> </body> </html>

6.Save the HTML file and open it in your favorite browser. As long as your browser supports JavaScript, and JavaScript is enabled, you will see the JavaScript values appear within your SWF file.

How It Works

In this example you saw how you can write HTML via JavaScript to manipulate the values that appear within the Object and Embed tags. You could also retrieve the values by means other than eval, such as a cookie, or via an XmlHttpRequest (Ajax).

Because this method involves nesting of quotes and single quotes, it can become confusing and can be difficult to fix when an error occurs. Use a browser that has JavaScript debugging enabled when writing your JavaScript.

592

Communicating Between the Macromedia Flash Plug-in and the Browser

Passing FlashVars via a Servlet Page

Similarly, you can construct FlashVars within an Object and Embed tag by writing your page dynamically with servlets or server scripting engines. To test this example you will need PHP or some other serverside scripting engine. This example uses PHP, but if you know a different language you can make the appropriate syntax changes and use your preferred environment.

An example PHP page could look like the following:

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”> <head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1” /> <title>FlashVarsTest</title>

</head>

<body bgcolor=”#ffffff”>

<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000” codebase=”http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ver sion=8,0,0,0” width=”550” height=”400” id=”FlashVarsTest” align=”middle”>

<param name=”allowScriptAccess” value=”sameDomain” /> <param name=”movie” value=”FlashVarsTest_PHP.swf” /> <param name=”quality” value=”high” />

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

<param name=”FlashVars” value=”PHPvalue1=<?php print $PHPvalue1; ?>&PHPvalue2=<?php print $PHPvalue2 ?>” />

<embed src=”FlashVarsTest_PHP.swf”

FlashVars=”PHPvalue1=<?php print $PHPvalue1; ?>&PHPvalue2=<?php print $PHPvalue2; ?>”;

quality=”high”

bgcolor=”#ffffff”

width=”550”

height=”400”

name=”FlashVarsTest”

align=”middle”

allowScriptAccess=”sameDomain” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” />

</object>

</body>

</html>

This PHP page would be called by appending variables in a GET request. The URL could look like the following:

http://www.pixelplay.org/jeff/flashvars/FlashVarsTest_PHP.PHP?PHPvalue1=Jeff&PHPval

ue2=Nathan

Of course, the PHP could have constructed the variables in a far more complex application, but this should give you an idea how FlashVars can enhance SWF files served from servlets and server-side script engines.

593

Chapter 23

Summar y

This chapter introduced some ways to pass data between Flash movies and the web browser. Some points to remember include the following:

The LocalConnection class allows you to pass data between two or more SWF files running in the same browser application.

With LocalConnection, one of the SWF files is a designated data recipient and is responsible for performing the initial channel setup, while any number of other SWF files can send data to the channel.

Shared objects work similarly to browser cookies. They allow an SWF file to store data within a specific area of the local machine for later retrieval. The data persists even if the browser is closed or the machine is rebooted.

FlashVars is a convenient mechanism for passing startup data that is to be immediately available to the SWF file when it starts up.

Exercises

1.Set up a local connection between two SWF files on the same HTML page. One SWF file should contain a Play button and a Pause button, and the other one should contain a simple animation. Clicking Play or Pause in the one SWF file should signal the animation in the other SWF file to start or stop playing.

2.Set up a screen that has an input field for username and password, a drop-down menu for language, and a Login button. Using the Parameters palette, populate the drop-down language menu with at least two languages by adding to the data and label parameters. When the Login button is clicked, save the username and the language to two shared object data properties. When the project is re-launched, have it immediately populate the username field with the last username used, and pre-select the value from the language drop-down that was previously selected.

594

Chapter 24

Figure 24-1

To allow ExternalInterface to work with local content, you must make the change in the Flash Security Settings panel. This panel is not in the Flash 8 development environment. Instead, it is a special Flash movie that is loaded into the browser. To access the panel, click the Settings button in the Flash Player Security alert screen or point your browser to www.macromedia.com/support/documentation/ en/flashplayer/help/settings_manager04a.html. A screen much like the one in Figure 24-2 opens.

Figure 24-2

596

Putting JavaScript to Work

To set a directory as containing trusted content, perform the following steps:

1.Point your browser to www.macromedia.com/support/documentation/en/flashplayer/ help/settings_manager04a.html.

2.Select the Always Allow radio button.

3.From the Edit Locations drop-down menu, select Add Location.

4.Click the Browse for Folder button. Choose the folder containing your Flash content or its parent folder.

After you have selected a folder, the security panel should look something like what’s shown in Figure 24-3. The security settings changes will take effect immediately, and all Flash content within the selected folders and all of its subfolders will function without generating a security warning.

Figure 24-3

Calling JavaScript from within Flash

Although a Flash SWF can be run in many different settings, such as a projector or the standalone Flash player, the browser is the most common deployment channel for SWF files. Luckily, browsers are getting better and better. More than ever before, browsers use standards and common behaviors.

JavaScript is one way in which you can communicate with most browsers. With JavaScript you can connect to existing JavaScript-based services and security layers that require JavaScript cookies. Within Flash there are several ways in which you can connect to JavaScript. This chapter examines each method. Communicating with JavaScript enables you to connect to JavaScript functions and to the JavaScript window API, giving you control over the HTML window that contains your Flash file. Because there are so many browsers, and JavaScript has quirks in each, you should test any JavaScript thoroughly and on all your target systems.

597