One of the fairly simple applications I’ve been impressed with since switching to Mac OS X about a year ago is Toast. Particularly, I like the way they use a morphing effect. A similar effect is used throughout Mac OS X.
As a simple UX exercise I decided to recreate the Google Talk install process in Flex and then apply some morphing transitions. In this example I’ve used the recently released Yahoo! Flex Skin to approximate a desktop look and feel. Thanks to the guys at Yahoo! Flash Dev for getting this out.
In this first example you’ll see a sequence dialogs very similar to the Google Talk install process.
In the second I’ve added a morph effect similar to the effect that Toast uses. In my opinion using a subtle effect like this drastically improves the user experience (UX).
Let me know what you think, drop a comment…
I really like that. I’ve been struggling with how to add transitions to an application w/o them getting annoying, you know like the bounce effect or something like that.
I’m wondering how you did this. Did you use a viewstack or states? Did you use tweener to animate between the different views?
Would you be open to posting the source for your examples? I’d really appreciate them if you did.
Otherwise, you could email me at dobieag01 at gmail dot com.
Later,
Mark
Hi Mark,
Thanks for the comment. This is basically just a parallel effect that combines Fade, Resize, and Move. The effect is applied to a bitmap copy of the components so that Flex doesn’t have to calculate layout at each step. Also, using this technique makes it easier to get a true Fade effect of text, which can be a tricky thing.
I’m not sure if I can release this code, but I’ll find out and post it here if I can.
Feel free to send me an e-mail off line if you’d like. adamflater [at] gmail.com.
thanks
-adam