A couple weeks ago we launched a flash microsite for Wawa’s cold beverage promotion named dressyourbottle.com. The site features the ability to browse a selection of Wawa drinks, dress up a bottle in silly clothes (and enter it into a contest), and see other user’s dress-up creations. We’ve done quite a few microsites now, but I think this one went the smoothest in terms of code architecture and process. After the design phase, we proceeded with a tech kickoff where all the functionality of the site was outlined and documented in detail. This assists the QA process and also makes sure that all the developers are on the same page in terms of how things will work. This time around, I wanted to put together a working prototype so the client could get an early look at how the site would look, feel, and function. The prototype had all the major pages but only lacked back end database functionality, some program logic, and did not have any transitions or fancy animations. Building the prototype did not end up adding any extra time to the timeline – it merely took a shift in priorities. Instead of focusing on specific areas and making them work, I focused on building out all the major parts without getting too deep into any of them. The prototype helped us get early feedback and reassured the client that we were making good progress and were heading in the right direction. Early feedback is key since it helps avoid communication issues that can lead to wasted hours. Post prototype, the rest of the development went very smoothly. We followed a ‘remote procedure call’ model for interfacing flash to our backend code. This made it very easy to test out that logic independant of a UI. Finally, our detailed test plans and time invested in testing helped us catch almost all issues before the site went live.
In terms of the Flash code, the site uses SWFAddress for addressing specific pages in the flash. SWFAddress gets you back-button support and deeplinking. I wrote some classes to provide a basic MVC style architecture for flash for displaying pages based on the address. The architecture also handles Google Analytics. It was fairly easy to extend the site at that point just by writing additional page classes. This also kept the code fairly well organized and separated out for each page. The architecture was flexible enough to allow us to link to specific user created bottles in the gallery (something common enough in most PHP or other traditional web apps, but a little more difficult to do in Flash). This came in handy when a user posted a link to his bottle on Reddit.com to drum up some votes (generating lots of traffic for the site). I have ported my little MVC architecture to AS3 (dressyourbottle.com is all actionscript 2) and plan on using it in future projects.
This site also uses Tweener heavily for animations and transitions. It’s a big time saver (not to mention that it looks great). We also have integration with facebook connect for posting feed stories about your creations. Facebook proved to be a little challenging at times, but the developers are fairly responsive and even fixed a bug for us. Other highlights include an in-house produced video for the contest. Check it out here. All in all, we are quite pleased with how the site came out!