open in new window

Demos : Spritesheet

Graphics Bitmaps EnterFrame Event Mouse Events Multitouch Keyboard Events Rendering Text Color Transform Custom Classes Playing Video Box2D Bézier Pseudo 3D Real 3D Water Surface Plasma Mandelbrot BunnyMark Tweener Spritesheet Resizable UI

Code:

<html>
<head>
     <script type="text/javascript" src="//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>