PHP and FlashReceiving Data | Macromedia Flash Professional 8 Unleashed

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 new Flash file, save it as helloWorld.fla, and save it to the same directory as helloWorld.php on your server.

In the Actions panel of the first frame, place this code inside:

 //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:

Figure 22.1. The result of our "Hello World" example.

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.

Create a new PHP file, save it as helloGoodbye.php, and paste the following script inside:

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

As you can see, the PHP script is identical to example1 except for one small thing: We are now passing two variables instead of one. To pass numerous variables, we place an ampersand (&) between the name/value pairs.

Create a new Flash file, save it as helloGoodbye.fla, and save it to the same directory as helloGoodbye.php on your server.

In the Actions panel of the first frame, place this code:

 //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:

Figure 22.2. The result of our "Hello, Goodbye World" example.

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:

Figure 22.3. Data written to the browser.

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 a new Flash file, save it as multipleValues.fla, and save it to the same directory as multipleValues.php on your server.

In the Actions panel of the first frame, place this code:

 //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:

Figure 22.4. The text fields populated with the parsed data.

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.

Create a new Flash file, save it as sendMail.fla and save it to the same directory as sendMail.php on your server. Create five text fields and place them on the canvas, aligned vertically.

The first field should have the following properties:

Type Input
Show border around text true
Font size 12
Instance name destEmail_txt

The second field should have the following properties:

Type Input
Show border around text true
Font size 12
Instance name senderName_txt

The third field should have the following properties:

Type Input
Show border around text true
Font size 12
Instance name senderEmail_txt

The fourth field should have the following properties:

Type Input
Show border around text true
Font size 12
Instance name senderSubject_txt

The fifth field should have the following properties:

Type Input
Show border around text true
Font size 12
Instance name senderBody_txt

Create a button symbol and place it below the text fields. The button should have the following properties:

Instance name send_btn

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

Figure 22.5. The mail interface laid out and labeled.

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.