If you’ve written at least once the OBJECT and EMBED tags, without copy/paste you may have been noticed that the place of the EMBED tag is a bit strange. Actually after the OBJECT tag, comes the PARAM sequence, that simply defines different parameters for the flash movie.

And what looks strange?

The strange thing in all this is that the EMBED tag, which in fact is only one, instead of the case with all the parameters of the OBJECT, is displayed just before the closing of the OJBECT tag.

Experimenting …

What if the embed tag is outside of the OBJECT opening and closing tags. Actually only IE understands this as a problem. Than it displays the move twice!

That’s why the place of the EMBED is just before closing the OBJECT tag. In that case MSIE doesn’t “see” the EMBED and displays everything correctly!

To continue the topic of my previous post I’m just going to add that there’s a native way to pass objects from JavaScript to Flex’s actionscript.

I’m not going to describe how to structure a object in JavaScript and/or Flex. Let’s go directly to the example.

The function in .js file should return something that is object in JavaScript:

.js file

function getObject() {
    return { foo : 'bar', zoo : 'tar' };
}

Now, supposing that in Flex there already has been added a callback with ExternalInterface(‘getObject’, receiveObject); and the as3 function receiveObject looks similar to this:

.mxml or .as

private function receiveObject( obj : Object ) : void
{
    Alert.show(obj.foo);
    Alert.show(obj.zoo);
}

That outputs respectively “bar” and “tar”.

Even more …

You can pass from .js to .as array of objects, but than with small change of the code you’d access the variables:

obj[0].foo
obj[1].foo

assuming that there are two objects with same properties.

In the past, when ActionScript v2 was widely used, the most common way to interact with the other parts of the web application, whether a page refresh, redirect or JavaScript method call was the as2 method getURL. With the simple getURL(‘javascript:someJSMethod…’) the flash movie called the JS function and everything was OK.

Now in ActionScript v3 where everything looks and it is different, everything about communication between JS and Flash/Flex is done by ExternalInterface. The communication can be done in both directions. From JS to Flash and vice versa.

The ExternalInterface.call

There are two simple methods implemented by ExternalInteface. The first one is addCallback and the second one is call. Here I’m going to write a little more about the second one.

The most common usage is:

ExternalInterface.call('jsMethod');

where jsMethod is, as you can guess, a JavaScript method. Something like:

test.js

function jsMethod() { alert('test') };

A bit different, but yet again simple, is the call to a js function with parameters:

ExternalInterface.call('jsMethod', param1, param2);

where the javascript function can be:

function jsMethod(param1, param2) { alert(param1) };

But what I was writing about is really tricky. What if the jsMethod returns a value? Than in the .js file you’ve the following method:

function jsMethod() { return 'foo bar' };

and when you try this:

var str:String = ExternalInterface.call('jsMethod');
Alert.show(str);

you get the alert box with the string ‘foo bar’.

Where to use it?

Well this is really useful, because you get the response within the call method, only with the .call instead with .call and than .addCallback. The problem of course appears when you try to use it with AJAX call. Than even if the function returns in the success method of the AJAX call the flash doesn’t get the response.

Than you simply implement the communication with both .call and .addCallback!

The most simple way to describe the case is as if you have the ExternalInterface addCallback in the Flex application like that:

flex.mxml

ExternalInterface.addCallback("jsFunc", flexFunc);

public flexFunc() : void
{ ... }

and in the javascript code you’ve something like that:

file.js

function getSwf(movieName) {
    if (navigator.appName.indexOf("Microsoft") != -1) {
         return window[movieName];
    } else{
         return document[movieName];
    }
}

getSwf('movie').jsFunc();

that will execute the flexFunc in the flex app.

Important!

is very important to have the object/embed tag correct:

<object classid="clsid:d27cdb6 ....
<param name="name" value="movie" />
<param name="allowFullScreen" value="true" />
<param name="AllowScriptAccess" value="always" />
<param name="wmode" value="transparent" />
<param name="flashVars" />
<param name="src" value="movie.swf" />
<embed ... name="movie"></embed>
</object>

That doesn’t work? Where’s the bug?

Even it’s not so clear the bug is present. The getSwf function gets the window[moviename], or document[moviename] depending of which browser is used. But the problem is that both object and embed tags have same name and the selected object is not one but two.

So there’s a simple patch

Name the object embed tags with different names, i.e.

<object classid="clsid:d27cdb6e-ae6d-11 ...>
<param name="name" value="movieie" />
<param name="allowFullScreen" value="true" />
<param name="AllowScriptAccess" value="always" />
<param name="wmode" value="transparent" />
<param name="flashVars" />
<param name="src" value="movie.swf" />
<embed ... name="movieie"></embed>
</object>

now they are named movieie (for IE) and movieff (for Firefox) and we must to change a bit the getSwf function like that:

function getSwf(movieName) {
    if (navigator.appName.indexOf("Microsoft") != -1) {
         return window[movieName + 'ie'];
    } else{
         return document[movieName + 'ff'];
    }
}

getSwf('movie').jsFunc();

But what happens if the <div> has the style property “display:none”. Than unfortunately the flash file does not load. You get the file from the server, but when you set the <div> to be “display:block”-ed the flash starts the play from the very beggining.

Actually that’s supposed to be default action. In fact the workaround is like so. You put the <div>, not to be hidden with that “display:none”, but to be with 0px width and height. something like that:

<div style=”width:0px;height:0px;overflow:hidden;”></div>

The overflow is important – cause you’d like to load the swf file into the <div> and if the swfobject.crateSWF or embedSWF is with 100% width and height, the flash will result with zero height and zero width.

So you may put the flash to load in something like that:

<div style=”width:800px;height:600px;”></div>

and put that one into the div with overflow hidden. Than the outer <div> will be ivisible but present to the page and the inner one will be with fixed width and height.

Now when the flash loads, or if the user clicks on some part of the page or fires some event, you can simply reset the width and height of the outer <div>. The resulting piece of code will look like:

<div style=”width:800px;height:600px;overflow:hidden;”>

<div style=”width:800px;height:600px;”> the flash goes here with 100% width and height </div>

</div>

With jQuery that should look as follows:

$(document).ready(function() {

$(‘#outer-div’).css({ width: ‘800px’, height : ‘600px’ });

});

Now you can load the flash in background, even you can start loading it after everything else is loaded – i.e. on document ready event of jQuery, so if you have havy computations in that flash you can simple show something else to the user till the flash loads.

As it appears if you have flash embed / object tags in a div which is initaly hidden (style=”display:none”) cannot be loaded. It means the .swf file is loaded via HTTP but when the div become visible then starts the loading process and the flash starts from the begining.

Is there a workaround?

I’m looking for a workaround which I’ll share as soon as I find it. If you have a solution please share it with us.

Make the .swf sample file with both symbols inside. In general it’s not that hard, just put this into your Flex application code:

[Embed(source="embed.swf", symbol="blue")]
private var blue:Class;

[Embed(source=”embed.swf, symbol=”red”)]
private var red:Class

Note that you’ve embed.swf file, which has to be in the same folder as the main .swf of the Flex app, and two symbols named red and blue for the sample. Be very careful when exporting the symbols from the .swf file. Do not forget to export them for actionscript.

If not exported like that, you’ll have trouble accessing them from the Flex app, and that’s the first problem you can have here.

The rest you have to do is to add this two lines of code in Flex:

var mc:MovieClip = new blue();
this.addChild(mc);

Note that the last line can have something else than ‘this’ if there’s other element to become parent of the imported MovieClip symbol. Here comes the first major problem. As www.airtightinteractive.com describes this technique does not work every time:

Sometimes when you do this you will get the following error:

TypeError: Error #1034: Type Coercion failed: cannot convert app_red@12510d1 to flash.display.MovieClip.

And the author shares his solution which is to add at least 2 keyframes for both movie clips, so that they can be visible as movie clips, if not they will remain visible only as Sprites.

I’m not as conviced this is the right answer of the question and the right solution. I’ve experimented with 1 or 2 keyframes and still have the same problem in Flex even if i cast the symbols as Sprite, not MovieClip:

var mc:MovieClip = new blue();
var mc:Sprite = new blue();

The solution from Adobes for me is not suficient, cause the movie clips we import (embed) does not serve as images but more like movie clips, which was the task from the beggining. And that’s what Adobe says:

Flex fully supports embedding Flash SWF files. You can embed different types of SWF files.
…
To reference a symbol, you specify the symbol parameter:
[Embed(source=’SWFFileName.swf’, symbol=’symbolName’)]

And again read carefully the note in the Adobe’s site:

Note: Flash defines three types of
symbols: Button, MovieClip, and Graphic. You can embed Button and
MovieClip symbols in a Flex application, but you cannot embed a Graphic symbol because it cannot be exported for ActionScript.

Here you can be sure that lack of exported for actionscript symbol is not accessible in Flex.

One of the main solutions is to embed the .swf as octet-stream:

[Embed(source="embed.swf", mimeType="application/octet-stream")]
private var blue:Class;

followed by:

var loader:Loader = new Loader()
loader.loadBytes(new blue());

And the key point of this will be the lines:

var red:Class = loader.contentLoaderInfo.applicationDomain.getDefinition("blue");
var mc:MovieClip = new red() as MovieClip;

I hope this can help

Please, provide any feedback about the datechooser and feature requests.

I’ll put the component documentation soon.

Demo is here:

Free download: here

Very well known is that these tags help to put a flash movie into the HTML, but why they are two, and can they be used in other cases remains unanswered.

These tags, in general, are really most used to put flash movie into the web site, and as anyone can guess they are two cause of the differences in the web, specially between the web browsers. The <object> tag helps for the browser who use ActiveX controls to display properly the flash movie. In fact the newest Internet Explorer browsers like 7 version and 8 beta, display the movie correctly even without the <object> tag, but not always those flash movies work in the expected manner. Somethimes there are problems with autoplay or something like that. Especially this can be problematic when using some kind of .flv player. In that case (depending from the player) the movie initialize but the required .flv does not load and play. This was the problem I wrote for in my previous post about Opera and JW FLV Player.

As you may guess the <object> tag can handle much more the flash movie, but as many other entities as there are ActiveX controls.

To be more exact the <object> tag is for Internet Explorer, while the <embed> tag is for Netscape and related to it browsers using Netscape plugin to display a flash movie. More detailed information can be found on Adobe site:

http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_4150

All the specification can be found online but more important is to mention the semantics of some of the attributes.

For both of the tags valid attributes are width and height. They can be either pixels or percentage, which are relative from the element containing the object/embed pair, i.e. if the flash is in a div with fixed width of 800px and the object/embed pair is 100% width the movie will became 800px wide.

Notice: some browsers do not calculate the height correctly when the height is set in percentage.

For the <object> tag only there should be classid, codebase, movie attributes, while for the <embed> tag only is src and pluginspage.

see which attributes are mandatory and which one are not at: object and embed tags revealed