Download - SWFObject 2 masterclass
![Page 1: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/1.jpg)
Bobby van der Sluis
![Page 2: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/2.jpg)
Embed SWF files into a Web page
![Page 3: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/3.jpg)
Why SWFObject 2?
Web standardsAlternative contentFlash Player detectionAdobe Express InstallJavaScript APIEasy to use
![Page 4: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/4.jpg)
Officially supported by Adobe
![Page 5: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/5.jpg)
![Page 6: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/6.jpg)
SWFObject 2 ZIP file
![Page 7: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/7.jpg)
SWFObject 2 Generator
Publishing toolHTML pageAdobe AIR 1.0 application
![Page 8: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/8.jpg)
![Page 9: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/9.jpg)
One solution for everybody
![Page 10: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/10.jpg)
Static publishing
HTML to embed SWF content and alternative contentUnobtrusive JavaScript to resolve issues
![Page 11: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/11.jpg)
Dynamic publishing
HTML to define alternative contentUnobtrusive JavaScript to replace this with a SWF when the required Flash Player and JavaScript support is available
![Page 12: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/12.jpg)
Static publishing
Embed mechanism doesn’t rely on JavaScriptClick to activate active content
![Page 13: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/13.jpg)
Dynamic publishing
No click-to-activateEasy to integrate with scripted applications6% of your visitors will not have the required JavaScript support
![Page 14: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/14.jpg)
Example 1: Hello World
![Page 15: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/15.jpg)
Ingredients
swfobject.jsexpressInstall.swfSWFObject 2 Generator AIR 1.0test.swf
![Page 16: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/16.jpg)
test.swf
300 x 120 px
Flash Player 6
v = $version;http://code.google.com/p/swfobject/wiki/test_suite
![Page 17: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/17.jpg)
Static publishing
![Page 18: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/18.jpg)
![Page 19: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/19.jpg)
![Page 20: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/20.jpg)
![Page 21: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/21.jpg)
Dynamic publishing
![Page 22: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/22.jpg)
![Page 23: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/23.jpg)
![Page 24: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/24.jpg)
![Page 25: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/25.jpg)
Configuring SWF content
![Page 26: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/26.jpg)
![Page 27: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/27.jpg)
![Page 28: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/28.jpg)
![Page 29: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/29.jpg)
![Page 30: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/30.jpg)
Adobe Express Install
Mechanism built into Flash PlayerPrompt to update outdated plug-in Required: Win/Mac and FP6r65+Optional in SWFObject
![Page 31: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/31.jpg)
![Page 32: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/32.jpg)
![Page 33: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/33.jpg)
![Page 34: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/34.jpg)
Alternative content
![Page 35: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/35.jpg)
![Page 36: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/36.jpg)
![Page 37: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/37.jpg)
![Page 38: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/38.jpg)
#1:
Translate SWF content into HTML content
that is accessible for people without the required
Flash Player or JavaScript support
![Page 39: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/39.jpg)
#2:
Unobtrusive method to point visitors to
the Flash Player download page
![Page 40: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/40.jpg)
#3:
Create search engine-friendly content
![Page 41: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/41.jpg)
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
![Page 42: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/42.jpg)
The power of HTML content
1. Descriptive2. Hierarchy3. Semantics
![Page 43: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/43.jpg)
Make sure that your alternative content
truly reflects your Flash content
![Page 44: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/44.jpg)
Example 2:Full Browser Flash
![Page 45: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/45.jpg)
![Page 46: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/46.jpg)
![Page 47: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/47.jpg)
![Page 48: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/48.jpg)
![Page 49: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/49.jpg)
![Page 50: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/50.jpg)
![Page 51: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/51.jpg)
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
![Page 52: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/52.jpg)
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}
![Page 53: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/53.jpg)
Example 3:JS to AS communication using External Interface
![Page 54: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/54.jpg)
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
![Page 55: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/55.jpg)
The example
JavaScript to ActionScriptTo register an AS method as callable from JS:addCallback(methodName:String, instance:Object, method:Function):Boolean
![Page 56: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/56.jpg)
![Page 57: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/57.jpg)
![Page 58: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/58.jpg)
![Page 59: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/59.jpg)
![Page 60: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/60.jpg)
![Page 61: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/61.jpg)
![Page 62: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/62.jpg)
Upload your files
![Page 63: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/63.jpg)
![Page 64: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/64.jpg)
![Page 65: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/65.jpg)
Summarizing
1. Register an AS method as callable from JS
2. Add an ID to your object element3. Call your AS method from JS
![Page 66: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/66.jpg)
Static publishing
Uses nested objectsAdd an ID to your outer object element onlyTo reference your active object element use:swfobject.getObjectById(objectIdStr)
![Page 67: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/67.jpg)
Using the JavaScript API
![Page 68: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/68.jpg)
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
![Page 69: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/69.jpg)
10 methodsswfobject.registerObject(...)swfobject.getObjectById(...)
swfobject.embedSWF(...)swfobject.createSWF(...)
swfobject.getFlashPlayerVersion()swfobject.hasFlashPlayerVersion(...)
swfobject.addLoadEvent(...)swfobject.addDomLoadEvent(...)
swfobject.createCSS(...)
swfobject.getQueryParamValue(...)
![Page 70: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/70.jpg)
Example 4:Getting Flash Player version
![Page 71: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/71.jpg)
getFlashPlayerVersion
Returns a JavaScript object that contains the major, minor and release version numbersMAC 9,0,124,0
![Page 72: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/72.jpg)
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>
![Page 73: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/73.jpg)
The result
![Page 74: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/74.jpg)
Thank you!
![Page 75: SWFObject 2 masterclass](https://reader034.vdocuments.us/reader034/viewer/2022052619/555e2848d8b42a384f8b50a6/html5/thumbnails/75.jpg)
http://www.bobbyvandersluis.com/presentations/
http://code.google.com/p/swfobject/