Can Edge animation scale/resize like Flash and Canvas

Im just about to try and use Edge for a responsive design, not sure if it will even work.. I have noticed you can set widths to %.. so ill shall report back

I just posted this on another thread, but this seems to be a good responsive design tutorial: http://www.youtube.com/watch?v=RixCX7COepk.

I'm not sure how much zoom the original poster was looking for. If one wanted to zoom in beyond 100%, this isn't supported as well as it was in Flash. Probably easiest to see a sample page and then determine if EA can do it.

Hi, Dominico-

What specifically are you trying to accomplish?  I'm curious what "zoom in and out" effect you're looking for.

-Elaine

I have not got it to work using % either, the problem is that what ever the Edge outputs, it stays at a fixed width no matter what size its viewed on!  The only thing I can come up with is to create multiple sized animations and use media queires to load / hide them as needed!

Hi, Dominico-

It sounds like you're trying to get your motion paths are resized when you resize the stage, right?  This will only work if your elements and paths are also described in percentage format.  If your logic can handle it - say, if your array describes a path and you keep a variable that is a multiplier based on the size of the stage - you can use the resize event to reset the multiplier and make it move correctly that way.  Otherwise, you'll have pixel-based animation over a responsive stage.

-Elaine

Wesley-

It's possible you might have set something up incorrectly to get responsive layout working.  Can you post your file for us to look at?

Thanks,

-Elaine

I do, but its still very rough.. http://vane.vanillasoftware.co.uk/

But the text from Edge wont resize (the big text, I do have a media query in place for it though), now im wondering if the project text itself is set to a px size, I bet it is! Ill look into that next

The best solution I've found is to override the width of your stage div in CSS to auto!important. Then, use media queries to resize your div, using the CSS zoom property (and scale transform for Firefox).

/*  Example CSS for an Edge stage div of 800px width  */

#MY-EDGE-STAGE-DIV{width:auto!important;max-width:800px;}

@media screen and (min-width: 1px) and (max-width: 480px)

{

          #MY-EDGE-STAGE-DIV{zoom:0.5;-moz-transform: scale(0.5);}

}

@media screen and (min-width: 481px) and (max-width: 600px)

{

          #MY-EDGE-STAGE-DIV{zoom:0.6;-moz-transform: scale(0.6);}

}

@media screen and (min-width: 601px) and (max-width: 800px)

{

          #MY-EDGE-STAGE-DIV{zoom:0.8;-moz-transform: scale(0.8);}

}

@media screen and (min-width: 801px) and (max-width: 50000px)

{

          #MY-EDGE-STAGE-DIV{zoom:1;-moz-transform: scale(1);}

}

I've got no answers - but there seems to be a lot of confusion on this forum about what dominicosavio is talking about.

If anyone wants to see an example of the way Flash sites can scale to fit the browser window, here is a Flash only site that I created several years ago:

http://www.skippingschool.co.uk

- try changing the browser size and you'll see the whole frame (graphics and images) scales to fit.

Hope this helps!

and how do you use scale with a variable? Fx. I have a variable defined "thisAmount" and I want to apply that for scaling. When I write:

#MY-EDGE-STAGE-DIV{zoom:0.8;-moz-transform: scale(thisAmount);}

it doesn't work.

Ah might as well post here as well - I have a tutorial for how to go about this here http://www.youtube.com/watch?feature=player_embedded&v=hrLt0Y9QAY8

Sarah

Thanx very much sarhunt.

Thanks Sarhunt, I have been looking for these quite long already!

Upgrade to Edge Animate 3. It's in there.