SWFObject 2: The fine art of embedding Adobe Flash Player content

5,635 views

Published on

My presentation for FITC Amsterdam. It shortly discusses the history and goals of the SWFObject 2 project, thoroughly explains the underlying problems it aims to solve, and gives an overview of the final solution.

Published in: Technology
2 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total views
5,635
On SlideShare
0
From Embeds
0
Number of Embeds
210
Actions
Shares
0
Downloads
51
Comments
2
Likes
4
Embeds 0
No embeds

No notes for slide

SWFObject 2: The fine art of embedding Adobe Flash Player content

  1. 1. Bobby van der Sluis FITC Amsterdam, 26th February 2008
  2. 2. Many Flash embed methods • Twice cooked • Adobe Flash Player Detection Kit • Embed only • SWFObject • Flash Satay • Unobtrusive Flash • Nested objects Objects (UFO) (Hixie) • ObjectSwap • Many, many other scripts...
  3. 3. Some methods are on the road to nowhere; none of them are optimal
  4. 4. The project Geoff Stearns SWFObject Bobby van der Sluis Unobtrusive Flash Objects (UFO) Michael Williams Adobe Flash Player Detection Kit
  5. 5. 8 key questions 1. How to embed cross-browser? 2. How to comply with web standards? 3. What if no Flash plug-in is available? 4. How to deal with an outdated Flash plug-in? 5. Where to download the latest Flash plug-in? 6. How to help search engines? 7. How to avoid mechanisms that hurt the user experience? 8. How to do all of this in the easiest way possible?
  6. 6. 8 key questions 1. How to embed cross-browser? 2. How to comply with web standards? 3. What if no Flash plug-in is available? 4. How to deal with an outdated Flash plug-in? 5. Where to download the latest Flash plug-in? 6. How to help search engines? 7. How to avoid mechanisms that hurt the user experience? 8. How to do all of this in the easiest way possible?
  7. 7. Cross-browser anno 1998
  8. 8. Netscape’s <embed> <embed type=quot;application/x-shockwave-flashquot; src=quot;myContent.swfquot; width=quot;780quot; height=quot;390quot; /> • Is patented and therefore not a web standard • Invalid HTML • Doesn’t support alternative content
  9. 9. Alternative content Content that is accessible to people who browse the web without plugins
  10. 10. Internet Explorer’s <object> <object classid=quot;clsid:D27CDB6E- AE6D-11cf-96B8-444553540000quot; width=quot;780quot; height=quot;390quot;> <param name=quot;moviequot; value=quot;myContent.swfquot; /> <p>Alternative content</p> </object> • Is a W3C Recommendation • Supports alternative content • Is a platform specific implementation
  11. 11. Twice cooked <object classid=quot;clsid:D27CDB6E- AE6D-11cf-96B8-444553540000quot; width=quot;780quot; height=quot;390quot;> <param name=quot;moviequot; value=quot;myContent.swfquot; /> <embed type=quot;application/x-shockwave-flashquot; src=quot;myContent.swfquot; width=quot;780quot; height=quot;390quot; /> </object> • Locked into vendor specific code • No alternative content possible • This is still the default publishing method of the Flash IDE today
  12. 12. Web standards offer a universal language to a whole ecosystem of browser makers, tool builders, and web authors, so that all of these audiences can avoid compatibility problems, vendor lock-ins, and patent-infringement issues.
  13. 13. Cross-browser today All modern web browsers support a platform independent implementation of <object> <object type=quot;application/x-shockwave-flashquot; data=quot;myContent.swfquot; width=quot;780quot; height=quot;390quot;> <p>Alternative content</p> </object> Except Microsoft Internet Explorer <object classid=quot;clsid:D27CDB6E-AE6D-11cf-96B8-444553540000quot; width=quot;780quot; height=quot;390quot;> <param name=quot;moviequot; value=quot;myContent.swfquot; /> <p>Alternative content</p> </object>
  14. 14. Nested objects <object classid=quot;clsid:D27CDB6E- AE6D-11cf-96B8-444553540000quot; width=quot;780quot; height=quot;390quot;> <param name=quot;moviequot; value=quot;myContent.swfquot; /> <object type=quot;application/x-shockwave-flashquot; data=quot;myContent.swfquot; width=quot;780quot; height=quot;390quot;> <p>Alternative content</p> </object> </object>
  15. 15. Nested objects - take 2 <object classid=quot;clsid:D27CDB6E- AE6D-11cf-96B8-444553540000quot; width=quot;780quot; height=quot;390quot;> <param name=quot;moviequot; value=quot;myContent.swfquot; /> <!--[if !IE]>--> <object type=quot;application/x-shockwave-flashquot; data=quot;myContent.swfquot; width=quot;780quot; height=quot;390quot;> <!--<![endif]--> <p>Alternative content</p> <!--[if !IE]>--> </object> <!--<![endif]--> </object>
  16. 16. Why nested objects is better than twice cooked • It breaks the cycle of vendor lock-in • Valid HTML • The opportunity to use alternative content
  17. 17. Markup vs scripting • Around 98% of the people has Flash Player 8 • Around 5% has no JavaScript support • Around 1% has poor JavaScript support
  18. 18. 8 key questions 1. How to embed cross-browser? 2. How to comply with web standards? 3. What if no Flash plug-in is available? 4. How to deal with an outdated Flash plug-in? 5. Where to download the latest Flash plug-in? 6. How to help search engines? 7. How to avoid mechanisms that hurt the user experience? 8. How to do all of this in the easiest way possible?
  19. 19. The Flash Player will attempt to play Flash content, no matter what Flash plugin version that content was published for
  20. 20. Flash Player version detection Use JavaScript to: • Detect the Flash Player version • Determine whether Flash content or alternative content needs to be shown • Trigger Adobe Express Install (optional)
  21. 21. Adobe Express Install
  22. 22. The old way of downloading <embed ... pluginspage=quot;http://www.macromedia.com/ go/getflashplayerquot; />
  23. 23. The old way of downloading
  24. 24. The old way of downloading <object ... codebase=quot;http:// fpdownload.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=8,0,0,0quot;>
  25. 25. The old way of downloading
  26. 26. The modern way of downloading • Use alternative content • Use Adobe Express Install (optional) • Rely on browser built-in mechanisms (based on MIME type invocation)
  27. 27. 8 key questions 1. How to embed cross-browser? 2. How to comply with web standards? 3. What if no Flash plug-in is available? 4. How to deal with an outdated Flash plug-in? 5. Where to download the latest Flash plug-in? 6. How to help search engines? 7. How to avoid mechanisms that hurt the user experience? 8. How to do all of this in the easiest way possible?
  28. 28. Doesn’t Google index Flash content?
  29. 29. Search engines and Flash content • Not all search engines index Flash content • Search engines are far more optimized to index HTML pages than Flash content • Flash indexing itself is limited: merely flat content in a specific order; it lacks the hierarchical structure and the semantics of HTML
  30. 30. Strategies to help search engines 1. Use alternative content 2. Use Sitemaps and robots.txt
  31. 31. 8 key questions 1. How to embed cross-browser? 2. How to comply with web standards? 3. What if no Flash plug-in is available? 4. How to deal with an outdated Flash plug-in? 5. Where to download the latest Flash plug-in? 6. How to help search engines? 7. How to avoid mechanisms that hurt the user experience? 8. How to do all of this in the easiest way possible?
  32. 32. Active content • Eolas - Microsoft patent dispute • A user-unfriendly workaround by Microsoft and Opera to avoid claims • Affects Internet Explorer 6+ and Opera 9+
  33. 33. Click-to-activate mechanism
  34. 34. Avoiding active content Publish your Flash content with JavaScript
  35. 35. No more active content? • Microsoft has settled with Eolas • 2008 onwards: click-to-activate mechanism is removed from Internet Explorer via update • Opera to follow? • Apple and Opera to be sued next?
  36. 36. 8 key questions 1. How to embed cross-browser? 2. How to comply with web standards? 3. What if no Flash plug-in is available? 4. How to deal with an outdated Flash plug-in? 5. Where to download the latest Flash plug-in? 6. How to help search engines? 7. How to avoid mechanisms that hurt the user experience? 8. How to do all of this in the easiest way possible?
  37. 37. SWFObject 2.0 • Static publishing method • Dynamic publishing method • JavaScript API • Only utilizes 1 JavaScript file (9.2 Kb)
  38. 38. Static publishing method Embed Flash content and alternative content using standards compliant markup, and use unobtrusive JavaScript to resolve the issues that markup alone cannot solve
  39. 39. Static publishing - step 1 <object id=quot;myIdquot; classid=quot;clsid:D27CDB6E- AE6D-11cf-96B8-444553540000quot; width=quot;780quot; height=quot;390quot;> <param name=quot;moviequot; value=quot;myContent.swfquot; /> <!--[if !IE]>--> <object type=quot;application/x-shockwave-flashquot; data=quot;myContent.swfquot; width=quot;780quot; height=quot;390quot;> <!--<![endif]--> <p>Alternative content</p> <!--[if !IE]>--> </object> <!--<![endif]--> </object>
  40. 40. Static publishing - step 2 <script type=quot;text/javascriptquot; src=quot;swfobject.jsquot;></script>
  41. 41. Static publishing - step 3 <script type=quot;text/javascriptquot;> swfobject.registerObject(quot;myIdquot;, quot;9.0.0quot;); </script>
  42. 42. Dynamic publishing method Create alternative content using standards compliant markup and embed Flash content with unobtrusive JavaScript
  43. 43. Dynamic publishing - step 1 <div id=quot;myIdquot;> <p>Alternative content</p> </div>
  44. 44. Dynamic publishing - step 2 <script type=quot;text/javascriptquot; src=quot;swfobject.jsquot;></script>
  45. 45. Dynamic publishing - step 3 <script type=quot;text/javascriptquot;> swfobject.embedSWF(quot;myContent.swfquot;, quot;myIdquot;, quot;780quot;, quot;390quot;, quot;9.0.0quot;); </script>
  46. 46. JavaScript API • swfobject.registerObject(...) • swfobject.embedSWF(...) • swfobject.getObjectById(...) • swfobject.getFlashPlayerVersion() • swfobject.hasFlashPlayerVersion(...) • swfobject.addLoadEvent(...) • swfobject.addDomLoadEvent(...) • swfobject.createSWF(...) • swfobject.createCSS(...) • swfobject.getQueryParamValue(...)
  47. 47. SWFObject 2.0 and browser integration • As usual, e.g.: - Adobe External Interface - SWFAddress 2.0 - AS3.0 MouseWheel on Mac OSX • One catch with static publishing: Use swfobject.getObjectById(quot;myIdquot;) to retrieve the active <object>
  48. 48. SWFObject 2.0 and accessibility • Create Flash content (for visitors with the right plug-in/JavaScript support) • Create alternative HTML content (for visitors that don’t have the right support) • Make your Flash content accessible • Make your HTML content accessible
  49. 49. Links This presentation will soon be posted at: http://www.bobbyvandersluis.com SWFObject 2.0: http://code.google.com/p/swfobject/ SWFFix/SWFObject 2.0 dev blog: http://www.swffix.org Flash embedding cage match: http://www.alistapart.com/articles/flashembedcagematch/ Flash Player embed test suite: http://www.swffix.org/testsuite/

×