Full code after the jump.

And a big thanks to The following example shows how you can tab through a series of Spark TextInput controls in Flex 4 and auto-scroll the VGroup container so that the currently focused text field has focus by using the fractionOfElementInView() method, getScrollPositionDeltaToElement() method, and verticalScrollPosition property.

And a big thanks to Hans Muller for explaining this all to me.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/11/02/auto-scrolling-the-contents-of-a-vgroup-container-in-flex-4/ -->
<s:Application name="Spark_VerticalLayout_getScrollPositionDeltaToElement_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <fx:Script>
        <![CDATA[
            import mx.core.IVisualElement;
            import spark.layouts.VerticalLayout;
 
            protected function textinput_focusInHandler(evt:FocusEvent):void {
                var idx:int = vg.getElementIndex(evt.currentTarget as IVisualElement);
                var lay:VerticalLayout = vg.layout as VerticalLayout;
                if (lay.fractionOfElementInView(idx) < 1) {
                    lay.verticalScrollPosition += lay.getScrollPositionDeltaToElement(idx).y;
                }
            }
        ]]>
    </fx:Script>
 
    <s:Scroller id="scrllr"
            focusEnabled="false"
            hasFocusableChildren="true"
            height="100"
            horizontalCenter="0" verticalCenter="0">
        <s:VGroup id="vg"
                paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10">
            <s:TextInput text="One" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Two" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Three" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Four" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Five" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Six" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Seven" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Eight" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Nine" focusIn="textinput_focusInHandler(event);" />
        </s:VGroup>
    </s:Scroller>
 
</s:Application>

If you wanted to add a little scrolling animation (’cause who DOESN’T love animation!?), you could use an Animate with a SimpleMotionPath, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/11/02/auto-scrolling-the-contents-of-a-vgroup-container-in-flex-4/ -->
<s:Application name="Spark_VerticalLayout_getScrollPositionDeltaToElement_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <fx:Script>
        <![CDATA[
            import mx.core.IVisualElement;
            import spark.layouts.VerticalLayout;
 
            protected function textinput_focusInHandler(evt:FocusEvent):void {
                var idx:int = vg.getElementIndex(evt.currentTarget as IVisualElement);
                var lay:VerticalLayout = vg.layout as VerticalLayout;
                if (lay.fractionOfElementInView(idx) < 1) {
                    pth.valueBy = lay.getScrollPositionDeltaToElement(idx).y;
                    anim.play([lay]);
                }
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <s:Animate id="anim" duration="500">
            <s:motionPaths>
                <s:SimpleMotionPath id="pth" property="verticalScrollPosition" />
            </s:motionPaths>
        </s:Animate>
    </fx:Declarations>
 
    <s:Scroller id="scrllr"
            focusEnabled="false"
            hasFocusableChildren="true"
            height="100"
            horizontalCenter="0" verticalCenter="0">
        <s:VGroup id="vg"
                paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10">
            <s:TextInput text="One" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Two" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Three" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Four" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Five" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Six" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Seven" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Eight" focusIn="textinput_focusInHandler(event);" />
            <s:TextInput text="Nine" focusIn="textinput_focusInHandler(event);" />
        </s:VGroup>
    </s:Scroller>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 

Full code after the jump.

To use the following code, you must have Flash Player 10 and [...]]]> The following example shows how you can apply an easing function to a property animation in Flex with the beta Gumbo SDK and Flash Player 10 by setting the easingFunction property on the AnimateProperties object instance.

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/12/using-an-easing-function-with-the-animateproperties-class-in-flex-and-flash-player-10/ -->
<Application name="AnimateProperties_easingFunction_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library:adobe/flex/halo"
        layout="flex.layout.BasicLayout">

    <Declarations>
        <AnimateProperties id="animateProps"
                easingFunction="Elastic.easeOut"
                duration="4000">
            <propertyValuesList>
                <PropertyValuesHolder property="rotationY"
                        values="[0, 360]" />
            </propertyValuesList>
        </AnimateProperties>
    </Declarations>

    <Script>
        import mx.effects.easing.*;

        private function animateRotationY():void {
            animateProps.stop();
            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 set the easingFunction property in ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/12/using-an-easing-function-with-the-animateproperties-class-in-flex-and-flash-player-10/ -->
<Application name="AnimateProperties_easingFunction_test"
        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;
        import mx.effects.easing.*;

        private var animateProps:AnimateProperties;

        private function init():void {
            var rotYProp:PropertyValuesHolder;
            rotYProp = new PropertyValuesHolder("rotationY", [0, 360]);
            animateProps = new AnimateProperties();
            animateProps.easingFunction = Elastic.easeOut;
            animateProps.duration = 4000; // ms
            animateProps.propertyValuesList = [rotYProp];
        }

        private function animateRotationY():void {
            animateProps.stop();
            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>

 

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your [...]]]> The following example shows how you can repeat a property animation in Flex with the beta Gumbo SDK and Flash Player 10 using the AnimateProperties class and repeatCount 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/12/repeating-an-animation-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"
                repeatCount="{numericStepper.value}">
            <propertyValuesList>
                <PropertyValuesHolder property="rotationY"
                        values="[0, 360]" />
            </propertyValuesList>
        </AnimateProperties>
    </Declarations>

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

    <mx:HBox top="10" left="10">
        <mx:NumericStepper id="numericStepper"
                minimum="0"
                maximum="10"
                value="1" />
        <Button label="Rotate y-axis"
                click="animateRotationY();" />
    </mx:HBox>

    <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 set the repeatCount property using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/12/repeating-an-animation-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.stop();
            animateProps.repeatCount = numericStepper.value;
            animateProps.play([img]);
        }
    </Script>

    <mx:HBox top="10" left="10">
        <mx:NumericStepper id="numericStepper"
                minimum="0"
                maximum="10"
                value="1" />
        <Button label="Rotate y-axis"
                click="animateRotationY();" />
    </mx:HBox>

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

</Application>

 

The following example shows how you can use the new new AnimateProperties class [...]]]> 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>