Flash, FlashDevelop, AMFPHP and AMF Remoting – A Getting Started Guide

Introduction

Some months ago I began a project involving Flash for making visual representations of data.  The learning curve was steep at the beginning, mostly because of so much confusion between all of the Adobe (and formerly, Macromedia) products.  There’s Flash, ActionScript, Flex, AIR, ColdFusion, Director, and so on – and on top of that there are a small number of acronyms and catch terms such as AMF, RPC, FLA, SWF, MXML, to name a few…and what the heck does CS4 stand for?  I’d like to clarify a few of those things in this article, plus talk about a setup that works very well for me – Best of all, the setup I use is completely free (as in beer) and is also mostly open source.

Definitions

First of all, the difference between Flash and Flex is a little hard to explain but you already know what Flash is – it is the multimedia platform which had first become popular when owned by Macromedia, and is now continued by Adobe.  Flash was first designed for interactive (vector, primarily) animations, but has evolved in functionality, and is used for streaming media from YouTube, for instance.  Flex is essentially a framework built on top of Flash, and allows a programmer-style (rather than more of an animator) approach to creating Flash media.  There are in fact two versions of Flex, one is from Adobe and the other is open-source.  Flex targets the creation of applications rather than animations.  Since Flex is built on Flash, I tend to say ‘Flash’ when I (also) mean Flex. For a better explanation of the differences between Flash, Flex, and others, this article is very good: http://www.scottklarr.com/topic/39/adobe-air-vs-flash-vs-flex-vs-microsoft-silverlight/

Flash is well-suited for Internet applications and especially games, but seemed to be a good platform for data visualization and even user interfaces across the Net because it is designed around easy access to graphics rendering as well as distribution within websites.  Unlike Microsoft Silverlight, which serves a similar purpose, Flash is well-established, has a large community following, and has open source options.  Silverlight is definitely getting better and may surpass Flash in some technical aspects, but I chose Flash because it is more established, and Flash applications work well in Firefox, IE, and other browsers. Files with the FLA suffix are working files for Flash movies.  They can be produced by the Flash editor (Flash CS4, etc.  CS, by the way, stands for "Creative Suite" and seems to be a title which ties the core Adobe software together).  Flash movies can be written in ActionScript, or MXML (an XML-based markup language), or typically some combination of the two – ActionScript can be embedded within MXML, or various items such as buttons and text fields can be created directly through MXML. 

FlashDevelop is an Integrated Development Environment (IDE) which can create Flash movies and animations, and which I find useful and will talk about in the next section of this article. Once compiled a SWF (ShockWave Flash) file is created.  This is the end-user-visible, animation prone, Internet-ready file, and SWF files are played by the Flash player, either in stand-alone mode or typically within a web browser. In my project I needed a way of getting data from a database, and discovered what is called ‘AMF Remoting‘ or Remote Procedure Call (RPC) to tie Flash together with PHP, so that I could use PHP as a middle-man script to access an MSSQL database. AMF stands for ‘ActionScript Message Format,’ (see http://osflash.org/documentation/amf for a better description).  What it does is serialize Flash objects and send them along a network as a binary datastream, to be turned back into objects at the receiving end.  Compressing everything as a binary stream makes it a very efficient method for transport, and while AMF was originally a proprietary format (used by Flash and ColdFusion, another development platform which I don’t cover here), it has since been opened up and can be used in conjunction with ASP, PHP, and more.  So in other words, an object floating around in Flash can be squeezed into binary data, sent to a PHP script which receives it and translates it into an object in PHP and which can then be used within PHP.  The process works vice-versa too, of course.  Have a look at http://theflashblog.com/?p=414 for a good beginning explanation of AMF and more.

It is important to note that a Flash application has no knowledge of ‘who’ it is sending AMF information to or getting it from.  Objects are serialized with AMF0 or AMF3 encoding (AMF3 coincides with the release of ActionScript 3), then sent along to a receiving service of some sort.  Since I prefer usable platforms which are free and/or open source, I found AMFPHP and have had good luck with it.  AMFPHP creates native PHP objects out of the data (or tries to), and regular PHP scripts can then use those objects and do all the things that PHP does well, such as access databases and so-on.  AMFPHP can also send data back to Flash, which Flash receives and handles as an event, and can re-form the data into its own native objects as well.

An Environment Which Works for Me

I’ve already described most of the pieces necessary for the environment that I like using.  The main component which makes Flash programming rewarding is FlashDevelop. 

FlashDevelop

(FD) is an amazing free and open source IDE for writing ActionScript and Flex applications for Flash.  It will work alongside the Flash IDE for doing the programming behind the objects drawn in Flash and saved within a FLA file, or you can use it stand-alone as I do, and use fancier programming to create and position the objects within code.  FD works with .Net, and there is only a Windows version available.

Setting Up the Environment

So let’s get started actually putting all of the pieces together!

The Flash Player Itself

Well of course, in order to do anything with Flash, you need the player to play it….  I really only bring it up because Adobe actually offers a special debugger version of their player that could be quite useful.  I actually haven’t used it (FlashDevelop and a lot of trace statements have been enough so far), so I can’t say much about it, but I imagine if I spent some time on it, it would be invaluable for larger projects than what I need to do.  One minor point I should bring up, is that not all Flash movies out there are perfect…so with the debugger version you might get some annoying pop-up dialogs telling you in which way those movies are flawed, even if they don’t outright crash.

The download site is below.  Scroll down for debugger versions.  Choose carefully!  There are browser plug-in, standalone, and various other versions for different operating systems and browsers.  One nice thing is that you can have the stand-alone version running alongside the browser version, though.  It does no harm to install one on top of the other, except if I remember right it might complain when installing an old version on a new one.
http://www.adobe.com/support/flashplayer/downloads.html

Flex SDK

To compile anything with FD, you also need the Flex SDK:
Flex 3
Flex 4
You can check this ‘broken’ link in case a Flex 5 comes out before I edit this article…
http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex

At the time I’m writing this, Flex is up to version 4 as beta, so I would recommend the latest 3.4 release.  Flash player is at version 10 and may require Flex 4; check this out if you plan on programming for it.  Adobe’s download pages are confusing, if you search for Flex download, it seems you may pull up pages which link only to Adobe Flex, or the one I’ve linked to which also has the open source version, plus closed-source libraries to add into the open source version which gets it to the full closed source functionality…  It’s up to you what you want to do, but I suggest spending a few minutes poking around there to get a better understanding.  You can install the package upon download now, or wait until you have everything else you need, as is described next:

FlashDevelop

Download FD from the site:
http://www.flashdevelop.org/

Releases for download are listed in the Download forum thread.  When I first tried to get going, the installation was tricky for lack of understanding the different components.  Someone on the FD site was nice enough to post these directions for installing FD to me:

1. Make sure .NET is installed (it usually is)
2. Make sure Java is installed (it often is)
3. Download and extract the Flex SDK (latest milestone release is best)
4. Install the browser plugins from the Flex SDK’s runtimes directory
5. Run the external player (or associate if necessary) the external player in the runtime directory
6. Download and install FlashDevelop (I prefer the latest development version)
7. Configure the path to the Flex SDK and the external Flash player if necessary
8. Restart Windows (usually not necessary, but sometimes it helps)

In our case there is also:
9. Install and configure AMFPHP on a proper PHP server

AMFPHP

As described earlier, AMFPHP is a free, open source PHP service for handling AMF Remoting.  This enables the benefits of programming in both PHP and Actionscript using AutoComplete (code completion) in environments which support it, since you can work with the objects directly.  Binary serialization is also very fast, and AMF requires far less coding than previous methods of sending data to/from Flash (i.e., outdated methods such as wrapping data up into XML and sending that along, or using GET/POST methods with arrays).

Get AMFPHP here:
http://www.amfphp.org/

Setting it up AMFPHP is very easy (unzip it to the wwwroot directory and set permissions so it can be used); while using it may at first be a bit tricky.  Code you create for remoting will reside in the amfphp/services directory.  Base objects (as sent/received via AMF) belong in the amfphp/services/vo directory (VO stands for Value Object, and it seems the term has been replaced with ‘Data Transfer Object,’ or DTO)  VOs, reside under directories which match the package within Flash (PHP doesn’t natively support packages, but it can be emulated by PHP code).  Additionally, services can be tested to some degree using amfphp/gateway.php. 

At this time, do some searching to find sample remoting code to get yourself going on the coding end.  Eventually I may post a brief sample to illustrate using it.  This article may help:
http://www.joshuaostrom.com/2008/07/01/amfphp-class-mapping-primer-19-beta/

PHP Editing

For editing PHP files, I highly recommend PDT; PHP tools for Eclipse:
http://www.eclipse.org/pdt/

That’s a completely different tutorial and there are plenty of sites which can describe using it.  I like it because it is free and open source, and it works great for managing PHP projects, and it has excellent code completion for PHP.

Debugging

This guide wouldn’t be complete without mentioning debugging.  There are inherent challenges when doing something like Remoting, which make coding for it a bit precarious.  Finding the issues with a large amount of code or when new at the technique can be particularly difficult, and this is where a good debugging proxy can come in.  Specifically, Charles and ServiceCapture are two which can see remoting VOs and their data directly.  They essentially work by intercepting data sent down a network connection and displaying it in some human-readable format.

Charles was recommended by the AMFPHP website (if I remember correctly), and ServiceCapture was recommended directly to me, but there are others, some free and/or open source.  See, for example:
http://www.carehart.org/blog/client/index.cfm/2006/11/28/alternative_http_debugging_proxies

 

Conclusion

Hopefully this run-through is as useful to you as it would have been to me when starting up!  Good luck in your Flash Remoting endeavours.

Here are a few additional resources:

FlashDevelop help forums:
http://www.flashdevelop.org/community/

Another Getting Started article:
http://www.senocular.com/flash/tutorials/as3withmxmlc/

Flex code coloring schemes for FlashDevelop:
http://www.flashdevelop.org/community/viewtopic.php?f=10&t=2573
http://flashdevelop.org/community/viewtopic.php?t=2860