Flex 4.5 – Using Mobile View Transitions

May 12, 2011By 35 Comments

While navigating through a Flex mobile application from view to view (screen to screen), there is a default transition (animation or effect) that occurs by default and can be customized. It’s called a view transition in Flex mobile lingo, and there are 4 different classes available in the spark.transitions package for you to use out of the box in Flex 4.5:

  • SlideViewTransition
  • CrossFadeViewTransition
  • FlipViewTransition
  • ZoomViewTransition

You can use any of these transition classes with their default properties or set the direction, duration and mode (for some) to cause a different effect such as shown in the following code snippet:

     var flipTrans:FlipViewTransition = new FlipViewTransition();
     flipTrans.direction = ViewTransitionDirection.UP;
     flipTrans.mode = FlipViewTransitionMode.CUBE; //or CARD mode
     navigator.pushView(SampleZoom,null,null,flipTrans);

     var zoomTrans:ZoomViewTransition = new ZoomViewTransition();
     zoomTrans.direction = ViewTransitionDirection.RIGHT;
     zoomTrans.mode = ZoomViewTransitionMode.IN; //or OUT mode
     navigator.popToFirstView(zoomTrans);


     var slideTrans:SlideViewTransition = new SlideViewTransition();
     slideTrans.direction = ViewTransitionDirection.DOWN;
     slideTrans.mode = SlideViewTransitionMode.UNCOVER;  //or COVER and PUSH modes
     navigator.pushView(SampleZoom,null,null,slideTrans);
  
     var fadeTrans:CrossFadeViewTransition = new CrossFadeViewTransition();
     fadeTrans.direction = ViewTransitionDirection.LEFT;
     // no modes are available for CrossFadeViewTransition
     navigator.pushView(SampleZoom,null,null,fadeTrans);

By default the SlideViewTransition (push mode with direction of left) is used for the pushing/popping of all views. It causes the view to slide into place when you are navigating between views. You can change the default transition used for all navigation by setting navigator.defaultPushTransition (when a new view is pushed onto the stack) and navigator.defaultPopTransition (when the view is popped off the view stack so the view beneath it is shown) to an instance of another transition class such as in the code snippet below:

navigator.defaultPushTransition = new FlipViewTransition();
navigator.defaultPopTransition = new FadeViewTransition();

You can set these properties on any navigator within the main ViewNavigatorApplication or TabbedViewNavigatorApplication or View class itself. However if you want it to apply for the entire application you would set it in the root application code.

I recently built a sample using each of these transitions to show how they work, including how to use the modes that might be available (for instance on the FlipViewTransition you can specify card or cube mode), and how applying an easing function such as Bounce or Elastic might affect how it plays (fun stuff :))! Here is a screenshot of the sample application:

And below is a short video clip I recorded of it running on my iPod Touch. It’s nothing fancy but you can see the different effects played when the 4 different view transition types are used including what the easing effect might do:

All of the ViewTransition classes extend ViewTransitionBase. The ViewTransitionBase class (and all that extend it) will dispatch a FlexEvent.TRANSITION_START and FlexEvent.TRANSITION_END event when the transition starts and ends respectively. You can create your own custom transitions extending ViewTransitionBase. If you plan to do so though, there’s a lot of information you should first review in the Flex 4.5 ViewTransition specification located here. Note that this is the original specification and some names of properties, events etc have changed.

The source, Flex project (fxp), .ipa and .apk (for iOS and Android) for the recorded sample above can be downloaded here!

Filed in: Flash Builder 4.5Flex 4.5Flex 4.5/MobileFlex MobileMobile Development Tags:

About the Author ()

Comments (35)

Trackback URL | Comments RSS Feed

  1. Todd Shelton says:

    Thanks for posting. I was looking for a different way to transition to my other views. Great Post!

  2. Gjalt says:

    Thanks this is very helpfull,
    just wanted to add that on the fade and zoom transition there is no direction property.

  3. Very great information for graphics point of view, the slide and transition is quite very good for mobiles and IPhone.
    Thanks for post.

  4. Chrisz says:

    Mhh. The performance see slow…
    Use the GPU renderer ?

    Greets chrisz

  5. Hammam says:

    What kind of packaging did you use to generate the ipa file ?

    Best,
    Hammam

  6. Mike says:

    Interesting. I installed your fxp into Flex 4.5 and noticed that your app has Apple iOS as a possible target platform. Whereas, the mobile apps I am creating only have Android as a possible target. What is your secret?

    • Mike says:

      It looks like you created an Actionscript mobile app and then added mxml to it. Is that how you got the iOS target?

  7. Friendlytek says:

    my bet is she is using software that is not yet available
    http://blogs.adobe.com/flex/2011/04/compatibility-matrix-for-mobile-development-with-flash-builder-4-5.html
    expected to be released in June.
    4.5.x

  8. Binod says:

    Hi,
    Good post. Thanks.
    But I want to have some animation like page flip or tear effect to a image container when the image source is changed and loaded. Can you please help me out how this can be achieved. Have been struggling from 2 weeks for this. This will be for mobile apps in flex 4.5.

    Thanks Much,
    Binod Singh

  9. valley says:

    Hi Holly,
    thanks for these examples.
    What would be the best approach to get the same results (let’s say a SlideViewTransition effect) not for View components but for other visual components (e.g. Group elements) inside a SkinnablePopUpContainer container ?
    More concrete: in a SkinnablePopUpContainer i would like to swipe horizontally where the next component will slide in (let’s say i have 5 different Group elements, but only one can be shown at the same time) on a mobile application.

    Thanks for any hints.
    Bests,
    valley

    • Hi Valley!

      You could use an effect to do what you’re trying to do. You can look in Tour de Flex samples for effects under the Flex 4 -> Components -> Effects category for the different types available in Flex 4 or the Flex 3 -> Flex Core Components -> Effects for some ideas. You could use the Move3D or Move for instance and just set the x value to move your target object horizontally based on some criteria and then change the target to the next one etc. If you come up with a custom solution that we could create a sample for in Tour de Flex, let me know and we’ll get it added, thanks :)!! Holly

      • valley says:

        Ok thank you for your answer, Holly.
        I will check the examples and see if i
        can create a dynamic solution of it (there can be 3 to 5 groups that have to be swipeable with changing content).

        I let you know when i have a good solution.
        Bests,
        valley

  10. BigAl says:

    It all works well, except there is a noticeable delay from the time pushView/popView is called until the transition starts. I compared with other apps on android (e.g. TweetDeck) and none of them have this delay.

    Do you know how to set or remove this delay?

    • Keith says:

      BigAl,

      Im developing an app for the iPad and noticed the same slow transition. Did you find a solution?

      Keith

  11. Jeff Winstron says:

    Well done Holly. Excellent posting with well thought out explanations.

  12. Fabrizio says:

    Holly,

    One question: is it true that the spark.transitions package is only available for a mobile app?

    I am trying to build an air app using some of the spark.transitions but I can’t seem to get FlashBuilder to find that package.

    I would really appreciate an explanation.

    THANK YOU

  13. Hi Holly,

    thanks for your example.
    I’ve one problem with transitions: I’ve created a TabbedViewNavigatorApplication and want to flip between the ViewNavigators (not the views). In other words: A transition should appear, when the user clicks on a button in the tab bar. But this doesn’t work. Any idea?

    • Hi Andreas, you can’t actually use the same ViewTransitions *between* the tabs, they are used within the ViewNavigator. However, I created a sample to show how you could use effects to achieve this and will try post it this week. You’re essentially using the spark.effects classes (Wipe, Fade, Move etc) on the tabbedNavigator index changed event in your main TabbedViewNavigatorApplication:
      tabbedNavigator.addEventListener(IndexChangeEvent.CHANGE,onChange);

      then when that tab to use the transition on is selected, you can play your desired effect.

      I will try to get my sample out in the next day or so to help.

      Thanks!!
      Holly

  14. Chris Farrell says:

    Hi Holly,
    Thanks for all of your excellent posts. I am wondering if I can apply a transition to a TabbedViewNavigatorApplication, such that when the user selects a new tab, the transition is performed between the two tabs. I’ve been searching high and low and can not seem to figure this out. Thank you for any insight.
    Chris

  15. do we use change or changing to accomplish this effect from tab selections? I’ve been trying a few things from your suggestions and nothing seems to work.
    Thanks

  16. oh sorry, didnt realize these last posts were just yesterday :\
    I’ll wait for your example, thanks.

  17. Chris Farrell says:

    I got it to work using the CHANGING event to determine direction (right or left) and binding each ViewNavigator’s showEffect and hideEffect to functions that return the appropriate Move effect (based on direction determined) The binding is fired by show and hide handlers on each ViewNavigator that dispatch the custom binding event. This seems to work very well. However, if I over-stimulate the app by pressing the tabs quickly, I seem to be able to confuse the app pretty well such that some tabs get stuck in the selected position and some navigators show up in the wrong place. Might be able to mitigate via more robust lifecycle adherence, not sure. I also have a swipe gesture handler that is increasing/decreasing the tab index – and vicariously adopting the move effect. Prett cool!

  18. @chris great tips, gonna play with that. I may hack in a timer to prevent sporadic tab clicking.

  19. @btw, are your views loading slow after hitting tabs?

  20. Amit says:

    Is there any way we can remove the default pushView() transition. as per my requirment i need to show a login page while while changing the tab. What i am doing is pushing the login view on selected tab’s wiew navigator object which shows the default transition. i need to show the login view directly without animating.

    Please help.

  21. @Amit. Not sure if this is the appropriate way to do it, but I’ve had to create a transition like the ones showed here (I just use Slide) and set duration to 0. I’d love to hear if there is a better way.

  22. Eric says:

    Did you ever figure out how to do this on a TabbedViewNavigatorApplication ViewNavigator

  23. nils says:

    Can you clearify on some events?
    I’m trying to use a fliptransition (which works). But on the view that is pushed the following events occur

    Added-To-Stage
    Initialize
    Removed-From-Stage
    Added-To-Stage
    Removed-From-Stage
    Added-To-Stage

    I’d like to use the Removed-From-Stage to remove any event listeners that are assigned to the view but with remove happening twice when the view is pushed, this doesn’t feel right.

  24. Mete Atamel says:

    Great sample, thanks for putting this together!

  25. Alaa Elsaman says:

    That was AWESOME, merry thanks to you.

  26. Richelle Ramraj says:

    Hi I am new to flex and I’m trying to build a mobile air application for Android and I wanted to know what’s the difference between views and states? Currently I have a few states set up and I need to use google maps API for flash, and everywhere I have looked, people have set it up in a different view. My problem is that I need to access co-ordinates that are sent via LCCS and i’m not sure how it would work if the messaging is set up in the first view and the map is launched in the second view. I am trying to do it in the same view and displaying in another state, but it doesn’t seem to do anything. Any advice would be appreciated, I understand it may be off topic and I apologise for that but I am very lost at the moment.

  27. Kim Jensen says:

    I would have been nice if you made the source available. I have no idea where to enter it in the mxml file. I tried to enter the
    “navigator.defaultPopTransition = new FadeViewTransition();”
    in the root, but I got an error where ever I placed it.
    Cheers,
    Kim

  28. James says:

    Hi Hols

    Everything is saying that the transitions are deprecated now in 4.6, but still work currently. What is the correct replacement? Doesn’t seem to be any advice on that.

  29. Tiago says:

    Well I have a question besides the transitions, is it possible to preserv a view on memory because every time we change views they are created again and again. The creationPolicy doesn’t seem to affect the view itself.

    Thank you.

Leave a Reply