0 Replies Latest reply on Aug 31, 2012 1:52 AM by iklesonen

    CreateJS problem

    iklesonen

      I've two HTML banners created with createJS function. They are made of two seperate FLA files.

      They are simple png sequences with no actionscript.

       

      I've to place banners in one HTML page and the problem is only one works.

      I've two canvas tags with different id. How should I change the javascripts to fix the problem.

       

      I don't have any javascripting experience so could you please help me out. Thanks!

       

      Here's my code.

       

      <head>

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

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

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

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

       

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

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

       

      </head>

       

      <body onload="init();">

       

      <script>

      var canvas, stage, exportRoot, images;

       

       

      function init() {

                canvas = document.getElementById("punanen");

                images = {};

       

       

                var manifest = [

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                ];

       

       

                var loader = new PreloadJS(false);

                loader.onFileLoad = handleFileLoad;

                loader.onComplete = handleComplete;

                loader.loadManifest(manifest);

      }

       

       

      function handleFileLoad(o) {

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

      }

       

       

      function handleComplete() {

                exportRoot = new lib.punanenpallo();

       

       

                stage = new Stage(canvas);

                stage.addChild(exportRoot);

                stage.update();

       

       

                Ticker.setFPS(24);

                Ticker.addListener(stage);

      }

      </script>

       

       

       

       

      <script>

      var canvas, stage, exportRoot, images;

       

       

      function init() {

                canvas = document.getElementById("vihree");

                images = {};

       

       

                var manifest = [

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                ];

       

       

                var loader = new PreloadJS(false);

                loader.onFileLoad = handleFileLoad;

                loader.onComplete = handleComplete;

                loader.loadManifest(manifest);

      }

       

       

      function handleFileLoad(o) {

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

      }

       

       

      function handleComplete() {

                exportRoot = new lib.vihreepallo();

       

       

                stage = new Stage(canvas);

                stage.addChild(exportRoot);

                stage.update();

       

       

                Ticker.setFPS(24);

                Ticker.addListener(stage);

      }

      </script>

       

       

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

       

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