We present a custom AS3 WoodTexture class for creating wood-textured display objects completely from code. The class creates a Sprite with the same shape and mouse interactivity as any source Sprite that you pass to the constructor. The texture is created with a combination of BitmapData methods: perlinNoise, paletteMap, and copyChannel. A rounding effect is obtained with an inner GlowFilter. Click on a screen shot below or on the corresponding text link to open a Flash movie with examples in a new window.
Wood 1 radio button selection gives:
Wood 3 radio button selection gives:
- Download all source files corresponding to this effects: WoodText.zip
Download the zip package linked above for the complete, commented, and easy to customize source code.
WoodTexture AS3 Class
The custom WoodTexture class extends the Sprite class. You feed a Sprite to the class' constructor, and the class will create a new Sprite in the same shape as the input Sprite, but with a wood texture. The input Sprite will become a child of the new Sprite and will serve as its hit area, so that the texturized Sprite will have the same mouse interactivity as the input Sprite.
Using the WoodTexture class is easy: first create the Sprite that you want to texturize (which we will call the source Sprite). You can add display children to this Sprite, including MovieClips and TextFields, and you can also draw graphics as you please. To create the texturized sprite create a new instance of the WoodTexture class with your Sprite as the argument for the constructor:
var woodSprite:WoodTexture = new WoodTexture(sourceSprite);
The wood texture will not appear until you call the generate() method:
Delaying the creation of the wood texture until you call the 'generate()' method allows you to set certain parameters for the texture before generating the wood pattern. For example, you may wish to change the color palette used for the wood or the amount of edge shading to use.
You may find the default parameters to be suitable for your needs, but for more control of the appearance a few variables can be tweaked, as described below. You must make any changes before calling the generate() method.
The colorList attribute is an instance of the Vector.
The roundingAmount and roundingSize parameters control how the wood appears to round three dimensionally near the borders of the display object. These parameters control the alpha and blur amounts, respectively, which are used in an inner GlowFilter of a dark color which is applied to the object.
A couple more parameters are available for extra experimentation with the texture, but you will likely want to leave these alone. The perlinBaseX and perlinBaseY parameters control the shaping of the texture. The wood is created with Perlin noise, and the texture appears lengthened vertically because the perlinBaseX parameter is much smaller than the perlinBaseY parameter.
How the Class Works
The WoodTexture class has some interesting methods behind it. The class extends the Sprite class, so it represents a display object. This Sprite has two children added to it: one child is the source Sprite, which serves as the "hit area" for the Sprite, so that the WoodTexture Sprite will have the same mouse interactivity as the source. The other child of the WoodTexture Sprite is a Bitmap which contains the wood texture. This Bitmap is made to have the same chape as the source Sprite by controlling the alpha of the pixels.
Creating the Texture
The texture is formed by using bitmaps. Four BitmapData objects are created in order to construct the texture, but only one will be displayed.
- A BitmapData object, called PerlinData, is created and filled with Perlin noise, stretched out in one dimension to create a wood-like pattern. This BitmapData is twice as wide and twice as high as the final object, in order to allow for "oversampling" of the texture. The final wood texture will be scaled down by a factor of two lengthwise. This method creates a smoother appearance.
- A new BitmapData object, called WoodPatternData is created. WoodPatternData is filled with a texture that is created by mapping the brightness of the pixels in PerlinData to different colors chosen from the color palette. Pixels of equal brightness will be given the same color, which creates a "banding" effect. The mapping of colors is accomplished with the paletteMap mathod of the BitmapData class. This method is very interesting and useful; a tutorial on the details of this method is coming soon to flashandmath!
- WoodPatternData is now drawn to a bitmap called DisplayBitmap which will be a child of the texturized Sprite. While drawing WoodPatternData to DisplayBitmap, the texture is scaled down smoothly by a factor of two lengthwise.
- Finally, the DisplayBitmap must be given the correct shape based on the source Sprite. This is done by drawing the source Sprite to yet another BitmapData object, then copying the alpha of this BitmapData to the DisplayBitmap.
After the texture is created, there is one final step in the creation of the WoodTexture object. An inner GlowFilter is applied which has a dark color; this creates the effect of rounded edges on the final image. If the parameter roundingAmount is set to zero, this Glowfilter will not be applied.
About the Hit Area
In order to make the created WoodTexture Sprite have the same active mouse area as the source Sprite, we add the source Sprite as a child to the WoodTexture Sprite, set its alpha to zero (to make it invisible but still active), and then set the hitArea parameter of the WoodTexture Sprite to be this invisible Sprite.
The reason we must do this is because the WoodTexture Sprite has a Bitmap object (which contains the texture) as its child. A Bitmap is not an interactive object, but when added as a child to a Sprite, it becomes part of the active mouse area of the Sprite. But the Bitmap is rectangular and may not match the shape of the source Sprite.