swfobject 2 masterclass

Bobby van der Sluis

Embed SWF files into a Web page

Why SWFObject 2?

Web standardsAlternative contentFlash Player detectionAdobe Express InstallJavaScript APIEasy to use

Officially supported by Adobe

SWFObject 2 ZIP file

SWFObject 2 Generator

Publishing toolHTML pageAdobe AIR 1.0 application

One solution for everybody

Static publishing

HTML to embed SWF content and alternative contentUnobtrusive JavaScript to resolve issues

Dynamic publishing

HTML to define alternative contentUnobtrusive JavaScript to replace this with a SWF when the required Flash Player and JavaScript support is available

Static publishing

Embed mechanism doesn’t rely on JavaScriptClick to activate active content

Dynamic publishing

No click-to-activateEasy to integrate with scripted applications6% of your visitors will not have the required JavaScript support

Example 1: Hello World

Ingredients

swfobject.jsexpressInstall.swfSWFObject 2 Generator AIR 1.0test.swf

test.swf

300 x 120 px

Flash Player 6

v = $version;http://code.google.com/p/swfobject/wiki/test_suite

Static publishing

Dynamic publishing

Configuring SWF content

Adobe Express Install

Mechanism built into Flash PlayerPrompt to update outdated plug-in Required: Win/Mac and FP6r65+Optional in SWFObject

Alternative content

#1:

Translate SWF content into HTML content

that is accessible for people without the required

Flash Player or JavaScript support

#2:

Unobtrusive method to point visitors to

the Flash Player download page

#3:

Create search engine-friendly content

Doesn't Google index SWFs?

Google indexes both alternative and SWF contentNot all search engines index SWF contentSWF indexing is still limited: text and links only

The power of HTML content

1. Descriptive2. Hierarchy3. Semantics

Make sure that your alternative content

truly reflects your Flash content

Example 2:Full Browser Flash

Summarizing

1. 100% width and height 2. Add CSS to get rid of default

margin/padding and set the height of all parent containers for Firefox

Scaling and alignment

Manage from within SWFAlways use a resize handler

stage.scaleMode = StageScaleMode.NO_SCALE;stage.align = StageAlign.TOP_LEFT;

stage.addEventListener(Event.RESIZE, resizeHandler);

function resizeHandler(event:Event):void { // e.g. center stuff}

Example 3:JS to AS communication using External Interface

External Interface

Allows two-way communication between SWF and an HTML page

Flash Player 8+ActionScript 2

http://livedocs.adobe.com/flash/8/main/00002200.html

The example

JavaScript to ActionScriptTo register an AS method as callable from JS:addCallback(methodName:String, instance:Object, method:Function):Boolean

Upload your files

Summarizing

1. Register an AS method as callable from JS

2. Add an ID to your object element3. Call your AS method from JS

Static publishing

Uses nested objectsAdd an ID to your outer object element onlyTo reference your active object element use:swfobject.getObjectById(objectIdStr)

Using the JavaScript API

SWFObject JavaScript API

Focuses on publishing SWFs and detecting Flash Player

Lets developers reuse SWFObject's internal functions

http://code.google.com/p/swfobject/wiki/api

10 methodsswfobject.registerObject(...)swfobject.getObjectById(...)

swfobject.embedSWF(...)swfobject.createSWF(...)

swfobject.getFlashPlayerVersion()swfobject.hasFlashPlayerVersion(...)

swfobject.addLoadEvent(...)swfobject.addDomLoadEvent(...)

swfobject.createCSS(...)

swfobject.getQueryParamValue(...)

Example 4:Getting Flash Player version

getFlashPlayerVersion

Returns a JavaScript object that contains the major, minor and release version numbersMAC 9,0,124,0

The JavaScript code<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript">

var playerVersion = swfobject.getFlashPlayerVersion();

var output = "You have Flash player " +

playerVersion.major + "." +

playerVersion.minor + "." +

playerVersion.release + " installed";

alert(output);

</script>

The result

Thank you!

http://www.bobbyvandersluis.com/presentations/

http://code.google.com/p/swfobject/