This document discusses Jesse Warden, a Flex and Flash consultant. It provides biographical information on Jesse, including that he is a partner at Web App Solution and consults on Flex, Flash, and technical design. The document then covers topics related to Jesse's work, including clients, complex designs in Flex, production art processes, and design fundamentals issues like raster vs vector formats.

1. COMPLEX DESIGNS IN FLEX

2. COMPLEX DESIGNS IN FLEX
‣ Jesse Warden

3. COMPLEX DESIGNS IN FLEX
‣ Jesse Warden
‣ Partner at Web App Solution

4. COMPLEX DESIGNS IN FLEX
‣ Jesse Warden
‣ Partner at Web App Solution
‣ Flex & Flash Consultant

5. COMPLEX DESIGNS IN FLEX
‣ Jesse Warden
‣ Partner at Web App Solution
‣ Flex & Flash Consultant
‣ FITC 2011

6. CANADA & FITC ROX

7. CANADA & FITC ROX
‣ Celebs & Industry Contributors

8. WHO AM I?

9. WHO AM I?
‣ Jesse Warden

10. WHO AM I?
‣ Jesse Warden
‣ Flex& Flash Consultant @ Web App
Solution

11. WHO AM I?
‣ Jesse Warden
‣ Flex& Flash Consultant @ Web App
Solution
‣ Service Work by day...

12. WHO AM I?
‣ Jesse Warden
‣ Flex& Flash Consultant @ Web App
Solution
‣ Service Work by day...
‣ ...product work (+beer) at night.

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. 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. JESSE WARDEN

16. JESSE WARDEN
‣ passionateabout technology
bettering the world

17. JESSE WARDEN
‣ passionateabout technology
bettering the world
‣ think positive

18. JESSE WARDEN
‣ passionateabout technology
bettering the world
‣ think positive
‣ like meeting new people

19. clients

20. clients

21. clients
‣ Enterprise | Agency

22. clients
‣ Enterprise | Agency
‣ Flex/Java/BlazeDS

23. clients
‣ Enterprise | Agency
‣ Flex/Java/BlazeDS
‣ Viaas.com = video startup

24. clients
‣ Enterprise | Agency
‣ Flex/Java/BlazeDS
‣ Viaas.com = video startup
‣ Intuit = Flex Training/Consulting

25. clients
‣ Enterprise | Agency
‣ Flex/Java/BlazeDS
‣ Viaas.com = video startup
‣ Intuit = Flex Training/Consulting
‣ Disney = huge Flash website

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. WHAT?

28. WHAT?
‣ That design in that app

29. WHAT?
‣ That design in that app
‣ Technical Design Fundamentals

30. WHAT?
‣ That design in that app
‣ Technical Design Fundamentals
‣ Philosophies, Methodologies, & Tools

31. WHAT?
‣ That design in that app
‣ Technical Design Fundamentals
‣ Philosophies, Methodologies, & Tools
‣ Workflows

32. WHAT DO YOU GET?

33. WHAT DO YOU GET?
‣ Learn effective Production Art

34. WHAT DO YOU GET?
‣ Learn effective Production Art
‣ Understand when to use certain
techniques

35. WHAT DO YOU GET?
‣ Learn effective Production Art
‣ Understand when to use certain
techniques
‣ Make Your Software Better

36. TANGIBLES

37. TANGIBLES
‣ How to get designs into Flex & Flash

38. TANGIBLES
‣ How to get designs into Flex & Flash
‣ Design Options

39. TANGIBLES
‣ How to get designs into Flex & Flash
‣ Design Options
‣ What Tool, Where

40. TANGIBLES
‣ How to get designs into Flex & Flash
‣ Design Options
‣ What Tool, Where
‣ challenges with Illustrator & Catalyst

41. TANGIBLES
‣ How to get designs into Flex & Flash
‣ Design Options
‣ What Tool, Where
‣ challenges with Illustrator & Catalyst
‣ engage designers in Agile SCRUM

42. WHY?

43. WHY?
‣ it’s hard

44. WHY?
‣ it’s hard
‣ complex

45. WHY?
‣ it’s hard
‣ complex
‣ tricks & caveats

46. WHY?
‣ it’s hard
‣ complex
‣ tricks & caveats
‣ good design == proven ROI

47. INSPIRATION

48. INSPIRATION
‣ Continuallyhired as a Flex consultant
for design skills

49. INSPIRATION
‣ Continuallyhired as a Flex consultant
for design skills
‣ disagreewith the Illustrator/Catalyst
direction

50. INSPIRATION
‣ Continuallyhired as a Flex consultant
for design skills
‣ disagreewith the Illustrator/Catalyst
direction
‣ Encounterengineers who don’t
know the basics

51. NOMENCLATURE

52. NOMENCLATURE
‣ Photoshop make’s Pee-Ess-Deez
(PSD)

53. NOMENCLATURE
‣ Photoshop make’s Pee-Ess-Deez
(PSD)
‣ Fireworks make’s Pee-En-Geez
(PNG)

54. NOMENCLATURE
‣ Photoshop make’s Pee-Ess-Deez
(PSD)
‣ Fireworks make’s Pee-En-Geez
(PNG)
‣ Illustrator make’s Ay-Eyez (AI)

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. 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. COMMON USE CASES

58. COMMON USE CASES
‣ Photoshop PSD into Flex

59. COMMON USE CASES
‣ Photoshop PSD into Flex
‣ Fireworks PNG into Flex

60. COMMON USE CASES
‣ Photoshop PSD into Flex
‣ Fireworks PNG into Flex
‣ Illustrator AI into Flex

61. COMMON USE CASES
‣ Photoshop PSD into Flex
‣ Fireworks PNG into Flex
‣ Illustrator AI into Flex
‣ Flash FLA into Flex

62. COMMON USE CASES
‣ Photoshop PSD into Flex
‣ Fireworks PNG into Flex
‣ Illustrator AI into Flex
‣ Flash FLA into Flex
‣ Common FXP

63. WHY? LANGUAGE

64. WHY? LANGUAGE
‣ Designers Lingo

65. WHY? LANGUAGE
‣ Designers Lingo
‣ Designers have camps

66. WHY? LANGUAGE
‣ Designers Lingo
‣ Designers have camps
‣ preferred tools/methodologies

67. TARGETS

68. TARGETS
‣ Flash

69. TARGETS
‣ Flash
‣ Flex

70. TARGETS
‣ Flash
‣ Flex
‣ AS3

71. HOW?

72. HOW?
‣ Production Art Process

73. HOW?
‣ Production Art Process
‣ Design

74. HOW?
‣ Production Art Process
‣ Design
‣ Conversion

75. HOW?
‣ Production Art Process
‣ Design
‣ Conversion
‣ Implementation

76. DESIGN

77. DESIGN
‣ Planning & Execution

78. DESIGN
‣ Planning & Execution
‣ UI/UX/Design Patterns

79. DESIGN
‣ Planning & Execution
‣ UI/UX/Design Patterns
‣ Design UI Elements

80. DESIGN
‣ Planning & Execution
‣ UI/UX/Design Patterns
‣ Design UI Elements
‣ Flex & Flash Capabilities

81. PLANNING & EXECUTION

82. PLANNING & EXECUTION
‣ Design expectations

83. PLANNING & EXECUTION
‣ Design expectations
‣ Do they know Flash?

84. PLANNING & EXECUTION
‣ Design expectations
‣ Do they know Flash?
‣ Do they know Flex?

85. PLANNING & EXECUTION
‣ Design expectations
‣ Do they know Flash?
‣ Do they know Flex?
‣ Format: Bitmap or Vector?

86. TARGET PLATFORM

87. TARGET PLATFORM
‣ Web

88. TARGET PLATFORM
‣ Web
‣ Desktop

89. TARGET PLATFORM
‣ Web
‣ Desktop
‣ Mobile

90. WELL EQUIPPED

91. WELL EQUIPPED
‣ Files been “prepped”?

92. WELL EQUIPPED
‣ Files been “prepped”?
‣ Layer effects been flattened?

93. WELL EQUIPPED
‣ Files been “prepped”?
‣ Layer effects been flattened?
‣ Smart Object-i-fied?

94. WELL EQUIPPED
‣ Files been “prepped”?
‣ Layer effects been flattened?
‣ Smart Object-i-fied?
‣ Fonts?

95. DESIGN FUNDAMENTALS

96. DESIGN FUNDAMENTALS
‣ Raster vs. Vector

97. DESIGN FUNDAMENTALS
‣ Raster vs. Vector
‣ Deployment Formats

98. DESIGN FUNDAMENTALS
‣ Raster vs. Vector
‣ Deployment Formats
‣ Container Formats

99. DESIGN FUNDAMENTALS
‣ Raster vs. Vector
‣ Deployment Formats
‣ Container Formats
‣ SWF Format

100. BITMAP/RASTER

101. BITMAP/RASTER
‣ Pixels, little blocks of color

102. BITMAP/RASTER
‣ Pixels, little blocks of color
‣ Realism

103. BITMAP/RASTER
‣ Pixels, little blocks of color
‣ Realism
‣ Old (iOS blits, OSX vector)

104. BITMAP/RASTER

105. BITMAP/RASTER
‣ High RAM usage

106. BITMAP/RASTER
‣ High RAM usage
‣ High in file-size

107. BITMAP/RASTER
‣ High RAM usage
‣ High in file-size
‣ Low CPU

108. BITMAP/RASTER
‣ High RAM usage
‣ High in file-size
‣ Low CPU
‣ Don’t Scale in Size

109. BITMAP/RASTER
‣ High RAM usage
‣ High in file-size
‣ Low CPU
‣ Don’t Scale in Size
‣ Easily Hardware Accelerated

110. VECTORS

111. VECTORS
‣ Low RAM

112. VECTORS
‣ Low RAM
‣ Low file-size (usually)

113. VECTORS
‣ Low RAM
‣ Low file-size (usually)
‣ High CPU

114. VECTORS
‣ Low RAM
‣ Low file-size (usually)
‣ High CPU
‣ Scale Size

115. DEPLOYMENT FORMATS

116. DEPLOYMENT FORMATS
‣ JPEG

117. DEPLOYMENT FORMATS
‣ JPEG
‣ PNG

118. DEPLOYMENT FORMATS
‣ JPEG
‣ PNG
‣ SWF

119. JPEG

120. JPEG
‣ Lossy Compression

121. JPEG
‣ Lossy Compression
‣ Photographs

122. JPEG
‣ Lossy Compression
‣ Photographs
‣ Realism

123. JPEG
‣ Lossy Compression
‣ Photographs
‣ Realism
‣ Bad for text, graphical shapes

124. JPEG
‣ Lossy Compression
‣ Photographs
‣ Realism
‣ Bad for text, graphical shapes
‣ 24 bit

125. WHY JPEG?

126. WHY JPEG?
‣ Compression artifacts noticeable
when scaled

127. PNG

128. PNG
‣ Lossless Compression

129. PNG
‣ Lossless Compression
‣ 32 bit

130. PNG
‣ Lossless Compression
‣ 32 bit
‣ 24 bit + 8 bit alpha channel

131. PNG
‣ Lossless Compression
‣ 32 bit
‣ 24 bit + 8 bit alpha channel
‣ Fireworks metadata

132. PNG
‣ Lossless Compression
‣ 32 bit
‣ 24 bit + 8 bit alpha channel
‣ Fireworks metadata
‣ Big

133. PNG
‣ Lossless Compression
‣ 32 bit
‣ 24 bit + 8 bit alpha channel
‣ Fireworks metadata
‣ Big
‣ Betterfor shapes, text, shape
graphics

134. SWF

135. SWF
‣ Flash Player format

136. SWF
‣ Flash Player format
‣ supports vector, bitmap, 32 bit

137. SWF
‣ Flash Player format
‣ supports vector, bitmap, 32 bit
‣ sub-pixel rendering

138. SWF
‣ Flash Player format
‣ supports vector, bitmap, 32 bit
‣ sub-pixel rendering
‣ JPEG compression with Alpha

139. SWF
‣ Flash Player format
‣ supports vector, bitmap, 32 bit
‣ sub-pixel rendering
‣ JPEG compression with Alpha
‣ Graphical & Font Engine

140. SWF
‣ Flash Player format
‣ supports vector, bitmap, 32 bit
‣ sub-pixel rendering
‣ JPEG compression with Alpha
‣ Graphical & Font Engine
‣ Color Calibration

141. ALIASING & ANTI-ALIASING

142. ALIASING & ANTI-ALIASING
‣ Stair Stepping

143. ALIASING & ANTI-ALIASING
‣ Stair Stepping
‣ Aliasing looks worse, but is faster

144. ALIASING & ANTI-ALIASING
‣ Stair Stepping
‣ Aliasing looks worse, but is faster
‣ Anti-Aliasing looks better, but slower

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. 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. ALIASING & ANTI-ALIASING

148. ALIASING & ANTI-ALIASING
‣ stage.quality

149. ALIASING & ANTI-ALIASING
‣ stage.quality
‣ CPU vs. GPU

150. ALIASING & ANTI-ALIASING
‣ stage.quality
‣ CPU vs. GPU
‣ bitmap/video.smoothing

151. ALIASING & ANTI-ALIASING
‣ stage.quality
‣ CPU vs. GPU
‣ bitmap/video.smoothing
‣ scaling

152. ALIASING & ANTI-ALIASING
‣ stage.quality
‣ CPU vs. GPU
‣ bitmap/video.smoothing
‣ scaling
‣ stroke quality

153. STAGE.QUALITY

154. STAGE.QUALITY
‣ LOW

155. STAGE.QUALITY
‣ LOW
‣ MED

156. STAGE.QUALITY
‣ LOW
‣ MED
‣ HIGH

157. STAGE.QUALITY
‣ LOW
‣ MED
‣ HIGH
‣ BESTESTTESTSSETEESTSTSST

158. STAGE.QUALITY
‣ LOW
‣ MED
‣ HIGH
‣ BESTESTTESTSSETEESTSTSST
‣ [bitmap quality FLA]

159. LOSSY VS. LOSSLESS

160. LOSSY VS. LOSSLESS
‣ JPEG vs. PNG

161. LOSSY VS. LOSSLESS
‣ JPEG vs. PNG
‣ Photographs use JPEG

162. LOSSY VS. LOSSLESS
‣ JPEG vs. PNG
‣ Photographs use JPEG
‣ Shapes/Gradients use PNG

163. LOSSY VS. LOSSLESS
‣ JPEG vs. PNG
‣ Photographs use JPEG
‣ Shapes/Gradients use PNG
‣ Lossy usually has no alpha channel

164. LOSSY VS. LOSSLESS
‣ JPEG vs. PNG
‣ Photographs use JPEG
‣ Shapes/Gradients use PNG
‣ Lossy usually has no alpha channel
‣ Lossless supports alpha

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. LOSSY VS. LOSSLESS

167. LOSSY VS. LOSSLESS
‣ Photoshophas best lossy
compressor

168. LOSSY VS. LOSSLESS
‣ Photoshophas best lossy
compressor
‣ for PNG’s, use PNGCrush

169. LOSSY VS. LOSSLESS
‣ Photoshophas best lossy
compressor
‣ for PNG’s, use PNGCrush
‣ http://pmt.sourceforge.net/pngcrush/

170. LOSSY VS. LOSSLESS
‣ Photoshophas best lossy
compressor
‣ for PNG’s, use PNGCrush
‣ http://pmt.sourceforge.net/pngcrush/
‣ Fireworks supports masked JPEG’s

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. ALPHAS

173. ALPHAS
‣ GIF = 1 bit alpha (on or off)

174. ALPHAS
‣ GIF = 1 bit alpha (on or off)
‣ PNG = 8 bit alpha (gradient)

175. SCALE 9

176. SCALE 9
‣9 bitmaps vs. 1 bitmap & 1 rectangle

177. SCALE 9
‣9 bitmaps vs. 1 bitmap & 1 rectangle
‣ minimum scale, no maximum

178. SCALE 9
‣9 bitmaps vs. 1 bitmap & 1 rectangle
‣ minimum scale, no maximum
‣ windows, borders, and buttons

179. SCALE 9
‣9 bitmaps vs. 1 bitmap & 1 rectangle
‣ minimum scale, no maximum
‣ windows, borders, and buttons
‣ Flash IDE for vectors

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. 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. 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. SCALE 9
[Embed(source=”/images/image.png”)]
public class MyBorder extends Bitmap
[Embed(source=”/images/image/png”), ‣ No scale 9, Bitmap
scaleGridLeft=10, scaleGridTop=10,
scaleGridRight=220,
scaleGridBottom=320)]
public class MyBorder extends Sprite

184. SCALE 9
[Embed(source=”/images/image.png”)]
public class MyBorder extends Bitmap
[Embed(source=”/images/image/png”), ‣ No scale 9, Bitmap
scaleGridLeft=10, scaleGridTop=10, ‣ Scale 9 rect, Sprite
scaleGridRight=220,
scaleGridBottom=320)]
public class MyBorder extends Sprite

185. MASKS

186. MASKS
‣ Mask visually clips the graphic

187. MASKS
‣ Mask visually clips the graphic
‣ area is still rendered by Flash Player

188. MASKS
‣ Mask visually clips the graphic
‣ area is still rendered by Flash Player
‣ [show mask FLA]

189. SWF IMAGE BASICS

190. SWF IMAGE BASICS
‣ Base classes

191. SWF IMAGE BASICS
‣ Base classes
‣ Transformations

192. SWF IMAGE BASICS
‣ Base classes
‣ Transformations
‣ GPU

193. SWF IMAGE BASICS
‣ Base classes
‣ Transformations
‣ GPU
‣ Filters

194. flash.display.shape

195. flash.display.shape
‣ Shape

196. flash.display.shape
‣ Shape
‣ vector

197. flash.display.shape
‣ Shape
‣ vector
‣ low-overhead

198. flash.display.shape
‣ Shape
‣ vector
‣ low-overhead
‣ no interactions (key, mouse)

199. flash.display.shape
‣ Shape
‣ vector
‣ low-overhead
‣ no interactions (key, mouse)
‣ for drawing, masks, debugging

200. flash.display.bitmap

201. flash.display.bitmap
‣ Bitmap

202. flash.display.bitmap
‣ Bitmap
‣ memory eater

203. flash.display.bitmap
‣ Bitmap
‣ memory eater
‣ no interactions

204. flash.display.bitmap
‣ Bitmap
‣ memory eater
‣ no interactions
‣ security implications in messing with
pixels

205. flash.display.bitmap
‣ Bitmap
‣ memory eater
‣ no interactions
‣ security implications in messing with
pixels
‣ GPU friends4evarrr!

206. flash.display.sprite

207. flash.display.sprite
‣ Sprite

208. flash.display.sprite
‣ Sprite
‣ container/compositor

209. flash.display.sprite
‣ Sprite
‣ container/compositor
‣ interactions

210. flash.display.sprite
‣ Sprite
‣ container/compositor
‣ interactions
‣ Bitmap with Scale 9 rect

211. flash.display.sprite
‣ Sprite
‣ container/compositor
‣ interactions
‣ Bitmap with Scale 9 rect
‣ MovieClip with 1 frame

212. transformations

213. transformations
‣x and y relative to container

214. transformations
‣x and y relative to container
‣ width
and height are content
measurements

215. transformations
‣x and y relative to container
‣ width
and height are content
measurements
‣ scaleX and scaleY are tied to width/
height

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. 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. 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. 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. color transform

221. color transform
‣ changes color of object

222. gpu

223. gpu
‣ cacheAsBitmap = true

224. gpu
‣ cacheAsBitmap = true
‣ cacheAsBitmapMatrix = true

225. gpu
‣ cacheAsBitmap = true
‣ cacheAsBitmapMatrix = true
‣ inside
<initialWindow> tag in your
AIR descriptor XML

226. gpu
‣ cacheAsBitmap = true
‣ cacheAsBitmapMatrix = true
‣ inside
<initialWindow> tag in your
AIR descriptor XML
‣ <renderMode>gpu</renderMode>

227. gpu
‣ cacheAsBitmap = true
‣ cacheAsBitmapMatrix = true
‣ inside
<initialWindow> tag in your
AIR descriptor XML
‣ <renderMode>gpu</renderMode>
‣ [Lee’s blog]

228. filters

229. filters
‣ Drop Shadow

230. filters
‣ Drop Shadow
‣ Glow

231. filters
‣ Drop Shadow
‣ Glow
‣ Blur

232. filters
‣ Drop Shadow
‣ Glow
‣ Blur
‣ Bevel

233. filters
‣ Drop Shadow
‣ Glow
‣ Blur
‣ Bevel
‣ [show in Flash]

234. pixelbender

235. pixelbender
‣ PBJ

236. pixelbender
‣ PBJ
‣ Hydra

237. pixelbender
‣ PBJ
‣ Hydra
‣ Vector data type’s for RGB colors

238. pixelbender
‣ PBJ
‣ Hydra
‣ Vector data type’s for RGB colors
‣ Shader’s
can be synchronous/
asynchronous

239. pixelbender
‣ PBJ
‣ Hydra
‣ Vector data type’s for RGB colors
‣ Shader’s
can be synchronous/
asynchronous
‣ uses GPU

240. pixelbender
‣ PBJ
‣ Hydra
‣ Vector data type’s for RGB colors
‣ Shader’s
can be synchronous/
asynchronous
‣ uses GPU
‣ multi-threading

241. pixelbender
‣ PBJ
‣ Hydra
‣ Vector data type’s for RGB colors
‣ Shader’s
can be synchronous/
asynchronous
‣ uses GPU
‣ multi-threading
‣ [FreshPic]

242. container formats

243. container formats
‣ PSD = Photoshop

244. container formats
‣ PSD = Photoshop
‣ AI = Illustrator

245. container formats
‣ PSD = Photoshop
‣ AI = Illustrator
‣ PNG = Fireworks

246. container formats
‣ PSD = Photoshop
‣ AI = Illustrator
‣ PNG = Fireworks
‣ FLA = Flash IDE

247. container formats
‣ PSD = Photoshop
‣ AI = Illustrator
‣ PNG = Fireworks
‣ FLA = Flash IDE
‣ TTF/OTF = fonts

248. CONVERSION

249. photoshop to air

250. photoshop to air
‣ [powerz comp to air]

251. fireworks comp to android

252. fireworks comp to android
‣ round trip w/ Flash IDE

253. fireworks comp to android
‣ round trip w/ Flash IDE
‣ [Android comp]

254. flash graphics packager

255. flash graphics packager
‣ vector scale 9

256. flash graphics packager
‣ vector scale 9
‣ linking to swf assets

257. flash graphics packager
‣ vector scale 9
‣ linking to swf assets
‣ sub-pixels

258. flash graphics packager
‣ vector scale 9
‣ linking to swf assets
‣ sub-pixels
‣ [show SoundCloud Android package]

259. flash graphics packager
‣ vector scale 9
‣ linking to swf assets
‣ sub-pixels
‣ [show SoundCloud Android package]
‣ [show NBA app]

260. IMPLEMENTATION

261. IMPLEMENTATION
‣ FLA that makes a SWC

262. IMPLEMENTATION
‣ FLA that makes a SWC
‣ Library Project

263. IMPLEMENTATION
‣ FLA that makes a SWC
‣ Library Project
‣ Components

264. IMPLEMENTATION
‣ FLA that makes a SWC
‣ Library Project
‣ Components
‣ States

265. IMPLEMENTATION
‣ FLA that makes a SWC
‣ Library Project
‣ Components
‣ States
‣ Skins

266. states

267. states
‣ DisplayList drawing capabilities

268. states

269. states
‣ elastic racetrack

270. states

271. states
‣ visible

272. states
‣ visible
‣ addChild/removeChild

273. states
‣ visible
‣ addChild/removeChild
‣ mask

274. states
‣ visible
‣ addChild/removeChild
‣ mask
‣ scrollRect

275. states
‣ visible
‣ addChild/removeChild
‣ mask
‣ scrollRect
‣ alpha

276. states: components vs. page/composition

277. states: components vs. page/composition
‣ states of components

278. states: components vs. page/composition
‣ states of components
‣ states of app

279. states: components vs. page/composition
‣ states of components
‣ states of app
‣ usually visual state

280. transitions

281. transitions
‣ change properties from state to state

282. transitions
‣ change properties from state to state
‣ Flex’ built in tweens

283. transitions
‣ change properties from state to state
‣ Flex’ built in tweens
‣ careful with alphas/rotations/fonts

284. transitions
‣ change properties from state to state
‣ Flex’ built in tweens
‣ careful with alphas/rotations/fonts
‣ order insanity flaw

285. states

286. states
‣ [video recorder app]

287. SKINS: WEB & DESKTOP

288. SKINS: WEB & DESKTOP
‣ Component: logic & shiz

289. SKINS: WEB & DESKTOP
‣ Component: logic & shiz
‣ Skin: what you see

290. WHY SKINS?

291. WHY SKINS?
‣ ...here it comes...

292. WHY SKINS?
‣ ...here it comes...
‣ CSS only

293. WHY SKINS?
‣ ...here it comes...
‣ CSS only
‣ set skin parts

294. WHY SKINS?
‣ ...here it comes...
‣ CSS only
‣ set skin parts
‣ programmatic skins

295. WHY SKINS?
‣ ...here it comes...
‣ CSS only
‣ set skin parts
‣ programmatic skins
‣ Flash

296. SKIN ANATOMY

297. SKIN ANATOMY
‣ Skin Class

298. SKIN ANATOMY
‣ Skin Class
‣ SkinPart

299. SKIN ANATOMY
‣ Skin Class
‣ SkinPart
‣ SkinState

300. SKIN ANATOMY
‣ Skin Class
‣ SkinPart
‣ SkinState
‣ [show Neybor/Skins]

301. MOBILE SKINS

302. MOBILE SKINS
‣ ActionScript only

303. MOBILE SKINS
‣ ActionScript only
‣ extend MobileSkin vs. SparkSkin

304. MOBILE SKINS
‣ ActionScript only
‣ extend MobileSkin vs. SparkSkin
‣ no SkinsStates

305. MOBILE FUNDAMENTALS
<s:ViewNavigatorApplication
applicationDPI="320">

306. MOBILE FUNDAMENTALS
<s:ViewNavigatorApplication ‣ DPI vs. PPI
applicationDPI="320">

307. MOBILE FUNDAMENTALS
<s:ViewNavigatorApplication ‣ DPI vs. PPI
applicationDPI="320"> ‣ applicationDPI

308. MOBILE FUNDAMENTALS
<s:ViewNavigatorApplication ‣ DPI vs. PPI
applicationDPI="320"> ‣ applicationDPI
‣ resolution

309. MOBILE FUNDAMENTALS
<s:ViewNavigatorApplication ‣ DPI vs. PPI
applicationDPI="320"> ‣ applicationDPI
‣ resolution
‣ Capabilities.screenDPI

310. MOBILE FUNDAMENTALS

311. MOBILE FUNDAMENTALS
‣ MultiDPIBitmapSource

312. MOBILE FUNDAMENTALS
‣ MultiDPIBitmapSource
‣ 160: < 200

313. MOBILE FUNDAMENTALS
‣ MultiDPIBitmapSource
‣ 160: < 200
‣ 240: >=200 and <280

314. MOBILE FUNDAMENTALS
‣ MultiDPIBitmapSource
‣ 160: < 200
‣ 240: >=200 and <280
‣ 320: >=280

315. STAGE.QUALITY POWAH

316. STAGE.QUALITY POWAH
‣ stage.quality = LOW

317. STAGE.QUALITY POWAH
‣ stage.quality = LOW
‣ pimp!

318. STAGE.QUALITY POWAH
‣ stage.quality = LOW
‣ pimp!
‣ stage.quality = MED

319. STAGE.QUALITY POWAH
‣ stage.quality = LOW
‣ pimp!
‣ stage.quality = MED
‣ great compromise

320. STAGE.QUALITY POWAH
‣ stage.quality = LOW
‣ pimp!
‣ stage.quality = MED
‣ great compromise
‣ stage.quality = HIGH

321. STAGE.QUALITY POWAH
‣ stage.quality = LOW
‣ pimp!
‣ stage.quality = MED
‣ great compromise
‣ stage.quality = HIGH
‣ default

322. STAGE.QUALITY POWAH
‣ stage.quality = LOW
‣ pimp!
‣ stage.quality = MED
‣ great compromise
‣ stage.quality = HIGH
‣ default
‣ stage.quality = BEST.. NOOoOOo

323. STAGE.QUALITY EXAMPLE

324. STAGE.QUALITY EXAMPLE
‣ LOW vs. MED

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. 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. 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. 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. 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. 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. 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. 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. BITMAP MANUAL SCALING

334. BITMAP MANUAL SCALING
‣ [CombOver]

335. conclusions

336. conclusions
‣ Ask Questions w/Designers

337. conclusions
‣ Ask Questions w/Designers
‣ Break up in Photoshop/Fireworks

338. conclusions
‣ Ask Questions w/Designers
‣ Break up in Photoshop/Fireworks
‣ Package all assets in Flash

339. conclusions
‣ Ask Questions w/Designers
‣ Break up in Photoshop/Fireworks
‣ Package all assets in Flash
‣ Create Flex Skins in Library Project

340. conclusions

341. conclusions
‣ Bitmap | Vector

342. conclusions
‣ Bitmap | Vector
‣ Web vs Desktop vs Mobile

343. conclusions
‣ Bitmap | Vector
‣ Web vs Desktop vs Mobile
‣ Designer Capabilities

344. conclusions
‣ Bitmap | Vector
‣ Web vs Desktop vs Mobile
‣ Designer Capabilities
‣ Developer Capabilities

345. conclusions

346. conclusions
‣ Recognize what tools you’ll need

347. conclusions
‣ Recognize what tools you’ll need
‣ Photoshop

348. conclusions
‣ Recognize what tools you’ll need
‣ Photoshop
‣ Flash

349. conclusions
‣ Recognize what tools you’ll need
‣ Photoshop
‣ Flash
‣ Flash Builder

350. end. questions?

351. end. questions?
‣ Jesse Warden

352. end. questions?
‣ Jesse Warden
‣ Flex & Flash Consultant

353. end. questions?
‣ Jesse Warden
‣ Flex & Flash Consultant
‣ Email: jessew@webappsolution.com

354. end. questions?
‣ Jesse Warden
‣ Flex & Flash Consultant
‣ Email: jessew@webappsolution.com
‣ Twittah: @jesterxl

355. end. questions?
‣ Jesse Warden
‣ Flex & Flash Consultant
‣ Email: jessew@webappsolution.com
‣ Twittah: @jesterxl
‣ Blog: http://jessewarden.com