Using ColdFusion to process Flash form submissions

page 3

In Flash you have to write the code to submit the form when the user clicks submit. You do this by adding an event handler to the submit button. Select the button and display the actions panel. Switch to expert mode (Ctrl-E) and enter the following code:

	on ( release) {
		_root.bAcceptMailing = cbMailing.getState();
		loadVariables("http://www.myserver.com/saveComments.cfm",
						_root.response,
						"POST" );
		sendTime = getTimer();
		gotoAndPlay("wait");
	}
			

This is the event handler for the release event, the event that fires when the user releases the mouse button after a click on an object.

The first statement in the handler gets the state of the checkbox. The reason we assign it to a _root level variable is that the next statement loadVariables takes all the variables on the current timeline and sends them to the destination URL. The first argument for loadVariables is the server side script (ColdFusion template) that will process he data. The second argument is an object that will receive the data returned. The third argument is the method used to send data, and can be either GET or POST.

Getting data into Flash using loadVariable isn't a synchronous process, so the event handler just carries on with the next statement. The next statement is actually just recording the time the loadVariables call was made so that we can check later for a timeout error.

The final statement moves to the keyframe labeled wait and starts playing the movie at that point.

If you select frame 10 in the form layer you'll see that the form has gone. The keyframe we added at frame 10 tells Flash we want to display something else here. Select the Text tool and add some text to indicate that the movie is waiting for a response from ColdFusion.

By telling the movie to start playing we are not actually making it wait at the frame labelled wait. We have to make it wait, and we do this by selecting the actions layer and adding a keyframe at frame 11. Select the new keyframe, display the actions panel and add the code:

	if ( getTimer() > sendTime+25000 ) {
		gotoAndStop( "error" );
	} else {
		gotoAndPlay( "wait" );
	}

What this code does is to check how long it has been since we called loadVariables. If it is more than 25 seconds then we assume the server is not responding and go to the error handling section. Otherwise we go back to the frame labeled wait. In other words we are waiting up to 25 seconds for something to happen.

What we're actually waiting for is another event to happen, and the event we're waiting for is for the data to be completely loaded. To catch this event we use a movie clip. A movie clip doesn't need to actually do anything, in fact we can create an empty one using Ctrl-F8, selecting type movie clip and giving it a name like responseClip.

Create a new layer and call it response. Select the first frame in the response layer and drag a copy of the responseClip from the library to the stage. It will appear as a small circle, but it will be invisible when the movie plays. Don't add any further keyframes on this layer.

In order to check when the data has been loaded, select the responseClip you just put on the stage and display the Instance panel. In the name field type response. This identifies the Movie clip as the target we specified in the loadVariables call.

With the response Clip still selected, display the actions panel and enter the following code;

	onClipEvent( data) {
		_root.gotoAndStop("response");

	}

This event handler will be called when the data has finished loading into the response Clip. When it has then it moves us to the frame labeled response.

Select the actions layer and select the first frame in the response section. Display the actions panel for the frame and enter the following code:

	if ( _root.response.cfstatus == 1 ) {
		gotoAndStop("output");
	} else {
		gotoAndStop("error");
	}

In the submit button release event handler we told Flash to load some variables into the movie clip _root.response. Once this data has loaded the variables become properties of the object we loaded them into.

One of the variables our ColdFusion template will return is cfstatus, a flag to indicate the success of the call. Depending on the value of cfstatus we goes to either the output section (Frame 30) or error section (Frame 40)

In the output section the artafterscience guestbook displays an animation based on the comments entered. Here I've just displayed the ID of the new record inserted in the database, but the principle is the same.

«previous | next page»