Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Getting Complex Designs into Flex - FITC 2011

2,986 views

Published on

Design basics on how to get designs into Flex web, desktop, and mobile.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Getting Complex Designs into Flex - FITC 2011

  1. 1. COMPLEX DESIGNS IN FLEX
  2. 2. COMPLEX DESIGNS IN FLEX ‣ Jesse Warden
  3. 3. COMPLEX DESIGNS IN FLEX ‣ Jesse Warden ‣ Partner at Web App Solution
  4. 4. COMPLEX DESIGNS IN FLEX ‣ Jesse Warden ‣ Partner at Web App Solution ‣ Flex & Flash Consultant
  5. 5. COMPLEX DESIGNS IN FLEX ‣ Jesse Warden ‣ Partner at Web App Solution ‣ Flex & Flash Consultant ‣ FITC 2011
  6. 6. CANADA & FITC ROX
  7. 7. CANADA & FITC ROX ‣ Celebs & Industry Contributors
  8. 8. WHO AM I?
  9. 9. WHO AM I? ‣ Jesse Warden
  10. 10. WHO AM I? ‣ Jesse Warden ‣ Flex& Flash Consultant @ Web App Solution
  11. 11. WHO AM I? ‣ Jesse Warden ‣ Flex& Flash Consultant @ Web App Solution ‣ Service Work by day...
  12. 12. WHO AM I? ‣ Jesse Warden ‣ Flex& Flash Consultant @ Web App Solution ‣ Service Work by day... ‣ ...product work (+beer) at night.
  13. 13. WHO AM I? ‣ Jesse Warden ‣ Flex& Flash Consultant @ Web App Solution ‣ Service Work by day... ‣ ...product work (+beer) at night. ‣ Consultant by day...
  14. 14. WHO AM I? ‣ Jesse Warden ‣ Flex& Flash Consultant @ Web App Solution ‣ Service Work by day... ‣ ...product work (+beer) at night. ‣ Consultant by day... ‣ ...entrepreneur (more beer) at night.
  15. 15. JESSE WARDEN
  16. 16. JESSE WARDEN ‣ passionateabout technology bettering the world
  17. 17. JESSE WARDEN ‣ passionateabout technology bettering the world ‣ think positive
  18. 18. JESSE WARDEN ‣ passionateabout technology bettering the world ‣ think positive ‣ like meeting new people
  19. 19. clients
  20. 20. clients
  21. 21. clients ‣ Enterprise | Agency
  22. 22. clients ‣ Enterprise | Agency ‣ Flex/Java/BlazeDS
  23. 23. clients ‣ Enterprise | Agency ‣ Flex/Java/BlazeDS ‣ Viaas.com = video startup
  24. 24. clients ‣ Enterprise | Agency ‣ Flex/Java/BlazeDS ‣ Viaas.com = video startup ‣ Intuit = Flex Training/Consulting
  25. 25. clients ‣ Enterprise | Agency ‣ Flex/Java/BlazeDS ‣ Viaas.com = video startup ‣ Intuit = Flex Training/Consulting ‣ Disney = huge Flash website
  26. 26. clients ‣ Enterprise | Agency ‣ Flex/Java/BlazeDS ‣ Viaas.com = video startup ‣ Intuit = Flex Training/Consulting ‣ Disney = huge Flash website ‣ HBOGO.com = Flex video product
  27. 27. WHAT?
  28. 28. WHAT? ‣ That design in that app
  29. 29. WHAT? ‣ That design in that app ‣ Technical Design Fundamentals
  30. 30. WHAT? ‣ That design in that app ‣ Technical Design Fundamentals ‣ Philosophies, Methodologies, & Tools
  31. 31. WHAT? ‣ That design in that app ‣ Technical Design Fundamentals ‣ Philosophies, Methodologies, & Tools ‣ Workflows
  32. 32. WHAT DO YOU GET?
  33. 33. WHAT DO YOU GET? ‣ Learn effective Production Art
  34. 34. WHAT DO YOU GET? ‣ Learn effective Production Art ‣ Understand when to use certain techniques
  35. 35. WHAT DO YOU GET? ‣ Learn effective Production Art ‣ Understand when to use certain techniques ‣ Make Your Software Better
  36. 36. TANGIBLES
  37. 37. TANGIBLES ‣ How to get designs into Flex & Flash
  38. 38. TANGIBLES ‣ How to get designs into Flex & Flash ‣ Design Options
  39. 39. TANGIBLES ‣ How to get designs into Flex & Flash ‣ Design Options ‣ What Tool, Where
  40. 40. TANGIBLES ‣ How to get designs into Flex & Flash ‣ Design Options ‣ What Tool, Where ‣ challenges with Illustrator & Catalyst
  41. 41. TANGIBLES ‣ How to get designs into Flex & Flash ‣ Design Options ‣ What Tool, Where ‣ challenges with Illustrator & Catalyst ‣ engage designers in Agile SCRUM
  42. 42. WHY?
  43. 43. WHY? ‣ it’s hard
  44. 44. WHY? ‣ it’s hard ‣ complex
  45. 45. WHY? ‣ it’s hard ‣ complex ‣ tricks & caveats
  46. 46. WHY? ‣ it’s hard ‣ complex ‣ tricks & caveats ‣ good design == proven ROI
  47. 47. INSPIRATION
  48. 48. INSPIRATION ‣ Continuallyhired as a Flex consultant for design skills
  49. 49. INSPIRATION ‣ Continuallyhired as a Flex consultant for design skills ‣ disagreewith the Illustrator/Catalyst direction
  50. 50. INSPIRATION ‣ Continuallyhired as a Flex consultant for design skills ‣ disagreewith the Illustrator/Catalyst direction ‣ Encounterengineers who don’t know the basics
  51. 51. NOMENCLATURE
  52. 52. NOMENCLATURE ‣ Photoshop make’s Pee-Ess-Deez (PSD)
  53. 53. NOMENCLATURE ‣ Photoshop make’s Pee-Ess-Deez (PSD) ‣ Fireworks make’s Pee-En-Geez (PNG)
  54. 54. NOMENCLATURE ‣ Photoshop make’s Pee-Ess-Deez (PSD) ‣ Fireworks make’s Pee-En-Geez (PNG) ‣ Illustrator make’s Ay-Eyez (AI)
  55. 55. NOMENCLATURE ‣ Photoshop make’s Pee-Ess-Deez (PSD) ‣ Fireworks make’s Pee-En-Geez (PNG) ‣ Illustrator make’s Ay-Eyez (AI) ‣ Flash IDE make’s Flahz (FLA)
  56. 56. NOMENCLATURE ‣ Photoshop make’s Pee-Ess-Deez (PSD) ‣ Fireworks make’s Pee-En-Geez (PNG) ‣ Illustrator make’s Ay-Eyez (AI) ‣ Flash IDE make’s Flahz (FLA) ‣ Catalyst & Flash Builder 4.5 make’s Eff-X-Peez (FXP)
  57. 57. COMMON USE CASES
  58. 58. COMMON USE CASES ‣ Photoshop PSD into Flex
  59. 59. COMMON USE CASES ‣ Photoshop PSD into Flex ‣ Fireworks PNG into Flex
  60. 60. COMMON USE CASES ‣ Photoshop PSD into Flex ‣ Fireworks PNG into Flex ‣ Illustrator AI into Flex
  61. 61. COMMON USE CASES ‣ Photoshop PSD into Flex ‣ Fireworks PNG into Flex ‣ Illustrator AI into Flex ‣ Flash FLA into Flex
  62. 62. COMMON USE CASES ‣ Photoshop PSD into Flex ‣ Fireworks PNG into Flex ‣ Illustrator AI into Flex ‣ Flash FLA into Flex ‣ Common FXP
  63. 63. WHY? LANGUAGE
  64. 64. WHY? LANGUAGE ‣ Designers Lingo
  65. 65. WHY? LANGUAGE ‣ Designers Lingo ‣ Designers have camps
  66. 66. WHY? LANGUAGE ‣ Designers Lingo ‣ Designers have camps ‣ preferred tools/methodologies
  67. 67. TARGETS
  68. 68. TARGETS ‣ Flash
  69. 69. TARGETS ‣ Flash ‣ Flex
  70. 70. TARGETS ‣ Flash ‣ Flex ‣ AS3
  71. 71. HOW?
  72. 72. HOW? ‣ Production Art Process
  73. 73. HOW? ‣ Production Art Process ‣ Design
  74. 74. HOW? ‣ Production Art Process ‣ Design ‣ Conversion
  75. 75. HOW? ‣ Production Art Process ‣ Design ‣ Conversion ‣ Implementation
  76. 76. DESIGN
  77. 77. DESIGN ‣ Planning & Execution
  78. 78. DESIGN ‣ Planning & Execution ‣ UI/UX/Design Patterns
  79. 79. DESIGN ‣ Planning & Execution ‣ UI/UX/Design Patterns ‣ Design UI Elements
  80. 80. DESIGN ‣ Planning & Execution ‣ UI/UX/Design Patterns ‣ Design UI Elements ‣ Flex & Flash Capabilities
  81. 81. PLANNING & EXECUTION
  82. 82. PLANNING & EXECUTION ‣ Design expectations
  83. 83. PLANNING & EXECUTION ‣ Design expectations ‣ Do they know Flash?
  84. 84. PLANNING & EXECUTION ‣ Design expectations ‣ Do they know Flash? ‣ Do they know Flex?
  85. 85. PLANNING & EXECUTION ‣ Design expectations ‣ Do they know Flash? ‣ Do they know Flex? ‣ Format: Bitmap or Vector?
  86. 86. TARGET PLATFORM
  87. 87. TARGET PLATFORM ‣ Web
  88. 88. TARGET PLATFORM ‣ Web ‣ Desktop
  89. 89. TARGET PLATFORM ‣ Web ‣ Desktop ‣ Mobile
  90. 90. WELL EQUIPPED
  91. 91. WELL EQUIPPED ‣ Files been “prepped”?
  92. 92. WELL EQUIPPED ‣ Files been “prepped”? ‣ Layer effects been flattened?
  93. 93. WELL EQUIPPED ‣ Files been “prepped”? ‣ Layer effects been flattened? ‣ Smart Object-i-fied?
  94. 94. WELL EQUIPPED ‣ Files been “prepped”? ‣ Layer effects been flattened? ‣ Smart Object-i-fied? ‣ Fonts?
  95. 95. DESIGN FUNDAMENTALS
  96. 96. DESIGN FUNDAMENTALS ‣ Raster vs. Vector
  97. 97. DESIGN FUNDAMENTALS ‣ Raster vs. Vector ‣ Deployment Formats
  98. 98. DESIGN FUNDAMENTALS ‣ Raster vs. Vector ‣ Deployment Formats ‣ Container Formats
  99. 99. DESIGN FUNDAMENTALS ‣ Raster vs. Vector ‣ Deployment Formats ‣ Container Formats ‣ SWF Format
  100. 100. BITMAP/RASTER
  101. 101. BITMAP/RASTER ‣ Pixels, little blocks of color
  102. 102. BITMAP/RASTER ‣ Pixels, little blocks of color ‣ Realism
  103. 103. BITMAP/RASTER ‣ Pixels, little blocks of color ‣ Realism ‣ Old (iOS blits, OSX vector)
  104. 104. BITMAP/RASTER
  105. 105. BITMAP/RASTER ‣ High RAM usage
  106. 106. BITMAP/RASTER ‣ High RAM usage ‣ High in file-size
  107. 107. BITMAP/RASTER ‣ High RAM usage ‣ High in file-size ‣ Low CPU
  108. 108. BITMAP/RASTER ‣ High RAM usage ‣ High in file-size ‣ Low CPU ‣ Don’t Scale in Size
  109. 109. BITMAP/RASTER ‣ High RAM usage ‣ High in file-size ‣ Low CPU ‣ Don’t Scale in Size ‣ Easily Hardware Accelerated
  110. 110. VECTORS
  111. 111. VECTORS ‣ Low RAM
  112. 112. VECTORS ‣ Low RAM ‣ Low file-size (usually)
  113. 113. VECTORS ‣ Low RAM ‣ Low file-size (usually) ‣ High CPU
  114. 114. VECTORS ‣ Low RAM ‣ Low file-size (usually) ‣ High CPU ‣ Scale Size
  115. 115. DEPLOYMENT FORMATS
  116. 116. DEPLOYMENT FORMATS ‣ JPEG
  117. 117. DEPLOYMENT FORMATS ‣ JPEG ‣ PNG
  118. 118. DEPLOYMENT FORMATS ‣ JPEG ‣ PNG ‣ SWF
  119. 119. JPEG
  120. 120. JPEG ‣ Lossy Compression
  121. 121. JPEG ‣ Lossy Compression ‣ Photographs
  122. 122. JPEG ‣ Lossy Compression ‣ Photographs ‣ Realism
  123. 123. JPEG ‣ Lossy Compression ‣ Photographs ‣ Realism ‣ Bad for text, graphical shapes
  124. 124. JPEG ‣ Lossy Compression ‣ Photographs ‣ Realism ‣ Bad for text, graphical shapes ‣ 24 bit
  125. 125. WHY JPEG?
  126. 126. WHY JPEG? ‣ Compression artifacts noticeable when scaled
  127. 127. PNG
  128. 128. PNG ‣ Lossless Compression
  129. 129. PNG ‣ Lossless Compression ‣ 32 bit
  130. 130. PNG ‣ Lossless Compression ‣ 32 bit ‣ 24 bit + 8 bit alpha channel
  131. 131. PNG ‣ Lossless Compression ‣ 32 bit ‣ 24 bit + 8 bit alpha channel ‣ Fireworks metadata
  132. 132. PNG ‣ Lossless Compression ‣ 32 bit ‣ 24 bit + 8 bit alpha channel ‣ Fireworks metadata ‣ Big
  133. 133. PNG ‣ Lossless Compression ‣ 32 bit ‣ 24 bit + 8 bit alpha channel ‣ Fireworks metadata ‣ Big ‣ Betterfor shapes, text, shape graphics
  134. 134. SWF
  135. 135. SWF ‣ Flash Player format
  136. 136. SWF ‣ Flash Player format ‣ supports vector, bitmap, 32 bit
  137. 137. SWF ‣ Flash Player format ‣ supports vector, bitmap, 32 bit ‣ sub-pixel rendering
  138. 138. SWF ‣ Flash Player format ‣ supports vector, bitmap, 32 bit ‣ sub-pixel rendering ‣ JPEG compression with Alpha
  139. 139. SWF ‣ Flash Player format ‣ supports vector, bitmap, 32 bit ‣ sub-pixel rendering ‣ JPEG compression with Alpha ‣ Graphical & Font Engine
  140. 140. SWF ‣ Flash Player format ‣ supports vector, bitmap, 32 bit ‣ sub-pixel rendering ‣ JPEG compression with Alpha ‣ Graphical & Font Engine ‣ Color Calibration
  141. 141. ALIASING & ANTI-ALIASING
  142. 142. ALIASING & ANTI-ALIASING ‣ Stair Stepping
  143. 143. ALIASING & ANTI-ALIASING ‣ Stair Stepping ‣ Aliasing looks worse, but is faster
  144. 144. ALIASING & ANTI-ALIASING ‣ Stair Stepping ‣ Aliasing looks worse, but is faster ‣ Anti-Aliasing looks better, but slower
  145. 145. ALIASING & ANTI-ALIASING ‣ Stair Stepping ‣ Aliasing looks worse, but is faster ‣ Anti-Aliasing looks better, but slower ‣ Anti-Aliasing hard to read with small text sizes
  146. 146. ALIASING & ANTI-ALIASING ‣ Stair Stepping ‣ Aliasing looks worse, but is faster ‣ Anti-Aliasing looks better, but slower ‣ Anti-Aliasing hard to read with small text sizes ‣ Anti-Aliasing + sub-pixel rendering built into Flash Player
  147. 147. ALIASING & ANTI-ALIASING
  148. 148. ALIASING & ANTI-ALIASING ‣ stage.quality
  149. 149. ALIASING & ANTI-ALIASING ‣ stage.quality ‣ CPU vs. GPU
  150. 150. ALIASING & ANTI-ALIASING ‣ stage.quality ‣ CPU vs. GPU ‣ bitmap/video.smoothing
  151. 151. ALIASING & ANTI-ALIASING ‣ stage.quality ‣ CPU vs. GPU ‣ bitmap/video.smoothing ‣ scaling
  152. 152. ALIASING & ANTI-ALIASING ‣ stage.quality ‣ CPU vs. GPU ‣ bitmap/video.smoothing ‣ scaling ‣ stroke quality
  153. 153. STAGE.QUALITY
  154. 154. STAGE.QUALITY ‣ LOW
  155. 155. STAGE.QUALITY ‣ LOW ‣ MED
  156. 156. STAGE.QUALITY ‣ LOW ‣ MED ‣ HIGH
  157. 157. STAGE.QUALITY ‣ LOW ‣ MED ‣ HIGH ‣ BESTESTTESTSSETEESTSTSST
  158. 158. STAGE.QUALITY ‣ LOW ‣ MED ‣ HIGH ‣ BESTESTTESTSSETEESTSTSST ‣ [bitmap quality FLA]
  159. 159. LOSSY VS. LOSSLESS
  160. 160. LOSSY VS. LOSSLESS ‣ JPEG vs. PNG
  161. 161. LOSSY VS. LOSSLESS ‣ JPEG vs. PNG ‣ Photographs use JPEG
  162. 162. LOSSY VS. LOSSLESS ‣ JPEG vs. PNG ‣ Photographs use JPEG ‣ Shapes/Gradients use PNG
  163. 163. LOSSY VS. LOSSLESS ‣ JPEG vs. PNG ‣ Photographs use JPEG ‣ Shapes/Gradients use PNG ‣ Lossy usually has no alpha channel
  164. 164. LOSSY VS. LOSSLESS ‣ JPEG vs. PNG ‣ Photographs use JPEG ‣ Shapes/Gradients use PNG ‣ Lossy usually has no alpha channel ‣ Lossless supports alpha
  165. 165. LOSSY VS. LOSSLESS ‣ JPEG vs. PNG ‣ Photographs use JPEG ‣ Shapes/Gradients use PNG ‣ Lossy usually has no alpha channel ‣ Lossless supports alpha ‣ SWF supports lossy with alpha
  166. 166. LOSSY VS. LOSSLESS
  167. 167. LOSSY VS. LOSSLESS ‣ Photoshophas best lossy compressor
  168. 168. LOSSY VS. LOSSLESS ‣ Photoshophas best lossy compressor ‣ for PNG’s, use PNGCrush
  169. 169. LOSSY VS. LOSSLESS ‣ Photoshophas best lossy compressor ‣ for PNG’s, use PNGCrush ‣ http://pmt.sourceforge.net/pngcrush/
  170. 170. LOSSY VS. LOSSLESS ‣ Photoshophas best lossy compressor ‣ for PNG’s, use PNGCrush ‣ http://pmt.sourceforge.net/pngcrush/ ‣ Fireworks supports masked JPEG’s
  171. 171. LOSSY VS. LOSSLESS ‣ Photoshophas best lossy compressor ‣ for PNG’s, use PNGCrush ‣ http://pmt.sourceforge.net/pngcrush/ ‣ Fireworks supports masked JPEG’s ‣ [show mask]
  172. 172. ALPHAS
  173. 173. ALPHAS ‣ GIF = 1 bit alpha (on or off)
  174. 174. ALPHAS ‣ GIF = 1 bit alpha (on or off) ‣ PNG = 8 bit alpha (gradient)
  175. 175. SCALE 9
  176. 176. SCALE 9 ‣9 bitmaps vs. 1 bitmap & 1 rectangle
  177. 177. SCALE 9 ‣9 bitmaps vs. 1 bitmap & 1 rectangle ‣ minimum scale, no maximum
  178. 178. SCALE 9 ‣9 bitmaps vs. 1 bitmap & 1 rectangle ‣ minimum scale, no maximum ‣ windows, borders, and buttons
  179. 179. SCALE 9 ‣9 bitmaps vs. 1 bitmap & 1 rectangle ‣ minimum scale, no maximum ‣ windows, borders, and buttons ‣ Flash IDE for vectors
  180. 180. SCALE 9 ‣9 bitmaps vs. 1 bitmap & 1 rectangle ‣ minimum scale, no maximum ‣ windows, borders, and buttons ‣ Flash IDE for vectors ‣ mxmlc for bitmaps
  181. 181. SCALE 9 ‣9 bitmaps vs. 1 bitmap & 1 rectangle ‣ minimum scale, no maximum ‣ windows, borders, and buttons ‣ Flash IDE for vectors ‣ mxmlc for bitmaps ‣ [show button FLA]
  182. 182. SCALE 9[Embed(source=”/images/image.png”)]public class MyBorder extends Bitmap[Embed(source=”/images/image/png”),scaleGridLeft=10, scaleGridTop=10,scaleGridRight=220,scaleGridBottom=320)]public class MyBorder extends Sprite
  183. 183. SCALE 9[Embed(source=”/images/image.png”)]public class MyBorder extends Bitmap[Embed(source=”/images/image/png”), ‣ No scale 9, BitmapscaleGridLeft=10, scaleGridTop=10,scaleGridRight=220,scaleGridBottom=320)]public class MyBorder extends Sprite
  184. 184. SCALE 9[Embed(source=”/images/image.png”)]public class MyBorder extends Bitmap[Embed(source=”/images/image/png”), ‣ No scale 9, BitmapscaleGridLeft=10, scaleGridTop=10, ‣ Scale 9 rect, SpritescaleGridRight=220,scaleGridBottom=320)]public class MyBorder extends Sprite
  185. 185. MASKS
  186. 186. MASKS ‣ Mask visually clips the graphic
  187. 187. MASKS ‣ Mask visually clips the graphic ‣ area is still rendered by Flash Player
  188. 188. MASKS ‣ Mask visually clips the graphic ‣ area is still rendered by Flash Player ‣ [show mask FLA]
  189. 189. SWF IMAGE BASICS
  190. 190. SWF IMAGE BASICS ‣ Base classes
  191. 191. SWF IMAGE BASICS ‣ Base classes ‣ Transformations
  192. 192. SWF IMAGE BASICS ‣ Base classes ‣ Transformations ‣ GPU
  193. 193. SWF IMAGE BASICS ‣ Base classes ‣ Transformations ‣ GPU ‣ Filters
  194. 194. flash.display.shape
  195. 195. flash.display.shape ‣ Shape
  196. 196. flash.display.shape ‣ Shape ‣ vector
  197. 197. flash.display.shape ‣ Shape ‣ vector ‣ low-overhead
  198. 198. flash.display.shape ‣ Shape ‣ vector ‣ low-overhead ‣ no interactions (key, mouse)
  199. 199. flash.display.shape ‣ Shape ‣ vector ‣ low-overhead ‣ no interactions (key, mouse) ‣ for drawing, masks, debugging
  200. 200. flash.display.bitmap
  201. 201. flash.display.bitmap ‣ Bitmap
  202. 202. flash.display.bitmap ‣ Bitmap ‣ memory eater
  203. 203. flash.display.bitmap ‣ Bitmap ‣ memory eater ‣ no interactions
  204. 204. flash.display.bitmap ‣ Bitmap ‣ memory eater ‣ no interactions ‣ security implications in messing with pixels
  205. 205. flash.display.bitmap ‣ Bitmap ‣ memory eater ‣ no interactions ‣ security implications in messing with pixels ‣ GPU friends4evarrr!
  206. 206. flash.display.sprite
  207. 207. flash.display.sprite ‣ Sprite
  208. 208. flash.display.sprite ‣ Sprite ‣ container/compositor
  209. 209. flash.display.sprite ‣ Sprite ‣ container/compositor ‣ interactions
  210. 210. flash.display.sprite ‣ Sprite ‣ container/compositor ‣ interactions ‣ Bitmap with Scale 9 rect
  211. 211. flash.display.sprite ‣ Sprite ‣ container/compositor ‣ interactions ‣ Bitmap with Scale 9 rect ‣ MovieClip with 1 frame
  212. 212. transformations
  213. 213. transformations ‣x and y relative to container
  214. 214. transformations ‣x and y relative to container ‣ width and height are content measurements
  215. 215. transformations ‣x and y relative to container ‣ width and height are content measurements ‣ scaleX and scaleY are tied to width/ height
  216. 216. transformations ‣x and y relative to container ‣ width and height are content measurements ‣ scaleX and scaleY are tied to width/ height ‣ rotation is top left registration point
  217. 217. transformations ‣x and y relative to container ‣ width and height are content measurements ‣ scaleX and scaleY are tied to width/ height ‣ rotation is top left registration point ‣ alpha is 0 - 255
  218. 218. transformations ‣x and y relative to container ‣ width and height are content measurements ‣ scaleX and scaleY are tied to width/ height ‣ rotation is top left registration point ‣ alpha is 0 - 255 ‣ visible is basically alpha 0
  219. 219. transformations ‣x and y relative to container ‣ width and height are content measurements ‣ scaleX and scaleY are tied to width/ height ‣ rotation is top left registration point ‣ alpha is 0 - 255 ‣ visible is basically alpha 0 ‣z is 3D plane
  220. 220. color transform
  221. 221. color transform ‣ changes color of object
  222. 222. gpu
  223. 223. gpu ‣ cacheAsBitmap = true
  224. 224. gpu ‣ cacheAsBitmap = true ‣ cacheAsBitmapMatrix = true
  225. 225. gpu ‣ cacheAsBitmap = true ‣ cacheAsBitmapMatrix = true ‣ inside <initialWindow> tag in your AIR descriptor XML
  226. 226. gpu ‣ cacheAsBitmap = true ‣ cacheAsBitmapMatrix = true ‣ inside <initialWindow> tag in your AIR descriptor XML ‣ <renderMode>gpu</renderMode>
  227. 227. gpu ‣ cacheAsBitmap = true ‣ cacheAsBitmapMatrix = true ‣ inside <initialWindow> tag in your AIR descriptor XML ‣ <renderMode>gpu</renderMode> ‣ [Lee’s blog]
  228. 228. filters
  229. 229. filters ‣ Drop Shadow
  230. 230. filters ‣ Drop Shadow ‣ Glow
  231. 231. filters ‣ Drop Shadow ‣ Glow ‣ Blur
  232. 232. filters ‣ Drop Shadow ‣ Glow ‣ Blur ‣ Bevel
  233. 233. filters ‣ Drop Shadow ‣ Glow ‣ Blur ‣ Bevel ‣ [show in Flash]
  234. 234. pixelbender
  235. 235. pixelbender ‣ PBJ
  236. 236. pixelbender ‣ PBJ ‣ Hydra
  237. 237. pixelbender ‣ PBJ ‣ Hydra ‣ Vector data type’s for RGB colors
  238. 238. pixelbender ‣ PBJ ‣ Hydra ‣ Vector data type’s for RGB colors ‣ Shader’s can be synchronous/ asynchronous
  239. 239. pixelbender ‣ PBJ ‣ Hydra ‣ Vector data type’s for RGB colors ‣ Shader’s can be synchronous/ asynchronous ‣ uses GPU
  240. 240. pixelbender ‣ PBJ ‣ Hydra ‣ Vector data type’s for RGB colors ‣ Shader’s can be synchronous/ asynchronous ‣ uses GPU ‣ multi-threading
  241. 241. pixelbender ‣ PBJ ‣ Hydra ‣ Vector data type’s for RGB colors ‣ Shader’s can be synchronous/ asynchronous ‣ uses GPU ‣ multi-threading ‣ [FreshPic]
  242. 242. container formats
  243. 243. container formats ‣ PSD = Photoshop
  244. 244. container formats ‣ PSD = Photoshop ‣ AI = Illustrator
  245. 245. container formats ‣ PSD = Photoshop ‣ AI = Illustrator ‣ PNG = Fireworks
  246. 246. container formats ‣ PSD = Photoshop ‣ AI = Illustrator ‣ PNG = Fireworks ‣ FLA = Flash IDE
  247. 247. container formats ‣ PSD = Photoshop ‣ AI = Illustrator ‣ PNG = Fireworks ‣ FLA = Flash IDE ‣ TTF/OTF = fonts
  248. 248. CONVERSION
  249. 249. photoshop to air
  250. 250. photoshop to air ‣ [powerz comp to air]
  251. 251. fireworks comp to android
  252. 252. fireworks comp to android ‣ round trip w/ Flash IDE
  253. 253. fireworks comp to android ‣ round trip w/ Flash IDE ‣ [Android comp]
  254. 254. flash graphics packager
  255. 255. flash graphics packager ‣ vector scale 9
  256. 256. flash graphics packager ‣ vector scale 9 ‣ linking to swf assets
  257. 257. flash graphics packager ‣ vector scale 9 ‣ linking to swf assets ‣ sub-pixels
  258. 258. flash graphics packager ‣ vector scale 9 ‣ linking to swf assets ‣ sub-pixels ‣ [show SoundCloud Android package]
  259. 259. flash graphics packager ‣ vector scale 9 ‣ linking to swf assets ‣ sub-pixels ‣ [show SoundCloud Android package] ‣ [show NBA app]
  260. 260. IMPLEMENTATION
  261. 261. IMPLEMENTATION ‣ FLA that makes a SWC
  262. 262. IMPLEMENTATION ‣ FLA that makes a SWC ‣ Library Project
  263. 263. IMPLEMENTATION ‣ FLA that makes a SWC ‣ Library Project ‣ Components
  264. 264. IMPLEMENTATION ‣ FLA that makes a SWC ‣ Library Project ‣ Components ‣ States
  265. 265. IMPLEMENTATION ‣ FLA that makes a SWC ‣ Library Project ‣ Components ‣ States ‣ Skins
  266. 266. states
  267. 267. states ‣ DisplayList drawing capabilities
  268. 268. states
  269. 269. states ‣ elastic racetrack
  270. 270. states
  271. 271. states ‣ visible
  272. 272. states ‣ visible ‣ addChild/removeChild
  273. 273. states ‣ visible ‣ addChild/removeChild ‣ mask
  274. 274. states ‣ visible ‣ addChild/removeChild ‣ mask ‣ scrollRect
  275. 275. states ‣ visible ‣ addChild/removeChild ‣ mask ‣ scrollRect ‣ alpha
  276. 276. states: components vs. page/composition
  277. 277. states: components vs. page/composition ‣ states of components
  278. 278. states: components vs. page/composition ‣ states of components ‣ states of app
  279. 279. states: components vs. page/composition ‣ states of components ‣ states of app ‣ usually visual state
  280. 280. transitions
  281. 281. transitions ‣ change properties from state to state
  282. 282. transitions ‣ change properties from state to state ‣ Flex’ built in tweens
  283. 283. transitions ‣ change properties from state to state ‣ Flex’ built in tweens ‣ careful with alphas/rotations/fonts
  284. 284. transitions ‣ change properties from state to state ‣ Flex’ built in tweens ‣ careful with alphas/rotations/fonts ‣ order insanity flaw
  285. 285. states
  286. 286. states ‣ [video recorder app]
  287. 287. SKINS: WEB & DESKTOP
  288. 288. SKINS: WEB & DESKTOP ‣ Component: logic & shiz
  289. 289. SKINS: WEB & DESKTOP ‣ Component: logic & shiz ‣ Skin: what you see
  290. 290. WHY SKINS?
  291. 291. WHY SKINS? ‣ ...here it comes...
  292. 292. WHY SKINS? ‣ ...here it comes... ‣ CSS only
  293. 293. WHY SKINS? ‣ ...here it comes... ‣ CSS only ‣ set skin parts
  294. 294. WHY SKINS? ‣ ...here it comes... ‣ CSS only ‣ set skin parts ‣ programmatic skins
  295. 295. WHY SKINS? ‣ ...here it comes... ‣ CSS only ‣ set skin parts ‣ programmatic skins ‣ Flash
  296. 296. SKIN ANATOMY
  297. 297. SKIN ANATOMY ‣ Skin Class
  298. 298. SKIN ANATOMY ‣ Skin Class ‣ SkinPart
  299. 299. SKIN ANATOMY ‣ Skin Class ‣ SkinPart ‣ SkinState
  300. 300. SKIN ANATOMY ‣ Skin Class ‣ SkinPart ‣ SkinState ‣ [show Neybor/Skins]
  301. 301. MOBILE SKINS
  302. 302. MOBILE SKINS ‣ ActionScript only
  303. 303. MOBILE SKINS ‣ ActionScript only ‣ extend MobileSkin vs. SparkSkin
  304. 304. MOBILE SKINS ‣ ActionScript only ‣ extend MobileSkin vs. SparkSkin ‣ no SkinsStates
  305. 305. MOBILE FUNDAMENTALS <s:ViewNavigatorApplication applicationDPI="320">
  306. 306. MOBILE FUNDAMENTALS <s:ViewNavigatorApplication ‣ DPI vs. PPI applicationDPI="320">
  307. 307. MOBILE FUNDAMENTALS <s:ViewNavigatorApplication ‣ DPI vs. PPI applicationDPI="320"> ‣ applicationDPI
  308. 308. MOBILE FUNDAMENTALS <s:ViewNavigatorApplication ‣ DPI vs. PPI applicationDPI="320"> ‣ applicationDPI ‣ resolution
  309. 309. MOBILE FUNDAMENTALS <s:ViewNavigatorApplication ‣ DPI vs. PPI applicationDPI="320"> ‣ applicationDPI ‣ resolution ‣ Capabilities.screenDPI
  310. 310. MOBILE FUNDAMENTALS
  311. 311. MOBILE FUNDAMENTALS ‣ MultiDPIBitmapSource
  312. 312. MOBILE FUNDAMENTALS ‣ MultiDPIBitmapSource ‣ 160: < 200
  313. 313. MOBILE FUNDAMENTALS ‣ MultiDPIBitmapSource ‣ 160: < 200 ‣ 240: >=200 and <280
  314. 314. MOBILE FUNDAMENTALS ‣ MultiDPIBitmapSource ‣ 160: < 200 ‣ 240: >=200 and <280 ‣ 320: >=280
  315. 315. STAGE.QUALITY POWAH
  316. 316. STAGE.QUALITY POWAH ‣ stage.quality = LOW
  317. 317. STAGE.QUALITY POWAH ‣ stage.quality = LOW ‣ pimp!
  318. 318. STAGE.QUALITY POWAH ‣ stage.quality = LOW ‣ pimp! ‣ stage.quality = MED
  319. 319. STAGE.QUALITY POWAH ‣ stage.quality = LOW ‣ pimp! ‣ stage.quality = MED ‣ great compromise
  320. 320. STAGE.QUALITY POWAH ‣ stage.quality = LOW ‣ pimp! ‣ stage.quality = MED ‣ great compromise ‣ stage.quality = HIGH
  321. 321. STAGE.QUALITY POWAH ‣ stage.quality = LOW ‣ pimp! ‣ stage.quality = MED ‣ great compromise ‣ stage.quality = HIGH ‣ default
  322. 322. STAGE.QUALITY POWAH ‣ stage.quality = LOW ‣ pimp! ‣ stage.quality = MED ‣ great compromise ‣ stage.quality = HIGH ‣ default ‣ stage.quality = BEST.. NOOoOOo
  323. 323. STAGE.QUALITY EXAMPLE
  324. 324. STAGE.QUALITY EXAMPLE ‣ LOW vs. MED
  325. 325. SKIN SCALING/* Every os-platform @ 160dpi */@media (application-dpi: 160) { s|Button { fontSize: 10; }}/* IOS only @ 240dpi */@media (application-dpi: 240) and (os-platform: "IOS") { s|Button { fontSize: 11; }}
  326. 326. SKIN SCALING/* Every os-platform @ 160dpi */@media (application-dpi: 160) { s|Button { fontSize: 10; }} ‣ set applicationDPI, Flex’ll scale/* IOS only @ 240dpi */@media (application-dpi: 240) and (os-platform: "IOS") { s|Button { fontSize: 11; }}
  327. 327. SKIN SCALING/* Every os-platform @ 160dpi */@media (application-dpi: 160) { s|Button { fontSize: 10; }} ‣ set applicationDPI, Flex’ll scale/* IOS only @ 240dpi */ ‣ don’t set, you scale@media (application-dpi: 240) and (os-platform: "IOS") { s|Button { fontSize: 11; }}
  328. 328. SKIN SCALING/* Every os-platform @ 160dpi */@media (application-dpi: 160) { s|Button { fontSize: 10; }} ‣ set applicationDPI, Flex’ll scale/* IOS only @ 240dpi */ ‣ don’t set, you scale@media (application-dpi: 240) and (os-platform: "IOS") { s|Button { ‣ fine tune with @media rules fontSize: 11; }}
  329. 329. MULTI-REZ BITMAPS<s:Image id="myImage"> <s:source> <s:MultiDPIBitmapSource source160dpi="assets/low-res/bulldog.jpg" source240dpi="assets/med-res/bulldog.jpg" source320dpi="assets/high-res/bulldog.jpg"/> </s:source> </s:Image>
  330. 330. MULTI-REZ BITMAPS<s:Image id="myImage"> <s:source> <s:MultiDPIBitmapSource source160dpi="assets/low-res/bulldog.jpg" ‣1 bitmap for each DPI source240dpi="assets/med-res/bulldog.jpg" source320dpi="assets/high-res/bulldog.jpg"/> </s:source> </s:Image>
  331. 331. MULTI-REZ BITMAPS<s:Image id="myImage"> <s:source> <s:MultiDPIBitmapSource source160dpi="assets/low-res/bulldog.jpg" ‣1 bitmap for each DPI source240dpi="assets/med-res/bulldog.jpg" source320dpi="assets/high-res/bulldog.jpg"/> ‣ applicationDPI </s:source> </s:Image>
  332. 332. MULTI-REZ BITMAPS<s:Image id="myImage"> <s:source> <s:MultiDPIBitmapSource source160dpi="assets/low-res/bulldog.jpg" ‣1 bitmap for each DPI source240dpi="assets/med-res/bulldog.jpg" source320dpi="assets/high-res/bulldog.jpg"/> ‣ applicationDPI </s:source> </s:Image> ‣ DPIClassification.DPI_240, etc.
  333. 333. BITMAP MANUAL SCALING
  334. 334. BITMAP MANUAL SCALING ‣ [CombOver]
  335. 335. conclusions
  336. 336. conclusions ‣ Ask Questions w/Designers
  337. 337. conclusions ‣ Ask Questions w/Designers ‣ Break up in Photoshop/Fireworks
  338. 338. conclusions ‣ Ask Questions w/Designers ‣ Break up in Photoshop/Fireworks ‣ Package all assets in Flash
  339. 339. conclusions ‣ Ask Questions w/Designers ‣ Break up in Photoshop/Fireworks ‣ Package all assets in Flash ‣ Create Flex Skins in Library Project
  340. 340. conclusions
  341. 341. conclusions ‣ Bitmap | Vector
  342. 342. conclusions ‣ Bitmap | Vector ‣ Web vs Desktop vs Mobile
  343. 343. conclusions ‣ Bitmap | Vector ‣ Web vs Desktop vs Mobile ‣ Designer Capabilities
  344. 344. conclusions ‣ Bitmap | Vector ‣ Web vs Desktop vs Mobile ‣ Designer Capabilities ‣ Developer Capabilities
  345. 345. conclusions
  346. 346. conclusions ‣ Recognize what tools you’ll need
  347. 347. conclusions ‣ Recognize what tools you’ll need ‣ Photoshop
  348. 348. conclusions ‣ Recognize what tools you’ll need ‣ Photoshop ‣ Flash
  349. 349. conclusions ‣ Recognize what tools you’ll need ‣ Photoshop ‣ Flash ‣ Flash Builder
  350. 350. end. questions?
  351. 351. end. questions? ‣ Jesse Warden
  352. 352. end. questions? ‣ Jesse Warden ‣ Flex & Flash Consultant
  353. 353. end. questions? ‣ Jesse Warden ‣ Flex & Flash Consultant ‣ Email: jessew@webappsolution.com
  354. 354. end. questions? ‣ Jesse Warden ‣ Flex & Flash Consultant ‣ Email: jessew@webappsolution.com ‣ Twittah: @jesterxl
  355. 355. end. questions? ‣ Jesse Warden ‣ Flex & Flash Consultant ‣ Email: jessew@webappsolution.com ‣ Twittah: @jesterxl ‣ Blog: http://jessewarden.com

×