Presentation given at Flex Camp Orange County. Adapted from slides by Ryan Stewart.

1. Adobe Flash Catalyst
Juan Sanchez
Experience Architect
effectiveui.com

2. The Flash Platform Architecture
Applications, Content and Video
Tools to Design and Develop Framework
Flex
Flash CS4
Professional
Clients
AIR Flash Player
Flash Catalyst
AMF, XML, JSON, SOAP, RSS, ATOM, etc.
HTTP/S, Sockets, RTMP, etc.
Servers
Flex Builder
BlazeDS
Flash Media Server
Data Services
Family
Diagram courtesy of Adobe Systems, Inc.

3. The Flash Platform Architecture
Applications, Content and Video
Tools to Design and Develop Framework
Flex
Flash CS4
Professional
Clients
AIR Flash Player
Flash Catalyst
AMF, XML, JSON, SOAP, RSS, ATOM, etc.
HTTP/S, Sockets, RTMP, etc.
Servers
Flex Builder
BlazeDS
Flash Media Server
Data Services
Family

4. Adobe Flash Catalyst
formerly code-named “Thermo”
A professional interaction design tool for rapidly creating
application interfaces and interactive content without
writing any code.

5. The Current Work ow
4. Design tweaks
1. Comps and vignettes 2. Initial design
Visual Production Developer
Designer Designer
3. Development
Diagram courtesy of Adobe Systems, Inc.

6. The Current Work ow
4. Design tweaks
1. Comps and vignettes 2. Initial design
Visual Production Developer
Designer Designer
3. Development
Diagram courtesy of Adobe Systems, Inc.

7. The Current Work ow
4. Design tweaks
?! ?! ?!
1. Comps and vignettes 2. Initial design
Visual Production Developer
Designer Designer
3. Development
Diagram courtesy of Adobe Systems, Inc.

8. The “Next-gen” Work ow
1. Comps and vignettes 3. Initial design
2. Interaction design
Visual Developer
5. Design tweaks
Designer
4. Development

9. Adobe Flash Catalyst
• Consistent interface with Creative Suite 4
applications provides fast productivity
• Create and publish a nished project or
share a common project le with developers
• Design and development can be done in
parallel – changing either at any point
without impacting the other
• Iterative design and development results in
faster time to market
• The next-gen Flex framework powers both
Flash Catalyst and Gumbo, providing a
common language to share projects

10. Adobe Flash Catalyst
Welcome Screen
The Flash Catalyst welcome screen allows you to start a project directly from a
native Creative Suite or FXG le. No need to change your work ow since all layers
are imported with full delity.

11. Adobe Flash Catalyst
Create Dynamic Artwork
Turn a piece of static artwork into a dynamic component such as a button, by
selecting a menu command from the HUD (Heads-Up Display). All layers are
displayed in a panel to the right, motion and transitions are displayed below.

12. Adobe Flash Catalyst
Alter Behavior and Appearance
Once a piece of artwork is converted into a component such as a button you can
easily change the behavior by selecting the displayed layers and changing the
properties of the four button states (Up, Over, Down, Disabled).

13. Adobe Flash Catalyst
Code View
As you create in design view, the design is represented as well-formed MXML code
behind the scenes. Add logic and back-end connectivity with quot;Gumboquot;, the next
generation of Adobe Flex® Builder™, while preserving design and code integrity.

14. Enough talk.
Let’s Fire Up Flash Catalyst!

15. Let’s take a look from the
Designer’s Perspective

16. The Designer’s Perspective
Purpose Work ows
• Wireframes Wireframes
• • Start with basic “skeleton” of an
Interactive “Sketches”
application
• Comps with interactivity
• Build it up to full delity
• Client buy-off
Start with a comp in CS4 Design Tool
• Prototypes
• Bring it into Flash Catalyst to add
• User Interface “Development”
interactions and animation
• Roundtrip to make re nements or bring
in new artwork
Artwork courtesy of Eddie Breidenbach.

17. The Designer’s Perspective
Primitive Drawing Tools Components Panel
• Similar to other CS4 tools • List of stock “Gumbonents”
• Select and direct-select arrows • Ability to create custom components
• Simple shape creation Timeline
States Panel • Time-based instead of frame-based
• Color coded • Uses color coding from states
• Corresponds with the layers panel • Add standalone effects and transitions
between states
Layers Panel
Round Trip Editing
Stage • “Edit in Illustrator” Button
HUD (Heads Up Display)
• Specify Properties and Interactions

18. The Designer’s Perspective
Components in Flash Catalyst
• Components are the building blocks of a Flex application.
• Flash Catalyst lets you create components based on artwork that you’ve drawn or that
you bring in from one of the CS4 tools.
• Flex 4 components are broken up into basic states. Flash Catalyst lets us manipulate
those states using the States panel.
• Custom components can have arbitrary states and behavior that you create.

19. Looking at the
Designer’s Work ow

20. What about the
Developer’s Perspective?

21. The Developer’s Perspective
Designer in Flash Catalyst Developer in Flex Builder 4
• exports project as FXP • opens FXP in Flex Builder 4
• make design changes after developer • clear separation of logic and design
works on it
• make changes to logic of a component
• connect application to database
• debug the project
• merge changes from Flash Catalyst

22. Looking at the
Development Work ow

23. How long until
We Can Have It?

24. The Timeline
DISCLAIMER: This is all subject to change!
One of the bene ts of going public early is getting
feedback very early on.
• Public Beta in a few months on Adobe Labs (with
Windows support)
• Shipping in about a year
If you have ANY thoughts, email Ryan Stewart at
ryan@adobe.com

25. Learn More About Flash Catalyst
Adobe Labs
www.adobe.com/go/ ashcatalyst
Edge Newsletter
www.adobe.com/newsletters/edge/
december2008/

26. Thanks!
Juan Sanchez
Experience Architect
effectiveui.com