For the last few years, John Rowell has carried around a business card that reads “John Rowell, retired. No phone. No Fax. No email. No Worries” … No joke, he really printed a handful of those out.

In no way does this mean he’s been spending retirement fishing and playing the StarTribune’s daily Sudoku. Well – those are both pretty accurate – but much of John’s retired days are spent sawing, varnishing and wood-burning away at his lake home in Outing, MN. This has become the studio of Nature Enhanced, John’s creative outlet for all wood products. Handmade.

Just over 5 years ago, when I was writing my first lines of html, I told my Dad that someday I’d make him a website for Nature Enhanced. And just recently, I decided it was time to make up for the long wait. In the end, Nature Enhanced received an entire handcrafted package, including …

Full Re-Branding and Logo Design

It was time to replace the old clip-art logo with a fresh, logo that played off of the wood theme and the fact that all products are branded, literally, with “HANDCRAFTED BY JOHN E. ROWELL“.

Handcrafted Business Cards

The cards were printed on 13pt, Uncoated 2″ x 2″ cards, using UPrinting. They were designed to double as a product hang tag, and each was given a hole punch and a string. I decided that the cards also needed to embody the ‘Handcrafted’ theme of company. To accomplish this, I first gathered sticks during a late night stroll along Nicollet Island. The sticks were then broken into approximately 2″ pieces and laboriously super glued to the bottom of the cards. I prepared about 100 of these to get my Dad started, and gave him a hole-punch, string and super glue to finish the remaining 400 on days that Sudoku only takes him a few minutes.

Website Design, Development and Admin Area

The site was also designed closely around the wood and handcrafted themes – using wood background textures and brown tones. The navigation was kept simple: –
HOME – a very brief intro to the company.
PRODUCTS – sample products and descriptions, with a ‘lightbox’ javascript effect for viewing product photos.
OUTLETS – locations where Nature Enhanced products can be found, using embedded google maps
CONTACT – Office and studio info and a simple contact form.

I also set up a basic admin area that walks through accessing the new nature-enhanced.com email accounts, working with the online store, and cut-and-paste code to allow using the Nature Enhanced logo on Craigslist ads and other websites.

Product Photography

Using white foam board, masking tape and some flood lights, I created a makeshift photo lightbox to allow for isolated product photography.

E-Commerce Solution

I set up a Free account at Big Cartel to get John started with an online store. The free account allows for 5 products, 1 photo per product and basic stats. The Big Cartel admin area is very well designed and easy to work with – and, because they allow for custom CSS on all accounts, I was able to fully style the store to match the look of the Nature Enhanced website.

Hopefully all of this was worth the 5 year wait… In fact, I hope it’s so good that John has to fire up that phone, fax and email a bit more often.

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!

View our Holiday Card >

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…

(more…)

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 …

(more…)