Four Ways to Transfer Data Between Flash and PHP

Rate this item | 0 users have rated this item.

Discover the options for implementing bidirectional communications between browser-based Flash forms and server-side PHP code.

by Octavia Andreea Anghel

January 28, 2008

hen you need to develop a web form with a special design and great effects, you will probably elect to use Flash. But building and programming Flash forms is considerably different from building standard HTML-based forms. You program Flash using its proprietary (but JavaScript-like) ActionScript language—which is great if you're already a Flash developer—but as a PHP developer it's is more desirable to implement the business logic in PHP and use the Flash form simply to gather the data. To do that though, you need to know how to access data in the Flash form and (sometimes) how to update the Flash form from PHP as well. That's exactly what you will see how to accomplish in this article.

Creating the Flash Form
As an example, take a look at the Flash form in Figure 1. You'll see how to create, and communicate with, the form. To get started:


Figure 1. Sample Flash Form: The Flash form used in this article provides a test bed for bidirectional communications between Flash and PHP.

Open Macromedia Flash, and choose the "New" option from the File menu.
From the New Document window, General tab, choose the "Flash Document" option, and then click OK.
From the Insert menu, choose the New Symbol option to create a new movie clip.
Rename the movie clip flashForm, and click OK.
Use the Rectangle Tool from the Tools menu to draw a rectangle of 561x493 pixels on the flashForm surface, and set the background color to #CCCCCC.
Next, use the items from the Components panel (UI Components node) to reproduce the form design from Figure 1.
Use the Properties panel to reproduce the component properties you can see in Figure 1 (the red arrows);
Save your project as flashForm.fla.

With the Flash form created, you can move to the next task—communicating with the form.

Preparing Flash Data
Although your primary business logic will be in PHP, you can't avoid ActionScript altogether; you need to write a little ActionScript code to retrieve and prepare the data to be sent to PHP. That means you need to know how to extract the data for each type of Flash component (just as in JavaScript, the code you use to get data from a control depends on the control type). For the various controls, here's the ActionScript you'll need:

For TextInput components, use the text property. For example, you can extract data entered into the name and email TextInput components with the following code:
```
   _parent.name.text
   _parent.email.text
```
For RadioButton components, use the selection property, which returns the selected radio button from the group. In this case, you want the button's label, so you can use:
```
   _parent.radioGroup.selection.label
```
For ComboBox components, use the value property, which returns the selected item. Here's the code to determine the selected country from the dropdown country list:
```
   
   _parent.country.value
```
Note: Code such as the preceding examples belongs in the Actions panel of the Submit button, so it will run when users click Submit.

CheckBox components are a little more complicated. You need to create a global array to store the labels of the selected Newsletter checkboxes and a global function that checks whether a selected checkbox label is already in the global array. If the label is found, then the function returns the position (index array) where it was found; otherwise, it returns -1. Here's the ActionScript to perform the check:

   onClipEvent(load)
   {
      _global.checkboxArray = new Array();
   
      _global.testIfSelected = function (t) 
      {
         for(i=0;i<checkboxArray.length;i++)
         {
            if(checkboxArray[i]==t)
            {
               return i;
            }
         }
         return -1;
      }
   }

Author's Note: Place the preceding function in the Actions panel of the movie clip (this panel is available only after you drag an instance of the flashForm movie clip on the scene).

To avoid adding a checkbox label to the array multiple times, you'll need to call the testIfSelected function every time a user selects or deselects one of the checkboxes. Therefore, each checkbox control implements the following action:

Author's Note: Place the following code in the Actions panel of every checkbox.

   on (click) {
      var pos=testIfSelected(this.label);
   
      if(this.selected == true)
      {      
         if(pos == -1) checkboxArray.push(this.label);
      } 
      else 
      {
         if(pos >=0) checkboxArray.splice(pos,1);
      }
   }

Author's Notes:

To view the Actions panel of a Flash component, left-click the component and expand its Actions panel.
To see the flashForm movie clip, press Ctrl+L, which opens the Library panel, and then double-click the flashForm name.

Finally, when a user submits the form you can join the labels of the selected checkboxes into a comma-delimited string using the join method, like this:

   checkboxArray.join(",")

Author's Note: Put the preceding code line and the rest of the code in this section in the Actions panel of the Submit button.

List components are similar. Because the list used in the example supports multiple selections you have to determine and submit all the selected articles. The following code concatenates the article labels into a comma-delimited string:
```
   var listSelection = new Array();
   var listLabels = "";
   listSelection = _parent.format.selectedItems;
   for(j = 0; j < listSelection.length; j++)
   {
      listLabels = listLabels + listSelection[j].label + ",";
   }
```
TextArea components hold multiple lines of text, but you retrieve it with the text property just like a TextInput control:
```
   _parent.observation.text
```