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

Adobe Presentation PowerPoint PPT Presentation


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

Adobe Presentation

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


Adobe presentation

Goal

Method to enhance

Designerand Developer

collaboration to

Streamline

development process.


Goal in other words

Goal, in other words

Make

Designers

and

Developers

happy 


Problem main challenges between designers and developers

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

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

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

Phase1 : [ Designer ] Create design with Flash Catalyst

Create design

1.0


Flash catalyst and flash builder

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

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

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

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

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

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

Recap + Q&A

Thank you


  • Login