The technologies for building applications on the Flash and Facebook Platforms

Combine the Flash Platform and the Facebook Platform and you get killer applications incorporating social capabilities in highly interactive, expressive, and responsive applications. But what exactly does this mean, how do you do that, and what technologies are involved?

The goal of this article is for developers to understand the technologies behind building Flash Platform and Facebook applications. Depending upon your background as a PHP, Facebook, Flex, Flash, AIR, or other developer, you may be familiar with some but not all of these technologies.

Note: Be sure to also read the companion article, The architecture of applications built on the Flash and Facebook Platforms.

Adobe Flash Platform

The Adobe Flash Platform is the leading web design and development platform for creating expressive applications, content, and video that run consistently across operating systems and devices and reach over 98% of Internet-connected desktop users. The Flash Platform consists of an integrated set of technologies—including client runtimes, tools, frameworks, servers, and services—that provide everything you need to deliver applications, content, and high-definition video to the widest possible audience. Many of its individual components will be discussed in this article.

Adobe Flash Player

The user experience when interacting with traditional web content created with HTML and JavaScript has changed dramatically over the years, progressing from simple links and multiple, discrete pages to single page "applications" with asynchronous data calls and interactive controls. The experience, however, is still limited by the objects that are available in the browser object model. This is where Flash Player comes in.

Adobe Flash Player is a browser plugin or Active X control that has a much richer object model and rendering engine that allows developers to include more highly expressive and interactive content in web applications. To include this richer content, you create you a SWF file (a compiled bytecode file which is what Flash Player can render) using some developer tool and then reference this SWF file in your HTML page. When the HTML page is parsed by the browser, the SWF file is downloaded and run by Flash Player in the browser window.

Adobe Flash Professional

Adobe creates many tools for creating SWF files including Flash Professional, Flash Builder, Flash Catalyst, and more. Each tool caters to different developer and designer skill sets. Adobe Flash Professional, the original tool for creating SWF content, is a timeline-based tool targeted at designers or more visual developers. With this IDE, you use drawing tools, pre-built components, and ActionScript to create SWF files. ActionScript is the scripting language for Flash Player and is an inheritance based object-oriented scripting language based on the ECMAScript standard.

Adobe Flash Builder

Adobe Flash Builder (formerly Flex Builder) is an Eclipse-based development tool targeted at developers. With this IDE, you use the Flex framework to create SWF files. Flash Builder accelerates Flex application development by providing intelligent code hinting and generation, refactoring, compile-time error checking, interactive step-through debugging, and visual design for laying out and styling user interfaces.

Framework and languages

Adobe Flex

Adobe Flex is a free, open source framework comprised of a library of ActionScript classes and executables to help you more quickly and easily develop, compile, and interactively debug applications. The Flex framework includes classes for over 100 extensible components, including UI controls (buttons, list boxes, sliders, steppers, data grids, charts, and more), containers (VGroup, HGroup, Panel, Form and more to help you build adaptive application interfaces), managers (for styles, drag and drop, focus, popups, cursors, browser history and deep links, and more), remote procedure calls (HTTP requests, web service calls, and Flash Remoting requests), formatters, validators, and utilities.

ActionScript and MXML

You create Flex applications (SWF files built with Flex) using two languages: ActionScript and MXML. ActionScript is an inheritance-based object-oriented scripting language based on the ECMAScript standard. MXML is a convenience language; it provides an alternate way to generate ActionScript using a declarative tag-based XML syntax. When you compile an application, the MXML is parsed and converted to ActionScript in memory and then the ActionScript is compiled into bytecode, your SWF file. Although you never have to use MXML, it is typically used to define application interfaces (for layouts, the MXML code is usually more succinct and understandable than the corresponding ActionScript would be) and ActionScript is used to write the application logic.

Adobe AIR

The applications built with Flash or Flex run in the browser with Flash Player and have all the benefits of browser-based applications, including anywhere access, easy deployment (no installation necessary), simple updating, and consistency across all operating systems and browsers. They also have all the limitations of browser-based applications, including no offline access and the confines of the browser's security sandbox which keeps them from interacting with the user's computer outside the browser window.

In order to get the best of both worlds, Adobe introduced Adobe AIR, a cross-operating system runtime and set of tools that enable developers to deploy HTML, Ajax, and Flash Platform applications (SWF files) to the desktop and mobile devices. An emerging design pattern for applications is to deliver a browser-based version for all users, a desktop version for more active or power users, and a mobile version for devices. You can use tools such as Flash Builder and Flash Professional to create SWF files for both web, desktop, and mobile applications. If you create multiple types of applications, you can also share code from separate code libraries.

Using Flash Builder, you create a desktop or mobile project and compile the application as you do for web applications, but now you get a SWF file and an XML file (called the application descriptor file), which includes information about what the container operating system window should look like (for desktop applications), what icon should be used for the application on the client computer or device, and more. During development, when you test an application, Flash Builder launches a tool called the AIR Debug Launcher (ADL), which allows you to run the application without installation. When you are ready to deploy, Flash Builder uses a tool called the ADT (AIR Development Tool) to create a release build consisting of an AIR package file, which includes the SWF file, the application descriptor file, assets, and more. The AIR file is the one you must distribute to your users. When you export, you must also associate a digital certificate from a trusted agency to sign the application since it will install on the user's computer with full permissions and have capabilities for interacting with their operating system. (Of course, you should only ever install trusted applications to minimize the chance they may contain any harmful code.)

Using Flash Professional, you can either create a new Adobe AIR file or convert an existing Flash file to an AIR file by selecting Adobe AIR in the Publish Settings. For AIR files, you add content and test your movie as normal, except now you can use extra classes specific to desktop applications. You set the information to be included in the application descriptor file and publish the AIR package using a dialog window (File > Adobe AIR Settings).

Adobe AIR runtime

In order to install an AIR application, users must have the Adobe AIR runtime installed which is the cross-operating system runtime used to install, manage, and run AIR applications. To provide a  seamless install experience for users, you can create native installers (DMG, EXE, DEB, or RPM files) or a badge installer (implemented as a button on a web page). Both will check to verify whether the correct version of the AIR runtime is installed and if necessary, download and install it before the AIR application is installed (for native installers) or downloaded and installed (for a badge installer).

The Facebook Platform

Facebook is the leading social networking website and its Facebook Platform provides a framework for third-party developers to create applications for accessing and contributing Facebook data. The core components include a GRAPH API, SDKs for various platforms (including JavaScript, PHP, Python, iOS, Android, and ActionScript), and social plugins for easily incorporating Facebook functionality into web pages. You use the Facebook GRAPH API wrapped by the Adobe ActionScript 3 SDK for Facebook Platform to make calls to get and set Facebook data from Flash Platform applications. You can build four main types of Flash Platform Facebook applications, web applications embedded on the Facebook website (that appear with the Facebook chrome), external website applications, desktop, and mobile applications applications. For web applications, you provide a seamless user login experience by using the Facebook JavaScript SDK in conjunction with the Adobe ActionScript 3 SDK for Facebook Platform. Using these SDKS, login and permission dialog boxes are  displayed in small, popup windows. (Previously, this login technique was referred to as Facebook Connect.)

Note: Read the article The architecture of applications built on the Flash and Facebook Platforms for more information about the different types of applications you can build.

Adobe ActionScript 3 SDK for Facebook Platform

The Adobe ActionScript 3 SDK for Facebook Platform API is a set of ActionScript classes that provide a wrapper for making calls to Facebook from Flash Platform applications using the Facebook GRAPH API. The library is fully supported by Adobe and Facebook and greatly speeds the development of Flash Platform Facebook applications. To build applications using this library, you need to download the library from its Google code repository and then add the SWC (containing compiled ActionScript code) to your project's libs folder  (or any other class path). The SDK contains classes for facilitating authentication of users, application authorization, session management, and API calls for all types of applications.

Facebook JavaScript SDK

The Facebook JavaScript SDK is a library of JavaScript classes that you can use to make calls to the Facebook GRAPH API from JavaScript. In Flash Platform applications, you do not need to use the JavaScript SDK for any calls to Facebook because you can make them directly with ActionScript without having to write and call external JavaScript functions from within your application. However, you use the JavaScript SDK in conjunction with the Adobe ActionScript 3 SDK for Facebook Platform when creating web applications in order to implement a seamless user login experience.

Summary

This article introduced the technologies involved in building applications on the Flash and Facebook Platforms. For additional information about these technologies, use the following resources:

• Flex and Facebook Technology Center
• Adobe Flex Developer Center
• Adobe Flash Developer Center
• Adobe AIR Developer Center
• Facebook Developer site