javascript - How to put multiple canvas js animations on one page. (Createjs) -
i'm trying put multiple js animations on 1 html page. i've started testing 2 animations. figured once learn how implement two, can implement ten.
i'm using flash cc publish html5 canvas animations (which outputs simple html file , js file). 1 animation called "ship" , other called "car". stands, "ship" appearing on screen.
below code. (also there's link source files.) i'm no javascript/coding expert, troubleshooter/experimenter. i've repositioned code, tried renaming variables, etc. i'm pretty sure big hangup createjs variable. see createjs variable isn't called anywhere else on page... i'm guessing it's being used in remote js script(s)? i've commented out var createjs = createjs_car because if it's not commented, no animation appears.
anyhow, i'm looking 2 (or more) animations working on same page. in advance!
want source files? click here: click here
<!doctype html> <html> <head> <meta charset="utf-8"> <title>multiple canvas animations on 1 page</title> <script> // change default namespace createjs libraries: var createjs_ship = createjs_ship||{}; var createjs = createjs_ship; </script> <!-- i've commented out because if commenting removed, no animation shows up. <script> // change default namespace createjs libraries: var createjs_car = createjs_car||{}; var createjs = createjs_car; </script>--> <script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script> <script src="http://code.createjs.com/tweenjs-0.6.1.min.js"></script> <script src="http://code.createjs.com/movieclip-0.8.1.min.js"></script> <script src="ship.js"></script> <script src="car.js"></script> <script> var canvas, stage, exportroot; function init_ship() { canvas = document.getelementbyid("canvas_ship"); exportroot = new libs_ship.ship(); stage = new createjs_ship.stage(canvas); stage.addchild(exportroot); stage.update(); createjs_ship.ticker.setfps(libs_ship.properties.fps); createjs_ship.ticker.addeventlistener("tick", stage); } function init_car() { canvas = document.getelementbyid("canvas_car"); exportroot = new libs_car.car(); stage = new createjs_car.stage(canvas); stage.addchild(exportroot); stage.update(); createjs_car.ticker.setfps(libs_car.properties.fps); createjs_car.ticker.addeventlistener("tick", stage); } </script> </head> <body onload="init_ship(); init_car();" style="background-color:#d4d4d4"> <canvas id="canvas_ship" width="300" height="250" style="background-color:#ffffff"></canvas> <canvas id="canvas_car" width="300" height="250" style="background-color:#ffffff"></canvas> </body> </html>
so i've got both playing by:
- replacing references createjs_xxx create_js in both car.js, ship.js , init function
- removing associated variable instantiations
- combining init functions
please see below , codepen example here
<!doctype html> <html> <head> <meta charset="utf-8"> <title>multiple canvas animations on 1 page</title> <script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script> <script src="http://code.createjs.com/tweenjs-0.6.1.min.js"></script> <script src="http://code.createjs.com/movieclip-0.8.1.min.js"></script> <script src="ship.js"></script> <script src="car.js"></script> <script> function init() { var canvas, stage, exportroot; canvas = document.getelementbyid("canvas_ship"); exportroot = new libs_ship.ship(); stage = new createjs.stage(canvas); stage.addchild(exportroot); stage.update(); createjs.ticker.setfps(libs_ship.properties.fps); createjs.ticker.addeventlistener("tick", stage); canvas = document.getelementbyid("canvas_car"); exportroot = new libs_car.car(); stage = new createjs.stage(canvas); stage.addchild(exportroot); stage.update(); createjs.ticker.setfps(libs_car.properties.fps); createjs.ticker.addeventlistener("tick", stage); } </script> </head> <body onload="init();" style="background-color:#d4d4d4"> <canvas id="canvas_ship" width="300" height="250" style="background-color:#ffffff"></canvas> <canvas id="canvas_car" width="300" height="250" style="background-color:#ffffff"></canvas> </body> </html> javascript:
(function (lib, img, cjs, ss) { var p; // shortcut reference prototypes // library properties: lib.properties = { width: 300, height: 250, fps: 24, color: "#ffffff", manifest: [] }; // symbols: (lib.ship_1 = function() { this.initialize(); // layer 1 this.shape = new cjs.shape(); this.shape.graphics.f("#0e586c").s().p("arndcqihigajkxiaeaaqh0dbl1dcg"); this.shape.settransform(85.1,113); this.shape_1 = new cjs.shape(); this.shape_1.graphics.f("#c0d0d7").s().p("anfgvqdllvjlm6imoaaqdhgnjhgcg"); this.shape_1.settransform(101.6,40.5); this.addchild(this.shape_1,this.shape); }).prototype = p = new cjs.container(); p.nominalbounds = new cjs.rectangle(0,0,170.3,135); // stage content: (lib.ship = function(mode,startposition,loop) { this.initialize(mode,startposition,loop,{}); // layer 2 this.instance = new lib.ship_1(); this.instance.settransform(-4.9,107.5,1,1,0,0,0,85.2,67.5); this.timeline.addtween(cjs.tween.get(this.instance).to({x:390.1},128).wait(1)); // layer 1 this.shape = new cjs.shape(); this.shape.graphics.f("#9dc7d7").s().p("a3biiiaawpmau2aaaiaaqpg"); this.shape.settransform(150,52); this.shape_1 = new cjs.shape(); this.shape_1.graphics.f("#438896").s().p("a3blaiaa2ymau2aaaiaawyg"); this.shape_1.settransform(150,177); this.timeline.addtween(cjs.tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).wait(129)); }).prototype = p = new cjs.movieclip(); p.nominalbounds = new cjs.rectangle(59.9,125,390.2,250); })(libs_ship = libs_ship||{}, images_ship = images_ship||{}, createjs = createjs||{}, ss = ss||{}); var libs_ship, images_ship, createjs, ss; javascript:
(function (lib, img, cjs, ss) { var p; // shortcut reference prototypes // library properties: lib.properties = { width: 300, height: 250, fps: 24, color: "#ffffff", manifest: [] }; // symbols: (lib.ship = function() { this.initialize(); // layer 2 this.shape = new cjs.shape(); this.shape.graphics.f("#000000").s().p("aggbwqgvguaahcqaahbavgvqavgubdaaqbcaaauauqawavaabbqaabcgwauqguawhcgbqhdabgvgwgaqcbwqgugugbhcqabhbaugvqavgubcaaqbdaaavauqauavabbbqgbbcguauqgvawhdgbqhcabgvgwg"); this.shape.settransform(84.2,140); // layer 1 this.shape_1 = new cjs.shape(); this.shape_1.graphics.f("#e58a2b").s().p("atydcqgwjhduhzicqaaqbgigaygrij+aaqbvaza7b3ifoaxqbsbnascpg"); this.shape_1.settransform(86.5,113); this.addchild(this.shape_1,this.shape); }).prototype = p = new cjs.container(); p.nominalbounds = new cjs.rectangle(-0.1,91,173.3,65); // stage content: (lib.car = function(mode,startposition,loop) { this.initialize(mode,startposition,loop,{}); // layer 2 this.instance = new lib.ship(); this.instance.settransform(-4.9,107.5,1,1,0,0,0,85.2,67.5); this.timeline.addtween(cjs.tween.get(this.instance).to({x:390.1},128).wait(1)); // layer 1 this.shape = new cjs.shape(); this.shape.graphics.f("#a57f57").s().p("a3biiiaawpmau2aaaiaaqpg"); this.shape.settransform(150,52); this.shape_1 = new cjs.shape(); this.shape_1.graphics.f("#666666").s().p("a3blaiaa2ymau2aaaiaawyg"); this.shape_1.settransform(150,177); this.timeline.addtween(cjs.tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).wait(129)); }).prototype = p = new cjs.movieclip(); p.nominalbounds = new cjs.rectangle(59.7,125,390.3,250); })(libs_car = libs_car||{}, images_car = images_car||{}, createjs = createjs||{}, ss = ss||{}); var libs_car, images_car, createjs, ss;
Comments
Post a Comment