Adobe Presentation
Dragos Dascalita | Designer - Developer workflow with Flash Catalyst and Flash Builder
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
1
Goal
Method to enhance
Designer and Developer
collaboration to
Streamline
development process.
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
2
Goal, in other words
Make
Designers
and
Developers
happy 
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
3
Problem : Main challenges between designers and developers
Designer
• Easily push changes that might have been considered insignificant and delayed past shipping date
• Create prototypes and preview the changes easily in the real app
• Catch XD mistakes on time before it’s too late
Developer
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
• Pixel perfect match
• Reflecting the design changes into the app
• Transform visual assets into code
• Little UI expertise
4
High-level workflow
Modify design
Create design
Designer
1.0
1.2
1.1
…
Developer
1.0
1.1
Prepare design
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Development
5
High-level workflow integrating wire-framing processes
Modify wireframes
Create wireframes
Sign-off
Customer
agreement on
functionality
Designer
1.1
1.0
Developer
1.0
1.1
Optional enhancements
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
6
Phase1 : [ Designer ] Create design with Flash Catalyst
Create design
1.0
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
7
Flash Catalyst and Flash Builder

Catalyst – WYSIWYG over Flex SDK

Has similar principles with Flash Builder, hiding the code, exposing visual tools – excelent for
designers

This means:


It comes bundled with a Flex SDK

It compiles a Flex project in the same way Flash Builder does
Keeps all project files into a single file for simplicity
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
8
Phase2 : [ Developer ] Prepare design with Flash Catalyst and Flash Builder (I)
Main Challenge
Code base : multiple files
Flash Catalyst: single
file
1.0
Prepare design
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
9
Maybe multiple projects
too
Phase2 : [ Developer ] Prepare design with Flash Catalyst and Flash Builder ( II )
• Flash Catalyst project file is a zip container
• Instead of maintaining a duplicated code base inside the Flash
Catalyst project file, maintain only a few compiled modules:
• Identify functional areas
1.0
Prepare design
• Split functional areas into modules
• Load a runtime skin ( Compile CSS to SWF )
• Externalize as much as possible the look & feel and UI behavior
into skin classes
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
10
Phase2 : [ Developer ] Modularize application ( III )
Common library to be shared among modules and applications
Module #1
Module #2
Module #...
Main App – shell application
Services
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
11
Phase 2 : [ Developer ] Include modular application into Flash Catalyst ( IV )
Module #1
Module #2
Common library
Mimic shell application
loading some modules
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
12

Transparent for the designer

Only developers maintain this.
Differences from Flash / Illustrator approach
Flash / Illustrator gives you access to the assets

Catalyst can give you access to the real stuff



© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flash / Illustrator - design how stuff looks
Catalyst –control how stuff behaves and looks
13
Recap + Q&A
Thank you
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
14
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.