5 Replies Latest reply on Jan 9, 2014 3:22 PM by Jeffscheffs

    Create an Edge Animation that fluidly scales width/height inside a website

    Jeffscheffs

      Hi Everyone,

       

      I might be missing something really simple here, and quite frankly i'd happily have egg on my face if someone can point me to the solution.

       

      I am inserting an adobe Edge Composition into a Fluid HTML5 website with basic content (using Dreamweaver), simple right....?

       

      Everything appears to be working great until you scale down the website.... as the page scales down the edge composition scales also, which is great! Except that the edge composition leaves empty space below it from its original height!?  So my question is, how to get the height to not leave  white space in it's height when it scales down? Here's what i've tried so far...

       

      1. Checked the width/height of the edge animate composition is set to % including the stage element and all it's components
      2. Tried setting the height to "auto" for the object oam inside dreamweaver - This doesn't seem to be very "auto" at all and just gives a default height that isn't enough to display it all anyway.
      3. Changed min/max settings
      4. Tried the javascript scaling method from http://sarahjustine.com/2013/04/08/create-scale-to-fit-projects-with-adobe-edge-animate/ Works great but also leaves white space under the file when placed into a website with content and scaled
      5. Adjusting the Height for the edge object in DW using CSS, this gets close, but this is only responsive at certain resolutions, i'm after an entirely fluid solution.

       

      Surely i'm just missing something simple? Does anyone have an example of this working correctly inside a web page with basic content for example? As most of the edge examples don't seem to go beyond testing just the edge animate project by itself in a browser, in which case this would appear to work perfectly too.  I need them being placed into a website, e.g image sliders made with edge, that scale within a basic fluid website.

       

      Perhaps this should be a Dreamweaver Forum post, but I have to start somewhere, thanks in advance for your time.

       

      Thanks,

      Jeff

        • 1. Re: Create an Edge Animation that fluidly scales width/height inside a website
          Cin3rama

          Hey Jeff-

           

          I am having the same issue.  I've tried everything you mention above with the same results.  It's extremely frustrating as I have burned valuable company time trying to get this to work.  I have to say its a bug at this point that needs to be addressed.  Since your issue was several months ago, I am hoping that you came up with or found a solution.  If you can share it here I would be very grateful.

           

          Thanks

          • 2. Re: Create an Edge Animation that fluidly scales width/height inside a website
            Jeffscheffs Level 1

            Hi Runway,

             

            Unfortunately I have had no luck with this issue and no other responses regarding this issue either, i'm not sure what others are doing, or not doing to avoid this issue.  For now I am avoiding using the Edge Animate tool inside a fluid website until this functionality is figured out, you can only make it responsive at certain resolutions and no fluidity in between. Frustrating I know, I honestly expected someone to pop up a simple answer to this question fairly quickly....

             

            If anyone has a solution to this it would be great to find out.... it should be really simple... surely someone has covered this already!?!?

             

            Cheers,

            Jeff

            • 3. Re: Create an Edge Animation that fluidly scales width/height inside a website
              JDanielsNC

              Hi,

               

              I am having this issue as well. I've tried all combinations of size, positing, and even the responsive layout presets. I'm frustrated as well.

               

              Thanks,

               

              Jim

              • 4. Re: Create an Edge Animation that fluidly scales width/height inside a website
                sarhunt Adobe Employee

                Hey guys,

                 

                So what you're seeing is a browser issue related to CSS; applying a transform doesn't recalculate the size of the element (#Stage), which is why the elements underneath don't reflow.

                 

                When writing the tutorial this is one of the first things I spotted (and THE MOST annoying thing to figure out) but there's code included in the sample files from the tutorial which will recalculate the parent container the Stage is placed into. So your code needs to look something like this for it to work properly:

                 

                <div id="myParent">

                     <div id="Stage" class="EDGE-xxx">

                     </div> <!-- Close stage -->

                </div> <!-- Close myParent -->

                 

                (the <!-- comment tags --> are just in there for reference.)

                 

                If you download the sample files from the tutorial page I've also included the demo HTML files with the Animate composition embedded in the page. Take a look at that code and it should give some additional guidance.  Basically you just need to wrap the Stage in another div and you should be fine.

                 

                hth,

                Sarah

                • 5. Re: Create an Edge Animation that fluidly scales width/height inside a website
                  Jeffscheffs Level 1

                  Brilliant! Thanks Sara for clearing that up, found your HTML file example and I am now delighted to have egg on my face

                   

                  Cheers,

                  Jeff