Your SlideShare is downloading. ×
SWFObject 2: The fine art of embedding Adobe Flash Player content
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

4,622
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 …

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
4,622
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
48
Comments
2
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Bobby van der Sluis FITC Amsterdam, 26th February 2008
  • 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. Some methods are on the road to nowhere; none of them are optimal
  • 4. The project Geoff Stearns SWFObject Bobby van der Sluis Unobtrusive Flash Objects (UFO) Michael Williams Adobe Flash Player Detection Kit
  • 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. 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. Cross-browser anno 1998
  • 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. Alternative content Content that is accessible to people who browse the web without plugins
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. The Flash Player will attempt to play Flash content, no matter what Flash plugin version that content was published for
  • 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. Adobe Express Install
  • 22. The old way of downloading <embed ... pluginspage=quot;http://www.macromedia.com/ go/getflashplayerquot; />
  • 23. The old way of downloading
  • 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. The old way of downloading
  • 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. 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. Doesn’t Google index Flash content?
  • 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. Strategies to help search engines 1. Use alternative content 2. Use Sitemaps and robots.txt
  • 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. 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. Click-to-activate mechanism
  • 34. Avoiding active content Publish your Flash content with JavaScript
  • 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. 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. SWFObject 2.0 • Static publishing method • Dynamic publishing method • JavaScript API • Only utilizes 1 JavaScript file (9.2 Kb)
  • 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. 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. Static publishing - step 2 <script type=quot;text/javascriptquot; src=quot;swfobject.jsquot;></script>
  • 41. Static publishing - step 3 <script type=quot;text/javascriptquot;> swfobject.registerObject(quot;myIdquot;, quot;9.0.0quot;); </script>
  • 42. Dynamic publishing method Create alternative content using standards compliant markup and embed Flash content with unobtrusive JavaScript
  • 43. Dynamic publishing - step 1 <div id=quot;myIdquot;> <p>Alternative content</p> </div>
  • 44. Dynamic publishing - step 2 <script type=quot;text/javascriptquot; src=quot;swfobject.jsquot;></script>
  • 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. JavaScript API • swfobject.registerObject(...) • swfobject.embedSWF(...) • swfobject.getObjectById(...) • swfobject.getFlashPlayerVersion() • swfobject.hasFlashPlayerVersion(...) • swfobject.addLoadEvent(...) • swfobject.addDomLoadEvent(...) • swfobject.createSWF(...) • swfobject.createCSS(...) • swfobject.getQueryParamValue(...)
  • 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. 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. 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/

×