The Admin Editor

BACKGROUND

Vita Bella Photography in Milwaukee, Wisconsin, USA came to Aaron Cooper of images.designed three years ago (2001) requesting a new web site that would allow them to showcase their "Beautiful Life" bridal, portrait and other photography. A site was created that, albeit attractive and usable, did not empower the client to make their own additions and edits to content. In 2003 Vita Bella requested a redesign with a slightly expanded budget, so images.designed began researching a PERL/Flash solution that would offer content management flexibility.

Enter - HiAlbum.

HiAlbum offered a feature-rich, customizable/rebrandable, non-compiled, script that was well-suited to the task. Flash offered the text parsing capabilities of a champion. The marriage of this dynamic content management tool and a highly usable Flash interface was blessed.

FLASH-FRIENDLY DATA

Minor customization of the hialbum.pl script was necessary to allow SWF files to leverage HiAlbum's innate CM flexibility.

First, we specified a new $dloc variable to write the HiAlbum data file to a directory on the server from which Flash could read (note: this avoids cgi-bin read issues):

$dloc=('../../html/hialbumdata'.$ds);

Next, since the updateDB subroutine writes to data files on the server whenever a change is made within the HiAlbum administration area, we added some simple code to write the image title and caption into a text file for each individual image that was Flash-friendly. These individual text files are loaded into text fields within the SWF whenever a thumbnail is triggered to load an enlargement, then providing title and caption to accompany the enlargement. Here is a sample of the PERL code:

$flashtitle="title=";
$flashcaption="&caption=";
$datafile=('../../html/hialbumdata/'.$album.'_'.$uref.'.txt');
open(DATES,"> $datafile")||print "ERROR $!<P>";
print DATES "$flashtitle$ititle$flashcaption$icaption";
close(DATES);

Within flash we wrote actionscript to parse the HiAlbum data file, created in the previous step, as follows:

var _lv = new LoadVars();
_lv.load("/hialbumdata/categoryname.txt");
// use onData since this text file is not of the form var=value&...
_lv.onData = function(dat) {
// split on \r\n (ok for file on windows server)
photoinfo = dat.split('\r\n');
// split on \n (file on linux server)
if (photoinfo.length==1) {
photoinfo = dat.split('\n');
}
photoinfo.pop()
thumbnum = photoinfo.length;
finalarray = new Array();
// create a final comma delimited array that stores the image loading order
for (var i=0; i<photoinfo.length; i++) {
photoarray = photoinfo[i].split('|');
finalarray.push (photoarray[0]);
}

Once the HiAlbum data file was parsed, a variable was created (thumbnum) which stored the number of
images in the respective category. Then, we created a loop to load each thumbnail in the order specified within the photoarray. Here's a sample from that actionscript:

function loadThumbnails(trgt, format, dist, prev_x, prev_w) {
path.thumbs.createEmptyMovieClip("thumb"+finalarray[seed], seed).loadMovie(trgt+finalarray[seed]+"_a"+format+"?nocache="+getDate(), path.thumbs["thumb"+finalarray[seed]]);
path.thumbs["thumb"+finalarray[seed]]._alpha = 0;
path.thumbs["thumb"+finalarray[seed]]._x = prev_x+prev_w+dist;
}

You will notice that we specify the thumbnail prefix name using the array position declared by using an incremented "seed" variable (created, then incremented within an actionscript loop, but not shown here) to specify the position within the finalarray array.

The accompanying Flash timeline uses very few "drawn" library objects, in favor of Actionscript. In addition, PayPal was integrated to allow visitors to purchase prints within the "gallery" section of the site. Here again, the Title and Caption HiAlbum data is passed through from the Flash variables to the PayPal shopping cart to offer a seemless shopping experience. The separate gallery SWF file is only 15K. The Flash code necessary to create the site framework and load the
enlargements based on the selected thumbnail is rather proprietary and somewhat lengthy (but tidy) so it is not included here. Please feel free to write images.designed at info@images-designed.com with any questions or to inquire about purchasing the FLA source code.

The client, Vita Bella Photography, was empowered to maintain their own galleries, leveraging the convenient online interface and full add, delete and shift functionality of HiAlbum. The delivery of fresh content is not longer limited by back-end woes and site visitors benefit from the bandwidth-friendly "load-as-you-go" paradigm and elegant interface that Flash affords, unaware of the complexity that drives the site.