Creating a custom easing function : Easing « Effects « Flex






Creating a custom easing function

Creating a custom easing function
         

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        
        private function myEasingFunction(t:Number, b:Number, c:Number, d:Number):Number {
               return 0.2;
        };
      
    </mx:Script>
    <mx:Move id="moveLeftShow" xFrom="600" xTo="0" yTo="0" duration="3000" easingFunction="myEasingFunction" />
    <mx:Move id="moveRightHide" xFrom="0" xTo="600" duration="3000" easingFunction="myEasingFunction" />
    <mx:LinkBar dataProvider="myVS" />
    <mx:ViewStack id="myVS" borderStyle="solid">
        <mx:Canvas id="Canvas0" label="Canvas0" creationCompleteEffect="{moveLeftShow}" showEffect="{moveLeftShow}"
            hideEffect="{moveRightHide}">
            <mx:Box height="300" width="600" backgroundColor="#00FF00">
                <mx:Label text="Screen 0" color="#FFFFFF" />
            </mx:Box>
        </mx:Canvas>
        
        <mx:Canvas id="Canvas1" label="Canvas1" showEffect="{moveLeftShow}" hideEffect="{moveRightHide}">
            <mx:Box height="300" width="600" backgroundColor="#0033CC">
                <mx:Label text="Screen 1" color="#FFFFFF" />
            </mx:Box>
        </mx:Canvas>
        <mx:Canvas id="Canvas2" label="Canvas2" showEffect="{moveLeftShow}" hideEffect="{moveRightHide}">
            <mx:Box height="300" width="600" backgroundColor="#0000CC">
                <mx:Label text="Screen 2" color="#00FFFF" />
            </mx:Box>
        </mx:Canvas>
    </mx:ViewStack>
</mx:Application>

   
    
    
    
    
    
    
    
    
  








Related examples in the same category

1.Using a custom easing functionUsing a custom easing function
2.Resize with easing functionResize with easing function
3.Easing DemoEasing Demo
4.Bounce and Elastic easing classesBounce and Elastic easing classes