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 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.....
    http://winkhealth.com http://financewink.com
    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

No notes for slide

SWFObject 2 masterclass

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

    Clipping is a handy way to collect important slides you want to go back to later.