Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

  • Print
  • + Share This
From the author of Creating a New State for the Transition

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" state—a version of the page with the artwork rotated.

Creating this second state is pretty simple:

  1. Click the Duplicate State button to create a second state with identical content.
  2. Select Page2 in the Pages/States section at the top of the Catalyst window.
  3. With the circle selected, set the Rotation value to 180 in the Common section of the Properties panel. You can see the two states—the initial state and the transition state—as thumbnails in the Pages/States area (see Figure 4).
  4. Figure 4 Pages/states thumbnails.

  5. 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).
  6. Figure 5 Defining the first interaction.

  7. 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).
  8. Figure 6 Defining the second interaction.

  9. 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.
  • + Share This
  • 🔖 Save To Your Account