Very simple flex animation not moving along x axis

Question

I'm trying to use Animate in MXML to move a button along X or Y axis. My button increase width when clicked, but does not move at all. What is wrong with this code ? It should be something really simple, but I can't find it.

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"
    initialize='init()'>

    <fx:Script>
        <![CDATA[
            public function init():void {}
        ]]>
    </fx:Script>

    <s:layout>
        <s:VerticalLayout id='l' horizontalAlign="left" />
    </s:layout>

    <fx:Declarations>
        <s:Animate id="mover" target="{button}" duration="1000">
            <s:SimpleMotionPath property="x" valueFrom="0" valueTo="100"/>
            <s:SimpleMotionPath property="y" valueTo="100"/>
            <s:SimpleMotionPath property="width" valueBy="20"/>
        </s:Animate>
    </fx:Declarations>  

    <s:Button id="button" click="mover.play()" label="Button"/>

</s:Application>

I got this sample from Adobe docs. I think it should be related to layout or something like that, but all my tries of changing layout, including into a Canvas or other tricks does not change anything : the button still stay at the same place.

Thanks for your help !

Answer 1

The problem is caused by the use of the VerticalLayout. This layout, as well as the HorizontalLayout, ignores x/y properties of the objects that are being laid out.

If you remove your layout declaration altogether, it will then use the default BasicLayout which will honor the x/y properties and allow your animation to work.