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

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

forums_noreply@adobe.com — Wed, 30 Apr 2014 23:43:06 GMT

Cool, thanks! Is it possible to achieve the same thing with a published .oam file and then dropped into muse? I'm simply looking to have animation adge animate project span to both edge of the browsers widths but keep the animation centered... HELP!

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

forums_noreply@adobe.com — Tue, 17 Dec 2013 16:17:35 GMT

Hi,

thank you all of you for you guidence and your helpfull advices.

Currently, I used the above updated Sarah's code by jkuo1 to fit-scale the composition but. it doesn't work good.

The height works great but the width doesn't work well, it appears a blank area at the right of the screen. It doesn't fit on it.

As the image below.

How is possible to fit in the window?

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

forums_noreply@adobe.com — Mon, 18 Nov 2013 13:38:06 GMT

I had just about pulled all my hair out on this. Nothing has worked except your scripts! Thank you bigmucho now I can sleep again!

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

forums_noreply@adobe.com — Sat, 19 Oct 2013 04:03:19 GMT

PLEASE HELP ME!

I am so sorry but I am beyond desperate. I keep finding so many forums that point back to your script, which I am sure means that it is correct, but my animation refuses to work.

Essentially I have the same problem as everyone else, I am trying to get my parallax animation to adjust to the screen size. I have watched your tutorial video and read other forum threads, but I cannot get it to work. I have tried fixing it in dreamweaver, muse and animate, and still nothing. And I tried opening a new file, pasting only that script in the compReady command and running that, still nothing :[

What am I doing wrong?

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

forums_noreply@adobe.com — Mon, 07 Oct 2013 20:50:51 GMT

Hi jkuo1

This code only works on Chrome....Firefox is a diaster.

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

forums_noreply@adobe.com — Sat, 05 Oct 2013 13:30:45 GMT

Absolutely spot on. Many thanks, Sarah, it all works brilliantly.

Just one thing, though... is there any way to apply the same scaling to preloader content? As it stands, the preloader remains at its actual size whilst running - or at least it fails to scale up in the same way as the main stage - which means there's an unpleasant, visual 'leap' when the main animation runs and fills the window. Any tips or a steer in the right direction would be hugely appreciated

Cheers!

Frannie x's

PS: I also posted my request on your YouTube vid coments but will indicate in both posts if a solution's found

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

forums_noreply@adobe.com — Thu, 19 Sep 2013 12:20:43 GMT

I have the same problem as RalphDCW.

Has anybody found a solution for this?

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

forums_noreply@adobe.com — Fri, 13 Sep 2013 19:57:13 GMT

I just tried BigMucho's advice on this project, but the content is still appearing top left no matter what. And it's only scaling 100% height or width, but not both. Where am I going wrong on this? I already tried addingg text-align: center; and margin: 0 auto; in a number of places but it didn't change a thing.

Also, I notice with this method that my preloader image, which should be centered, isn't even close. It's more like the bottom right when I test. How can I make certain this is centered when this is running? It's very important! We're going to be loading a lot of scripts here eventually.

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

forums_noreply@adobe.com — Fri, 26 Jul 2013 14:48:49 GMT

Thank you this works perfectly in Edge Animate CC. I had a fix that did work with Edge Animate CS6 version, but this one works perfectly. I have spent hours and hours trying to find a fix for this!

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

forums_noreply@adobe.com — Tue, 09 Jul 2013 18:14:43 GMT

Hello,

thank you very much for the solutions, they work very well! :-)

A last problem remaining is with Firefox, where i get a lot of white space left under the scaled animation and with IE9, where the space is under and right the animation. The scroll is therefore active, what could it be? What can i do?

Thank you

Cheers Cece

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

forums_noreply@adobe.com — Thu, 27 Jun 2013 16:57:18 GMT

THANK YOU BigMucho for this tweak! I've been trying to find an answer to this for days. My banner animation is now responsive on all devices. :-) I'm going to share your info (with credit to you of course), on another thread. [http://forums.adobe.com/message/5398804#5398804]

Later update: Unfortunately I ran into some difficulties with the html/css solution later, and couldn't get them resolved. So, I took the time to watch Sarah's video (link in earlier post) and that allowed me to create a new animation that is fully responsive/scalable. (http://www.pencilplace.com)

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

forums_noreply@adobe.com — Mon, 15 Apr 2013 17:33:15 GMT

A few tweaks to the Edge HTML / CSS and you're good to go. Inside Edge, make sure all height and width units are set to percentage (including the stage). This technique also works well with non-Edge content, no jQuery required.

HTML:

<body>

</div>

</body>

CSS:

#aspectwrapper {

display:inline-block;

width:100%;

position:relative;

}

#aspectwrapper::after {

padding-top:56.25%;

// Use this percentage for 16:9, get yours via: Height / Width * 100

display:block;

content:'';

}

#content {

position:absolute;

top:0;

bottom:0;

right:0;

left:0;

overflow:hidden;

}

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

forums_noreply@adobe.com — Mon, 15 Apr 2013 09:41:07 GMT

Hi Sarah

My apologies. I've re-read my post and realise I haven't made myself clear.

You are right of course that in your sample files, the composition is centred. However in your files the composition doesn't scale if only the height of the browser is reduced. What I'm talking about is the result I get using your file with Jkuo1's code. Yes, the composition stays centred whatever the width of the browser. But, on a largish monitor, if the browser is reduced in height, the composition stays ranged left. I want it to stay centred.

Any ideas?

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

forums_noreply@adobe.com — Sun, 14 Apr 2013 21:07:38 GMT

Hey Ralph,

Glad you liked it! Though I don't think I entirely understand what you're trying to accomplish. In the sample files I posted the composition is centered:

http://sarahjustine.com/demos/scaletofit/

Is that what you're trying to do?

Sarah

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

forums_noreply@adobe.com — Sun, 14 Apr 2013 18:42:13 GMT

WOW!

Many thanks Sarah for listening to our pleas and coming up with a brilliant solution to the Scale-to-fit problem.

And many thanks Jkuo1 for updating Sarah's solution to respond to browser window height as well as width.

The problem is 99% solved - but there is just one little thing that would make your collective solution absolutely perfect and a complete match for the way scale-to-fit works in Flash:

Is there any way that the animation can be centred instead of ranged left or right?

For that matter, is there any way the sort of responsive animation you show in your 'Resize' tutorial can be created so that the main part of the design stays in the centre of the browser window and the background extends both left and right (rather than just right) as the window width is increased? It just seems a pity that the Position and Size options in Edge Animate only show four positions (the corners) and not 9 positions (the corners plus centers) as you get in so many other programmes.

Sorry if I seem ungrateful. I may be asking the impossible. But "Don't ask, don't get" has always been my motto!

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

forums_noreply@adobe.com — Sun, 14 Apr 2013 09:57:00 GMT

there is a way to resize the stage by height instead width? thank's!

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

forums_noreply@adobe.com — Tue, 09 Apr 2013 15:08:01 GMT

Nice! I intentionally left that part out since in the website example I provided checking for height would've jacked up the layout. Good to have the use cases covered, thanks for sharing!

Sarah

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

forums_noreply@adobe.com — Tue, 09 Apr 2013 14:25:41 GMT

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

});

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

forums_noreply@adobe.com — Mon, 08 Apr 2013 19:20:20 GMT

Hi jkuo,

The reason for this is so when your animate composition is placed inside your website, it doesn't get all jacked up based on the height of the viewport. This treads into vertical RWD territory which can lead to unexpected results. You can try playing for yourself by changing the width parameters to height in the sample.

Sarah

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

forums_noreply@adobe.com — Mon, 08 Apr 2013 18:53:28 GMT

Thanks for the great tutorial! Very informative indeed!

One question I have, however, is that the example seems to scale well when resizing the browser window horizontally, but there seems to be no effect with regards to resizing the window vertically and having the Stage resize proportionally with the Scale-to-Fit behavior that the OP was looking for? For example, if I resize the browser window to a height that is smaller than the current height of the stage, the browser window will start showing a vertical scroll bar rather than proportionally scaling down the stage so the the entire stage remains visible. Is this something that the sample files should be demonstrating or did I miss something?

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

forums_noreply@adobe.com — Mon, 08 Apr 2013 16:31:06 GMT

Whups! Should work now

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

forums_noreply@adobe.com — Mon, 08 Apr 2013 15:50:40 GMT

Sarah, this is a great tutorial. Thank you.

On the youtube page it points to the files at: http://sarahjustine.com/2013/04/07/create-scale-t...e-edge-animate/ which returns a "Page not found" (although it shows the home page content and is currently easy to find the content). Just thought you might want to know about the bad link on the YouTube page.

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

forums_noreply@adobe.com — Mon, 08 Apr 2013 15:15:34 GMT

Awesomeness!

Thanks Sarah

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

forums_noreply@adobe.com — Mon, 08 Apr 2013 15:13:03 GMT

Cool Sarah! Thank you for taking the time to create another great tutorial.

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

forums_noreply@adobe.com — Mon, 08 Apr 2013 14:33:08 GMT

As promised :)

http://www.youtube.com/watch?feature=player_embedded&v=hrLt0Y9QAY8

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

forums_noreply@adobe.com — Thu, 04 Apr 2013 16:54:53 GMT

Hi Sarhunt

That is great news - a solution at last!

Can't wait for your tutorial

Cheers

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

forums_noreply@adobe.com — Thu, 04 Apr 2013 16:44:55 GMT

I have a tutorial in the queue on how to do this. Stay tuned

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

forums_noreply@adobe.com — Thu, 04 Apr 2013 12:52:12 GMT

Hello,

Have you tried to fix the stage dimensions in %, your objects position and dimensions in %.

I tried and object are proportionnaly resized when the browser window is resized.

One problem : the text size.

Olivier

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

forums_noreply@adobe.com — Tue, 26 Mar 2013 19:09:58 GMT

Anyone?

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

forums_noreply@adobe.com — Sun, 24 Mar 2013 19:02:17 GMT

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!