Building RIAs with the Adobe Flash Platform

The Flash that you thought you knew has changed. It’s grown up.

In this article, I’ll explain some of the technologies that make up the Flash Platform, how they fit together, and how you can use them to build RIAs. Pay attention, because there will be a quiz at the end! The first 200 people to submit their answers will receive a copy of The Adobe Flash Platform ActionScript Reference for Rich Internet Application Development (that’s the print version) delivered to their door for free, thanks to Adobe.

The transformation that Flash has undergone has been occurring for some time, and many developers are aware of it. Every day I hear of a developer building a powerful new application for the Flash runtime that performs tasks like connecting to enterprise solutions powered by SAP or Oracle – and all with the full blessing of those vendors. Flash has evolved beyond the Skip Intro button for which we used to hate it, and has become ubiquitous – helping the browser perform way beyond the text rendering that it was first built for.

It was Macromedia (back in 2002, in their pre-Adobe acquisition days) who coined the term Rich Internet Application (RIA). The introduction of this term coincided with the release of a set of new custom components for Flash MX, thus supplying Flash developers with a set of UI components and providing them with a means to build their own. Flash already contained the ability to make a call to a remote server without forcing a page refresh, but with the release of ColdFusion MX that same year came Flash Remoting, which allowed applications built with Flash to pass serialized data to the server via AMF (Action Message Format).

These two products – custom components for Flash and Flash Remoting – and the synergy that could be experienced by combining them has since been expanded many times in the six-and-a-half years since they were first released. Recently, these technologies have been termed the Adobe Flash Platform. This umbrella term describes a collection of Adobe products, including multiple runtimes, development tools, and servers.

The Flash Runtime

The Flash Player is the cornerstone of the Adobe Flash Platform; it offers the developer a single, cross-platform runtime with all the capabilities of the Internet today. It supports more than just vector animation – it’s also a multimedia player. In fact, the majority of all online video today is delivered via Flash, with the capacity to offer true High Definition video via the same H.264 codec used in Blu-ray.

The runtime can communicate with application servers via web services, HTTP, and remote object calls without the need to perform a browser refresh. Additionally, the player has had VoIP capacity for many generations, and it’s possible to build and deploy collaborative applications with Flash that can include text chat, whiteboarding, and the sharing of desktops across operating systems.

A lot of effort has been invested into making sure that Flash-based RIAs work successfully for the wide variety of devices and operating systems. For example, Adobe and Google together have recently announced the successful implementation and development of a virtual user that Google uses to retrieve text from Flash content; this enables the content to appear in Google’s search results. Adobe is constantly improving the performance of accessibility within the Flash Player and its compatibility with screen readers for the visually impaired. Deep linking and browser history compatibility are features present in the open source Flex framework for Flash applications; these aim to eliminate the kind of navigation problems encountered with dynamic content in Ajax-based RIAs.

Adobe has successfully matured the Flash runtime in the short time that they’ve had it as a product. With each iteration, particularly Players 9 and 10, significant improvements in performance have occurred; Player 10 now offers hardware acceleration for advanced graphical effects. Flash Player 10 also introduces new functionality, including 3D effects, custom filters and effects, advanced text support, and dynamic streaming for improved video performance.

Flash Player 10 is the latest version of the browser plugin; it’s available for Windows, OS X, Linux, and Solaris. Flash Lite 3 is a scaled-down version of the runtime for use on mobile and handheld devices.

Look – up in the AIR!

And then there’s Adobe AIR – a new category of runtime that combines Flash Player 10 and WebKit (the web page rendering engine behind Safari and Chrome) into a stand-alone runtime capable of running offline applications. The runtime is available for Windows, OS X, and Linux.

Adobe AIR was introduced by Adobe mid-2008 after a lengthy public beta cycle. Developers can use their web application building skills to create apps for the desktop and deploy them via AIR. The AIR runtime incorporates functionality missing from the browser, such as access to the file system to create, delete, and maintain files and folders.

Adobe AIR supports drag and drop interaction with the operating system, network connection detection, and SQLite for local storage of data; the latter can be easily searched with standard SQL queries. If Acrobat Reader is installed on the client machine, AIR will utilize that software package’s capabilities for rendering PDFs. A version of the AIR runtime for mobile and handheld devices has been hinted at by Adobe, although there’s yet to be a release date announced.

Of course, all of these tools are free to download, and Flash Player is bundled as part of a Windows and OS X distribution.

Development Tools for RIAs

Flash CS4 Professional is the latest iteration of the Flash authoring environment. Originally an animation tool, the Flash IDE can also be used to program Flash movies using ActionScript, an ECMAScript-based object oriented programming language. It has the necessary tools for ActionScript authoring, including an ActionScript editor and an advanced debugger. Flash CS4 is both a tool for designers and developers, and while it’s possible to create whole applications with Flash, Adobe has created a framework for Flash applications called Flex (check out some of the Flex tutorials on sitepoint.com).

Originally released as an enterprise platform (with an enterprise price to match), Flex is now a free, open source framework for building applications to run within the Flash runtime. Flex applications are authored in a combination of two languages:

MXML, a declarative XML-based language in which tags represent classes within the framework; it’s principally used for UI layouts and behaviors, and ActionScript 3, an object-oriented language typically used for client logic. Developers with a Java background will find ActionScript intuitive and may be tempted to author with it entirely.

The Flex framework contains over 100 extensible UI components. It can be downloaded for free as part of the free Flex 3 SDK, which also contains a stand-alone compiler.

A number of open source frameworks have emerged to assist Flex application development. The most popular of these is Cairngorm, an open source project managed by Adobe. Others worth looking at include Mate, a tag-based, event-driven framework; and PureMVC, a lightweight ActionScript 3 framework for creating applications based on the model-view-controller concept.

While the Flex framework and Flex SDK are free, the Flex development tool, Flex Builder, is a commercial product (although it’s free for educational use). Flex Builder 3 is an Eclipse-based IDE, and is available as either a stand-alone application or as a plugin for Eclipse. There are versions of Flex Builder for both Windows and OS X, and a beta version is available for Linux.

Flex Builder supports the editing of MXML, ActionScript, and CSS files, including code completion, tag insight, and syntax coloring. It also includes a visual layout tool, to facilitate the positioning of components in a WYSIWYG environment.

Flex Builder is available in two editions, Standard and Professional. The Professional edition includes a charting library, performance profiling tools, and support for automated functional testing. Projects built with Flex Builder can be deployed either in the browser via the Flash Player, or as stand-alone applications via Adobe AIR.

Servers

A Flash application is able to retrieve data from a remote server via HTTP calls; this can be done with either of the Adobe tools mentioned above. With Flash MX, Macromedia introduced a once proprietary binary data transfer format for communication with an application server called Action Message Format (AMF); this has recently been made open source. AMF borrowed the means to describe the structure of data from the SOAP protocol; automatic translation of this format was provided with the Flash Remoting classes and service that was included in ColdFusion. AMF has also been reverse-engineered and is available for a number of application servers; AMFPHP, WebORB, and RubyAMF are examples of that reverse-engineering.

Adobe now also have an open source, Java remoting and web messaging technology that Flex and Adobe AIR applications can use to connect to Java server logic called BlazeDS. This uses the same AMF protocol mentioned above. BlazeDS integration has recently been added to the Spring framework to make Spring-powered RIAs with Flex front ends possible.

Adobe have additional server products that also support AMF; ColdFusion has been previously mentioned, while another is LiveCycle Data Services, which also includes Flex Messaging for real-time data push and publish/subscribe messaging.

The Adobe Flash Media Server group of products are also included within the Flash Platform. The Flash Media Interactive Server can be used to build Flash-based collaborative applications, which can include features like streaming Flash video, VoIP, chat, webcam chat, and online gaming. The Flash Streaming Media Server is capable of streaming both live and on-demand Flash video.

The Near Future

Adobe’s long-awaited technology preview, Thermo, was released to attendees at Adobe MAX in November 2008 under the new name, Flash Catalyst. This is an interaction design tool for RIAs that will be released as a public beta in the first half of this year. Flash Catalyst will import design comps created in Illustrator, Photoshop, or Fireworks, making use of a new interchange format introduced with all the CS4 design tools called FXG.

Flash Catalyst can convert the design elements in the artwork into design and interactive elements for an RIA project with workflow; this gives it the ability for an interactive element like a scrollbar to go back to Illustrator for some design tweaks to occur. Flash Catalyst converts elements like buttons or scrollbars into Flex custom components. Interactions and timeline events are added visually to projects in Flash Catalyst, but in reality the application is creating the whole project as MXML. Under the hood, Flash Catalyst is another Eclipse-based application just like Flex Builder.

Flash Catalyst is already listed as a part of the Flash Platform; the MXML that it produces is incompatible with Flex 3, but will be compatible with the next version, Flex 4 (code-named Gumbo), which is in public beta. Flex 4 has graphical enhancements including an implementation of FXG, and customizable components.

Another new project related to Flash that was released at Adobe’s annual developer conference MAX late last year was Alchemy; this is a research project that allows users to compile C and C++ code to run on Flash Player 10. There were quite a few good examples of how additional functionality could be added to Flash-based applications using existing libraries, including encryption, support for RAW digital photographs, and PDF creation.

Conclusion

Adobe’s Flash Platform offers the RIA developer a powerful, ubiquitous runtime in the Flash Player; within the browser it’s a case of code once, deploy everywhere, as there’s a version of the runtime for all major operating systems. The Flex open source framework gives developers the ability to build rich interactive applications to run in both the browser and on the desktop via Adobe AIR; it provides the ability to connect to data through a number of different connection types.

If you’re building a Rich Internet Application, and haven’t checked out the technologies that comprise the Adobe Flash Platform, then now is a good time to start. We’ll be publishing more articles on these topics over the coming months on sitepoint.com, so stay tuned!

In the mean time, test yourself on the contents of this article by taking the quiz. The first 200 people to submit their answers will receive a print copy of The Adobe Flash Platform ActionScript Reference for Rich Internet Application Development, delivered to their door for free, courtesy of Adobe. Take the quiz now!

Frequently Asked Questions (FAQs) about RIA’s Adobe Flash Platform