1 Reply Latest reply on Mar 22, 2011 8:52 PM by Shongrunden

    TabNavigator with Crossfade Transition?

    lathoudero

      Hi all,

       

      I found out that having a crossfade transition in TabNavigator isn't as straightforward as a normal fade. Meaning: It doesn't work the way I'd expect it to work.

       

      This works perfectly:

           <fx:Declarations>
                <s:Fade id="fadeIn" alphaFrom="0" alphaTo="1" duration="1000"/>
                <s:Fade id="fadeOut" alphaFrom="1" alphaTo="0" duration="500"/>
           </fx:Declarations>
           <mx:TabNavigator x="82" y="67" width="200" height="200" creationCompleteEffect="{fadeIn}">
                <s:NavigatorContent label="Tab 1" width="100%" height="100%" backgroundColor="#00FF2A" showEffect="{fadeIn}" hideEffect="{fadeOut}">
                     <s:Button x="59" y="49" label="Button"/>
                </s:NavigatorContent>
                <s:NavigatorContent label="Tab 2" width="100%" height="100%" backgroundColor="#0054FF" showEffect="{wipeTo}" hideEffect="{wipeFrom}">
                     <s:DropDownList x="43" y="10">
                     </s:DropDownList>
                </s:NavigatorContent>
                <s:NavigatorContent label="Tab 3" width="100%" height="100%" backgroundColor="#FF0000" showEffect="{wipeTo}" hideEffect="{wipeFrom}">
                     <s:RichText x="10" y="10" text="RichText" width="178" height="146"/>
                </s:NavigatorContent>
           </mx:TabNavigator>
      

       

      But this doesn't:

       

           <fx:Declarations>
                <s:CrossFade id="fadeIn" duration="1000"/>
                <s:CrossFade id="fadeOut" duration="500"/>
           </fx:Declarations>
           <mx:TabNavigator x="82" y="67" width="200" height="200" creationCompleteEffect="{fadeIn}">
                <s:NavigatorContent label="Tab 1" width="100%" height="100%" backgroundColor="#00FF2A" showEffect="{fadeIn}" hideEffect="{fadeOut}">
                     <s:Button x="59" y="49" label="Button"/>
                </s:NavigatorContent>
                <s:NavigatorContent label="Tab 2" width="100%" height="100%" backgroundColor="#0054FF" showEffect="{wipeTo}" hideEffect="{wipeFrom}">
                     <s:DropDownList x="43" y="10">
                     </s:DropDownList>
                </s:NavigatorContent>
                <s:NavigatorContent label="Tab 3" width="100%" height="100%" backgroundColor="#FF0000" showEffect="{wipeTo}" hideEffect="{wipeFrom}">
                     <s:RichText x="10" y="10" text="RichText" width="178" height="146"/>
                </s:NavigatorContent>
           </mx:TabNavigator>
      

       

      My guess is that the crossfade-filter doesn't get the "source from" and the "source to" it needs to for fading, but how to pass that on elegantly within TabNavigator?