Experimenting with drawTriangles

Published on Sun 27 Feb 2011 by Will

I've spent a bit of time today experimenting with the drawTriangles method of the Graphics class in Flash 10. This unassuming method allows for some very interesting effects. The following 3 examples are just some of the types of effects which can be achieved.

I've touched on using drawTriangles in a previous article, Distort an image in Flash 10 with DrawTriangles, so be sure to read that if you're a little confused as to how this works.

I started by creating a 2D mesh of vertices. On each frame we move the vertices and re-render the image. This creates the animated effect. I ended up creating a class to handle the creation of the mesh as well as expose the individual vertices for animation. On each frame I loop over each vertex and animate it using TweenLite. While I'd like to take credit for the mesh creation code I adapted it from page 338 of Keith Peter's excellent book, Advanced Actionscript 3.0 Animation. I highly recommend this book if you don't already own it.

Try the following examples by simply clicking on each image.