Thank you, thank you, thank you … your business and support enable us to do what we love. We’re looking forward to another great year of Service, Craftsmanship, Evolution and Happiness.
Season’s Greetings from all of us at ArcStone!
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.
For those that weren’t aware of my latest adventure, here’s a recap 
Not technology related – but interesting nonetheless….
With the recent arctic air passing through, my buddy and I had a brilliant (well, crazy) idea…. We wanted to experience what 45 degrees below zero felt like. After a regular day at work, we somewhat spontaneously made the 4 hour drive up towards Embarrass, MN, where the lowest temperatures in Minnesota are typically recorded.
The conditions were just right for extreme low temps in that area – high pressure a little bit North West (pushing cold air from the North down), and very clear, calm nights.
We rose at about 6 am, bundled up, and walked around with a wired thermometer for a little over an hour…
Cold like that feels quite a bit different than 10 below and windy in the cities. That windchill feels like its ripping your skin off. The extreme but calm cold isn’t as sharp, but it’s unrelenting — loose a little bit of heat with a glove off or exposed skin, and its pretty difficult to warm things back up.
After our chilly morning walk, we got some pancakes and I spent the rest of the day telecommuting from our hotel.
Ridiculous, I know.
A little under a year ago I was ‘oohing and ahhing’ over the official launch of Adobe AIR, and the amazing potential it opened up for blurring the lines between web and desktop applications. Lately – well, since Flashbelt 2008, I’ve been ‘oohing and ahhing’ over Processing …
(I’m honored that this piece was used in a Create Digital Motion article announcing Processing’s move from Beta to the official Processing 1.0!)
Adobe AIR and Processing?! Apples and oranges, I know. But I tend to obsess over things – whether it’s indenting my CSS properties, dropping my curly brackets to the next line, or exploring new software and languages to experiment with – like ActionScript 3, Processing, or NodeBox.
I think Processing has become more than just a fling…
Nick Longtin, colleague and teacher of many of my programming skills, once commented that Processing was right up my alley – and he was right. The creative potential has me quite addicted, and I think Processing has become more than just a fling. An area where my eye for design and my obsessive coding habits play nicely together. An area where stunning and inspiring work is easy to find. Where late nights of coding are rewarded with visual output, not some big query result to loop through…
Yeah, I Heart Processing.
Many of my experiments have been posted to my Flickr photostream – check ‘em out and let me know what you think!
More experiments with Processing and Particles. This one uses the wonderful Traer Physics library.
Rather than writing a custom Particle class and applying forces to them individually (as in my previous particle post), all I need to do is create a ParticleSystem instance, add forces as desired (none in this case), and Traer does the rest.
In this example, I continuously add particles in the center with random velocities, and continuously remove them when they’ve grown old. The particle.age() property also controls the size and transparency of each particle, which is simply an ellipse with a teal-ish fill. The moon is a PNG placed in the center. For a final touch, I use the built-in camera() function to zoom in an out, controlled by a Sine wave.
Actually, this one uses 10,000 particles, and the equation:
float force = planet.mass * particle.mass / distanceSquared;
(Thanks Keith Peters!)
Particles are regenerated if they begin shooting off into space. Near the end of the animation, I decrease the center planet’s mass until it becomes negative, changing gravity into repulsion…
100% code animation built with Processing – uses a random color sampled from a photo of rust, 1000 particles and Perlin noise to control movement.
This experiment was based on my ActionScript 3.0 PerlinCurtain post.
There’s just something about high quality photos fading in and out that always seem to take the feel of a site up a notch or two. Good examples are AMO’s very own Arizona Medical Group Management Association (AZMGMA) and Metro Atlantic Relocation Council (MARC). Both of these sites use a custom XML-driven Flash slide show, developed internally a couple of years ago. The ease of updates from using XML, and the aforementioned Flash flashy-ness make it a perfect solution for breathing life into an otherwise static page.
Click the photo to see the slideshow in action, using recent photos from Montana and Yellowstone, or read on to learn more …
Our very own Jess Louwagie and former employee Tim Bramer both made an appearance on Robert Hodgin’s blog – the conference’s closing speaker.
See for yourself here – and be sure to check out some of Robert’s amazing Processing experiments while you’re there. (Thanks for the inspiration Robert – Amazing presentation!)
