home / tutorials / Loading/Editting/Saving Variables Via Perl And Flash
Tutorial details:
Written by: Jeffrey F. Hill
Time: 30 minutes
Difficulty Level: Intermediate
Requirements: Flash 5, CGI Server Support.
Topics Covered: How to load and edit server-side variables via flash.

Download the source for this tutorial here. (Zipped, PC file).

[Editor's note - For tutorial layout purposes, some of this code has been entered over two lines, where in Flash/CGI it should be over only one line. Such cases are pretty obviously apparent...]

Introduction

The purpose of this tutorial is to not only load variables from a text file into your Flash movie, but also be able to edit and update those variables from that same movie or from a secure administrative area where only you have access.  The only required knowledge for this tutorial is a basic understanding of using actionscript in Flash and access to a server that allows you to run cgi scripts.  Other then that it's just changing a couple variables, cut and pasting, and uploading 2 files.  The basic concept behind this tutorial will make it possible for you to add any number of new interactive features to your website with just a few changes in the code. Here is the online example so you can follow along:  http://www.snowvids.com/PerlTut/PerlWriteVarsToText.html

Included Files:

• UpdateVars.cgi (Perl Script used in example)
• PerlWriteVarstoText.fla (Source Flash File for Example)
• Ex2TextFile.txt (Can be named anything as long as you change the urls and paths to it)
• subparseform.lib (No changes need to be made to this file - It just contains a subroutine for parsing the data from the Flash Movie)

Part I - Setting up the Perl script

The hardest part of using a cgi script is the setup and getting all your paths correctly.  I'll attempt to explain all this in as much detail as I can.  Along with some common errors that you can make, and how to avoid them.  First you'll have to change a couple things in the actual Perl script. You should only have to change Line 15 and possibly Line 1.  (for example purposes line numbers were included below- In the actual script these should not be included): 

The script (That's it! not so bad huh):

1)  #!/usr/bin/perl
2)
3)  require "subparseform.lib";
4)  &Parse_Form;
5)
6)  $Title = $formdata{'Title'};
7)  $Contact = $formdata{'Contact'};
8)  $About = $formdata{'About'};
9)  $News = $formdata{'News'};
10) $Products = $formdata{'Products'};
11) $Link = $formdata{'Link'};
12)
13) @New =  ("Title=$Title&Contact=$Contact&About=$About&
Products=$Products&News=$News&Link=$Link");
14)
15) open (LOG, ">/usr/home/userName/public_html/PerlTut/Ex2TextFile.txt")
 || &ErrorMessage;
16) print LOG "@New";
17) close (LOG);
18)
19) print "Content-type: text/html\n\n";
20) print "Status=Success - Your Comments have beed updated. Please
 return to the main area to see the results";
21)
22) sub ErrorMessage {
23) print "Content-type: text/html\n\n";
24) print "Status=Connection Failed Please Check the path to the text File";
25) exit; }

Open up the attached Perl Script called "UpdateVars.cgi" with notepad or any other text editor.  

Line 1 - The first line contained in the script is called the shebang line.  You will notice that it has a # symbol followed by a ! symbol.  All other occurrences of the # symbol indicates a comment in a perl script.  The first line is a special case though.  It indicates the Path to a program on the server which can execute the script - Do not indent this or put it anywhere else other then the first line.  The program in most cases is something like Perl.exe.  Don't worry about that part though. Just make sure that the path is correct.  The most common path to perl is #!/usr/bin/perl On different types and different setups of servers it may be different however.  If your using an online host they should have the path to perl listed in their online documentation.  Change this line to reflect that path.

Line 3 - of the code includes the library file "subparseform.lib" into the context of the script.  All that is listed in this file is one subroutine that parses the incoming data.  You will never have to make any changes to the subparseform.lib file - It will work for any variable you can think of.  

Line 4 - Just includes a subroutine from the "subparseform.lib" file.  There is only one subroutine in this file. You can include as many others though, and use them in the script in the same fashion.  As your scripts become more complex this is an easy way to keep track of everything.  

Lines 6 to 11 - This just puts the incoming variables from the Flash movie into a form that you can work with.  It uses a function from the included "Parse_Form" subroutine.  Don't worry about this part it works - If you want more or less variables just use the same syntax and it'll work.

Line 13 -  This collects the variables and enters them into an array.  The most important thing to realize is the format their in.  They have to be listed as - FlashVariableName1=Value1&FlashVariableName2=Value2 etc. Flash can only read variables in from a text file when their in this format.  For this example it is really not necessary to enter the variable string into an Array.  You can accomplish the same thing later in the script by just printing the string to the log.  The only advantage of putting them into an array is that if the script gets more complex later on this is an easier method.

Line 15 - Opens up a log File for writing to.  This is indicated by the > symbol (If you just want to read from the log file use the < symbol or if you want to append to the data already in the text file use the >> symbol).  The path contained on this line is the most important thing you'll have to change.  This has to be the absolute path to the text file you wish to load the variables from in Flash and also to edit/update.  The easiest way to find the absolute path to the file on your server is to look at the path displayed when you use an ftp program like ws_ftp or CuteFTP and ftp to the directory in where you text file is located.

Line 16 - Prints out the variable string entered in the array to the text file.  This writes over the existing data. Basically after you've opened up the log file (in this case the text file) for writing it just prints out the new data over the existing.

Line 17 - Closes the Log.

Lines 19 and 20 - Prints out a success message which is read by the Flash movie when the script is done executing.

Lines 22 to 25 - This is just an error message that you will get if the script was unable to open the Text file for writing to.  Just an easy way to check to see if the scripts working.

Part II - Uploading your Perl script and changing Permissions

Upload

 1) Upload the the files "UpdateVars.cgi" and "subparseform.lib" to your cgi-bin on your server.  IMPORTANT: these must be uploaded in ASCII mode.  They will Not work if you upload them in binary mode.

2) Upload your Flash swf and the text file "Ex2TextFile.txt" in Binary mode to any directory you want.

Changing the Permissions of the uploaded files on your server

You need to change the permissions of the files "UpdateVars.cgi" and "Ex2TextFile.txt".  The easiest way to do this is by using telnet to log-on to your account.  Their are other ways but this is the most basic - others may be easier but it would be impossible to explain them all (ask your host how to change permissions if you are having trouble with this).  Once you have successfully entered your login name and password you will see the shell prompt.  You must then use the CD (Change directory) command to get to your cgi-bin.  You can then list all the files in that directory by typing in ls - this will list the files located in that directory.  You can type in ls -l to list all the files plus their permissions in that directory.   In most cases it will be something like this:

%cd public_html
%cd cgi-bin
%ls -l
total 2
-rwxr-xr-x  1 Jun 24 15:30 UpdateVars.cgi
-rw-rw-r--  1   Jun 24 15:00 subparseform.lib
% 

I don't want to go into all the details on setting the file permissions so I'll just tell you what you need to do for this script. You need to change the permissions to 755.  You can do this with the following command.  

%chmod 755 UpdateVars.cgi

You also need to change the permission of the text file "Ex2TextFile.txt". To do this follow the same procedure as above. Use the CD command to get to the directory where this file is located.  Change the permissions to 777. This allows you to write over the file with a cgi script.  You can use the following command.

%chmod 755 Ex2TextFile.txt

Part III - Setting up the Flash Movie to work on your server

Basic Theory and Necessary Changes for the Flash Movie

The first thing the Flash movie does is load the variables contained in the text file that you have already uploaded.  In this example the actionscript for doing that is located in one of the first frames of the movie.  Here is the example code: 

loadVariablesNum ("http://www.snowvids.com/PerlTut/Ex2TextFile.txt?Ran="
+random(999), 0);

You will have to change this in the Fla (It's clearly marked when you open it up) to the url path where the text file is located on Your server.  In the example movie this Frame ActionScript is located on frame number 10 in the first layer.  After you have changed this in the example Fla you can run it on your server and it will load the default values in the text file into your movie.  One not on the above ActionScript - Notice the ?Ran="+random(999) portion, this just adds a random number onto the end of the text file so that the browser loads a new file each time, ie it's not in the cache.  The default values are shown below.

Title=Default Title&Contact=jfhill1@aol.com&About=About Default&
News=Default News&Products=Default Products&Link=http://www.snowvids.com

In the movie there are dynamic text fields with variable names corresponding to what you see in the text file.  For example the text field named "Title" will have the value "Default Title" when you load the variables from the text file and so on.  If this part is not working you don't have the url path set correctly.  This part will work independent of the Perl Script. 

Edit / Update Variable Values

There is a link from the example movie to this part of the movie.  In most cases however you will not want everyone editing your movie.  You can avoid this by either making it a secret spot within the movie, have this area password protected or make the Edit/Update part of the example into it's own movie - that only you know the path to.  The last way is probably the best and easiest way. 

The update/Edit area contains the same text fields with the same name as the 1st part, with the exception that they are now input fields instead of dynamic fields.  

You only need one button to update/Edit the text file.  This button contains the ActionScript

on (release) {
loadVariablesNum ("http://www.snowvids.com/cgi-bin/UpdateVars.cgi",
 0, "POST");
Status = "Updating Variables - Please Wait till you see 
the Update Success Message";
gotoAndPlay (35);
}

You need to change the url Path to the url path to "UpdateVars.cgi" on your server.  This will execute the cgi file and update your text file.  The Status variable is just something extra I put in to tell the user when the update process begines.  The cgi file will pass back a variable to tell you when it's Complete.

Conclusion

That's it.  There's really not that much to it.  Just make sure you've got all your paths and permissions set correctly and the rest is already done.  It's not as hard as it sounds. Just takes a couple hours getting familiar with it, then after that you'll be able to alter this example to accomplish almost anything.   One more step in making your flash movie truly interactive and dynamic.

-Jeffrey F. Hill
www.snowvids.com

http://www.snowvids.com/PerlTut/PerlWriteVarsToText.htm