open in new window

Demos : Spritesheet

Code:

<html>
<head>
     <script type="text/javascript" src="http://lib.ivank.net/ivank.js"></script>
     <script type="text/javascript">
     
          function Start()
          {
               stage = new Stage("c");
               stage.addChild(new Bitmap(new BitmapData("night.jpg")));
               
               var boom = new MBitmap( new BitmapData("http://i.imgur.com/bV7mgky.png"), 6, 5);
               stage.addChild(boom);  boom.scaleX = boom.scaleY = 2;  boom.play();
               
               var guy = new MBitmap( new BitmapData("capguy-walk.png"), 1, 8);
               stage.addChild(guy);  guy.x = 400;  guy.y = 150;  
               guy.stepTime = 6;  guy.play();
          }
          
          
          function MBitmap(bd, rows, cols)
          {
               Sprite.call(this);
               // public
               this.bitmapData = bd;
               this.totalFrames = rows*cols;
               this.currentFrame = 0;
               this.isPlaying = false;
               this.stepTime = 1; // use it to slow down the animation
               // private
               this._rows = rows;  this._cols = cols;
               this._frames = [];
               this._time = 0; 
               
               this._from = 0; this._to = 0; this._times = 0; this._ltime = 0; 
               
               if(bd.width == 0) // not loaded
                    bd.loader.addEventListener2(Event.COMPLETE, this._init, this);
               else this._init();
          }
          MBitmap.prototype = new Sprite();
          
          MBitmap.prototype._init = function(e)
          {
               var fx = 1/this._cols, fy = 1/this._rows;
               var w = this.bitmapData.width *fx, h = this.bitmapData.height*fy;
               
               for(var y=0; y<this._rows; y++)
                    for(var x=0; x<this._cols; x++)
                    {
                    	var gr = new Graphics();
                    	gr.beginBitmapFill(this.bitmapData);
                    	gr.drawTriangles([0,0, w,0, 0,h, w,h], [0,1,2, 1,2,3], 
                    		[x*fx,y*fy, (x+1)*fx,y*fy, x*fx,(y+1)*fy, (x+1)*fx,(y+1)*fy ]);
                    	this._frames.push(gr);
                    }
               this.graphics = this._frames[this.currentFrame];
          }
          MBitmap.prototype._setFrame = function(k)
          {
               k = k%this.totalFrames;  this.currentFrame = k;
               if(this.bitmapData.width) this.graphics = this._frames[k];
          }
          
          MBitmap.prototype.nextFrame = function() { 
               var nf = this.currentFrame+1;
               if(nf>this._to) { nf = this._from;  this._ltime++; }
               this._setFrame(nf); 
          }
          MBitmap.prototype.gotoAndStop=function(k){ this._setFrame(k); this.stop(); }
          MBitmap.prototype.gotoAndPlay=function(k){ this._setFrame(k); this.play(); }
          
          MBitmap.prototype.loop = function(from, to, times) { 
               if(times==null) times = Infinity;
               if(this.currentFrame<from || this.currentFrame>to) this._setFrame(from);
               this.isPlaying = true; 
               this._from = from;  this._to = to;  this._times = times;  this._ltime = 0;
               this.addEventListener2  (Event.ENTER_FRAME, this._ef, this); 
          }
          MBitmap.prototype.play = function() {  this.loop(0, this.totalFrames-1);  }
                    
          MBitmap.prototype.stop = function() { 
               if(this.isPlaying) this.removeEventListener(Event.ENTER_FRAME, this._ef);
               this.isPlaying = false; }
                    
          MBitmap.prototype._ef = function(e) { 
               if(this._time++%this.stepTime!=0) return;
               this.nextFrame();
               if(this._ltime==this._times) this.stop();
          }
     </script>
</head>
<body onload="Start();"><canvas id="c"></canvas></body>
</html>