We recently completed an ‘Interactive Roof Designer’ Flash piece for Trimline Building Products. The objective was to create an area where prospective clients could customize the look of a house, and apply different colors from Trimline’s Distinction Tile and Distinction Slate composite roofing product lines. The final piece allowed for some interesting looking houses – here’s a break down of the process for each step…

1. CHOOSE HOME STYLE
3 photos were selected to represent different house styles. The idea at this point was to focus on the overall structure of the house – as the material, color and roof product would be customized in the following steps. ArcStone’s Nick Longtin created line drawings of each house. He did it all with his left hand while sipping a delicate blend of herbs and spices with his right.

2. SELECT MATERIAL & COLOR
This stage allows you to select a building material – brick, stucco or siding – and customize the overall color. Using ActionScript’s BitmapData, a custom ColorSelector class was written to avoid using a simple color picker with a limited palette. This allowed use of the full spectrum and a color intensity slider (saturation).

Surprisingly, the bulk of the work at this stage wasn’t the ColorSelector or Flash development – it was the laborious job of masking out the exposed building on all 3 house photos and applying brick, stucco and siding textures to to each house with perspective and shadows in mind. The textures where then desaturated to a medium gray and applied to each house in Flash as a MovieClip, set to BlendMode.OVERLAY. When the ColorSelector dispatches a CHANGE event – the new color gets applied to the selected texture movieclip (via ColorTransform manipulations).

3. DESIGN YOUR ROOF
The final step – applying different roof products – was achieved through the same techniques as step 2, but the tint color overlay was limited to the colors of the individual composite roofing products.

The final product allows visitors to visualize their dream roof in real-time, right in the browser, and without downloading any software. Other similar systems from Timeline’s competitors often rely on server side image manipulation that is slow, requires page refreshing, and just isn’t very interactive.

Flash is a great technology for visualizing products, and incredibly effective at drawing customers into site content by offering engaging interactive elements. If you’re interested in bringing a product or service to life on the web please contact us. We would be happy to discuss the wonderful options Flash and other technologies offer.

For those of you who read my recent article on High Dynamic Range images, you’re already aware of the power of HDR in creating images that trample the boundaries of traditional photography. When pushed to the max, it’s quite easy to create eerie, surreal or just plain fake looking photos.

I recently did some night photography at the old train yard outside of downtown St. Paul, near Shepard Rd. The photo opportunities were endless. Surprisingly, both times I was approached by someone with a blaring walkie-talkie on their belt, I didn’t get kicked out – they only stopped to chat photography. And trains.

(more…)

Chances are, many of you have stopped to enjoy a sunset and taken a quick photo of your significant other to capture the moment. Chances also are that when you looked at the preview on your LCD (instant gratification!), you found that it was quite different than what you were actually seeing. Not in a bad way. In fact, some of those photos may have displayed even more vibrant colors and a nicely silhouetted subject. Not bad. Just different.

The reason for this is simply due to the nature of photography and exposure. New techniques and technologies, however, are blurring this discrepancy between our eyes and our images.

(more…)