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.

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

6. SWFObject 2 ZIP file

7. SWFObject 2 Generator
Publishing tool
HTML page
Adobe AIR 1.0 application

9. One solution for everybody

10. Static publishing
HTML to embed SWF content
and alternative content
Unobtrusive JavaScript to resolve
issues

11. 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

12. Static publishing
Embed mechanism doesn’t rely
on JavaScript
Click to activate active content

13. Dynamic publishing
No click-to-activate
Easy to integrate with scripted
applications
6% of your visitors will not have
the required JavaScript support

14. Example 1: Hello World

15. Ingredients
swfobject.js
expressInstall.swf
SWFObject 2 Generator AIR 1.0
test.swf

16. test.swf
300 x 120 px
Flash Player 6
v = $version;
http://code.google.com/p/swfobject/wiki/test_suite

17. Static publishing

21. Dynamic publishing

25. Configuring SWF content

30. Adobe Express Install
Mechanism built into Flash Player
Prompt to update outdated plug-in
Required: Win/Mac and FP6r65+
Optional in SWFObject

34. Alternative content

38. #1:
Translate SWF content into HTML content
that is accessible for people without the required
Flash Player or JavaScript support

39. #2:
Unobtrusive method to point visitors to
the Flash Player download page

40. #3:
Create search engine-friendly content

41. 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

42. The power of HTML content
1. Descriptive
2. Hierarchy
3. Semantics

43. Make sure that your alternative content
truly reflects your Flash content

44. Example 2:
Full Browser Flash

51. 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

52. 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
}

53. Example 3:
JS to AS communication
using External Interface

54. 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

55. The example
JavaScript to ActionScript
To register an AS method as
callable from JS:
addCallback(methodName:String, instance:Object,
method:Function):Boolean

62. Upload your files

65. 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

66. Static publishing
Uses nested objects
Add an ID to your outer object
element only
To reference your active object
element use:
swfobject.getObjectById(objectIdStr)

67. Using the JavaScript API

68. 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

69. 10 methods
swfobject.registerObject(...)
swfobject.getObjectById(...)
swfobject.embedSWF(...)
swfobject.createSWF(...)
swfobject.getFlashPlayerVersion()
swfobject.hasFlashPlayerVersion(...)
swfobject.addLoadEvent(...)
swfobject.addDomLoadEvent(...)
swfobject.createCSS(...)
swfobject.getQueryParamValue(...)

70. Example 4:
Getting Flash Player version

71. getFlashPlayerVersion
Returns a JavaScript object that
contains the major, minor and
release version numbers
MAC 9,0,124,0

72. 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>

73. The result

74. Thank you!

75. http://www.bobbyvandersluis.com/presentations/
http://code.google.com/p/swfobject/