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.

Tags: ActionScript, AS3, Cool, Design, Flash, Photoshop, products

This entry was posted on Wednesday, February 11th, 2009 at 2:23 pm and is filed under General. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.