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.
SWFObject 2: The fine art of embedding Adobe Flash Player content
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.
4. Some methods are on the road to nowhere;
none of them are optimal
5. The project
Geoff Stearns
SWFObject
Bobby van der Sluis
Unobtrusive Flash Objects (UFO)
Michael Williams
Adobe Flash Player Detection Kit
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. 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?
9. 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
11. 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
12. 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
13. 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.
14.
15. 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>
18. Why nested objects is better
than twice cooked
• It breaks the cycle of vendor lock-in
• Valid HTML
• The opportunity to use alternative content
19. Markup vs scripting
• Around 98% of the people has Flash Player 8
• Around 5% has no JavaScript support
• Around 1% has poor JavaScript support
20. 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?
21. The Flash Player will attempt to play
Flash content,
no matter what Flash plugin version that
content was published for
22. 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)
28. The modern way of
downloading
• Use alternative content
• Use Adobe Express Install (optional)
• Rely on browser built-in mechanisms (based
on MIME type invocation)
29.
30. 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. 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
33. Strategies to help search
engines
1. Use alternative content
2. Use Sitemaps and robots.txt
34. 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?
35. Active content
• Eolas - Microsoft patent dispute
• A user-unfriendly workaround by Microsoft
and Opera to avoid claims
• Affects Internet Explorer 6+ and Opera 9+
38. 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?
39. 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?
42. 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
53. 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>
54. 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
55. 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/