Question

I’m looking to animate a popup window using the effect.

The problem is that the effect is applied to the content of the popup window, not the popup window itself (including the title bar, minimize, maximize buttons etc)

Have a look at the result here..

My code is really simple and logically, should work if it is possible to animate a window.

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
        <![CDATA[
            import comps.MyWin;

            [Bindable]
            private var _win:MyWin;

            protected function openPopup():void
            {
                _win = new MyWin();
                _win.width = 300;
                _win.height = 300;
                _win.open();    
            }

            protected function animatepopup():void
            {
                MyEffect.play();
            }

        ]]>
    </fx:Script>


    <fx:Declarations>
        <s:Move id="MyEffect" xFrom="{_win.x}" xTo="{_win.x + 150}" target="{_win}"/>
    </fx:Declarations>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <s:Button label="Open" click="openPopup()"/>

    <s:Button label="Animate" click="animatepopup()"/>

</s:WindowedApplication>

Answer 1

I think you need to target the object’s NativeWindow instance in order to move and resize the object.

Thus, replace _win.myProperty with _win.stage.nativeWindow.myProperty:

<s:Move id="MyEffect" xFrom="{_win.stage.nativeWindow.x}" xTo="{_win.stage.nativeWindow.x + 150}" target="{_win.stage.nativeWindow}"/>

Then, the animation will affect the NativeWindow and not the internals of the window.