Assign Beginning and Ending States to Flash CS5 Components in Catalyst - dummies

Assign Beginning and Ending States to Flash CS5 Components in Catalyst

By Jennifer Smith, Christopher Smith, Fred Gerantabee

Although the word states properly applies to Adobe Flash Creative Suite 5 Catalyst button variations, Catalyst sometimes uses the word to mean pages. On the left side of the Timelines panel is a list of state transitions. In the default view, the list contains every possible pairing of pages. In Component Editing mode, the list contains button states.

To define a transition, follow these steps:

  1. If you want to create a page transition, choose the two pages that you want to work with from the State Transitions list.

    If you want to create a button transition, double-click the button and choose the two button states you want to work with.

    You can use the Filter drop-down list above the first column to filter the State Transitions list; for example, you can show only transitions that include the Home page. This figure focuses on creation of a page transition; choose Home→WhitePaper.


  2. In the second column of the Timelines panel, select the objects that you want to animate, or select the objects from the Artboard.

    For a page transition, the second column lists all available objects on the pages. At the top, you can choose the entire page to select everything on the page, which is ideal for a simple page fade. Select specific objects to apply the transition only to those objects.

    For a button transition, select the button from the Artboard. Applying certain transitions to an inappropriate object can provide odd results. For example, in the figure, the text is rotatetd as a transition from the WhitePaper page to the Home page. Each click rotates 90 degrees. After two clicks, the text is upside-down!


Thanks to Ellen Finkelstein for permission to use her website as an example.

  1. If the transition that you want isn’t listed in the third column, click Add Action at the bottom of that column and then choose the transition you want.

    Opt for Fade.

  2. In the third column of the Timelines panel, pass the cursor over the transition’s horizontal block to display the semicircular thumbtab. Then drag to change the time of the transition, as shown in the figure.


    Drag to the right to lengthen the time of the transition (make the effect slower) or to the left to shorten it (make the effect faster). Alternatively, you can drag the slider at the bottom of the fourth column to adjust the timing or use the Properties panel to enter a duration.

Make the transition long enough to notice but not so long that your viewers get bored! For example, 1/10th of a second might be too quick, whereas a whole second would seem to drag out forever.

You can test the animation in the Timelines panel. Just click the Play button at the top of the second column. For example, if you added a fade between pages, when you click to go from the first page to the second page, you’ll see the fade effect.

To delete a transition, select the transition in the third column of the Timelines panel, and click the Trash can (Delete) button.