0
Beg, Borrow or Steal
  The Art of Flashing without Flashing
Who am I?
I am a blogger




    http://dynamicflash.com
I am an author
I am a Yahoo!




                            http://flickr.com/photos/niallkennedy/


Senior Front-End Engineer on the Fro...
I am an idiot




 http://flickr.com/photos/thevoicewithin/
I am misleading
This session should
   have been...
HTML5
                      Features you want desperately
                           and can use TODAY!




Based on Ian H...
So what’s wrong
  with HTML5?
Lots of nice features




                                http://flickr.com/photos/hassman/


Video and audio support
Push-...
Not ready until 2022




2022 date taken from WHATWG roadmap
Some HTML5 features supported in bleeding-edge nightly build ...
But you don’t have
 to wait that long
You can borrow features
 from the Flash Player
How does this
  all work?
How does this work?


                                                         HTML




HTML lives in browser-land
Limited...
How does this work?


                        SWF                                   HTML




SWF playing in Flash Player h...
How does this work?


                       SWF                              HTML




                                   ...
How does this work?


                                       Text
                      SWF                               ...
How does this work?


                                           Text
                        SWF                         ...
How does this work?

                                       Invis
                                             ible
      ...
Great, so what can
  we do with it?
Video playback



In HTML5 this is implemented by the <video> element
YouTube etc. have been using Flash for video for yea...
Audio playback



In HTML5 this is implemented by the <audio> element
Latest WebKit nightly also has Audio JS class for pu...
Multiple file upload



Part of Web Forms, but missing in HTML5 spec
Flash-based solutions include SWFUpload and YUI Uploa...
Cross-frame
                   communication


HTML5 introduces window.postMessage method and ‘message’ event
Flash allows...
Offline storage



HTML5 introduces localStorage object and methods
Different to cookies - not sent to/from the server
Fla...
Socket-based
                    communication


Client side, comet is a mess of browser hacks - a virtual house of cards
...
Thank you!
http://dynamicflash.com/my-talks#head08
Upcoming SlideShare
Loading in...5
×

Beg, Borrow or Steal: The Art of Flashing Without Flashing

2,557

Published on

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.

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
2,557
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
42
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Beg, Borrow or Steal: The Art of Flashing Without Flashing"

  1. 1. Beg, Borrow or Steal The Art of Flashing without Flashing
  2. 2. Who am I?
  3. 3. I am a blogger http://dynamicflash.com
  4. 4. I am an author
  5. 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. 6. I am an idiot http://flickr.com/photos/thevoicewithin/
  7. 7. I am misleading
  8. 8. This session should have been...
  9. 9. HTML5 Features you want desperately and can use TODAY! Based on Ian Hickson’s Google presentation
  10. 10. So what’s wrong with HTML5?
  11. 11. Lots of nice features http://flickr.com/photos/hassman/ Video and audio support Push-technology (Web Sockets) Many other great features
  12. 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. 13. But you don’t have to wait that long
  14. 14. You can borrow features from the Flash Player
  15. 15. How does this all work?
  16. 16. How does this work? HTML HTML lives in browser-land Limited in functionality by the browser’s capabilities
  17. 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. 18. How does this work? SWF HTML JavaScript JavaScript is can interact with HTML/DOM
  19. 19. How does this work? Text SWF HTML JavaScript We need to find something to communicate between JS and SWF
  20. 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. 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. 22. Great, so what can we do with it?
  23. 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. 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. 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. 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. 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. 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. 29. Thank you! http://dynamicflash.com/my-talks#head08
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×