5 Replies Latest reply on Jun 14, 2016 6:30 AM by kglad

    How do i add several animate-canvas in one html-file?

    Daniel_9185 Level 1

      Hi!

      I have done a two fla-files in Animate CC. Now I want to add them both into one html-file by paste the code into the html-file. However when both of them are in the html-file it doesn't work. Only one canvas is running correct, the other one i blank. I guess the reason for that is that html/javascript don't know which one to refer to. How do I fix this problem easily?

      /DJ

        • 2. Re: How do i add several animate-canvas in one html-file?
          Daniel_9185 Level 1

          Well I have tried that but doesn't seem to work.

          Down below I have pasted the two files i want to join as one, they are only trainingfiles so that content are just simple animations. I don't paste the linked js-files in here. How much do I need to change?

           

          FILE 1:

          <!--

            NOTES:

            1. All tokens are represented by '$' sign in the template.

            2. You can write your code only wherever mentioned.

            3. All occurrences of existing tokens will be replaced by their appropriate values.

          -->

           

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="UTF-8">

          <title>anim1</title>

          <!-- write your code here -->

           

          <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

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

          <script>

          var canvas, stage, exportRoot;

          function init() {

            // --- write your JS code here ---

           

            canvas = document.getElementById("canvas");

            exportRoot = new lib.anim1();

           

            stage = new createjs.Stage(canvas);

            stage.addChild(exportRoot);

            stage.update();

           

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

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

          }

           

          </script>

           

          <!-- write your code here -->

           

          </head>

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

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

          </body>

          </html>

           

           

          FILE 2:

          <!--

            NOTES:

            1. All tokens are represented by '$' sign in the template.

            2. You can write your code only wherever mentioned.

            3. All occurrences of existing tokens will be replaced by their appropriate values.

          -->

           

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="UTF-8">

          <title>anim2</title>

          <!-- write your code here -->

           

           

          <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

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

          <script>

          var canvas, stage, exportRoot;

          function init() {

            // --- write your JS code here ---

           

            canvas = document.getElementById("canvas");

            exportRoot = new lib.anim2();

           

            stage = new createjs.Stage(canvas);

            stage.addChild(exportRoot);

            stage.update();

            stage.enableMouseOver();

           

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

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

          }

           

          </script>

           

          <!-- write your code here -->

           

          </head>

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

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

          </body>

          </html>

          • 3. Re: How do i add several animate-canvas in one html-file?
            kglad Adobe Community Professional & MVP

            you need to merge those two files.  the code at that link shows most of what you need to do.  you need to use different lib names and different canvas ids.

             

            i don't see how you can do that without knowing html and js but maybe you don't need any expertise.  here's another link How to load multiple HTML5 canvas on the same page (the proper method)

            • 4. Re: How do i add several animate-canvas in one html-file?
              Daniel_9185 Level 1

              thanks...

              I have tried to follow the advises on the links you sent me.

              I know html and some javascript, but I can't make this work, I guess I'm not far away to solve it.

              I have pasted in my document here, can you find any obvious fault in it?

               

              ____________________

               

              <!DOCTYPE html>

              <html>

              <head>

              <meta charset="UTF-8">

              </head>

               

              <body>

              <script>

              var createjsfirst = createjsfirst||{};

              var createjs = createjsfirst;

              </script>

              <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

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

              <script>

              var canvas1, stage1, exportRoot1;

              function init() {

              canvas1 = document.getElementById("canvas1");

              exportRoot1 = new libfirst.anim1();

              stage1 = new createjsfirst.Stage(canvas1);

              stage1.addChild(exportRoot1);

              stage1.update();

               

              createjsfirst.Ticker.setFPS(libfirst.properties.fps);

              createjsfirst.Ticker.addEventListener("tick", stage1);

              }</script>

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

              <canvas id="canvas1" width="1000" height="480" style="background-color:#FFFFFF"></canvas>

               

              <script>

              var createjssecond = createjssecond||{};

              var createjs = createjssecond;

              </script>

              <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

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

              <script>

              var canvas2, stage2, exportRoot2;

              function init() {

              canvas2 = document.getElementById("canvas2");

              exportRoot2 = new libsecond.anim2();

              stage2 = new createjssecond.Stage(canvas2);

              stage2.addChild(exportRoot2);

              stage2.update();

              createjssecond.Ticker.setFPS(libsecond.properties.fps);

              createjssecond.Ticker.addEventListener("tick", stage2);

              }

              </script>

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

                <canvas id="canvas2" width="1000" height="480" style="background-color:#FFFFFF"></canvas>

              </body>

              </html>

              • 5. Re: How do i add several animate-canvas in one html-file?
                kglad Adobe Community Professional & MVP

                the first two errors is i see are your body tags are problematic and you have duplicate init functions.

                 

                that should look like:

                 

                function init() {

                canvas1 = document.getElementById("canvas1");

                exportRoot1 = new libfirst.anim1();

                stage1 = new createjsfirst.Stage(canvas1);

                stage1.addChild(exportRoot1);

                stage1.update();

                 

                createjsfirst.Ticker.setFPS(libfirst.properties.fps);

                createjsfirst.Ticker.addEventListener("tick", stage1);

                 

                canvas2 = document.getElementById("canvas2");

                exportRoot2 = new libsecond.anim2();

                stage2 = new createjssecond.Stage(canvas2);

                stage2.addChild(exportRoot2);

                stage2.update();

                createjssecond.Ticker.setFPS(libsecond.properties.fps);

                createjssecond.Ticker.addEventListener("tick", stage2);

                }

                 

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

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

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

                </body>