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.

To get it working you first need to create a fonts swf. Create font symbols for the fonts you require in an fla, ensuring you tick ‘Export for actionscript’ and ‘Export in frame 1′ in the symbols properties window. Publish as a swf.

Now you can use something like the following code in your application to load the fonts swf and embed all the available fonts in the swf.

import flash.text.TextFieldAutoSize;
import flash.text.AntiAliasType;
import flash.text.TextFormat;
import flash.text.TextField;
import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.events.Event;
import flash.net.URLRequest;
import ru.etcs.utils.getDefinitionNames;
import flash.text.Font;

var fontLoader:Loader = new Loader();
fontLoader.contentLoaderInfo.addEventListener(Event.INIT, fontLoadedHandler);
fontLoader.load(new URLRequest("fonts/fonts.swf"));

function fontLoadedHandler(event : Event) : void
{
	var loaderInfo:LoaderInfo = event.target as LoaderInfo;

	var def:Array = getDefinitionNames(loaderInfo, false, true);

	for(var i : int = 0; i < def.length; i++)
	{
		var c : Class = Class(loaderInfo.applicationDomain.getDefinition(def[i]));

		if(new c() is Font)
		{
			Font.registerFont(c);
		}
	}

	var textFormat:TextFormat = new TextFormat();
	textFormat.font = "Compacta BT";
	textFormat.size = 40;

	var textField:TextField = new TextField();
	textField.defaultTextFormat = textFormat;
	textField.embedFonts = true;
	textField.autoSize = TextFieldAutoSize.LEFT;
	textField.antiAliasType = AntiAliasType.ADVANCED;
	textField.text = "embedded font text";
	addChild(textField);
}

You can either use TextFormat or Styles once the font is registered, I used TextFormat to keep the example nice and quick.

I think it’s important to understand the capabilities of technologies to make the right calls on which is appropriate for each project. So I’ve started having a bit of a tinker with HTML5 and really gone back to basics! To have a play with the canvas I messed around with doing a coloured percentage fill on an image.

I came up with 2 solutions; colouring the pixels of part of the image and combining a cropped coloured version of the image and the original.

Colouring pixels

window.addEventListener('load', function () {

//get canvas
var elem = document.getElementById('percent');

//if canvas doesn't exist or canvas methods not supported abort
if (!elem || !elem.getContext) {
 	return;
}

//get 2D context
var context = elem.getContext('2d');

//if context doesn't exist or context methods not supported abort
if (!context || !context.drawImage || !context.putImageData || !context.getImageData) {
 	return;
}

//load image
var b = new Image();
b.addEventListener('load', function() {

	//get number out of canvas and strip out non-numerals
	var p = elem.innerHTML;
	p = p.match( /\d+/g ).join('');
	var h = parseInt((p / 100) * b.height);

	//draw base image
	context.drawImage(b, 0, 0, b.width, b.height);

	//get pixels from point where percent starts
	var iData = context.getImageData( 0, b.height - h, b.width, h);
	var pixels = iData.data;

	//for every pixel that isn't white draw a pink pixel
	for (var i = 0; n = pixels.length, i < n; i += 4)
	{
		if(pixels[i] < 255 && pixels[i+1] < 255 && pixels[i+2] < 255)
		{
			pixels[i] = 255;
			pixels[i+1] = 0;
			pixels[i+2] = 64;
		}
	}

	//add the new data to the context bottom aligned
	context.putImageData(iData, 0, b.height - h);

}, false);
b.src = 'bird.png';

}, false);

Cropped

window.addEventListener('load', function () {

//get canvas
var elem = document.getElementById('percent');

//if canvas doesn't exist or canvas methods not supported abort
if (!elem || !elem.getContext) {
	return;
}

//get 2D context
var context = elem.getContext('2d');

//if context doesn't exist or context methods not supported abort
if (!context || !context.drawImage) {
	return;
}

//load base image
var b = new Image();
b.addEventListener('load', function() {
	//draw base image
	context.drawImage(b, 0, 0, b.width, b.height);
}, false);
b.src = 'bird.png';

//load pink image
var f = new Image();
f.addEventListener('load', function() {

	//get number out of canvas and strip out non-numerals
	var p = elem.innerHTML;
	p = p.match( /\d+/g ).join('');
	var h = parseInt((p / 100) * f.height);

	//draw highlight image from point where percent starts
	context.drawImage( f, 0, f.height - h, f.width, h, 0, f.height - h, f.width, h );
}, false);
f.src = 'bird-pink.png';

}, false);

At last it seems like Facebook might be getting their acts together and the Graph API looks impressive and simple to use.

I’ve been working on a project where I had to get a users basic information within flash in a Tab and I decided to use the Graph API.

Authentication

The Graph API requires an OAuth Access token, but by default in a tab you are provided with a session key which is passed along with the rest of the Facebook variables as a flashVar. But fear not, Facebook provide a service to convert a session key into a OAuth Access Token, which in AS3 looks like this:

var variables : URLVariables = new URLVariables();
variables["type"] = "client_cred";
variables["client_id"] = __appID;
variables["client_secret"] = __secret;
variables["sessions"] = __sessionKey;

var urlRequest : URLRequest = new URLRequest(EXCHANGE_SESSIONS_URI);
urlRequest.method = URLRequestMethod.POST;
urlRequest.data = variables;

var urlLoader : URLLoader = new URLLoader();
urlLoader.load(urlRequest);

Once you’ve successfully got your OAuth Access Token you can start using the API.

Fetch data

var uri:String = REQUEST_URI + __id + (__connection.length > 0 ? "/" + __connection : "");

var variables : URLVariables = new URLVariables();
if(_accessToken) variables["access_token"] = _accessToken;

if(__filters)
{
	for (var i : String in __filters)
	{
		variables[i] = __filters[i];
	}
}

var urlRequest : URLRequest = new URLRequest(uri);
urlRequest.method = URLRequestMethod.GET;
urlRequest.data = variables;

var urlLoader : URLLoader = new URLLoader();
urlLoader.load(urlRequest);

Load picture

var uri:String = REQUEST_URI + __id + "/picture" + "?access_token=" + _accessToken +
(__size.length > 0 ? "&type=" + __size : "");

var loader:Loader = new Loader();
loader.load(new URLRequest(uri));

Search

var uri:String = REQUEST_URI + "/search";

var variables : URLVariables = new URLVariables();
if(_accessToken) variables["access_token"] = _accessToken;
variables["q"] = __q;
variables["type"] = __type;

var urlRequest : URLRequest = new URLRequest(uri);
urlRequest.method = URLRequestMethod.GET;
urlRequest.data = variables;

var urlLoader : URLLoader = new URLLoader();
urlLoader.load(urlRequest);

I’ve created a utility class to make using the Facebook Graph API easier.

View project on Google code

If we take the number 7 represented as 111 in binary and we move that value right and so removing the last 1 we get 11 which is binary for 3. Results are always floored because we are dealing in binary and so whole numbers.

Here are a few examples of it can be used:

Divide by 2 and floor

num >> 1

Multiply by 2 and floor

num << 1

Split up 24bit RGB Colour

var colour:uint = 0x336699;
var red:uint = color >> 16;
var green:uint = color >> 8 & 0xFF;
var blue:uint = color & 0xFF;