Animating properties using the AnimateProperties class in Flex and Flash Player 10

In a previous entry, “Rotating an image along its x-axis, y-axis, and z-axis in Flex and Flash Player 10″, we saw how you could rotate an image along the x-axis, y-axis, and z-axis by setting the rotationX, rotationY, and rotationZ properties.

The following example shows how you can use the new new AnimateProperties class to rotate of an image along the y-axis by animating the rotationY property.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/11/animating-properties-using-the-animateproperties-class-in-flex-and-flash-player-10/ -->
<Application xmlns="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library:adobe/flex/halo"
        layout="flex.layout.BasicLayout">

    <Declarations>
        <AnimateProperties id="animateProps">
            <propertyValuesList>
                <PropertyValuesHolder property="rotationY"
                        values="[0, 360]" />
            </propertyValuesList>
        </AnimateProperties>
    </Declarations>

    <Script>
        private function animateRotationY():void {
            animateProps.play([img]);
        }
    </Script>

    <Button label="Rotate y-axis"
            top="10"
            left="10"
            click="animateRotationY();" />

    <mx:Image id="img"
            source="@Embed('Fx.png')"
            width="100"
            height="100"
            horizontalCenter="0"
            verticalCenter="0" />

</Application>

View source is enabled in the following example.

You can also create the AnimateProperties object using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/11/animating-properties-using-the-animateproperties-class-in-flex-and-flash-player-10/ -->
<Application xmlns="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library:adobe/flex/halo"
        layout="flex.layout.BasicLayout"
        initialize="init();">

    <Script>
        import flex.effects.AnimateProperties;
        import flex.effects.PropertyValuesHolder;

        private var animateProps:AnimateProperties;

        private function init():void {
            var rotYProp:PropertyValuesHolder;
            rotYProp = new PropertyValuesHolder("rotationY", [0, 360]);
            animateProps = new AnimateProperties();
            animateProps.propertyValuesList = [rotYProp];
        }

        private function animateRotationY():void {
            animateProps.play([img]);
        }
    </Script>

    <Button label="Rotate y-axis"
            top="10"
            left="10"
            click="animateRotationY();" />

    <mx:Image id="img"
            source="@Embed('Fx.png')"
            width="100"
            height="100"
            horizontalCenter="0"
            verticalCenter="0" />

</Application>

You can also specify the target to animate in the <AnimateProperties /> tag, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/11/animating-properties-using-the-animateproperties-class-in-flex-and-flash-player-10/ -->
<Application xmlns="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library:adobe/flex/halo"
        layout="flex.layout.BasicLayout">

    <Declarations>
        <AnimateProperties id="animateProps" target="{img}">
            <propertyValuesList>
                <PropertyValuesHolder property="rotationY"
                        values="[0, 360]" />
            </propertyValuesList>
        </AnimateProperties>
    </Declarations>

    <Script>
        private function animateRotationY():void {
            animateProps.play();
        }
    </Script>

    <Button label="Rotate y-axis"
            top="10"
            left="10"
            click="animateRotationY();" />

    <mx:Image id="img"
            source="@Embed('Fx.png')"
            width="100"
            height="100"
            horizontalCenter="0"
            verticalCenter="0" />

</Application>