animation - x軸に沿って移動しない非常に単純なフレックスアニメーション

Question

MXMLでAnimateを使用して、X軸またはY軸に沿ってボタンを移動しようとしています。クリックするとボタンの幅が広がりますが、まったく動きません。このコードの何が問題になっていますか？本当にシンプルなはずですが、見つかりません。

<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>

このサンプルはAdobeのドキュメントから入手しました。レイアウトなどに関連していると思いますが、Canvasやその他のトリックを含め、レイアウトを変更しようとしても何も変わりません。ボタンは同じ場所にとどまります。

ご協力いただきありがとうございます ！