Creating a New State for the Transition
With the static elements in place, now we animate. The goal is for the circle to rotate when a site visitor clicks the button. The first step in this journey is to create the "To" statea version of the page with the artwork rotated.
Creating this second state is pretty simple:
- Click the Duplicate State button to create a second state with identical content.
- Select Page2 in the Pages/States section at the top of the Catalyst window.
- With the circle selected, set the Rotation value to 180 in the Common section of the Properties panel. You can see the two statesthe initial state and the transition stateas thumbnails in the Pages/States area (see Figure 4).
- Select Page1 in the Pages/States area; then use the Select tool to select the button. On the Interactions tab, click the Add Interaction button. Leave the first pop-up set to On Click and the second pop-up set to Play Transition to State. From the Choose State pop-up, select Page2. Set the last pop-up to When in Page1 (see Figure 5).
- Define a second interaction for the button. This interaction should be the same as the first interaction you just created, with one exception: Choose Page1 in the third pop-up, and When In Page2 from the fourth pop-up (see Figure 6).
- You can test the transition now. Choose File > Run Project to open the project in a web browser. The transition should work in either state when you click the button, but it will be more impressive after we define an action for the transition in the Timeline. We'll do that next.
Figure 4 Pages/states thumbnails.
Figure 5 Defining the first interaction.
Figure 6 Defining the second interaction.