Simple Container Effects, Part 1, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.
A couple of months ago, someone asked on my blog how they could run simple effects on a container like VBox when adding or removing items. So I took a run at it and came up with this example. It's not that complicated - you basically create a Sequence effect that resizes the object in question and fades it in/out (based on whether it's coming or going).
It's also not a perfect solution: run the demo and you'll see a [snap] at the beginning of the adding effect or the end of the removing effect. It's not that bad, but maybe we can do better. And we will in Part 2, next week... (whoa, talk about cliff-hangers!)
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 is all Flex 3.
Here's the video:
Here is the demo application:
Here's where you can find CodeDependent on iTunes.
And here's where you can find CodeDependent on YouTube.
Enjoy.
8 comments:
^ she sounds scarey!
This would look a lot smoother if you tween the height to and from -6 instead of 0.
This would then take care of the verticalGap style on the VBox, which is causing those little jumps in the animation.
Chet!!!!! What is the purpose of this suspense!!! Cannot wait to see the "better" approach!!!!
Oh almost forgot - thanks for another excellent tutorial.
Chet if all the child are removed and then add button is clicked, the following error is generated:
RangeError: Error #2006: The supplied index is out of bounds.
at flash.display::DisplayObjectContainer/addChildAt()
at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::$addChildAt()
at mx.core::Container/addChildAt()
at VBoxInsertDelete/addRow()
at VBoxInsertDelete/___VBoxInsertDelete_Button1_click()
@Tink: Yes, that'd work, although you should hinge the 'to' value on the value of the gap, in case it changes from the dfault value of 5.
I took a completely different approach in the sequel, due later this week.
@Viv: Like most of my apps, this demo was written just to show a particular technique. So I'm not shocked that it's not handling error conditions robustly. I'll try to get around to fixing/posting it...
In this example you are addressing how to applying effect in the event of adding one child at a time in a container. I believe that this effect is only suitable iff only one child is added at a time. But what about adding multiple children?
For an instnce suppose in this example we have 2 buttons which triggers the populate event for the vbox. If button one is clicked we remove all the child from vbox and add 4 button children. If the button second is clicked the vbox loses all its children and then add 5 button children. Now the million dollar question is what kind of effect is suitable when you are adding multiple children? Please answer it with one super cool example/tutorial :-)))
@Viv: Yes, that's a completely different situation. Note the title of the blog: "*Simple* Container Effects".
The long-term answer is that I would like to see "container effects" added to Flex itself. This would enable generalized animations on containers and data containers, like the old data effects, but expanded to cover general containers as well.
In the short term, I'll see if there's some general approach that you could use.
please, please, PLEASE post this exact same thing using a datagroup with a verticallayout in Flex 4! This is exactly what I'm trying to do in flex 4 and I'm totally lost.
@Viv: note that the adding-to-empty-container bug is fixed now
Post a Comment