The Pages/States panel in Catalyst allows you to create and manage view states. A new application will have a single state, but the panel allows you to create as many additional states as you want. States can either be created as duplicates of an existing state or as new blank states.

Catalyst gives each state a default name of Page1, Page2, and so forth. You should give each state a logical name descriptive of its contents or purpose in the application. State names can contain only letters, numbers and underscores; you cannot use spaces.

Figure 23.2. Adding and renaming a new state

Figure 23.3. The application with all of the new states added

Each state's contents can be modified at will without affecting other states. Often, modifications to states will simply involve either deleting components that you do not want in a state or hiding their layers and then either adding new components from the library or showing their layers.

Figure 23.7. Finishing setting up the main application's states

The application will now contain a set of states that display the appropriate assets for the state. Later in this chapter, you will learn how to add interactions so that your user can move between the states.

Just as the main application can contain multiple states to represent different aspects of it, components can likewise contain multiple states. For example, if you have a subscription or order form that spans multiple pages, you would likely encapsulate the form in a custom component, and then have the component contain multiple states to represent the pages of the application.

You have now created a state within a component. States within components serve the same purpose as states in the main application, allowing you to display different information to your users based on their actions.

Many of the standard user interface components have default view states. Buttons, for example, have the following states:

Radio buttons have these states:

These states define the appearance of the component during various expected user interactions. View state changes within these components are automatic; you need not specifically add the ability for a button to change from the Up to the Over state when the user interacts with it.

You now have a button component that provides visual clues to the user during interaction, an important aspect of usability. If you wish, you can test the project at this point by pressing Ctrl-Enter on your keyboard. While the button will not actually do anything, you will be able to see that its appearance changes when you mouse over it.

In order to allow your user to move from one state to the next, you need to add an interaction to an element in the application. Almost any component can be used for this interaction, but the most commonly used one will be a button.

Create the interaction

Creating the interaction on a button is very straight-forward, as buttons are designed for interaction. In the following steps, you will add the ability for the user to click the Place Order button in the Home State to be taken to the Subscription State.

1. In the main application's HomeState, double click the component on the page and then click the Place Order button (see Figure 23.14).

   

   Figure 23.14. Selecting the Place Order button

2. If necessary, expand the Interactions panel by double-clicking its tab (see Figure 23.15).

   

   Figure 23.15. The Interactions panel

3. Click Add Interaction.

4. Ensure that the first drop-down list is set to On Click, and the second to Play Transition to State.

5. From the Choose State menu, select SubscriptionState (see Figure 23.16).

6. Click OK. The interaction has now been added to the button (see Figure 23.17). When run through Flash Player, the application will allow users to click the button and trigger the state change.

Figure 23.16. Creating an interaction to transition to another state

Figure 23.17. The completed interaction

Test the interaction

After you create an interaction to trigger a state change, you can test it by running the project. Follow these steps:

1. Choose File

   

2. Click File

   

3. Click the Purchase Now button. The project will change to show the Subscription state. The transition to the state will be instantaneous.

Later in this chapter, I will discuss adding animation to the state change. Also, keep in mind that there is nothing in this application to validate that the form on the home page be filled out before moving to the subscription state.

In a real application, you would want to add the necessary code to implement validation. You would need to add this code in Flash Builder; however, that is not something currently supported by Catalyst.

Figure 23.18. Running the project from the File menu

Transitions between states can be animated. Catalyst includes a set of pre-built animation effects that can be used in transitions. After you add an interaction to trigger a state change, the effected states appear on the Timelines panel. You can increase or decrease the time each transition takes and choose the effect to be played.

Changing the timing of effects

By default, most effects trigger instantly, which generally prevents users from seeing animation. Using the Timeline panel, you can adjust this timing to create smoother effects.

Note

Consider what types of animation effects you want to apply to components when you set up your view states. If you want to have components animate in or out of a state, you need to be sure to merely hide that component's layer, rather than deleting the component altogether.

1. If necessary, expand the Timeline panel by double-clicking its tab. The Timelines panel is at the bottom of the screen, as shown in Figure 23.19. If you are still editing a component, you will want to click the name of the application in the navigation bar.

   

   Figure 23.19. The Timeline panel in the application

2. On the Pages/States panel, click SubscriptionState.

3. On the Layers panel, click the eyeball icon to show the HomeState's assets, and the eyeball to hide the SubscriptionState's assets. You want each to slide in on the transition, so you need to show the HomeState's assets to move them off the artboard.

4. Double-click the Hand tool to zoom out to see the entire application (see Figure 23.20).

   

   Figure 23.20. Showing the appropriate assets

5. Click the Select tool. While pressing and holding the Shift key, drag the HomeState's component so that it is completely off the left edge of the artboard (see Figure 23.21)

6. On the Library panel, click the eyeball icon to show the SubscriptionState's assets.

7. While pressing and holding the Shift key, drag the SubscriptionState's assets off the right edge of the artboard (see Figure 23.22).

   

   Figure 23.21. Moving the components

   

   Figure 23.22. Moving the other assets

8. On the right side of the Timeline panel, choose the first transition, HomeState

   
   

   Figure 23.23. Selecting the transition from the HomeState to the SubscriptionState

9. Mouse over the bar representing the HomeState. A small half-circle appears at the edge of the bar.

10. Drag this half-circle to the right to expand the time over which the component appears (see Figure 23.24).

    Note

    The timeline is measured in fractions of seconds. A slider along the bottom of the panel allows you to zoom in or out on the timeline.

11. Repeat Step 3 for the SubscriptionState's Move action.

12. Set it to the same amount of time as the other state.

13. Set the Fade In action to the same timing (see Figure 23.25).

    

    Figure 23.24. Expanding a component's transition time

    

    Figure 23.25. Setting the timing on the second state

14. Drag both the FadeIn and Move effects for the Subscription state so that they begin when the HomeState's transition ends (see Figure 23.26).

Figure 23.26. Changing the timing of the transition

Now that you have established the timing of the effects, users will see the Home State's assets slide off to the left, to be replaced by the Subscription State's assets sliding in from the right while also fading in.

Applying other effects

Catalyst automatically adds a Fade In effect to components being added to a state. If you reposition a component, a Move action will be applied. You can, however, add additional effects. In the following steps, a FadeOut effect isadded to the HomeState.

1. On the Timeline, click HomeState.

2. Click Add Action.

3. Click Fade (see Figure 23.27).

4. Adjust the timing of the new effect as needed (see Figure 23.28).

Figure 23.27. Selecting the Fade effect for the HomeState

Figure 23.28. Adjusting the timing of the added effect

The animation of the Home State now matches that of the Subscription State, as both fade while they move.

This chapter demonstrated the process of creating and working with states. In it, you learned: