HTML5 is awesome. Well, it will be awesome when it\'s finally ready. Probably. The bad news is that by the time the W3C have finished monkeying with HTML5, I\'ll probably have given up on the web as a whole and taken up meat goat farming. The good news (for you, me and the goats) is that there\'s no need to wait for a lot of the functionality that HTML5 promises; we can start using them right now. In this session I\'m going to show you how you can steal these features from the Flash Player and use them in your standards-based sites or applications, without even a sniff of Flash on the page.

1. Beg, Borrow or Steal
The Art of Flashing without Flashing

2. Who am I?

3. I am a blogger
http://dynamicflash.com

4. I am an author

5. I am a Yahoo!
http://flickr.com/photos/niallkennedy/
Senior Front-End Engineer on the Front-End Architecture team
Catalyst for this talk - standards vs. Flash.

6. I am an idiot
http://flickr.com/photos/thevoicewithin/

7. I am misleading

8. This session should
have been...

9. HTML5
Features you want desperately
and can use TODAY!
Based on Ian Hickson’s Google presentation

10. So what’s wrong
with HTML5?

11. Lots of nice features
http://flickr.com/photos/hassman/
Video and audio support
Push-technology (Web Sockets)
Many other great features

12. Not ready until 2022
2022 date taken from WHATWG roadmap
Some HTML5 features supported in bleeding-edge nightly build browsers
Still won’t be suitable for general use for a good few years

13. But you don’t have
to wait that long

14. You can borrow features
from the Flash Player

15. How does this
all work?

16. How does this work?
HTML
HTML lives in browser-land
Limited in functionality by the browser’s capabilities

17. How does this work?
SWF HTML
SWF playing in Flash Player has access to advanced features
How can we get the two to communicate?

18. How does this work?
SWF HTML
JavaScript
JavaScript is can interact with HTML/DOM

19. How does this work?
Text
SWF HTML
JavaScript
We need to find something to communicate between JS and SWF

20. How does this work?
Text
SWF HTML
alInt erface
Extern
class
JavaScript
The ExternalInterface class provides a Flash-to-JS bridge
Available since Flash Player 8

21. How does this work?
Invis
ible
Flash
SWF HTML
alInt erface
Extern
class
JavaScript
Now the Flash content doesn’t even have to be visible on the page.
Show ’01 ExternalInterface’ demo

22. Great, so what can
we do with it?

23. Video playback
In HTML5 this is implemented by the <video> element
YouTube etc. have been using Flash for video for years
Use out-of-the-box solution like JW FLV Media Player

24. Audio playback
In HTML5 this is implemented by the <audio> element
Latest WebKit nightly also has Audio JS class for pure JS audio
Scott Schiller’s SoundManager library uses Flash to play JS-controlled audio

25. Multiple file upload
Part of Web Forms, but missing in HTML5 spec
Flash-based solutions include SWFUpload and YUI Uploader
Flash Player 10 introduces clickjacking security restriction that means file browse dialog can
only be invoked by a click on the Flash movie itself (not through ExternalInterface)
YUI Uploader allows creation of transparent overlay on links to get around this
Used on the current Flickr Web Upload page

26. Cross-frame
communication
HTML5 introduces window.postMessage method and ‘message’ event
Flash allows LocalConnection objects to communicate
Using LocalConnections in conjunction with ExternalInterface allows HTML5-like functionality
NOW
Show ’05 Cross Frame Comms’ example and code

27. Offline storage
HTML5 introduces localStorage object and methods
Different to cookies - not sent to/from the server
Flash has has Local Shared Object for client-side data storage, so it’s easy to build emulation
layer
Show ’06 Offline Storage’ example and code

28. Socket-based
communication
Client side, comet is a mess of browser hacks - a virtual house of cards
HTML5 introduces Web Sockets for bidirectional communication
Flash has both XML and raw (byte-based) socket support
Show ’07 Sockets’ example and code

29. Thank you!
http://dynamicflash.com/my-talks#head08