1.1 Creating a sprite

<script>
	// This is a bit long, it's the data that's directly copied from the JSON that texture packer generated
	var fromTexturePacker =	{
		framerate: 10,		// 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": {
		        "Contra_00000":[0], 
		        "Contra_00001":[1], 
		        "Contra_00002":[2], 
		        "Contra_00003":[3], 
		        "Contra_00004":[4], 
		        "Contra_00005":[5], 
		        "Contra_00006":[6], 
		        "Contra_00007":[7], 
		        "Contra_00008":[8], 
		        "Contra_00009":[9], 
		        "Contra_00010":[10], 
		        "Contra_00011":[11], 
		        "Contra_00012":[12], 
		        "Contra_00013":[13], 
		        "Contra_00014":[14], 
		        "Contra_00015":[15], 
		        "Contra_00016":[16], 
		        "Contra_00017":[17], 
		        "Contra_00018":[18], 
		        "Contra_00019":[19], 
		        "Contra_00020":[20], 
		        "Contra_00021":[21], 
		        "Contra_00022":[22], 
		        "Contra_00023":[23], 
		        "Contra_00024":[24], 
		        "Contra_00025":[25], 
		        "Contra_00026":[26],
				"fullrun":[0,26]	// Added for a full run
		},
		"texturepacker": [
		        "SmartUpdateHash: $TexturePacker:SmartUpdate:45b6e15e0ae86aae9a001c364782e236:cf08f0478e9691f91c2217c30f56a70e:8bc6413d34f5b5fa1d1f668e2667f290$",
		        "Created with TexturePacker (http://www.texturepacker.com) for EaselJS"
		]
	}


	// 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);
		var spritetp = new createjs.Sprite(spritesheettp, "fullrun" );
 
		stage.addChild(spritetp);
	}
</script>
 
<canvas id="demoCanvas" width="500" height="200" style="border:1px solid #000000;">
    alternate content
</canvas>
 
<script>
    init();
</script>