How to Define a Transition in Flash CS5 Catalyst - dummies

By Jennifer Smith, Christopher Smith, Fred Gerantabee

After you create a transition in Adobe Flash Creative Suite 5 Catalyst, the next step is to configure it. In all cases, you work in the Timelines panel.

To add a transition to a component, such as a button, first double-click the component to enter Component Editing mode.

Add a Fade transition in Flash CS5 Catalyst

When you add a Fade transition, your objects fade in or out as you change states. For example, an entire page can fade out when you click a button to go to another page on the side. The fade usually lasts only about half a second, so it just provides a soft transition between pages. You can fade individual objects, including buttons, as well.

In many cases, after you select the state transition in the Timelines panel’s first column, the Fade transition automatically appears in the third column. (If you don’t see it, choose it from the Add Actions pop-up list at the bottom of the third column.) Just drag the semicircular thumbtab to adjust the length of the fade. We found that half a second was a good length. Click the Play button to view the transition.


For more controls, go to the Properties panel, where you can set the opacity, duration, delay, and easing. Easing effects control how the transition starts and ends.

Rotate or resize objects in Flash CS5 Catalyst

You can rotate an object while moving from one page to another. Why would you do that? Some funny results with this effect appear in the figure. However, if you also include a fade out and the timing of the rotation is shorter than the fade out, you’ll see the object rotating before the new page appears. You can also rotate a button when you hover over or click it.


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

To add a rotation transition, click Add Action and choose Rotate from the pop-up list. In the Properties panel, you can set the angle, duration, and delay. You can also choose an easing effect, which determines how the rotation starts and ends.

Resizing an object is just like rotating it. Select the object, choose Resize from the Add Action pop-up menu, and set its properties. You specify the new size in pixels.

Rotate objects in 3D in Flash CS5 Catalyst

The Rotate transition rotates in 2D, but the Rotate 3D transition adds a new dimension to your transitions. To add this transition, click Add Action and choose Rotate 3D from the pop-up list. In the Properties panel, you can set the From and To angles in three directions, the duration, and a delay.

Move objects in Flash CS5 Catalyst

You can move an object during a transition. If you add the Move effect to a page transition, you won’t see the movement until you return to the page unless you also have a fade transition.

To add a Move transition, click Add Action and choose Move from the pop-up list. In the Properties panel, you can set the X (horizontal) and Y (vertical) distance of the move, the duration, delay, and easing effects.

Add sound effects in Flash CS5 Catalyst

Why be silent? You can add a sound effect and make noise! After selecting an object, follow these steps:

  1. Click the Add Action pop-up menu and choose Sound Effect.

  2. In the Select a Visual Asset dialog box, click the Import button.

  3. In the Open dialog box, choose an MP3 file, and click Open.

  4. Expand the Media item and choose the MP3 file you selected.

  5. Click OK.

In the Properties panel, you can adjust the duration, set a delay, and choose to repeat the sound.

Set object properties in Flash CS5 Catalyst

You can set some specific properties that apply to certain types of objects. After selecting an object, choose Set Property from the Add Action pop-up menu. In the Properties panel, choose one of the following from the Property drop-down list:

  • Text: For a component that includes text, such as a check box’s label, you can specify text, which animates a change in the text content. This option isn’t available for all objects.

  • Alpha: Click to the right to display a text box, where you can enter an Alpha value. Alpha is equivalent to opacity. A setting of 25% dims an object so that it’s only 25% opaque. You could use this setting to make a button appear unavailable.

  • Enabled: Choose True or False. This setting is available only for components that you converted to buttons. By selecting False, you deactivate the button.