The following example shows how you can customize the move easing function on a wipe effect.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/11/changing-the-default-easing-function-on-a-wipe-effect/ -->
<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:WipeLeft id="wipeLeft"
            target="{image}"
            moveEasingFunction="Elastic.easeOut"
            duration="5000" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Start wipe"
                click="wipeLeft.play();" />
    </mx:ApplicationControlBar>

    <mx:Image id="image"
            source="assets/flex_sm.png" />

</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.

2 Responses to Changing the default easing function on a Wipe effect

  1. Tahir Alvi says:

    Very nice work but if we used the fade and easing function what is result, consider it.

  2. Tahir Alvi says:

    Hi,

    How Wipe effect apply in Flex 4.

    when we sue spark

    Thanks

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