Changing the ColorPicker control’s 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 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.

Tagged as: closeDuration, closeEasingFunction, openDuration, openEasingFunction