Are Adobe EVER going to make Edge Animate scale-to-fit (like Flash)?

Hello,

Have you tried to fix the stage dimensions in %, your objects position and dimensions in %.

I tried and object are proportionnaly resized when the browser window is resized.

One problem : the text size.

Olivier

I have a tutorial in the queue on how to do this. Stay tuned

As promised :)

http://www.youtube.com/watch?feature=player_embedded&v=hrLt0Y9QAY8

Cool Sarah! Thank you for taking the time to create another great tutorial.

Awesomeness!

Thanks Sarah

d

Sarah, this is a great tutorial. Thank you.

On the youtube page it points to the files at: http://sarahjustine.com/2013/04/07/create-scale-t...e-edge-animate/ which returns a "Page not found" (although it shows the home page content and is currently easy to find the content).  Just thought you might want to know about the bad link on the YouTube page.

Whups! Should work now

Thanks for the great tutorial!  Very informative indeed!

One question I have, however, is that the example seems to scale well when resizing the browser window horizontally, but there seems to be no effect with regards to resizing the window vertically and having the Stage resize proportionally with the Scale-to-Fit behavior that the OP was looking for?  For example, if I resize the browser window to a height that is smaller than the current height of the stage, the browser window will start showing a vertical scroll bar rather than proportionally scaling down the stage so the the entire stage remains visible.  Is this something that the sample files should be demonstrating or did I miss something?

Hi jkuo,

The reason for this is so when your animate composition is placed inside your website, it doesn't get all jacked up based on the height of the viewport. This treads into vertical RWD territory which can lead to unexpected results. You can try playing for yourself by changing the width parameters to height in the sample.

Sarah

Hi Sarah,

I hope you don't mind but I played around with your code a bit and managed to get the kind of scale-to-fit behavior that I believe the OP was asking about.  I think the trick is to make sure that you also check whether the scaled height of the stage exceeds the height of the browser window and change the scaling so that it is responsive to changes in both the width and height of the window, whichever is the limiting factor. The code I changed in CompositionReady appears in bold below.  I hope this helps.

sym.$("#Stage").css({ // Set the transform origin so we always scale to the top left corner of the stage

"transform-origin":"0 0",

"-ms-transform-origin":"0 0",

"-webkit-transform-origin":"0 0",

"-moz-transform-origin":"0 0",

"-o-transform-origin":"0 0"

});

function scaleStage() {

    var stage = sym.$('Stage'); // Set a reusable variable to reference the stage

    var parent = sym.$('Stage').parent(); // Set a reusable variable to reference the parent container of the stage

    var parentWidth = stage.parent().width(); // Get the parent of the stage width

    var parentHeight = $(window).height(); // Get the browser window height

    var stageWidth = stage.width(); // Get the stage width

    var stageHeight = stage.height(); // Get the stage height

    var desiredWidth = Math.round(parentWidth * 1); // Set the new width of the stage as it scales

    var desiredHeight = Math.round(parentHeight * 1); // Set the new height of the stage as it scales

    var rescaleWidth = (desiredWidth / stageWidth); // Set a variable to calculate the new width of the stage as it scales

    var rescaleHeight = (desiredHeight / stageHeight); // Set a variable to calculate the new height of the stage as it scales

    var rescale = rescaleWidth;

    if (stageHeight * rescale > desiredHeight) // Do not scale larger than the height of the browser window

                    rescale = rescaleHeight;

// Rescale the stage!

           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); // Reset the height of the parent container so the objects below it will reflow as the height adjusts

}

// Make it happen when the browser resizes

$(window).on('resize', function(){

           scaleStage();

});

// Make it happen when the page first loads

$(document).ready(function(){

    scaleStage();

});

Nice! I intentionally left that part out since in the website example I provided checking for height would've jacked up the layout. Good to have the use cases covered, thanks for sharing!

Sarah

there is a way to resize the stage by height instead width? thank's!

Hey Ralph,

Glad you liked it! Though I don't think I entirely understand what you're trying to accomplish. In the sample files I posted the composition is centered:

http://sarahjustine.com/demos/scaletofit/

Is that what you're trying to do?

Sarah

A few tweaks to the Edge HTML / CSS and you're good to go.  Inside Edge, make sure all height and width units are set to percentage (including the stage).  This technique also works well with non-Edge content, no jQuery required.

HTML:

<body>

    <div id='aspectwrapper'>

        <div id='content'>

            <!-- The Good Stuff Lives Here -->

        </div>

    </div>

</body>

CSS:

#aspectwrapper {

          display:inline-block;

          width:100%;

          position:relative;

}

#aspectwrapper::after {

          padding-top:56.25%;

     // Use this percentage for 16:9, get yours via: Height / Width * 100

          display:block;

          content:'';

}

#content {

          position:absolute;

          top:0;

          bottom:0;

          right:0;

          left:0;

          overflow:hidden;

}

THANK YOU BigMucho for this tweak!  I've been trying to find an answer to this for days. My banner animation is now responsive on all devices.  :-)  I'm going to share your info (with credit to you of course), on another thread. [http://forums.adobe.com/message/5398804#5398804]

Later update: Unfortunately I ran into some difficulties with the html/css solution later, and couldn't get them resolved. So, I took the time to watch Sarah's video (link in earlier post) and that allowed me to create a new animation that is fully responsive/scalable. (http://www.pencilplace.com)

Hello,

thank you very much for the solutions, they work very well! :-)

A last problem remaining is with Firefox, where i get a lot of white space left under the scaled animation and with IE9, where the space is under and right the animation. The scroll is therefore active, what could it be? What can i do?

Thank you

Cheers Cece

Thank you this works perfectly in Edge Animate CC. I had a fix that did work with Edge Animate CS6 version, but this one works perfectly. I have spent hours and hours trying to find a fix for this!

I just tried BigMucho's advice on this project, but the content is still appearing top left no matter what. And it's only scaling 100% height or width, but not both. Where am I going wrong on this? I already tried addingg text-align: center; and margin: 0 auto; in a number of places but it didn't change a thing.

Also, I notice with this method that my preloader image, which should be centered, isn't even close. It's more like the bottom right when I test. How can I make certain this is centered when this is running? It's very important! We're going to be loading a lot of scripts here eventually.

I have the same problem as RalphDCW.

Has anybody found a solution for this?

Absolutely spot on. Many thanks, Sarah, it all works brilliantly.

Just one thing, though... is there any way to apply the same scaling to preloader content? As it stands, the preloader remains at its actual size whilst running - or at least it fails to scale up in the same way as the main stage - which means there's an unpleasant, visual 'leap' when the main animation runs and fills the window. Any tips or a steer in the right direction would be hugely appreciated

Cheers!

Frannie x's

PS: I also posted my request on your YouTube vid coments but will indicate in both posts if a solution's found

Hi jkuo1

This code only works on Chrome....Firefox is a diaster.

PLEASE HELP ME!

I am so sorry but I am beyond desperate. I keep finding so many forums that point back to your script, which I am sure means that it is correct, but my animation refuses to work.

Essentially I have the same problem as everyone else, I am trying to get my parallax animation to adjust to the screen size. I have watched your tutorial video and read other forum threads, but I cannot get it to work. I have tried fixing it in dreamweaver, muse and animate, and still nothing. And I tried opening a new file, pasting only that script in the compReady command and running that, still nothing :[

What am I doing wrong?

I had just about pulled all my hair out on this.  Nothing has worked except your scripts! Thank you bigmucho now I can sleep again!

Hi,

thank you all of you for you guidence and your helpfull advices.

Currently, I used the above updated Sarah's code by jkuo1 to fit-scale the composition but. it doesn't work good.

The height works great but the width doesn't work well, it appears a blank area at the right of the screen. It doesn't fit on it.

As the image below.

How is possible to fit in the window?

Cool, thanks! Is it possible to achieve the same thing with a published .oam file and then dropped into muse? I'm simply looking to have animation adge animate project span to both edge of the browsers widths but keep the animation centered... HELP!