Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Getting Complex Designs into Flex - FITC 2011

3 005 vues

Publié le

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

Publié dans : Technologie
  • Identifiez-vous pour voir les commentaires

  • Soyez le premier à aimer ceci

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

×