Resize stage height as element height changes

I don't know a way to do that dynamically with js but I've done something similar thing by having auto-transition on and adding keyframes on the stage to match the new height/width for my animation. Hope that helps!

Damon664 - Have you gotten an answer to this yet? I'm having the same problem. I made a header banner, and the images resize for responsive perfectly, but as the screen gets smaller there is a big chunk ( from static height) of stage at the bottom. Looks terrible...

you can set your stage size like this without animate to change

sym.$("Stage").css({"width":"700px"})

with Animate

sym.$("Stage").animate({"width":"700px"}, 500);

if you want to change from inside a symbol

sym.getComposition().$("Stage").animate({"width":"700px"}, 500)

Zaxist

Hi Zaxist -

Would that solution help my situation? Would I substitute "100%" or "auto" in there somewhere?  (Please know in advance that you're not dealing with a programmer here lol ... self-taught artist-type here!)

I'm trying to get rid of the extra stage space below a responsive banner. Following is the text and sample link I put in another, more detailed post:

***************************

I just created my first, fairly simple Edge project - a header for my website. I made the project responsive, and it works well on preview in browser. However when I inserted it into Dreamweaver, it was not responsive, so I added an embed class with width=100% and height=auto. That did indeed cause the edge animation images to respond nicely, however there appears to be a fixed stage height involved, and I can't figure out how to fix it.  As my navigation bar falls just below this header graphic, the nav gets pushed way down on smaller devices.

Also, when I add the embed class, the entire graphic becomes hidden while working in Dreamweaver, except when viewing as "Live". I took out the height=auto as it wan't having the desired effect anyways, and then I could see the graphic in Dreamweaver again.

I'd also like to be able to center the banner, but not having much luck with that either.  :-( 

Here's what I have so far: http://www.pencilplace.com/test-edge-animate-header.html

***************************

you cant use 100% or auto to make stage with dynamic height, you should do every steps to make it feel dynamic

you just need to change you height or width when ever you need with this line

sym.$("Stage").animate({"width":"700px"}, 500);

just this, there is no need to be a professional programmer or something..

Zaxist

I'm sorry Zaxist ... I still do not understand.  :-(

<<you just need to change you height or width when ever you need with this line>>

Where does the line of code you mention go -- in the Code>Stage area of where I can place custom code?  Also, do I understand your sample to mean that I need to add a number of width variables for various potentional sizes?  Sorry - I don't understand what that line of code means.

Thanks for putting up with me... :-)

i dont know how you are looking in what i'm saying

maybe we just misunderstand each other

for example we have a picture in edge inside a Symbol, and our Symbol is fit to it

by click on a button picture will change, we can add this line of code there to set our symbol width and height match to that picture..

we can do this for Stage too

but i cant undrestand in your project how do you want to get rid of the extra stage space below a responsive banner ?

your banner size is fit to your webpage but when you zoom out, your banner will get to left position and may be if you  center your edge with this code inside edge

Stage > compositionReady

$("#Stage").css({"margin":"0 auto"}

$("body").css({"margin":"0 auto"}

you be able to center your edge in your dreamweaver too !!

or trying in your dreamweaver center your edge div

Zaxist

I DID have success with centering the banner using your

$("#Stage").css({"margin":"0 auto"});

Thanks!

I'm still not understanding how get rid of the extra stage space under the banner as the browser size gets smaller.  Will take a mental health break here and try again later.

Thanks for your help. :-)

well i got it

you cant get rid of the extra stage space because your edge is set to percent, just change it to pixel to get rid of extra space after zooming

Zaxist

Member "BigMucho" posted the following teak on another thread [http://forums.adobe.com/message/5234102#5234102]. It works for me (http://www.pencilplace.com) ... will use this unless somebody can shed other / easier light on the subject of making an animation responsive to width & height. 

*** Posted by BigMucho***

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 id='aspectwrapper'>

        <div id='content'>

            <!-- The Good Stuff Lives Here -->

        </div>

    </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;

}

can you explain why do you want to resize your Stage ?

and do you want to resize your stage because of image background ?

Zaxist

Well, I'm not sure if I understand your problem, but here my code for scalable background image (without distortion) for full screen stage (width and height to 100%) in window.resize and document.compositionReady events:

var imageRatio = 1.7777; // Aspect 16:9, you can use any proportion depends of your image dimensions

var sWidth = $(window).width()

var sHeight = $(window).height()

if ((sWidth / sHeight) > imageRatio) {

  sym.$("imgBackground").css("width", sWidth +"px");

  sym.$("imgBackground").css("width", sWidth*imageRatio +"px");

}

else {

  sym.$("imgBackground").css("width", sHeight*imageRatio +"px");

  sym.$("imgBackground").css("width", sHeight +"px");

}

You can add code for change all font-size of text for adapting to new dimensions if user change size of your browser.

I hope to help you.

Josep

this is the equal to sym.$("Kitchen") for Stage :

$("#Stage").css({"width":"100px"})

hope this help you

Zaxist

and also if you can send me your project, i can help you better, and maybe i can find a way to achieve what you wanted

Zaxist

I'm not sure if this is helpful to you or not, but I've had some relative success putting together a responsive layout, with suggestions and tips from some kind folks on this forum - including Zaxist -Thanks again!

I ended up using a jQuery plugin called Backstretch, which will scale an image(s) from your library Full Screen -while maintaining aspect ratio. You can also pull an array of images for slideshows. The image scales with the size of your browser window.

http://srobbin.com/jquery-plugins/backstretch/

I'm centering a div containing my main content using css. I've got a function that detects the width of the browser window, and scales the main content div using Greensock, to animate the div as it resizes.

http://www.greensock.com/

Anyway, this is just a rough proof of concept for another project I'm working on. Take a look and see if there's anything useful to you. Good luck!

https://www.dropbox.com/s/rlfkjzwiijlwhsd/fullscreen_responsive.zip

Sorry, syntax errors in my code example, this is correct:

var imageRatio = 1.7777; // Aspect 16:9, you can use any proportion depends of your image dimensions

var sWidth = $(window).width()

var sHeight = $(window).height()

if ((sWidth / sHeight) > imageRatio) {

  sym.$("imgBackground").css("width", sWidth +"px");

  sym.$("imgBackground").css("height", sWidth/imageRatio +"px");

}

else {

  sym.$("imgBackground").css("width", sHeight*imageRatio +"px");

  sym.$("imgBackground").css("height", sHeight +"px");

}

GOD !

Ive spent several hours on this.

to acces stage from inside a symbol you should use

sym.getComposition().getStage().$("Stage").animate({"width":"700px"}, 500);

AND NOT:

sym.getComposition().$("Stage").animate({"width":"700px"}, 500);

Used above stage height in project with separate layouts for browser, tablet, mobile. Used .css width rather than animate. Thank you for the tips.

//Same coding in composition ready and resize

//Work all done in timeline, not in symbols (Maybe next time)

checkWidth = $(window).width();

if (checkWidth <= 550) {

sym.play("layout280");

sym.$("Stage").css('width', '280px');

} else if (checkWidth <= 760) {

sym.play("layout550");

sym.$("Stage").css('width', '550px');

} else if (checkWidth < 960) {

sym.play("layout760");

sym.$("Stage").css('width', '760px');

} else if (checkWidth >= 960) {

sym.play("layout960");

sym.$("Stage").css('width', '960px');

}

--Cindy J-H

--Cindy J-H

well Dear Cindy, it will Not work like that, you should doing it this way :

$(window).on('resize', function(){

var width = $(window).width();

if ( width < 800 )

alert("hello")

})

Zaxist

also i forgot to say, you should write these codes in Stage > compositionReady

Zaxist

This is 3.0 version not out yet!

Cool then. I was not sure! Enjoy then - it is pretty cool!

Version 3 IS available, though I was not seeing it as an update ala the CC Desktop Updater, so I went to the Crative Cloud website and clicked the Download and it 'pushed' the update through my Desktop app updater.

Darrell

Yep, Edge Animate CC (v.3.0) is officially out!

-Elaine

Way to go Elaine!

I upgraded and now it won't create any new projects. It just locks up! Can I throw away preferences or something to get this thing working again????

Can you check this link : http://helpx.adobe.com/edge-animate/kb/restore-preferences-edge-animate.html

I'm using OS 10.6.8    I went to

/Users/Your User Name/Library/Application Support/Adobe

and there was no Edge Animate folder

I also use Muse and there is no folder for it either.

What am I doing wrong?

Hi tbeasley-lifesprings (and other folks),

Instead of using this thread to solve a different problem, can you please start your own thread?

Thanks,

Joe