Jump to content

Randall last won the day on May 11 2014

Randall had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Randall

  1. Briliant. Thank you. This is what I was looking for. And I'm always in favor of a wrapper method. I was previously approaching it from a non-class perspective and simply trying to see if 'something' was undefined or not. Also, I was making the assumption that once a class was detected that it is also immediately ready for use because it was immediately invoked.
  2. What is the most reliable and efficient way to detect if EasePack JS file was already loaded elsewhere on the page and is available (in an effort to prevent loading it again)? [EDIT: also, detecting if the various plugins were loaded too would be helpful]
  3. Scenario: An element was hidden with jQuery's hide() method and then later it is tweened in using fromTo (0 to 1) using autoAlpha or alpha. Nagging Issue: Since alpha tweening is so common along with jQuery hiding/showing various elements, it would be ideal for the tweening logic to 'catch' the fact that a given element is hidden in the fashion that jQuery hide() produces across all browsers, thus alleviating a line or two of code to show/hide before and after the tween. In addition, sometimes there are flickers/glitches with the start of a tween if the jQuery show() is called just prior to the tween that animates from alpha=0 to alpha>0 value. Is this possible to overcome with other tween parameter options or would this be a feature request? Incorporate auto-checking for hidden elements and adjust them to be 'shown' before tween starts and then adjust them back to 'hidden' at the end of the tween? Example: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>jQuery hide with Tweening Alpha Example</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="TweenMax.min.js"></script> </head> <body> <div id="box" style="position:absolute; width:400px; height:300px; overflow:hidden; background-color:#666666;"></div> <script> $(document).ready(function(e) { $('#box').hide(); setTimeout(someDelayedTween, 1000); }); function someDelayedTween(){ // uncomment this line below to unhide prior to tween // $('#box').css('display', 'block'); // calling jQuery show() periodically causes flicker/glitches at start of tween //$('#box').show(); // try to tween fromTo with alpha TweenMax.fromTo($('#box'), 1, {css:{alpha:0}}, {css:{alpha:1}}); // try to tween fromTo with autoAlpha // TweenMax.fromTo($('#box'), 1, {css:{autoAlpha:0}}, {css:{autoAlpha:1}}); // would be nice if the tween itself handled the hidden part behind the scenes } </script> </body> </html>
  4. Also, another integration would be placing your "need to load" asset file paths into a main array and then loop through that array and load that type of item. They could be images or other files like jQuery AJAX calls to web services, XML, JSON, etc. Then you simply iterate through that loading array of assets and simultaneously check the position of the current asset being loaded in which to drive a progress bar or increment some other visual element until the max length of the loading array is reached. It's not perfect but it does provide some sense of progress other than a looping animated GIF image. So if you have 47 images, 2 xml files and a 1 JSON AJAX web services request, you have 50 total 'assets' to load and each 'array index' that is being loaded is therefore equivalent to a factor of 2 on a progress bar from 0 to 100. Just remember to have a 'complete' or 'success' event fire off after loading each asset item in the array so that you can increment to the next asset to load and simultaneously update the progress bar. var assetsToLoadArray = [ 'image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', //.. and so on up to 47 images... 'setup.xml', 'configuration.xml', 'http://www.somedomain.com/api/getJSONData?id=1234' ]; var totalAssets = assetsToLoadArray.length; // 50 total assets var currentAsset = 0; // refers to the first index in the array to load var progressFactor = Math.round(100 / totalAssets); // equals 2 function someLoadLoopCode(){ // loop code to iterate and load each asset by extension/file type // do a string search on each asset to load and find it's file type // and perform the appropriate conditional 'if' below // if .jpg use the new Image(); and its onload callback event // if .xml use jQuery AJAX and its success callback event // if http:// use jQuery AJAX and its complete event // each 'if' above would result in calling loadNextAsset() // to keep the iteration through all of the assets in the array } // need a function that is called for the load finished callback events function loadNextAsset(){ currentAsset++; setProgress(); if(currentAsset == (totalAssets - 1)){// check to see if on last item // all items loaded // do final callback or other code once all assets loaded }else{ // load next item code someLoadLoopCode(); } } function setProgress(){ var progress = Math.round(currentAsset * progressFactor); if(progress > 100){ progress = 100; }else if(progress < 0){ progress = 0; } // code here to set the progress to its visual element or text, etc. }
  5. There's a few tips/tricks here http://forums.greens...dant-functions/ - it's speaking with regards to navigation, but the same principles apply for 'tracking' what's been clicked and preventing additional clicks until stuff is finished tweening.
  6. Also, an additional advanced technique is to simultaneously size/move the parent div (need CSS overflow:hidden) while moving the nested div (holding all the elements) on the x/y (left/top) axis. Doing this with a little clever x/y width/height math offset tricks will essentially achieve any masking for any NSEW (north south east or west) direction. A minimalist example follows below. I would presume diagonal masking could also be achieved by rotation of the parent and/or nested elements using some additional positional and sizing tricks. masking.zip <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Masking Example</title> <script src="TweenMax.min.js"></script> </head> <body> <div id="parent" style="position:absolute; width:500px; height:300px; overflow:hidden; background-color:#666;"> <div id="child" style="position:absolute; width:300px; height:150px; overflow:hidden; background-color:#CCC;"></div> </div> <script> function $(id){return document.getElementById(id);} // mask reveal from left to right (default simple) TweenMax.fromTo($('parent'), 2, {css:{width:0}}, {css:{width:400}}); // mask reveal from top to bottom (default simple) //TweenMax.fromTo($('parent'), 2, {css:{height:0}}, {css:{height:300}}); // mask reveal from right to left (more complex) - must tween child offset //TweenMax.fromTo($('parent'), 2, {css:{width:0, x:400}}, {css:{width:400, x:0}}); // TweenMax.fromTo($('child'), 2, {css:{x:-400}}, {css:{x:0}}); // mask reveal from bottom to top (more complex) - must tween child offset //TweenMax.fromTo($('parent'), 2, {css:{height:0, y:300}}, {css:{height:300, y:0}}); // TweenMax.fromTo($('child'), 2, {css:{y:-300}}, {css:{y:0}}); </script> </body> </html> I've actually been working on a JavaScript masking display object class that objectizes the parent and child offsets for simple directional masking. The complex animated masking on the other hand is far more daunting in HTML/CSS/JavaScript. I suspect a plugin type solution could be devised for simple two-tiered masking approaches (parent mask container and 1 child container holding all of the other elements), but doing multiple nested masking past the 2nd level makes my head hurt.
  7. This should work: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Rotation Example</title> <script src="TweenMax.min.js"></script> </head> <body> <div id="box" style="position:absolute; width:400px; height:300px; overflow:hidden; background-color:#666666;"></div> <script> function $(id){return document.getElementById(id);} TweenMax.to($('box'), 3, {css:{rotation:360}}); </script> </body> </html>
  8. Quick side note... visit http://tools.pingdom.com/fpt/ and test the load time and check out the results. It gives a score of zero for leveraging browser caching. Once you get this caching aspect addressed you'll likely see diminished issues on reload/refreshes. Also, putting all of your javascripts before the </body> tag will also ensure a bit of latency on init() is resolved, though that can have some adverse affects to the page depending on styles/html, etc. - it's easy to work around those oddities though. With .htaccess, if supported on your server, you can specify the various headers and module caching stuff for specific file types and other things that can help with this sort of issue. // .htaccess code for caching and gzipping // (typical setup but you should customize to your server) <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 month" ExpiresByType image/jpeg "access 1 month" ExpiresByType image/gif "access 1 month" ExpiresByType image/png "access 1 month" ExpiresByType text/css "access 2 days" ExpiresByType application/pdf "access 30 days" ExpiresByType text/x-javascript "access 2 days" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 3 days" </IfModule> <IfModule mod_headers.c> <FilesMatch "\.(js|css|xml|gz)$"> Header append Vary Accept-Encoding </FilesMatch> </IfModule>
  9. Yeah, thanks, I've been using the free software Inkscape http://inkscape.org/ to experiment with creating SVG graphics. Being that .svg files are pure XML, they can be sent GZipped from the server and are extremely small in file size compared to PNG/JPG, while providing scalable crisp vector output and clean edges to shapes and text. With canvas and SVG, we are getting much closer to simulating Flash-like animations with shapes and images.
  10. Simple HTML5 example that tweens embedded SVG graphics. tween_svg_example.zip <embed id="svgBoard" src="board.svg" type="image/svg+xml" style="position:absolute; left:0px; top:0px; width:727px; height:501px;" /> <embed id="svgPeopleRight" src="people_right.svg" type="image/svg+xml" style="position:absolute; left:0px; top:0px; width:727px; height:501px;" /> <embed id="svgPeopleLeft" src="people_left.svg" type="image/svg+xml" style="position:absolute; left:0px; top:0px; width:727px; height:501px;" /> <embed id="svgText" src="text.svg" type="image/svg+xml" style="position:absolute; left:0px; top:0px; width:727px; height:501px;" /> <script> function $(id){ return document.getElementById(id); } TweenMax.from( $('svgBoard'), 2, { delay:1, css:{top:-300}, ease:Expo.easeInOut } ); TweenMax.from( $('svgPeopleRight'), 1, { delay:2, css:{autoAlpha:0} } ); TweenMax.from( $('svgPeopleLeft'), 2, { delay:3, css:{left:-350}, ease:Strong.easeOut } ); TweenMax.from( $('svgText'), 2, { delay:5, css:{autoAlpha:0} } ); </script>
  11. Like we used to do with AS3, it works equally well in JavaScript. All you do is preload the images into an array of image objects (in sequential order) and then access those images in the array sequentially via a timer or update type of event handler. Even mouse move events can control the position of the array image that is shown thus allow for interesting control of the image sequence animations. You could also use jQuery and/or Greensock JS or regular old school JS to swap images out (or cycle through the images in any number of ways with CSS and HTML/JS) to essentially play the array of images in a simulated 'movieclip' or 'sequence'. The interval between "showing" the images equates to your frames per second, like a 100ms timer would equate to roughly 10fps. dynamic_image_sequence.zip One way I like to do this is preload all of the images and contain the visible image inside a <div> tag and then swap them with an interval timeout that fires off showing the next image in the array while hiding the currently shown image, thus giving the illusion of a pseudo-sequence/movieclip. It's old school, but very reliable and rather simple as shown in my minimalist example ZIP above.
  12. Randall

    Tween Nano

    Interesting, does concatenation affect the caching on any measurable level? I've noticed that according to http://tools.pingdom.com/fpt/ that a score is much lower when loading a lot of files with the same file type like CSS, JS, etc. and it suggest combining them, but with large frameworks, combining all of the JS and CSS is really not ideal at all and quite the hassle if done manually or even macro-manually.
  13. Randall

    Tween Nano

    After chewing on this discussion for a while, I've moved towards the idea of simply having the flexibility to include any additional specific plugins beyond the base GSAP, which effectively gives us 'nano-like' control of total file sizes by virtue of what we choose to include or not. In that respect, the main issue would likely be any code that potentially references missing plugins and how the GSAP will respond. And that code we write could/should check for the existence of any missing plugin dependencies before any animations are started. Example of a dependency where TweenLite and TimelineLite (with CSSPlugin) would be required for a particular GSAP animation routine. // conditionals would ideally be wrapped in // recursive logic for checks/tests/loading if( TweenLite == undefined || TimelineLite == undefined ){ // we'd better load the GSAP stuff since // it's not available on the page at this moment... // perhaps registering somewhere else that we're loading // GSAP so other scripts wait for it instead of trying to load it }else{ if( CSSPlugin == undefined ){ // logic for missing plugin (either load it or wait until // it's loaded if already queued in another loader... or // registered it somewhere else as currently being loaded // and then wait for it to be available, forcing other scripts // on the page to wait as well instead of loading it) }else{ // if we get this far, then all is well and we // can now animate without issues } } With the scenario of centrally hosting the GSAP pieces and parts somewhere, if more elements on a given page (think rich media banners) reference GSAP and its various plugins, it would be great to construct our code to check for the existence of any required plugins (missing or already loaded/available) to determine if anything should be loaded prior to animation. The goal is to prevent near-simultaneous loading of the same plugin per page, if possible, which brings up the idea that I have used where instituting a ‘registration of loading dependency method’ where other scripts can check/test against the base framework if any given plugin is ‘registered’ to be loaded, and if not, ‘register’ that a particular plugin is being loaded so that other scripts merely stand by and wait for it to be available. It's all a bit tricky because if the base framework isn't loaded yet, the scripts somewhere have to load GSAP somehow without loading it more than once and keeping track of all those requests from various entrance points becomes a nightmare when factoring in human error. Then again, maybe this is all just way too much work and over complicated if we don't really care if multiple requests to load pieces and parts of GSAP are happening all the time without care and without regard.
  14. I believe that's possible by 'scrubbing' a Timeline forward and backward based on the vertical scroll of the page. The trick is to match up the offset of the vertical scroll to the total frames of the Timeline to get the increments for forward and backward.
  15. Oh yeah, I see that now. Oh how I dislike the IE browser. I keep forgetting you have those internal checks going on along with the workarounds. Great tip on the set() method, thank you!
  16. Here's another example where a banner element pops out (pseudo expanded) on the page. Same login info (see above). http://www.rhaws.com...ners/PUFFS.html TWEEN CODE SNIPPET: //Note: jb var holds the main banner code and setup stuff // ids in array point to the PNG image sequence for the character animation jb.chars = [ci1,ci2,ci3,ci4,ci5,ci6,ci7,ci8,ci9, ci10,ci12,ci11,ci10,ci11,ci12,ci13,ci14,ci15, ci14,ci15,ci14,ci15,ci16,ci17,ci18 ];; function initCharacter(){ jb.$(jb.chars[jb.cFrame]).style.opacity = '0'; jb.startCharacter(); } jb.ti = ti; // special scope var for tissue image reference jb.cFrame = 1; jb.mFrame = jb.chars.length; jb.startCharacter = function(){ jb.$(jb.chars[(jb.cFrame - 1)]).style.opacity = '0'; // hide previous frame jb.cFrame++; // increment PNG sequence frame number if(jb.cFrame == 6){ // special frame bookmark to time tissue removal below // remove tissue from box to match PNG sequence frame image TweenLite.to(jb.$(jb.ti), 0.05, {css:{y:'+22'}}); } if(jb.cFrame <= jb.mFrame){ if(jb.cFrame != jb.mFrame){ jb.$(jb.chars[(jb.cFrame - 1)]).style.opacity = '1'; // show current frame setTimeout('jb.startCharacter()', 88); }else{ //end animation jb.$(jb.chars[(jb.cFrame - 1)]).style.opacity = '1'; // show current frame // put tissue back in box TweenLite.to(jb.$(jb.ti), 0.3, {delay:0.3, css:{y:'-1'}}); } } } // ids below use same metho as previous example in this thread; jQuery-like wrapper var T = new TimelineLite(); // a linear approach to the chain T.from(jb.$(bc), 0.5, {css:{alpha:0}}) .from(jb.$(lc), 0.5, {css:{alpha:0, y:-80}}) .from(jb.$(bi), 0.4, {css:{alpha:0, x:310}}) .from(jb.$(ti), 0.2, {css:{alpha:0, y:'+22'}}) .from(jb.$(ci1), 0.5, {css:{x:-100}}) .from(jb.$(tx1), 0.5, {css:{alpha:0}, onComplete:initCharacter}) .from(jb.$(tx2), 0.5, {delay:1, css:{alpha:0}}) // tag text with delay .from(jb.$(btn), 0.5, {css:{alpha:0, y:601}})// ending click button ;// end T chain Note, the size of this banner example could be reduced by another 150k by chopping up the character to arms, body, head, legs and so on and then animating them independently with joint-type effects. For example purposes, a PNG sequence is used to make the animation effect where this example has a total of 18 rendered PNG frames and thus that is why the total file size is larger.
  17. Awesome. I can finally start transitioning from that bloated jQuery scroll stuff.
  18. I took a look at this just now too. The only thing that comes to my mind is that a coder who uses software that "designs websites without writing code" will be as equally frustrated as the designer who uses software that "codes websites without designing." A lot of programs that attempt to be both "left- and right-brained" so designers can avoid development and developers can avoid designing are just plain instrinsically flawed beneath the surface despite appearing to be quite superficially flawless.
  19. AND the original Flash version of that GM banner was a whopping ~3.75Mb across 12 dynamically loaded SWF files. The HTML banner version is only around ~683k and took just 6 hours to convert from its original Flash 8 AS2 FLA. "Greensock sweetness..." - best quote of the day heyitsjayy
  20. Below is another example of an expandable all-HTML banner that uses GSAP for all animations/interactivity. Note that jQuery is NOT being used here, thus saving a lot of kb. Instead, we use a jQuery-like wrapper function nested in a class for a similar syntax on selecting elements. http://www.rhaws.com/banners/GM.html [user=rhaws pass=guest] And here's the code snippet for just the animation portion using GSAP for this example: // dynamically create unique selector IDs to ensure they never pose a conflict on the page var X = 'gm__', // set prefix for all id selectors Z = new Date().getTime(), sc = X + ++Z, v1 = X + ++Z, v1T = X + ++Z, v2 = X + ++Z, v2T = X + ++Z, v3 = X + ++Z, v3T = X + ++Z, v4 = X + ++Z, v4T = X + ++Z, Lg = X + ++Z, LgT = X + ++Z, Fc = X + ++Z ;// end vars declaration chain /* code removed that creates DIV elements for all of the vars above that are tweened below */ function jQueryWrapper(){ // public method exposed similar syntax to jQuery id only selector (no # sign needed) this.$ = function(selector){ var doc = window.document; return doc.getElementById(selector); }; } // create new instance of jQuery-like selector wrapper function var _$ = new jQueryWrapper(); // separate tween on the main container background to scroll it upwards TweenLite.to(_$.$(sc), 9, {css:{backgroundPosition:'0px -130px'}}); // a linear approach to the seq chain - not dynamic or 'smart', just for example purposes var T = new TimelineLite(); T.from(_$.$(v1), 0.5, {css:{alpha:0}}) .from(_$.$(v1T), 0.2, {css:{alpha:0, left:'-220px'}}) .to(_$.$(v1), 0.5, {delay:1.5,css:{alpha:0}}) // delay here creates the pause between frames .to(_$.$(v1T), 0.2, {css:{alpha:0, top:'260px'}}) .from(_$.$(v2), 0.5, {css:{alpha:0}}) .from(_$.$(v2T), 0.2, {css:{alpha:0, left:'-220px'}}) .to(_$.$(v2), 0.5, {delay:1.6,css:{alpha:0}}) // delay here creates the pause between frames .to(_$.$(v2T), 0.2, {css:{alpha:0, top:'260px'}}) .from(_$.$(v3), 0.5, {css:{alpha:0}}) .from(_$.$(v3T), 0.2, {css:{alpha:0, left:'-220px'}}) .to(_$.$(v3), 0.5, {delay:1.7,css:{alpha:0}}) // delay here creates the pause between frames .to(_$.$(v3T), 0.2, {css:{alpha:0, top:'260px'}}) .from(_$.$(v4), 0.5, {css:{alpha:0}}) .from(_$.$(v4T), 0.2, {css:{alpha:0, left:'-220px'}}) .to(_$.$(v4), 0.7, {delay:1.8,css:{alpha:0}}) // delay here creates the pause between frames .to(_$.$(v4T), 0.2, {css:{alpha:0, top:'260px'}}) .to(_$.$(sc), 0.7, {css:{backgroundPosition:'0px -260px'}}) // now tween bg within the chain .from(_$.$(Lg), 0.3, {css:{alpha:0, top:'-80px'}}) .from(_$.$(LgT), 0.2, {css:{alpha:0, top:'310px'}}) .from(_$.$(v5), 0.4, {css:{alpha:0, top:'310px'}}) .from(_$.$(Fc), 0.3, {css:{alpha:0, top:'310px'}}) // end of animation, expandable button is now available for further interactivity ;// end T chain GSAP is so awesome!
  21. I mostly favor the approach of using a DIV with its background set to be the desired image instead of nesting an IMAGE tag within the DIV or using the IMAGE tag in some other container element. The CSS can either be inline styles or traditional (shown below) depending on the implementation. EXAMPLE #1: <head> <style type="text/css"> #myDiv { position: absolute; overflow: hidden; width: 300px; height: 250px; left: 200px; top: 0px; opacity: 1; z-index: 1; background-color: rgb(39, 40, 45); cursor: pointer; background-image: url("gm/bg_519x712_sky_landscape.jpg"); background-position: 0px -260px; } </style> </head> <body> <div id="myDiv"></div> </body> However, if I'm dragging and dropping, or requiring other mouse events and user interactivity for the image, I'll then sometimes nest the IMAGE tag within a DIV so that I may attach independent mouse events to the image and the parent container. In situations of rare complex interactivity, some mouse events might be shared by both the parent container and the nested image to create unique and interesting affects where multiple events fire off simultaneously. What I like about this method of using the background image is that you can simulate straight-line masking types of affects by simultaneously animating the container and its background image position to achieve wipes or reveals from the top, left, bottom, and right positions with a little bit of "clever" tweening.
  22. Oh dear, it looks like there was a 'botched' upload on a single js file. I've uploaded it again. Sorry for the delay/inconvenience. Also, note that in the 2nd tab you can drag and drop components and their location on the page is smart and such... it's not that intuitive with the stripped down version prototype. All motion/animation/interactivity is using GSAP engine.
  23. For a rough preview of a prototype build-out animated project that I'm converting from AS3 over to HTML/CSS/JavaScript/jQuery (using the Greensock JS Animation Platform as the sole animation engine), then follow this link here http://www.rhaws.com/dgx/ [user=rhaws pass=guest]. Since this is an "in-progress project" prototype, my apologies for the images are destroyed by munchkinizing them down to 1% jpg compression and the source code is severely obfuscated and lightly encrypted to ensure nothing meaningful is extractable/reusable at this time.
  24. Ah ha! Thank you for the help and link. Maybe I should have never updated to Firefox 12? However, I did manage to figure out the issue, which is unusual because I normally use jQuery and this kind of issue is normally avoidable. Using document.write and document.writeln is the "likely" culprit for any resulting output. I discovered this after search for quite some time about the specific error message and discovered there were a lot of document.write/ln references piling up in my notes. For instance, after loading the sets of scripts dynamically, the last resulting complete event fires off on the final loaded script. Interestingly, it made no difference if I dynamically added the script elements to the <head> or <body> of the document - though adding to the body of the document seemed to be bit faster for some reason. Trouble is, that my original code was using document.write to add a dynamic container element after the scripts have loaded, which in some browser versions Firefox causes the compile-and-go cleared scope error and in some IE browser versions caused a null object reference wherever code looked for the container element that was added. All I had to do to fix this pesky error/bug was the following, which is probably more in line with what we're supposed to be doing anyway (hopefully): <head> <script type="text/javascript"> function loadScript(url, callback){ var script = document.createElement("script") script.type = "text/javascript"; if(script.readyState){// ie script.onreadystatechange = function(){ if(script.readyState == "loaded" || script.readyState == "complete"){ callback(); script.onreadystatechange = null; } }; }else{// non-ie script.onload = function(){ callback(); }; } script.src = url; // this line below works equally as well // document.body.appendChild(script); // this line below is what most dev's say is the preferred location document.getElementsByTagName("head")[0].appendChild(script); } // normally we would use loop logic here, but stacked the load inside // callbacks for testing/debugging to see how many milliseconds go by // before any given script is available and ready for reference/usage loadScript('js/greensock/TweenLite.min.js', function(){ loadScript('js/greensock/TimelineLite.min.js', function(){ loadScript('js/greensock/easing/EasePack.min.js', function(){ loadScript('js/greensock/plugins/CSSPlugin.min.js', function(){ loadScript('js/jBanner.js', function(){ loadScript('js/banner.js', function(){ jb.construct(); // fires off the banner code }); }); }); }); }); }); </script> </head> // changed this below... <body> <script type="text/javascript"> // AC method resides in banner.js and is available after jb.construct is invoked document.write(AC( bc, CC(20,20,300,250,1,1), true, U, true )); </script> </body> // to this below... <body> <script type="text/javascript"> // AC method resides in banner.js and is available after jb.construct is invoked document.body.innerHTML += AC( bc, CC(20,20,300,250,1,1), true, U, true ); </script> </body> Anyway, hope this helps other developers avoid the pitfalls of using the document.write and document.writeln. When not using jQuery, there may even be a better approach than merely appending to the innerHTML, but I'm still struggling as a noob to JavaScript after being stuck for nearly a decade in the ActionScript.
  25. When embedding the JS files using a dynamic method similar to how Google does (shown below), there is an unusal error encountered: Error Line 14: attempt to run compile-and-go script on a cleared scope <body> <script type="text/javascript"> // include Greensock JS Animation Platform script files var e = document.createElement("script"); e.src = "js/greensock/plugins/CSSPlugin.min.js"; e.type = "text/javascript"; document.body.appendChild(e); var d = document.createElement("script"); d.src = "js/greensock/easing/EasePack.min.js"; d.type = "text/javascript"; document.body.appendChild(d); var c = document.createElement("script"); c.src = "js/greensock/TimelineLite.min.js"; c.type = "text/javascript"; document.body.appendChild(c); var b = document.createElement("script"); b.src = "js/greensock/TweenLite.min.js"; b.type = "text/javascript"; document.body.appendChild(; </script> </body> When I run the code block above on the non-minified script file versions (removing .min from the file names) I get this error with a tad bit more detail: Error Line 227: attempt to run compile-and-go script on a cleared scope _self.time = (_getTime() - _startTime) / 1000; Any ideas on this? I'm using Firefox 12.0 with FireBug add-on, Vista x64, running on Wamp5 2.0 localhost.