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).
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:
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.
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:
Combining the 3d plane and the DistortImage gives the SWF at top. This required converting the 3D engine to an AS2 class.
Latest Tweets
Amazing all this. Specially the third.
hello. how can i integrate an jpg image into each middle side of the rectangle?
Thanks.
[…] Martes, febrero 6th, 2007 in Tecnologia Señores deben ver estos experimentos 3D hechos en Flash por Airtight. Sus trabajos son siempre impresionantes y estos no se quedan atras. Veanlos. […]
The second swf reminds me of the opening of Good Will Hunting – one of my all time favs. I love the technique. Keep up the great site!
hi there i am creating a marquee that load images from XML setting file
i hope u can help me wif it
http://www.mediafire.com/?8gzguhsnjmo
this is part of the completion i have stuck fro 2 month there
thank alot
Thanks
thanks. I love the technique. 😀
Thanks, this technic is really perfect…
Hi, first really good job, hehe now second…how I can set a symbole who load dynamically an Image in the pane?
thanks!
WoW. That’s good. Thanks…
Sorry. I am not getting how to change out the text. Advice?
yay, exactly what i was looking for, thanks man 🙂
Thanks
It’s so good!
a good way to implement 3d into flash, thanxs!
http://www.oyunlars.net
thank you
ThanklYou
Oh thank you
thank you.
http://www.oyunbakteri.com
thank you
Hi, first really good job, hehe now second…how I can set a symbole who load dynamically an Image in the pane?
thanks!