designer & developer work flow for flex builder

Designer / Developer WorkflowCS4 & Flex

Bess HoSilicon Valley Web Builder (SVWB)

Flex User GroupAdobe Headquarter

May 12th at SF & May 14th 2009 at SJ

Bess HoiPhone SDK / Web Developer

UI Developer / DesignerBlog: webbuilders.wordpress.com

Founder of Silicon Valley Web Builder (SVWB)Website: svwebbuilder.com

Coming Soon

ReleasingiTune App Store

Design & Development Workflow ChecklistCreate & modify Flex SkinWire framePrototypeLayout in MXMLStyling in CSSBackgroundsImages

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?

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 SkinSave image as PNGImport 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 RequestFlex SkinningFlex Builder Design LibraryIncludes buttons, tabs, bars, form

elementsIncludes states

CS4 Illustrator

CS4 Illustrator 26 ComponentsEntire Skin flex_skins.ait

CS4 Illustrator

CS4 Illustrator

CS4 IllustratorMaximum 6 StatesDisabledUpOverDownSelected UpSelected Disabled

Design Tips2 Color Tone

Default:Blue and Grey

CS4 Illustrator

CS4 FireWorks

CS4 Fire WorksCommands > Flex Skinning> New Flex Skin

Commands > Flex Skinning> Export Flex Skin

You’ll get:A folder of Flex skin images

CS4 FireWorksCommands > 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="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 RIAFlex Skin is

a small partYou can

build RIA without using Flex Skin import

Wire Frame

Prototype

Images Layout

Export

ImportBig Question:Which product do I use?Big Question:Which product do I use?

Firework CS4Rapid

Prototyping including Wire Frame, Prototype, Export

Wire Frame

Prototype

Images Layout

Export

Import

New Flex Project

CookingForFood Recipe FinderWhere you can find and track recipes quickly

Work Flow

Define Product DefinitionDefine Product DeliverablesCreate User Cases & StoriesDefine Technical SpecificationsDefine 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 CS4Wire Frame Export PDF for acceptance

Firework CS4

Demonstrate Prototype within Firework CS4

Prototype

Export PDF for acceptance

Firework CS4Prototype Export PDF for acceptance

Export Options

PDF (Reviewing)HTML & ImagesCSS & ImagesMXML & Images

Big Question:Which Export option will work with Flex Builder Import?

Big Question:Which Export option will work with Flex Builder Import?

Export Options

HTML & ImagesCSS & ImagesMXML & Images

Big Question:Which Export option will work with Flex Builder Import?

Big Question:Which Export option will work with Flex Builder Import?

NO

NO

NO

Export Options

HTML & ImagesCSS & ImagesMXML & Images

Big Question:Which Export option will work with Flex Builder Import?

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 BookFoundation Fireworks CS4by Grant Hinkson (Author), Craig Erskine (Author), Matt Heerema (Author), Chuck Mallott (Author), Matthew Keefe (Author), Hugh Griffith (Author)

Paperback: 282 pagesPublisher: friends of ED; 1 edition (March 23, 2009)ISBN-10: 1430216182ISBN-13: 978-1430216186

Flex 3 Book

Creating Visual Experiences with Flex 3.0by Juan Sanchez (Author), Andy McIntosh (Author)

Paperback: 432 pagesPublisher: Addison-Wesley Professional; 1 edition (November 27, 2008)ISBN-10: 0321545370ISBN-13: 978-0321545374

Questions & Answers

Bess Ho

iTune App Store

Help!