Getting Start with Adobe Flash Catalyst beta 1 – Part 1
by WaiLam, June 17th, 2009
What is Flash Catalyst?

catalyst_1_ui

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_ui

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.

Possibly related posts: (automatically generated)


Tags: , , , ,

ShareThis

This entry was posted on Wednesday, June 17th, 2009 at 7:37 am and is filed under Flash, Flash Catalyst, Flash Tutorials, Flex, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

3 Responses to “Getting Start with Adobe Flash Catalyst beta 1 – Part 1”

  1. Flash Enabled Blog – Everything Flash » Blog Archive Getting Start with Flash Catalyst Part 3 – Menu with 3d effect « Says:
    June 25th, 2009 at 7:14 am

    [...] Start with Flash Catalyst Part 2 – import artworkFlash CS4 Character Animation with Bone Part 1Getting Start with Adobe Flash Catalyst beta 1 – Part 1Interactive Flex Calendar Component(With Source) – Just Awesome!!!Creating a Simple MP3 Player using [...]

  2. Flash Enabled Blog – Everything Flash » Blog Archive Getting Start with Flash Catalyst Part 4 (end) – Assign Interaction « Says:
    June 30th, 2009 at 8:31 am

    [...] Enabled Blog … on Getting Start with Flash Catal…Flash Enabled Blog … on Getting Start with Adobe Flash…WaiLam on Getting Start with Flash Catal…misha studio on Components | FLV / [...]

  3. Weekly Flash tutorial roundup #9 | Design your way Says:
    August 17th, 2009 at 6:54 pm

    [...] Getting Start with Adobe Flash Catalyst beta 1 – Part 1 [...]

Let leave a Comments for this post.

Close