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.
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.
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.
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.
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Follow @ArtAnimationTut
Tweet
Content copyright © 2023 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.
