Animate in custom layout.

Question

Hi,
I would like some help regarding the following code please:
package
import flash.events.Event;
import flash.events.MouseEvent;
import mx.graphics.SolidColor;
import spark.components.BorderContainer;
import spark.components.Button;
import spark.components.Group;
import spark.effects.Animate;
import spark.effects.animation.MotionPath;
import spark.effects.animation.SimpleMotionPath;
public class TestGroup extends Group
private var anim:Animate;
private var bc1:BorderContainer;
private var bc2:BorderContainer;
private var btn:Button;
public function TestGroup()
super();
override protected function createChildren():void
super.createChildren();
bc1 = new BorderContainer();
bc1.backgroundFill = new SolidColor(0);
this.addElement(bc1);
btn = new Button();
btn.label = "test";
btn.addEventListener(MouseEvent.CLICK, test_clickHandler, false, 0, true);
bc1.addElement(btn);
bc2 = new BorderContainer();
bc2.backgroundFill = new SolidColor(0x7A7A7A);
this.addElement(bc2);
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
super.updateDisplayList(unscaledWidth, unscaledHeight);
this.width = unscaledWidth;
this.height = unscaledHeight;
// Size everything.
bc1.setActualSize(this.width, 50);
bc2.setActualSize(this.width, this.height);
// Move everything.
btn.x = 100;
bc1.move(0, 0);
bc2.move(0, bc1.height);
private function test_clickHandler(event:Event = null):void
anim = new Animate(bc2);
anim.disableLayout = true;
var xSMP:SimpleMotionPath = new SimpleMotionPath("y", bc2.y, 100);
var widthSMP:SimpleMotionPath = new SimpleMotionPath("width", bc2.width, 225);
anim.motionPaths = new <MotionPath>[xSMP, widthSMP];
anim.play();
The animation "anim" does not play, from my understanding this is due to the fact I am setting the size and position of "bc2" in updateDisplayList (if the setActualSize and move of bc2 are commented the animation plays).
What I do not understand is why is the updateDisplayList called even though disableLayout has been set to true?
What is the best way to handle this? (set the size and position in createChildren...?)

Answer 1

Group isn't responsible for sizing and positioning its elements, that is what the layout is responsible for.  It sounds like you want to write a custom layout.
These links might be useful:
http://evtimmy.com/2010/04/two-examples-of-layout-animations/
http://flexponential.com/2010/03/06/learn-how-to-create-a-simple-virtual-layout-in-flex-4/