6 Replies Latest reply on Oct 27, 2014 7:26 AM by robdillon

    Where do I place the different parts of the HTML 5 published files on a web page?

    Mr. Baker the Shoe Maker Level 1

      I recently published an HTML 5 canvas document from Flash. Once the files are published where do they go on a web page? For example, lets say I had 3 animations published from Flash as HTML canvas objects. The files go on different parts of page, let's say in 3 different places in the body. Flash outputs the HTML file, JavaScript file, and whatever images in an 'images' folder. I'm not sure where I would place all these files on my web site. I know the JavaScript goes in the head of the index page. However, where do the other parts go? Further, if I have multiple HTML canvas objects how do I separate the code.


      All of the tutorials demonstrate how to publish the file, but give no assistance on how to place the file or files on a web page.


      Below is example code from a sample files:




      <meta charset="UTF-8">



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

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

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

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

      <script src="HeadSpinning.js"></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);




      function handleFileLoad(evt) {

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



      function handleComplete() {

          exportRoot = new lib.HeadSpinning();


          stage = new createjs.Stage(canvas);





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





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

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