Examples and Comments

We present a custom AS3 MarbleTexture class for creating marble-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 and copyChannel as well as DisplacementMapFilter and ColorMatrixFilter. Textures come in three colors: pink, blue, and white. Click on a screen shot below or on the corresponding text link to open a Flash movie with examples in a new window.

'Pink' radio button selection gives:
'Blue' radio button selection gives:

Download

  • Download all source files corresponding to this effects: marble.zip

Download the zip package linked above for the complete, commented, and easy to customize source code.

MarbleTexture AS3 Class

Using the MarbleTexture class is similar to using the WoodTexture class: create a Sprite with whatever graphics and display children you like, then feed this Sprite to the constructor of the MarbleTexture class. See AS3 WoodTexture Class - Apply Wood Texture to Any Display Object for detailed explanations.

There are a few parameters available for customization of the texture. These include roundingAmount and roundingSize, which control how the marble appears to round three dimensionally near the borders of the display object. Also some coloring parameters are available, which are used inside the class to modify a ColorMatrixFilter: brightenFactor, fullColor, and offsetColor. See the colors used in the code of our example above and experiment with different values. More detailed information on these parameters is given below.

How MarbleTexture Class Works

The marble texture is based on Perlin noise. Since the color variations in Perlin noise alone are a little too rounded and smooth looking to appear like marble, we distort it. We have found that using a DisplacementMapFilter on the Perlin noise bitmap does the trick, with the Perlin noise bitmap itself serving as the displacement map. This creates a more jagged variation of hues.

After distorting the Perlin noise BitmapData object, we transform its color with a ColorMatrixFilter. This filter is constructed in such a way so that only one channel of the Perlin noise (the red channel) is used to control the output color. When the red value of a pixel is zero, a base color called the offsetColor will result in the output image. Increasing amounts of red will cause increasing amounts of another color, fullColor, to be mixed into the output color. (This color is called fullColor because it will be the color achieved when a source pixel is at its maximum red value.) The color variation is made more intense by increasing the brightenFactor value, which brightens the value of a pixel before it is read to determine the output color.

See our comments on the WoodTexture class at AS3 WoodTexture Class - Apply Wood Texture to Any Display Object for more details about the methods used to map the texture to a given Sprite.

Related Flash and Math Tutorials

Here are a few Flash and Math tutorials related to Perlin Noise, ColorMatrixFilter, DisplacementMapFilter, and paletteMap:

The latter, wood texture, example uses Perlin Noise and the paletteMap method of the BitmapData class.

Back to Flash CS5 Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.