The communication style of JS and SWF

1. Embed the SWF file in the page

2. js and SWF communication pose format

3. Common Problems and solutions

First Project group: Embedding a SWF file in a page

Since it is the interaction between Flash and JS is bound to their common carrier Web page, that is, our first section of the content;

Let's take a look at what kind of format the Flash file is in today's HTML page.

The first: an ancient and inappropriate embedded format for the standard:

<object classid= "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase= "http://fpdownload.macromedia.com/pub/ shockwave/cabs/flash/swflash.cab#version=7,0,0,0 "width=" 550 "height=" "id=" Demo1 "align=" Middle ">

<param name= "allowscriptaccess" value= "Samedomain"/>

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

<param name= "Quality" value= "High"/>

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

<embed src= "mymovie.swf" quality= "High" bgcolor= "#ffffff" width= "550" height= "All" Name= "Demo1" align= "Middle" allowscriptaccess= "Samedomain" type= "Application/x-shockwave-flash" pluginspage= "http://www.macromedia.com/go/ Getflashplayer "/>

</object>

Copy the above code into your HTML document and correct the path of the flash file, such as: <param name= "movie" value= "xxx/xxx.swf"/> and <embed src= "xxx/xxx.swf" You can display the contents of flash in your site, you may also be able to correct the width, height, bgColor waiting properties as required.

But, when we first see the code of work, is not very faint ah, this is what ah, so long look like there are many no semantics, and there are a lot of redundant code. It is true that there are many unpleasant places in this, and here are one by one of them:

1) Redundant code:

We see Width,height,quality,bgcolor align and so on. These attributes are repeated two times the same value in the object tag, the Param tag, and the embed tag.

2) CodeBase What does this mean, I must either?

Microsoft Internet Explorer version 3.0 and later applies the CODEBASE property to detect which version of the Macromedia Flash player ActiveX control is installed on the user's drawing machine. If the user's version is older than the version specified by CODEBASE, Internet Explorer can proactively download and install the new version of Macromedia Flash Player from the status specified by CODEBASE. -From the original;

Through the declaration above the procedure, we know that it is to determine the Flashplayer version of the current Flash file that needs to be run. But is there a better way?

3) Why also set a layer of embed tags in object.

The object tag is for the Windows platform of IE browser, and embed is used for Windows and Macintosh platform under the Netscape Navigator browser and the Macintosh platform under IE browser. The Windows platform's IE tricks ActiveX controls to play Flash while other browsers apply the Netscape plugin technique to play flash.

This means that embed is telling non-ie browsers to have the information they need to be lined up with the current Flash file. Although embed solved the non-ie browser lined with flash files, but it can not be verified through the process.

To understand this, we have found a better solution to this plan.

The second type of embedded format: suitable for the standard embedded format:

<object width= "550" height= "All" type= "Application/x-shockwave-flash" Data= "swf/fp9.swf" id= "Test2" style= " visibility:visible; " >

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

<param name= "allowscriptaccess" value= "Always"/>

<param name= "wmode" value= "Transparent"/>

<param name= "allowFullScreen" value= "true"/>

<param name= "Quality" value= "High"/>

<param name= "Flashvars" value= "text= This is flashvars incoming data ah"/>

</object>

Compared to a piece of code, this paragraph does alleviate the shoulder of our eyes, without so much redundant code, also suitable for the standard of the world. Careful classmate estimate also saw the path of flash file and was repeatedly defined two times, as above the scene, data is to meet non-ie, <param name= "move" src= "" ""/> Meet IE browser.

　　

The combination of the above two types of format, although the problem of embedding flash in the page, and the second approach looks more elegant, redundant code is very small, but they all have a common topic: no flashplayer detection;

That is, if the current browser does not have Flash Player installed or installed version of the browser can not meet the Flash file to display the minimum version of the request, it will cause the browser cannot correctly flash out. The user at the front of the screen neither sees the correct content nor gets an error (of course, if he doesn't install flashplayer at all, the browser will actively detect it and prompt him to install the Flashplayer plugin.) ）。 So how do we solve the problem? In order to understand these problems, we continue to look for ...

The third luxury version of the embedded form: swfobject

Let's start by understanding what SWFObject is a device.

SWFObject is a JS class library, it encapsulates a lot of ways, using these methods can help you to inspect the client's flashplayer scene and dynamic, static embedded Flash files into the page.

The method is simple and fast. Here are some of its strengths:

? The JS script in this module may proactively detect the support of flash plugins by various mainstream browsers on the client machine. Make the Insert Flash media data as simple as possible, Enron.

? And it's a good rule to find the engine optimization. You might be able to avoid nonstandard tags such as object, embed, and so on in your HTML, XHTML, to double the standard.

Let's look at a specific example of Swfobjet:

<script type= "Text/javascript" src= "Swfobject.js" ></script>

<script type= "Text/javascript" >

swfobject.embedSWF ("test.swf", "Swfid", "300", "120", "9.0.0");

</script>

<div id= "Swfid" ></div>

is not a lot easier than the two approaches above. If you just embed a picture of a flash animation file, the top four sentences are all done.

This is not very cool, the code is a lot less ...

Here we introduce the specific methods of swfobject embedded Flash:

<script type= "Text/javascript" src= "Swfobject.js" ></script>

<script type= "Text/javascript" language= "JavaScript" >

var flashvars = {

Namea: "Hello",

NAMEB: "World"

}

var params = {

Menu: "false",

allowFullScreen: "false",

allowScriptAccess: "Always",

bgcolor: "#ffffff",

Wmode: "Window"

}

var attributes = {

ID: "Test"

}

swfobject.embedSWF ("swf/test.swf", "Altcontent", "100%", "100%", "9.0.0", "swf/expressinstall.swf", Flashvars, params , attributes);

</script>

<!--the label to be swapped by the Flash file status--

<div id= "Altcontent" >

<p><a href= "Http://www.adobe.com/go/getflashplayer" > Install the latest flashplayer</a></p>

</div>

<!--/tags to be swapped by Flash file status--

Flashvars is a JSON object that transmits some initialization information to flash;

Params set the flash of some of the lining mode and patron color, zoom mode, right-click menu, whether to allow Flash to see the method of JS inside, etc.

Attributes set id,name properties such as the object tag embedded in Flash completion

　　

Now we specifically introduce the swfobject.embedSWF method, the method requires 10 parameters, the following is the specific description:

Swfurl (String, required) specifies the URL of the SWF.

The ID (String, required) specifies the ID of the HTML element that will be swapped by the Flash content.

Width (String, required) specifies the width of the SWF.

Height (String, required) specifies the height of the SWF.

Version (String, required) specifies the version of the Flash Player for your published SWF (landscape: major.minor.release).

Expressinstallswfurl (String, optional) specifies the URL of the Express install SWF and activates the Adobe Express install.

Flashvars (Object, optional) specify your flashvars with Name:value.

The params (object, optional) uses the Name:value to specify the params of your nested Object element.

Attributes (object, optional) The property of the specified object with Name:value.

CALLBACKFN (JavaScript functions, optional) defines a JS function that can be recalled after a successful or failed embedded Flash after the embedswf method is fulfilled

For unnecessary parameters can be omitted, but if a parameter does not need, but later need to set a specific value of the hour, please use the null keyword placeholder, such as:

swfobject.embedSWF ("swf/test.swf", "Altcontent", "100%", "100%", "9.0.0", NULL, flashvars, params, attributes);

Above said SWFObject will take the initiative to determine the client's flashplayer scene, in here why not show it? We're going to introduce you here. SWFObject the way to detect the client scene is now in the following three areas:

1) <div id= "Altcontent" ></div>

The above example we can see in this div there are some simple descriptions of the flash you want to embed and a link address for today's flashplayer. This div is very important, its impact is that if the client does not install Flashplayer or Flashplayer version is not high, this section of the label will not be swapped to reach the prompt user this project group content to install Flashplayer talent correct display.

2) The version parameter inside the swfobject.embedswf method;

The version parameter tells the SWFObject to replace the top div tag when it satisfies the Flahsplayer version, embed the Flash file correctly, or it will not swap.

3) Expressinstallswfurl parameters inside the swfobject.embedSWF method

The Expressinstallswfurl parameter is a SWF file supplied by Adobe for active-level Flashplyaer, when the client installs a version of Flashplayer 6+ and does not reach the version described by the Verison parameter. SWFObject will display this expressinstall.swf file in the page, which will prompt you to enter the level Flashplayer.

Other, SWFObject also supplied two ways to detect the Flashplayer version:

Swfobject.getflashplayerversion ()

Returns a JavaScript object that contains the top version (Major:number), minor version, Minor:number, release version (Release:number) of the installed Flash Player.

　　　　

Swfobject.hasflashplayerversion (VERSIONSTR)

Returns a Boolean value that notes whether a specific version of the Flash plugin has been installed; such as: Swfobject.hasflashplayerversion ("9.0.124")

Here, the first project team is finished, more information about SWFObject can be found here: http://code.google.com/p/swfobject/

　　　　

The second project group: JS and SWF communication pose format

The so-called communication is the interchange of information, here we talk about the data interchange between JS and Flash.

We first look at the JS and Flash interchange information of the three types of format.

1. Through the process Flashvars

The Flashvars-flash of the initialization information, which is composed of n set of name value pairs, which is needed when your Flash file needs some initial information.

If you apply the first two embedding methods, should be like this: <param name= "Flashvars" value= "text= This is flashvars incoming data ah"/> with param tag to pass information;

If you are using SWFObject, you can define a flashvars variable and pass in the swfobject.embedSWF method when you call it.

Or the above two methods can be inserted after the Flash file address you want to add a question mark to pass in: "Xxx.swf?" Name1=hello&name2=world ";

2.JS call Flash method, with parameters to pass information to flash or to obtain the Flash method return information

Flash object. Flash method Name (parameter 1, parameter 2, ...) ）;

Such as:

var flashobj = Getflashfun ("Flashid");

var value = Flashobj.flashfunname (args);

Attention:

1. The number of parameters must match the number of parameters in Flash

2. Under the non-domain needs to obtain the flash inside the allowable security.allowdomain (... domains)

　　　　　　

3.Flash Call JS method to get the return information of JS method or pass information to JS via process parameters

Externalinterface.call (JS's function name, "Parameter 1", "Parameter 2", ...) ）;

Such as:

var value:string = Externalinterface.call ("Jsfunname", "argument1", "argument2");

Value of the allowScriptAccess attribute that sets the param tag in a non-identical domain is always, such as:

var params = {

allowScriptAccess: "Always"

};

Or:

<param name= "allowscriptaccess" value= "Always"/>

The third project group: Common problem Analysis and solution

1. Flash does not get the correct initialization parameters

– Pass intervention the parameters of the dry and number pass are covered by the parameters passed in the Flashvars format

– Some flashvars values with "&" symbols are not encodeuricomponent encoded

2. js Call Flash Method failed

–flash No initialization complete-deferred call or flash inside set callback function tells JS Flash file initialization complete

– Ways to get Flash objects Browser compatibility topic-correcting the JS method for getting Flash objects

– The function name is not correct, or the method is not defined in SWF

–flash does not allow cross-domain invocation of its internal approach

– The incorrect number of arguments when calling the Flash method should

– The Flash method cannot be called after refreshing in a domestic famous burglary browser such as flying, TT, etc.

Two solution plans:

1. After the Flash file address plus random values do not allow Flash file cache;

2. Delay adding JS callback function in Flash.

3. Flash Call JS method failed.

–allowscriptaccess: "Never"

– No settings across domains: allowscriptaccess: "Always"

–flash call JS, JS object does not exist

4. The shells are covered by flash!

– Set the value of Wmode to: opaque or transparent;

<param name= "wmode" value= "Transparent"/>

var params = {wmode: "Transparent"};

– or make the layer flash (this is not strong ...) ）

　　

5. Unable to enter Chinese in Firefox

　　　　　

– Set the value of the Wmode to: window;

Here we simply understand the wmode:

Window mode

The default view of the display mode, in this mode Flash Player has its own window handle, which means that the Flash movie is present in Windows in a display instance, and is on the browser core display window, so flash just appear in the browser, But this is also the fastest and most effective flash-lined mode. Because he is self-reliant on the browser's HTML, this results in the default display of the format of the Flash will always cover the status of all the DHTML layer with his overlap.

However, most of the half Apple browsers will allow the DHTML layer to appear on flash, but when the Flash movie plays it will show a strange phenomenon, such as the DHTML layer as a flash scraping a piece of the same display exception.

Opaque mode

This is a windowless mode, in which Flash Player does not have its own window handle, which requires the browser to tell Flash Player when and where the browser is lined with profile drawing. In this case, the Flash movie will not be more than the browser HTML, but the same as other elements on the same page, you can apply the Z-index value to grasp the DHTML element is to conceal flash or be concealed.

Transparent mode

Transparent mode, in this mode, Flash Player will be the stage's patron color alpha value will be 0 and will only draw the actual visible object on the stage, you can also apply z-index to grasp the Flash movie depth value, But the opaque mode is not the same as doing this will land the Flash video playback results, and before 9.0.115 Flash Player version Settings wmode= "opaque" or "transparent" will cause full-screen mode invalidation.

Understand the implementation of various types of patterns and the meaning of the future in the opening up can be followed by the specific scene select set the value of the Wmode property.

So in the absence of the problem of the layer is concealed, the master as far as possible to set wmode for window mode, has improved the effectiveness of flash and some strange bug!

The communication style of JS and SWF