360|flex 2011 - Optimizing the Designer - Developer Workflow Using Flash Builder 4 & Flash Catalyst CS5
•Als KEY, PDF herunterladen•
3 gefällt mir•1,086 views
The document discusses optimizing the workflow between designers and developers by utilizing new round-tripping features in Adobe Flash Catalyst CS5.5 that allow for bi-directional editing of projects. It provides tips for thinking ahead to make component naming and organization easier to understand across roles. New workflow options in Catalyst CS5.5 like importing and exporting Flex Library Project files allow for greater collaboration between designers and developers.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (16)
Ähnlich wie 360|flex 2011 - Optimizing the Designer - Developer Workflow Using Flash Builder 4 & Flash Catalyst CS5
Ähnlich wie 360|flex 2011 - Optimizing the Designer - Developer Workflow Using Flash Builder 4 & Flash Catalyst CS5 (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
360|flex 2011 - Optimizing the Designer - Developer Workflow Using Flash Builder 4 & Flash Catalyst CS5
- 1. 1 OPTIMIZING THE DESIGNER- DEVELOPER WORKFLOW Adnaan Ahmad and Dan Orlando www.anaara.com
- 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 WHY DO WE NEED ANOTHER FRIGGIN’ FLASH- BASED PROGRAM?
- 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 PART 1: WORKFLOW Real-world scenarios often require Simultaneous design & development
- 6. 6 FLASH CATALYST CS5 LINEAR/SEMI-LINEAR WORKFLOW Makes sense in theory, but a disaster in practice...
- 7. 7 SEMI-LINEAR WORKFLOW
- 8. WELCOME TO... 8 FLASH CATALYST CS5.5 Bi-directional Workflow Designers & Developers can now share a secondary role as “experience creators”.
- 9. 9 ROUND - TRIPPING Single person/small team workflow Diagram courtesy of Jacob Surber
- 10. 10 ROUND - TRIPPING Multi-person Workflow Diagram courtesy of Jacob Surber
- 11. 11 PART 2: TIPS & TRICKS FOR A HARMONIOUS DESIGNER-DEVELOPER RELATIONSHIP Dan Adnaan
- 12. 12 THINKING AHEAD By thinking ahead of the workflow, consideration is paid to making others’ jobs easier and everybody is happy.
- 13. 13 THINKING AHEAD Good Naming Conventions Bad BigLongList Application_List1 bad DanMainList good Good ProductCategoryList
- 14. 14 THINKING AHEAD Element Organization Design Program Flash Catalyst CS5
- 15. 15 PART 3: NEW WORKFLOW FEATURES IN FLASH CATALYST CS5.5 Let’s blow up stuff...
- 16. ROUND-TRIPPING All Workflows • Project -> Flash Catalyst -> Compatibility Checker • Automatic setting Single 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. ROUND - TRIPPING Multi-person Workflow Multi-person project workflow may start in either Catalyst or Builder... Starts in Catalyst: Designer-driven workflow Starts in Builder: Developer-driven workflow
- 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. 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. 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)
Hinweis der Redaktion
- \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