Re-launched LarissaCleveland.com. The site uses my first custom wordpress theme, and the Gallery Project for her wedding photography portfolio’s image management. I created some custom flash galleries in Actionscript 3.0 (all OOP Programming), that pull the images from the gallery database via xml to keep everything easy for the client to maintain with CMS tools.

One of the most challenging tasks about creating this website, was the portfolio, and how it needs to be very intuitive, simple, and extremely functional.  To solve this problem i researched tons of other photographers portfolio sites.  Many of them have issues that are fairly obvious pertaining to navigation, heavy image loading, audio, thumbnails, etc.  So I took what i found from these other sites, and attempted to create a flash portfolio that stay’s attractive, but retains it’s functionality while being subtle.

The main controller of the portfolio featured to the right has a back, audio, timer, and forward icon.  These simple buttons are intuitive enough for normal users to understand them without touching them.  The visibility of this controller is key to keeping the portfolio sexy.  It only appears when a user rolls their mouse over the main image being displayed.  After rolling off it disappears with a fade-out, and blurr.  I love the Tweener Actionscript class!  As you can see in the 2nd screen-shot when you roll-over the audio icon it displays credits for the song again keeping it subtle.  The audio button has a simple on/off functionality, and being the thoughtful developer i am it only pauses the song instead of restarting the song altogether.

The thumbnail strip was quite challenging in that loader objects are new to AS3.0 and due to the sheer volume of thumbnails to show, loading simultaneously all these thumbnails can bog down this puppy in a heart-beat.  To get around this massive loading problem I broke up the thumbnails into segments, that load only when they are scrolled into the visible area.  So i do create all the loader objects when the portfolio loads, but the thumb-strip knows enough about it’s visibility to load only the thumbs that are visible.  While i don’t go over the top on checking for IOErrors on mis-loaded thumbs, i do have local flags on each thumb that will attempt a re-load if something goes a rye.   This thumb strip also scrolls up, and down using easing via the tweener class.

While the interface is simple, there are some serious considerations for usability that needed to be integrated to keep the thing from consuming itself in a blazing ball of ui flames.  The project loads it’s images from the open source gallery project cms tool via a xml file compiled via PHP / MySQL middleware / database. The initial number of images to load was around 137, and of course these JPEGs couldn’t be highly compressed as they needed to show all the fine detail Larissa’s photographs are known for.  So one, by, one loading was the only solution to help keep the responsiveness of the gallery high, and users adequately entertained.  Loading each image one, by, one presents the challenge of allowing people the time to re-click a button, or continue to choose other images while waiting for the first image clicked to actually load.  To lock in those click happy users i built in several lock-out features to this highly OOP component interface.  For the controller i created a public method that dims / disables the back, and forward buttons.  Users can still stop / start audio, and stop the auto-advance timer as it dosen’t affect the current loading of an image.  I call this controller public method from the thumb-strip, and the auto advance timer.  The thumb-nail strip also disables it’s buttons once an image is cued to load.  While i’m not a fan of taking away buttons a la carte i think this approach solves the bulk of image overload that could be caused by click-happy users.  As you can see in the screen-shot above, the main image is screened back while the next image is pre-loading, and a pre-loader bar is displayed, giving users visual feedback that they’re click has generated something to happen, discouraging needless additional clicking.

After everything was said, and done i’m quite happy with the site’s visual beauty, and functionality.  The progromatic challenges that came up against helped me further my understanding of OOP Actionscript 3.0 programming.  I typically only learn things when i’m forced to, and this certianly was a big OOP bite to take.  I would probably solve some of the programming challenges different if i had to do it over again “Which i most certianly will in the future seeing that I’m the in-house always on the clock staff member of Larissa’s web-site”.  Please check out the site, and if you’re getting married, and need a photographer give her a call.  If you have any suggestions on how i could make the site more user friendly please feel free to leave comments.