1. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Adobe Presentation Dragos Dascalita | Designer - Developer workflow with Flash Catalyst and Flash Builder 1

2. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Goal 2 Method to enhance Designer and Developer collaboration to Streamline development process.

3. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Goal, in other words 3 Make Designers and Developers happy

4. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Problem : Main challenges between designers and developers 4 Designer Developer 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 Pixel perfect match Reflecting the design changes into the app Transform visual assets into code Little UI expertise

5. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. High-level workflow 5 Designer Developer Create design Modify design Prepare design 1.0 Development 1.1 1.2 …

6. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. High-level workflow integrating wire-framing processes 6 Designer Developer Create wireframes 1.0 Optional enhancements 1.0 1.1 Modify wireframes 1.1 Sign-off Customer agreement on functionality

7. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Phase1 : [ Designer ] Create design with Flash Catalyst 7 Create design 1.0

8. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 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 8

9. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Phase2 : [ Developer ] Prepare design with Flash Catalyst and Flash Builder (I) 9 Prepare design 1.0 Flash Catalyst: single file Code base : multiple files Maybe multiple projects too Main Challenge

10. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Phase2 : [ Developer ] Prepare design with Flash Catalyst and Flash Builder ( II ) 10 Prepare design 1.0 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 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

11. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Phase2 : [ Developer ] Modularize application ( III ) 11 Module #1 Module #2 Module #... Common library to be shared among modules and applications Main App – shell application Services

12. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Phase 2 : [ Developer ] Include modular application into Flash Catalyst ( IV ) 12 Module #1 Module #2 Common library Mimic shell application loading some modules  Transparent for the designer  Only developers maintain this.

13. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Differences from Flash / Illustrator approach  Flash / Illustrator gives you access to the assets  Catalyst can give you access to the real stuff  Flash / Illustrator - design how stuff looks  Catalyst –control how stuff behaves and looks 13

14. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Recap + Q&A 14 Thank you

15. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.