0 Replies Latest reply on Jun 16, 2011 1:54 AM by vishalkumar86

    problem with tabnavigator index change effect

    vishalkumar86

      Hello All,

       

           I am using

      <?xml version="1.0" encoding="utf-8"?>

      <mx:Application

       

       

      xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" horizontalAlign="center">

       

       

       

      <mx:TabNavigator id="tabNav" height="600" width="600" change="onTabChange(event)">

       

       

      <mx:VBox horizontalAlign="center" verticalAlign="middle" height="100%" width="100%" label="Tab 1">

       

       

      <mx:Label text="Tab 1" fontSize="30" />

       

       

      </mx:VBox>

       

       

      <mx:VBox horizontalAlign="center" verticalAlign="middle" height="100%" width="100%" label="Tab 2">

       

       

      <mx:Label text="Tab 2" fontSize="30" />

       

       

      </mx:VBox>

       

       

      <mx:VBox horizontalAlign="center" verticalAlign="middle" height="100%" width="100%" label="Tab 3">

       

       

      <mx:Label text="Tab 3" fontSize="30" />

       

       

      </mx:VBox>

       

       

      <mx:VBox horizontalAlign="center" verticalAlign="middle" height="100%" width="100%" label="Tab 4">

       

       

      <mx:Label text="Tab 4" fontSize="30" />

       

       

      </mx:VBox>

       

      </mx:TabNavigator>

       

       

       

      <mx:Script>

      <![CDATA[

      import mx.effects.Move;

      import mx.events.IndexChangedEvent;

      import mx.events.EffectEvent;

       

      public function onTabChange(event:IndexChangedEvent):void

      {

      var oldTab:DisplayObject = tabNav.getChildAt(event.oldIndex);

      var newTab:DisplayObject = tabNav.getChildAt(event.newIndex);

       

      var moveEffect:Move = new Move();

      moveEffect.target = oldTab;

      var moveEffect2:Move = new Move();

      moveEffect2.target = newTab;

      if(event.oldIndex > event.newIndex)

      {

      //Moving old Tab out to the right, new tab in from the left

      oldTab.x = 0;

      moveEffect.xTo = oldTab.width + 100;

      moveEffect.yFrom = oldTab.y;

      moveEffect.yTo = oldTab.y;

      newTab.x = -oldTab.width;

      moveEffect2.xTo = 0;

      moveEffect2.yFrom = oldTab.y;

      moveEffect2.yTo = oldTab.y;

      }

      else

      {

      //Moving old Tab out to the left, new tab in from the right

      oldTab.x = 0;

      moveEffect.xTo = -oldTab.width;

      moveEffect.yFrom = oldTab.y;

      moveEffect.yTo = oldTab.y;

      newTab.x = oldTab.width + 100;

      moveEffect2.xTo = 0;

      moveEffect2.yFrom = oldTab.y;

      moveEffect2.yTo = oldTab.y;

      }

      oldTab.visible = true;

      newTab.visible = true;

      moveEffect2.play();

      moveEffect.addEventListener(EffectEvent.EFFECT_END,tabOffScreen);

      moveEffect.play();

      }

       

      private function tabOffScreen(event:EffectEvent):void

      {

      event.target.removeEventListener(EffectEvent.EFFECT_END,tabOffScreen);

      event.target.target.visible = false;

      }

       

      ]]>

       

       

      </mx:Script>

      </mx:Application>

       

      to run the slide effect in flash builder 4.5 with sdk 4.5. When the effect plays, the selected child behaves abnormal whereas when it runs with sdk 3.6 in flash builder 4.5, everything goes well.

       

      Any help will be apppreciated.

       

      -Thanks and regards

       

      Vishal Kumar