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

Designer & Developer Work Flow for Flex Builder

on

  • 3,667 views

Adobe CS4 & Flex Builder 3

Adobe CS4 & Flex Builder 3

Statistics

Views

Total Views
3,667
Views on SlideShare
3,655
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 Designer & Developer Work Flow for Flex Builder Presentation Transcript

  • 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
  • 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
  • Design & Development Workflow Checklist
    • Create & modify Flex Skin
    • Wire frame
    • Prototype
    • Layout in MXML
    • Styling in CSS
    • Backgrounds
    • Images
  • 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?
  • CS4 Photoshop
    • No results on Flex or Skin
    • Save image as PNG
    • Import single PNG file one at a time
  • CS4 Flash
    • No results on Flex or Skin
    • Save image as Image or Movie
    • Import single file one at a time
  • Most Common Request Flex Skinning
    • Flex Builder Design Library
    • Includes buttons, tabs, bars, form elements
    • Includes states
  • CS4 Illustrator
  • CS4 Illustrator 26 Components Entire Skin flex_skins.ait
  • CS4 Illustrator
  • CS4 Illustrator
  • CS4 Illustrator Maximum 6 States Disabled Up Over Down Selected Up Selected Disabled Design Tips 2 Color Tone Default: Blue and Grey
  • CS4 Illustrator
  • CS4 FireWorks
  • CS4 Fire Works Commands > Flex Skinning > New Flex Skin Commands > Flex Skinning > Export Flex Skin You’ll get: A folder of Flex skin images
  • CS4 FireWorks Commands > Flex Skinning > New Flex Skin File > Export You’ll get: MXML file & A folder of Flex skin images File > MXML & Images
  • CS4 FireWorks
  • CS4 FireWorks
  • CS4 FireWorks
  • CS4 FireWorks
  • CS4 FireWorks
  • CS4 FireWorks
  • 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>
  • 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;/>
  • 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?
  • Firework CS4
    • Rapid Prototyping including Wire Frame, Prototype, Export
    Wire Frame Prototype Images Layout Export Import
  • New Flex Project CookingFor Food Recipe Finder Where you can find and track recipes quickly
  • 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
  • Firework CS4 Wire Frame Demonstrate Wire Frame within Firework CS4 Export PDF for acceptance
  • Firework CS4 Wire Frame
  • Firework CS4 Wire Frame
  • Firework CS4 Wire Frame Export PDF for acceptance
  • Firework CS4 Demonstrate Prototype within Firework CS4 Prototype Export PDF for acceptance
  • Firework CS4 Prototype Export PDF for acceptance
  • Export Options
    • PDF (Reviewing)
    • HTML & Images
    • CSS & Images
    • MXML & Images
    Big Question: Which Export option will work with Flex Builder Import?
  • Export Options
    • HTML & Images
    • CSS & Images
    • MXML & Images
    Big Question: Which Export option will work with Flex Builder Import? NO NO NO
  • Export Options
    • HTML & Images
    • CSS & Images
    • MXML & Images
    Big Question: Which Export option will work with Flex Builder Import? NO NO Partially Workable
  • 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
  • Flex Builder Import What’s NEXT?
  • 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
  • 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
  • Questions & Answers
  • Bess Ho iTune App Store Help!