Flex 2: Building an animated "Sometimes" DividedBox
Posted by Joe Rinehart at 8:01 AM
9 comments - Categories:
Flex
I've got a situation where I need to simulate the iTunes look of having a master list take up all of a panel's width/height, with the ability to optionally split the area into a divided box to show detail information.
With Flex 2, it's uber-easy to do this in a slick manner: you can just use a VDividedBox and states to add/remove the detail as the first child of the VDividedBox.
If you want to skip the explanation and see the finished product, it's available at:
http://www.firemoss.com/demos/flex/dividedbox/
Source code:
http://www.firemoss.com/demos/flex/dividedbox/srcview/index.html
I wanted to take this a bit further, though, and animate the transition. At first glance, you'd think you could do it by using two <mx:Transition> - one containing the <mx:Resize> that shows the detail, and another containing the <mx:Resize> that hides the detail.
Nope - it looks like the state change removes the detail area before playing the transition.
So, how can we get it to work? It's actually not bad at all: create a function called something like "hideDetail," move our "hide" resize our of a transition, and tell it to play hideDetail when it's done.
It wouldn't be hard to take this further, turning it into a reusable component extending the desired type of divided box.
darron wrote on 12/05/06 9:35 AM
For the transition, look at using the mx:RemoveChildAction tag in a sequence effect after a resize effect. That will delay removing the child until after the resize is done.