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.)

April 21, 2008     Meta notes

So in my last post I promised some words on why I haven’t been posting for awhile. I’ll keep this short, since blog meta chat is usually just painful.

For quite awhile I was writing mainly about UX stuff, design thoughts and speculations and what-ifs. But then I switched roles at work and started doing more programming. And the more programming I did the more I thought about programming, and the more I think about programming the less I analyze things from a UX angle. (I’ve come to the viewpoint that it’s possible to do both, but not at the same time. They require two such radically different ways of thinking — the spatial and holistic vs. the linear and analytical.)

It’s like when you’re writing fiction a lot, and you get ideas for stories constantly. But then you stop writing so much, maybe you get busy or whatever, and soon the story ideas no longer come. My point is, we think most about what we’re focused on, even when we’re not actively focusing on it.

So I hope to start posting some things that I build, like Life, and maybe some how-to’s as well. I have another Flash item that I’ll be sharing within the next couple of days. But right now I’m really just learning a lot (mainly ActionScript and Ruby on Rails), and having fun creating weird, out-there UI for the web.

Looks like I’m a programmer after all…

April 14, 2008     Fun with Flash

Long time no post. I’ll explain why, soon.

In the meantime, I’ve been occupying myself by, among other things, learning how to program ActionScript3. (I’ve been using this excellent book as a reference.)

I used to implement Checkers whenever I was trying to learn a new GUI language, but I got bored with it. The new Checkers? Conway’s Game of Life.

Check it out! Click the mouse and move it around to “draw” a starting pattern. Then release the mouse button and watch it mutate.

Go to the Flash page.