Paper Cutout Snowflakes and the Custom AS3 Classes Behind It

We present a Flash CS4 effect that is meant to recreate the childhood experience of cutting and unfolding paper. Cut out polygons from the triangle on the right and see the beautiful snowflake patterns emerge. The effect is based on custom AS3 classes described below. Click on the image to open the applet in a new window.

Download

  • Download all source fla and as files corresponding to this effect: paper.zip

The code uses some of the techniques from our earlier tutorials: Kaleidoscopic Gallery in Flash CS4 and Snowflake Generator in Flash CS4. The new paper-cutting effect, however, requires many additional methods discussed in the next section.

Paper Cutout Snowflake - Comments

We present a new snowflake example that makes use of our custom SnowFlake class. Here we try to recreate a childhood craft where a piece of paper is folded up, cut with scissors, and then unfolded to reveal beautiful symmetric patterns.

We have made several changes to the SnowFlake class, now called the SnowFlake2 class. In our earlier example, Snowflake Generator in Flash CS4, the doSpin() method created a kaleidoscope effect using a randomized matrix transformation to select different portions of a source bitmap. Here we want to control the portion and orientation of the bitmap which is used for the snowflake, so we have rewritten the doSpin method to accept an explicit matrix transformation.

To recreate the activity of cutting away paper with scissors, we have created a drawing board with a white triangle representing the folded paper. (We have opted for a triangle with angle measurements 30, 60, and 90 degrees, which is formed by folding up a hexagonal piece of paper.) To "cut" the triangle, polygons can be drawn on this board. The cutting effect is the result of using polygons which are the same color as the background.

Some clever usage of filters and blend modes allows us to use transparency in the rendered snowflake in the portions where the paper has been cut away. This allows us to apply a DropShadowFilter for a nice 3D effect. Here is how we accomplished this: first, the triangle is drawn on a black background, and the polygon "cuts" are also black. When it comes time to create the snowflake, this black and white Sprite is drawn to a bitmap, and a ColorMatrixFilter is used to change the alpha of each pixel in the bitmap according to its color (we explain this in more detail below). Pixels which are black are altered to have alpha equal to zero (fully transparent), while white pixels remain at alpha equaling 1 (fully opaque). The bitmap transformed in this way is used as a source bitmap for the SnowFlake2 class, which creates 12 copies of this bitmap arranged in symmetric wedges.

This method makes use of a black drawing board, but for aesthetic reasons we wanted a different background color for the board. How do we fix this? We simply draw a rectangle behind the drawing board in our preferred color. Then the drawing board with our white triangle on a black background is given a blend mode of BlendMode.ADD, which causes the white portions to appear over the background, while the black portions do not appear.

We again make use of blend modes to create a folded paper shading pattern over the snowflake. A drawing of 12 wedges of varying gray levels superimposed onto a paper texture was created on the stage and saved as a MovieClip (this MovieClip is called mcPaper, and can be seen in the library of the fla file). This wedge pattern is placed over the snowflake, and given a blend mode of BlendMode.DARKEN. Since the grays we have used for mcPaper are lighter than the background colors for the snowflake, the paper will only appear where the white snowflake is drawn. Note that for the background of the snowflake we have used a gradient fill, created programmatically. For more information on gradient fills and how to control them properly, see our How-To article: Programmatic Gradient Fills and Effects in AS3 and Flash.

The ColorMatrixFilter in Flash is a useful tool for controlling individual pixel colors in a bitmap. More specifically, it offers the ability to transform the red, green, blue, and alpha channels of each pixel by means of a 4x5 matrix transformation. For more information on ColorMatrixFilters and the meaning of the matrix entries, see the Flash documentation. We have used here the following matrix:

| 1 0 0 0 0 |
| 0 1 0 0 0 |
| 0 0 1 0 0 |
| 1 0 0 0 0 |

Applying this ColorMatrixFilter to the bitmap has the effect of keeping the red, green, and blue color values the same, but setting the alpha of each pixel to equal the red value of the pixel. Since the triangle is white, its red channel is at the maximum value of 255 (so are the green and blue channels), and the black background has a red value of zero. Thus setting alpha according to red value has the effect of making white pixels fully opaque and black pixels fully transparent.

Back to Flash CS4 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.