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.
3 comments:
i don't think people realize how cool this is yet... of course, i do. ~really cool~
I have been looking over your transitions and the examples are very informative. Most of the transitions you demonstrate are related to state changes, but what about using a VGroup with a TabBar and wanting to have a transition as you switch between tabs? Is there a simple way to do this or am I into the extended roll-your-own area?
@Chris: Transitions only handle state changes, so they aren't suited for your tab-switching situation. Eventually, I'd like to have 'container effects' in the SDK (think data-effects, but extended to handle any containers), but until then you're on your own with manual effects.
You might actually be able to use the current transition mechanism in a manual way, like I did in the Simple Container Effects example. Otherwise, you'll need to figure out how to handle the situation for your specific situation. For example, you could use CrossFade and supply the before/after bitmaps manually, given the before/after states of the tabs.
Anyway, it's possible to do what you want, but it'll have to be a manuall effect-playing process for now; transitions are tightly bound to the states mechanism.
Post a Comment