Flex Examples » closeEasingFunction http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Changing the opening and closing easing functions on a Halo ComboBox control in Flex 4 http://blog.flexexamples.com/2009/08/05/changing-the-opening-and-closing-easing-functions-on-a-halo-combobox-control-in-flex-4/ http://blog.flexexamples.com/2009/08/05/changing-the-opening-and-closing-easing-functions-on-a-halo-combobox-control-in-flex-4/#comments Wed, 05 Aug 2009 14:20:05 +0000 Peter deHaan http://blog.flexexamples.com/?p=1504 In a previous example, “Changing the Flex ComboBox control’s opening and closing easing functions”, we saw how you could control how the open/close duration and easing functions on the drop down list in a Halo ComboBox control by setting the openDuration, openEasingFunction, closeDuration, and closeEasingFunction styles.

The following example shows how you can set [...]]]> In a previous example, “Changing the Flex ComboBox control’s opening and closing easing functions”, we saw how you could control how the open/close duration and easing functions on the drop down list in a Halo ComboBox control by setting the openDuration, openEasingFunction, closeDuration, and closeEasingFunction styles.

The following example shows how you can set the Halo ComboBox control’s openEasingFunction and closeEasingFunction styles in a <Style/> block using the new PropertyReference() method in Flex 4.

Full code after the jump.

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/08/05/changing-the-opening-and-closing-easing-functions-on-a-halo-combobox-control-in-flex-4/ -->
<s:Application name="Halo_ComboBox_openEasingFunction_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Script>
        <![CDATA[
            import mx.effects.easing.*;
        ]]>
    </fx:Script>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        mx|ComboBox {
            openDuration: 1000;
            openEasingFunction: PropertyReference("mx.effects.easing.Bounce.easeOut");
            closeDuration: 1000;
            closeEasingFunction: PropertyReference("mx.effects.easing.Bounce.easeIn");
            alternatingItemColors: #DFDFDF, #EEEEEE;
        }
    </fx:Style>
 
    <mx:ComboBox id="comboBox"
            prompt="Please select an item..."
            selectedIndex="-1"
            dropdownWidth="150"
            horizontalCenter="0"
            top="20">
        <mx:dataProvider>
            <fx:Array>
                <fx:Object label="Item 1" />
                <fx:Object label="Item 2" />
                <fx:Object label="Item 3" />
                <fx:Object label="Item 4" />
                <fx:Object label="Item 5" />
                <fx:Object label="Item 6" />
                <fx:Object label="Item 7" />
                <fx:Object label="Item 8" />
            </fx:Array>
        </mx:dataProvider>
    </mx:ComboBox>
 
</s:Application>

View source is enabled in the following example.

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.

 
]]> http://blog.flexexamples.com/2009/08/05/changing-the-opening-and-closing-easing-functions-on-a-halo-combobox-control-in-flex-4/feed/ 8 Changing the ColorPicker control’s easing duration and easing functions http://blog.flexexamples.com/2007/08/24/changing-the-colorpicker-controls-easing-duration-and-easing-functions/ http://blog.flexexamples.com/2007/08/24/changing-the-colorpicker-controls-easing-duration-and-easing-functions/#comments Sat, 25 Aug 2007 06:31:49 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/24/changing-the-colorpicker-controls-easing-duration-and-easing-functions/ The following example shows how you can control the easing duration and easing functions that the ColorPicker control uses to display its drop-down swatch palette. Of course, this probably isn’t the best example of “useful animation” and will probably just annoy users (the long 2 second easing animation), but it is nice to know that [...]]]> The following example shows how you can control the easing duration and easing functions that the ColorPicker control uses to display its drop-down swatch palette. Of course, this probably isn’t the best example of “useful animation” and will probably just annoy users (the long 2 second easing animation), but it is nice to know that you can change these if you need to.

Full code after the jump.

If you wanted to remove the animation effects altogether, you could just set the openDuration and closeDuration styles to 0 milliseconds (both default to 250 milliseconds, or ¼ of a second).

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/24/changing-the-colorpicker-controls-easing-duration-and-easing-functions/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.effects.easing.*;
        ]]>
    </mx:Script>

    <mx:Number id="easeDurationMS">2000</mx:Number>

    <mx:ColorPicker id="colorPicker"
            openDuration="{easeDurationMS}"
            openEasingFunction="Elastic.easeOut"
            closeDuration="{easeDurationMS}"
            closeEasingFunction="Elastic.easeIn"
            width="50"
            height="50" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/08/24/changing-the-colorpicker-controls-easing-duration-and-easing-functions/feed/ 0 Changing the Flex ComboBox control’s opening and closing easing functions http://blog.flexexamples.com/2007/08/18/changing-the-flex-combobox-controls-opening-and-closing-easing-functions/ http://blog.flexexamples.com/2007/08/18/changing-the-flex-combobox-controls-opening-and-closing-easing-functions/#comments Sun, 19 Aug 2007 01:19:46 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/18/changing-the-flex-combobox-controls-opening-and-closing-easing-functions/ OK, I admit that this post probably doesn’t have much real-world use, and can probably annoy users if implemented poorly, but if you’ve ever wondered how/if you can change the opening/closing duration or easing function used for a ComboBox dropdown menu, this post is for you!

This entry looks at customizing the ComboBox control’s openDuration [...]]]> OK, I admit that this post probably doesn’t have much real-world use, and can probably annoy users if implemented poorly, but if you’ve ever wondered how/if you can change the opening/closing duration or easing function used for a ComboBox dropdown menu, this post is for you!

This entry looks at customizing the ComboBox control’s openDuration and closeDuration styles which control how long it takes for the dropdown menu to appear or disappear. By default both of these styles are set to 250 milliseconds (1/4 second). We’ll also look at changing the easing method used to animate the dropdown menu. Finally, we look at explicitly setting the dropdown menu’s width so it doesn’t inherit the ComboBox’s width and alternate the row colors for the items in the dropdown.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/18/changing-the-flex-combobox-controls-opening-and-closing-easing-functions/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.effects.easing.*;
        ]]>
    </mx:Script>
 
    <mx:ComboBox id="comboBox"
            openDuration="1000"
            openEasingFunction="Bounce.easeOut"
            closeDuration="1000"
            closeEasingFunction="Bounce.easeIn"
            prompt="Please select an item..."
            selectedIndex="-1"
            dropdownWidth="150"
            alternatingItemColors="[0xDFDFDF, 0xEEEEEE]">
        <mx:dataProvider>
            <mx:Array>
                <mx:Object label="Item 1" />
                <mx:Object label="Item 2" />
                <mx:Object label="Item 3" />
                <mx:Object label="Item 4" />
                <mx:Object label="Item 5" />
                <mx:Object label="Item 6" />
                <mx:Object label="Item 7" />
                <mx:Object label="Item 8" />
            </mx:Array>
        </mx:dataProvider>
    </mx:ComboBox>
 
</mx:Application>

View source is enabled in the following example.

For an example of setting the openEasingFunction and closeEasingFunction styles in a <Style/> block in Flex 4, see “Changing the opening and closing easing functions on a Halo ComboBox control in Flex 4″.

 
]]> http://blog.flexexamples.com/2007/08/18/changing-the-flex-combobox-controls-opening-and-closing-easing-functions/feed/ 8