designer & developer work flow for flex builder
DESCRIPTION
Adobe CS4 & Flex Builder 3TRANSCRIPT
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!