You are Here:Home>>Old Posts>>Getting Start with Adobe Flash Catalyst beta 1 – Part 1

Getting Start with Adobe Flash Catalyst beta 1 – Part 1

Carlos Pinho
By | 2009-06-17T07:37:22+00:00 Jun 17, 2009|Old Posts|

What is Flash Catalyst?

catalyst_1_ui1

Adobe Flash Catalyst is a new professional interaction design tool for rapidly creating user interfaces without coding.

  • Transform artwork created in Adobe Photoshop® and Adobe Illustrator® into functional user interfaces.
  • Create interactive prototypes with the ability to leverage them in the final product
  • Publish a finished project as a SWF file ready for distribution
  • Work more efficiently with developers who use Adobe Flash Builder™ 4 to create rich Internet applications (RIAs). Designers use Flash Catalyst to create the functional user experience then provide the project file to developers who use Flash Builder to add functionality and integrate with servers and services.

Features of Flash Catalyst?

Rapidly create and deliver a finished SWF file or collaborate more effectively with developers:

  • Fast learning curve: If you can use Photoshop or Illustrator you can quickly learn to use Flash Catalyst.
  • Fast Interaction Design: Transform native Photoshop and Illustrator files into functional user experiences. Publish finished projects for distribution as a SWF file.
  • Collaborate more effectively with developers: Provide Flash Catalyst projects to developers who use Flash Builder to add additional functionality and integrate with servers and services.

Different work flow with Flash Catalyst

The traditional work flow for creating a flash enabled website are complex. Designer work on the layout design first and pass to programmer to do programming on the interaction of the UI. If any change on the graphics may affect the program. Result, programmer may need to redo the program if any change on the layout.

catalyst_1_flow_1

Now, the new work flow by using the Flash Catalyst. The UI design and the business logic can be separated. Designer can work on the layout design and also the UI interaction. Flash Catalyst allow designer to do interaction on the UI without any programming. And the business logic behind the UI can be done within the Flash Builder by programmer.

catalyst_1_ui

Concepts of using Flash Catalyst interface

fc_1_concept_state


Page/States

The main concept in using Flash Catalyst is state. Each state represent different section or page of each website. For example, you website have introduction, portfolio and contact. Then, introduction is the first state, portfolio is the second state and the contact is the third state.

fc_1_concept_transtion

Transition and action

From one state to other state, we have transition. In Flash Catalyst, you are allow to set different action to each transition. For example, when transition from introduction to portfolio, you can set the content of introduction fade out and content of portfolio fade in.

Understand the user interface of Catalyst

Pages/States: This panel show the pages/states contain in this project. Fromthis panel, you can add new state or duplicate existing state/page.

catalyst_1_states

HUD: The heads-up display (HUD) is use to display the setting available to the selected item on the stage. You can use it to edit the item appearance and assign interaction to the selected item.

catalyst_1_hud

Timelines: The timelines is use to display the transition/action for each stage. And allow you to add different action for each transition. And set the duration of each transition.

catalyst_1_timeline

Wireframe Components: The wireframe components are use to do wire frame design on the UI. You can drag from the components panel to the stage to add a components. And then use the HUD to change skin of the components.

Tools panel/layers: The Tools panel contains tool for selecting item and create shape and text on the stage. The layers panel just allow you to group different item into layer and control the visibility of the layers.

catalyst_1_toolpanelGet Flash Catalyst

Flash Catalyst is under beta 1. You can get the beta version from adobe lab.


Next

You should now know more about what is flash catalyst. Excite about the function of flash catalyst? I will teach how to create a stylish menu step by step in next tutorial.

About the Author:

Carlos Pinho
A father, a husband and a geek... Carlos was the founder of projects like The Tech Labs and Flash Enabled Blog. He is the founder of TekTuts He is passionate about technologies. Their main skills are in analytics, transport & logistics, business administration. He also writes about programming resources, trends, strategy and web development.