Your SlideShare is downloading. ×
0
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
SWFObject 2 masterclass
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

5,426

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
4 Likes
Statistics
Notes
  • thanq its really good and useful to me in thinking about innovation comes along with think of that.... really good work.... tanq for this.....
    Sharika
    http://winkhealth.com http://financewink.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
5,426
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
64
Comments
1
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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; http://code.google.com/p/swfobject/wiki/test_suite
  • 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 http://livedocs.adobe.com/flash/8/main/00002200.html
  • 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 http://code.google.com/p/swfobject/wiki/api
  • 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. http://www.bobbyvandersluis.com/presentations/ http://code.google.com/p/swfobject/

×