JavaScript in love with Flash — Put them together

       One most popular way of publishing a Flash movie is to embed the swf into a web page making it available to ubiquitous web browsers.

       Now consider a web page as a host for a Flash movie, it is often desirable to control the swf from the web page and vice versa. The ability to control Flash movies from JavaScript and the ability to call JavaScript functions from a swf enable us to create highly interactive web content.

       This article will go through the skills and tricks of the communication between a web page and its embedding Flash movie.

 

l          Embedding your movie into a web page

       Since version 2.0, Shockwave Flash plug-in supports Netscape’s LiveConnect and the scripting capability for Microsoft ActiveX has been greatly enriched. At present, Internet Explorer and other mainstream browsers support Flash plug-in scripting to a satisfying level. Before you get your hand dirty you must ensure that the plug-in support (e.g. ActiveX for IE or LiveConnect for NN) is enabled and correct version of Flash plug-in is properly installed. ActiveX Shockwave Flash plug-in provides additional events and properties for scripting to other versions. This article will feature on ActiveX plug-in.

       Once you finish your movie in the Flash authoring environment you can choose file->publish or press Shift+F2 to publish it in an HTML document. The following HTML code to hold your swf will be found between the <body></body> tags of the generated HTML document.

 

<!–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; width="550" height="400" id="mosquito" align="middle">

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

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

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

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

<embed src="mosquito.swf" quality="high" bgcolor="#ffffff" width="550" height="400"

name="mosquito" align="middle" allowScriptAccess="sameDomain"

type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer&quot; />

</object>

 

       As you can see, both an <object> tag and an tag are present and they have (and must have) identical values for each attribute or parameter to ensure consistent behavior across different browsers. In fact in my IE6.0 either tag will be happy working independently. However, having both tags ensures availability for more browsers. The id attribute of the <object> tag and the name attribute of the tag indicate the identifier that will be used in JavaScript. They should have exactly the same value. The param tag specifies any available parameters exposed by the plug-in. It is recommended that you only have one id attribute and one name attribute specified for the <object> and the tag respectively. Otherwise the communication between the Flash movie and JavaScript may fail in particular browsers (e.g. NN 6.2 fails when a name attribute is specified in the <object> tag).

 

l          Understanding the embedded Flash movie

       It is important to understand that JavaScript is a scripting language for controlling the behaviors of elements in the Document Object Model. And the Shockwave Flash ActiveX plug-in is just one of them. In other words, JavaScript knows nothing about Macromedia Flash. All operations are actually made possible by the plug-in. It is the plug-in that plays a Flash movie and act as a messenger between the movie and the outer world. The param tags or attributes of the tag can specify plenty of preferences for the plug-in. Available preferences may differ from version to version.

       There are some very important and mostly concerned attributes/parameters that I’d like to mention.

       The src attribute or the movie parameter indicates the URL of the swf to be embedded. Modify both items to the URL where your swf is.

       In most cases we want our movies to have a transparent background. This can be easily accomplished by setting the wmode attribute/parameter to "Tansparent". If you also want you swf to interact with HTML layers so that you can specify the z-index, please use "Transparent windowless". But beware that it’s only OK in Windows with the Flash Player ActiveX control and the <object> tag must be present.

       Every swf has its own cross-domain access security settings, but that can be circumvented by calling JavaScript functions. Here comes the allowscriptaccess attribute/parameter. Set it to either "sameDomain" or "always" unless your swf has no interaction with the hosting page. "sameDomain" allows script access only when the swf and the hosting page are in the same domain.

       For a detailed list of supported parameters and attributes, please consult Macromedia‘s official document:

       http://livedocs.macromedia.com/flash/mx2004/main_7_2/00000529.html

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