April 28, 2008     OS X Widget-style rotation in Flash

For my first Flash assignment at work, a designer asked me if I could work up a version of the OS X Dashboard Widget effect, where the widget rotates in 3D around the y-axis, to reveal a set of controls or additional information on the “back”. The project turned out to be more difficult than I originally thought, especially since I wanted to make it easily reusable and customizable. But hey, what better way to learn?

Since I haven’t figured out yet how to embed Flash objects in WordPress (any tips? Please?), you can go here to check out my example. Just click on the little “i” icon to see it rotate.

http://www.bri-lance.net/Flash/WidgetFlip.html

An extremely large portion of this code, probably about 80%, was taken from this tutorial by Barbara Kaskosz at the wonderful website FlashandMath.com. So lots of credit goes to them.

I basically adapted their code, which works with bitmaps, to handle any group of Flash objects. At “spin time”, it copies those objects into a Bitmap, slices up the bitmap into 1-px wide vertical slices, and distorts those slices according to some neat equations that I got from their site. (This is necessary because you can’t do a free distort on Flash objects with ActionScript alone.)

I’m throwing out the code in hopes that it might be useful, or at least interesting, to someone else.
The ActionScript file can be found at http://www.bri-lance.net/Flash/WidgetFlip.as,
and the .fla that I used can be found at http://www.bri-lance.net/Flash/WidgetFlip.fla. Every line in the ActionScript that you might need to change to customize the file for your own use is marked with a comment beginning with //CHANGE, that explains what the line does and how you can customize it.

Some ideas for usage:

1) Display data on the front, configuration or customization controls on the back (this is what my example shows)
2) Charts and graphical data on the front, tabular data on the back
3) Summary information on the front, more in-depth information on the back
4) Two disparate views of the same data

Enjoy! (I know I am.)

1 Comment »

  1. Bri,

    Great example. Thanks for sharing.

    To embed Flash objects in Wordpress you can use The Kimili Flash Embed (http://kimili.com/plugins/kml_flashembed)

    Comment by Gilbert Mizrahi — June 10, 2008 @ 3:24 pm

RSS feed for comments on this post. TrackBack URI

Leave a comment