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

Bobby van der SluisFITC Amsterdam, 26th February 2008

Many Flash embed methods

• Twice cooked

• Embed only

• Flash Satay

• Nested objects (Hixie)

• Adobe Flash Player Detection Kit

• SWFObject

• Unobtrusive Flash Objects (UFO)

• ObjectSwap

• Many, many other scripts...

Some methods are on the road to nowhere;none of them are optimal

Geoff StearnsSWFObject

Bobby van der SluisUnobtrusive Flash Objects (UFO)

Michael WilliamsAdobe Flash Player Detection Kit

The project

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?

8 key questions

Cross-browser anno 1998

Netscape’s <embed>

• Is patented and therefore not a web standard

• Invalid HTML

• Doesn’t support alternative content

Alternative content

Content that is accessible to people who browse the web without plugins

Internet Explorer’s <object>

<param name="movie" value="myContent.swf" /> <p>Alternative content</p>

</object>

• Is a W3C Recommendation

• Supports alternative content

• Is a platform specific implementation

Twice cooked<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="390">

</object>

• Locked into vendor specific code

• No alternative content possible

• This is still the default publishing method of the Flash IDE today

Web standardsoffer 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.

Cross-browser today All modern web browsers support a platform independent implementation of <object><object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="390"> <p>Alternative content</p></object>

Except Microsoft Internet Explorer<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="390">

<param name="movie" value="myContent.swf" /> <p>Alternative content</p>

</object>

Nested objects

<p>Alternative content</p>

</object>

Nested objects - take 2

<p>Alternative content</p></object>

</object>

Why nested objects is better than twice cooked

• It breaks the cycle of vendor lock-in

• Valid HTML

• The opportunity to use alternative content

Markup vs scripting

• Around 98% of the people has Flash Player 8

• Around 5% has no JavaScript support

• Around 1% has poor JavaScript support

8 key questions

The Flash Player will attempt to play Flash content,

no matter what Flash plugin version that content was published for

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)

Adobe Express Install

The old way of downloading

The modern way of downloading

• Use alternative content

• Use Adobe Express Install (optional)

• Rely on browser built-in mechanisms (based on MIME type invocation)

8 key questions

Doesn’t Google index Flash content?

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

Strategies to help search engines

1. Use alternative content

2. Use Sitemaps and robots.txt

8 key questions

Active content

• Eolas - Microsoft patent dispute

• A user-unfriendly workaround by Microsoft and Opera to avoid claims

• Affects Internet Explorer 6+ and Opera 9+

Click-to-activate mechanism

Avoiding active content

Publish your Flash contentwith JavaScript

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?

8 key questions

SWFObject 2.0

• Static publishing method

• Dynamic publishing method

• JavaScript API

• Only utilizes 1 JavaScript file (9.2 Kb)

Static publishing method

Embed Flash content and alternative contentusing standards compliant markup,

and use unobtrusive JavaScript to resolve the issuesthat markup alone cannot solve

Static publishing - step 1

<p>Alternative content</p></object>

</object>

Dynamic publishing method

Create alternative content using standards compliant markup and embed

Flash content with unobtrusive JavaScript

Dynamic publishing - step 1

<div id="myId"> <p>Alternative content</p></div>

JavaScript API

• swfobject.registerObject(...)• swfobject.embedSWF(...)

• swfobject.getObjectById(...)• swfobject.getFlashPlayerVersion()• swfobject.hasFlashPlayerVersion(...)• swfobject.addLoadEvent(...)• swfobject.addDomLoadEvent(...)• swfobject.createSWF(...)• swfobject.createCSS(...)• swfobject.getQueryParamValue(...)

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("myId") to retrieve the active <object>

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

LinksThis 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/

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

Technology

Embedding Content

Embedding employability and encouraging engagement with ...shura.shu.ac.uk/11552/1/Dickinson - Embedding employability.pdf · article analyses different methods for embedding both

Embedding Views

Embedding Entrepreneurship

Agilent De-embedding and Embedding S-Parameter …web.doe.carleton.ca/~nagui/labequip/loadpull/papers/sparams/Agile... · De-embedding and Embedding S-Parameter Networks Using a

Embedding Technology

Embedding BI

Embedding quotations

2010-09-07 - LongTail Video - User Guide for Google ...SWFObject An alternative way to embed via SWFObject is to simply add on the arguments to the flashvars param. Note that there

Embedding Research

Embedding Multimedia

Embedding Culture

Interaction Content Aware Network Embedding via Co-embedding of Nodes and Edges · 2020. 4. 16. · Interaction Content Aware Network Embedding via Co-embedding of Nodes and Edges

Celloidin Embedding

Embedding Quotes

Embedding sustainability

Player Num Fua Player title Player sex Player name Rankfuajedrez.com/Portals/0/Archivos/ELO_DESCENDENTE_FEBRERO_2015.pdf · Player Num Fua Player title Player sex Player name Rank

EmbEdding - Science Servicesscienceservices.de/media/pdf/ScienceServices-Catalogue-Embedding...als in life and material sciences. ... Embedding Capsules and Holders ... The following

Agilent De-embedding and Embedding S-Parameter …anlage.umd.edu/Microwave Measurements for Personal Web Site/5980...De-embedding and Embedding S-Parameter Networks Using a ... ial

Embedding JGit