2 Replies Latest reply on Sep 13, 2017 6:28 AM by ClayUUID

    two animations on the same page Html5 canvas (flash cc)

    Tonyp19732 Level 1

      Hi all,

       

      I have been using Flash CC to create some nice html5 animations and I am really enjoying it. However I wanted to add more than one animation to the same page. I have managed to get two animations running on the same page, but I am having some issues whereby only one of the animations load the supported images where as the second one does not. I have pasted my code below, any help would be gratefully received. In the long term I want to add many animations to the same page, so would appreciate some help on how this can be done more efficiently. Many thanks in advance.

       

      <!DOCTYPE html>

       

       

      <html>

      <head>

          <meta charset="UTF-8">

       

       

          <title>animation test</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 init() {

        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="init();" 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>