Flash, AMFPHP and Services

UPDATE: This info is out of date - i've just started using a new framework which you can find here:
http://www.dpdk.nl/opensource/drupalproxy-as-a-bridge-between-flash-as3-...
There are however some gotchas (as always) but i'll write a new tutorial in a few days that will help smooth the way.

I'm creating a website using Flash (with as3), and Drupal. Services is being used with AMFPHP to get the data into Flash. I'll discuss how i'm getting on with it - when done i'll post up a full tutorial. Meanwhile, please comment on this if you've any advice or comments.

Also worth noting - that although i'm using drupal 6 for this site you'll have to use drupal 5 for the mo to get amfphp working...
First of all make sure that you've installed the AMFPHP and Services modules from here:
http://drupal.org/project/amfphp
http://drupal.org/project/services

Configure Services:
go to Administer > access control and allow access to services module 'access services' to everyone. At some point you may want to check various 'system_service module' boxes too.

go to Site Building > Services
go to the 'Keys' tab and create a key - leave the boxes blank.
go to the 'Settings' tab and check 'Use Keys', 'Use sessid'.

We're going to play with views, so download views module here
http://drupal.org/project/views

I'm not going to cover using views - but there's some great tutorials elsewhere so have a google for it. Now create a view with a few nodes in it, call the view 'latest'.

----

On the flash side of things first of all we're going to use a framework made by these lovely people here:
http://thirdavedesign.com/drupalsite

Open Flash and if you've not got a handy place to store your classes go to Preferences > ActionScript > ActionScript 3.0 settings. Create a folder somewhere like Documents/actionscript (thats where i've put mine)

Unzip the package from thirdavedesign and using the above folder as your root drag the com folder into it. So the full path will be Documents/actionscript/com/thirdavedesign......

Open flash and create a new Flash File (ActionScript 3.0), save it somewhere handy (but not in the above com folder structure, this will be for reusable classes)
Create a new actionscript file and call it 'main.as' (it can be called anything, but i'll be referring to it with this name in this tutorial), save this in the same folder as the flash file.

In the Flash file go to Properties, in the box labelled 'Document Class' type 'main'. This has now associated the two files, so when you run the flash file the main.as file will also get run - this is the file we'll use to get everything going. Now go to the main.as file and start typing:

First of all we'll put everything in a package (cos you have to), and import a few things that we'll need from Flash:

download the main class here
download the flash file here

download the deeptrace function here - unzip this and put this in your actionscript folder you pointed to above.


import flash.display.MovieClip;
import flash.events.TimerEvent;
import flash.utils.Timer;

These 3 lines import various classes from flash that we need in the movie


import com.thirdavedesign.drupalSite.DrupalSite;
import as3.utils.deepTrace;

Here we import the DrupalSite class from thirdavedesign and the deepTrace class. The deepTrace class has one function in it which replicates the print_r command in php. Its really useful for outputting arrays and objects in the Output panel to see what we're doing.


private var drupal:DrupalSite;
private var gatewayUrl:String = "http://yoursite.com/services/amfphp/gateway.php";
private var apiKey:String = "your key";
private var TIMER:Timer;

These variables setup a few important things. Firstly we'll be using DrupalSite in a bit so we nee a new one of them. The gatewayUrl needs to point to the gateway.php so change that to suit your URL. The key needs changing to the key you set up earlier. We're going to use a timer later so we need to create a new timer variable too.


drupal = new DrupalSite(gatewayUrl, apiKey);

This line starts off the connection to Drupal - you'll see the output panel show the progress of that.


TIMER = new Timer(400);
TIMER.addEventListener(TimerEvent.TIMER, getStarted);
TIMER.start();

We cant get our view until we're connected so a timer is started that runs every 400ms which calls the funtion getStarted.


private function getStarted(ev:TimerEvent):void
{
if (drupal.CONNECTED)
{
TIMER.stop();
drupal.getView('latest', viewCallback, null, true);
trace("connected = " + drupal.CONNECTED);
}
else
{
trace("connected = " + drupal.CONNECTED);
}
}

This function checks to see if drupal.CONNECTED has been set by the DrupalSite framework. If not we trace 'connected = false', otherwise we stop the timer and run a drupalSite function, getView. This needs the name of the view in question 'latest' in this case, and a function to return the data to 'viewCallback' in this case.

the viewCallback function could do a number of things, but here we're just going to print out some data in the output panel. So its running another function sortArticles, which gets passed the 'view' array.

private var titles:Array = new Array;

We need a titles array to hold the titles.

private function sortArticles(result:Object):void {
for (var i = 0; i < result.length; i++) {
titles.push(result[i].title);
}
deepTrace(titles);
}

Here we run through the result object and push the node titles to an array. The deepTrace function then traces the array to the output panel.

If you want to look at the whole view object then comment out the above deepTrace line and uncomment the deepTrace(view) line in the viewCallback function. You'll see that it looks remarkably similar to a print_r($node) in php on a template page for instance.

Now we need some theming in flash to get this data in the right place - thats for later (when i've done it)