Applying Screen Transition Effects

Contents

1. Link Transitions

The Visual Designer enables user interface screens to be linked together so users of your app can navigate forward and backward through the app’s user interface. In addition to specifying the links between screens through an On Click action, you can specify the visual transition effect for each link. You can control the transition effect of a link by setting the Transition property for the design element that links to a new screen. MobiOne provides a rich set of custom transitions such as slide left, slide right, slide up, slide down, fade, flip left and flip right. Or, you can choose to have no transition.

Back to Contents

2. Defining Link Transitions

If the Properties view is not open, select Window>Show View>Properties from the menu. To apply a transition effect, select a design element on the screen, and select Go to Screen from the On Click drop-down list. Select the .mobi file you want to link to, and select a transition from the Transition drop-down as shown below.

In the example above, when the user taps the How to Reach Us list item, the screen slides to the left to reveal the screen selected in the Screen field.

Note: A widget’s Transition property is valid only when the corresponding Screen property references a valid design file (.mobi file).

Back to Contents

3. Where Do I Learn More about MobiOne Studio?

The MobiOne online Learning Center site provides documents, tips, tutorials and videos to help answer your questions. Remember to check the Learning Center site for new and updated material.