1 Reply Latest reply on Jan 4, 2016 11:13 PM by tomw26286927

    Responsive Flash CC Canvas Output - Need Simple Answer

    tomw26286927

      I am attempting to make my Flash project responsive under Canvas output.   I have yet to find a useful step-by-step procedure for doing this simple task.  Frankly, it should be in a snippet or tutorial, as this is something that most everyone needs to do at one point or another.  Can anyone help me?

       

      Please, no referrals to general articles about CreateJS.  Here is my output.  Given these two files generated from FlashCC, what changes need to be made so that the <canvas> element resizes to 100% of its parent container width  on page load and window resize while maintaining its aspect ratio?  I would be eternally grateful to anyone who has an answer. 

       

      PS: I urge Adobe to put some more effort into their online tutorials and snippets for the new "Adobe Animate" than they have for Flash CC so far....      Maybe I'm off-base. However, I'm currently experiencing whiplash after moving from Flash to Edge Animate (which I really liked) and now having to move back to "Adobe Animate".  Adobe needs to provide better support to its loyal developers.

       

      HTML

       

      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>fullScreen</title>
      
      <script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
      <script src="fullScreen.js"></script>
      
      <script>
      var canvas, stage, exportRoot;
      
      function init() {
        canvas = document.getElementById("canvas");
        exportRoot = new lib.fullScreen();
      
        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="600" height="600" style="background-color:#CC9900"></canvas>
      </body>
      </html>
      

       

      .JS

       

      (function (lib, img, cjs, ss) {
      
      var p; // shortcut to reference prototypes
      
      // library properties:
      lib.properties = {
        width: 600,
        height: 600,
        fps: 24,
        color: "#CC9900",
        manifest: []
      };
      
      // symbols:
      
      (lib.container = function() {
        this.initialize();
      
        // Layer 1
        this.shape = new cjs.Shape();
        this.shape.graphics.f().s("#000000").ss(1,1,1).p("A0Y0YMAoxAAAMAAAAoxMgoxAAAg");
        this.shape.setTransform(130.5,130.5);
      
        this.shape_1 = new cjs.Shape();
        this.shape_1.graphics.f("#000000").s().p("A0YUZMAAAgoxMAoxAAAMAAAAoxg");
        this.shape_1.setTransform(130.5,130.5);
      
        this.addChild(this.shape_1,this.shape);
      }).prototype = p = new cjs.Container();
      p.nominalBounds = new cjs.Rectangle(-1,-1,263,263);
      
      // stage content:
      (lib.fullScreen = function() {
        this.initialize();
      
        // Layer 1
        this.instance = new lib.container();
        this.instance.setTransform(305.5,304.5,1,1,0,0,0,130.5,130.5);
      
        this.addChild(this.instance);
      }).prototype = p = new cjs.Container();
      p.nominalBounds = new cjs.Rectangle(474.5,473.5,262,262);
      
      })(lib = lib||{}, images = images||{}, createjs = createjs||{}, ss = ss||{});
      var lib, images, createjs, ss;