Is it possible to resize an Adobe Edge animation?

问题:

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 complex, 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.

回答1:

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.com/message/6939673#6939673

回答2:

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

回答3:

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

回答4:

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).

回答5:

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.com/ipad';
    }
    else if ( (screen.width < 960) && (screen.height < 640) ) { 
        window.location = 'www.YOURURL.com/iphone';
    }
</script>

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

回答6:

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.