Blog › Flash/JavaScript Communication

Flash/JavaScript Communication

I recently worked on a video player in Flash for a predominantly HTML/JavaScript site, which involved having to do a lot of communication between ActionScript and JavaScript. This turned out to not be as straight forward as I had hoped, so I created a set of JavaScript and ActionScript code to wrap up the nasty bits and make it as simple as possible.

The aim was to create a cross browser solution that makes communication between ActionScript and JavaScript with both having similar APIs to one another.

Issues with Flash/Javascript communications

• In Safari Flash has to make a successful call to JavaScript before JavaScript can call Flash.
• In browsers except IE when the Flash HTMLElement Object on the page is display:none it is removed and when re-displayed starts from scratch.
• In IE Flash is inaccessible from JavaScript when display:none.
• You may have multiple Flash instances on one page.

How to use it

Javascript

Connect

Connect from JavaScript. When both JavaScript and ActionScript have connected successfully they can communicate.

FlashJavascriptBridge.connect(id,flashObject,target);

• id – unique id shared between ActionScript and JavaScript (we recommend the Flash objects ID) [String, Required]
• flashObject – DOMs Flash object [Object, Required]
• target – a target property to include when dispatching events [Object, Optional]

Add Event Listener

Add an event listener to listen for an event dispatched by ActionScript.

FlashJavascriptBridge.addEventListener(id,eventName,eventHandler);

• id – unique id same as value passed into connect method [String, Required]
• target -unique string given to the event you are listening for [String, Required]
• eventHandler – function to call if event triggered [Function, Required]

Dispatch Event

Dispatch an event from JavaScript to ActionScript.

FlashJavascriptBridge.dispatchEvent(id,event);

• id – unique id same as value passed into connect method [String, Required]
• event – a FlashJavascriptBridgeEvent [FlashJavascriptBridgeEvent, Required]

FlashJavascriptBridgeEvent

Event object sent to and received from ActionScript.

new FlashJavascriptBridgeEvent(type,data,target);

• type – a unique string denoting the type of event [String, Required]
• data – any data sent with key value pairs [Object, Optional]
• target – a target property set in the connect method [Object, Not used for event dispatching]

ActionScript

Connect

Connect from ActionScript.

FlashJavascriptBridge.connect(id, failCallback);

• id – unique id passed from JavaScript as a flashVar [String, Required]
• failCallback – callback for if connection fails i.e. ExternalInterface is unavailable. [Function, Required]

Add Event Listener

Add an event listener to listen for an event dispatched by JavaScript.

FlashJavascriptBridge.addEventListener(type,eventHandler);

• type – unique string given to the event you are listening for [String, Required]
• eventHandler – function to call if event triggered [Function, Required]

Dispatch Event

Dispatch an event from ActionScript to ActionScript.

FlashJavascriptBridge.dispatchEvent(event);

• event – a FlashJavascriptBridgeEvent [FlashJavascriptBridgeEvent, Required]

FlashJavascriptBridgeEvent

new FlashJavascriptBridgeEvent(type, data);

• type – a unique string denoting the type of event [String, Required]
• data – any data sent with key value pairs [Object, Optional]

Example

JavaScript

var vars = {id: "123", swf:"example.swf", flashvars:{bridgeID:"123"}};
$obj.flash(vars);

FlashJavascriptBridge.connect("123",$(obj).children()[0],obj);
FlashJavascriptBridge.addEventListener("123","fromASExample",fromASExampleHandler);

FlashJavascriptBridge.dispatchEvent("123",
new FlashJavascriptBridgeEvent("fromJSExample", {message:"Hello"}));

function fromASExampleHandler(event)
{
	log(event.type); //fromASExample
	log(event.data.message); //hello
};

ActionScript

FlashJavascriptBridge.connect(loaderInfo.parameters.bridgeID, flashJavascriptBridgeFail);
FlashJavascriptBridge.addEventListener("fromJSExample",fromJSExampleHandler);

FlashJavascriptBridge.dispatchEvent(
new FlashJavascriptBridgeEvent("fromASExample", {message:"hello"}));

function fromJSExampleHandler(event:FlashJavascriptBridgeEvent):void
{
	trace(event.type); //fromJSExample
	trace(event.data.message); //hello
}

Get the source

This is part of my jQuery video plugin on Github.