This text is replaced by the Flash movie.

The Making of Errandboy’s Playground

Below is a detailed overview of how Errandboy’s playground was created. The whole site was built offline and animated with nearly 1000 images.

Initial sketches were made for the playground toys.

01errandboypgsketches

CAD designs were then drafted for both the toys and playground set.

02errandboypgcad

02errandboypgcad2

Foam core and paper comps were made to check the correct dimensions and construction.

03errandboypgfoam

Final tweaks and vector files were prepared for the metal cutter. A waterjet was then used to cut all of the elements from two different gauge metals.

04errandboypgmetal1

Sagebrush mini-trees were used and foliage was added to the branches.

06errandboypgtrees

To complete the playground set, a Styrofoam tiered rotating table was constructed inside a c-stand rig.

07errandboypgset1

Studio lighting, flashes, and fluorescent black lights were used from above.

08errandboypgset2

Separate lighting was wired for the lampposts and robot eyes. Multiple glow-in-the-dark paints were tested for best results under the black lights.

09errandboypgset3

10errandboypgset4

11errandboypgset5

12errandboypgtoys1

13errandboypgtoys2

14errandboypgset6

2 Nikon D200’s and Dragon Stop Frame Animation software captured the 988 frames used for navigating the playground.

15errandboypganimation1

16errandboypganimation2

For every regular (daytime) frame, an identical glow-in-the-dark frame was captured so you can toggle seamlessly between states.

17errandboypganimation3

36 frames (in 10 degree increments) were shot from the Landshark’s POV.

18errandboypano

The frames were stitched and retouched to create the cylindrical panoramic for the Landshark’s periscope. (Click and drag below to move around the playground.)

For the opening sequence, a velvet fabric was hung and photographed. Additionally, 4 music tracks were composed along with sound design and effects to be used throughout the site and game.

19errandboymusakcurtain

Separate images were photographed for the Loopslide game and Limeade Stand before the coding process began.

20errandboygame

Once all of the assets were captured, web development began. Individual frames were retouched and sequenced to create the navigational movies. The movies were then tested to determine the right balance between quality and file size. Once an acceptable balance for download times was determined, Flash work began on the preloader, introduction and main navigation. Coding for the rest of the site would follow suit with the architecture being a hybrid of Flash and XHTML. (other technologies used: ActionScript, PHP, CSS, JS and MySQL)

That pretty much covers it. If you have any questions feel free to email.

Let’s Errand!

Other places to play: Follow Errandboy8 on Twitter

Errandboy on Facebook