Designer & Developer Work Flow for Flex Builder
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Designer & Developer Work Flow for Flex Builder

on

  • 3,703 views

Adobe CS4 & Flex Builder 3

Adobe CS4 & Flex Builder 3

Statistics

Views

Total Views
3,703
Views on SlideShare
3,691
Embed Views
12

Actions

Likes
3
Downloads
53
Comments
0

3 Embeds 12

http://www.slideshare.net 9
http://www.linkedin.com 2
http://www.lmodules.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Designer & Developer Work Flow for Flex Builder Presentation Transcript

  • 1. Designer / Developer Workflow CS4 & Flex Bess Ho Silicon Valley Web Builder (SVWB) Flex User Group Adobe Headquarter May 12th at SF & May 14th 2009 at SJ
  • 2. Bess Ho iPhone SDK / Web Developer UI Developer / Designer Blog: webbuilders.wordpress.com Founder of Silicon Valley Web Builder (SVWB) Website: svwebbuilder.com Coming Soon Releasing iTune App Store
  • 3. Design & Development Workflow Checklist
    • Create & modify Flex Skin
    • Wire frame
    • Prototype
    • Layout in MXML
    • Styling in CSS
    • Backgrounds
    • Images
  • 4. Options: Adobe CS4 For Flex Builder Support
    • Photoshop CS4
    • Illustrator CS4
    • Flash CS4
    • Firework CS4
    • What product gives you the most support for Flex Builder in building RIA?
  • 5. CS4 Photoshop
    • No results on Flex or Skin
    • Save image as PNG
    • Import single PNG file one at a time
  • 6. CS4 Flash
    • No results on Flex or Skin
    • Save image as Image or Movie
    • Import single file one at a time
  • 7. Most Common Request Flex Skinning
    • Flex Builder Design Library
    • Includes buttons, tabs, bars, form elements
    • Includes states
  • 8. CS4 Illustrator
  • 9. CS4 Illustrator 26 Components Entire Skin flex_skins.ait
  • 10. CS4 Illustrator
  • 11. CS4 Illustrator
  • 12. CS4 Illustrator Maximum 6 States Disabled Up Over Down Selected Up Selected Disabled Design Tips 2 Color Tone Default: Blue and Grey
  • 13. CS4 Illustrator
  • 14. CS4 FireWorks
  • 15. CS4 Fire Works Commands > Flex Skinning > New Flex Skin Commands > Flex Skinning > Export Flex Skin You’ll get: A folder of Flex skin images
  • 16. CS4 FireWorks Commands > Flex Skinning > New Flex Skin File > Export You’ll get: MXML file & A folder of Flex skin images File > MXML & Images
  • 17. CS4 FireWorks
  • 18. CS4 FireWorks
  • 19. CS4 FireWorks
  • 20. CS4 FireWorks
  • 21. CS4 FireWorks
  • 22. CS4 FireWorks
  • 23. CS4 FireWorks <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <mx:Application xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; width=&quot;900&quot; height=&quot;2050&quot; layout=&quot;absolute&quot; backgroundGradientColors=&quot;[#FFFFFF, #FFFFFF]&quot;> <mx:Style> .textStyle { fontFamily:ArialMT; fontSize:10; color:#FFFFFF; } .textStyle2 { fontFamily:ArialMT; fontSize:18; color:#FFFFFF; } .textStyle3 { fontFamily:ArialMT; fontSize:14; color:#FFFFFF; } </mx:Style>
  • 24. CS4 FireWorks <mx:Image source=&quot;images/Image.png&quot; x=&quot;0&quot; y=&quot;0&quot; width=&quot;900&quot; height=&quot;2050&quot;/> <mx:Image source=&quot;images/Image2.png&quot; x=&quot;37&quot; y=&quot;79&quot; width=&quot;824&quot; height=&quot;1887&quot;/> <mx:Image source=&quot;images/Image3.png&quot; x=&quot;49&quot; y=&quot;89&quot; width=&quot;803&quot; height=&quot;1860&quot;/> More… <mx:Image id=&quot;grid background&quot; source=&quot;images/grid background.png&quot; x=&quot;391&quot; y=&quot;1539&quot; width=&quot;98&quot; height=&quot;18&quot;/> <mx:Image id=&quot;grid background2&quot; source=&quot;images/grid background2.png&quot; x=&quot;391&quot; y=&quot;1539&quot; width=&quot;98&quot; height=&quot;10&quot;/> <mx:Image id=&quot;grid background3&quot; source=&quot;images/grid background3.png&quot; x=&quot;563&quot; y=&quot;1538&quot; width=&quot;20&quot; height=&quot;20&quot;/> <mx:Image id=&quot;grid background4&quot; source=&quot;images/grid background3.png&quot; x=&quot;534&quot; y=&quot;1538&quot; width=&quot;20&quot; height=&quot;20&quot;/>
  • 25. Big Picture: Building RIA
    • Flex Skin is a small part
    • You can build RIA without using Flex Skin import
    Wire Frame Prototype Images Layout Export Import Big Question: Which product do I use?
  • 26. Firework CS4
    • Rapid Prototyping including Wire Frame, Prototype, Export
    Wire Frame Prototype Images Layout Export Import
  • 27. New Flex Project CookingFor Food Recipe Finder Where you can find and track recipes quickly
  • 28. Work Flow Define Product Definition Define Product Deliverables Create User Cases & Stories Define Technical Specifications Define Visual Specifications A new Flex project Communications Documentations Teamwork Signoff & Approval Effectiveness Collaborations
  • 29. Firework CS4 Wire Frame Demonstrate Wire Frame within Firework CS4 Export PDF for acceptance
  • 30. Firework CS4 Wire Frame
  • 31. Firework CS4 Wire Frame
  • 32. Firework CS4 Wire Frame Export PDF for acceptance
  • 33. Firework CS4 Demonstrate Prototype within Firework CS4 Prototype Export PDF for acceptance
  • 34. Firework CS4 Prototype Export PDF for acceptance
  • 35. Export Options
    • PDF (Reviewing)
    • HTML & Images
    • CSS & Images
    • MXML & Images
    Big Question: Which Export option will work with Flex Builder Import?
  • 36. Export Options
    • HTML & Images
    • CSS & Images
    • MXML & Images
    Big Question: Which Export option will work with Flex Builder Import? NO NO NO
  • 37. Export Options
    • HTML & Images
    • CSS & Images
    • MXML & Images
    Big Question: Which Export option will work with Flex Builder Import? NO NO Partially Workable
  • 38. Flex Builder Import
    • Won’t accept HTML
    • Won’t accept CSS layout
      • <div> won’t work
      • Firework prototype approach using rectangle layer won’t work
    • Won’t accept MXML layout 100%
      • accept style but won’t allow to rename
      • Won’t optimize image other than GIF
      • MXML layout is absolute, not fluid
      • Background images are not optimized
  • 39. Flex Builder Import What’s NEXT?
  • 40. Firework CS4 Book Foundation Fireworks CS4 by Grant Hinkson (Author), Craig Erskine (Author), Matt Heerema (Author), Chuck Mallott (Author), Matthew Keefe (Author), Hugh Griffith (Author) Paperback: 282 pages Publisher: friends of ED; 1 edition (March 23, 2009) ISBN-10: 1430216182 ISBN-13: 978-1430216186
  • 41. Flex 3 Book Creating Visual Experiences with Flex 3.0 by Juan Sanchez (Author), Andy McIntosh (Author) Paperback: 432 pages Publisher: Addison-Wesley Professional; 1 edition (November 27, 2008) ISBN-10: 0321545370 ISBN-13: 978-0321545374
  • 42. Questions & Answers
  • 43. Bess Ho iTune App Store Help!