Hornall Anderson Design: Promotional DVD-ROM
| Client: | Hornall Anderson Design |
| Role: | Flash Development |
| Year: | 2010-2011 |
An interactive DVD for a special design agency
Hornall Anderson Design asked me to help them produce a self-promotional interactive DVD that allowed existing and prospective clients to get a sense of their work and culture. Their idea was to shoot the whole office on a camera rig and then piece together the footage so users could step through the office as if they were there. Along the way, users can explore particular locations around the office and learn more about the firm.
My Role
I was asked to develop the "Culture" section of the DVD which included the walkthrough interaction as well as a small game users could play along their journey. The piece was developed using Flash/ActionScript 3. I'm usually not interested in pure programming/development gigs, but this one was too interesting to pass up!
Walkthrough Development
As you can see above, users can use either their keyboard's arrow keys, mouse scroll wheel, the buttons at the bottom of the screen, or an interactive map for navigating the large two floor office space.
Along the way, users are introduced to several interesting and often humorous characters, each one telling a piece of the story that is Hornall Anderson Design.
Game Development
I also developed the game you see below, which follows the exploits of Nigel the Pigeon. HA staffers became well acquainted with Nigel, who spent much of his time resting high on an office window ledge near the kitchen. Many would throw scraps of food out the window for the lonely bird, which inspired this space-invaders type game in which Nigel must catch food and beverages falling from the open window to earn points and help ward off imposter's trying to steal his hard earned meal.
Technical Details
One difficulty in creating a seemless walkthrough experience was in the section tracking dots that acted as interactive markers along the way. Here's the process I came up with, which worked well.
After the walk-through video was complete and in post, the video editor added little colored dots to denote the sections and then exported the whole video as individual pngs. I wrote an AIR app that batch processed these images scanning pixel-by-pixel for the colored dots in each bitmap and denoting their frame number, x/y coordinates and size and saving the data to an xml file. The Flash walk-through then scrubbed the video, placing interactive 'clickable' vector dots overlaying the frame as described by the xml file. The user could then step through the application seeing and interacting with the overlaid dots. Since the whole system was automated, it was easy to drop in new video as it was being created without being tied to a timeline.
Nothing too interesting regarding the game. It was developed using Object-Oriented AS3 and utilized various design patterns including Factory and MVP.
2 Comments
Reader Comments (2)
Thank you for sharing your articles, appreciate your polish
I really iwc replica swiss eta
enjoyed this post. You describe this cartier swiss replica
topic very well. I really enjoy reading your blog and I will best calatrava replica
definitely bookmark it! Keep up the interesting posts!bell & ross replica china