6 Replies Latest reply on Jun 9, 2015 9:53 AM by sinious

    How to publish a centred or scalable HTML/JAVA doc from HTML canvas

    tima73487349 Level 1

      Hi All,

      I have built an interactive animation in the HTML canvas and when I export it, it is top/left orientated. Is there a way to either make it scale to fit the browser window, or at least centre it? Thanks in advance!

        • 1. Re: How to publish a centred or scalable HTML/JAVA doc from HTML canvas
          Colin Holgate MVP & Adobe Community Professional

          Although you could move things around using Javascript in the Flash timeline, in the final web page you are likely to have other elements, and the Canvas part will be in a DIV. You should go ahead and make the HTML for the final page, and do whatever scaling and aligning you want to the DIV. Name that HTML something different to the one that Flash makes when doing a test movie. Then you can repeatedly do test movies while working on the file, not worrying about alignment, and you can open the final HTML now and then to see the intended layout.

          • 2. Re: How to publish a centred or scalable HTML/JAVA doc from HTML canvas
            sinious Most Valuable Participant

            Flash itself does not have the same HTML alignment controls as it does when exporting to SWF animation so the publish settings won't help you get that center if that's what you're wondering.

             

            As Colin mentioned, duplicating the exported HTML file and adding a tag to the container <div> to center it while renaming the file (so Flash doesn't overwrite it during testing) is a good way to go. DIV is block level by nature so simply add a horizontal centering style, e.g. <div style="margin: 0 auto;" ...><canvas ...></div>.

             

            Vertical centering would require a bunch more so hopefully horizontal is good enough. If you need veritcal then consider setting the container <div> to position:absolute and set the top property to a calculation of available: (browser height - content height) / 2 .. assuming the browser is even vertically large enough to display it.

            • 3. Re: How to publish a centred or scalable HTML/JAVA doc from HTML canvas
              tima73487349 Level 1

              Thank you both for your help. I understand what you're both saying, it makes sense to me, but unfortunatly I can seem to get it right. could I be really cheeky and ask where you would put that div tag in? here is the code. Thank you both so much for helping me out (as you can tell, I'm new to html).

               

              <!DOCTYPE html>
              <html>
              <head>
              <meta charset="UTF-8">
              <title>change curve animation flash</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="change curve animation flash.js"></script>

              <script>
              var canvas, stage, exportRoot;

              function init() {
              canvas = document.getElementById("canvas");
              exportRoot = new lib.changecurveanimationflash();

              stage = new createjs.Stage(canvas);
              stage.addChild(exportRoot);
              stage.update();
              stage.enableMouseOver();

              createjs.Ticker.setFPS(lib.properties.fps);
              createjs.Ticker.addEventListener("tick", stage);
              }
              </script>
              </head>

              <body onload="init();" style="background-color:#D4D4D4">
              <canvas id="canvas" width="1024" height="768" style="background-color:#FFFFFF"></canvas>
              </body>
              </html>

              1 person found this helpful
              • 4. Re: How to publish a centred or scalable HTML/JAVA doc from HTML canvas
                Colin Holgate MVP & Adobe Community Professional

                Below is code for a game I did. The HTML includes several different adjustments. I could explain them all, but for now look at the DIV part near the bottom.

                 

                Some of the code takes care of touch devices, to stop them from scrolling when the user drags things. One very useful line sets the number of simultaneous downloads to 6, which can greatly speed up the page load. In the style section you'll see that the canvas_holder DIV gets initialized with an animated gif, that plays while the rest of the content loads.

                 

                But as I say, start by looking at the last few lines:

                 

                <!DOCTYPE html>

                <html>

                <head>

                <meta charset="UTF-8">

                <meta name="format-detection" content="telephone=no"/>

                <meta name="viewport" content="user-scalable=no, width=320, initial-scale=.5">

                <style type="text/css"> 

                * { 

                    -webkit-touch-callout: none; 

                    -webkit-user-select: none; 

                  -webkit-tap-highlight-color: rgba(0,0,0,0);

                </style> 

                 

                 

                <title>YellowHatParty</title>

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

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

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

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

                <script src="libs/soundjs-0.5.2.min.js"></script>

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

                 

                 

                <script>

                var canvas, stage, exportRoot;

                document.ontouchmove = function(e){ e.preventDefault(); }

                //document.body.addEventListener('touchstart', function(e){ e.preventDefault(); });

                function init() {

                  var hasCanvas = !!document.createElement('canvas').getContext;

                  if(!hasCanvas){

                  alert("no canvas");

                  return;

                  }

                  canvas = document.getElementById("canvas");

                  images = images||{};

                 

                 

                  var loader = new createjs.LoadQueue(false);

                  loader.setMaxConnections(6);

                  loader.installPlugin(createjs.Sound);

                  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 handleFileLoad(evt) {

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

                }

                 

                 

                function handleComplete() {

                  exportRoot = new lib.YellowHatParty();

                 

                 

                  stage = new createjs.Stage(canvas);

                  stage.addChild(exportRoot);

                  stage.update();

                  stage.enableMouseOver();

                createjs.Touch.enable(stage,true);

                 

                 

                stage.snapToPixelEnabled = true;

                 

                 

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

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

                  canvasholder = document.getElementById("canvas_holder");

                  canvasholder.style.backgroundImage = "none";

                  canvas.style.visibility = "visible";

                }

                 

                 

                function playSound(id, loop) {

                  createjs.Sound.play(id, createjs.Sound.INTERRUPT_EARLY, 0, 0, loop);

                }

                </script>

                 

                 

                 

                       <style>

                         body, canvas, div {

                           -moz-user-select: none;

                           -webkit-user-select: none;

                           -ms-user-select: none;

                           -khtml-user-select: none;

                   /*          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);*/

                           background-color: #eee;

                         }

                 

                 

                         #canvas_holder {

                           background: #009eca url(images/loader.gif) 340px 100px no-repeat;

                           width: 900px;

                           height: 500px;

                           overflow: hidden;

                         }

                  

                         #canvas_holder canvas {

                           visibility: hidden;

                         }

                       </style>

                  

                </head>

                  <body onload="init();" style="padding:0; margin: 0; background: #fff;">

                    <div id="canvas_holder">

                      <canvas id="canvas" width="900" height="500"></canvas>

                    </div>

                </body>

                </html>

                1 person found this helpful
                • 5. Re: How to publish a centred or scalable HTML/JAVA doc from HTML canvas
                  tima73487349 Level 1

                  Thank you so much. This really helped me. I have almost sorted it. I have used %. It doesnt stay dead centered when the browser window is resized, but it's not stuck to the left anymore. Thanks again for your help!!!!

                  • 6. Re: How to publish a centred or scalable HTML/JAVA doc from HTML canvas
                    sinious Most Valuable Participant

                    You have used % as in the size of the canvas is being resized with the browser? You can still listen for the browser to resize and set a pixel value width with height set to auto (retain aspect ratio) so the centering continues to work.

                     

                    e.g. (no polyfill and just using verbosity for obviousness)

                    (function(){

                         window.addEventListener('resize', function(evt) {

                              // reference elements

                              var cDiv = document.querySelector('#canvas_holder');

                              var cEle = document.querySelector('#canvas');

                     

                              // get inner width

                              var wid = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

                     

                              // calc your %, say, 80% is desired

                              wid = parseInt(wid * .8);

                     

                              // set the width

                              cDiv.setAttribute('style', 'width:' + wid.toString() + 'px');

                              cEle.setAttribute('width', wid.toString() );

                         });

                    })();

                     

                    Again on browser resize you're just telling your outer div and canvas element to be a specific pixel size which helps the CSS applied to the div block margin:0 auto; center correctly. You don't really have any extremely complicated nesting going on here so I'm surprised %-based isn't working properly but that's probably because you have styles that aren't accounted for here.

                    1 person found this helpful