Download
adobe presentation n.
Skip this Video
Loading SlideShow in 5 Seconds..
Adobe Presentation PowerPoint Presentation
Download Presentation
Adobe Presentation

Adobe Presentation

143 Views Download Presentation
Download Presentation

Adobe Presentation

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Adobe Presentation Dragos Dascalita | Designer - Developer workflow with Flash Catalyst and Flash Builder

  2. Goal Method to enhance Designerand Developer collaboration to Streamline development process.

  3. Goal, in other words Make Designers and Developers happy 

  4. Problem : Main challenges between designers and developers • 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 Designer • Pixel perfect match • Reflecting the design changes into the app • Transform visual assets into code • Little UI expertise Developer

  5. High-level workflow Designer Modify design Create design 1.0 1.2 1.1 … Developer 1.0 1.1 Prepare design Development

  6. High-level workflow integrating wire-framing processes Designer Modify wireframes Create wireframes Sign-off Customer agreement on functionality 1.1 1.0 Developer 1.0 1.1 Optional enhancements

  7. Phase1 : [ Designer ] Create design with Flash Catalyst Create design 1.0

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

  9. Phase2 : [ Developer ] Prepare design with Flash Catalyst and Flash Builder (I) Main Challenge Code base : multiple files Maybe multiple projects too Flash Catalyst: single file 1.0 Prepare design

  10. 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 • 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 1.0 Prepare design

  11. Phase2 : [ Developer ] Modularize application ( III ) Common library to be shared among modules and applications Module #1 Module #2 Module #... Main App – shell application Services

  12. Phase 2 : [ Developer ] Include modular application into Flash Catalyst ( IV ) • Transparent for the designer • Only developers maintain this. Module #1 Module #2 Common library Mimic shell application loading some modules

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

  14. Recap + Q&A Thank you