SWFObject 2 masterclass

Bobby van der Sluis

Embed SWF ﬁles into a Web page

Why SWFObject 2? Web standards Alternative content Flash Player detection Adobe Express Install JavaScript API Easy to use

Ofﬁcially supported by Adobe

SWFObject 2 ZIP file

SWFObject 2 Generator Publishing tool HTML page Adobe AIR 1.0 application

One solution for everybody

Static publishing HTML to embed SWF content and alternative content Unobtrusive JavaScript to resolve issues

Dynamic publishing HTML to define alternative content Unobtrusive 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 JavaScript Click to activate active content

Dynamic publishing No click-to-activate Easy to integrate with scripted applications 6% of your visitors will not have the required JavaScript support

Example 1: Hello World

Ingredients swfobject.js expressInstall.swf SWFObject 2 Generator AIR 1.0 test.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 Player Prompt 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 content Not all search engines index SWF content SWF indexing is still limited: text and links only

The power of HTML content 1. Descriptive 2. Hierarchy 3. Semantics

Make sure that your alternative content truly reﬂects 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 SWF Always 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 ActionScript To register an AS method as callable from JS: addCallback(methodName:String, instance:Object, method:Function):Boolean

Upload your ﬁles

Summarizing 1. Register an AS method as callable from JS 2. Add an ID to your object element 3. Call your AS method from JS

Static publishing Uses nested objects Add an ID to your outer object element only To 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 methods swfobject.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 numbers MAC 9,0,124,0

The JavaScript code <script type=quot;text/javascriptquot; src=quot;swfobject.jsquot;></script> <script type=quot;text/javascriptquot;> var playerVersion = swfobject.getFlashPlayerVersion(); var output = quot;You have Flash player quot; + playerVersion.major + quot;.quot; + playerVersion.minor + quot;.quot; + playerVersion.release + quot; installedquot;; alert(output); </script>

The result

Thank you!

http://www.bobbyvandersluis.com/presentations/ http://code.google.com/p/swfobject/

http://www.bobbyvandersluis.com	367
http://www.slideshare.net	44
file://	6
http://translate.googleusercontent.com	3

SWFObject 2 masterclass

by Bobby van der Sluis

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 420

Statistics