Adobe presentation
Sponsored Links
This presentation is the property of its rightful owner.
1 / 15

Adobe Presentation PowerPoint PPT Presentation


  • 106 Views
  • Uploaded on
  • Presentation posted in: General

Adobe Presentation. Dragos Dascalita | Designer - Developer workflow with Flash Catalyst and Flash Builder. Goal. Method to enhance Designer a nd Developer collaboration to Streamline d evelopment process. Goal, in other words. Make Designers and Developers happy .

Download Presentation

Adobe Presentation

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Adobe Presentation

Dragos Dascalita | Designer - Developer workflow with Flash Catalyst and Flash Builder


Goal

Method to enhance

Designerand Developer

collaboration to

Streamline

development process.


Goal, in other words

Make

Designers

and

Developers

happy 


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


High-level workflow

Designer

Modify design

Create design

1.0

1.2

1.1

Developer

1.0

1.1

Prepare design

Development


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


Phase1 : [ Designer ] Create design with Flash Catalyst

Create design

1.0


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


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


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


Phase2 : [ Developer ] Modularize application ( III )

Common library to be shared among modules and applications

Module #1

Module #2

Module #...

Main App – shell application

Services


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


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


Recap + Q&A

Thank you


  • Login