Video: Auto-Reversing Transitions in Flex 4

First, this new flash (or would that be Flash news?):

CodeDependent now has a channel on YouTube!

Yes, finally, for all of those bored people surfing the web looking for funny videos, there is now a channel that talks exclusively about animation and graphics programming. Oh, my kids will be so happy.

Now, back to our regular programming...

Auto-Reversing Transitions in Flex 4, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

This show is about the new autoReverse property in Flex 4 transitions. By default, Flex transitions stop any currently-running transition before running a new transition. So if you're currently animated from stateA to stateB and you trigger a change back to stateA, Flex will stop the A->B transition and then start the B->A transition from the beginning. This sometimes causing jarring behavior, where the visuals may pop to the end of the previous transition, or sometimes even worse artifacts. Flex 4 offers a new, simple property, autoReverse, which lets you tell Flex to stop the current transition and start the next one from that same point in time. In the A->B example above, if you trigger a change back to stateA when the A->B transition is halfway through, then Flex will stop the A->B transition and start the B->A transition from that midway point.

This feature is a small step toward more general, useful interruption and reversing behavior that I'd like to see in transitions eventually. There are some important constraints to this behavior, such as having to actually define that reverse transition (we don't create it for you) and making sure that your transition effects are true reverses of each other (which can include some tricks like using a Pause effect on the reverse transition to account for a startDelay in the forward transition). It's also important to note (since this just came up in my work yesterday from a use case from the tools team) that using assymetric easing (which is not the defaul) can make this tricky. So this feature is not necessarily for all situations, but it is useful for some common cases and can make Flex transitions an even smoother and cooler UI experience than they are already.

Here's the video:

Here are the demo applications:

and

And here is the source code for the first and second demos.

Here's where you can find CodeDependent on iTunes.

And here's where you can find CodeDependent on YouTube.

Enjoy.

Cloudy Day

I don't normally post anything here outside of stuff I'm currently hacking, but I can't help taking a moment of silence to respect the fallen. I checked my tech stock quotes page online this morning and saw this:

Sad, but true: Sun is no more. Gray skies ahead, chance of rain.

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.

Video: Animating Button State Changes

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, in which we saw how differences in a component's state can be communicated to the user through visual changes in that state. In this espisode, we see how we can animate some of those visual changes by hacking some simple transitions into the standard Flex 4 button skin. This is a tutorial not only on how to add some simple animations for color and visibility changes, but also how to customize standard Flex components by editing the skin markup.

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.

Video: Visual Component State Feedback

Visual Component State Feedback, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

This show covers some of the concepts around component state. In particular, I talk about different ways of giving visual feedback to the user about the current state of components, in this case the over and down state of a Button. I also take a detour and discuss (what else?) an animation of a temporary text label, including the use of disabling mouse events to fix some interaction artifacts that I encountered when writing the demo application.

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.