This site is now just an archive over the rise and fall of Flash. The domain is available for sale
Login | Register

Flashmagazine backend - How to integrate backend systems into Flash.

In this tutorial I will show you how the Flashmagazine news system works and teach you how you can make a simular application for your Flash powered web site.

April - 2001, Jarle Dahl Bergersen I will show you how to tap into the power of content delivery systems, without having to pay an arm and a leg for expensive software.

Althought there will be a brief peek into PHP and other server scripting languages, this tutorial mainly focus on how you can get data into your Flash movie, and what limitations apply to sending and reciving data from your Flash movie.

The "secret" weapon we are going to use is the loadVariables function. All code is shown as Flash 5, but the source file will work with Flash 4 and 5.

This is the magic command that allows us to send and retrieve data with Flash. It gives you choices for retrieving and sending data, including which level or movie clip to load the data into and whether you should send data with HTTP POST or GET..

Lets take a look at the loadVariables syntax:

loadVariables (url ,location [, variables]);

url is the full or relative url (relative to the folder in which the swf resides) to where the file we want to retrieve or send data to exist. location is the level or target where you want incoming data to end up. variables is optional and used to specify how to send data, either with the POST or GET method. When sending data, you need to send the data to a server side program that can read the data and do something useful with it. A good example might be a normal form processing CGI script that takes data sent to it through a POST and sends it to a pre-defined e-mail address, or store it in a file on the server.

There are issues you need to be aware of when using the loadVariables function in Flash:

Flash uses the browser to send/retrieve data. So the security restrictions of the browser applies when retrieving or sending data.

The browser will stop loading or sending data from other domains than the domain your swf file resides on. That is the reason you would get null result trying to load a text file residing on from a Flash movie located on your web server via the loadVariables function.

Thats the bad news, the good news is that there are ways to get around this security "roadbump". Look at page 8 of this tutorial for some server scripting ways of loading in files from other domains.

The loadVariable "data format".
To be able to load data into Flash, you need to have a file/script output formated in a special way. (Not taking into consideration the new XML features of
Flash 5, we will cover that in another tutorial). Lets take a quick look at how the text file/output should look like. (use the zoom function if you can't read it).

ID1=139&head1=May 1 ReBoot&ingress1=In case you've been living under a rock for the last few months, the May 1st ReBoot kicks off today at 2PM GMT.&body1=Over 1600 sites are participating so we can look forward to some inventive (and probably some gratuitous) use of Flash. &urltext1=Go reboot&url1= As Activism&arcswfurl1=art026.swf&total=1

The ID1= , head1= etc, are declarations of variables. What they do is assign a value to the variables ID1, head1, etc. When the text file/script output is loaded into the Flash file, these variables will be available in the movieclip/level that we specify in the location argument of loadVariables.

See all the strange characters in our file? Our data has been url encoded so that the information can be sent through a GET action, and all the strange characters have been generated by a function in our PHP script.

Flash does the same thing when sending data. You won't need to do anything about it if you are just sending data back and forth between Flash files, but you might need to do something about it if you are going to use the data for HTML or other uses later on. Most scripting languages have functions that can take care of this for you.

At the end of our file/script output we always either include a variable called "total=n" (where n=number of news stories) or "eof=true". We do that because it is the only way to check that we have actually been able to load the whole text file.

Flash 5 have a function you can use on the movieclip you use to load the data into Flash called onClipEvent(data). While it will let us know that we have started to get the data loaded into our Flash movie, it will not give us information to wether all the data was really received. So its a good idea to always make sure to add an "end of file" variable at the very end of your data, and then use a loop within your Flash movie to see that you really got that variable loaded into your movieclip. like "eof=true".

Example: The nitty-gritty of how to do the loading of data in Flash:
In our example we have a text file filled with data, and we want to load it into the movieclip where we start the loadVariables function from.

We will use a text version of some old news from Flashmagazine for this example: news.txt (click to download it)

It contains the 5 latest news stories, with ID, heading, ingress, body, url and urltext. Take notice that everything is on one line, there are no return carriages either before or after the line. This is the way Macromedia recommends the file to look like when loading data into your Flash movie with loadVariables.

Lets look at how we get the file, from the same folder as the Flash file on the server, into our Flash movie. (You can do this either on the main timeline, or by creating a new movieclip).

In first frame insert the following ActionScript:

 loadVariables ("news.txt", "");
timeOut = getTimer();

The timeOut variable is used to abort after a while if the file doesn't load.

If you are not using the expert mode, you will need to find loadVariables from the ActionScript menu, input news.txt in the URL field, and set it to use target (instead of level) without any value, that way the data is loaded into the location you are in. (Main time line, or the movieclip you make to include the data).

Remember that the data will remain, so if you later decide to send data from the same movieclip / main timeline you will send the data already in the target area along with it. Therefor it may be a good idea to make a movieclip to load the data into, to avoid unnecessary cluttering.

By using targeting in the target window of loadVaribles you can have the data end up anywhere else you want in your flash movie.

For Flash 4 - go to the ActionScript tab after double clicking the frame - then choose "Load/Unload movie" from the actions list, select Action "Load variables into location", enter news.txt in the url field, and choose "location: target" and leave the target window empty).

Next add a couple of frames to your timeline, and then insert a new keyframe. Label the keyframe loop1 and then add a couple of more frames (I usually prefer adding enough frames to be able to read the labels later on - for easier debugging and overview), and add another keyframe. Choose what is now the third keyframe in the timeline, label it "check" so that you can find it later, and enter the following ActionScript:

if (total ne "") {    
gotoAndPlay ("showData");
} elseif {
getTimer()>(timeOut 15000);
gotoAndPlay ("noData");
} else {
gotoAndPlay ("loop1");

What we are doing here, is checking to see if the total is not equal to "" (nothing). This will only happen if the variable has been filled with its value
from the text file we are loading.

If it has been filled, we go to the label "showData", the next keyframe in our movie. But if its still not loaded and our timeOut limit hasn't been reached, we go back and wait for the file to finish loading. We use the timeOut variable because should the file for some reason fail to load, the loop would get stuck, so we have to implement a timeout for the loading.

In the next frames we add the label "showData" where we will show the data that has been collected. We have 5 dynamic text fields showing the heading and 5 dynamic text fields showing the ingress for each of the stories we collect from the text file. They are named head1, ingress1, head2, ingress2... etc. Download the example file at the end of this tutorial to see it in more detail. We also a "showStory" label where we show each of the stories on their own, including the body of the story selected.

The last label "noData" and keyframe is used to display an error message / load failure page where we inform the user that we were not able to load the data, and give the user the option to try again.

There are many ways of enhancing the way we display the data, including dynamic scroll functions, better ways of displaying varying lengths of text etc. But we will leave that to you to figure out how to enhance it in Flash 4 or 5.

Sending data from Flash
When using the GET / POST method to send data, you will also receive whatever output the script you send data to returns, as long as it is in the correct format (as discussed on page 3). This will allow you to use a single script to return a selection of different data back into your Flash movie, depending on the data you send to the script on the server.

You can also use POST (and sometimes GET) to send data to cgi-scripts that already takes care of HTML forms, make sure to set the variables needed for the form script. (In HTML you would usually defined with them with the tag).

Workaround for the security roadbump in loadVariables:

Other than the obvious method of doing server based HTTP requests to get the off-domain data through your server (there are functions for this for PHP, ASP and Perl), there is another way of fooling the browser into sending you the data of an external file: Here is code examples for ASP and PHP:

Response.Redirect ("")


The FLA/news.txt files:
The fla file is in Flash 4 format, but will convert painlessly to Flash 5 when imported in the Flash 5. There are some extra features that can be used with Flash 5, including HTML in the text fields.

loadVariables.fla (press to download)
news.txt (press to download)

Look at the FLA source code, publish the swf file. And make sure to have both the swf file and news.txt file in the same folder either on your computer or web server when testing.

Some good resources:
Wired Webmonkey PHP Tutorials
Some good tutorials to get started with PHP and also includes a little information about MySQL.
The official PHP site, here you will find a very good online manual of PHP, with user notes and discussions. A good place to learn more about PHP.
A collection of good Flash tutorials. Including a few on Flash/server backend implementations.


Get new stories first

Click to follow us on Twitter!



No comments for this page.

Submit a comment

Only registered members can comment. Click here to login or here to register