Media Art, User Experience Design, and Interface Development

Communication between AS3 and Facebook

Posted on 2010-08-10

Communication between AS3 and Facebook

For a recent project, we needed to have AS3 communicate with Facebook and the other way around. Facebook have created a whole framework around their application, which I believe makes some sense for security purposes, but is unfortunately not documented in an orderly manner.

I do not pretend that I am the first one to write a post about how to communicate between AS3 and Facebook Javascript (or FBJS), but all those tutorials I found expected you to know some thing or another about programming for Facebook, never taking it from the start. So, here goes, communication between AS3 and Facebook for dummies. Or beginners, if you feel offended by the dummy title. Or if it infringes on patents and stuff.

Of knowledge and tools

In this tutorial, I do assume that you have some knowledge of the tools I will present, namely AS3, HTML, JS, CSS and PHP. You, however, do not need to be a master of all (I sure am not).

As presented before, I work in Eclipse, meaning that with the Flash Builder 4 plugin, the Web Tools Platform and the PHPElipse plugin, I only need one environment. You will also need to make sure that your server runs PHP. Locally, you can use MAMP to run a PHP server (thanks to Antti Kupila for the tip on that one).

Facebook’s framework

Before we go on writing any code, maybe it is good to know a bit how Facebook works. In order to run JS, Facebook have their own subset or framework which they dubbed FBJS.

To embed an SWF, you need to create an fb:swf tag. Also, the Flash component does not start automatically, there needs to be a user interaction to trigger the embed of the SWF. It might be be of interest to mention that Facebook supports certain versions of Flash, namely 9 and 10. The exact version numbers can be found in the notes of the fb:swf tag.

The index file

Using PHP is totally optional in this case. Facebook does have a habit of caching files on their servers, therefore instead of having to hardcode all URLs, it is quite practical to use PHP variables. For images and CSS, I sometimes add the time() PHP function so I make sure that the file used is always the latest, like so:

PHP:

$img_src = "http://www.example.com/images/image.jpg?" . time();

The time() function is useful during development, but it is best not to use it once you deploy live.

We also need an id for the image element.

PHP:

$img_id = "click_to_activate_id";

Now, let’s look at the JavaScript:

JavaScript:

function embedSWF()
{
	// remove image
	var image = document.getElementById("click_to_activate_id");
	document.getElementById("swfWrapper").removeChild(image);

	// create swf object
	var swf = document.createElement("fb:swf");
	swf.setSWFSrc("communication_with_fb.swf");
	swf.setId("communication_with_fb_id");
	swf.setWidth("520");
	swf.setHeight("600");
	document.getElementById("swfWrapper").appendChild(swf);
}}

In this block, I create a JS function that removes an image and generates an fb:swf tag in its stead.

PHP:

<div id="wrapper"> <div id="swfWrapper"> <img src="<?php echo $img_src ?>" width="520" height="600" id="<php echo $img_id ?>" class="hasPointer" onclick="embedSWF()" /> </div> </div>

This block represents the image that the user will see first. Once the user clicks on the image, the JS function mentioned above is called and the SWF gets embedded.

It is important that the fb:fbjs-bridge tag is place before the wrapper that contains/will contain the SWF, otherwise it will not work.

CSS:

#wrapper
{
	width:520px;
	background-color:#ffffff;
}

#swfWrapper
{
	width:520px;
	height:600px;
	margin-bottom:16px;
}

#buttonsWrapper
{
	width:520px;
	margin:0 auto;
}

.button
{
	cursor:pointer;
	background-image:url(../images/button.jpg);
	width:96px;
	height:16px;
	margin:0 auto;
	padding:4px 0;
	font-family:Helvetica, Arial, sans-serif;
	font-size:16px;
	text-align:center;
	color:#000;
}

.hasPointer
{
	cursor:pointer;
}

This last block is just some CSS to hold the visuals together.

Of ActionScript and FBML interaction

Usually, when it is necessary to have AS3 interact with JS, one can simply use the ExternalInterface class. Most probably for security reasons, Facebook makes our lives a bit more complicated when we need such an interaction once in their framework. As I said before, we have to use their FBJS Bridge. Let’s see how.

As the SWF is embedded into Facebook, it receives a multitude of variables, which are listed in the older version of FB’s doc. There are two that are of interest to us here: “fb_local_connection” and “fb_fbjs_connection“. These are the variable names needed to respectively create an outgoing connection and an incoming connection.

ActionScript 3.0:

var _outgoingConnection:LocalConnection = new LocalConnection();
var _outgoingConnectionName:String = loaderInfo.parameters.fb_local_connection;
var _incomingConnection:LocalConnection = new LocalConnection();
var _incomingConnectionName:String = loaderInfo.parameters.fb_fbjs_connection;

In the case of the outgoing connection, we use the name when calling a JS function, like so:

ActionScript 3.0:

_outgoingConnection.send(_outgoingConnectionName, "callFBJS", "fbjsFunctionForAS3", ["Message from AS3", "Hello Facebook!"]);

Note that in this function, the second arguments must always be “callFBJS”, as Facebook uses a LocalConnection in an SWF of their own to communicate with JS in their framework.

The third argument is the name of the JS function you need to be called from Flash, and the last is an array of the arguments needed.

JavaScript:

function fbjsFunctionForAS3(title, message)
{
	new Dialog().showMessage(title, message);
}

Another idiosyncrasy of Facebook is that the usual alert() JS function is not available. It may be frustrating at first, but their framework provide a solution that uses their own UI, which can be more interesting. As seen above, you can simply create a new Dialog() and right away call the showMessage() function, a blue Facebook window will pop over your text content. HTML is unfortunately not permitted there.

Now, you may also want to call AS3 functions from JS. Let’s take a look at how this would work.

ActionScript 3.0:

_incomingConnection.client = this;
_incomingConnection.connect(_incomingConnectionName);

The first thing to do is to set a client to the connection, meaning what is the scope of the functions that the FBJS Bridge will call. I like to keep it at the same level as the class. Then, connect the connection.

You simply need to make a function available to be called.

ActionScript 3.0:

public function as3FunctionForFBJS(title:String, message:String):void
{
	trace(title, message);
}

And let’s see how to call it from the Javascript side:

JavaScript:

function fbjsFunctionForAS3(title, message)
{
	var swf document.getElementById("click_to_activate_id");
	swf.callSWF("as3FunctionForFBJS", "Message from Facebook", "Hello AS3!");
}

Obviously at this point you need UI elements to trigger these functions, but I leave that for you to figure out and create.

Setting up the Facebook application

First, you should head to Adobe’s website where some tutorials present you with the basics of what you need to know (link 1, link 2, link 3).

Once you created your app and all, make sure that your “Render Method” is set to “FBML” in the app settings:


There you go! You are now ready to have your Facebook projects communicate with AS3 and vice versa.

Resources

You may get the sources for this tutorial here.

You may test what I have presented in this tutorial: http://apps.facebook.com/flash-to-fb/.


8 responses to “Communication between AS3 and Facebook”

  1. claude says:

    thanks a ton!
    i managed to call js functions “quite” quickly, but then i struggled getting the values back.
    i was googling, compiling, uploading, googling, compiling, uploading and getting security sandbox violations for hours now…
    then i discovered incomingConnectionName here 😉
    thanks again – the facebook docs are a shame!

  2. Keith says:

    Can you use this same code in a facebook page tab? I can’t seem to get any example to work there 🙁

  3. Keith says:

    Hey I actually got this to work in a page tab! Thanks so much!

  4. […] I look at the metrics of my blog, it seems that loading a SWC at runtime (along with the post about Facebook and AS3) is the most popular subject, so I though it would be better if I was more thorough and explain […]

  5. Anders says:

    Great sharing! You’re the wizz that made my Christmas!

  6. Elie says:

    I’m not a flash expert but I needed to provide a proof of concept for a flash movie in an app tab.
    I had an issue that took me a while to figure out…
    You need to add
    _incomingConnection.allowDomain(“*”);
    to allow FBJS to call whatever functions you exposed in your AS class otherwise the call just doesn’t happen (cross site security issues I suppose)

    With that said though, great article and thank you so much for it!

  7. admin says:

    I have to say I did not face this situation, thanks for bringing it up, maybe others reading this post will benefit from your insight.

  8. Martin Mb says:

    i love you mannnnn very niceee post , you saved my job

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.