Follow the same setup steps as in the "Side-scrolling Wizard", except instead of using a set of "forward" and "back" buttons to navigate, each of our pages will have its own
UIBtnChangePanel buttons that take us to a specific page. This allows us to have a branching menu, rather than a linear wizard. Set each button to use the
BringInForward or
BringInBackward Change Type as appropriate for the panel you will bring into view. Ensure each panel has a unique name, and then assign this name to the navigation buttons to indicate which panel is to be brought up when the button is clicked.
Now to create our "flying" effect, we will set each panel's transitions to have two elements: a
Translate element and a
FadeSprite element. When moving forward, we want the panels to fly toward the camera, and when moving back, to fly away from it. (This effect is most effective if using a non-orthographic camera.) We also want panels coming into view to be faded in to full white, and panels being dismissed to be faded to transparent (0 alpha).
We'll use the
FromTo mode for all transitions. For
Bring In Forward, set the transition's
Translate element to start the panel at a distance from the camera, and then bring it to the desired viewable position. Now set the
FadeSprite element to fade from 0 alpha to 1. (You may also want to use a
FadeText here if you have text on the panel.)
For
Bring In Back, do the same, but set the start position to very near the camera.
For
Dismiss Forward, the starting coordinates should at the panel's normal viewing position and the end coordinates at the near-to-the-camera position. The starting color should have an alpha of 1, and the ending an alpha of 0.
For
Dismiss Back, use the same as above only the end coordinates should be the far-from-the-camera position used as the starting position in
Bring In Forward.