Tag Archives: flash

object and embed tag position in IE

What is OK?

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!

Passing objects with ExternalInterface from JS to Flex

What if you’d like to pass an object to Flex

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' };
}

Continue reading Passing objects with ExternalInterface from JS to Flex

Tips and tricks in ExternalInterface communication!

ActionScript and the rest of the world

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!

ExternalInterface from JavaScript to IE/Firefox

ExternalInterface communication with JavaScript

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: Continue reading ExternalInterface from JavaScript to IE/Firefox

load flash .swf in hidden div

Well let’s assume you’ve a <div> and like to load a .swf flash file into it. We suppose you’re using swfobject or any other library or even if you don’t use library that should be a simple thing to do.

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.