Printed from http://www.devx.com/webdev/Article/36748/1954
Four Ways to Transfer Data Between Flash and PHP
Discover the options for implementing bidirectional communications between browser-based Flash forms and server-side PHP code.
by
Octavia Andreea Anghel
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.
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:
Note: Code such as the preceding examples belongs in the Actions panel of the Submit button, so it will run when users click Submit._parent.country.value - 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
Now that you know the basics of how to collect the needed data from the Flash controls, you can move forward with sending that data to PHP.
Flash to PHP Using getURL()
Although Flash offers additional techniques for sharing data with server languages such as PHP, Java, ColdFusion, ASP, and so on, this article covers only the most commonly-used techniques: the getURL method and the LoadVars class. To get data to PHP using ActionScript, you can call the getURL method, which loads a page into the browser from a specified URL. The syntax of getURL is:
getURL(url [, window [, "variables"]])
- url—the URL to load.
- window—The window to accept any response from the server, which can be _self (default), _blank, _parent, or _top.
- variables—A string that specifies the HTTP method to use: either GET or POST.
on (release)
{
var request="form.php" +
"?username="+_parent.name.text+
"&useremail="+_parent.email.text+
"&usersex="+_parent.radioGroup.selection.label+
"&usercountry="+_parent.country.value;
var selectedCheckboxes=checkboxArray.join(",");
var listSelection = new Array();
var listLabels = "";
listSelection = _parent.format.selectedItems;
for(j = 0; j< listSelection.length; j++)
{
listLabels = listLabels + listSelection[j].label + ",";
}
request=request+"&checkboxes="+selectedCheckboxes;
request=request+"&list="+listLabels;
request=request+"&observation="+_parent.observation.text;
getURL(request,"_blank","GET");
}
| Author's Note: The preceding code goes in the Actions panel of the Submit button. |
The other common technique for sending data from Flash to PHP uses the LoadVars class, an ActionScript class that exposes three methods for loading and sending data to a server language: load, send, and sendAndLoad.
The send method syntax is:
lv_object.send(url [,target, method])
- url—the URL that receives the data
- target—the window target to accept any answer from the server, which can be _self (default), _blank, _parent, or _top.
- method— A string that specifies the HTTP method to use: either GET or POST.
on (release)
{
var selectedCheckboxes=checkboxArray.join(",");
var listSelection = new Array();
var listLabels = "";
listSelection = _parent.format.selectedItems;
for(j = 0; j< listSelection.length; j++)
{
listLabels = listLabels + listSelection[j].label + ",";
}
sendData = new LoadVars();
sendData.username = _parent.name.text;
sendData.useremail= _parent.email.text;
sendData.usersex= _parent.radioGroup.selection.label;
sendData.usercountry= _parent.country.value;
sendData.checkboxes= selectedCheckboxes;
sendData.list= listLabels;
sendData.observation= _parent.observation.text;
sendData.send("form.php","_blank","GET");
}
At this point, when you click the Submit button, the form delivers the data to a PHP page on the server. Now you need to write the logic. The page form.php (available in the downloadable sample code) extracts the GET (or POST) data from Flash and implements the business logic. For the purposes of this example, it simply returns an HTML table that contains the data received, as proof that the PHP script was able to access the data sent by the Flash form:
<html>
<head>form.php</head>
<body>
<table border="2">
<tr>
<td><strong>Variable Name</strong></td>
<td><strong>Variable Value</strong></td>
</tr>
<tr>
<td>username</td>
<td><?php echo $_GET['username']; ?></td>
</tr>
<tr>
<td>useremail</td>
<td><?php echo $_GET['useremail']; ?></td>
</tr>
<tr>
<td>usersex</td>
<td><?php echo $_GET['usersex']; ?></td>
</tr>
<tr>
<td>usercountry</td>
<td><?php echo $_GET['usercountry']; ?></td>
</tr>
<tr>
<td>checkboxes</td>
<td><?php echo $_GET['checkboxes']; ?></td>
</tr>
<tr>
<td>list</td>
<td><?php echo $_GET['list']; ?></td>
</tr>
<tr>
<td>observation</td>
<td><?php echo $_GET['observation']; ?></td>
</tr>
</table>
</body>
</html>
From PHP to Flash Using LoadVars
Getting Flash data to PHP is fine if you need to display only blank forms, but for most purposes, you also need to be able to set control values in the Flash form from PHP as well. To send data from PHP to Flash you can use the LoadVars.load method. This method detects when a Flash form receives data from an external program. When all the data has been transferred, Flash calls the LoadVars.onLoad method, which represents the success of the transfer using a Boolean value. The syntax of the load method is:
lv_object.load(url)
For sending data to Flash you can use the echo/print PHP methods. For each data item use the following syntax:
&flash_variable_name=$php_variable_name;
<?php
$message='The data values were '.
'received from Flash successfully!';
echo 'Sending to Flash ... ';
echo "&varMessageFromPHP=$message";
?>
myData = new LoadVars();
myData.load("form.php");
myData.onLoad = function(success)
{
if(success)
{
_parent.messageFromPHP.text =
myData.varMessageFromPHP;
}
}
 | |
| Figure 2. PHP Message: The sample Flash form displays messages from PHP in a label control. |
Reading Data from a Text File
Another option for sending data from PHP to Flash is to use a text file as an intermediate data buffer. For example, the following PHP code (fileForFlash.php) generates a text file (data.txt) that contains a set of values to pre-populate the flashForm form. After the stream is closed, PHP loads the flashForm form. Notice how you should generate the file so that Flash can parse it correctly:
<?php
$hf=fopen("data.txt","w");
fwrite($hf,"&username=Mike".
"&useremail=mike@org.com".
"&usersex=Female".
"&usercountry=Spain".
"&checkboxes=PHP,Flash,XML&" +
list=RSS&observation=Just a text".
"&message=The data from file".
"were loaded successfuly!\n");
@fclose($hf);
echo '<object classid=
"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/
shockwave/cabs/flash/swflash.
cab#version=7,0,0,0" width="600"
height="600" id="flashform"
align="middle">';
echo '<param name="allowScriptAccess"
value="sameDomain" />';
echo '<param name="movie"
value="flashform.swf" />';
echo '<param name="quality"
value="high" />';
echo '<param name="bgcolor"
value="#000000" />';
echo '<embed src="flashform.swf"
quality="high" bgcolor="#000000"
width="600" height="600"
name="flashform" align="middle"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage=
"http://www.macromedia.com/go/getflashplayer" />';
echo '</object>';
?>
on(load)
{
myData = new LoadVars();
myData.load("data.txt");
myData.onLoad = function(success){
if(success)
{
//"name" text field
_parent.name.text = myData.username;
//"email" text field
_parent.email.text = myData.useremail;
//"male"/"female" radio buttons
if(myData.usersex == "Male")
{
_parent.male.selected = true;
}
else
{
_parent.female.selected = true;
}
//"country" combobox
for(l=0;l<_parent.country.length;l++)
{
if((_parent.country.getItemAt(l)).label==myData.usercountry)
{
_parent.country.selectedIndex = l;
_parent.country.dispatchEvent(
{type:"change", target:_parent.country});
break;
}
}
//"checkbox1 .. 4" checkboxes
var checkboxes:String = (myData.checkboxes).toString();
if(checkboxes.indexOf("PHP",0) != -1)
{
_parent.checkbox1.selected = true;
}
if(checkboxes.indexOf("XML",0) != -1)
{ _parent.checkbox2.selected = true; }
if(checkboxes.indexOf("Flash",0) != -1)
{ _parent.checkbox3.selected = true; }
if(checkboxes.indexOf("HTML",0) != -1)
{ _parent.checkbox4.selected = true; }
//"format" list
for(l=0;l<_parent.format.length;l++)
{
if((myData.list).indexOf(
(_parent.format.getItemAt(l)).label) != -1)
{
_parent.format.selectedIndex = l;
}
}
//"observation" text area
_parent.observation.text = myData.observation;
//message from PHP
_parent.messageFromPHP.text = myData.message;
}
}
| Author's Note: Paste the preceding on(load) method code in the Actions panel of the Submit button. The on(load) method runs when the Submit component gets loaded. Don't overwrite the on(release) method shown earlier. |
 | |
| Figure 3. Pre-Populated Form: Here's the sample Flash form pre-loaded with data from the data.txt file created on the server with PHP. |
What's in the Sample Code?
You'll find four zip files in the downloadable sample code that implement the techniques discussed in this article.
- Example1.zip sends data from Flash to PHP using the getURL method.
- Example2.zip sends data from Flash to PHP using the LoadVars.send method.
- Example3.zip sends data from PHP to Flash using the LoadVars.load method.
- Example4.zip pre-populates the Flash form using an intermediate text file generated by a PHP page. When the application submits the pre-populated values they are sent to another PHP page.
Octavia Andreea Anghel is a senior PHP developer currently working as a primary trainer for programming teams that participate at national and international software-development contests. She consults on developing educational projects at a national level. She is a coauthor of the book "XML technologies—XML in Java" (Albastra, ISBN 978-973-650-210-1), for which she wrote the XML portions. In addition to PHP and XML, she's interested in software architecture, web services, UML, and high-performance unit tests.