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 the opportunity to attend Flashbelt again this year. And it was awesome.

This year’s highlight was seeing Jared Tarbell speak again, who’s done amazing work in both Processing and Flash, and is a the co-founder of Etsy, an excellent marketplace for all things handmade! For those who have kids, or like wearing really small clothing, be sure to check out Orange Rhino for some sweet threads from our very own Jess Louwagie.

Jared’s session once again left me speechless. The work was refined and elegant, the music fitting, and the presentation seamless. What inspired me the most of about these speakers, however, was not just their work. It was how approachable they all were. And how apparent it was that their work was fueled by curiosity; a willingness to make mistakes and a stubbornness not to give up.

One of Jared’s pieces that caught my eye was a series renderings that used Perlin Noise to generate forms resembling an iris (of the eye, not the flower).

While analyzing some of his source code (special thanks to Jared for providing it), and listening to Eric Jordan’s mix, Indigo, it became apparent to me the potential of using BitmapData.perlinNoise() and BitmapData.getPixel() to achieve organic, pseudo-random results.

Read on to see my latest experiments – Click the images to see the full-version. They look better … (more…)

Although I like Guitar Hero quite a bit, sometimes it leaves me wanting less. By less I mean a game more pure and simple in its musical mockery. What I came up with was “Cowbell Hero”.

As you can see from the above product mock-up, it consists of a simple Wii accessory in the form of a white plastic cowbell. The nunchuck plugs into the bell allowing you to swing it to and fro with a realistic cowbell playing motion.

A variety of classic 80s rock songs will provide hours of cowbell playing fun. If anyone at Nintendo is reading this, please, please make my dream come true.

YouTube has just added a great new feature: video annotations. Video annotations are little text boxes, word bubbles, and spotlights you can add to your videos.

These little information nuggets have some serious potential to make the now common place web video experience a little more engaging. Regrettably, the first wave of annotated videos will likely be comprised of wise-guy comments overlaying groin injury videos.

To see this cool new feature in action click here.

(This post started here and will end ridiculously)

To quickly recap, I recently found myself pondering the deeper facets of life and the universe. The budding Friedrich Nietzsche inside of me was twisting and turning, unable to rest. The ultimate question in question? If I could buy anything, and I mean anything, what expensive things would I buy? The list continues…

—

4. A $20,000 .mp3 player

The TrexStor i.Beat Organix .mp3 player is the geek’s ultimate bling. Adorned in 18-karat gold and 63 one-karat diamonds. Its wrist strap is made from aquamarine jewels and admittedly I don’t know what those are, but I want them. I can just imagine running into an iPod user on the street. Our conversation would go something like this:

iPod guy: Awesome, my iPod just shuffled to REO Speedwagon’s “Keep On Loving You!”

Me: My iPod is covered in diamonds.

iPod guy: …(cries)

I used to be an Apple fanboy but Apple just doesn’t seem to have class anymore. I don’t even think they have a product with gold or diamonds. Then again, Steve Jobs isn’t necessarily known to be an innovative thinker so I won’t be too hard on him.

All the same, Apple will be lucky to have even 5% of the .mp3 market in 5 years with jewel-encrusted devices like the i.Beat Organix on the rise.

—

5. The New York Yankees

The Yankees are America’s team and I love America so much that I would buy them in blink of a George W. Bush eyelid if I had the chance. I also love baseball and Coney dogs. Completely justified purchase, no doubt.

First order of business with George Steinbrenner out the door and the kid-phenom at the helm (that’s me, by the way), would be to replace those outdated pinstriped jerseys with American flag-inspired gear. A prototype of the new pants already exists.

Second order of business… sign Air Bud* to a lucrative contract. Air Bud brings marketing power and raw talent to the team.

Third order of buisness… trade A-Rod and Andy Petite to the Minnesota Twins for Nick Punto.

Then… sit back, eat 6 Coney dogs, and enjoy the game.

—

That’s all the time I have for today! I’ll leave you with another one of my favorite quotes, this time from Nietzsche himself: “Is life not a thousand times too short for us to bore ourselves?” Definitely, especially if you are super rich and can buy happiness. Tune in next time, world.

—

*Buddy the Wonder Dog, a.k.a. Air Bud, died 10 years ago this February but was father to dozens of healthy pups who have become famous actors themselves. With the world hanging on every one of my words right now, I’d would like to take this opportunity to pay my respects to Buddy; An inspiration to an entire generation, he is loved and missed everyday.

What it do, world.

Oh man, oh man. My Kanye shades arrived!!

Driving with these on is not a crime because looking fly and committing a crime can never occur in conjunction with one another.*

—

*ArcStone Technologies, Inc. and the author are not responsible for the accuracy or reliability of any information, data, opinions, advice or statements made in this post. Word.

My esteemed colleague Nik Rowell has graced these pages with some really cool Flash experiments in the past, which has inspired me to also explore the wonderful capabilities of ActionScript 3.

Audio visualization is a fun area to experiment in, as you can do some very interesting things with very little code. Nik showed us a unique way of looking at sound in this post. His code utilizes one mode of Flash’s sound compute spectrum method, which returns the raw sound wave data.

In my program I decided to use the Fourier transformation mode, which returns a set of calculations derived from the sound wave data. These calculations output a set of frequency numbers, starting with lows and ending with highs.

If your browser has Flash 9 installed click here to see a really cool song by Kate Havnevik brought to life with Flash. If you don’t see anything except the background right away, please be patient. On slower connections the sound may take a minute to load.

Every once in a while I come upon a site so unique, so interesting, that I simply must share it. Indexed is one of those sites. Jessica Hagy has taken blogging to a another dimension with her faux-math graphing posts.

While others (me included) struggle to convey complex thoughts and opinions with hundreds of words, she cuts strait to the point using only a few lines. Jessica’s hand drawn creations may not stand up to scientific scrutiny, or be testable on your TI-80, but they are genius in their own special way.

She also has a book coming out that will no doubt become an instant coffee table classic among nerds everywhere. It’s sites like Indexed that renew my faith in the Internet’s ability to offer up quality content for an unbeatable value.

Don’t miss this site, it will change your perception of blogging, graphs, and math forever.

If you’re anything like me your daily digestion of web content can’t be contained in one browser tab. Between RSS feeds, work Intranets, gMail and other web applications, several tabs are needed, and flipping between them constantly becomes a carpal tunnel inducing nightmare.

The solution many choose is to setup a start page. Start pages are one page sites that aggregate data from many other web pages into a dashboard style display.

Google’s iGoogle is the most popular start page system, but I have started using a little known competitor that puts iGoogle to shame; Netvibes.

Keep reading for tips on setting up the ultimate start page and the secret to unlocking the start page’s hidden power.

(more…)

As many of you know, I’ve been spending a bit of my time exploring the cool features in ActionScript 3.0 – some new, some not. Lately, I’ve been intrigued by the SoundMixer class which has a special method, computeSpectrum(), that essentially takes a snapshot of the wave of a streaming sound (or an embeded sound, but I’m talkin’ 100% code here)…

The finer details quickly boil down to binary data, but the power of this is the potential to create audio-powered animations in Flash.

After a refresher in Trigonometry, some tortellini, and a late night (or early morning), I’m pleased to present latest ActionScript 3 experiment!

(more…)