Getting Complex Designs into Flex - FITC 2011

2,902 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,902
On SlideShare
0
From Embeds
0
Number of Embeds
1,857
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×