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

What we will discuss ActionScript & JavaScript similarities and diﬀerences The embed & object code ActionScript JavaScript Communication Flash DOM gotchas Future of Flash © SitePen, Inc. 2009. All Rights Reserved

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 © SitePen, Inc. 2009. All Rights Reserved

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 © SitePen, Inc. 2009. All Rights Reserved

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.) © SitePen, Inc. 2009. All Rights Reserved

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 © SitePen, Inc. 2009. All Rights Reserved

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 © SitePen, Inc. 2009. All Rights Reserved

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 © SitePen, Inc. 2009. All Rights Reserved

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> © SitePen, Inc. 2009. All Rights Reserved

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 © SitePen, Inc. 2009. All Rights Reserved

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 © SitePen, Inc. 2009. All Rights Reserved

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! © SitePen, Inc. 2009. All Rights Reserved

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; © SitePen, Inc. 2009. All Rights Reserved

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>'; © SitePen, Inc. 2009. All Rights Reserved

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 © SitePen, Inc. 2009. All Rights Reserved

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; } © SitePen, Inc. 2009. All Rights Reserved

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 © SitePen, Inc. 2009. All Rights Reserved

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 ) { } }; }); © SitePen, Inc. 2009. All Rights Reserved

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 © SitePen, Inc. 2009. All Rights Reserved

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; © SitePen, Inc. 2009. All Rights Reserved

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. © SitePen, Inc. 2009. All Rights Reserved

http://www.slideshare.net	38
http://localhost	3
http://webcache.googleusercontent.com	1
http://clubajax.org	1

Flash And Dom

by Mike Wilcox

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 43

Statistics

Flash And Dom Presentation Transcript