• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Flash And Dom
 

Flash And Dom

on

  • 6,345 views

Flash and the DOM - how Flash works with browsers, different embed techniques, and Flash JavaScript communication

Flash and the DOM - how Flash works with browsers, different embed techniques, and Flash JavaScript communication

Statistics

Views

Total Views
6,345
Views on SlideShare
6,300
Embed Views
45

Actions

Likes
1
Downloads
43
Comments
0

5 Embeds 45

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

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • Software engineer at SitePen, and one of the founder of the DFW user group Club AJAX. I&#x2019;m an AJAX expert with a lot of experience in HTML, CSS, and Flash as well as a lot of video. I&#x2019;m a dojo committer and have written and maintain several dojo components including the DEFT project that integrates Flash into Dojo AJAX components <br />
  • A very well run, small company with a high customer satisfaction rate. Builds exceptional web apps that other companies have trouble with. Well known in the AJAX/OS community. Makers of the Dojo Toolkit which I&#x2019;ll reference in the presentation <br />
  • Started with HTML and CSS - Used Flash early on with Real Media in HTML and controlled everything via JS - Struggled with the Netscape IE feud - When Netscape died, focused on IE sites - suddenly a client said &#x201C;this doesn&#x2019;t work in FF&#x201D; - starting getting into JS in depth, and discovered AJAX and Open Source - I do AJAX, AS2, AS3, and AIR&#x2026; but not a Flex guy <br />
  • <br />
  • <br />
  • <br />
  • Possibly note the irony of comparing AS and JS while showing the new &#x201C;brands&#x201D; of each product from splash screens and popup windows <br />
  • EcmaScript 2: Harmony <br />
  • <br />
  • <br />
  • Flash can&apos;t do a jsonp call <br /> explain what it is, why it won&apos;t work without eval <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • Note that other AJAX libraries don&#x2019;t have obvious support for SWF embedding <br /> We&#x2019;ll focus on the eponymously named Mike&#x2019;s custom code <br />
  • Good time to mention that &#x201C;Mike&#x2019;s code&#x201D; is not publicly available, but there&#x2019;s a strong chance the concepts will end up in dojo, and an outside chance of it being released as Club AJAX code <br />
  • <br />
  • Technique wouldn&apos;t work in very old browsers like Netscape 6 <br /> Note the root atts ***And duplicate use of ID and name <br /> codebase and plugins page trigger the expressInstall <br /> ie tests for versions, other browser do not and would need custom detectors <br />
  • Note that other AJAX libraries don&#x2019;t have obvious support for SWF embedding <br /> We&#x2019;ll focus on the eponymously named Mike&#x2019;s custom code <br />
  • <br />
  • <br />
  • fscommand required doc.write which was very limiting <br />
  • replacement for fscommand required doc.write which was very limiting <br /> comm bridge between JS and AS <br /> AS makes calls to JS and creates functions in the JS enviro for JS to call (without erroring) <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • Mention Uploader woes <br />
  • The Microsoft thing&#x2026; joke. <br />
  • Silverlight and Microsoft will kill Flash. AJAX will kill Flash. Flash isn&#x2019;t going anywhere. It&#x2019;s achieved incredible market penetration with its plugin, and Adobe continues to deliver on exciting technologies that AJAX apps have to wait years for. While an MS-backed Silverlight does create competition, the winner of that competition will most likely will be developers and users. <br />
  • The web has evolved at a blistering pace. It was only 15 years ago that it was being used for little more than research papers (remember getting drivers off of bulletin boards?), whereas today it is the de-facto application deployment platform. A key enabler of this high rate of evolutionary change is the ability of web developers to understand what others have done in order to achieve a particular outcome and to copy that technique. We have been trained nearly our whole lives to think that copying is bad, but we know at some level that this is how we learn. A web that isn&#x2019;t &#x201C;view source&#x201D;-able isn&#x2019;t &#x201C;the web&#x201D;. We need to come to terms with the long-term costs of lowered productivity and higher incremental costs for any platform that doesn&#x2019;t preserve the &#x201C;view source&#x201D; capability as a default property of the platform. We&#x2019;re all reaping the benefits of decisions made 15 years ago, all the while discussing new technologies that endanger that value chain without a cogent discussion of the costs and benefits. We need to think hard about this. <br />
  • Java-like code creates a barrier of entry - is a move away from ECMAScript which is growing in popularity and is the language that helped Flash grow - shuts out previous Flash non-OO coders - AS3 takes longer to write - WebKit proves that strict typing isn&#x2019;t necessary for speed <br />
  • <br />
  • <br />

Flash And Dom Flash And Dom Presentation Transcript

  • 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
  • © SitePen, Inc. 2009. All Rights Reserved
  • My Flash and JavaScript background © SitePen, Inc. 2009. All Rights Reserved
  • What we will discuss ActionScript & JavaScript similarities and differences The embed & object code ActionScript JavaScript Communication Flash DOM gotchas Future of Flash © SitePen, Inc. 2009. All Rights Reserved
  • I don't need to know about browser issues - because I code in ActionScript! - Mike circa 2002 © 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 different 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
  • ActionScript & JavaScript Similarities and Differences © 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 difference 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 difference 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
  • Embedding the SWF In the meantime, Eolas might sue every last, lousy company in creation © SitePen, Inc. 2009. All Rights Reserved
  • The bare bones embed object <object> <param name=movie value="myMovie.swf"> <embed src="myMovie.swf" /> </object> © 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
  • Dynamic embedding libraries SWFObject dojox.embed.Flash AC_RunActiveContent.js Mike’s custom code © SitePen, Inc. 2009. All Rights Reserved
  • 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> © 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 sniff 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 sniffing 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
  • Getting ActionScript and JavaScript to Talk Mommy! Daddy! Stop ghting! © 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
  • ExternalInterface Examples © 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 difference 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
  • FlashVars Examples © SitePen, Inc. 2009. All Rights Reserved
  • Flash/Browser Gotchas © 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
  • Future of Flash FutureSplash ShockWaveFlash Macromedia Flash Adobe Flash Microsoft Flash © SitePen, Inc. 2009. All Rights Reserved
  • Is Flash Dead? Rumors of my death have been greatly exaggerated. - Paul McCartney © SitePen, Inc. 2009. All Rights Reserved
  • Open Source But then everyone will see my code and steal all of my fantastically incredible ideas! - Mike circa 2002 © SitePen, Inc. 2009. All Rights Reserved
  • HSO: AS3 was a mistake - Mike circa today © SitePen, Inc. 2009. All Rights Reserved
  • Q&A © SitePen, Inc. 2009. All Rights Reserved
  • Thank you! © SitePen, Inc. 2009. All Rights Reserved