AIRTIGHT INTERACTIVE

This swf shows a marquee of letters scrolling across a 3D panel that rotates according to the mouse position. In this post I thought it would be helpful to walk you through how I got to the final swf by combining a few different pieces of code. The swf is a combination of a custom text rendering effect using BitmapData, the DistortImage class, and a simple 3D engine. (All these examples require Flash 8 or higher).

View swf | Download source.

Initially I was experimenting with text effects using the BitmapData object. Using BitmapData can give some interesting raster effects, that you can’t create just with movieclips. With BitmapData you typically want to work on a small canvas, since calculating per pixel effects across a large area can be very CPU intensive.

The idea is to repeatedly copy a blurry letter movieclip into the bitmap using BitmapData.draw() to give the fade in effect. The fade out effect comes from copying in a 5% alpha background color every frame. After playing around for a while I came up with this:

View swf | Download Source.

Once I was here I thought it would be nice to give this a perspective effect, like watching a marquee text scroll in Time Square. True perspective effects are the holy grail for Flash developers and have been hard to achieve until recently when the awesome DistortImage class was released by the creators of Sandy (based on orginal code by the genius Andre Michelle). This class will chop up any movieClip or bitmapData into multiple triangles, then skew the triangles to fit any 4 corner points. DistortImage causes image quality loss and rendering artifacts, so this technique is not useful if you want 100% image clarity. I took the bitmapData object and applied it to a DistortImage. I also modified the text effect so that the text now scrolls horizontally.

View swf | Download Source.

Once here it was a reasonable leap to have the panel move in a 3d space. For this I could have used Sandy or similar, but really i just need a very simple engine to give a 3d perspective render on the 4 panel corner points. From this list of 3D flash engines, I found Andre Michelle’s Simple 3d Engine. Modifying this to render a plane gives this:

View swf | Download Source.

Combining the 3d plane and the DistortImage gives the SWF at top. This required converting the 3D engine to an AS2 class.

This entry was posted on Sunday, December 17th, 2006 at 1:14 pm and is filed under 3D, Flash. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.