Rotating 3D Marquee Experiment (with Source)

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.

20 Responses

  1. JuniHH says:

    Amazing all this. Specially the third.

  2. jb says:

    hello. how can i integrate an jpg image into each middle side of the rectangle?

  3. […] 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. […]

  4. 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!

  5. beng hui says:

    hi there i am creating a marquee that load images from XML setting file
    i hope u can help me wif it
    this is part of the completion i have stuck fro 2 month there
    thank alot

  6. oyunlar says:

    thanks. I love the technique. 😀

  7. Sade Araba says:

    Thanks, this technic is really perfect…

  8. Jok says:

    Hi, first really good job, hehe now second…how I can set a symbole who load dynamically an Image in the pane?

  9. Proxy says:

    WoW. That’s good. Thanks…

  10. Mr. White says:

    Sorry. I am not getting how to change out the text. Advice?

  11. lennyjpg says:

    yay, exactly what i was looking for, thanks man 🙂

  12. jiangzhemin says:

    It’s so good!

  13. dhaniels says:

    a good way to implement 3d into flash, thanxs!

  14. oyun oyna says:

    Hi, first really good job, hehe now second…how I can set a symbole who load dynamically an Image in the pane?

Leave a Reply

Your email address will not be published. Required fields are marked *