1. Using Flash as Bondo
james vreeland
2007-11-10

2. Who is this dufus?

3. Who is this dufus?

4. Who is this dufus?
Not a Flash developer

5. Who is this dufus?
Not a Flash developer
Passionate about my users

6. Who is this dufus?
Not a Flash developer
Passionate about my users
Personally indifferent in terms of
platform selection

7. Ok, but Bondo?
http://flickr.com/photos/romanedirisinghe/61596061/

8. Where are we now?

9. Where are we going?

10. Where are we going?
Everywhere!

11. Where are we going?
Everywhere!
Tons of places we don’t expect to see a
“web technology”.

12. Showing up in odd places.

13. Where?

14. Where?
Set top boxes

15. Moxi Media Center

16. Where?
Set top boxes

17. Where?
Set top boxes
MP3 players

18. iRiver U10
http://flickr.com/photos/frangino/115899032/

19. Where?
Set top boxes
MP3 players

20. Where?
Set top boxes
MP3 players
Digital Cameras

21. Kodak Easyshare-One
http://flickr.com/photos/audioblog/53030295/

22. Where?
Set top boxes
MP3 players
Digital Cameras

23. Where?
Set top boxes
MP3 players
Digital Cameras
Mobile Phones

24. Nokia N80
http://flickr.com/photos/putu/385128499/

25. Where?
Set top boxes
MP3 players
Digital Cameras
Mobile Phones

26. Where?
Set top boxes
MP3 players
Digital Cameras
Mobile Phones
“Other” devices

27. Chumby!
http://flickr.com/photos/jvree/496617094

28. Organic’s lobby
(Shameless plug)

29. It’s not that widespread.
Is it?

30. It’s not that widespread.
Is it?
HP iPAQ rz1700 Casio Hitachi W32H NEC N506iSII Nokia N75 Tottori Sanyo A5508SA(talby) Sony Ericsson_K606c
HP iPAQ rx3400 Casio Hitachi W41CA NEC N700i Nokia N80 Tottori Sanyo A5510SA Sony Ericsson_K606i
HP iPAQ rx3700 Casio Hitachi W41H NEC N701iECO Nokia N90 (Sweets) Sony Ericsson K606i/c
HP iPAQ rw6100 Casio Hitachi W42CA(G'z One) NEC N702iD Nokia N91 Tottori Sanyo A5514SA Sony Ericsson_K608c
HP iPAQ rx3100 Casio Hitachi W42H NEC N702iS Nokia N91-1 Tottori Sanyo A5518SA Sony Ericsson_K608i
Toshiba GENIO e550 Casio Hitachi W43CA NEC N900i Nokia N92 Tottori Sanyo A5518SA Sony Ericsson K608i/c
Toshiba GENIO e550G Casio Hitachi W43H NEC N900iG Nokia N93 (Camera-less Model) Sony Ericsson_K610iM
Sony CLIE NX60 Kyocera A1403K NEC N900iL Nokia N93i Tottori Sanyo A5519SA(Sweets Sony Ericsson P800
Sony CLIE NX70V Kyocera A5515K NEC N900iS Nokia N-Gage QD pure) Sony Ericsson P900
Sony CLIE NZ90 Kyocera A5521K NEC N901iC Nokia N-Gage Tottori Sanyo A5520SA(Junior Sony Ericsson P910
Sony CLIE TG50 Kyocera W21K NEC N901iS Nokia vvE50 Keitai) Sony Ericsson Premini II
Sony CLIE UX40 Kyocera W21SA NEC N902i Panasonic P505i Tottori Sanyo A5520SAII(Junior Sony Ericsson SO505i
Sony CLIE UX50 Kyocera W31K NEC N902iS Panasonic P505iS Keitai) Sony Ericsson SO505iC
Moxi Digital, Inc. Moxi Media Kyocera W31KII NEC N902iX(HIGH-SPEED) Panasonic P506iC Tottori Sanyo W42SA Sony Ericsson SO505iS
Center Kyocera W32K Nokia 3230 Panasonic P506iCII Sendo X Sony Ericsson SO506i(premini-
Microsoft TV MSTV Kyocera W41K Nokia 3250 Panasonic P700i Sharp 703SH II)
Nokia Mediaterminal Kyocera W42K Nokia 3600 Panasonic P701iD Sharp 703SHf Sony Ericsson SO506iC
Thomson Multimedia TAK TV Kyocera W43K Nokia 3620 Panasonic P702i Sharp 705SH(SLIMIA) Sony Ericsson SO506iS
iRiver U10 LG 8300 Nokia 3660 Panasonic P702iD Sharp 802SH (premini-IIS)
CorAccess Home Companion LG 9800 Nokia 5200 Panasonic P851i Sharp 804SH Sony Ericsson SO702i
Kodak Easyshare-One Zoom LG VX8100 Nokia 5300 Panasonic P900i Sharp 810SH Sony Ericsson SO902i
Digital Camera LG VX8500 (Chocolate) Nokia 5500 Panasonic P900iV Sharp 811SH Sony Ericsson SO902iWP+
Siemens SIMPad SL4 LG VX9900 Nokia 6125 Panasonic P901i Sharp 902SH Sony Ericsson_V600i
Chumby Mitsubishi D505i Nokia 6131 Panasonic P901iS Sharp 903SH Sony Ericsson_V800
Fujitsu F505i Mitsubishi D505iS Nokia 6151 Panasonic P901iTV Sharp 904SH Sony Ericsson W21S
Fujitsu F505iGPS Mitsubishi D506i Nokia 6260 Panasonic P902i Sharp 905SH(AQUOS keitai) Sony Ericsson_W300i
Fujitsu F505is Mitsubishi D701i Nokia 6300 Panasonic P902iS Sharp SH505i Sony Ericsson W31S
Fujitsu F506i Mitsubishi D701iWM(MUSIC Nokia 6600 Samsung SCH-A930 Sharp SH505iS Sony Ericsson W32S
Fujitsu F700i PORTER II) Nokia 6620 Samsung SCH-A950 Sharp SH506iC Sony Ericsson W41S
Fujitsu F700iS Mitsubishi D702i Nokia 6630 Samsung SCH-A970 Sharp SH700i Sony Ericsson W42S(Walkman
Fujitsu F702iD Mitsubishi D702iBCL Nokia 6670 Samsung SCH-A990 Sharp SH700iS Keitai)
Fujitsu F882iES(FOMA Raku Mitsubishi D702iF Nokia 6680 Samsung 705SC Sharp SH702iD Sony Ericsson W43S
Raku PHONE III) Mitsubishi D851iWM(MUSIC Nokia 6681 Samsung 706SC Sharp SH702iS Sony Ericsson W550
Fujitsu F900i PORTER X) Nokia 6682 Samsung 804SS Sharp SH851i(DOLCE) Sony Ericsson_W550c
Fujitsu F900iC Mitsubishi D900i Nokia 7390 Sanyo A5507SA Sharp SH900i Sony Ericsson_W550i
Fujitsu F900iT Mitsubishi D901i Nokia 7610 Sanyo A5508SA Sharp SH901iC Sony Ericsson W600
Fujitsu F901iC Mitsubishi D901iS Nokia 7710 Sanyo A5522SA Sharp SH901iS Sony Ericsson_W810i
Fujitsu F901iS Mitsubishi D902i Nokia 8800 Sanyo SA700iS Sharp SH902i Sony Ericsson W900
Fujitsu F902i Mitsubishi D902iS Nokia 9200 Communicator Sanyo SA702i Sharp SH902iS Sony Ericsson W900i
Fujitsu F902iS Mitsubishi M430i Nokia 9500 Communicator Sanyo SA800i(Kids' PHONE) Sharp SH902iSL(DOLCE SL) Sony Ericsson Z800
Hitachi W22H Motorola A920 Nokia E60 Sanyo W21SA Sharp SH903i Toshiba 810T
Casio Hitachi A5512CA Motorola MOTOKRZR K1m Nokia E61 Sanyo W22SA Sharp W41SH Toshiba 910T
Casio Hitachi A5513CA(G'zOne Motorola Razr V3c Nokia E62 Sanyo W31SA Siemens SX1 Toshiba A5511T
TYPE-R) Motorola Razr V3m Nokia E70 Sanyo W31SAII Sony Ericsson 802SE Toshiba A5516T
Casio Hitachi W21CA NEC N505i Nokia E70-1 Sanyo W32SA Sony Ericsson_K600 Toshiba A5517T(Simple Phone)
Casio Hitachi W21CAII NEC N505iS Nokia N70 Sanyo W33SA Sony Ericsson_K600c Toshiba W21T
Casio Hitachi W22H NEC N505iS Nokia N71 Sanyo W33SAII Sony Ericsson_K600i Toshiba W31T
Casio Hitachi W31CA NEC N506i Nokia N71-1 Sanyo W41SA Sony Ericsson K600i/c Toshiba W32T
Casio Hitachi W31H(PENCK) NEC N506iS Nokia N73 Tottori Sanyo A5507SA Sony Ericsson_K606c Toshiba W41T(MUSIC-HDD)

31. Jeez. Why is it all over
the place?

32. Jeez. Why is it all over
the place?
Easy for designers

33. Jeez. Why is it all over
the place?
Easy for designers
Easy for developers

34. Jeez. Why is it all over
the place?
Easy for designers
Easy for developers
Why do more than you need to?

35. What can I play with now?

36. Visualizations

37. Visualizations
Papervision 3D
http://code.google.com/p/papervision3d/

38. TiltViewer
http://www.airtightinteractive.com/projects/tiltviewer/app/

39. Floorplanner 3D
http://www.floorplanner.com/3ddemo

40. Twitter Blocks
http://explore.twitter.com/blocks/

41. Paper Critters
http://papercritters.com/pc.php

42. Visualizations
Papervision 3D
http://code.google.com/p/papervision3d/

43. Visualizations
Papervision 3D
http://code.google.com/p/papervision3d/
Digg Labs
http://labs.digg.com/

44. Digg Labs
http://labs.digg.com/

45. Visualizations
Papervision 3D
http://code.google.com/p/papervision3d/
Digg Labs
http://labs.digg.com/

46. Visualizations
Papervision 3D
http://code.google.com/p/papervision3d/
Digg Labs
http://labs.digg.com/
Google Analytics
http://www.google.com/analytics/

47. Google Analytics
http://www.google.com/analytics

48. Desktop Goodies

49. Desktop Goodies
Twitter AIR apps
http://snook.ca/snitter/
http://funkatron.com/spaz

50. Snitter and Spaz
http://snook.ca/snitter/ & http://funkatron.com/spaz

51. Desktop Goodies
Twitter AIR apps
http://snook.ca/snitter/
http://funkatron.com/spaz

52. Desktop Goodies
Twitter AIR apps
http://snook.ca/snitter/
http://funkatron.com/spaz
Digimix
http://www.digidood.com/digimix/

53. Digimix
http://www.digidood.com/digimix/

54. Desktop Goodies
Twitter AIR apps
http://snook.ca/snitter/
http://funkatron.com/spaz
Digimix
http://www.digidood.com/digimix/

55. Desktop Goodies
Twitter AIR apps
http://snook.ca/snitter/
http://funkatron.com/spaz
Digimix
http://www.digidood.com/digimix/
EG 2006

56. EG 2006

57. Eye Candy

58. Twitter noise

59. Flickr photos by tag

60. Semantic XHTML Parsing

61. Semantic XHTML Parsing
Heh?

62. Semantic XHTML Parsing
Heh?
Progressive page enhancement

63. Semantic XHTML Parsing
Heh?
Progressive page enhancement
Maintains SEO/508

64. Semantic XHTML Parsing
Heh?
Progressive page enhancement
Maintains SEO/508
Graceful Degradation

65. Semantic XHTML Parsing
Heh?
Progressive page enhancement
Maintains SEO/508
Graceful Degradation
Low bandwidth version of the site for “free”

66. Eating the DOM

67. Eating the DOM

68. Ask DrZ

69. Feature Page - Flash
http://www.dodge.com/en

70. Feature Page - CSS only

71. Cheating on AJAX

72. Cheating on AJAX
Acting as a cross domain proxy

73. Cheating on AJAX
Acting as a cross domain proxy
Cleaning up API returns

74. Browser shortcomings

75. Browser shortcomings
Font constraints

76. Browser shortcomings
Font constraints
sIFR
http://novemberborn.net/sifr3/look-into-the-future

77. Browser shortcomings
Font constraints
sIFR
http://novemberborn.net/sifr3/look-into-the-future
Complex PNG support

78. Browser shortcomings
Font constraints
sIFR
http://novemberborn.net/sifr3/look-into-the-future
Complex PNG support
On-the-fly graphical effects

79. Browser shortcomings
Font constraints
sIFR
http://novemberborn.net/sifr3/look-into-the-future
Complex PNG support
On-the-fly graphical effects

80. Learn from other’s flubs.

81. Really bad user design
http://www.slideshare.net/carsonified/michael-kowalski

82. Build backwards from
your user

83. Build backwards from
your user
Don’t do what is best/easiest for you

84. Build backwards from
your user
Don’t do what is best/easiest for you
Be willing to suffer, so your users don’t

85. Flash is not an OS

86. Flash is not an OS

87. Flash is not an OS

88. Flash is not an OS

89. Posture

90. Posture
Sovereign
Primary focus with a single screen

91. Posture
Sovereign
Primary focus with a single screen
Transient
Dialog boxes

92. Posture
Sovereign
Primary focus with a single screen
Transient
Dialog boxes
Daemonic
Drivers

93. Posture
Sovereign
Primary focus with a single screen
Transient
Dialog boxes
Daemonic
Drivers
Parasitic
Widgets

94. Easy on the animations

95. Easy on the animations
Performance across different systems

96. Easy on the animations
Performance across different systems
Really easy to go overboard

97. Easy on the animations
Performance across different systems
Really easy to go overboard
Keeps users from their desired task

98. Affordance

99. Affordance
“Action Possibilities”

100. Affordance
“Action Possibilities”
Give target areas plenty of space and
interaction feedback

101. Affordance
“Action Possibilities”
Give target areas plenty of space and
interaction feedback
Learned affordances

102. Affordance
“Action Possibilities”
Give target areas plenty of space and
interaction feedback
Learned affordances
Tooltips and cursor feedback

103. Immediate feedback

104. Immediate feedback
Down/Click feedback

105. Immediate feedback
Down/Click feedback
Pinwheel

106. Immediate feedback
Down/Click feedback
Pinwheel
Progress/Loader bars

107. Create a style guide

108. Create a style guide
Shared libraries / common components

109. Create a style guide
Shared libraries / common components
CSS

110. Create a style guide
Shared libraries / common components
CSS
ui.swf

111. Create a style guide
Shared libraries / common components
CSS
ui.swf
Animation engines
Fuse
mx.transitions.tween

112. Modular design

113. Modular design
No, I don’t mean make things blocky

114. Modular design
No, I don’t mean make things blocky
Skinning components

115. Modular design
No, I don’t mean make things blocky
Skinning components
Personal library

116. A little extra umph!

117. JSFL
JavaScript Flash

118. JSFL
JavaScript Flash
Streamline repetitive tasks (banners)

119. JSFL
JavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools

120. JSFL
JavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization

121. JSFL
JavaScript Flash
Streamline repetitive tasks (banners)
Panel IDE tools
Automated organization
Quick keyframe animation work

122. ActionMonkey
SpiderMonkey/Tamarin/What?

123. ActionMonkey
SpiderMonkey/Tamarin/What?
No use to you, yet

124. ActionMonkey
SpiderMonkey/Tamarin/What?
No use to you, yet
Combination of the Mozilla JavaScript
engine and the Tamarin renderer
donated by Adobe

125. Logging
When trace() isn’t enough

126. Logging
When trace() isn’t enough

127. Logging
When trace() isn’t enough
“A better trace”

128. Logging
When trace() isn’t enough
“A better trace”
LuminicBox

129. Logging
When trace() isn’t enough
“A better trace”
LuminicBox

130. Logging
When trace() isn’t enough
“A better trace”
LuminicBox

131. Microformats

132. Microformats
High information density

133. Microformats
High information density
http://www.web2con.com/
Web 2.0 Conference: October 5-19, at the Argent Hotel, San Francisco, CA

134. Microformats
High information density
http://www.web2con.com/
Web 2.0 Conference: October 5-19, at the Argent Hotel, San Francisco, CA
<div class=quot;veventquot;>
<a class=quot;urlquot; href=quot;http://www.web2con.com/quot;>
http://www.web2con.com/
</a>
<span class=quot;summaryquot;>Web 2.0 Conference</span>:
<abbr class=quot;dtstartquot; title=quot;2007-10-05quot;>October 5</abbr> -
<abbr class=quot;dtendquot; title=quot;2007-10-20quot;>19</abbr>, at the
<span class=quot;locationquot;>Argent Hotel, San Francisco, CA</span>
</div>

135. Microformats
High information density

136. Microformats
High information density
Building blocks for semantic XHTML

137. Microformats
High information density
Building blocks for semantic XHTML
Creating standards for yourself

138. JSON
JavaScript Object Notation

139. JSON
JavaScript Object Notation
Super simple data parsing

140. JSON
JavaScript Object Notation
Super simple data parsing
{
quot;firstNamequot;: quot;Johnquot;,
quot;lastNamequot;: quot;Smithquot;,
quot;addressquot;: {
quot;streetAddressquot;: quot;21 2nd Streetquot;,
quot;cityquot;: quot;New Yorkquot;,
quot;statequot;: quot;NYquot;,
quot;postalCodequot;: 10021
},
quot;phoneNumbersquot;: [
quot;212 732-1234quot;,
quot;646 123-4567quot;
]
}

141. JSON
JavaScript Object Notation
Super simple data parsing

142. JSON
JavaScript Object Notation
Super simple data parsing
Client-side storage methodology

143. JSON
JavaScript Object Notation
Super simple data parsing
Client-side storage methodology
Don’t just eval(), please

144. Are you done talking yet?

145. Are you done talking yet?
Don’t go looking for “nails”

146. Are you done talking yet?
Don’t go looking for “nails”
Think like your users

147. Are you done talking yet?
Don’t go looking for “nails”
Think like your users
Build yourself a toolkit

148. Are you done talking yet?
Don’t go looking for “nails”
Think like your users
Build yourself a toolkit
Play with something new

149. Thanks! Questions?
james vreeland
jamesv.org
j@mesv.org
Special thanks to Andrew Bell - (http:www.tcimh.com) - for all creature sketches.