Macromedia Flash Professional 8 UNLEASHED [Electronic resources] نسخه متنی

PHP and FlashReceiving Data

As stated before, integrating Flash with PHP will allow us to create some pretty dynamic applications. We aren't quite there yet, so let's start with some simple examples of how Flash can receive data from PHP.

Example 1Hello World

In our first example we will use the most common of examples, displaying the text Hello World. Here our PHP file will already contain the variable and send it to Flash to be displayed. Create a new PHP file, save it as

helloWorld.php , and paste the following script inside:

<?php
echo "myVariable=Hello World";
?>

See a difference? In this example, not only are we displaying "Hello World," but we are saying that it is the value of "myVariable." The reason for this is that Flash will understand only the data in the name/value pair format. Now that we have the PHP script created, let's move on to our Flash file.

//Create a text field
this.createTextField("display_txt",1,0,0,100,20);
//The LoadVars object for loading the data
var hello_lv:LoadVars = new LoadVars();
//When the LoadVars object receives the data
hello_lv.onLoad = function(success){
if(success){
display_txt.text = this.myVariable;
}else{
trace("An error has occurred.");
}
}
//Load the PHP
hello_lv.load("http://PATH_TO_YOUR_SERVER/helloWorld.php");

Walking through the ActionScript, we can see that we have created a dynamic text field in the top-left corner of the canvas. We then create an instance of the LoadVars object, which will be used to connect to the PHP page and receive the data. The onLoad event is then created to tell Flash what to do when the requested data is returned. In it we test the value of success to see if there were any issues connecting to our PHP page. If success returns true, it will write the myVariable value to our text field, and if not it will display "An error has occurred" in the Output panel. Now all we have to do is make the request using the load method by passing it the full path to your helloWorld.php file.

Publish your movie, and if you run the generated SWF you should see the following result, as shown in Figure 22.1:

NOTE

When you are using PHP with Flash, we recommend using an absolute path to access your PHP files. This ensures that no matter where your Flash files are on the server, you can still access the PHP files. In the preceding example, as well as in the following examples, you will need to change "PATH_TO_YOUR_SERVER" to the actual path to your PHP scripts. You may be working from the root of your server or within a directory, so customize the paths respectively.

Example 2Hello, Goodbye World

In this example we will be passing two variables instead of one. These variables will be displayed in different text fields.

<?php
echo "myVariable1=Hello World&myVariable2=Goodbye World";
?>

//Create a text field
this.createTextField("displayHello_txt",1,0,0,100,20);
this.createTextField("displayGoodBye_txt",2,0,40,100,20);
//The LoadVars object for loading the data
var hello_lv:LoadVars = new LoadVars();
//When the LoadVars object receives the data
hello_lv.onLoad = function(success){
if(success){
displayHello_txt.text = this.myVariable;
displayGoodBye_txt.text = this.myVariable;
}else{
trace("An error has occurred.");
}
}
//Load the PHP
hello_lv.load("http://PATH_TO_YOUR_SERVER/helloGoodbye.php");

Walking through the ActionScript, you can see that we are now creating two dynamic text fields in the top-left corner of the canvas, 20 pixels apart. Notice that we place them on separate levels; otherwise, the next field will wipe out the preceding field. After success returns true, we will write the two variables we have received to their respective fields. Now all we have to do is make the request using the load method by passing it the full path to your helloGoodbye.php file.

Publish your movie, and if you run the generated SWF, you should see the result shown in Figure 22.2:

Example 3Multiple Values and Multiple Variables

In this example, we will work with multiple variables, like example 2. The difference is that the variables in this example will have multiple values. Instead of using a name/value pair for each variable, we can place multiple values into one variable.

In this example we have three people. Each person has a name, age, and weight. If we did this with individual variables it would take a total of nine variables. Instead we pass three variables, one for name, one for age, and one for weight, and let Flash do the work of parsing the values. Create a new PHP file, save it as

multipleValues.php , and paste the following script inside:

<?php
//Arrays that hold the values
$personName = array("Rick", "Jane", "Andy");
$personAge = array("12", "13", "11");
$personWeight = array("115", "103", "105");
//Loop through the array and store the values in new variables
for($i=0;$i<count($personName);$i++){
$sentName .= $personName[$i] . "~";
$sentAge .= $personAge[$i] . "~";
$sentWeight .= $personWeight[$i] . "~";
}
//Write the results to the screen
echo "sentName=$sentName&sentAge=$sentAge&sentWeight=$sentWeight";
?>

Because we are working without a database, our information is currently stored in arrays. We cannot pass these arrays directly to Flash, so we loop through them and store the data as a string into new variables, separated by the tilde (~) character. Finally, we write the information to the browser. If you test this page alone on your server, you should see what is shown in Figure 22.3:

Now we can move on to the Flash component of this example. We need to create a file that will draw this data in, parse it back into arrays, and then write it to the text fields we create.

//Create the text fields
this.createTextField("name_txt",1,20,20,100,100);
this.name_txt.multiline = true;
this.name_txt.border = true;
this.createTextField("age_txt",2,130,20,100,100);
this.age_txt.multiline = true;
this.age_txt.border = true;
this.createTextField("weight_txt",3,240,20,100,100);
this.weight_txt.multiline = true;
this.weight_txt.border = true;
//The LoadVars object for loading the data
var multipleValues_lv:LoadVars = new LoadVars();
//When the LoadVars object receives the data
multipleValues_lv.onLoad = function(success){
if(success){
var name_array = this.sentName.split("~");
var age_array = this.sentAge.split("~");
var weight_array = this.sentWeight.split("~");
//Because of the extra "~", there is an extra element
//so we only need every element, but the last one
var tempLength = name_array.length - 1;
for(i=0;i<tempLength;i++){
name_txt.text += name_array[i] + newline;
age_txt.text += age_array[i] + newline;
weight_txt.text += weight_array[i] + newline;
}
}else{
trace("An error has occurred.");
}
}
//Load the PHP
multipleValues_lv.load("http://PATH_TO_YOUR_SERVER/multipleValues.php");

The ActionScript for this example is slightly different from the previous examples. First, we create the text fields, but because they are going to be holding multiple strings, we make them multiline. We also give them a border so we can see their size and placement. Next we use the LoadVars object, but the difference is how we handle the data that is returned. First we create three arrays and store the incoming data into those arrays by splitting the values based on the ~ character. Then we look through the arrays and populate the text fields with the values returned. Finally, we call the PHP page to get the process going. If you test the movie, you should see the results shown in Figure 22.4:

As you can see, it's easier to store multiple values into a single variable and allow Flash to parse that data, instead of handling individual variables for each value.

Example 4Sending Mail with Flash and PHP

The first three examples have no real-world application, but they give you a basis for understanding how to integrate Flash and PHP. This next example will show you how to send a simple email using Flash as the interface and using PHP to process the email. Create a new PHP file, save it as

sendMail.php , and paste the following script inside:

<?php
//Get the external variable
$destMail = $_REQUEST["destMail"];
$senderName = $_REQUEST["senderName"];
$senderMail = $_REQUEST["senderMail"];
$senderSubject = $_REQUEST["senderSubject"];
$senderBody = $_REQUEST["senderBody"];
//Add header information
$header = "From: $senderName <$senderMail>\n";
$header .= "Reply-To: $senderName <$senderMail>\n";
//Send Email (to, subject, body, header)
mail($destMail, $senderSubject, $senderBody, $header);
?>

As you can see, the script is very straightforward. This page will first accept the five variables passed to it:

• destMail
  Destination email address

• senderName
  Name of the sender

• senderMail
  Email address of the sender

• senderSubject
  Subject of the email

• senderBody
  Body of the email

Then we format the header information for the email (the sender's name and email address) and use the mail function to send the email. Now we can move on to the Flash part of this example. We need to create a file that will allow a user to enter in the five pieces of information and submit them to the page we just created.

You may format, label, and color your file however you like. Your basic layout should look, in some way, like Figure 22.5 :

Now that we have our interface laid out, we need to do two things. First, we need to create a way that the Submit button will not pass the variables unless all the text fields are filled out. Second, we need to write the actual script to pass the information from these text fields to the PHP script. In the Actions panel of the first frame, place this code:[View full width]

//Add a listener to make sure fields are filled
//If all fields are filled enable button
fieldsFilled = new Object();
fieldsFilled.onKeyUp = function(){
if(destMail_txt.text != '' && senderName_txt.text != '' && senderMail_txt.text !=
'' && senderSubject_txt.text != '' && senderBody_txt.text != ''){
send_btn.enabled = true;
} else {
send_btn.enabled = false;
}
}
//Apply the listener, and disable the button on init
Key.addListener(fieldsFilled);
send_btn.enabled = false;
//The object for communicating with the PHP page
var sendMail_lv:LoadVars = new LoadVars();
send_btn.onRelease = function(){
//set the variables we are sending
sendMail_lv.destMail = destMail_txt.text;
sendMail_lv.senderName = senderName_txt.text;
sendMail_lv.senderMail = senderMail_txt.text;
sendMail_lv.senderSubject = senderSubject_txt.text;
sendMail_lv.senderBody = senderBody_txt.text;
//send and receive the data
sendMail_lv.sendAndLoad("http://PATH_TO_YOUR_SERVER/sendMail.php", sendMail_lv, "POST");
}

In the preceding code, we start with the field requirements. Because we need all five pieces of the information, we create a listener (fieldsFilled) that checks to see whether all field fields are not empty. If they all contain some sort of text, then send_btn is enabled. We then create the LoadVars object (sendMail_lv) that we will use to pass the variables. Then we create a function and attach it to the onRelease event of send_btn. This function grabs the values of the five text fields, places them in the LoadVars object, and then calls the sendAndLoad event to pass the data to our PHP page.

Now that you have a good understanding of how to send data to PHP from Flash, let's work on PHP sending some data back to Flash.