The following example shows how you can change the open duration and open easing function on a Tree control in Flex by setting the openDuration and openEasingFunction styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/27/changing-the-open-duration-and-easing-function-on-a-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

    <mx:XMLListCollection id="xmlListColl">
        <mx:source>
            <mx:XMLList>
                <node label="One">
                    <node label="One.1" />
                    <node label="One.2" />
                    <node label="One.3" />
                </node>
                <node label="Two">
                    <node label="Two.1" />
                    <node label="Two.2" />
                    <node label="Two.3" />
                </node>
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:Tree id="tree"
            dataProvider="{xmlListColl}"
            labelField="@label"
            selectionColor="haloBlue"
            textSelectedColor="white"
            openDuration="3000"
            openEasingFunction="Bounce.easeOut"
            fontSize="24"
            fontWeight="bold"
            rowHeight="40"
            rowCount="4"
            width="300" />

</mx:Application>

View source is enabled in the following example.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

4 Responses to Changing the open duration and easing function on a Flex Tree control

  1. thebouv says:

    Is it just me or does this not work very well with FileSystemTree?

  2. peterd says:

    thebouv,

    I’ve never tried a FileSystemTree control, but if it looks like a bug can you please file a bug (and include a simple test case, if possible) at http://bugs.adobe.com/flex/ if it isn’t already in the bugbase. (Please file against the “Flex SDK” project and “AIR: File System Tree” Component.)

    Thanks,
    Peter

  3. thebouv says:

    Hope I made sense in my bug report:

    http://bugs.adobe.com/jira/browse/SDK-17846

    So, while I wait to find out about that, any hint on dragging a folder onto an AIR app and listing the directories/files/subdirectories in a Tree instead of a FileSystemTree? :-)

  4. Jacob says:

    How do you respond to the end of that effect though? some type of effect_end event or something. I can’t seem to figure that out..
    Day late and a dollar short.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree