Is it possible to resize an Adobe Edge animation?

Question

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.

score 3 · Answer 1 · answered Jul 26 '15 at 11:37

3

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

answered Jul 26 '15 at 11:37

timhc22

7,213
8
48
66

Why on earth is this a hidden option?! Madness. – Sebastian Thomas Nov 06 '15 at 14:30
May I ask how to have `EDGE-985368975` please? I mean how to generate it? I read other posts, the number is different. Thank you. – Learner Nov 21 '18 at 01:56
I have no idea, this was 3 years ago! But I think it will be unique depending on what element you are referring to.. – timhc22 Nov 23 '18 at 15:02

score 1 · Answer 2 · edited Aug 02 '12 at 08:26

1

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

edited Aug 02 '12 at 08:26

Adi

5,089
6
33
47

answered Aug 02 '12 at 08:24

Michael Chaize

11
1

A good answer, but I just found out that this is a proprietary Microsoft extension which works solely with IE. – John Doe Aug 02 '12 at 08:44
What is a proprietary Microsoft extension? That comment didn't make any sense to me. Is that in reference to something on this page? – Jake Aug 29 '12 at 18:28

score 1 · Answer 3 · answered Aug 02 '12 at 08:49

1

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

answered Aug 02 '12 at 08:49

John Doe

699
1
7
14

score 1 · Answer 4 · answered May 25 '13 at 09:12

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

score 0 · Answer 5 · answered Mar 07 '13 at 15:57

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.

score 0 · Answer 6 · answered Oct 30 '13 at 21:11

0

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.

answered Oct 30 '13 at 21:11

Nicolas

341
3
5

Is it possible to resize an Adobe Edge animation?

6 Answers6

Linked