6 Replies Latest reply on Dec 30, 2015 4:11 AM by joel_pau

    Responsive Scaling to size of Stage Not Entire Window??

    ♥Schrene Level 4

      Ok so I've been out of it for several years... But I'm back.. Trying to tackle responsive design elements.

      I have an animated header I created in Edge Animate 2015.0 (latest version from the cloud): http://www.frogwebbworks.com/Header-A.html

      I have selected "Responsive Scaling"... looks great but it scales to the entire window not the Stage size... That's not what I want... and I'm not sure who would want that either???

      Anyhow I want it to be responsive but I want the initial size to be the size of the Stage (640px x 240px).

      Am I doing something wrong or is this result what is intended?????

       

       

      I tried this: Create Scale-to-Fit Projects with Adobe Edge Animate | sarahjustine.com

      The sample works great... just what I want.... but when I try to open the Edge file in Edge Animate....

      I get this error:

      Perhaps it's because it contains obsolete code like "_edgePreload.js"??

      I tried adding the provided code (shown below)  in the "compositionReady" and it doesn't work either??? http://www.frogwebbworks.com/Header-B.html

       

      var stageHeight = sym.$("Stage").height();
      
      sym.$("Stage").css({
      "transform-origin":"0 0",
      "-ms-transform-origin":"0 0",
      "-webkit-transform-origin":"0 0",
      "-moz-transform-origin":"0 0",
      "-o-transform-":"0 0"
      });
      
      
      function scaleStage() {
      var stage = sym.$("Stage");
      var parent = sym.$("Stage").parent();
      var parentWidth = stage.parent().width();
      var parentHeight = $(window).height();
      var stageWidth = stage.width();
      var stageHeight = stage.height();
      var desiredWidth = Math.round(parentWidth * 1);
      var desiredHeight = Math.round(parentHeight * 1);
      var rescaleWidth = (desiredWidth / stageWidth);
      var rescaleHeight = (desiredHeight / stageHeight);
      var rescale = rescaleWidth;
      
      if (stageHeight * rescale > desiredHeight)
      rescale = rescaleHeight;
      
      
      
      stage.css("transform", "scale(" + rescale + ")");
      stage.css("-o-transform", "scale(" + rescale + ")");
      stage.css("-ms-transform", "scale(" + rescale + ")");
      stage.css("-webkit-transform", "scale(" + rescale + ")");
      stage.css("-moz-transform", "scale(" + rescale + ")");
      stage.css("-o-transform", "scale(" + rescale + ")");
      parent.height(stageHeight * rescale);
      
      }
      
      
      $(window).on("resize", function(){
      scaleStage();
      });
      
      
      $(document).ready(function(){
      scaleStage();
      });