If you've been playing around with the Flex 4.5 mobile features, one of the great new things is the ability to easily navigate between different screens. For this you can use the navigator object and push or pop a view in your application.

There are a few extra things you can define when navigating between views and one of them is what type of transition should be used. I'll show the following example where I started from a new Flex Mobile project using the "View-Based Application" template.

In the first view that gets generated I'll simply add a backgroundColor property and set it to red and put a button on the stage.

[cc lang="mxml"]

[/cc]

The next thing to do is create a second view in the views package that we can transition to, I'll call it SecondView.mxml and give it a blue color and a button to navigate back.

[cc lang="mxml"] [/cc]

In the Flex mobile development video I did a little while back I showed the basics of navigating to a different view. That is exactly what we'll do here as well. Back in the first view we'll add a click handler to the button.

[cc lang="mxml"]

[/cc]

If you remember the first argument in pushView is a reference to the view class you want to navigate to. The second and third arguments have to do with passing data to the next view and the basics of that were covered in the video as well.

The last argument however is what we'll need here, it lets you pass in an instance of a ViewTransitionBase class. There are a few transitions that come with Flex 4.5 and you could obviously build you own by extending this base class.

In this case I'll use the built-in FlipViewTransition that adds a nice 3D effect while navigating between views, I'll set the duration of the transition to 1 second. The FlipViewTransition supports two different transition types "card" and "cube" - the first one is more of a 2D turning effect while the other one rotates around an axis giving a more distinct 3D feel, I'll go for "cube" here.

[cc lang="mxml"] [/cc]

The only thing left to do is add the same code to SecondView.mxml but use navigator.popView instead to navigate back and change the direction property of the transition. This direction property takes up, down, left and right values so you have quite a few options to how you want this transition to look.

[cc lang="mxml"]

[/cc]

You can now test and run the application and you should see the following result:

Download source code (zip file - 7Kb)

Pretty easy, right? If you're a little more experienced writing ActionScript you could write your own custom view transitions (I'll cover this in a future blog post). Have fun!
 

Posted
AuthorPeter