VGroup: How to have a new element show up smoothly (resize) when added/removed

Question

When adding/removing elements to/from a VGroup I need it to happen smoothly, resize the item. I believe I have to use transition effects. But how?

1. At item (element) level?
2. At VGroup level?
3. Should I use a DataGroup instead and do it at ItemRenderer level?

I've been trying to do it at item level but I still didn't manage to make it work and somehow it doesn't feel right. It feels like it should be done at a higher level.

For example, I defined a "death" state which resizes the item to height=0. But then, after it shrunk, it has to somehow notify VGroup in order for it to be removed or remove itself from VGroup. It feels unnecessarily complicated.

What I am hoping for is a way to associate an effect to inserting and removing items from a VGroup? Any ideas?

Thanks in advance, Nuno

Answer 1

I believe I found the proper way to do this. There are two events "addedEffect" and "removedEffect" which are called when a component is added as a child of a VGroup.

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" 
         width="100%"
         addedEffect="{addedEffect}" 
         removedEffect="{removedEffect}" 
         clipAndEnableScrolling="true" xmlns:gui="gui.*">

  <fx:Declarations>

    <s:Sequence id="addedEffect" targets="{[this, callWindow]}">
      <s:Move duration="300" xTo="0" target="{callWindow}" />
    </s:Sequence>

    <s:Sequence id="removedEffect" targets="{[this, callWindow]}">
      <s:Move duration="300" xFrom="0" xTo="300" target="{callWindow}" />
      <s:Scale target="{this}"
               scaleYFrom="1.0" scaleYTo="0.0" 
               duration="300"/>
    </s:Sequence>

  </fx:Declarations>

  <gui:CallWindow id="callWindow"
                     width="100%" minHeight="0" x="300" />

</s:Group>

So it is done at item level but there is an elegant way to do it.

Thanks, Nuno

Answer 2

I have put the following code in a HGroup (would be the exact same for VGroup) to do a resize effect for when the components are added to a panel/container, could point you in the right direction. You can see it working a the following link:

http://bbishop.org/blog/?p=448

public class ComboContainer extends HGroup
    {
        private var resizeEffect:Resize;
        private var fadeEffect:Fade;

        private var defaultHeight:int = 50;

        public function ComboContainer()
        {
            super();
            this.height 0;
            this.verticalAlign = flashx.textLayout.formats.VerticalAlign.MIDDLE;    
            this.addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete);
        }

        private function onCreationComplete(event:Event):void{

            resizeEffect = new Resize();
            resizeEffect.heightFrom = 0;
            resizeEffect.heightTo = defaultHeight;
            resizeEffect.duration = 200;

            fadeEffect = new Fade();
            fadeEffect.alphaFrom = 0;
            fadeEffect.alphaTo = 1;
            fadeEffect.duration = 200;

            fadeEffect.play([this]);
            resizeEffect.play([this]);
        }