Thursday, January 21, 2010

Video: Animating Gradients for 3D Look and Feel

Animating Button State Changes, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

This show is a continuation of the previous CodeDependent episode, Animating Button State Changes, in which we saw how to animate some of the properties in a button's skin as it the button changed between states. In this espisode, we see how we might animate the look of a more graphical button as the user pushes on it, animating properties of gradients which give the object a 3D-ish look.

Here's the video:

Here is the demo application:

And here is the source code.

Finally, here's where you can find the CodeDependent videos on iTunes.

Enjoy.

2 comments:

Dr.Drane said...

Nice demo (again) Chet!

Will see if I can easily modify it so that the animated down state gradient appears exactly underneath the cursor.

Kind regards,

Jochen

ps: somehow I feel the sudden urge of getting myself a new pair of shoes ;p

Chet Haase said...

@Dr.Drane: Yeah, that was the next step I was thinking about, translating the mouse xy position into the appropriate rotation and center for the gradient. But it didn't happen this time around. Shouldn't be too hard, and might make the effect more dynamic.
There's still something that breaks down for the 3D-ness of it, where the actual highlights you want to mimic would be much more complex with the dimple, shaded more on one side than the other, depending on where the virtual light source is. The center dimple simplifies it because it mimics a light source directly behind you; not sure if it would work as well for an off-center dimple.