I'm trying to have an Edge animation resize based on screen resolution. I've made a high-res one for 1080p and higher-res screens, but since the project is reasonably plex, I was wondering if there was a way to export the animation at a different size from Edge, without having to redo everything a few times for smaller screens.

I'm trying to have an Edge animation resize based on screen resolution. I've made a high-res one for 1080p and higher-res screens, but since the project is reasonably plex, I was wondering if there was a way to export the animation at a different size from Edge, without having to redo everything a few times for smaller screens.

• javascript
• animation
• resize
• adobe-edge

6 Answers 6

There is also this now which helps scale based on a parent bScaleToParent:

    AdobeEdge.loadComposition('MyComp', 'EDGE-985368975', {
          scaleToFit: "both",
          centerStage: "horizontal",
          minW: "0",
          maxW: "undefined",
          width: "1540px",
          height: "3004px",
          bScaleToParent: true
  }, {dom: [ ]}, {dom: [ ]});

This was helpful: https://forums.adobe./message/6939673#6939673

I would try to do it in a DIV or a frame, and use CSS zooming options. Some tips here

I'm going to use CSS3's transform:scale, in conjunction with media queries, to solve this.

I found this to be a great solution. Add a Resize trigger into your stage. Paste this code inside:

if ($(window).width() < 960) {
    if ($(window).width() < 600) {
        sym.stop("layout400");
    } else {
        sym.stop("layout600");
    }
} else {
    sym.stop("layout960");
}

Then make three different labels in the timeline with the names layout960, layout600 and layout400. Now you can avoid Edge from reloading every time and skip Edge Docks (at least for responsive).

Open up the hi res file, group everything in a div, resize that div to the desired width and height. If there are any image files, make sure to save them at the correct sizes to avoid poor quality browser re-sizes. Save out each version and upload it to a different location on your server.

then put this into the head of the document:

<script>
    if ( (960 < screen.width < 1024) && (640 < screen.height < 768) ) { 
        window.location = 'www.YOURURL./ipad';
    }
    else if ( (screen.width < 960) && (screen.height < 640) ) { 
        window.location = 'www.YOURURL./iphone';
    }
</script>

This would redirect based on the screen resolution of an ipad or iphone, but you could adjust it to whatever you like.

Store all your layouts as symbols if you are going to do it using labels and then add them to the stage at run-time. Anything you place on the stage's time line exists in the DOM even though you may not have arrived at a screen marker.