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>





          <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>


      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);





      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);






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





          exportRoot = new lib.chartanimation();


                stage = new createjs.Stage(piechart); 






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








      <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>