Friday, February 12, 2010

Video: Simple Container Effects: The Sequel!

Simple Container Effects, Part 2, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

This episode is the sequel to last week's cruel joke that showed how to animate adding and removing items to/from a VBox ... sorta. It turns out that the automatic gap that VBox adds for new items, or removes for deleted items, causes a jarring snap that makes the approach in last week's show less than perfect. It worked okay, but we can do better.

This week's episode shows a completely different approach to solving the problem via state transitions. In this case, we're not actually changing states in the application. But that doesn't mean we can't use the mechanism of state transitions to help automate these effects.

Note that this is a Flex 3 app. I've been talking about Flex 4 a lot these days (it's kinda on my mind recently, given where we're at with that product), but there's a lot of cool stuff you can do with Flex 3 effects as well. This example, like last week's, is all Flex 3.

Here's the video:

Here is the demo application:

And here is the source code.

Here's where you can find CodeDependent on iTunes.

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



Fernando Cola├žo said...

If you click in 2 buttons (second clicked while transition of the first is running), a full button sited gap is left between the buttons.

Tink said...

Ez Chet

'Last weeks cruel joke' was a better implementation.

This weeks version still jumps if you add or remove more than 1 button at a time, and as Fernando says it can end up leave a gap.

Last weeks code was easier to read, and worked perfectly if (as I mentioned in the comments) u tweened the height to and from -6 to allow for the verticalGap on the VBox.