Definition 6 recently re-launched our own web site with a sparkling new flash homepage with lots of fun things to do.  One of the elements that we are particularly proud of is the ‘paint on canvas’ feature that allows you to paint with different colors to reveal images of our previous client work. 

Originally we got inspiration from an open source painting proof of concept created by the design group ‘Stamen’ (http://stamen.com/projects/splatter) and later showcased at the Jackson Pollok site (http://www.jacksonpollok.org ).  

The Definition 6 Creative Department has many unique talents and one of them is Ethiopia Hewitt, a Web Production Specialist. She is our resident Math expert and holds her Bachelor’s degree in Mathematics.  Using the original work that Stamen did, she worked hard on refining the equations, smoothing out the generated lines and reducing the amount of paint splatters emitted from the paintbrush. She also consolidated the code to one action layer and added listeners to the layers to allow onClick painting.  This allows the targeted paint layer to change depending on what color you picked.

Then Ethiopia and I tackled the hardest part – turning it into a mask instead of the actual paint itself. Instead of painting solid color vectors, the paintbrush reveals the bitmap images underneath.

Our goal was to paint it as a mask, which is no small feat since Flash masking requires that a solid vector object be use. Lines or Strokes are not viable masking in the normal Flash schema.  Instead, we applied a solution of converting the layer to bitmap mode before the mask was applied. With some added tweaking, this approach worked brilliantly!

Feel free to check out our new and improved site. Go to http://www.definition6.com, grab the paint brush, and have fun!

Alyssa Gobelle, Interactive Designer