1    OPTIMIZING THE DESIGNER-     DEVELOPER WORKFLOW         Adnaan Ahmad and Dan Orlando               www.anaara.com
2          Adnaan Ahmad                                        Dan Orlando    • UX/UE Designer & Developer                ...
3     WHY DO WE    NEED ANOTHER    FRIGGIN’ FLASH-        BASED      PROGRAM?
4      THE INHERENT DIVIDE    Developer                                                              Designer             ...
5                   PART 1:                  WORKFLOW    Real-world scenarios often require Simultaneous design & developm...
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 Workflow    Designers & Developers can now share a sec...
9    ROUND - TRIPPING      Single person/small team workflow                                          Diagram courtesy of ...
10     ROUND - TRIPPING         Multi-person Workflow                                 Diagram courtesy of Jacob Surber
11                   PART 2:      TIPS & TRICKS FOR A HARMONIOUS     DESIGNER-DEVELOPER RELATIONSHIP         Dan          ...
12                THINKING AHEAD     By thinking ahead of the workflow, consideration is paid to         making others’ job...
13              THINKING AHEAD          Good Naming Conventions            Bad        BigLongList      Application_List1  ...
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 -...
ROUND - TRIPPING                 Multi-person WorkflowMulti-person project workflow may start in        either Catalyst or...
FXPL ROUND-TRIPPING                      Developer-driven workflow• Flex Library Project (FXPL) Files  ✴ Collectionof comp...
FXPL ROUND-TRIPPING                    Designer-driven workflow• Flex Library Project (FXPL) Files  ✴ Designer  creates co...
RESOURCES                    “Optimizing work ow with Flash Catalyst CS5”      http://www. ashmagazine.com/tutorials/detai...
Upcoming SlideShare
Loading in …5
×

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

4,240 views

Published on

These are the slides from my 2011 360|Flex presentation on "Optimizing the designer - developer workflow with Flash Builder 4 and Flash Catalyst CS5"

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,240
On SlideShare
0
From Embeds
0
Number of Embeds
2,345
Actions
Shares
0
Downloads
25
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Plan the application \n- Start with a detailed project specification. This describes each page or screen, the artwork and interactive components on each page, user navigation, and the different states of each component.\n- should also describes any data list components used to retrieve and display external data.\n\nCreate or acquire artwork, video, and sound \n- Create a layered design document or composition in Adobe Illustrator, Photoshop, or Fireworks.\n\nBring in artwork, video, and sound (to Flash Cataylst)\n- Bring the layered artwork into Flash Catalyst. \n- You can also import individual graphic files or create simple graphics using the built-in vector drawing tools. \n- Import additional assets, such as video, sound, and SWF content. For data-centric components, such as a data list, import a representative sample of the data (text or images).\n\nCreate and modify page states \n- Create pages according to the project specification.\n\nCreate interactive components and define component states \n- Convert artwork to ready-made components (buttons, scroll bars, data lists, and so on). \n- Use the Wireframe Components panel to quickly add common components with a generic appearance. \n- Create custom components for behaviors that you can’t capture with the built-in components. \n- For data-centric applications, use design-time data to design data list components. Design-time data allows the use of dummy content, such as sample database records or bitmap images, without having to actually connect to a back-end system. A Flex developer can replace the design-time data with real data from a database or web service.\n- Components can have multiple states, such as the Up, Over, Down, and Disabled states of a button. Create or modify the different states of each interactive component, according to your project specification\n\nDefine interactions and transitions \n- Add interactions that define what happens as users interact with the application. For example, you can add interactions that transition from one page or component state to another when a user clicks a button. \n- You can also add interactions that play animation, control video playback, or open an URL. \n- Use the Timelines panel to add and modify smooth animated transitions between pages and component states. \n\nShare the project with a Flex developer \n- Save a data-centric Flash Catalyst project file (FXP) for further development in Adobe Flash Builder. \n- Export the Flash Catalyst project library.\n- Exporting a library package creates a single file containing every library item in the project. The package is saved as an FXPL file, which we’ll talk about later.\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 360|flex 2011 - Optimizing the Designer - Developer Workflow Using Flash Builder 4 & Flash Catalyst CS5

    1. 1. 1 OPTIMIZING THE DESIGNER- DEVELOPER WORKFLOW Adnaan Ahmad and Dan Orlando www.anaara.com
    2. 2. 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. 3. 3 WHY DO WE NEED ANOTHER FRIGGIN’ FLASH- BASED PROGRAM?
    4. 4. 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. 5. 5 PART 1: WORKFLOW Real-world scenarios often require Simultaneous design & development
    6. 6. 6 FLASH CATALYST CS5 LINEAR/SEMI-LINEAR WORKFLOW Makes sense in theory, but a disaster in practice...
    7. 7. 7 SEMI-LINEAR WORKFLOW
    8. 8. WELCOME TO...8 FLASH CATALYST CS5.5 Bi-directional Workflow Designers & Developers can now share a secondary role as “experience creators”.
    9. 9. 9 ROUND - TRIPPING Single person/small team workflow Diagram courtesy of Jacob Surber
    10. 10. 10 ROUND - TRIPPING Multi-person Workflow Diagram courtesy of Jacob Surber
    11. 11. 11 PART 2: TIPS & TRICKS FOR A HARMONIOUS DESIGNER-DEVELOPER RELATIONSHIP Dan Adnaan
    12. 12. 12 THINKING AHEAD By thinking ahead of the workflow, consideration is paid to making others’ jobs easier and everybody is happy.
    13. 13. 13 THINKING AHEAD Good Naming Conventions Bad BigLongList Application_List1 bad DanMainList good Good ProductCategoryList
    14. 14. 14 THINKING AHEAD Element Organization Design Program Flash Catalyst CS5
    15. 15. 15 PART 3: NEW WORKFLOW FEATURES IN FLASH CATALYST CS5.5 Let’s blow up stuff...
    16. 16. 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
    17. 17. 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
    18. 18. 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
    19. 19. 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.
    20. 20. 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)

    ×