logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


dailyclick
All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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
CityViewUnionParkView
CityViewCentralParkView
UnionParkViewCityView
CentralParkViewCityView


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.




Add Flash+Catalyst+CS5+Timeline to Twitter Add Flash+Catalyst+CS5+Timeline to Facebook Add Flash+Catalyst+CS5+Timeline to MySpace Add Flash+Catalyst+CS5+Timeline to Del.icio.us Digg Flash+Catalyst+CS5+Timeline Add Flash+Catalyst+CS5+Timeline to Yahoo My Web Add Flash+Catalyst+CS5+Timeline to Google Bookmarks Add Flash+Catalyst+CS5+Timeline to Stumbleupon Add Flash+Catalyst+CS5+Timeline to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Flash and Animation Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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.

g


g features
Particle System - Emitter Shape Parameters

Motion Particle Systems - Introduction

Particle Fog in Motion 5 - Scene Graphics

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor