swfobject 2 masterclass
DESCRIPTION
My presentation for the 2008 online conference. Learn how to use SWFObject 2 to embed Adobe Flash content into web pages. This session will discuss all ins and outs, from the most basic hello world example to topics like Full Browser Flash, ActionScript-to-JavaScript communication, alternative content for people without Flash, SEO, Adobe Express Install and hacking around with the new SWFObject 2 JavaScript API.TRANSCRIPT
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/