2 Replies Latest reply on Mar 20, 2016 12:24 PM by Nipun Asthana

    Adobe Animate and responsive website

    Marlene Level 1

      I have a "jumbotron" for the top of a website. I used Adobe Animate and published as a .js file. I brought it into my index.html using snippets from the Adobe Animate html template. is there any way to make this responsive. I have researched this but can't seem to get a straight answer. Can someone shed some light on this topic?

        • 1. Re: Adobe Animate and responsive website
          lukash55376775 Level 1

          Yes there is a easy way to get a canvas responsive/scale with just some html and css

          Just wrap the canvas tag in a div like this

          <div style="position:relative; width:100%; top:0px; left:0px; height:0; padding-bottom:142.85%; background-color:#fff;" >

            <canvas id="canvas" width="700" height="1000" style="position: absolute; top: 0;  left: 0; overflow:hidden; height:100%; width:100%; background-color:#FFFFFF"></canvas>

          </div>

           

           

          width="700" height="1000" is the canvas original height and width dont change it


          padding-bottom:142.85%; is the apectratio of the canvas original size in precent (height/width  in this case 1000/700). Just open the calculator and get the number for your canvas.



          this will make the canvas scale to fill up its parent width but keep its aspectratio

          works on all known browsers and devices


          if it scales to be bigger then the original size the graphics get blurry som make the original a little bigger than the biggest responsive size.












          • 2. Re: Adobe Animate and responsive website
            Nipun Asthana Adobe Employee

            Scaling up using the CSS width property is not really recommended. It does a bitmap scaling even to your vectors/text and might look very blurry.

            You must scale up the content to max expected resolution within Animate before publishing if you're going this way. Use the new Scale Content option in Properties panel for doing this easily.

            capture.png

             

            The other way is to handle it using code. You can add something like this in the init() function in the published HTML.

                    var xFactor = Math.min(window.innerWidth / lib.properties.width, window.innerHeight / lib.properties.height);

                    exportRoot.scaleX = xFactor;

                    exportRoot.scaleY = xFactor;

                    canvas.width = lib.properties.width * xFactor;

                    canvas.height = lib.properties.height * xFactor;


            Can also create a custom template with this for faster access.