Designer & Developer Work Flow for Flex Builder
-
Upload
bessho -
Category
Technology
-
view
3.662 -
download
1
description
Transcript of Designer & Developer Work Flow for Flex Builder
![Page 1: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/1.jpg)
Designer / Developer WorkflowCS4 & Flex
Bess HoSilicon Valley Web Builder (SVWB)
Flex User GroupAdobe Headquarter
May 12th at SF & May 14th 2009 at SJ
![Page 2: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/2.jpg)
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
![Page 3: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/3.jpg)
Design & Development Workflow ChecklistCreate & modify Flex SkinWire framePrototypeLayout in MXMLStyling in CSSBackgroundsImages
![Page 4: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/4.jpg)
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?
![Page 5: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/5.jpg)
CS4 Photoshop
No results on Flex or SkinSave image as PNGImport single PNG file one at a time
![Page 6: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/6.jpg)
CS4 Flash
No results on Flex or Skin
Save image as Image or Movie
Import single file one at a time
![Page 7: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/7.jpg)
Most Common RequestFlex SkinningFlex Builder Design LibraryIncludes buttons, tabs, bars, form
elementsIncludes states
![Page 8: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/8.jpg)
CS4 Illustrator
![Page 9: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/9.jpg)
CS4 Illustrator 26 ComponentsEntire Skin flex_skins.ait
![Page 10: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/10.jpg)
CS4 Illustrator
![Page 11: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/11.jpg)
CS4 Illustrator
![Page 12: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/12.jpg)
CS4 IllustratorMaximum 6 StatesDisabledUpOverDownSelected UpSelected Disabled
Design Tips2 Color Tone
Default:Blue and Grey
![Page 13: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/13.jpg)
CS4 Illustrator
![Page 14: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/14.jpg)
CS4 FireWorks
![Page 15: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/15.jpg)
CS4 Fire WorksCommands > Flex Skinning> New Flex Skin
Commands > Flex Skinning> Export Flex Skin
You’ll get:A folder of Flex skin images
![Page 16: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/16.jpg)
CS4 FireWorksCommands > Flex Skinning> New Flex Skin
File > Export
You’ll get:MXML file &A folder of Flex skin images
File > MXML & Images
![Page 17: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/17.jpg)
CS4 FireWorks
![Page 18: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/18.jpg)
CS4 FireWorks
![Page 19: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/19.jpg)
CS4 FireWorks
![Page 20: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/20.jpg)
CS4 FireWorks
![Page 21: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/21.jpg)
CS4 FireWorks
![Page 22: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/22.jpg)
CS4 FireWorks
![Page 23: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/23.jpg)
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>
![Page 24: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/24.jpg)
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"/>
![Page 25: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/25.jpg)
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?
![Page 26: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/26.jpg)
Firework CS4Rapid
Prototyping including Wire Frame, Prototype, Export
Wire Frame
Prototype
Images Layout
Export
Import
![Page 27: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/27.jpg)
New Flex Project
CookingForFood Recipe FinderWhere you can find and track recipes quickly
![Page 28: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/28.jpg)
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
![Page 29: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/29.jpg)
Firework CS4
Wire Frame
Demonstrate Wire Frame within Firework CS4
Export PDF for acceptance
![Page 30: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/30.jpg)
Firework CS4 Wire Frame
![Page 31: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/31.jpg)
Firework CS4 Wire Frame
![Page 32: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/32.jpg)
Firework CS4Wire Frame Export PDF for acceptance
![Page 33: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/33.jpg)
Firework CS4
Demonstrate Prototype within Firework CS4
Prototype
Export PDF for acceptance
![Page 34: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/34.jpg)
Firework CS4Prototype Export PDF for acceptance
![Page 35: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/35.jpg)
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?
![Page 36: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/36.jpg)
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
![Page 37: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/37.jpg)
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
![Page 38: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/38.jpg)
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
![Page 39: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/39.jpg)
Flex Builder Import
What’s NEXT?
![Page 40: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/40.jpg)
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
![Page 41: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/41.jpg)
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
![Page 42: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/42.jpg)
Questions & Answers
![Page 43: Designer & Developer Work Flow for Flex Builder](https://reader033.fdocuments.us/reader033/viewer/2022061104/540e74208d7f72767e8b4da9/html5/thumbnails/43.jpg)
Bess Ho
iTune App Store
Help!