Slide Move Effects to your Flex Components

I was just playing around with a simple effect in flex that gives you a slider feeling... how you slide your closet? This is pretty simple and many starters would already know. I was just playing with it to see how i can create dynamic elements and have those dynamically created elements play this effect.

Simple Plain code

 

 

      private function onClickNext():void
      {
       var xByValue:Number = -455;
       loopNavigator.xBy = xByValue; 
       
       loopNavigator.play([panel1, panel2, panel3, panel4]);
      }
      
      private function onClickPrevious():void
      {
       var xByValue:Number = 455;
       loopNavigator.xBy = xByValue; 
       
       loopNavigator.play([panel1, panel2, panel3, panel4]);
      }

This is how the output would look like (crude form)

 

Dynamically added Elements will now animate with this code (crude form)

   import mx.controls.Text;
   import mx.containers.Panel;
   import mx.effects.easing.Bounce;
   
   public var tmpPanelElements:Array = new Array();
   
   private function onCreationComplete():void
   {
    var tempArray:Array = getTempArray();
    for(var i:int = 0; i < tempArray.length; i++)
    {
     var panel:Panel = new Panel();
     panel.width = 400;
     panel.height = 400;
     panel.id = 'panel' + i;
     
     var text:Text = new Text();
     text.text = 'text' + i;     
     panel.addChild(text);     

     panelContainer.addChild(panel);
     tmpPanelElements.push(panel); 
    }
   }
   
   private function getTempArray():Array
   {
    var tempArray:Array = ['one', 'two', 'three', 'four'];
    
    return tempArray;
   }
   
      private function onClickNext():void
      {
       var xByValue:Number = -455;
       loopNavigator.xBy = xByValue; 
       
       loopNavigator.play(tmpPanelElements);
      }
      
      private function onClickPrevious():void
      {
       var xByValue:Number = 455;
       loopNavigator.xBy = xByValue; 
       
       loopNavigator.play(tmpPanelElements);
      }