360|flex 2011 - Optimizing the Designer - Developer Workflow Using Flash Builder 4 & Flash Catalyst CS5
Upcoming SlideShare
Loading in...5

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



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

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



Total Views
Views on SlideShare
Embed Views



3 Embeds 2,349

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



Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • \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 360|flex 2011 - Optimizing the Designer - Developer Workflow Using Flash Builder 4 & Flash Catalyst CS5 Presentation Transcript

  • 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
  • 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! View slide
  • 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...
  • WELCOME TO...8 FLASH CATALYST CS5.5 Bi-directional Workflow 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
  • 12 THINKING AHEAD By thinking ahead of the workflow, 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)