Facebook API: Going Full Screen with Adobe Flex

I've recently been checking out the Facebook API and doing some experiments with the Facebook ActionScript API. It's relatively straightforward to use, but as I've found with other Adobe products, is a little lacking in documentation. Using full screen mode is one of those things. If you do a Google search for it, a lot of results talk about how it isn't possible, but I've sorted it out, and here's what I did to get it working.

First off, you'll notice on the Adobe documentation that full screen mode is supported only if you're using Iframe content and not FBML. This is the only place I found where it is indicated that it IS in fact supported. I couldn't find any example code on the subject.

Secondly, I went through the Adobe tutorials for Creating a Facebook app and then Deploying your Facebook app. Jeanette's coding style makes me crazy, but the examples are easy to work through.

After the tutorials, you're 95% of the way there. We have to make two changes, the first is to add support to your Flex app to switch to full screen mode, and the second is to change your canvas page to enable full screen mode.

Changes to your Flex App

You'll need to add the ability to switch into full screen mode. This is very simple, and is documented pretty well here. What I did was add a button with a handler that set the stage display state:

ActionScript code

private function toggleFullScreen():void

{

try

{

switch (this.stage.displayState)

{

case StageDisplayState.FULL_SCREEN:

this.stage.displayState = StageDisplayState.NORMAL;

break;

default:

this.stage.displayState = StageDisplayState.FULL_SCREEN;

break;

}

}

catch (err:SecurityError)

{

// ignore

}

}

mxml code

<mx:LinkButton x="534" y="4" label="FullScreen" click="toggleFullScreen()"/>

Changes to index.htm

This was the part I found a little tricky. My HTML/JavaScript skills are a little lacking, so I had to do a bit of reading to sort this out.

The index.htm you end up with at the end of the Adobe tutorial allows you to debug your app AND deploy it to Facebook using the same html. This is useful compared to the default html Flex Builder generates, which always opens a second web page to allow the user to log in. This is all good, except the index.htm you end up with uses swfobject.embedSWF instead of the Adobe generated <object> and <embed> and tags people are probably used to. Enabling full screen mode in the Adobe default html template is documented here.

To enable it using swfobject.embedSWF, you have to pass it as an argument to the javascript function. It seems obvious at first, the you'd just set flashVars.enableFullScreen to "true" and be done, but that doesn't work. The enableFullScreen flag is set in the params argument, not the flashvars argument. So what you started with:

swfobject.embedSWF("helloUser.swf", "flashContent", "100%", "100%", "9.0.0", "expressInstall.swf", flashVars);

Ends up being:

var params = {};

params.allowfullscreen = "true";

swfobject.embedSWF("helloUser.swf", "flashContent", "100%", "100%", "9.0.0", "expressInstall.swf", flashVars, params, false);

That's the key really. I fought with the parameters a bit before figuring out that I was setting enableFullScreen in the wrong place. I makes sense after looking through the swfobject documentation and comparing it to the index.template.html, but it's not obvious to folk like me who sometimes struggle a bit with HTML and JavaScript.

Now when you run your app in debug mode or on Facebook, it should switch into full screen mode when you toggle it, rather than doing nothing (as I was having it to for quite a while).