Download - Flash Catalyst at Flex Camp Orange County
Adobe Flash Catalyst
Juan SanchezExperience Architect
effectiveui.com
The Flash Platform Architecture
Flex Builder
Flex
Flash Media Server Family
Flash CS4 Professional
Tools to Design and Develop
Clients
Servers
Framework
AMF, XML, JSON, SOAP, RSS, ATOM, etc.HTTP/S, Sockets, RTMP, etc.
Flash PlayerAIR
Applications, Content and Video
BlazeDSData Services
Flash Catalyst
Diagram courtesy of Adobe Systems, Inc.
Flex
Flash Media Server Family
Clients
Servers
Framework
AMF, XML, JSON, SOAP, RSS, ATOM, etc.HTTP/S, Sockets, RTMP, etc.
Flash PlayerAIR
Applications, Content and Video
BlazeDSData Services
The Flash Platform Architecture
Flex Builder
Flash CS4 Professional
Tools to Design and Develop
Flash Catalyst
Adobe Flash Catalystformerly code-named “Thermo”
A professional interaction design tool for rapidly creatingapplication interfaces and interactive content withoutwriting any code.
The Current Work"ow
VisualDesigner
ProductionDesigner
Developer
1. Comps and vignettes 2. Initial design
3. Development
4. Design tweaks
Diagram courtesy of Adobe Systems, Inc.
The Current Work"ow
VisualDesigner
ProductionDesigner
Developer
1. Comps and vignettes 2. Initial design
3. Development
4. Design tweaks
Diagram courtesy of Adobe Systems, Inc.
The Current Work"ow
VisualDesigner
ProductionDesigner
Developer
1. Comps and vignettes 2. Initial design
3. Development
4. Design tweaks
Diagram courtesy of Adobe Systems, Inc.
?! ?! ?!
The “Next-gen” Work"ow
VisualDesigner
Developer
1. Comps and vignettes2. Interaction design
5. Design tweaks
3. Initial design
4. Development
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
Adobe Flash Catalyst
Welcome ScreenThe 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.
Adobe Flash Catalyst
Create Dynamic ArtworkTurn 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.
Adobe Flash Catalyst
Alter Behavior and AppearanceOnce 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).
Adobe Flash Catalyst
Code ViewAs you create in design view, the design is represented as well-formed MXML code behind the scenes. Add logic and back-end connectivity with "Gumbo", the next generation of Adobe Flex® Builder™, while preserving design and code integrity.
Enough talk.
Let’s Fire Up Flash Catalyst!
Let’s take a look from the
Designer’s Perspective
The Designer’s Perspective
Artwork courtesy of Eddie Breidenbach.
Work"owsWireframes
• Start with basic “skeleton” of an application
• Build it up to full #delity
Start with a comp in CS4 Design Tool
• Bring it into Flash Catalyst to add interactions and animation
• Roundtrip to make re#nements or bring in new artwork
Purpose• Wireframes
• Interactive “Sketches”
• Comps with interactivity
• Client buy-off
• Prototypes
• User Interface “Development”
The Designer’s Perspective
Primitive Drawing Tools• Similar to other CS4 tools• Select and direct-select arrows• Simple shape creation
States Panel• Color coded• Corresponds with the layers panel
Layers Panel
Stage
HUD (Heads Up Display)• Specify Properties and Interactions
Components Panel• List of stock “Gumbonents”• Ability to create custom components
Timeline• Time-based instead of frame-based• Uses color coding from states• Add standalone effects and transitions
between states
Round Trip Editing• “Edit in Illustrator” Button
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.
Looking at the
Designer’s Work!ow
What about the
Developer’s Perspective?
The Developer’s Perspective
Developer in Flex Builder 4• opens FXP in Flex Builder 4
• clear separation of logic and design
• make changes to logic of a component
• connect application to database
• debug the project
• merge changes from Flash Catalyst
Designer in Flash Catalyst• exports project as FXP
• make design changes after developer works on it
Looking at the
Development Work!ow
How long until
We Can Have It?
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 [email protected]
Learn More About Flash Catalyst
Adobe Labswww.adobe.com/go/"ashcatalyst
Edge Newsletterwww.adobe.com/newsletters/edge/december2008/
Thanks!
Juan SanchezExperience Architect
effectiveui.com