1 Reply Latest reply on Dec 11, 2012 12:26 PM by Spacorum

    Mobile: Applying Spark Fade effect when selecting a new tab

    Spacorum

      Hello again:

       

      In a TabbedViewNavigatorApplication, I´d like to show a Spark Fade effect on tab transitions. What I´m trying to do now is to apply a fade-out effect on the current tab´s active view, before selecting the new tab. I was able to do a event.stopPropagation() at "onIndexChanging" to avoid inmediate tab selection, and play the effect to fadeout the current view. But once the effect is finished, I simply don´t know what to do to continue with the events actual objective (that is, select a new tab).

       

      Any ideas?

       

      Thanks in advance.

       

       

       

      <components:TabbedViewNavigatorApplication ...>

       

           <fx:Declarations>

                <s:Fade duration="{ParamsModel.timeoutFadeOut}" id="fadeOutEffect" alphaFrom="1.0" alphaTo="0"/>

           </fx:Declarations>

       

           <fx:Script>

                <![CDATA[

                     protected function creationCompleteHandler(event:FlexEvent):void

                     {

                          this.tabbedNavigator.addEventListener(IndexChangeEvent.CHANGING, onIndexChanging);

                     }

                    

                     // The navigator tab index is changing to event.newIndex                   

                     protected function onIndexChanging(event:IndexChangeEvent):void

                     {

                          event.stopPropagation();


                          fadeOutEffect.addEventListener(EffectEvent.EFFECT_END, function(event:EffectEvent):void

                          {

                               // NOW THE FADE EFFECT HAS ENDED, PROCEED TO SELECT THE TAB NORMALLY, BUT HOW??

                          });

                          // Play the effect on current view to fade it out

                          fadeOutEffect.play([tabbedNavigator.activeView]);

                     }

                ]]>

           </fx:Script>

       

           <components:navigators>

                <components:ViewNavigator id="nav1" .... />

                <components:ViewNavigator id="nav2" .... />

           </components:navigators>

      </components:TabbedViewNavigatorApplication>

        • 1. Re: Mobile: Applying Spark Fade effect when selecting a new tab
          Spacorum Level 1

          Once the CHANGING event is listened, and after stop it, I tried to dispatch the CHANGE event manually after running some actions, with no luck:

           

           

                          protected function onIndexChanging(event:IndexChangeEvent):void

                         {

                              event.stopPropagation();

           

                              // DO SOME STUFF

           

                              // Now, proceed and select the tab

                              var changeEvent:IndexChangeEvent = new IndexChangeEvent(IndexChangeEvent.CHANGE, false, false);

                              changeEvent.oldIndex = event.oldIndex;

                              changeEvent.newIndex = event.newIndex;

                              dispatchEvent(changeEvent);

                         }

           

          The CHANGE event is dispatched, but the selected tab didn´t change.. Any ideas?

           

          Thanks in advance