The project was based around design, ease of use, and trying to get rid of the stigma that e-learning has to be the same old boring thing.

My role was to create the entire application from scratch, using only still photo mock-ups. This involved chopping out the assets, integrating them into Flash or HTML, adding appropriate animations, and tweaking the design as functionality and usability were introduced… and that’s just to get the artwork into the project.

• I built the application with a PHP and MySQL backend to handle all of the server side functionality.
• There is a CRON job that calculates client statistics every few hours so we have an idea of how the system is being operated.
• There is a PHP class for dynamically developing PDF files for course certificates which I integrated into the system.
• System alerts are delivered using jQuery in a Growl-like fashion.
• Part of the admins side is a Flex-based application for creating quiz pools, including picture uploads, that can be randomly drawn from during quizzes on the user side.

The project was a great learning experience and helped solidify larger project ideals, such as how to handle continued feature and support requests, how to take a project from design to web, and how to best manage the available resources for the project.

My job was to create a Flash navigation between the different sections of the site by integrating a third-party component that manipulates stage elements in 3D. There are video intros to the major sections of the site as well as a Flex application that allowed the user to navigate and filter photographs taken by the site’s photographers. Picture information is read dynamically from an XML file at runtime and the Flex piece was loaded into the main Flash movie when needed. When you click a photograph, a Flex HTML viewing component would load up that photo’s Zoomify files. Zoomify is a Flash-based navigation of high resolution pictures that operates like Google maps where higher resolution tiles are requested as the photograph is zoomed in. The Zoomify files were created using an export type in Photoshop, and I did all the work of loading them in dynamically and removing them when the user wanted to view a different image or move to a different section of the site.

There is a web and a kiosk version of the software created with the kiosk version having a few extra features including keeping track of visitor interactions in Flash shared objects and allowing those interactions to be export in a CSV file when a specific key combination is activated on the keyboard. It also has a screensaver-type mode that would automatically play a video repeatedly if there was no keyboard or mouse interactions for a few minutes.

The client later requested subtitle support for the videos so that external files could be loaded to show German translations over the videos for another version of the software. I already used the Flash FLVPlaybackComponent for displaying the videos, so adding on the FLVPlayackCaptioning component allowed me to achieve the subtitling without rewriting all of the video logic. It was still a bit of a pain to get right, but after enough tweaking and it turned out pretty nice.

The link for the website is a backed up copy with German translations so that you can see all of the parts of the application I worked on.

The initial video shown when you first visit the site is a Flash SWF that is loaded in by Flex, but is able to be controlled by Flex through a class interface. That way, I can tell the piece to stop playing and restart if the user decides to go to another portion of the site.

The pictures for each of the items on the site are only loaded in when they are to the left or right of the current piece. That way images are requested as needed instead of being embedded into the Flex application (which bloats the filesize) or being requested as soon as the application starts (which slows down the user’s bandwidth of the current piece).

The project link is to a backed up version of the site, since Expand didn’t end up going in this direction.