If you are like me, the fun starts when you add the interaction to your application. In the last Flash^R Catalyst^TM CS5 review article, we discussed the Pages/States for our website application and told Catalyst to program our buttons to move from one page of our website to another.

Let's continue with our example website that has only three pages which are CityView, UnionParkView and CentralParkView. We worked on the navigation a little when we programmed our buttons to display these pages. We created the following buttons:

Button 1 will display the UnionParkView page
Button 2 will display the CentralParkView page
Button 3 will display the CityView page

Catalyst keeps track of the relationship between these Pages/States in the Timeline and we can use the Catalyst Timeline as a visual guide for navigating our website application.

If you have used Flash, you are familiar with a Timeline that is made up of a sequence of frames. However, the Catalyst Timeline is made up of the Pages/States of our application and the transitions between those Pages/States. Let's take a look.

The Catalyst Timeline is made up of four columns. At the far left is a list of Pages/States. Based on the buttons and Pages/States of our project, Catalyst will display the relationship between the pages of our website in this column. As you can see, we can move between pages in four ways. Each of these are placed on a layer in the Timeline.

Starting Here
CityView
CityView
UnionParkView
CentralParkView

Ending Here
UnionParkView
CentralParkView
CityView
CityView

The second column of the Timeline displays the starting State. As we click on each layer in the Timeline, Catalyst will display the active page (the page that we are currently viewing) at the top of this second column. For example, in the first layer we are moving from the CityView page to the UnionParkView page. Therefore, CityView is listed as the starting State. But in the bottom layer, we are moving from the CentralParkView to the CityView and the CentralParkView page will be displayed in this column.

The third column displays the corresponding transitions needed to move from one page to the other. Here we can see that Catalyst has determined from our buttons that we will be moving between pages and has already put a "move" transition in this column for us. As we continue to work on our application and add more elements and effects, Catalyst will automatically add the correct transition to the Timeline.

The fourth column displays the ending State. Again, as we click on each layer in the Timeline, we can see the target page (page that we are moving to) listed in the last column. Now that we understand the relationship of the Timeline to our application, we are ready to add a few professional looking animations to 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.