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


The Current Work"ow

VisualDesigner

ProductionDesigner

Developer

1. Comps and vignettes 2. Initial design

3. Development

4. Design tweaks


?! ?! ?!

The “Next-gen” Work"ow

VisualDesigner

Developer

1. Comps and vignettes2. Interaction design

5. Design tweaks

3. Initial design

4. Development


• 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


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.


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.


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).


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”


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


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]

mailto:[email protected]

mailto:[email protected]

Learn More About Flash Catalyst

Adobe Labswww.adobe.com/go/"ashcatalyst

Edge Newsletterwww.adobe.com/newsletters/edge/december2008/

http://www.adobe.com/go/flashcatalyst








http://www.adobe.com/newsletters/edge/december2008/



Thanks!

Juan SanchezExperience Architect

effectiveui.com

Flash Catalyst at Flex Camp Orange County

Technology

Transcript of Flash Catalyst at Flex Camp Orange County