Getting Started Building Flash Facebook Apps for Social Learning

hihatcloverSoftware and s/w Development

Jul 4, 2012 (5 years and 3 months ago)

294 views

Getting Started Building Flash Facebook Apps for Social Learning
By Dan Carr (dan@dancarrdesign.com
)



Overview

Earlier this year Adobe and Facebook announced the release of ActionScript 3.0 Facebook APIs
and Flash integration standards for the Facebook platform. Recently I've been exploring the APIs
and the possibilities of using rich media to provide engaging experiences for communicating,
teaching, and learning in the social networking environment.

This session covers the basic concepts involved and shows you how to get started in your own
experimentation. Along the way you’ll tour the Facebook developer’s application, the ActionScript
3.0 extension for the Facebook API, and the process for building a Facebook application in Flash.

Topics

Session topics include discussions and demonstrations with a focus on the mechanics of setting
up a “hello world” application. The session will also provide an open forum for the discussion of e-
learning in social networking environments.


1. Social Learning
2. Getting started as a Facebook app developer
3. Using the ActionScript 3.0 Facebook API
4. Developing a Flash application or widget
5. Publishing the Flash application on Facebook

Getting started

There are a number of options available when approaching the task of building a Facebook
application. Using a Flash movie is one option, but you can also use Facebook’s own markup
language (FBML) or HTML and JavaScript to build custom apps. Any route you take will start at
the same point; the Facebook Developer App.

The Facebook Developer App allows you to create, register, and stage applications on the
Facebook platform. When you create a new application, Facebook will assign an API key and
application secret code. Both of these items are necessary to communicate to the Facebook API
from your application.

To install the Facebook Developer App:

1. Create a Facebook account or log into the account you want to add the developer
application to.
2. Go to the following URL and take a moment to review the page.

http://developers.facebook.com/get_started.php


3. Click on the “Go to the Facebook Developer App” link and login when prompted.
4. Once you’ve added the application you will end up at the Developer page.

http://www.facebook.com/developers/


To create a new Facebook application:

1. Navigate to the Developer page on Facebook and click on the Set Up New Application
button in the upper right of the screen.
2. Enter a name for the application and agree to the Facebook terms to proceed. This step
leads you to the Edit page for your application.
3. On the edit form, copy the ID, API key, and Secret values to a text file for reference
during development.
4. Click on the Canvas button and select your anticipated render method and canvas
settings (see the publishing options section at the end of the handout).
5. Click Save Changes.

Just those few steps are enough to get you up and running. You can return to this form by
viewing the application in you’re My Applications area on the Facebook Developer page. Note
that at this point you have created a Facebook application accessible to you, but not yet
submitted to the Facebook application direction.

Your next steps are to start working with one of the Facebook API client libraries in order to build
your application’s user interface.

Using the ActionScript 3.0 Facebook API

The Facebook API ActionScript 3.0 client libraries were developed by Jason Crist and then
supported by an official collaboration between Adobe and Facebook. The client libraries include
the API wrapper along with a range of utilities to help perform common tasks. The ActionScript
package can be used in SWC format or source code format (I’ve found having access to the
source code is helpful in figuring some things out.)

To download and install the ActionScript 3.0 extension:

1. Visit the following URL and click on the Featured downloads links. Download the latest
source.zip file.

http://code.google.com/p/facebook-actionscript-api/


2. Unzip the downloaded file and open the sub folders until you reach the ‘com’ folder. Move
the com folder to a location next the FLA file.
3. If you would rather place the com folder in a different location, adjust the Source
properties in the FLA file’s Publish Settings to adjust the class path.
4. That’s it. Your FLA file now has access to the Facebook ActionScript APIs.

Note that this approach uses the ActionScript source code in an accessible format so that the
code can be studied during development. In this scenario each SWF that imports the ActionScript
classes will be incurring the file size of those classes. An alternative would be to use the Flash
CS4 FLA file’s Publish Setting properties to link to the external SWC’s library.

The ActionScript API extension is a collection of ActionScript files organized into folders. You can
use a text editor or Flash to check out the source files while you work. You can also lookup the
Facebook ActionScript API at the following URL.

http://facebook-actionscript-api.googlecode.com/svn/release/current/docs/index.html


The general development workflow will include logging into Facebook and the making “calls” to
the API to request information or update information on the server.

Applied Samples

The Facebook ActionScript API offers utilities for use with Flash Professional projects,
ActionScript projects, and Flex Projects. After you’ve installed the API source files or SWC, your
next logical step is to check out the supplied sample files. While many of the samples are in Flex
format the ActionScript sections are still worth review as they are mostly the same.

To view a Flash login routine sample:

1. Visit the following URL and download the examples.zip file.

http://code.google.com/p/facebook-actionscript-api/


2. Unzip the downloaded file and open the AIRConnectDemo folder. Open the Flash folder
and then open each of the files in Flash. Notice that the file is setup to export to AIR
format which in turn creates a file that’s easy to test in a local environment. The
ActionScript document class initializes the Facebook API, responds to the flow of data in
standard ActionScript 3.0 event structure, and submits requests to the API as buttons are
clicked.
3. To take the tour a step further, you can assign your Facebook application’s API key to the
variable at the top of the ConnectDemo.as file to run the sample.

To view a Flex login routine sample:

1. Open the AIRConnectDemo /Flex/src folder and open the FacebookConnect.mxml file
in a text editor. MXML is an XML-based language used to layout items in Flex.

For a simple overview of how to connect to Facebook, check out Daniel Dura’s video:

http://www.adobe.com/devnet/facebook/articles/video_facebook_quick_start.html


For more samples, visit the Adobe Developer Site:

http://www.adobe.com/devnet/facebook/samples/index.html


Publishing Options

The Facebook development platform offers a range of options which developers can use to
integrate Flash with the Facebook API. Those options include building a desktop application in
AIR which consumes the Facebook API, building a Flash application run externally from
Facebook, or a Flash application embedded in Facebook MXML.

For an overview of integration options, take a look at the following URLs:

Adobe Facebook Developer Center

http://www.adobe.com/devnet/facebook/


Understanding the architecture of applications built on the Facebook and Flash Platforms

http://www.adobe.com/devnet/facebook/articles/facebook_architecture_overview.html


For more information, check out this Facebook development series on the Inside RIA website.

http://www.insideria.com/series-facebook-dev.html