Ramblings

// Except as otherwise noted, the following code is copyright 2008, 2009
// by Matthew Williams
//
// Usage and description of the script may be found at:
// http://matthewkwilliams.com/
//
// In order to use it, you need the following:
// + A sprite file
// + CSS entries for the locations of the sprites.
//   These are named FOO-frame-n where foo is the name of the animation,
//   and n is the frame.
// + A block entity in which the animation will be placed.
//   This entity needs the following css rules since we're using the css
//   background trick:
//   + width
//   + height
//
// + A sample use would be as follows:
//   <script src="sprite-animator.js" type="text/javascript"><!--mce:0--></script>
//
 
//   <script type="text/javascript"><!--mce:1--></script>
//   <button onclick="gearanim.start(); return false;">Start</button>
 
//   <button onclick="gearanim.stop(); return false;">Stop</button>
 
// This object does the updating of the sprite animation
function SpriteUpdater(instance)
{
   var obj = instance;
   this.updateSprite = function()
   {
      var elem = document.getElementById(obj.id + '-sprite-container');
      var a = elem.className.split('-');
      var num = parseInt(a[a.length - 1]);
      var newNum = num;
      if (num &gt;= obj.numFrames) {
         newNum = obj.loop ? 1 : obj.numFrames;
      } else {
         newNum = newNum + 1;
      }
      if(newNum != num)
         elem.className = obj.id + '-frame-' + newNum;
      else
         clearInterval(obj.intervalID);
   };
 
}
 
// This object handles the animation
// + id = the id of the block
// + file = the file which contains the sprites
// + loop = true/false whether it loops or not
// + delay = what is the delay between frames?
function SpriteAnimator(id, file, loop, delay) {
 
   // this function and the next are from css-toolbox.js
   // created by Patrick Hunlock :: http://www.hunlock.com
   // and originally found at the JavaScript Source:
   // http://javascript.internet.com
   function getCSSRule(ruleName, deleteFlag) {
      if (document.styleSheets) {
         for (var i=0; i
 
';
      element.innerHTML = insertion + element.innerHTML;
   };
 
   // add css rules for the sprite container
   this.updateCSS = function()
   {
      var rule = addCSSRule('#' + this.id + '-sprite-container');
      rule.style.backgroundImage = 'url("' + file + '")';
      rule.style.backgroundRepeat = 'none';
      rule.style.padding = '0';
      rule.style.margin = '0';
      rule.style.width = '100%';
      rule.style.height = '100%';
   };
 
   // stop the animation
   this.stop = function() {
      if (this.intervalID != false)
      {
         clearInterval(this.intervalID);
      }
   };
 
   // start the animation
   this.start = function(){
      updater = new SpriteUpdater(this);
      this.intervalID = setInterval(updater.updateSprite,this.delay);
   };
 
   this.id = id;
   this.file = file;
   this.loop = loop;
   this.delay = delay;
   this.updateHTML();
   this.updateCSS();
   this.numFrames = this.countFrames();
   this.intervalID = false;
}

.knot-frame-1{background-position: 0px 0px;}
.knot-frame-2{background-position: -138px 0px;}
.knot-frame-3{background-position: -276px 0px;}
.knot-frame-4{background-position: -414px 0px;}
.knot-frame-5{background-position: -552px 0px;}
.knot-frame-6{background-position: -690px 0px;}
.knot-frame-7{background-position: -828px 0px;}
.knot-frame-8{background-position: -966px 0px;}
.knot-frame-9{background-position: -1104px 0px;}