1 Reply Latest reply on Feb 17, 2013 9:06 AM by WesHinsley

    Preserve aspect ratio of whole stage

    WesHinsley

      I have an animation in Edge Animate 1.5. All its elements are defined with sizes and positions by percentage (rather than px), so it currently scales to completely fill the browser window of whatever size. Is there a way of forcing the stage to preserve its aspect ratio when the browser window is resized? In my case, I want it to remain square. I wonder whether the "resize" event on the stage might be relevant? But not sure what code to put in it...

       

      Any help greatly appreciated,

      Thanks,

      Wes

        • 1. Re: Preserve aspect ratio of whole stage
          WesHinsley Level 1

          Right, almost got it, albeit in a hacky way. I edited the _edge.js file right at the end, to contain the following resize function. This forces the width and height of the stage to be equal to the smaller one of the two, and then sets left and top so that the stage is in the middle of the window if/when there is space either side. It seems to work ok - although is best done at the end, as Edge Animate removes the code if you load/save the project.

           

          The one thing left to fix is that I need to fire the resize function manually at the start - it doesn't do so automatically, and defaults to stage size 100% x 100% of the browser window. If anyone knows the best way to do that, I'd appreciate it!

           

          $(window).ready(function() {

           

               Edge.launchComposition(compId);

               $(window).resize(function() {

                    var bodyheight = $(window).height();

                    var bodywidth = $(window).width();

                    var leftPos = bodywidth;

                    var topPos = bodyheight;

                    if (bodywidth<bodyheight) bodyheight=bodywidth;

                    if (bodyheight<bodywidth) bodywidth=bodyheight;

                    $("#Stage").height(bodyheight);

                    $("#Stage").width(bodywidth);

                    leftPos=0.5*(leftPos-bodywidth);

                    $("#Stage").css("left",leftPos+'px');

                    topPos=0.5*(topPos-bodyheight);

                    $("#Stage").css("top",topPos+'px');

                   

                 });

          });

          })(jQuery, AdobeEdge, "PROJECT");