Spray Paint stenciling in Flash

After seeing the Wii Spray demo videos a year or so ago I have since been wondering how they did the stencils. I couldn’t find any information on how to achieve an effect like paint stenciling so today I decided to give it a shot myself. Below is a small demo where you can have a go and spraying some stencils. Instructions are in the bottom left corner. Here is how it works:

Layers (top to bottom):

  1. Draw Layer Bitmap – contains BitmapData where the spray paint is drawn
  2. Stencil MovieClip – the stencil you see on screen containing artwork with transparency
  3. Stencil BitmapData – stencil is drawn to this bitmap data (not added to display list)
  4. Canvas Bitmap – where final artwork is drawn to

The process

  1. when stencil is moved and placed somewhere, the Stencil BitmapData is filled with red, then the Stencil MovieClip is drawn on top.
  2. you then paint with the mouse – paint is drawn to Draw Layer Bitmap
  3. on mouse up a Temporary BitmapData is created
  4. it then loops through all pixels in Stencil BitmapData – if pixel is Red: copy corresponding pixel from Draw Layer Bitmap to Temporary BitmapData
  5. when the loop is complete draw the Temporary BitmapData to the Canvas BitmapData
  6. Draw Layer Bitmap is then cleared

Get Adobe Flash player

Posted toActionScript Experiments Flash Generative Art Interactive