Macromedia Flash MX and PHP
Communicating with PHP (or any other server-side script) from Macromedia Flash has become much easier with the introduction of the LoadVars object in Macromedia Flash MX. Here's a sample in which I use a MySQL database (containing friends' e-mail and phone information and a picture and caption if we have one), a PHP script to access that information, and Macromedia Flash to present it. I'll go through each of the steps I went through to create it.
A dynamic address book
Before we begin building the address book, try clicking the A, B, and C tabs below to see how the requested information appears in the main window.
Requirements
To complete this tutorial you will need to install the following software and files:
Windows source files
fmx_loadvars.zip (27K)
Setting up the MySQL database and PHP to access it
The first thing to do in any database application is define the structure of the data. In this case, I created a new MySQL table with these fields:
- contact ID, smallint, primary key, auto_increment
- lastName, tinytext
- firstName, tinytext
- phone, tinytext
- email, tinytext
- picFile, tinytext
- caption, tinytext
and then populated the field manually with statements like these:
insert into contacts values (NULL, 'Anderson', 'Lois', '301-424-5555', 'lois@yahoo.com', 'lois.jpg', 'Lois, 2001');
It's a small table; for a larger table, it would make more sense to populate the table by reading in a text file with the information.
To make sure the table is accessible via PHP, I used this sample code to test it:
<?php
mysql_connect("servername","username","password");
mysql_select_db("databasename");
$qr = mysql_query("SELECT * FROM contacts");
$nrows = mysql_num_rows($qr);
for ($i=0; $i < $nrows; $i++) {
$row = mysql_fetch_array($qr);
echo $row['lastName'].", ".$row['firstName']."<br>";
echo " ".$row['phone']." ".$row['email']."<Br>";
echo " ".$row['picFile'].":
".$row['caption']."<Br><Br>";
}
?>Setting up the Macromedia Flash movie
To display text in a Macromedia Flash movie, you need a text field (or several text fields). You can either create one dynamically, using createTextField, or set one up in the movie, give it an instance name and use that. I chose the latter for this sample. The main text field has instance name "content" (you can find it in the "text field & scrollbar" layer of the FLA) and is set to multiline with the "Render text as HTML" option selected, so that you can include links in it.
Adding the scrollbar
Because you are going to put all of the address records for a given letter of the alphabet into one field, you have to make it scrollable in case there are more entries than fit in the size allotted. To do that, open the Components panel and drag a copy of the scrollbar into the text field. It automatically snaps into place and is automatically associated with instance "content". Piece of cake.
Set up movieclip to hold a JPEG
Another thing you need in the movie is something to hold the JPEG you're going to load in. To do that, create a placeholder movie clip (in layer "pic, caption" of the FLA) and give it the instance name "picHolder". In the same layer, include another text field (also multiline, but not HTML) with instance name "caption".
Set up tabs as button movie clips
Because all of the tabs have the exact same function but a slightly different appearance, you can use the new button movie clip feature in Macromedia Flash MX to make them. That is, you'll create a template tab that is a movie clip, copy it for as many tabs as you need and set up code to put the right letter on the tab and attach the right handler to the tab to make it respond to a mouseclick.
Each tab movie clip contains a text field "letter". Each tab movie clip also has an onRelease function assigned to it to tell it what to do when it's clicked. In order to perform the right action, though, you need to know which tab you're accessing. To do that, name the tab movie clips in a way that allows you to find out which one is currently being clicked. The A tab is given instance name "tabA", the B tab "tabB", etc. Keeping that information in mind, here is the code (in frame 1 of the main movie) that sets up your three tabs correctly (so that they display the right letter and act correctly when clicked):
for (var
i=65; i<=67; i++) {
// display the correct letter on the tab
this["tab"+chr(i)].letter.text = chr(i);
// when this tab is clicked
this["tab"+chr(i)].onRelease = function() {
// can't use chr(i) here -- must use mc name
// because i will not be set when the event actually happens
c.thisLetter = this._name.substr(3,1);
bigLetter.text = c.thisLetter;
content.htmlText = "Loading data for " + c.thisLetter;
// scope of this function is main timeline so can refer to c directly
c.sendAndLoad("flashmx_dbPassAndReturnString.php",c,"POST");
}
}For each letter A–C, assign that letter to the "letter" text field on the tab. Also for each letter, assign a routine that does the following when the tab is clicked:
- Puts the letter associated with the selected tab into property "thisLetter" of object c, a LoadVars object, which I'll discuss on the next page.
- Displays the selected letter as a background image in the address book.
- Informs the user that we're busy getting the information from the database.
- Starts the transfer, using LoadVars object c to pass data.
Remember, these things are not being done in the main movie; they are being set up as instructions to be carried out when a tab is clicked. Now you need to set up the LoadVars object itself, as well as the actions that will be performed when data is returned from your PHP script. The next section explains how to do that.
