Flash Integration into Drupal 6

Drupal hearts Flash

October 13, 2008 - 1:42pm

Flash provides a great interface for customizable interactions, but with typical Flash development, it's cumbersome to edit content after publishing an application. For many Flash projects, updating content after the fact isn't important. But if you want to save data or update information in your Flash application, then you're going to want to look at having some sort external data source.

External data for a Flash application can be accomplished by simply having the flash application read cookies or text files on your web server. This bare-bones approach is appropriate for some, but such an approach is pretty low-level and susceptible to bugs. If you want an application to have any sort of ongoing maintainability, then you'll want to have some sort of CMS to house your information. Because of its flexibility and widespread use, Drupal is an excellent choice for your CMS.

This tutorial is geared towards Drupal developers who may or may not have a background in Actionscript coding. You'll need to know how to install modules and be comfortable with digging into a .module file to tweak some code.

What you'll need

  • Drupal - You can use either Drupal 5 or 6, but you should probably use 6, especially if you don't have to worry about legacy code. This tutorial will use Drupal 6.
  • A Flash compiler - The obvious choice is Adobe's Flash product (http://www.adobe.com/products/flash/), but you can use any flash compiler. More info on open-source flash at http://osflash.org/.
  • Services Module (http://drupal.org/project/services)- This module is one-half of the glue that sticks Drupal and Flash together. The services module provides an extremely easy way to take Drupal data outside of the CMS into various different environments.
  • AMFPHP & AMFPHP module - (http://www.5etdemi.com/blog/archives/2007/01/amfphp-19-beta-2-ridiculous..., http://www.amfphp.org/) - AMFPHP is the second=half of the Drupal/FLash glue. AMFPHP provides a data gateway between PHP applications and Flash.
  • Text Editor - I'm currently in love with Coda, but any editor will do. (Adobe's Flash product has a text editor built in.)

Step 1 - Set up Drupal & Services module

Setting up Drupal is fairly straightforward. If you aren't already familiar with how to install Drupal on your server, there are plenty of good tutorials on the subject elsewhere on the web.

The Services module is also pretty straightforward to install. Just like any other module, throw the folder into the modules folder (either /sites/all/modules or /sites/[your-site-name]/modules), then enable the module as usual.

In addition to the Services module, you'll want to turn on some of the services that are included in the Services module. You'll definitely want to turn on the System service module. This module allows you to, among other things, pull a session ID and user item, which is going to be important later. You'll also want to turn on any of the other services you'll need. For the purposes of this tutorial, I am turning on the System and Node services.

Note on Security

The services module offers two different ways to prevent access to the service: Session ID's and keys. Key's are unchanging strings handled directly by the Services module, whereas session ID's are unique id's given by Drupal. For the purposes of this tutorial, you should turn off the keys, but leave the session id setting. You can do this by going to the settings page on the Service module.

Step 2 - AMFPHP

Next, you'll want to install AMFPHP and the AMFPHP Drupal module. The Drupal module goes into the same folder as the Services module, and the AMFPHP files will go into the AMFPHP module's folder.

The AMFPHP module is not fully compatible for Drupal 6 yet. There isn't a separate branch for Drupal 6 yet, but the HEAD release is mostly compatible with 6. There is a bug in the module that keep it from working properly. There is a patch available (http://drupal.org/node/320019), or you can just replace the first line in the amfphp_server function from

$path = drupal_get_path('module', 'amfphp');

to

$path = $_SERVER['DOCUMENT_ROOT'] . base_path() . drupal_get_path('module', 'amfphp');

After turning on the module, you want to make sure it's working. On the main services page, click on the AMFPHP server link. It should tell you that you have everything installed properly. After that, you'll need to set up the right permissions so that you'll have access to Drupal's data. Go to the permissions page and turn on permissions to allow anonymous users to access services and load any node info.

Step 3 - Actionscript

Now that you have Drupal set up properly, all you need to do is get Flash connected to your service. Open up your Actionscript editor of choice and add use this code to get you started.

package com.thanksfornotsuing{
   import flash.display.MovieClip;
   import flash.net.NetConnection;
   import flash.net.ObjectEncoding;
   import flash.net.Responder;
   import flash.events.Event;
 
  public class DrupalConnector extends MovieClip{
    private var myService:NetConnection;
    private var sessionID:String;
    /**
    * Contructor
    */    
    public function DrupalConnector(){
      myService = new NetConnection();
      var myServiceURL:String = "[location of your Drupal install]/services/amfphp";
 
      myService.objectEncoding = ObjectEncoding.AMF0;
      myService.connect(myServiceURL);
      var myResponder:Responder = new Responder(getSessID, onFault);
      myService.call('system.connect', myResponder);
    }
 
    private function getSessID(returnObject:*) {
      trace(returnObject.sessid);
      var myResponder2:Responder = new Responder(getNodeInfo, onFault);
      sessionID = returnObject.sessid;
      myService.call('node.get', myResponder2, sessionID, 1);
    }
 
    private function getNodeInfo(returnObject:*) {
      for (var item:* in returnObject) {
        trace(item + ": " + returnObject[item]);
      }
    }
 
    private function onFault(f:*) {
      trace("Error" + f);
      for (var item:* in f) {
        trace(item + ": " + f[item]);
      }
    }
  }
}

There are two main concepts to understand about the application: the NetConnection object myService and the two Responder objects. The NetConnection class provides the ability to connect to external data sources. We use this class to connect to the Drupal AMFPHP installation. The Responder class allows us to call a function after information has been pulled from the data source.

The above code calls the 'node.get' service function and displays the node data of the first node in the console.

Going Further

Now that you have information loading from Drupal properly, you can load any piece of information you want out of Drupal. The Services module provides services to load user, node, taxonomy and view services, as well as access to search, menu, and file information. If you need something outside of these items, it's relatively simple to write a custom service, which I will go over in a later tutorial.

Comments

admin's picture

Awesome! I'll have to update the tutorial.

Anonymous's picture

AMFPHP for DRUPAL 6
http://drupal.org/node/219365

Anonymous's picture

Hey Brandon,

Thanks for the great article.

One quick note: the only way I could get your example working was to supply an array of fields in the call function. I.e.,

myService.call('node.get', myResponder2, sessionID, 1);

- had to be changed to:

myService.call('node.get', myResponder2, sessionID, 1, ["title", "body"]);

Thanks again!

Anonymous's picture

Use AMFPHP HEAD module.

Anonymous's picture

I've gotten everything to work except for when I try to get the actionscript to "talk" to Drupal. I get this error:

Error #2044: Unhandled NetStatusEvent:. level=error, code=NetConnection.Call.Failed
at DrupalConnector()

Anonymous's picture

Have you tried the As3 class from http://thirdavedesign.com/drupalsite/?

A lot of people use only Drupal 5, is it a better way for now?
I think there's also a new services module is your code still work with it?

admin's picture

I'm using version Services 6.x-0.13. What error are you getting from the module?

Anonymous's picture

I get the following error with the latest version of the services module. Apparently this is because of the new naming conventions!!! What version of the services module did you use?

admin's picture

You want to use the HEAD release of the Module. The maintainer hasn't branched out a Drupal 6 version yet.

http://drupal.org/node/96669

Anonymous's picture

Am i looking over the Drupal 6 AMFPHP module link? According to Drupal module site there's no version for 6 ?

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.