360|flex 2011 - Optimizing the Designer - Developer Workflow Using Flash Builder 4 & Flash Catalyst CS5

1 OPTIMIZING THE DESIGNER- DEVELOPER WORKFLOW Adnaan Ahmad and Dan Orlando www.anaara.com

2 Adnaan Ahmad Dan Orlando • UX/UE Designer & Developer • Computer Scientist specializing in Adobe • UXD Consultant, System Engineer, & Flash Platform for the Enterprise Creative Director for Government and • Author of FLEX 4 IN ACTION (Manning private sector clientele Press) • Imaging & Digital Arts, Animation and • Adobe Community Professional (ACP) Interactivity specialist • Author of many print and web publications • Currently: UX/UE for Anaara Media, for IBM developerWorks, Adobe Dev working on Data Visualization software for Connection, Amazon Dev Connection, Flash the US Dept. of Energy Magazine, PHP Architect, and more • Twitter: @adnaanahmad • Currently: CEO of CreativeRIA (creativeria.com) & constultant for Anaara Media. • Blogs: danorlando.com blog.anaara.com creativeria.com • Twitter: @danorlando1

3 WHY DO WE NEED ANOTHER FRIGGIN’ FLASH- BASED PROGRAM?

4 THE INHERENT DIVIDE Developer Designer Is that a WTF is a ToggleButton or a ToggleButton? Gimmie PopUpButton? How a break... its a friggin am I supposed to button you doof know what to do with this?! This might get ugly!

5 PART 1: WORKFLOW Real-world scenarios often require Simultaneous design & development

6 FLASH CATALYST CS5 LINEAR/SEMI-LINEAR WORKFLOW Makes sense in theory, but a disaster in practice...

7 SEMI-LINEAR WORKFLOW

WELCOME TO...8 FLASH CATALYST CS5.5 Bi-directional Workﬂow Designers & Developers can now share a secondary role as “experience creators”.

9 ROUND - TRIPPING Single person/small team workflow Diagram courtesy of Jacob Surber

10 ROUND - TRIPPING Multi-person Workflow Diagram courtesy of Jacob Surber

11 PART 2: TIPS & TRICKS FOR A HARMONIOUS DESIGNER-DEVELOPER RELATIONSHIP Dan Adnaan

12 THINKING AHEAD By thinking ahead of the workﬂow, consideration is paid to making others’ jobs easier and everybody is happy.

13 THINKING AHEAD Good Naming Conventions Bad BigLongList Application_List1 bad DanMainList good Good ProductCategoryList

14 THINKING AHEAD Element Organization Design Program Flash Catalyst CS5

15 PART 3: NEW WORKFLOW FEATURES IN FLASH CATALYST CS5.5 Let’s blow up stuff...

ROUND-TRIPPINGAll Workflows• Project -> Flash Catalyst -> Compatibility Checker• Automatic settingSingle person• Project -> Flash Catalyst -> Edit Project in Flash Catalyst• Project -> Flash Catalyst -> Resume Working on Project in Flash Builder 2 or more• Project -> Flash Catalyst -> Import Flash Catalyst Project• Project -> Flash Catalyst -> Export Flash Catalyst Project Team/Multi-person• FXPL libraries

ROUND - TRIPPING Multi-person WorkflowMulti-person project workflow may start in either Catalyst or Builder... Starts in Catalyst: Designer-driven workflow Starts in Builder: Developer-driven workflow

FXPL ROUND-TRIPPING Developer-driven workflow• Flex Library Project (FXPL) Files ✴ Collectionof components, skins, and assets ✴ No concept of application state ✴ Developer exports from Builder to be skinned in Catalyst by designer ✴ AS-based components extending SkinnableComponent appear in SkinnableComponent list in Catalyst ✴ Designer exports library from Catalyst, merged back into the respective library project in Builder. ✴ Enables designer to update visuals in multiple iterations while dev continues on the app Note: Flash Catalyst cannot open a FXPL file directly; instead a new blank Flash Catalyst project must be created and then the FXPL can be imported

FXPL ROUND-TRIPPING Designer-driven workflow• Flex Library Project (FXPL) Files ✴ Designer creates component library in Flash Catalyst ✴ Designer exports library from Catalyst as FXPL ✴ FXPL is then merged back into the respective library project in Builder. ✴ Can be re-exported from Builder as FXPL whenever necessary if the design and/or interactivity of the library’s components must be edited in Catalyst again, then merged back into Builder.

RESOURCES “Optimizing work ow with Flash Catalyst CS5” http://www. ashmagazine.com/tutorials/detail/optimizing_work ow_with_ ash “Understanding new Flash Catalyst CS5.5 and Flash Builder 4.5 work ows”http://www.adobe.com/devnet/ ashcatalyst/articles/ ashcatalyst- ashbuilder-work ows.html FLEX 4 IN ACTION (Manning Press) Tariq Ahmed, Dan Orlando, John C. Bland II, Joel Hooks At Amazon, Borders, Barnes & Noble, or Manning Press (www.manning.com/ahmed2)

http://danorlando.com	2199
http://translate.googleusercontent.com	9
http://saty	1

360|flex 2011 - Optimizing the Designer - Developer Workflow Using Flash Builder 4 & Flash Catalyst CS5

by Dan Orlando

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 2,209

Statistics

360|flex 2011 - Optimizing the Designer - Developer Workflow Using Flash Builder 4 & Flash Catalyst CS5 Presentation Transcript