Flash And Dom

Flash and the DOM
Why you still need to know JavaScript

*not* AIR and AJAX !

by Mike Wilcox
mwilcox@sitepen.com
Twitter: #clubajax
http://clubajax.org

Mike

© SitePen, Inc. 2009. All Rights Reserved

My Flash and JavaScript
background


What we will discuss
ActionScript & JavaScript similarities and diﬀerences
The embed & object code
ActionScript JavaScript Communication
Flash DOM gotchas
Future of Flash


I don't need to know about browser issues -
because I code in ActionScript!
- Mike circa 2002


Flash in the browser
You're still at the mercy of the container (the browser)
IE, Firefox, Safari (WebKit) all have diﬀerent problems
implementing the Flash plugin
There may come a time when the customer wants that
full-page Flex app to interact with their existing HTML
code


ActionScript & JavaScript
Similarities and Diﬀerences


Language Similarities
Both based on the ECMAScript standard
AS1 and JavaScript very similar
AS2 still similar but with classes and packages
AS3 actually more like Java with closures
AS3 based on early ECMAScript 2 which has since
changed

Key diﬀerence is Document and Stage, MovieClips and
DOM Nodes


ActionScript & JavaScript
Both scripting languages
SWF compiler combines scripts, removes whitespace and
comments, mini es variables, turns it into bytecode, and
compresses.
AJAX build tools combine scripts, remove whitespace and
comments, minify the variables. The end result is then
compressed using GZIP on the server.

Key diﬀerence is the SWF wrapper holds all media
(images, sounds, etc.)


SWF and HTML both stream
Actually both are progressive download
SWF compilers assemble the pieces so that elements can
display and run when enough data has downloaded
HTML page streams line by line and executes or displays


Web APIs / Web Services
JavaScript: XHR and JSONP
XHR (XmlHttpRequest) has cross domain issues
eval sends a string to the JavaScript engine to be
interpreted
eval(“alert(1 + 2);”); // alerts 3

Flash: XML & Remoting
XML is heavy on the wire
Remoting needs a server that handles it

crossdomain.xml - newer browsers are supporting this

Embedding the SWF
In the meantime, Eolas might sue every last,
lousy company in creation


The bare bones embed object

<object>
<param name=movie value="myMovie.swf">
<embed src="myMovie.swf" />
</object>


object vs. embed
object for IE
object node has attributes
object has child nodes with more attributes
embed for everyone else
No child attributes
Can be a child of the object node


A more typical embed object
<object width="480" height="270" align="middle"
codebase="http://download.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=9,0,0,0" classid="clsid:d27cdb6e-
ae6d-11cf-96b8-444553540000" name="my__player" id="my__player">

<param value="always" name="allowScriptAccess"/>

<param value="true" name="allowFullScreen"/>

<param value="http://flash.local/my__player.swf?
prefsfile=http://flash.local/xml/prefs_skunk.xml" name="movie"/>

<param value="my_movie" name="name"/>

<param value="my_movie" name="id"/>

<param value="high" name="quality"/>

<param value="#ffffff" name="bgcolor"/>

<embed width="480" height="270" align="middle"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" allowfullscreen="true"
allowscriptaccess="always" name="my__player" bgcolor="#ffffff"
quality="high" src="http://flash.local/my__player.swf?
prefsfile=http://flash.local/xml/prefs_skunk.xml"/>
</object>


Attributing Attributes - object
Root attributes
width, height, align, codebase, classid, name, id

Child attributes - passed to the player once it is started.
allowScriptAccess, allowFullScreen, movie (src), wmode,
swLiveConnect


Attributing Attributes - embed
Can be a root node or child of object node
As a child, browser determine whther to ignore the
embed tags or the object tags

No embed child nodes
Root attributes
width, height, align, name, id, allowScriptAccess,
allowFullScreen, src, wmode, pluginspage, type,
swLiveConnect


Solution: Dynamic embedding
With thanks to that damn Eolas
More control over the myriad attributes
Better reusability
Most attributes can be preset
Sets up ExternalInterface for you
Fires events for SWF readiness
Bonus: SEO!


Dynamic embedding libraries
SWFObject
dojox.embed.Flash
AC_RunActiveContent.js
Mike’s custom code


Mike’s custom code example
<body>

<div align=center>

<script src="mike.js" id="MIKE"

config="swf=my_player,width=480,height=270" >

</script>

</div>
</body>


Mike’s custom code highlights
// find where this script is attached in the dom
var snode;
var scripts = document.getElementsByTagName("script");
for (var i = 0; i < scripts.length; i++) {

if (scripts[i].id && scripts[i].id == "MIKE") {

snode = scripts[i];

break;

}
}

// Get the variables from the config attribute in the script
var configStr = snode.getAttribute("config");
var attrs = convertToAttributes(configStr);

// The parent node of the script is where we insert the SWF
playerdiv = snode.parentNode;
playerdiv.style.width = flashArgs.width;
playerdiv.style.height = flashArgs.height;


Mike’s custom code the embed object
var str = '<object id="'+args.id+'" name="'+args.id+'" '

+ 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" '

+ 'codebase="http://download.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=9,0,0,0" '

+ 'width="'+args.width+'" height="'+args.height+'">'

+ '<param name="allowScriptAccess" value="'+args.asa+'" />'

+ '<param name="allowFullScreen" value="'+args.fs+'" />'

+ '<param name="movie" value="'+args.id+'" />'

+ '<param name="name" value="'+args.src+'" />'

+ '<param name="id" value="'+args.id+'" />'

+ '<param name="wmode" value="'+args.wmode+'" />'

+ '<embed src="'+args.src+'" '

+ 'width="'+args.width+'" height="'+args.height+'" '

+ 'name="'+args.id+'" '

+ 'allowScriptAccess="'+args.asa+'" '

+ 'allowFullScreen="'+args.fs+'" '

+ 'wmode="'+args.wmode+'" '

+ 'type="application/x-shockwave-flash" '

+ 'pluginspage="http://www.macromedia.com/go/
getflashplayer" />'
+ '</object>';


embed and object in the same doc?
Most libraries do a browser sniﬀ and only use one or the
other
In my opinion this is unnecessary because:
Modern browsers elegantly ignore the other tag
No bytes on the wire saved
The dynamic code base is more complex
The browser sniﬃng is what adds bytes on the wire and
execution time to for parsing

You lose the ability for the YouTube embed


Getting that movie
var swfById = function (movieName){

if(document.embeds[movieName]){

return document.embeds[movieName];

}

if(document[movieName]){

return doc[movieName];

}

if(window[movieName]){

return window[movieName];

}

if(document[movieName]){

return document[movieName];

}

return null;
}


Getting ActionScript and
JavaScript to Talk
Mommy! Daddy! Stop ghting!


AS / JS Communication
ExternalInterface
FlashVars
GetVariable/SetVariable
Largely deprecated for AS3

Movie properties
Primarily PercentLoaded

fscommand
Complete with VB Script! Which thankfully died a bloody
death

ExternalInterface
Introduced in Flash 8 after years of abusive punishment
to devs, forcing them to use the fscommand
And then the Flash 8 EI was coded by drunken sailors
Flash 9 EI much better
But you still have craziness like this patch:

window.attachEvent('onunload', function() {

window.__flash__removeCallback = function (instance, name) {

try {

if (instance) instance[name] = null;

} catch ( err ) { }

};
});


ExternalInterface Examples


FlashVars
FlashVars attribute introduced in Flash 6 although the
query string was used before that and there’s little
diﬀerence
No complex objects without serialization - similar to
sephiroth library
Examples of the need for FlashVars:
Dynamic creation, as in the Dojo FileUploader
URLs to connect to


FlashVars
<object>

<param name=movie value="myMovie.swf">

<param name=FlashVars value="user=Mike&score=1000">

<embed src="myMovie.swf" FlashVars="user=Mike&score=1000" />
</object>

or

<object>

<param name=movie value="myMovie.swf?user=Mike&score=1000">

<embed src="myMovie.swf?user=Mike&score=1000" />
</object>

// accessed in AS2 in _root:
_root.user

// accessed in AS3:
var params = LoaderInfo(this.root.loaderInfo).parameters;
params.user;


FlashVars Examples


Flash/Browser Gotchas


Flash/Browser Gotchas
Flash will not initialize in a node with display=”none”
DOM must be "ready" before the SWF can be inserted in
node - using window.onload (or something better)
Watch IE6 & IE7 Memory leaks - especially when using the
ExternalInterface
Detecting Mouse Events outside of SWF
TabIndex between a SWF and HTML is non-existent
You've heard those stories of bad Java applet
implementations? Flash isn't a whole lot better.


Future of Flash
FutureSplash
ShockWaveFlash
Macromedia Flash
Adobe Flash
Microsoft Flash


Is Flash Dead?
Rumors of my death have been greatly
exaggerated.
- Paul McCartney


Open Source
But then everyone will see my code and steal all
of my fantastically incredible ideas!
- Mike circa 2002


HSO: AS3 was a mistake
- Mike circa today


Q&A


Thank you!


Flash And Dom

Recommended

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Flash And Dom (20)

More from Mike Wilcox (20)

Recently uploaded (20)

Flash And Dom

Editor's Notes