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. Flash^R Catalyst^TM uses the Pages / States panel to organize these elements for your interactive application.

If you have used Flash^R 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.

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.