Tag Archives: flex 3

Flex Javascript communcation example

First of all you’ve to have both files for JavaScript and Actionscript  3 to make the communication successful. I don’t remember where exactly I found the tutorial, maybe it was on the official Adobe’s documentation page, but as I’ve written before I’m going to share my experience with the ExternalInterface options of Flex.

First of all you’ve to add this at the beginning of the page with the simple js code:

var jsReady = false;
function isReady()
return jsReady;

function pageInit()
jsReady = true;

of course the pageInit() function should be called onload of the body. It simply sets the JavaScript part to be ready for communication, after initialize the page. Than a small part of the javascript should be written for really speaking with the Flex application.

var swfReady = false;

function setSWFIsReady() {
swfReady = true;

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

function callFlexApp() {
if (swfReady) {
getSWF(“flash_movie”).methodInFlex(param_value1, param_value2);

Where flash_movie is the id of the object / embed pair.

First of all the JavaScript can begin to call methods in Flex only after the Flex application has returned that it has been initialized. That happens in Flex within the following file:

package communicator {

import flash.events.TimerEvent;
import flash.external.*;
import flash.utils.Timer;

public class Communicator

public function init():void {

if (ExternalInterface.available)

var containerReady:Boolean = isContainerReady();
if (containerReady)
var readyTimer:Timer = new Timer(100);
readyTimer.addEventListener(TimerEvent.TIMER, timerHandler);

trace(“External interface is not available for this container.”);


private function isContainerReady():Boolean
var result:Boolean = ExternalInterface.call(“isReady”);
return result;

private function setupCallbacks():void
ExternalInterface.addCallback(“callFlexApp”, callFlexApp);

private function timerHandler(event:TimerEvent):void
var isReady:Boolean = isContainerReady();
if (isReady)


private function callFlexApp(param1:int, param2:int):void
// this function is called from javascript




That’s the short description how to set up a communcation between JavaScript and Flex.

Flex Javascript communication

Communication between JavaScript and Flex applications can be done in many ways. Using SWFAddress and communicate with the help of the uri or using ExternalInterface flash communication interface are the most used.

The disadvantages of using SWFAddress is that the communication is slow and it had to change the uri, which is not always something the developer needs. In general the the Flex application listens for uri changes, simply by setting a timeout for a listener with very short period of time, like 10 milliseconds, and if some change occurs get’s the uri, parses it and process the changes.

From the beginning the hard-coded listening of the uri change is not a good idea. Even for very short timeouts it become risky when the user can click and skip an important refresh inside the flex application.

I strongly recommend the use of the build in ExternalInterface. The communication via ExternalInterface can be done in both directions to JavaScript to Flex and vice versa, which is the main advantage is the lack of programmatically added listening processes. Here all it’s done by the interface and the response from the other side is guaranteed.

There are tricky parts, of course, but in general it’s a secure and reliable way to talk between these two technologies.

A sample of the process you can find here.

Flex 3 ComboBox disabled options

Recently I had to make a drop down menu in a Flex Application, or either ComboBox in the Flex terminology, where some of the items in it should be disabled. Many tutorials explained how to make the entire ComboBox disabled, but that was out of scope here.The idea is to have a large range, let’s say the numbers from 1 to 30, and make 1 to 10 disabled, and the others – selectable. After reading the documentation of Adobe it appears that this is not possible with just using some attribute of the default component.

Of course in the case of only three you can make it with radio buttons or checkboxes. Here after the question how to write such a component, the answer is:

Have you considered using radio buttons rather than a combo box?

Well, no, I’m not! I’d like to make it for such a big range. In my case it was more than 200 options, the case with radio buttons is not enough.

Finally I found a sample of a disabled list items on http://joshblog.net but yet again it was dealing with list, not a combo box. In my case the combo box has very important built in events and fires different kind of them in any special situation. That’s why I don’t think this sample could do the work.

Actually as it seems easy and usefull, almost nowhere there was such a component. In Adobe’s blogs I found interesting post http://blogs.adobe.com/aharui/2007/06/disabling_list_selection.html where the author describes how to make a list with that properties, and somewhere in the comments I found the component at last:

Hi Alex,
I’m seeking the disabling combobox. Your posting give me some ideals.
And now, I have implmented the disabling ComboBox and List using my
Your blog is very helpful for me.Thanks.

I have put my disabling ComboBox to my blog

Here it is http://wmcai.blog.163.com/blog/static/4802420088945053961/

Thanks to the author there is a demo and download. Soon I’ll share my experience with the disabled combo box items.

Flex 3 import swf symbols

If you’d like to embed a .swf file into your Flex 3 application you’ll probably get into several little problems. The simple task of embedding is clear and well documented in the web. Let’s assume we’ve to MovieClip symbols into a single .swf file. What we like to do is to access this two separate symbols within the Flex applications as MovieClip.

make a movie clip in your flash
Make a new MovieClip symbol in your Flash

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.

Don't forget to export the .swf MovieClip for actionscript
Don't forget to export the .swf MovieClip 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.

Set the name of the MovieClip exactly as you wish to appear in your Flex application
Set the name of the MovieClip exactly as you wish to appear in your Flex application

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

var mc:MovieClip = new blue();

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