3 Replies Latest reply on Sep 19, 2018 12:44 AM by slog70

    Scale animation to fit parent container - not window size.

    Ryan.Cheetham Level 1

      Hi All,

       

      I have an animation that I am trying to embed into a bootstrap template, but window size is being applied to the canvas rather than parent container (div).

      Therefore the animation is huge and flowing outside of the column.

       

      I have exported the animation with the following selected:

      - Make responsive (by width)

      - Scale to fill visible area (fit in view)

       

      All the solutions I can find for this are based on Edge animate (bScaleToParent) and not Animate CC.

      Any help would be much appreciated, thanks!

        • 1. Re: Scale animation to fit parent container - not window size.
          luiss70215192 Level 1

          Hi Ryan,

           

          It's a rude solution but works:

           

          You must edit the script in the html file that Animate publish whatever name you have.

           

           

          //create an div with an id that wraps all animate's divs - animation container, in my case a div#parentContainer

           

           

          1.-  Inside the resizeCanvas function: (at the beginning )

           

          function resizeCanvas() {

          //get the parent element

           

          var parent = document.getElementById("parentContainer");

           

          //you can set the width of the parent container with css, but you must add this line in order to maintain the ratio in proportion with parent width of animate Stage:

           

          //in my case my stage's size is 550x400 , add your size in the formula

           

          parent.style.height= (parent.clientWidth * (400 / 550)+"px");

           

          2.- in this line switch with your parent's size:

           

           

          // var iw = window.innerWidth, ih=window.innerHeight; this is what we don't want

          put this line instead, the parent size.

           

          var iw = parentclientWidth, ih= parent.clientHeight;   

           


          3.- Finally in the call of makeResponsive function, at the bottom of the script use this parameters:

           

          makeResponsive(true,"both",true,1);

           


          it works changing 4 lines of code in the main script of Animate CC.

           

           

           

           

          Sorry for my English.


          I hope it helps!
          Thanks!

          2 people found this helpful
          • 2. Re: Scale animation to fit parent container - not window size.
            egeekdad Level 1

            thank you, I can confirm this works solution perfectly!

            • 3. Re: Scale animation to fit parent container - not window size.
              slog70 Level 1

              Thanks luiss70215192, it works!

              I was searching for this solution from ages!

              Why the Hell adobe doesn't fix that?

              Question: is there a way to integrate this fix in the animate html template? I'm not good as you are at programming...

              Tony