Designer & Developer Work Flow for Flex Builder

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 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 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="900" height="2050" layout="absolute" backgroundGradientColors="[#FFFFFF, #FFFFFF]"> <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="images/Image.png" x="0" y="0" width="900" height="2050"/> <mx:Image source="images/Image2.png" x="37" y="79" width="824" height="1887"/> <mx:Image source="images/Image3.png" x="49" y="89" width="803" height="1860"/> More… <mx:Image id="grid background" source="images/grid background.png" x="391" y="1539" width="98" height="18"/> <mx:Image id="grid background2" source="images/grid background2.png" x="391" y="1539" width="98" height="10"/> <mx:Image id="grid background3" source="images/grid background3.png" x="563" y="1538" width="20" height="20"/> <mx:Image id="grid background4" source="images/grid background3.png" x="534" y="1538" width="20" height="20"/>

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 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!