Skip navigation
Currently Being Moderated

Mobile: Applying Spark Fade effect when selecting a new tab

Nov 21, 2012 1:01 PM

Tags: #fade #flex #mobile #transition #effect #spark #tabbedviewnavigator #between #tabs

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>

 
Replies

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points