Printer Friendly Version

BellaOnline's Flash and Animation Editor

Catalyst Pages/States and Interactions Panels

One of the most challenging aspects to creating interactive applications is keeping track of the many scenes or parts of the application. On top of that, we have interactive buttons or other components that have many actions and effects attached. FlashR CatalystTM uses the Pages / States panel to organize these elements for your interactive application.

If you have used FlashR to create a simple website, you might have used Flash frames to create the various pages of your site and programmed Flash buttons to navigate between the webpages. For the designer with little or no programming experience, this process of assigning frames along the Flash Timeline as webpages can get confusing.

Because Flash Catalyst has been designed to make things as simple as possible, we can use the Pages / States panel to navigate between the various parts of our application. Using the website as an example again, we will have a thumbnail in the States / Pages panel for each webpage in our website application. This makes it easy to work on the separate pages of the website. When we click on a thumbnail in the panel, Catalyst displays the corresponding webpage on the artboard for us to edit.

We can also use this same panel when working on components that have different looks or effects applied to them. For example, if we click on a button for editing, we will see the Up, Over, Down and Disabled stages for the button displayed in the panel. As before, clicking on one of these thumbnails will allow us to edit that stage for the button on the artboard.

Now that we have designated the pages of our website and the states for our buttons, we need a way to program the buttons to navigate the site. In Flash, we would need to use ActionScript to program event listeners such as the button being clicked and add actions to the buttons such as the gotoAndPlay frame x.

But in Catalyst, we can use the Interactions panel to add these functions to our buttons without writing any code. For example, when we click on a button on the artboard, the Interactions panel displays the options for programming that button. First we have a menu for selecting the event such as On Click, On Mouse Down, On Mouse Up, On Roll Out and On Roll Over. We will want to choose the On Click event. Next, we'll use the Choose State menu to tell the button which webpage to display. Now that we have one button programmed to display one webpage, we can repeat this simple process to program the other buttons for our website.

*Adobe provided a review copy to me free of charge.

Join us in the Flash forum.

Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor