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:

       

      <html>

      <head>

      <meta charset="UTF-8">

      <title>HeadSpinning</title>

       

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

       

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

          loader.loadManifest(lib.properties.manifest);

      }

       

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

          stage.addChild(exportRoot);

          stage.update();

       

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

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

      }

      </script>

      </head>

       

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

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

      </body>

      </html>