1.2 Improving a sprite

 <script>
	// This is a bit long, it's the data that's directly copied from the JSON that texture packer generated
	// So in actual work in your production process, pack it into a game object's class
	var fromTexturePacker =	{
		framerate: 8,		// Add the speed of the spritesheet
		"images": ["/download/attachments/31392468/ContraA.png?api=v2"],	// Used to be ContraA.png, 
																			//but need to replace with where you uploaded the file
		"frames": [
		    [2, 2, 50, 48], 
		    [54, 2, 50, 48], 
		    [106, 2, 50, 48], 
		    [158, 2, 50, 48], 
		    [210, 2, 50, 48], 
		    [262, 2, 50, 48], 
		    [314, 2, 50, 48], 
		    [366, 2, 50, 48], 
		    [418, 2, 50, 48], 
		    [470, 2, 50, 48], 
		    [522, 2, 50, 48], 
		    [574, 2, 50, 48], 
		    [626, 2, 50, 48], 
		    [678, 2, 50, 48], 
		    [730, 2, 50, 48], 
		    [626, 2, 50, 48], 
		    [782, 2, 50, 48], 
		    [834, 2, 50, 48], 
		    [886, 2, 50, 48], 
		    [938, 2, 50, 48], 
		    [990, 2, 50, 48], 
		    [1042, 2, 50, 48], 
		    [1094, 2, 50, 48], 
		    [1146, 2, 50, 48], 
		    [1198, 2, 50, 48], 
		    [1250, 2, 50, 48], 
		    [1302, 2, 50, 48]
		],
		"animations": {
				// the original animation can be deleted because they are not used anymore, 
				// further more, if you can organize animations in folders, it can use smart folder to generate correct animation data
				// Add more animation state (the first and last frame of the animation)
				"shootSide":[0,1],
				"shootUp":[2,3],
				"shootrunup":[4,6],
				"shootrundown":[7,9],
				"run":[10,15],
				"onstomach":16,		// Note that single frame does not go into array
				"jump":[17,20],
				"die":[21,26],
				"fullrun":[0,26]	// Added for a full run animation to show from the first frame to the last frame
		},
		"texturepacker": [
		        "SmartUpdateHash: $TexturePacker:SmartUpdate:45b6e15e0ae86aae9a001c364782e236:cf08f0478e9691f91c2217c30f56a70e:8bc6413d34f5b5fa1d1f668e2667f290$",
		        "Created with TexturePacker (http://www.texturepacker.com) for EaselJS"
		]
	}

	var spritetp;
	var flipped = false;
 
	// The code starts
    function init() {
        var stage = new createjs.Stage("demoCanvas");
		createjs.Ticker.addEventListener("tick", stage);		// This is needed to animate sprite
 
		var spritesheettp = new createjs.SpriteSheet(fromTexturePacker);
		spritetp = new createjs.Sprite(spritesheettp, "run" );
 
		// Set the pivot point to centre and put it to the centre of the screen
		spritetp.regX = 25;
		spritetp.regY = 24;
 
		spritetp.x = stage.canvas.width / 2;	
		spritetp.y = stage.canvas.height / 2;	

		stage.addChild(spritetp);
	}
 
	function switchAnimation( animName ) {	// This switches the animation state
		spritetp.gotoAndPlay(animName);
	}


	function flipSprite(){
		flipped = !flipped;

		if( flipped ){

			spritetp.scaleX = -1.0;

		}else{
			spritetp.scaleX = 1.0;
		}

	}
</script>

<select onchange="switchAnimation(this.value);">	// the values are defined inside the Animation member of fromTexturePacker
	<option value="onstomach">onstomach</option>
	<option value="shootSide">shootSide</option>
	<option value="shootUp">shootUp</option>
	<option value="run" selected>run</option>
	<option value="shootrunup">shootrunup</option>
	<option value="shootrundown">shootrundown</option>
	<option value="jump">jump</option>
	<option value="die">die</option>
</select>
<input type="button" value="flip" id="pauseBtn" onclick="flipSprite();"><br>

<canvas id="demoCanvas" width="500" height="200" style="border:1px solid #000000;">
    alternate content
</canvas>
 
<script>
    init();
</script>