Flash Catalyst at Flex Camp Orange County

Adobe Flash Catalyst Juan Sanchez Experience Architect eﬀectiveui.com

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.

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

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

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.

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.

The “Next-gen” Work ow 1. Comps and vignettes 3. Initial design 2. Interaction design Visual Developer 5. Design tweaks Designer 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 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.

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.

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

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.

Enough talk. Let’s Fire Up Flash Catalyst!

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

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-oﬀ 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.

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 eﬀects and transitions between states Layers Panel Round Trip Editing Stage • “Edit in Illustrator” Button HUD (Heads Up Display) • Specify Properties and Interactions

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

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 ryan@adobe.com

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

Thanks! Juan Sanchez Experience Architect eﬀectiveui.com

http://scalenine.com	1977
http://www.slideshare.net	12
http://lichtbringer.biz	11
http://translate.googleusercontent.com	4
http://blog.dthreestudios.com	3
http://static.slideshare.net	2
http://durga-technology4you.blogspot.com	1
http://www.adobe4all.com	1
http://wildfire.gigya.com	1
http://66.249.89.132	1
http://203.208.33.132	1
http://www.hanrss.com	1
http://feeds2.feedburner.com	1
http://feeds.feedburner.com	1
http://markshen.wordpress.com	1

Flash Catalyst at Flex Camp Orange County

by Juan Sanchez

Accessibility

Categories

Upload Details

Usage Rights

15 Embeds 2,018

Statistics