Printer Friendly Version

BellaOnline's Flash and Animation Editor

Flash Catalyst CS5 Timeline

If you are like me, the fun starts when you add the interaction to your application. In the last FlashR CatalystTM 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 HereEnding Here

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.

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 © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor