Today everybody has or wants a Flash site. Flash has very cool features and capabilities but we have to acknowledge the downside to creating a Flash only website. Users who do not have the Flash plug-in such as Lynx (Linux shell browser) users or people who didn't care to upgrade the plug-in cannot view the content on a site unless it has a non-Flash HTML version along side the crazy cool Flash version. Even if you have the plug-in, you might not want to wait for the entire Flash site to load every time you visit the site. Your reason could be that you need information fast or you have a slow Internet connection. Lets face it, even today everyone does not have broadband. And in the evenings cable modems are slow as well. So we should have HTML versions of our Flash site. This is obviously useless if the site is promoting Flash content.


Why do we need a tutorial for this?

Well, the easy way to do this is to build an HTML site. But then each time you update content you would need to modify the Flash movies and the HTML pages. While this is manageable for a small site, a decently sized site will be pain to update on a regular basis. If you do not have the knowledge or the inclination to work with databases you can still have a system by which both sites are updated simultaneously. This is what I will show you in this tutorial using Flash with CGI/Perl using templates.

This is how it works

Theres nuthing new being invented here. Most people who have programmed in CGI/Perl will recognize the code. Its just applying that code to Flash sites to help making the maintenance of the two versions (Flash and HTML) easier.

There are 3 pre-requisites to this tutorial. You must be able to run/execute CGI scripts on your website, should be familiar with the Perl programming language (like using sub methods and being able to follow and modify code) and will be using the content of your Flash text files for your HTML site.

What we will basically do is create a CGI script - "html.cgi", that parses the data in the text file and by the use of templates allow us to create an HTML site by small modifications to the "html.cgi" script. Since the data is pulled from the same text file that Flash reads both versions, the Flash and HTML ones, are updated simultaneously.

To view a working demo version click the below links to access the specific files.

• Flash data text file - n.txt
• Template HTML file - templatehtml.html
• html.cgi CGI script source - html.txt
• html.cgi working demo - html.cgi

Parsing the Flash data file

Lets look at the Flash Data file. The information in it is in the form of a query string.

e.g.. variable1=text&variable2=2ndtext&variable3=some+more+text

As we can see each pair of variable/value is separated by "&", and in turn in the variable pair the variable and it's value is separated by an "=". Knowing this we can write a function/method (parseFile) in Perl that opens a specified file ($DATA_FILE), the data file; reads its contents and separates the pairs; and then separates each pair of variable/value and assigns them to an array (@Flash) from which a variables value can accessed if we know the variable name ($Flash{name}). This is what my sub method looks like.

sub parseFile {
## Define variables used to replace the newline in the flash data file, 
## blank variable and empty buffer
	$newline ="\n";
	$blank = "";
	$buffer = "";

## Open data file in read mode and copy all its content to the buffer variable
	open (LIST,"<$DATA_FILE");
	while (defined($line = )){
		$buffer.=$line;
	}
## Close data file
	close (LIST);

## replace every occurrence of "\n" with nuthing (an empty string), ""
	$buffer=~s/$newline/$blank/g;

## breakup the Flash file data into variable/value pairs
	@pairs = split(/&/, $buffer);

## for every pair split into the variable name and its value
	foreach $pair (@pairs) {
	    ($name, $value) = split(/=/, $pair);

## Replace the + with spaces and hexadecimal character codes
## with the appropriate characters in he variable value
            $value =~ tr/+/ /;
            $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;

## assign the value to an element in the @Flash array in an accessible form
            $Flash{$name} = $value;
        }
}

Using Templates

To make our work organized I suggest using templates. Templates are just HTML files of how the output should look on the browser with the actual content replaced with specific expressions that can be replaced with the real content by a CGI script. The one included in the Zip file is fairly simple showing the kinds of substitution expressions that can be used. In the CGI script you can add and redefine these expressions to your convenience and add substitution commands to replace them in the template HTML data. In the CGI script I first read in the entire template file and use substitution commands to replace the expressions with the appropriate text. After all the substitution has taken place I then print the data to the browser. Here is what some of the code looks like. ("pagetitle" and "descript" are variables in the flash data file).

# Set the substitution expressions
   $substitute_expression_pagetitle = "< !-- INSERT PAGE TITLE  HERE //-- >";
   $substitute_expression_descript = "< !-- INSERT DESCRIPT  HERE //-- >;";

# Get the template file using the getFile method
   $templatefile_data = &getFile($template);

# substitute page title
   $templatefile_data=~s/$substitute_expression_pagetitle/$Flash{'pagetitle'}/g;

# substitute description
   $templatefile_data=~s/$substitute_expression_descript/$Flash{'descript'}/g;

# set HTTP text header and print content

	&setHeader;
	print "$templatefile_data";

To make life easier I defined a few methods that you might find useful in the CGI script. The usage of these methods are explained in the CGI script source.

Conclusion

Well this is a start. Use the method I have shown you and build on it to create more sophisticated HTML versions to complement your Flash websites. This caan be used to create WAP / PDA friendly versions of your websites as well.

Play with it and see what you come up with.