␡
- Creating a Button to Trigger a Transition
- Adding Artwork
- Creating a New State for the Transition
- Adding an Action in the Timeline
- Testing and Exporting to SWF
- From Here
Like this article? We recommend
Creating a New State for the Transition
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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:
- 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 states—the initial state and the transition state—as 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.
){kind=small}
Figure 4 Pages/states thumbnails.
)
Figure 5 Defining the first interaction.
)
Figure 6 Defining the second interaction.