Using ColdFusion to process Flash form submissions

by Adrian Marshall 19 May 2002.

This tutorial is aimed at ColdFusion programmers who want to be able to used their ColdFusion skills to add additional functionality to Flash Web sites. Therefore I've assumed a greater knowledge of ColdFusion than Flash. It's based on a guest book I wrote for the artafterscience site that was developed using Flash 5 and ColdFusion Server 5.

The artafterscience guestbook is a good example of how ColdFusion can be used to extend the functionality of Flash movies. The guest book is a fairly standard contact form with fields for name, email address, some comments, a mailing list checkbox and a submit button. When a visitor clicks the submit button the form data is passed to a ColdFusion template that saves the data in a database and mails the comments to the site administrator. If this is successful then the ColdFusion template returns a flag to the Flash movie.

This process can be broken down into the following stages:

• Display the form
• Send data to server and wait for a response
• Process data on the server and return status
• Display response depending on returned status.

Three of these stages are performed by Flash and the remaining stage carried out by the ColdFusion server, so we'll start by looking at the Flash movie.

Create a new Flash movie and rename Layer 1 (just double click it) to Labels. The labels layer is used to identify the different sections of the movie that we want to be able to move to at each stage. The guestbook movie actually has five sections.

Insert keyframes (F6) at frames 10, 20, 30 and 40, then select frame 1 and in the frame panel (Ctrl-F if it's not already displayed) type 'input' in the label field. The select the other keyframes and assign the labels 'wait', 'response', 'output' and 'error'. You might notice the label 'error' isn't actually displayed. To fix this, select frame 55 and insert a Frame (F5).

Insert a new layer, either using the Insert layer icon or the Insert menu. Rename this layer 'actions'. Select the first frame in this layer and display the actions pane. Either select it from the Windows-panel menu or use Ctrl-Alt-A. Add a stop() action to the code area either by double-clicking the stop() action in the menu or dragging it to the code area. This is to stop Flash on the frame that will contain the input form.

Add another new layer, rename it 'form' and insert keyframes to match the labels layer. Your timeline should look something like this:

On the next page we'll add the form to our movie.

next page»