Create Scale-to-Fit Projects with Adobe Edge Animate

Update: Thanks for all your feedback guys — this tutorial is now a shipping feature in Edge Animate CC (3.0)! Learn more about the new features on YouTube or just go get it from creative.adobe.com

In this tutorial I’ll show you how to create scale-to-fit compositions with Adobe Edge Animate which keep their aspect ratio on resize.

See the live sample

Download the sample files

Enjoy!

Update: You guys have been asking how to make this script respond to height, and one of our awesome Animate forum users wrote up the solution (thanks jkuo1!)

To make this script work with height and width, change the compositionReady code to this (just copy all and replace the existing code from the sample):

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

991,863 total views, 176 views today

Posted on April 8, 2013 by Sarah · 98 comments

98 comments

  1. Johan Grönwall
    - Reply

    Hi,

    thanks for the scaling script!

    Have been haunting the forums for a solution like this for some time now. I’m no coder (but great at cut and paste…) so I’m most grateful since your script seems to solve my problems!

    Regards
    Johan

    1. Johan Grönwall
      - Reply

      Hi again,

      I’m using WordPress and the Edge Animate plug-in to import the .oam file. Then I use a shortcode to place it on a page.

      This somehow seems to break the code you created, since the project refuses to scale. But it scales perfectly when I preview it from Edge Animate.

      Any idea as to why would be appreciated!

      Regards

      Johan

      1. Sarah Author
        - Reply

        Hey Johan,

        I was able to get this to work, but not using shortcodes.

        Follow the same method of uploading an OAM as you normally would. We’re going to use HTML instead of shortcodes, and Edge Suite will still populate your page with the necessary files.

        Instead of the shortcode, use this:

        <div style="width:100%; height:auto"><div id="Stage" class="EDGE-78729757"></div></div>

        You can change the width to be whatever % you want and add some more inline CSS. Grab the class name from whatever Edge Suite reports from the composition:

        Hope this helps!

        1. Johan
          - Reply

          Hi Sarah,

          thanks for taking time to answer!

          I’m afraid I can’t get this to work i my WP (version 3.3.1 with a theme called Modernize). I have changed the class name and all. The div shows up with Firebug (the html inspector) but the page is empty where the animation is supposed to be. Maybe it can’t find the .oam file?

          If you have any more ideas I’m willing to try them!

          I have contact with the plug-in developer who’s going to have a look at my .oam file. Maybe I screwed something up. I’ll keep you posted about what he comes up with.

          Regards

          Johan

  2. Paul
    - Reply

    This is great. I was wondering if I could set up edge animations to do this. Side question: Will there be a way to bring edge animations into Adobe Reflow?

  3. thothadri
    - Reply

    hi sarah,

    i have a doubt. When I just alter the height of the browser, the animation doesn’t rescale.

    How to work on this ? any hint ?

  4. Sam
    - Reply

    Is there a way to modify this so the project doesn’t maintain its aspect ratio? Or maybe scale by the window’s height instead of its width? I’ve been playing around with this and haven’t been able to figure it out.

  5. Derrick
    - Reply

    Outstanding Sarah!! Well done, and very helpful.
    Thanks a lot.
    You, and Edge, are game-changers.
    Keep up the great work!

  6. John
    - Reply

    Thanks for creating this tutorial, it’s fantastic. I’ve been playing around (I’m only a beginner with JavaScript,) but I can’t seem to get my animation to scale to the device’s height rather than the width.

    I’ve spent ages, no luck. Please help Sarah!

  7. Robert
    - Reply

    Hi Sarah,

    Thank you very much for your useful video.

    I only have an issue with it:

    My Graphics go blurry after I use your code, I think it ‘s because the original aspect ratio is not maintained after this code. And also I can not zoom in or out, it only responds if the window resizes.
    when you try to zoom in or out the graphics go blurry and on zoom in the get better.

    Thank you again for your help if there is a solution to this.

    Best,

    Robert

  8. Lee
    - Reply

    Great post and really helpful, thank you. Quick question – Is it possible to restrict the max width? I need it to stop at 1014.

    I really like your tutorials; to the point and always helpful.

    Thanks again and any help would be much appreciated.

    Lee.

  9. Joe
    - Reply

    Hey Sarah I think this solution is great for anyone making a full width element, but I actually have animated a call to action button for a sidebar. I did try the script from: http://forums.adobe.com/message/5217041#5217041
    But with no luck. for one reason or another my animation then re-sized, but not respective to the sidebar they were contained in…..alas I feel I am stuck to deal with the distortion issues. :( as I am not a javascript programmer.

  10. Waldorf
    - Reply

    Sarah,

    Thank you so much for providing this great solution. I’ve been developing a mobile app using Edge Animate and PhoneGap, and I’ve been struggling with the problem of how to display the app on Android devices with different screen sizes. Your code saved the day!

  11. Ash
    - Reply

    Hi, this works great with my animation, thanks so much. I also have audio attached and the sync gets wildly screwed up when the project is scaled. I have the following code managing the sound and I feel that it needs to be nested inside the scale function somehow so that the sound doesn’t play before the scaling operation is complete. Being a coding novice I’m not sure how to do that. Any help would be appreciated. Thanks.

    var logoSound = new buzz.sound (“audio/logomix” , {formats: [ “ogg”, “mp3”, “m4a”]});
    logoSound.bind(‘loadeddata’ , function(e) {

    //Playing the stage
    var stage = Edge.getComposition(compId).getStage();
    stage.play();

    //Playing the sound
    logoSound.play();

    });

    Symbol.bindElementAction(compId, symbolName, “${_Stage}”, “touchstart”, function(sym, e) {
    // insert code to be run when a user touches the object (for touch devices only)
    logoSound.load();

    });
    //Edge binding end

    Symbol.bindElementAction(compId, symbolName, “${_Stage}”, “mouseover”, function(sym, e) {
    // insert code to be run when the mouse hovers over the object
    logoSound.load();

    });

  12. Simon
    - Reply

    Hi Sarah, this is exactly what I’ve been looking for! I have added the compositionReady script from your example download to the compositionReady in my own Stage, but in the browser it just won’t re-size :(

  13. Pingback: Best of Edge Animate Workflow Samples « Heathrowe

  14. bewong
    - Reply

    If you update the mouse move function you can make the parallax scrolling a percentage of the window size.

    // Control the timeline with the mouse cursor
    this.onMove = function( posX, posY ){
    var stageWidth = sym.$(“Stage”).parent().width();
    timelineControl = Number(posX)/stageWidth*10000;
    sym.stop(timelineControl);
    }

  15. bewong
    - Reply

    // Control the timeline with the mouse cursor
    this.onMove = function( posX, posY ){

    var numX = sym.$(“Stage”).parent().parent().position().left;
    var stageWidth = sym.$(“Stage”).parent().width();
    timelineControl = ((Number(posX)-numX)/stageWidth)*10000;
    console.log(numX);
    sym.stop(timelineControl);
    }

  16. bewong
    - Reply

    Another way would be to use offset() instead of position() :

    this.onMove = function( posX, posY ){
    var numX = sym.$(“Stage”).offset().left;
    var stageWidth = sym.$(“Stage”).parent().width();
    timelineControl = ((Number(posX)-numX)/stageWidth)*10000;
    sym.stop(timelineControl);
    }

    Now the parallax timeline animation is calculated in relation to the stageWidth and it’s left position relative offset to the page centering. Hope this makes sense.

    1. Sarah Author
      - Reply

      Hmm I’m not sure what the issue is, it works fine for me on my iPad. Are you seeing issues with the sample file? If you wanna link me to your project I can take a look.

      Sarah

  17. Brian Sullivan
    - Reply

    This is great, Sarah. Works really well. I had trouble trying to use the .oam file, but when I copied and pasted the code from the HTML file like you suggested, that worked great.

    One problem I am having with it, though, is when I paste the code into my div, there is about a 5 pixel margin between the Edge animation and the div above it that I cannot get rid of. I think someone on the YouTube mentioned having the same issue, but it was not resolved on there. Any suggestions?

    Thanks,

    Brian

  18. Nathan
    - Reply

    Hi Sarah,

    Thanks for the great demo, I’m trying to fuse this code with Simon Widjaja’s adaptive Layouts. I don’t have much of a clue when it comes to coding but I’ve managed to achieve this in a useable way, however I’m wondering if a little more code could be added to make this work perfectly.

    So I have my adaptiveContainer with two different layout symbols (“Layout500” and “Layout300”) so every window size 500px width and above Layout500 will be displayed, with your responsive code it will scale to best fit whatever the browser size is when it loads and will scale up or down when you resize window, until the window goes below 500px width then it will call upon the smaller layout to be displayed, which is exactly what I want. I also have this scale function set up for the smaller layout. But going from one layout to another the scaleStage function breaks because there is nothing to tell it to function when this occurs. So the problem I’m facing is your responsive code only works one time on one symbol (whichever is being displayed at the time the page loads) which is of course what is meant to happen but is there any code I could add so the scaleStage will also function anytime the adaptiveLayout calls upon a different layout symbol? If it’s possible to get this to work it would be amazing.

    Any help is appreciated.

    Thanks

    1. Sarah Author
      - Reply

      Hey Nathan,

      I haven’t tested this yet with the adaptive layout from EdgeCommons.org — if you can get a hold of Simon he might be a better person to ask! :)

  19. Frederick
    - Reply

    My Edge Animate project has a sym.stop() to pause the animation so that the user can click on the menu to branch to a labelled point in the timeline. After inserting the codes, the sym.stop() doesn’t work and the animation plays the entire length of the timeline. How can this be fixed?

    Thanks!

    1. Sarah Author
      - Reply

      I wonder if you might have a code error? If there’s a JS error your comp can go wonky. Preview your file in Chrome and hit Cmd+Opt+I then click on “Console”. If there’s errors that’ll give you a hint where to look.

  20. Simon
    - Reply

    Hi Sarah,

    I love this tutorial video, but at my project it just doesn’t work at all :-/
    I tried different browsers, but there was no reaction to the scaling whatsoever. (also no error messages 😉

    Are there any other settings within the project or the stage I should take into account?

    Cheers,
    Simon

  21. Simon Again
    - Reply

    Never mind. I’ve found the bug. In the example code on this page the first line is missing:

    var stageHeight = sym.$(‘Stage’).height();

    I’ve copied the code from your example file and that one works sweet like a baby.

    Cheers,
    Simon

  22. Richard Geer
    - Reply

    Great tutorial. I am planning to use this in a new design but the point of origin will be the top center of the browser. Is this easy to change in the script from the top left? Forgive me, I am not a great coder.

    1. Sarah Author
      - Reply

      Ehhhh you can try but I ran into issues when writing the script when changing the origin. You might be better off applying these attributes to your wrapper, so something like:

      <div style="width:80%; margin:0 auto;">
      <div id="Stage" class="EGDE-xxxx"></div>
      </div>

  23. William Patin
    - Reply

    Nice tutorial, I’m having a problem with WordPress though. I’ve read your tip about using HTML in order to embed an animation, and it apparently fixes the problem I’m facing. Unfortunately, the HTML code won’t load the animation, if I don’t use the Edge Suite shortcode before.

    But first, to my initial problem:
    When implementing the javascript code from your tutorial, the animation shows up somewhere near the center of my WordPress site, and it also is being scaled by the center – not by the top-left corner as I’d expect. But, using your HTML code seems to solve this issue…

    Your HTML shortcode:
    Using your HTML code fixes the issue described above, but it only works in parallel with the Edge Suite shortcode. If I use your HTML code only, the javascript scripts don’t get loaded and nothing shows up. How did you get the scripts to load while using the Edge Suite plugin and your HTML code?

  24. William Patin
    - Reply

    Hey Sarah, I sent a comment about my WordPress issue before – it’s solved. I had not seen the extra Edge Suite custom field at the bottom of the dashboard for every post & page. Using your code + selecting the desired comp totally works now :)

    Tank you!

  25. Marc Kline
    - Reply

    This is excellent – exactly what I needed. So, thank you! As an aside, while I appreciate the simplicity of outputting directly to an HTML package with a single click from Edge Animate, I wonder if Adobe will consider adding some implementation options (e.g. also where html, images, js files will “live”) somewhere such as the save dialog.

    The app is so fun and simple to use. If implementation could be made that much easier, I’d think it’d be as much more appealing, especially to the less advanced user. I know that the modern web designer needs also to be capable of handling some JavaScript, but it’s nice to take a break from the fiddling every once in a while. Otherwise I’d do all but advanced animation using a text editor and a browser.

    I don’t expect a response from you, especially not on behalf of Adobe. And I know that my mental model of the problem is oversimplified. I’m just providing some user feedback in the most relevant place I’ve come across.

    Thanks again!

    1. Sarah Author
      - Reply

      Hey Marc,

      Thanks for your comment! Easier management of where your files are saved is something on our radar.

      In the meantime (and full disclosure, this is quite hacky) if you’re looking for a way to change the path of your Animate dependent files you can check out a tutorial I wrote up on the Animate blogs for changing the path of linked assets. Not an ideal solution and going forward we’ll be looking for ways to add this natively in the tool, but it’s a start.

      Cheers,
      Sarah

  26. Nick
    - Reply

    Hey

    Nice article – I can’t get your sample files to work – it comes up with a blue square.

    Does it require a certain version of Edge? Thx…

  27. Nick
    - Reply

    Hey

    Further to my last comment – I have tried the sample files with Edge 1.0 – and Edge 1.5 (current CC version).

    I really need to get this working so would really appreciate any help – thanks!

    1. Sarah Author
      - Reply

      Hey Nick,

      The latest version is actually 2.0. Can you check the “About Edge Animate” box inside of AN to see which version you’re running?

      Cheers,
      Sarah

      1. Nick
        - Reply

        Sorry I was wrong – it is actually version 2.0.1.268.25632

        I am loading the clouds.an file. It loads clouds.html – but the timeline is totally empty and no assets are on the stage.

        Does it work your end?

  28. fxman
    - Reply

    Hi Sarah,
    Thanks so much for the example, it works great. The problem I’m having is as soon as I add another EA comp to the page neither work. Only the header EA comp is using the script. The other EA comp is a simple scroller. They work fine together until I add the resize js to the header EA comp. Any ideas?

    Thanks again for all you help and hard work!

    1. Sarah Author
      - Reply

      Hey there,

      How are you embedding the EA comp? If they’re both directly on the page, be sure to rename the stage ID of one to something else (such as #Stage1)

      Sarah

  29. Bristol
    - Reply

    Nice tutorial! Thank You!… but had one problem.
    Wanted to align in center of page (not top left).
    So I changed css: ‘transform-origin’:’center 0′, and so on.
    Everything is fine when I resize browsers height – it scales and sits in center. But problem starts, when I resize browsers width. It sits in same place and not moving in center of new width…
    What Im missing?
    $(window).on(‘resize’, function() shows in console, that Im getting new width size in pixels…somehow cant manage to work css to transform stage to new horizontal center…
    Maybe someone can point me out where to look for solution…

    1. Bristol
      - Reply

      Ok, figured it out…
      In the scaleStage() function after line: parent.height(stageHeight * rescale);
      add two lines:
      var left_distance = (desiredWidth – Math.round(stageWidth * rescale))/2;
      stage.css(“margin-left”,””+left_distance+”px”);

    2. Sarah Author
      - Reply

      I had some problems by changing the transform origin to anything beside the top left with different browsers. IE and FF were especially bad for this.

      Not sure what exactly it is you’re trying to do, but have you wrapped the AN stage in another div with a percentage based width and centered that on your page? This is what I did on the HTML example provided with the downloads.

      Sarah

  30. Sarah
    - Reply

    This is a great tutorial!
    I’ve been having issues adding variables to my css code. I tried your format but it hasn’t been working. Do you know where I could be going wrong?

    var width = sym.$(window).width();
    var sideSit = width – 26;
    var sortSit = width – 120;
    var slideIn = sideSit – 423;

    function windowSize() {
    if (width > 1024){
    var mySideMenu = sym.createChildSymbol(“sideMenu”, “Stage”);
    var mySort = sym.createChildSymbol(“ideasSort”, “Stage”);

    mySideMenu.getSymbolElement() .css (‘left’, ‘(‘+ sideSit +’)px’);
    mySort.getSymbolElement() .css (‘left’, ‘(‘+ sortSit +’)px’);
    mySort.getSymbolElement() .css (‘top’, ’65px’);
    console.log (“width = ” + width + “, side menu left = ” + sideSit + “, sort buttons = ” + sortSit);
    }

    Thanks for your help :)

    1. Sarah Author
      - Reply

      Hard to tell without seeing the whole project. Have you tried checking the console? In Chrome (or any other browser) go to View > Developer > Developer Tools and click on the “Console” tab. That should give you some feedback on where to look for problems.

      Sarah

  31. Stephen
    - Reply

    Great tutorial!
    The animation does scale for me with the width and height.

    One problem for me is that I would like to have a max-width and max-height instead of completely scaling all the way to the end of the browser window.

    is this possible?

  32. Sven
    - Reply

    I did’t work for melike this, so I made some changes.
    Additionally, I have added some code for max-width.

    sym.getSymbolElement().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"
    });
    var defaultWidth = sym.getSymbolElement().parent().width();
    function scaleStage() {
    var stage = sym.getSymbolElement(); // Set a reusable variable to reference the stage
    var parent = 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;

    //if (desiredWidth > 1024 ) // Do not scale larger than default
    //rescale = 1;

    // 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

    }

  33. Kamson
    - Reply

    My animations worked great with your code, but after the upgrade to Edge Animate CC (3.0)! stopped. That means they are responsive but previously worked better.
    When I increase the size of the window in chrome size of the animation does not change up to date. Adding a div after animation is a little help, but when I turn the screen on my smartphone, I have to refresh the page so that the animation has adapted to the screen.

    1. Sarah Author
      - Reply

      Did you try the responsive scaling feature inside of Animate? If you click on the properties for the stage you can check it on or off. It’s the same feature as this tutorial, just shipping with the product.

      1. Qusai87
        - Reply

        I know, but I need to enable it without the UI of the app 😉

        I think it works at last , here is my work (so far)

        I make script file before edge preloaded , and override AdobeEdge.requestResources and AdobeEdge.launchComposition methods :)

        /* —————————————— */

        window.AdobeEdge = window.AdobeEdge || {};
        // AdobeEdge._readyplayers = AdobeEdge._readyplayers || [];
        // AdobeEdge._readyplayers.push(function () {

        // });

        window.loadResourceComplete = function (url)
        {
        if (url == AdobeEdge.preload.last && (isAndroid || emulateMobile))
        {
        //alert(‘all assets loaded’);
        //alert(AdobeEdge.compositionDefns[window.compId]);

        for(var i in AdobeEdge.compositionDefns)
        console.log(‘Composition’, window.compostion = AdobeEdge.compositionDefns[i]);

        if (window.compostion)
        {
        window.compostion.symbolData.stage.scaleToFit= “both”;
        window.compostion.symbolData.stage.centerStage= “both”;
        if (window.compostion.symbolData.stage.states[“Base State”][“${_Stage}”][2][1]== “height”)
        window.compostion.symbolData.stage.states[“Base State”][“${_Stage}”][2][2] = window.compostion.symbolData.stage.states[“Base State”][“${_Stage}”][3][2] == “1024px” ? “768px” : window.compostion.symbolData.stage.states[“Base State”][“${_Stage}”][3][2] == “320px” ? “480px” : “1024px”;

        alert($(‘body’).width()+”x”+$(‘body’).height());

        //addNewStyle(“body,#Stage {max-width:px !important;max-height:px !important}”);
        }

        AdobeEdge.launchComposition = function (compId) {
        console.log(‘load all assets complete!’,compId);
        var defn = AdobeEdge.compositionDefns[compId];
        if (defn) {
        defn.launchCalled = true;
        AdobeEdge.launchComposition(compId);
        }
        };
        }
        }

        AdobeEdge.requestResources = function( files, cb ) {

        //alert(‘override requestResources!’);

        AdobeEdge.yepnope.errorTimeout = 4000;
        AdobeEdge.preload.busy = true;
        AdobeEdge.preload.got = AdobeEdge.preload.got || {};
        var i, f, len = files.length, a = [], o;
        for ( i = 0; i < len; i++ ) {
        o = files[i];
        if(typeof o === "string") {
        if (o.indexOf("//") === 0 && window.location.href.indexOf("file://") === 0) {
        o = "http:" + o;
        }
        url = o;
        o = {load: url};
        }
        else {
        if (o.load && o.load.indexOf("//") === 0 && window.location.href.indexOf("file://") === 0) {
        o.load = "http:" + o.load;
        }
        url = o.yep || o.load;
        if(o.callback) {
        var fnCb = o.callback;
        o.callback=function(u,r,k){
        if(fnCb(u,r,k)) {
        cb(u,r,k);
        }
        };
        }
        }
        if(!o.callback) {
        o.callback = function ( url, result, key) {window.loadResourceComplete(url);cb( url, result, key);};
        }
        if ( !AdobeEdge.preload.got[url] ) {
        a.push( o );
        AdobeEdge.preload.last = url;
        }
        }
        if ( a.length ) {
        AdobeEdge.yepnope( a );
        }
        }
        window.AdobeEdge = window.AdobeEdge || {};
        // AdobeEdge._readyplayers = AdobeEdge._readyplayers || [];
        // AdobeEdge._readyplayers.push(function () {

        // });

        window.loadResourceComplete = function (url)
        {
        if (url == AdobeEdge.preload.last && (isAndroid || emulateMobile))
        {
        //alert('all assets loaded');
        //alert(AdobeEdge.compositionDefns[window.compId]);

        for(var i in AdobeEdge.compositionDefns)
        console.log('Composition', window.compostion = AdobeEdge.compositionDefns[i]);

        if (window.compostion)
        {
        window.compostion.symbolData.stage.scaleToFit= "both";
        window.compostion.symbolData.stage.centerStage= "both";
        if (window.compostion.symbolData.stage.states["Base State"]["${_Stage}"][2][1]== "height")
        window.compostion.symbolData.stage.states["Base State"]["${_Stage}"][2][2] = window.compostion.symbolData.stage.states["Base State"]["${_Stage}"][3][2] == "1024px" ? "768px" : window.compostion.symbolData.stage.states["Base State"]["${_Stage}"][3][2] == "320px" ? "480px" : "1024px";

        alert($('body').width()+"x"+$('body').height());

        //addNewStyle("body,#Stage {max-width:px !important;max-height:px !important}");
        }

        AdobeEdge.launchComposition = function (compId) {
        console.log('load all assets complete!',compId);
        var defn = AdobeEdge.compositionDefns[compId];
        if (defn) {
        defn.launchCalled = true;
        AdobeEdge.launchComposition(compId);
        }
        };
        }
        }

        AdobeEdge.requestResources = function( files, cb ) {

        //alert('override requestResources!');

        AdobeEdge.yepnope.errorTimeout = 4000;
        AdobeEdge.preload.busy = true;
        AdobeEdge.preload.got = AdobeEdge.preload.got || {};
        var i, f, len = files.length, a = [], o;
        for ( i = 0; i < len; i++ ) {
        o = files[i];
        if(typeof o === "string") {
        if (o.indexOf("//") === 0 && window.location.href.indexOf("file://") === 0) {
        o = "http:" + o;
        }
        url = o;
        o = {load: url};
        }
        else {
        if (o.load && o.load.indexOf("//") === 0 && window.location.href.indexOf("file://") === 0) {
        o.load = "http:" + o.load;
        }
        url = o.yep || o.load;
        if(o.callback) {
        var fnCb = o.callback;
        o.callback=function(u,r,k){
        if(fnCb(u,r,k)) {
        cb(u,r,k);
        }
        };
        }
        }
        if(!o.callback) {
        o.callback = function ( url, result, key) {window.loadResourceComplete(url);cb( url, result, key);};
        }
        if ( !AdobeEdge.preload.got[url] ) {
        a.push( o );
        AdobeEdge.preload.last = url;
        }
        }
        if ( a.length ) {
        AdobeEdge.yepnope( a );
        }
        }
        window.AdobeEdge = window.AdobeEdge || {};
        // AdobeEdge._readyplayers = AdobeEdge._readyplayers || [];
        // AdobeEdge._readyplayers.push(function () {

        // });

        window.loadResourceComplete = function (url)
        {
        if (url == AdobeEdge.preload.last && (isAndroid || emulateMobile))
        {
        //alert('all assets loaded');
        //alert(AdobeEdge.compositionDefns[window.compId]);

        for(var i in AdobeEdge.compositionDefns)
        console.log('Composition', window.compostion = AdobeEdge.compositionDefns[i]);

        if (window.compostion)
        {
        window.compostion.symbolData.stage.scaleToFit= "both";
        window.compostion.symbolData.stage.centerStage= "both";
        if (window.compostion.symbolData.stage.states["Base State"]["${_Stage}"][2][1]== "height")
        window.compostion.symbolData.stage.states["Base State"]["${_Stage}"][2][2] = window.compostion.symbolData.stage.states["Base State"]["${_Stage}"][3][2] == "1024px" ? "768px" : window.compostion.symbolData.stage.states["Base State"]["${_Stage}"][3][2] == "320px" ? "480px" : "1024px";

        alert($('body').width()+"x"+$('body').height());

        //addNewStyle("body,#Stage {max-width:px !important;max-height:px !important}");
        }

        AdobeEdge.launchComposition = function (compId) {
        console.log('load all assets complete!',compId);
        var defn = AdobeEdge.compositionDefns[compId];
        if (defn) {
        defn.launchCalled = true;
        AdobeEdge.launchComposition(compId);
        }
        };
        }
        }

        AdobeEdge.requestResources = function( files, cb ) {

        //alert('override requestResources!');

        AdobeEdge.yepnope.errorTimeout = 4000;
        AdobeEdge.preload.busy = true;
        AdobeEdge.preload.got = AdobeEdge.preload.got || {};
        var i, f, len = files.length, a = [], o;
        for ( i = 0; i < len; i++ ) {
        o = files[i];
        if(typeof o === "string") {
        if (o.indexOf("//") === 0 && window.location.href.indexOf("file://") === 0) {
        o = "http:" + o;
        }
        url = o;
        o = {load: url};
        }
        else {
        if (o.load && o.load.indexOf("//") === 0 && window.location.href.indexOf("file://") === 0) {
        o.load = "http:" + o.load;
        }
        url = o.yep || o.load;
        if(o.callback) {
        var fnCb = o.callback;
        o.callback=function(u,r,k){
        if(fnCb(u,r,k)) {
        cb(u,r,k);
        }
        };
        }
        }
        if(!o.callback) {
        o.callback = function ( url, result, key) {window.loadResourceComplete(url);cb( url, result, key);};
        }
        if ( !AdobeEdge.preload.got[url] ) {
        a.push( o );
        AdobeEdge.preload.last = url;
        }
        }
        if ( a.length ) {
        AdobeEdge.yepnope( a );
        }
        }

          1. Qusai87

            Hello Sarah,

            I’m working on HTML to Edge generator (using xcode) and Framework(using ) for interactive magazines to help both designers and animators to work on friendly environment to build magazines, I have worked on it from the early releases of Adobe Edge, and we have live magazines build completely using this platform, you can check it here :

            https://itunes.apple.com/us/app/alm-hwa-lltbkh/id649334023?mt=8

            I’m happy to talk with you, I’m super fan to your amazing work :)

          2. Sarah Author

            Wow awesome!! Would love to hear more about what you’re working on, feel free to shoot me an email at sahunt [at] adobe [dot] com.

            Sarah

  34. Steve
    - Reply

    Sarah:

    Thank you for the sample code. Seems to work fine, however a couple of things I noticed:

    1. When I display the animation html created by edge animate in a browser, it does not re-size to the correct resolution unless I modify the size of the browser window, at which point it re-sizes correctly.
    2. If I include in my animation project a text paragraph of more than one line, it will display correctly in the native html file created by Edge Animate, however if I place the animation into my website div container, the text lines will bunch up over each other. Single line paragraphs display fine.

    Any ideas?

    Thank you.

    1. Sarah Author
      - Reply

      Hey Steve,

      Not sure what the issue is… also are you using the latest version of Animate? This is a shipping feature now, might be more stable there.

      Cheers,
      Sarah

  35. Steve
    - Reply

    Sarah:

    Thank you. The new version of Animate solves all my responsive issues, with the exception of the jumbling of multi-line text paragraphs when the animation is placed within my website div container. Searching for a resolution.

    Thank you.

  36. Sorcha
    - Reply

    Hi Sarah,
    Thanks so much for this code. It’s a life saver!!! :)

    I was having awful trouble getting this to work in WordPress (using Edge Suite) despite the fixes above. However, I found this fix on the Edge Suite plugin page for those still in need. Simply change Sarah’s code from

    sym.$(“#Stage”).css
    to
    sym.$(“Stage”).css

    ref: http://wordpress.org/support/topic/responsive-script-wont-work-in-wordpress

    I then implemented it on my website using;

    Apparently using shortcodes work as well but I haven’t tried this myself.

    Hope this helps someone. It had me stumped!!!!

    Thanks again for the tutorial Sarah, it’s very much appreciated

  37. paul
    - Reply

    I know the scaling feature has been added into Animate but I’ve been working on a bunch of animations for a while that started in the older version and don’t want to upgrade until they’re finished. I’ve been using your code and it works great. This issue I’m having now is that I have to embed a youtube video.

    I’m using this code:

    var youtubevid = $(“”);
    sym.$(“vcontainer”).append(youtubevid);
    youtubevid.attr(‘type’,’text/html’);
    youtubevid.attr(‘width’,’540′);
    youtubevid.attr(‘height’,’380′);
    youtubevid.attr(‘src’,’http://www.youtube.com/embed/YNuG2ZhVrDI?rel=0&autoplay=1′); // url/Video_Id
    youtubevid.attr(‘frameborder’,’0′); // 1 | 0
    youtubevid.attr(‘allowfullscreen’,’0′); // 1 | 0

    and it works fine and the video plays but as soon as I add the stage scaling code the video does not display(but the audio plays). Any ideas why this would happen?

      1. paul
        - Reply

        Hey Sarah. I figured out the issue. It’s actually a Firefox bug with Flash scaling. Setting the window mode to opaque(&wmode=opaque) it works.

  38. Luca
    - Reply

    Sarah thanks for the tutorial, but on the project file html i want to add some text but with the resize of animation on edge i can’t see my text because it is behind the animation what i can do to see?

  39. gago
    - Reply

    I would like center my animation of the axe x and y and keep the resize ratio, i don’t find stable solution with css dus i find this solution (i’m beginner):

    If this can help somebody… :)

    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 parentWidthz = stage.parent().width(); // Get the parent of the stage width
    var parentHeightz = stage.parent().height(); // Get the parent of the stage width

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

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

    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 vertAlign = (parentHeight – (parentWidth * ratioStage)) / 2;
    var horizAlign = (parentWidth – (parentHeight/ratioStage)) / 2;

    if (ratioScreen >= ratioStage){
    stage.css(‘transform’, ‘scale(‘ + rescaleHeight + ‘)’);
    stage.css( ‘-o-transform’, ‘scale(‘ + rescaleHeight + ‘)’);
    stage.css(‘-ms-transform’, ‘scale(‘ + rescaleHeight+ ‘)’);
    stage.css(‘-webkit-transform’, ‘scale(‘ + rescaleHeight + ‘)’);
    stage.css(‘-moz-transform’, ‘scale(‘ + rescaleHeight + ‘)’);
    stage.css(‘-o-transform’, ‘scale(‘ + rescaleHeight + ‘)’);
    parent.width(stageWidth * rescaleHeight);

    stage.css({
    marginTop: ‘0px’,
    marginLeft: horizAlign + ‘px’
    });
    }
    else{
    stage.css(‘transform’, ‘scale(‘ + rescaleWidth + ‘)’);
    stage.css( ‘-o-transform’, ‘scale(‘ + rescaleWidth + ‘)’);
    stage.css(‘-ms-transform’, ‘scale(‘ + rescaleWidth + ‘)’);
    stage.css(‘-webkit-transform’, ‘scale(‘ + rescaleWidth + ‘)’);
    stage.css(‘-moz-transform’, ‘scale(‘ + rescaleWidth + ‘)’);
    stage.css(‘-o-transform’, ‘scale(‘ + rescaleWidth + ‘)’);
    parent.height(stageWidth * rescaleWidth);

    stage.css({
    marginTop: vertAlign + ‘px’,
    marginLeft: ‘0px’
    });
    }
    }

    // Make it happen when the browser resizes
    $(window).on(‘resize’, function(){
    scaleStage();
    });

    // Make it happen when the page first loads
    $(document).ready(function(){
    scaleStage();
    });

  40. Justin Hall
    - Reply

    Is there a way to add centering to this code?

    And also, while it works great when running the comp independently, I need it to work within a bootstrapped project.

    It doesn’t, when I scale the browser down, the comp does resize but it also moves further and further away from the origin, eventually disappearing.

    I have also tried using Animate’s internal responsive scaling and center stage switches, but these don’t do anything at all once I launch the bootstrap version.

  41. Julian
    - Reply

    Hi Sarah how are you?
    I am using cc2014, when I choose responsive scaling it works, however it pushes all the divs below causing a massive gap when I scale down to smartphone etc. I tried your script however the entire animation disappears! Has anybody else had this problem? I have spent about 7 hours trying to fix it! There must be something I am missing. If anyone can help that would be awesome :)

    1. Sarah Author
      - Reply

      Hey Julian,

      How are you embedding the Animate comp? If it’s using an iframe or object tag, unfortunately these don’t respond to vertical resizing like normal divs do :(

      Cheers,
      Sarah

  42. Gregg
    - Reply

    Hello Sarah,
    First, I love your blogs and your topics are great … so prevalent to my passions in design and motion.

    Any way, I was wondering if you might be able to spare some time in helping me. I’m trying to target the stage’s height from within nested symbols.

    Your code here seems to work fine in the stage, but where I have code in nested symbols, that same code doesn’t seem to work.

    To help visualize, I have this project:
    http://greggmrowka.com/medical-graphic/medical-infographic_v05.html

    and as you can see the first two questions target the stage height perfectly.

    But all the nested questions do not effect the stage height. Is there something I’m missing?

    I’d greatly appreciate your, or anyone else in this thread, time and ideas. I feel that I am so close to a solution.

    Thanks,
    Gregg

  43. Fred
    - Reply

    Hi Sarah,

    Thanks so much for this. Are you able to tell me if it’s possible to incorporate this into a Muse site and keep it’s scale to fit functionality? I just don’t seem to be able to figure it out, any help in achieving this would be massively welcome.
    Cheers
    Fred

  44. John Rau
    - Reply

    Hi Sarah, thanks for this info.

    I know this is a new feature as of recently… wondering if you can help answer this question:

    Your example scales fine to the parent div, but the Responsive Scaling feature in Edge Animate will only scale to the window width, not the parent element width. Is this a bug? Do you know how to make it scale to the parent element?

    Here’s the question in more detail: https://forums.adobe.com/message/6939436

    Thanks,
    John

  45. Pingback: SVG Images Blurry » Timeclub

  46. Dijon
    - Reply

    Hello all,

    after days of fiddling around, i finally got something working.

    If you followed this thread, don’t miss BRISTOL’s bit of code for CENTERING STAGE within the animation div.

    For me, despite wrapping edge element inside a container with margin : 0 auto, it didn’t center well horizontally.

    I had to use BRISTOL’s suggestion + a little media queries to specify major viewport sizes adequate heights.

    Thank you all for such a great piece of work.. and special thanks to you Sarah for obvious reasons.

Leave a Comment

Your email address will not be published. Required fields are marked *