I’ve been putting some thought lately into the best way to render shadows in AS3. The built-in DropShadowFilter is perfect for most situations – particularly headlines and simple movie clips – but it lacked perspective control, at least for what I was envisioning…
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.
I had every intention of using my recently released SoundData class in an experiment with Papervision3D. I got pretty far: Picked out a good Armin Van Buuren track, had an interesting animation started; just hadn’t added the code to respond to the sound spectrum.
Unfortunately, once I loose a little momentum on one of these side projects, the likelihood of a bigger, better experiment stealing it’s lunch money gets pretty high. I grew rather attached to this latest experiment and, despite it’s somewhat ‘incompleteness’, I wanted to share it anyways.
Special thanks to Seb Lee-Delisle for the inspiration and all his particle work on Papervision3D!
Here’s the experiment. Enjoy! (there are several colors and speeds… so if you don’t like what you get on the first pass… refresh the page 
I tend to be a very thorough and detail-oriented person… at least I hope so (there are other words for it, but we’ll leave it at that). So naturally, when I’m writing code – whether it’s xhtml, CSS, ActionScript etc – I try and keep things neat, clean and easy to read. I indent like it’s going out of style, I strive for consistent naming conventions, and I use descriptive variable and function names.
UPDATE: I’ve discovered a serious flaw in this class… I plan to refactor things soon – stay tuned.
In an effort to simplify audio visualization experiments with ActionScript 3.0, I’ve developed a SoundData class. The class’s main attraction is centered around the flash.media.SoundMixer.computeSpectrum() method, but it also provides additional control over playback, including startSound(), stopSound() and toggle() methods. The class also allows manipulation over volume and panning.
I realize it’s been a while since my last flash experiment covering Audio Visualization with ActionScript… but fear not – I haven’t been taking a break. Very much the contrary 
Several months ago, I had the privilege of attending Flashbelt, a 3-Day conference on Adobe Flash capable of dropping the jaws of enthusiasts and critics alike. One of the hottest topics of the conference was the release of Flash CS3, and with it, the new and improved ActionScript 3.0. The new version boasted enhancements performance, features and overall sophistication. The catch was that there were significant changes in the class structure and approach to common tasks.