Your SlideShare is downloading. ×
SWFObject 2 masterclass
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

SWFObject 2 masterclass


Published on

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 …

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.

Published in: Technology
1 Comment
  • thanq its really good and useful to me in thinking about innovation comes along with think of that.... really good work.... tanq for this.....
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Bobby van der Sluis
  • 2. Embed SWF files into a Web page
  • 3. Why SWFObject 2? Web standards Alternative content Flash Player detection Adobe Express Install JavaScript API Easy to use
  • 4. Officially supported by Adobe
  • 5. SWFObject 2 ZIP file
  • 6. SWFObject 2 Generator Publishing tool HTML page Adobe AIR 1.0 application
  • 7. One solution for everybody
  • 8. Static publishing HTML to embed SWF content and alternative content Unobtrusive JavaScript to resolve issues
  • 9. 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
  • 10. Static publishing Embed mechanism doesn’t rely on JavaScript Click to activate active content
  • 11. Dynamic publishing No click-to-activate Easy to integrate with scripted applications 6% of your visitors will not have the required JavaScript support
  • 12. Example 1: Hello World
  • 13. Ingredients swfobject.js expressInstall.swf SWFObject 2 Generator AIR 1.0 test.swf
  • 14. test.swf 300 x 120 px Flash Player 6 v = $version;
  • 15. Static publishing
  • 16. Dynamic publishing
  • 17. Configuring SWF content
  • 18. Adobe Express Install Mechanism built into Flash Player Prompt to update outdated plug-in Required: Win/Mac and FP6r65+ Optional in SWFObject
  • 19. Alternative content
  • 20. #1: Translate SWF content into HTML content that is accessible for people without the required Flash Player or JavaScript support
  • 21. #2: Unobtrusive method to point visitors to the Flash Player download page
  • 22. #3: Create search engine-friendly content
  • 23. 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
  • 24. The power of HTML content 1. Descriptive 2. Hierarchy 3. Semantics
  • 25. Make sure that your alternative content truly reflects your Flash content
  • 26. Example 2: Full Browser Flash
  • 27. 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
  • 28. 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 }
  • 29. Example 3: JS to AS communication using External Interface
  • 30. External Interface Allows two-way communication between SWF and an HTML page Flash Player 8+ ActionScript 2
  • 31. The example JavaScript to ActionScript To register an AS method as callable from JS: addCallback(methodName:String, instance:Object, method:Function):Boolean
  • 32. Upload your files
  • 33. 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
  • 34. Static publishing Uses nested objects Add an ID to your outer object element only To reference your active object element use: swfobject.getObjectById(objectIdStr)
  • 35. Using the JavaScript API
  • 36. SWFObject JavaScript API Focuses on publishing SWFs and detecting Flash Player Lets developers reuse SWFObject's internal functions
  • 37. 10 methods swfobject.registerObject(...) swfobject.getObjectById(...) swfobject.embedSWF(...) swfobject.createSWF(...) swfobject.getFlashPlayerVersion() swfobject.hasFlashPlayerVersion(...) swfobject.addLoadEvent(...) swfobject.addDomLoadEvent(...) swfobject.createCSS(...) swfobject.getQueryParamValue(...)
  • 38. Example 4: Getting Flash Player version
  • 39. getFlashPlayerVersion Returns a JavaScript object that contains the major, minor and release version numbers MAC 9,0,124,0
  • 40. 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>
  • 41. The result
  • 42. Thank you!
  • 43.