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

Adobe PresentationDragos Dascalita | Designer - Developer workflow with Flash Catalyst and Flash Builder

1

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

Goal

2

Method to enhance

Designer and Developer

collaboration to

Streamline

development process.

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

Goal, in other words

3

Make

Designers

and

Developers

happy

© 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

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

High-level workflow

5

Designer

Developer

Create design Modify design

Prepare design

1.0

1.0

Development

1.1

1.1 1.2

…

© 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

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

Phase1 : [ Designer ] Create design with Flash Catalyst

7

Create design

1.0

© 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

© 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

© 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

© 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

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

© 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

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

Recap + Q&A

14

Thank you

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