Parsing
External Array Data
        by kirupa  |  14 June 2005

There are several tutorials in this site that cover how to load data from an external location. But, there are no tutorials on this site that discuss how to format and process your data for any use greater than displaying them as a string in a textField.

Unlike XML data which can be formatted extensively in Flash using Flash's own built-in accessors, the data I will focus on will be for less structured output that you would encounter most when loading variables from a text file or simple PHP scripts.

The following URL is an example of data that you will import into Flash: http://www.kirupa.com/developer/mx2004/pg/files.php Beyond just importing the data, I want to take the series of filenames produced by the above PHP file and store those individual filenames in an array in Flash.

The data from the above URL is a series of images separated by a comma, and all of that data is assigned to the variable, filelist. If you use a simple LoadVars call, the data will be displayed as a string by default. A string is great for simply displaying data, but it doesn't help us when we are trying to organize our data in some way.

What we need to do is take our string and separate it into values that can be stored in an array for use in Flash. Let's do that! First, create a new animation in Flash, and copy and paste the following code into the first frame of your animation:

files = new Array();
lv = new LoadVars();
lv.onLoad = function() {
fl = this.filelist;
files = fl.split(",");
c = files.length-1;
for (i=0; i<c; i++) {
trace(files[i]);
}
};
lv.load("http://www.kirupa.com/developer/mx2004/pg/files.php");

Press Ctrl + Enter to test the movie within Flash. Notice that the long list of data you saw from visiting the earlier URL is now broken down and displayed individually in your Flash Output window.

The format of the code should be familiar to you from the earlier external data tutorial, so I will only focus only the portions that are directly relevant to this tutorial:

fl = this.filelist;

If you recall, our data from the PHP file is stored in a variable called filelist. Therefore, this.filelist contained inside the onLoad function stores all of that data, which I assign to the fl variable.


files = fl.split(",");
In this line of code, I take the text data from our fl variable and convert it into an array by using the split function. The split function, in our case, takes in the argument for a character or string that determines where to split our data. Since our data is separated by a comma, I enter a comma into the split function.

I store the array from our split function into the new array variable called files. Notice that I declare the variable files as an array above our loadVars() function.


c = files.length-1;
I am getting the length of our files array using Flash's length function. I am ignoring the last item in our array, for its value is 'null'. You will see why it is null in the PHP code explanation below.
for (i=0; i<c; i++) {
trace(files[i]);
}

This line of code is simply a for loop that I use to demonstrate that data from our text-based PHP script is indeed being parsed and displayed individually in Flash. I trace the individual elements in our array using the representation of the index position, the variable i.

Ideally, you would use your own variation of code to access the data from your array for more useful purposes besides simply tracing to the Flash output window.

 PHP Code for Displaying Files in a Directory
The PHP file I used (files.php) retrieves all the files from a directory and outputs them in the variable=[data1,data2,data3,...,dataN] format you have seen earlier.

The code for the PHP file is:

<?php
if ($handle = opendir('.')) {
echo "filelist=";
while (false !== ($file = readdir($handle))) {
$ext = substr(strrchr($file, "."), 1);
if ($file != "." && $file != ".." && $ext == "jpg") {
echo "$file";
echo ",";
}
}
closedir($handle);
echo "null";
}
?>

The code is largely based on Example 2 from the PHP documentation: http://www.php.net/manual/en/function.readdir.php. The only difference is that I added an $ext value that filters based on file extension, and I added some echo commands to format our data in the way we need it to be formatted.

Flash does not look at the actual PHP code when you call the php file. It only cares about the output, so it's valid to trick PHP into producing output with echo commands that looks just like the type of data Flash can easily understand.

If you are interested in displaying all of the files, simply remove the $ext command from the if statement, or if you are interested in showing files of another extension, replace "jpg" with another extension.

Finally, I must elaborate on why I an echo a null value at the end of our data. Notice that I am adding a comma after each file name that the script outputs. The problem is, after the last file name is output, a comma is displayed again.

Your data would look something like this:

variable=[data1,data2,data3,...,dataN,]

Notice the comma after dataN. Therefore, by adding a null value, I avoid having a leading comma with not data following it. I safely ignore the null value by counting all of the items except the last value in Flash.

That is all there is to this tutorial. The main thing I want you to understand is that Flash only cares about the final output of the data you are loading. It does not have a way of actually accessing the underlying code that makes up your cgi/php/etc. scripts. To Flash, a PHP file is the same as TXT file.

What complicates your job is to ensure that the output produced by the scripts is in a form that Flash can read. The variable=[data1,data2,data3,...,dataN] format is great for storing the variable information as an array. Since Flash loads the data as a string, you can use all of Flash's string manipulation functions to process that data, and that is what we did!


Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

Kirupa's signature!

 

 




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.