Getting Started with Flash and Facebook

Exclusive offer: get 0% off this eBook here

— Save 0%

$0.00    $0.00
by James Ford | August 2011 | Cookbooks Web Development

In this article by James Ford, author of Flash Facebook Cookbook, we'll be getting ready to start developing with Facebook—we'll download the Facebook ActionScript 3 SDK, integrate that SDK with our Flash Builder workspace, set up our application on Facebook.com, and generally get everything set up that we need to before we can start communicating with the Facebook APIs.

In this article, we will cover:

  • Setting up a new application on Facebook
  • Downloading the Facebook ActionScript 3 SDK
  • Including the Facebook ActionScript 3 SDK in a Flash Builder project
  • Including the Facebook ActionScript 3 SDK as a Flash Builder library project

Flash Player application's HTML template for Facebook integration will be covered in the next article.

 

Flash Facebook Cookbook

Flash Facebook Cookbook

Over 100 recipes for integrating the Flash Platform applications with the Graph API and Facebook.

        Read more about this book      

(For more resources on this subject, see here.)

Introduction

All third-party systems that work with data from Facebook do so through the Facebook API, which is a combination of REST-style techniques, OAuth 2.0, and an ever-evolving combination of web technologies, collectively titled by Facebook as the Graph API.

Facebook provides developers with a number of different code libraries through its developer portal, and of these the only one that's completely client-side is the JavaScript SDK. But anything that JavaScript can do can be done by both ActionScript 3 and the Flash Platform, more or less.

You might think, having looked at the SDKs officially listed by Facebook in their developer portal, that you'd need to build a code library yourself but luckily for us, there's already an existing, officially supported, ActionScript 3 library for working with the Graph API. This library, the Facebook ActionScript 3 SDK, is supported by both Adobe and Facebook, so you can be assured that it will be kept up-to-date and fully functional, even if there is a significant overhaul of the Facebook APIs—after all, who better to support this SDK than Adobe and Facebook themselves?

There's no sense in recreating the wheel, as they say, so the examples in this article will be using the existing Facebook ActionScript 3 SDK almost exclusively for its recipes. We'll also be using the Flex SDK 4.0 for our examples, as it's a quick and easy way to construct user interfaces and put together working prototypes for our recipes. However, using Flex isn't a requirement for the Facebook ActionScript 3 SDK to work—it's just for the examples in this article. Integrating the Facebook SDK with a normal ActionScript-only project or a Flash Professional-based project is entirely possible—it will just inevitably require a little more time creating the interface, but the ActionScript 3 code behind it all will work pretty much the same.

Setting up a new application on Facebook

To access the full range of data available from the Facebook API, you need an API key, and for that, you need to set up an application on Facebook itself. To do this you need to set up an account on Facebook, and use that account to join the Facebook developer program.

Every Facebook application, whether it's based on server-side languages (like PHP), or client-side technologies (like JavaScript or ActionScript), needs an API key to send and receive data through the Facebook API. Alongside the API key, the application also gets a unique Application ID that makes it possible for Facebook to keep track of what actions a user has allowed your application to perform with their data, and an Application Secret, which is used for authentication.

As well as giving you the ability to use more features of the API, setting up your Flash project as an application and promoting it through Facebook greatly improves the chance that users will discover your application organically through the social network. For example, status updates created by your application will all link back to the application's Fan Page.

In this section, we're going to go through the necessary steps to register a new application on Facebook, and what we actually need is the API Key, Application ID, and an Application Secret for Flash.

Getting ready

You can set up your application as soon as you're registered as a developer with Facebook. To register as a developer you first need a Facebook profile. You've probably already got one, but you'll probably want to create at least one other Facebook account for development or testing purposes. I'm sure your existing Facebook friends won't appreciate a wave of "test message" spam in the near future.

Once you've logged in with the Facebook account you want to use for development, go to URL: http://www.facebook.com/developers/ to add the Facebook Developer application to your profile.

Getting Started with Flash and Facebook

From the Facebook Developer center you can see the latest news from the Facebook developer blog, as well as useful links for developers (Documentation, Privacy Polices, Rules, and so on).

Click on the link + Set Up New App or go to the following website address: http://www.facebook.com/developers/createapp.php to start the application setup process.

How to do it...

If you just want to get up and run as fast as possible, the minimal amount of data that's needed to register a new application is its name.

Your application name does not need to be unique—even for yourself. It's acceptable to name two (or more!) of your applications exactly the same, as Facebook assigns every application its own unique Application ID. Good thing to, really—otherwise all the good names would likely be taken in a frantic bout of application name-squatting.

There's far more information you can add, such as application icons, description, contact e-mail addresses, and support URLs—all pretty simple stuff, and you can always return to the settings screen to change or update things later on.

Once you've entered your application name (and any other information you wish) save your changes and you'll get a screen containing the following information:

Getting Started with Flash and Facebook

Now that we've got ourselves an API Key, we can start using it in requests to the Facebook Graph API. We'll also need the Application ID, so make a note of that, but the Application Secret is something we don't actually need for any of the recipes covered in this article.

How it works...

All applications that integrate with Facebook aren't actually part of Facebook; they're an external application, and that's true for every third-party application that you might have seen appear within the Facebook interface (these are known as Canvas or Tab applications, depending on whether they're on their own page, or a Tab on another page). Technically, they are external websites that are loaded into the Facebook interface using an iframe element in HTML.

Without the API Key an application can't do anything other than retrieve the information that is publicly available. All other actions—such as requesting news feeds or publishing information to Facebook—require the end user to give your application the explicit permission to perform that action, with the API Key being what the Graph API relies upon when generating access tokens and authorizing requests.

Our application can request new permissions at any point, and similarly the end user can modify or reject our application permissions at any point, so generating an access token and passing it in all data requests is an easy way for Facebook to maintain the user's control over their data access.

There's more...

To get a broader overview of the settings that can be changed for a Facebook application, the best place to look is the Developer Documentation, which is available online on the Facebook Developer center: http://developers.facebook.com/docs/.

There's no single page which gives a description of the settings, but rather the information is distributed around the pages where it's actually relevant.

When we set up an application on Facebook, it also sets up a Profile Page specifically for that application—similar to a Facebook page (but not exactly the same)—and devoted to our new application.

Downloading the Facebook ActionScript 3 SDK

There are two ways to get the source code for the Facebook ActionScript SDK—one is simply download a precompiled version of the source code, and for that all you need is an Internet connection.

The other way to obtain the source code is to download the very latest version directly from a source control repository.

There are in fact two main versions of the Facebook ActionScript 3 SDK. One is the 'Official' version of the SDK, hosted in a Subversion repository on Google code, maintained and updated by teams associated with Adobe and Facebook; and the other is more of a community-driven effort, stored in a Git repository and hosted on GitHub.

In this recipe and all of the recipes in this article, we will be working with a branch of the community-driven version of the Facebook ActionScript 3 SDK, rather than the 'Official' version of the SDK.

Getting ready

To download the SDK from Git, we need to have Git installed on your computer, which can be downloaded and installed from the URL: http://git-scm.com/.

How to do it...

  1. If you have no desire to work with code which includes version-control information, both the precompiled SWC files and the raw ActionScript source code for the Facebook ActionScript 3 SDK can be downloaded from the following URLs:
  2. Within the pages at these URLs, select the Downloads button that appears in the top-left of the page, and you'll get popup containing the download options:

  3. To download the raw ActionScript files, select the Download .zip option—listed under the DOWNLOAD SOURCE heading—or to download the precompiled SWC file, select the Facebook Web SDK.swc (or the Facebook Desktop SDK.swc) file—listed under the DOWNLOAD PACKAGES heading.
  4. Alternatively, if you have Git installed, you can clone the entire repository, including its past history and references to its original source location, with the following command-line statement:

    git clone git@github.com:psyked/facebook-actionscript-api.git

    or

    git clone git@github.com:psyked/facebook-air-api.git

This command will create a new folder with the name 'facebook-actionscript-api' and within that, create three key folders—docs, examples, and src. Unsurprisingly, these folders contain the source code for the library, the documentation for the library, and several sample applications, respectively.

How it works...

The download locations for this recipe, and the source code for the Facebook SDKs which form the backbone of the recipes in this cookbook, point to Git repositories which are hosted by GitHub.

The source code for this repository is itself originally based on the official version of the SDK which is hosted on Google code, but it has been extended and expanded by other developers, (primarily Mark Walters, of http://yourpalmark.com/). The advantage of using our community-driven version of the SDK over the official one is that the source code is traditionally updated much more frequently, and includes a wide array of value-object classes, which the official version of the SDK does not yet include.

There's more...

Not sure which version of the SDK is best for your project?

The Flash Player version, or the AIR version of the SDK?

In addition to the different download options, there are also two different versions of the Facebook ActionScript 3 SDK, and the one which we will use depends on whether we're building desktop applications that run in Adobe AIR, or browser-based applications that use the Flash Player.

Both versions of the SDK are available for download from GitHub, but you can only use the Adobe AIR libraries with an Adobe AIR project, and the web-based libraries will only work properly with a web-based Flash Builder project that has the Facebook JavaScript SDK included in the HTML template, which is what we'll look at in the next article, Preparing your Flash Player application's HTML template for Facebook integration.

What if I want to build my own Facebook library?

There's nothing 'magical' about this Facebook ActionScript API—everything it can do is built on standard capabilities of ActionScript 3 and the Flash Player. If you wanted to, it's entirely possible to write your own code that works with Facebook without using this library, but why, as mentioned in the introduction, should you re-invent the wheel?

That doesn't mean that the official API isn't subject to an occasional change—the move by Facebook to the 'Open Graph' in 2010 is evidence of that—but it does mean that there's always going to be someone maintaining the project and making sure it works with the latest version of the Facebook API.

        Read more about this book      

(For more resources on this subject, see here.)

Including the Facebook ActionScript 3 SDK in a Flash Builder project

Your situation, experience, personal preferences and the complexity of your final project dictate exactly how you'll integrate the Facebook ActionScript 3 SDK into your project. In this recipe we're going to use the precompiled SWC files that we've downloaded in our earlier recipe, Downloading the Facebook ActionScript 3 SDK, and integrate them with a new Flash Builder project.

How to do it...

Within your project structure you will, by default, have a libs folder. Copy your downloaded SWC file into that folder, and at a basic level, that's all there is to it.

The classes from the Facebook ActionScript 3 SDK will now be available to your project—you should get auto-complete code suggestions as you type, and more importantly, be able to compile your code!

How it works...

An SWC file is a compiled set of source files—which could be ActionScript source code or symbols and images—and is a useful way of making your source code available for others to use, while still protecting the actual original code. Anyone with the SWC can get access to the classes it contains and all their properties and methods, but can't actually see the code behind those methods. Of course, protecting the code isn't a huge concern for the Facebook ActionScript 3 SDK, as we can get all of the source code from other sources anyway.

The great thing about using a SWC file is that it minimizes the clutter of source files in your project—you don't need to include anything more than the SWC, whereas if you wanted to use the actual source files, you'd need to add 20-odd additional ActionScript files. That might not sound bad, but when you start using the source-code versions of multiple ActionScript libraries, you can easily end up with 10, 20, 50, or more ActionScript files that aren't actually written by you for this project.

Another little plus with SWC files are that they're precompiled, which theoretically means lower compile times for your project. I don't think it actually makes much of a difference for this SDK, but every little bit helps I guess!

There's more...

What about the downsides of SWC files? Well, the main downside of a SWC file is also partially the reason it exists—that you can't see the actual source code. If you want to browse through the source code, but still get the advantages of using a SWC file in your project, follow the next recipe Including the Facebook ActionScript 3 SDK as a Flash Builder library project.

If you're using a SWC exclusively then you'll be flying blind if you should trigger errors on the classes you don't have the source code for, and will be presented with a dialog similar to this:

Getting Started with Flash and Facebook

Informative, but really not helpful when you're trying to find out where your code is breaking down. Luckily there's a solution for that, and it is by linking source files to an included SWC.

Of course, when it comes to Runtime Errors, it's more likely that the error is in your code, rather than the Facebook ActionScript 3 SDK. Linking to the source is more about helping you find and debug your own errors, rather than searching for errors in the SWC.

Linking source files to an included SWC

Before we start out, it's important to note that linking source files to an included SWC file doesn't actually have any effect on the SWC itself. Instead, what we're doing is giving Flash Builder the location of the SWC's source files.

When Flash Builder tries to open your project in debug mode it will use this information, but it won't magically enable Flash Builder to recreate the SWC file for you—for that you need to set up the code as a Flash Builder library project (which is, coincidentally, the subject of the next recipe).

Once you've downloaded the Facebook ActionScript 3 SDK source files, place them in a sensible location somewhere on your computer—it doesn't matter where exactly, only that you remember the location.

Open your project preferences screen, and switch to the tab Flex Build Path and within that, Library path:

In the preceding screenshot, you can see the GraphAPI_Web_1_0.swc file, and underneath that you can see there is a Source attachment option—double-click on that to open a new window, labeled Edit Folder Path:

Getting Started with Flash and Facebook

From this dialog you can select the location of the source files for the SWC. There won't be any visual confirmation whether the location you've selected is correct or not, but when you start coding or debugging, you should be able to explore the source code of the classes in the SWC, and see far less of the Code Navigation Error dialog.

Including the Facebook ActionScript 3 SDK as a Flash Builder library project

An alternative to including the Facebook AS3 SDK in its precompiled SWC form is to set up the SDK as a Flash Builder library project.

The end result, as far as the compiler and the user are concerned, is no different, but our own way of developing, reusing, and exploring the code is a little simpler. And unlike the precompiled SWC files that can be downloaded from the GitHub repositories, by using a Flash Builder library project, we can make modifications to the source code.

Using a Flash Builder library project makes it easy to reuse the code in the library in multiple other projects, and for the remaining recipes in this article we're going to be linking to the library projects that we set up in this recipe.

There are two versions of the Facebook ActionScript 3 SDK, and just as there are two versions of the precompiled SWC to download, we will also need to create two Flash Builder library projects. In this recipe we're going to cover setting both of these library projects up and linking to these library projects from other projects.

How to do it...

  1. Create a new library project in Flash Builder, using the basic Flex SDK only (don't include the Adobe AIR libraries), and call it Facebook Web SDK.

    Getting Started with Flash and Facebook

  2. Copy the files and folders from the downloaded facebook-actionscript-api folder to the root folder of our project, setting up the following folder structure:

    Getting Started with Flash and Facebook

    That will create a library project which we can use in basic Flash Player-based web projects. Next, we'll create a project that gives us the Adobe AIR version of the SDK.

  3. Keep the Facebook SDK Web project open, and create a new Flash Builder library project; call it the 'Facebook Desktop SDK', only this time, be sure to include the Adobe AIR libraries in your project.

    Getting Started with Flash and Facebook

  4. As with the web version of the SDK, copy the files you've downloaded from the facebook-air-api folder into our new library project, creating the following folder structure:

    Getting Started with Flash and Facebook

    Not much to see in terms of source code, is there? Unlike the web version of the SDK, the desktop version isn't completely standalone; it relies on core classes from the web project—so what we need to do now is add the web project to the desktop project as a linked library.

  5. Open your project preferences, go to the Flex Library Build Path and then the Library path' tab, then click Add Project... and select the Facebook Web SDK project.

    Getting Started with Flash and Facebook

Once the web project is added as a library for the desktop library project, both of those projects should be able to compile, and that's it for this recipe.

How it works...

The complexity in this setup is just realizing that the Desktop version of the SDK is not a standalone library, and does, in fact, require all of the code from the web version. The source code files aren't duplicated for both versions because that would make things more complex to manage, and rather than merging the two sets into a single library project, we have to set things up in a way that keeps all of the AIR-specific source code in its own project.

Both versions of the Facebook ActionScript 3 SDK—Web and Desktop—rely on a core set of classes. The source code for the web version of the library contains all of these classes, whereas the desktop version of the library contains only the classes that require the AIR libraries, which is why it needs to be set up like this—to inherit those core files from the web project.

There's more...

The original release version of the Graph API—version 1.0—included an additional JavaScript file—the FBJSBridge.js file. Since version 1.5 of the SDK there's no need for this additional JavaScript file—the Facebook ActionScript 3 SDK works to inject the original contents of that file into the containing HTML page, removing the necessity for those additional files, leaving only the ActionScript SDK as a requirement.

Summary

Before our web-based application will be able to work with the Facebook Graph API, it will need the Facebook JavaScript SDK to be included in the host HTML page, and it will have to be hosted on a domain or subdomain specified in our Facebook Application settings.

This will be covered in the next article on Preparing your Flash Player application's HTML template for Facebook integration.


Further resources on this subject:


Unpublished

n/a
Published: January 1970
eBook Price: $0.00
Book Price: $0.00
See more
Select your format and quantity:

About the Author :


James Ford

James Ford lives and works in the relatively sedate Midlands of England, and is constantly thankful that he doesn’t have to contend with public transport or large volumes of traffic on a regular basis. Occasionally being stuck behind a tractor for several miles is a small price to pay for that!

Macromedia Flash 8 represented his first serious interaction with a programming language, an epiphany whereupon his BA in Design for Interactive Media became far more focused on the Programming side of things than the Art (although it turned out okay).

He considers himself to be fortunate to have encountered the Flash Platform when he did, as during that time between first contact and today, the Flash Platform has evolved at just the right pace to enable him to keep up with the latest shiny new features.

In addition to developing Facebook-integrated Flash Player applications, James has also developed a few AIR applications, built a couple of Apps for iOS and Android devices, helped develop a load of websites, and blogs about all of this on his website: http://www.psyked.co.uk/.

Books From Packt


Facebook Graph API Development with Flash
Facebook Graph API Development with Flash

Facebook Application Development with Graph API Cookbook
Facebook Application Development with Graph API Cookbook

Flash Development for Android Cookbook
Flash Development for Android Cookbook

Flash iOS Apps Cookbook: RAW
Flash iOS Apps Cookbook: RAW

Flash Game Development by Example
Flash Game Development by Example

Flash 10 Multiplayer Game Essentials
Flash 10 Multiplayer Game Essentials

Flash Multiplayer Virtual Worlds
Flash Multiplayer Virtual Worlds

Learning Facebook Application Development
Learning Facebook Application Development


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software