g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Women's Fashion
Small Office/Home Office
Holiday/Seasonal Cooking
Crafts for Kids

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


Flash Catalyst The Workspace

In our portfolio project, we have created the graphics for our portfolio interface in PhotoshopR and imported the PSD file into AdobeR FlashR CatalystTM. Now, we are ready to make the buttons (called interactive components) that will make the portfolio navigational. Open your PortfolioLayout.psd file into Catalyst and let's take a look around. At first glance, you will see that the workspace is not as intimidating as the Flash workspace.

The top is the Pages/States panel is where you will find a thumbnail for each page of our project. Right now, we have one page with the first logo visible. But in order for us to display the other two logos in the portfolio, we will need to create two more pages (States).

Under the Pages/Stages panel is the view of our project, called the Artboard, and under that is the Timelines panel. Those of you familiar with Flash will notice that the Timeline is somewhat different in Catalyst. As you can see from the State Transitions and Action Sequences tabs, we still use the Timeline to control what happens but the Timeline does not have those familiar Keyframes. This is because Catalyst makes most of the decisions about what happens for us as we add the UI components.

On the right, we have the Tools panel and icons similar to all the Adobe software. Under that, we have the Layers panel. It works much like the Photoshop and IllustratorR Layers panels and not like layers in Flash, which are part of the Timeline.

Next, we have the Wireframe Components, Library and Design-Time Data panels. Click on the Library tab and you will see a list of the graphics and styles from our imported PSD file. Go back to the Wireframe Components panel. This is the panel that contains all the components that we can add to our project. They are called "Wireframe" because these components are "bare bones". They are meant to be added to our imported graphics to make visual-based components.

The Properties panel in Catalyst is like the Properties panel in Flash. As you select an object in our project, the editable properties of that object are displayed in this panel. As we work on our navigation for this project, we will be introduce to a new panel in Catalyst called the HUD. Right now, it is that grayed-out tab entitled "No Selection". Once we begin to work, it will expand to give us the controls we need, based on the active object.

Finally, for those curious types, we can switch from the default Design workspace to the Code workspace. Just click Window Code Workspace in the Menubar. As you can see, it looks much like the Flash Actions panel but instead of ActionScript we see the MXML code that Catalyst is generating in the background as we work.

Join us in the Flash forum.

Add Flash+Catalyst+%96+The+Workspace to Twitter Add Flash+Catalyst+%96+The+Workspace to Facebook Add Flash+Catalyst+%96+The+Workspace to MySpace Add Flash+Catalyst+%96+The+Workspace to Del.icio.us Digg Flash+Catalyst+%96+The+Workspace Add Flash+Catalyst+%96+The+Workspace to Yahoo My Web Add Flash+Catalyst+%96+The+Workspace to Google Bookmarks Add Flash+Catalyst+%96+The+Workspace to Stumbleupon Add Flash+Catalyst+%96+The+Workspace 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

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 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 features
Bookry Drag and Match Jigsaw Puzzle

Bookry Drag & Match Widget Settings

Create a Hype Template for iBooks Author

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor