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

Question

I've been following the progress of Edge Animate (formerly Edge) ever since Steve Jobs decided he wasn't having Flash on the iPad.
With each new version I've been desperately looking for the feature that I consider the most important of all: Scale-to-fit
There are a couple of discussions already on this forum where people have requested this feature - but both have been sidetracked by replies from people who haven't understood what 'scale-to-fit' is. So let me explain Scale-to-fit:
I'm talking about the feature in Flash - where if the HTML dimensions are set to 'Percent' - then the resultant movie will scale-to-fit any browser window. Here is an example of what I mean:
http://www.skippingschool.co.uk
- try changing the browser size and you'll see the whole frame (graphics and images) scales without changing its proportions.
When the latest version of Edge Animate came out with its built-in easy-to-follow 'Resize' Lesson, I thought Adobe had finally found an answer. But good though this feature is, it doesn't solve the problem. It's only possible to properly scale-to-fit images - not graphics.
It's now more important than ever that Adobe finds a solution to this problem. The world is going 'Responsive' - its not just a fad. And 'Responsive' is not just about three columns being squeezed into one. All Responsive sites require images, graphics AND animations to scale-to-fit. So Adobe's tutorial showing how Edge Animate can be added to WordPress sites is of limited use because it won't work for Responsive web sites.
So please Adobe, will someone tell me if scale-to-fit is EVER going to happen? I don't mind if it's 3 months, 6 months, 9 months down the line - but I need to know if it's worth me sticking with Edge Animate - or whether I should be looking toward HTML5 Canvas or something else for a solution?
Alternatively, is there some fundamental reason why it can NEVER happen?
Please tell me? Just put me out of my misery!

Answer 1

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();