20 Replies Latest reply on Aug 18, 2015 7:11 AM by tanvira5454192

    Two animations on the same page html5 - toolkit for createjs

    grandascreativos

      Hello, I'm trying to do two animations on the same page and I can not, I'm a designer and I am looking for a guide to resolve this.

       

      thanks.

       

      This is my code:

       

      <!DOCTYPE html>

      <html>

      <head>

      <meta charset="UTF-8">

      <title>CreateJS export from hola</title>

       

       

      <script src="easeljs-0.6.0.min.js"></script>

      <script src="tweenjs-0.4.0.min.js"></script>

      <script src="movieclip-0.6.0.min.js"></script>

      <script src="hola.js"></script>

      <script src="cloud gc.js"></script>

      <script>

      var canvas, stage, exportRoot;

       

       

      function init() {

                canvas = document.getElementById("canvas");

       

                exportRoot = new lib.hola();

       

       

                stage = new createjs.Stage(canvas);

       

                stage.addChild(exportRoot);

                stage.update();

       

       

                createjs.Ticker.setFPS(30);

                createjs.Ticker.addEventListener("tick", stage);

      }

       

       

      var canvas, stage, exportRoot;

       

       

      function init() {

                canvas = document.getElementById("cloud");

       

                exportRoot = new lib.cloudgc();

       

       

                stage = new createjs.Stage(cloud);

       

                stage.addChild(exportRoot);

                stage.update();

       

       

                createjs.Ticker.setFPS(10);

                createjs.Ticker.addEventListener("tick", stage);

      }

       

       

      </script>

       

       

      </head>

       

       

      <body onload="init();" style="background-color:#D4D4D4">

                <canvas id="canvas" width="550" height="400" style="background-color:#ffffff"></canvas>

          <canvas id="cloud" width="550" height="400" style="background-color:#ffffff"></canvas>

      </body>

      </html>


       

       

       

       

       

       

        • 1. Re: Two animations on the same page html5 - toolkit for createjs
          robdillon Most Valuable Participant

          You have two functions with the same name: init(). Only the first one will ever be called. You can fix this in two ways. You can change the name of the second function to something else, like "init2()". And then in the body tag add that function's name; <body onload="init(); init2();" style="background-color:#D4D4D4">

           

          A second way is to cut all of the content from the second init function and paste it into the first init function:

          function init() {

                    canvas = document.getElementById("canvas");

           

                    exportRoot = new lib.hola();

           

           

                    stage = new createjs.Stage(canvas);

           

                    stage.addChild(exportRoot);

                    stage.update();

           

           

                    createjs.Ticker.setFPS(30);

                    createjs.Ticker.addEventListener("tick", stage);

           

                    canvas = document.getElementById("cloud");

           

                    exportRoot = new lib.cloudgc();

           

           

                    stage = new createjs.Stage(cloud);

           

                    stage.addChild(exportRoot);

                    stage.update();

           

           

                    createjs.Ticker.setFPS(10);

                    createjs.Ticker.addEventListener("tick", stage);

           

          }

          1 person found this helpful
          • 2. Re: Two animations on the same page html5 - toolkit for createjs
            grandascreativos Level 1

            Hi Rob,

             

            Thank you very much for the help, works perfect. Implements the first option and everything turned out amazing.

             

            Happy day!

            • 3. Re: Two animations on the same page html5 - toolkit for createjs
              Will at RR

              It seems like I am dealing with the same issue.  But simply adding the init2() isn't working...

               

              Here is my code.

               

              <!DOCTYPE html>

              <html>

              <head>

              <meta charset="UTF-8">

              <title>CreateJS export from Boy_small</title>

               

               

              <script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>

              <script src="http://code.createjs.com/tweenjs-0.4.0.min.js"></script>

              <script src="http://code.createjs.com/movieclip-0.6.0.min.js"></script>

              <script src="http://code.createjs.com/preloadjs-0.3.0.min.js"></script>

              <script src="http://code.createjs.com/soundjs-0.4.0.min.js"></script>

              <script src="Boy_small.js"></script>

              <script src="SUN_MOVING.js"></script>

               

               

               

               

              <script>

               

               

              var canvas, stage, exportRoot;

               

               

              function init() {

                        canvas = document.getElementById("sun");

                        images = images||{};

               

               

                        var manifest = [

                                  {src:"images/Sun20000021.png", id:"Sun20000021"}

                        ];

               

               

                        var loader = new createjs.LoadQueue(false);

                        loader.addEventListener("fileload", handleFileLoad);

                        loader.addEventListener("complete", handleComplete);

                        loader.loadManifest(manifest);

              }

               

               

              function handleFileLoad(evt) {

                        if (evt.item.type == "image") { images[evt.item.id] = evt.result; }

              }

               

               

              function handleComplete() {

                        exportRoot = new lib.SUN_MOVING();

               

               

                        stage = new createjs.Stage(sun);

                        stage.addChild(exportRoot);

                        stage.update();

               

               

                        createjs.Ticker.setFPS(24);

                        createjs.Ticker.addEventListener("tick", stage);

              }

               

               

              function init2() {

                        canvas = document.getElementById("canvas");

                        images = images||{};

               

               

                        var manifest = [

                                  {src:"sounds/RelaxationSoothingSoundsofNaturewav.mp3", id:"RelaxationSoothingSoundsofNaturewav"}

                        ];

               

               

                        var loader = new createjs.LoadQueue(false);

                        loader.installPlugin(createjs.Sound);

                        loader.addEventListener("fileload", handleFileLoad);

                        loader.addEventListener("complete", handleComplete);

                        loader.loadManifest(manifest);

              }

               

               

              function handleFileLoad(evt) {

                        if (evt.item.type == "image") { images[evt.item.id] = evt.result; }

              }

               

               

              function handleComplete() {

                        exportRoot = new lib.Boy_small();

               

               

                        stage = new createjs.Stage(canvas);

                        stage.addChild(exportRoot);

                        stage.update();

               

               

                        createjs.Ticker.setFPS(24);

                        createjs.Ticker.addEventListener("tick", stage);

              }

               

               

              function playSound(id, loop) {

                        createjs.Sound.play(id, createjs.Sound.INTERRUPT_EARLY, 0, 0, loop);

              }

               

               

               

               

               

               

              </script>

               

               

               

               

              </head>

               

               

              <body onload="init(), init2();" style="background-color:#D4D4D4">

                        <canvas id="canvas" width="224" height="245" style="background-color:#FFFFFF"></canvas>

              <canvas id="sun" width="550" height="400" style="background-color:#FFFFFF"></canvas>

              </body>

              </html>

               

               

              Any and all help would be greatly appreciated!!!

              • 4. Re: Two animations on the same page html5 - toolkit for createjs
                robdillon Most Valuable Participant

                You have two "handleFileLoad()" and two "handleComplete()" functions. Try renaming the second set and changing the names in the eventListeners that call them.

                1 person found this helpful
                • 5. Re: Two animations on the same page html5 - toolkit for createjs
                  Will at RR Level 1

                  Thank you man! That did it.  Thank you for getting me back on track!

                  • 6. Re: Two animations on the same page html5 - toolkit for createjs
                    Will at RR Level 1

                    Hey... You helped me before. Which I thank you for!  I am now trying to load a different js and I'm running into issues.  My sun canvas will only partially load.  It won't load it's image files.... 

                     

                    This is my code

                     

                    <script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>

                    <script src="http://code.createjs.com/tweenjs-0.4.0.min.js"></script>

                    <script src="http://code.createjs.com/movieclip-0.6.0.min.js"></script>

                    <script src="http://code.createjs.com/preloadjs-0.3.0.min.js"></script>

                    <script src="http://code.createjs.com/soundjs-0.4.0.min.js"></script>

                     

                     

                    <script src="SUN_MOVING.js"></script>

                    <script src="Orange_shorts_wc.js"></script>

                     

                     

                     

                     

                     

                     

                    <script>

                     

                     

                    var canvas, stage, exportRoot;

                     

                     

                    function init() {

                              canvas = document.getElementById("sun");

                              images = images||{};

                     

                     

                              var manifest = [

                                        {src:"images/Sun20000021.png", id:"Sun20000021"}

                              ];

                     

                     

                              var loader = new createjs.LoadQueue(false);

                              loader.addEventListener("fileload", handleFileLoad2);

                              loader.addEventListener("complete", handleComplete2);

                              loader.loadManifest(manifest);

                    }

                     

                     

                    function handleFileLoad2(evt) {

                              if (evt.item.type == "image") { images[evt.item.id] = evt.result; }

                    }

                     

                     

                    function handleComplete2() {

                              exportRoot = new lib.SUN_MOVING();

                     

                     

                              stage = new createjs.Stage(sun);

                              stage.addChild(exportRoot);

                              stage.update();

                     

                     

                              createjs.Ticker.setFPS(24);

                              createjs.Ticker.addEventListener("tick", stage);

                    }

                     

                     

                     

                     

                    function init2() {

                              createjs.MotionGuidePlugin.install();

                     

                     

                              canvas = document.getElementById("canvas");

                              exportRoot2 = new lib.Orange_shorts_wc();

                     

                     

                              stage = new createjs.Stage(canvas);

                              stage.addChild(exportRoot2);

                              stage.update();

                     

                     

                              createjs.Ticker.setFPS(24);

                              createjs.Ticker.addEventListener("tick", stage);

                    }

                    </script>

                     

                    Any help much appreciated.

                    • 7. Re: Two animations on the same page html5 - toolkit for createjs
                      robdillon Most Valuable Participant

                      Here are comments on the code that you showed. There may be other problems.

                       

                       

                      // these five lines are calling some createjs libraries that will be used by your code

                      <script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>

                      <script src="http://code.createjs.com/tweenjs-0.4.0.min.js"></script>

                      <script src="http://code.createjs.com/movieclip-0.6.0.min.js"></script>

                      <script src="http://code.createjs.com/preloadjs-0.3.0.min.js"></script>

                      <script src="http://code.createjs.com/soundjs-0.4.0.min.js"></script>

                      // these two lines are calling two javascript libraries that were written by Flash

                      // these two files should be in the same folder as the document that contains the code below

                      <script src="SUN_MOVING.js"></script>

                      <script src="Orange_shorts_wc.js"></script>

                       

                       

                      <script>

                      // this line declares some global variables, you probably need to add exportRoot2

                      var canvas, stage, exportRoot;

                      • 8. Re: Two animations on the same page html5 - toolkit for createjs
                        drnhawkins

                        i have this same problem but I am not sure what I have to do

                         

                         

                        what do you mean by

                         

                        Try renaming the second set and changing the names in the eventListeners that call them.      - I am not very html literate!

                        this is my code

                         

                         

                        <script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>

                        <script src="http://code.createjs.com/tweenjs-0.5.0.min.js"></script>

                        <script src="http://code.createjs.com/movieclip-0.7.0.min.js"></script>

                        <script src="http://code.createjs.com/preloadjs-0.4.0.min.js"></script>

                        <script src="Millenniumstart.js"></script>

                        <script src="greatwhitethrone.js"></script>

                         

                        <script>

                        var canvas, stage, exportRoot;

                         

                         

                        function init() {

                            canvas = document.getElementById("canvas");

                            images = images||{};

                         

                            var loader = new createjs.LoadQueue(false);

                            loader.addEventListener("fileload", handleFileLoad);

                            loader.addEventListener("complete", handleComplete);

                            loader.loadManifest(lib.properties.manifest);

                        }

                         

                        function handleFileLoad(evt) {

                            if (evt.item.type == "image") { images[evt.item.id] = evt.result; }

                        }

                         

                        function handleComplete() {

                            exportRoot = new lib.Millenniumstart();

                         

                            stage = new createjs.Stage(canvas);

                            stage.addChild(exportRoot);

                            stage.update();

                         

                            createjs.Ticker.setFPS(lib.properties.fps);

                            createjs.Ticker.addEventListener("tick", stage);

                        }

                         

                        function init2() {

                            canvas = document.getElementById("canvas2");

                            images = images||{};

                         

                            var loader = new createjs.LoadQueue(false);

                            loader.addEventListener("fileload", handleFileLoad);

                            loader.addEventListener("complete", handleComplete);

                            loader.loadManifest(lib.properties.manifest);

                        }

                         

                        function handleFileLoad(evt) {

                            if (evt.item.type == "image") { images[evt.item.id] = evt.result; }

                        }

                         

                        function handleComplete() {

                            exportRoot = new lib.greatwhitethrone();

                         

                            stage = new createjs.Stage(canvas);

                            stage.addChild(exportRoot);

                            stage.update();

                         

                            createjs.Ticker.setFPS(lib.properties.fps);

                            createjs.Ticker.addEventListener("tick", stage);

                        }

                         

                        </script>

                        </head>

                         

                        <body onload="init();init2()" style="background-color:#D4D4D4">

                            <p>

                              <canvas id="canvas" width="700" height="1500" style="background-color:#FFFFFF"></canvas>

                        </p>

                            <p> </p>

                            <p> </p>

                            <p> </p>

                            <p> </p>

                            <p> </p>

                            <p>

                              <canvas id="canvas2" width="1200" height="1200" style="background-color:#000000"></canvas>

                        • 9. Re: Two animations on the same page html5 - toolkit for createjs
                          robdillon Most Valuable Participant

                          Look down through the code, you will see sections of the code that start with the word "function" The word that follows is the name of the function. Every line that follows that down to the closing "}" are the actual instructions that the function will perform. Starting at the top you have:

                          function init

                          function handleFileLoad

                          function handleComplete

                          function init2

                          function handleFileLoad

                          function handleComplete

                           

                          The first problem is that the function names "handleFileLoad" and "handleComplete" are repeated. Only the first copy of these functions will run, the second copy will be ignored. You will need to rename each of these functions with a unique name.

                           

                          Since these functions are called, or started, by an event, you will need to also change the eventListener reference that calls the function. in the function "init" there are two lines that look like this:

                           

                               loader.addEventListener("fileload", handleFileLoad);

                               loader.addEventListener("complete", handleComplete);

                           

                          These line add an event listener to the loader object. The second argument inside the parentheses is the name of the function that will be called when the event occurs. The event is the first argument inside the parentheses. So when the fileload event occurs, the function handleFIleLoad will be called.

                           

                          If you look at the function init2 you will see that the functions handleFileLoad and handleComplete are called again. So, if you rename the second instance of handleFileLoad to handleFileLoad2, for example, you will also need to change the name of the function to be called in the function init2. The same goes for the reference to the function handleComplete.

                           

                          Does that help?

                          1 person found this helpful
                          • 10. Re: Two animations on the same page html5 - toolkit for createjs
                            Tonyp19732 Level 1

                            HI Rob,

                             

                            I came across this thread as I have been getting the same issues. I have managed to get both animations working in the same page fine. However one of the animations supported image is not loading where as one of them is. I have put my code below, but can't seem to find the problem.

                             

                            [code]

                            <!DOCTYPE html>

                             

                             

                            <html>

                            <head>

                                <meta charset="UTF-8">

                             

                             

                                <title>animation-two</title>

                                <script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>

                                <script src="http://code.createjs.com/tweenjs-0.5.0.min.js"></script>

                                <script src="http://code.createjs.com/movieclip-0.7.0.min.js"></script>

                                <script src="http://code.createjs.com/preloadjs-0.4.0.min.js"></script>

                                <script src="animation-three.js"></script>

                                <script src="chart-animation.js"></script>

                                <script>

                            var canvas, stage, exportRoot;

                             

                             

                             

                              function init2() {

                              canvas = document.getElementById("graph");

                             

                              canvas = document.getElementById("piechart");

                              images = images||{};

                             

                             

                              var loader = new createjs.LoadQueue(false);

                              loader.addEventListener("fileload", handleFileLoad);

                              loader.addEventListener("complete", handleComplete);

                              loader.loadManifest(lib.properties.manifest);

                            }

                             

                             

                            function handleFileLoad(evt) {

                              if (evt.item.type == "image") { images[evt.item.id] = evt.result; }

                            }

                             

                             

                            function handleComplete() {

                             

                                      exportRoot = new lib.animationthree();

                             

                                      stage = new createjs.Stage(graph);

                             

                                      stage.addChild(exportRoot);

                                      stage.update();

                             

                                      createjs.Ticker.setFPS(30);

                                      createjs.Ticker.addEventListener("tick", stage);

                             

                                      

                               

                               

                                exportRoot = new lib.chartanimation();

                             

                                      stage = new createjs.Stage(piechart); 

                             

                                      stage.addChild(exportRoot);

                                      stage.update();

                             

                                      createjs.Ticker.setFPS(30);

                                      createjs.Ticker.addEventListener("tick", stage);

                            }

                             

                             

                                </script>

                            </head>

                             

                             

                            <body onload="init2();" style="background-color:#D4D4D4">

                                <canvas id="graph" width="530" height="410" style="background-color:#FFFFFF"></canvas>

                                <canvas id="piechart" width="530" height="410" style="background-color:#FFFFFF"></canvas>

                            </body>

                            </html>[/code]

                            • 11. Re: Two animations on the same page html5 - toolkit for createjs
                              robdillon Most Valuable Participant

                              I'm guessing that the problem is with the handleFileLoad function. I think that it is only running for one of the canvases and not the other. While you have combined the work of each handleComplete functions into the one function, but you may need to change the handleFIleLoad function so that it is called by each of the loaders.

                              1 person found this helpful
                              • 12. Re: Two animations on the same page html5 - toolkit for createjs
                                tanvira5454192 Level 1

                                sir robdillon

                                i have also the same problem. i renamed all but it still does not work. i guess the problem is in the two .js file . but the script of main body is one .. so how will it recognize that the script for <script src="destroy.js"></script> works and second one remains blank. the program can not understand which one came from size.js and which one is from destroy.js . is thee any solution@ !

                                 

                                 

                                <!DOCTYPE html>

                                <html>

                                <head>

                                <meta charset="UTF-8">

                                <title>CreateJS export from size</title>

                                 

                                <script src="libs/easeljs-0.6.0.min.js"></script>

                                <script src="libs/tweenjs-0.4.0.min.js"></script>

                                <script src="libs/movieclip-0.6.0.min.js"></script>

                                <script src="libs/preloadjs-0.3.0.min.js"></script>

                                <script src="destroy.js"></script>

                                <script src="size.js"></script>

                                <script>

                                 

                                var canvas, canvas2, stage, exportRoot,exportRoot2;

                                 

                                function init() {

                                  canvas = document.getElementById("canvas");

                                  images = images||{};

                                  var manifest = [

                                  {src:"images/BoQdEPj.png", id:"BoQdEPj"},

                                  {src:"images/dollarsign.png", id:"dollarsign"},

                                  {src:"images/Untitled1.png", id:"Untitled1"}

                                  ];

                                  var loader = new createjs.LoadQueue(false);

                                  loader.addEventListener("fileload", handleFileLoad);

                                  loader.addEventListener("complete", handleComplete);

                                  loader.loadManifest(manifest);

                                 

                                 

                                  loader.onProgress = handleProgress;

                                    stage = new createjs.Stage(canvas);

                                    createjs.Ticker.setFPS(22);

                                    createjs.Ticker.addEventListener("tick", stage);

                                 

                                    var progress = new createjs.Shape();

                                    var progressBellow = new createjs.Shape();

                                    var txt = new createjs.Text();

                                 

                                    progress.graphics.beginStroke("#280000").drawRect(115,112,400,40);

                                    progressBellow.graphics.beginStroke("#280000").drawRect(115,112,400,40);

                                  txt.x = 150;

                                  txt.y = 190;

                                 

                                  txt.font = ("25px Verdana");

                                  txt.color = ("#f11c35");

                                 

                                function handleProgress(event) {

                                    progress.graphics.clear();

                                    // Draw the progress bar

                                    progress.graphics.beginFill("#92ba17").drawRect(115,112,400*(event.loaded / event.total),40);

                                  txt.text = ("Loading " + 100*(event.loaded / event.total) + "%");

                                }

                                stage.addChild(progress,progressBellow,txt);

                                stage.update();

                                 

                                }

                                function handleFileLoad(evt) {

                                  if (evt.item.type == "image") { images[evt.item.id] = evt.result; }

                                }

                                function handleComplete() {

                                  exportRoot = new lib.size();

                                  stage = new createjs.Stage(canvas);

                                  stage.addChild(exportRoot);

                                  stage.update();

                                 

                                  createjs.Ticker.setFPS(12);

                                  createjs.Ticker.addEventListener("tick", stage);

                                }

                                 

                                 

                                 

                                 

                                 

                                function init2() {

                                  canvas = document.getElementById("canvas2");

                                  images = images||{};


                                  var manifest = [

                                  {src:"images/image11.jpg", id:"image11"},

                                  {src:"images/image17.jpg", id:"image17"},

                                  {src:"images/image23.jpg", id:"image23"},

                                  {src:"images/image29.jpg", id:"image29"},

                                  {src:"images/image3.jpg", id:"image3"},

                                  {src:"images/image37.jpg", id:"image37"},

                                  {src:"images/image41.jpg", id:"image41"},

                                  {src:"images/image51.jpg", id:"image51"},

                                  {src:"images/image57.jpg", id:"image57"},

                                  {src:"images/image60.png", id:"image60"},

                                  {src:"images/image60pngcopy.png", id:"image60pngcopy"}

                                  ];

                                  var loader = new createjs.LoadQueue(false);

                                  loader.addEventListener("fileload", handleFileLoad2);

                                  loader.addEventListener("complete", handleComplete2);

                                  loader.loadManifest(manifest);

                                 

                                  loader.onProgress = handleProgress;

                                    stage = new createjs.Stage(canvas);

                                    createjs.Ticker.setFPS(22);

                                    createjs.Ticker.addEventListener("tick", stage);

                                    var progress = new createjs.Shape();

                                    var progressBellow = new createjs.Shape();

                                    var txt = new createjs.Text();

                                    progress.graphics.beginStroke("#280000").drawRect(115,112,400,40);

                                    progressBellow.graphics.beginStroke("#280000").drawRect(115,112,400,40);

                                  txt.x = 150;

                                  txt.y = 190;

                                 

                                  txt.font = ("25px Verdana");

                                  txt.color = ("#f11c35");

                                 

                                function handleProgress(event) {

                                    progress.graphics.clear();

                                    // Draw the progress bar

                                    progress.graphics.beginFill("#92ba17").drawRect(115,112,400*(event.loaded / event.total),40);

                                  txt.text = ("Loading " + 100*(event.loaded / event.total) + "%");

                                }

                                stage.addChild(progress,progressBellow,txt);

                                stage.update();

                                }

                                 

                                function handleFileLoad2(evt) {

                                  if (evt.item.type == "image") { images[evt.item.id] = evt.result; }

                                }

                                function handleComplete2() {

                                  exportRoot2 = new lib.destroy();

                                stage = new createjs.Stage(canvas);

                                  stage.addChild(exportRoot2);

                                  stage.update();

                                  stage.enableMouseOver();

                                 

                                 

                                  createjs.Ticker.setFPS(24);

                                  createjs.Ticker.addEventListener("tick", stage);

                                }

                                </script>

                                 

                                </head>

                                <body onload="init();init2();" style="background-color:#D4D4D4">

                                  <canvas id="canvas" width="700" height="400" style="background-color:#ffffff"></canvas>

                                    <canvas id="canvas2" width="550" height="400" style="background-color:#ffffff"></canvas> </div>

                                  

                                </body>

                                </html>

                                • 13. Re: Two animations on the same page html5 - toolkit for createjs
                                  robdillon Most Valuable Participant

                                  I'm not sure what you are having a problem with. Is the second canvas blank?

                                   

                                  In the javascript that you quote in your message, there is a difference in the structure from the first init() function to the second. In the first init() function the functions handleProgress and handleFileLoad are both inside the init function. The handleComplete function stands alone for each init. In the second init function, init2(), the handleFileLoad2() function sits outside of the init2 function. This may or may not make a difference in execution.

                                   

                                  You are setting two different rates for the Ticker objects that you are instantiating. One for each canvas. You can have only one Ticker object. Here's a workaround that may get you the different timing that you're looking for: http://stackoverflow.com/questions/15589776/how-to-override-tick-to-lower-fps-in-multiple- stages

                                  1 person found this helpful
                                  • 14. Re: Two animations on the same page html5 - toolkit for createjs
                                    tanvira5454192 Level 1

                                    i have removed preloader to make it easier for understanding . but the same problem prevails . if i remove size.js  then destroy.js shows . whenever i remove destroy.js then size.js works  . . because both .js is called my one script . the total body has one script . so it calls destroy.js and it works . init()1 and init()2 are in inside same script . and both are using global variable 

                                    var canvas, canvas2, stage, exportRoot,exportRoot2;

                                    <body onload="init();init2(); > it only fix the canvas issue . it makes two canvas of individual sizes. but it does not fix the script issue . is there any solution . thanks

                                     

                                     

                                    <!DOCTYPE html>

                                    <html>

                                    <head>

                                    <meta charset="UTF-8">

                                    <title>CreateJS export from size</title>

                                     

                                     

                                    <script src="libs/easeljs-0.6.0.min.js"></script>

                                    <script src="libs/tweenjs-0.4.0.min.js"></script>

                                    <script src="libs/movieclip-0.6.0.min.js"></script>

                                    <script src="libs/preloadjs-0.3.0.min.js"></script>

                                    <script src="destroy.js"></script>

                                    <script src="size.js"></script>

                                     

                                     

                                    <script>

                                    var canvas, canvas2, stage, exportRoot,exportRoot2;

                                    function init() {

                                      canvas = document.getElementById("canvas");

                                      images = images||{};

                                      var manifest = [

                                      {src:"images/BoQdEPj.png", id:"BoQdEPj"},

                                      {src:"images/dollarsign.png", id:"dollarsign"},

                                      {src:"images/Untitled1.png", id:"Untitled1"}

                                      ];

                                     

                                      var loader = new createjs.LoadQueue(false);

                                      loader.addEventListener("fileload", handleFileLoad);

                                      loader.addEventListener("complete", handleComplete);

                                      loader.loadManifest(manifest);

                                     

                                    }

                                     

                                    function handleFileLoad(evt) {

                                      if (evt.item.type == "image") { images[evt.item.id] = evt.result; }

                                    }

                                     

                                    function handleComplete() {

                                      exportRoot = new lib.size();

                                     

                                      stage = new createjs.Stage(canvas);

                                      stage.addChild(exportRoot);

                                      stage.update();

                                      createjs.Ticker.setFPS(12);

                                      createjs.Ticker.addEventListener("tick", stage);

                                    }

                                    function init2() {

                                      canvas = document.getElementById("canvas2");

                                      images = images||{};

                                     

                                      var manifest = [

                                      {src:"images/image11.jpg", id:"image11"},

                                      {src:"images/image17.jpg", id:"image17"},

                                      {src:"images/image23.jpg", id:"image23"},

                                      {src:"images/image29.jpg", id:"image29"},

                                      {src:"images/image3.jpg", id:"image3"},

                                      {src:"images/image37.jpg", id:"image37"},

                                      {src:"images/image41.jpg", id:"image41"},

                                     

                                      ];

                                      var loader = new createjs.LoadQueue(false);

                                      loader.addEventListener("fileload", handleFileLoad2);

                                      loader.addEventListener("complete", handleComplete2);

                                      loader.loadManifest(manifest);

                                     

                                    }

                                     

                                    function handleFileLoad2(evt) {

                                      if (evt.item.type == "image") { images[evt.item.id] = evt.result; }

                                    }

                                     

                                    function handleComplete2() {

                                      exportRoot2 = new lib.destroy();

                                      stage = new createjs.Stage(canvas);

                                      stage.addChild(exportRoot2);

                                      stage.update();

                                      stage.enableMouseOver();

                                     

                                      createjs.Ticker.setFPS(12);

                                      createjs.Ticker.addEventListener("tick", stage);

                                    }

                                    </script>

                                     

                                     

                                    </head>

                                     

                                    <body onload="init();init2();" style="background-color:#D4D4D4">

                                      <canvas id="canvas" width="700" height="400" style="background-color:#ffffff"></canvas>

                                        <canvas id="canvas2" width="550" height="400" style="background-color:#ffffff"></canvas> </div>

                                       

                                    </body>

                                    </html>

                                    • 15. Re: Two animations on the same page html5 - toolkit for createjs
                                      robdillon Most Valuable Participant

                                      In the code that you are showing me, both size.js and destroy.js are being loaded. I have no idea what is in either of these files, or how functions are being called from either of them. If one will run but not the second, then there is a conflict inside those files. It is likely to be a problem of duplicate function names, or it may be duplicate variable or properties.

                                       

                                      Look through both files and see if you can find conflicting names.

                                      1 person found this helpful
                                      • 16. Re: Two animations on the same page html5 - toolkit for createjs
                                        binotn59132732

                                        Hello Rob,

                                         

                                        Well you can imagine that i have the same kinf of problem.

                                         

                                        Could you look at my code ?

                                        I would say, it's really basic, but the image from the second animation doesn !'t appear !

                                         

                                        <!DOCTYPE html>

                                        <html>

                                        <head>

                                        <meta charset="UTF-8">

                                        <title>Both</title>

                                         

                                         

                                        <script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>

                                        <script src="http://code.createjs.com/tweenjs-0.5.0.min.js"></script>

                                        <script src="http://code.createjs.com/movieclip-0.7.0.min.js"></script>

                                        <script src="http://code.createjs.com/preloadjs-0.4.0.min.js"></script>

                                        <script src="300x250.js"></script>

                                        <script src="860x250.js"></script>

                                         

                                         

                                        <script>

                                        var canvas, stage, exportRoot;

                                         

                                         

                                        function init() {

                                          canvas = document.getElementById("firstCanvas");

                                          images = images||{};

                                         

                                          var loader = new createjs.LoadQueue(false);

                                          loader.addEventListener("fileload", handleFileLoad);

                                          loader.addEventListener("complete", handleComplete);

                                          loader.loadManifest(libFirst.properties.manifest);

                                        }

                                         

                                         

                                        function handleFileLoad(evt) {

                                          if (evt.item.type == "image") { images[evt.item.id] = evt.result; }

                                        }

                                         

                                         

                                        function handleComplete() {

                                          exportRoot = new libFirst._300x250();

                                         

                                         

                                          stage = new createjs.Stage(firstCanvas);

                                          stage.addChild(exportRoot);

                                          stage.update();

                                         

                                         

                                          createjs.Ticker.setFPS(libFirst.properties.fps);

                                          createjs.Ticker.addEventListener("tick", stage);

                                        }

                                        function init2() {

                                          canvas = document.getElementById("secondCanvas");

                                          images = images||{};

                                         

                                          var loader = new createjs.LoadQueue(false);

                                          loader.addEventListener("fileload", handleFileLoad2);

                                          loader.addEventListener("complete", handleComplete2);

                                          loader.loadManifest(libSecond.properties.manifest);

                                        }

                                         

                                         

                                        function handleFileLoad2(evt) {

                                          if (evt.item.type == "image") { images[evt.item.id] = evt.result; }

                                        }

                                         

                                         

                                        function handleComplete2() {

                                          exportRoot = new libSecond._860x250();

                                         

                                         

                                          stage = new createjs.Stage(secondCanvas);

                                          stage.addChild(exportRoot);

                                          stage.update();

                                         

                                         

                                          createjs.Ticker.setFPS(libSecond.properties.fps);

                                          createjs.Ticker.addEventListener("tick", stage);

                                        }

                                        </script>

                                        </head>

                                         

                                         

                                        <body onload="init(); init2();" style="background-color:#D4D4D4">

                                          <canvas id="firstCanvas" width="300" height="250" style="background-color:#FFFFFF"></canvas>

                                          <canvas id="secondCanvas" width="860" height="250" style="background-color:#FFFFFF"></canvas>

                                        </body>

                                        </html>

                                         

                                        Thanks in advance !

                                        • 17. Re: Two animations on the same page html5 - toolkit for createjs
                                          rezun8 Level 4

                                          Hey Guys if any of you are using this and uploading to DCM for publishing you need to update your

                                          <script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>

                                          <script src="http://code.createjs.com/tweenjs-0.5.0.min.js"></script>

                                          <script src="http://code.createjs.com/movieclip-0.7.0.min.js"></script>

                                          <script src="http://code.createjs.com/preloadjs-0.4.0.min.js"></script>

                                          to have https   as well as checking the file version(s) for your library. DCM will throw alerts if not updated to proper version.


                                          • 18. Re: Two animations on the same page html5 - toolkit for createjs
                                            robdillon Most Valuable Participant

                                            I don't know. If you use just the first canvas, it shows correctly, yes?

                                            If you use just the second canvas, it shows correctly, yes?

                                             

                                            There is a subreddit and a Google+ for createJS. You may find better information at either of those. You can find links at the http://www.createjs.com site.

                                            • 19. Re: Two animations on the same page html5 - toolkit for createjs
                                              binotn59132732 Level 1

                                              Hummm... sorry, hours for nothing. Just missing a letter in one of my namespace !

                                              • 20. Re: Two animations on the same page html5 - toolkit for createjs
                                                tanvira5454192 Level 1

                                                I aked in stack overflow and Lanny has answered . He is a createjs specialist . And answer more than 3000 question.  This is working now . Thanks

                                                http://stackoverflow.com/questions/31901564/two-flash-cc-animations-in-the-same-html-page

                                                1 person found this helpful