Animate CC - width 100% and fixed height

Hi Srgl,

It is possible to achieve.

First you don't use any of the responsive options from the Publish Settings in Animate.

Secondly, because your HTML5/Canvas will be nested in an iframe and an iframe is a window object in the Document Objet Model (DOM), you make sure that your published HTML5/Canvas (out of Animate) stretches out over the entire iframe window. So basically width = 100% and height = 100%.

There is in Animate's Publish Settings the opportunity to check Scale to fill visible Area: Stretch to fit, but this doesn't actually work in the sense of a real full stretch.

But you can stretch the animation_container, the canvas and the dom_overlay_container, all entities in your HTML5 document out of Animate, with javascript included in a custom HTML template which is used to publish your canvas.

Here you can either use the Default template or you can Import New ... a custom template with custom javascript to make the real stretch. I developed this template a while ago and will provide you with a download link at the end of my blurb.

Anyway it contains this custom javascript:

<script>
    function stretchToFit() {
        var _width = window.innerWidth;
        var _height = window.innerHeight;
        anim_container.style.width = _width + "px";
        anim_container.style.height = _height + "px";
        canvas.style.width = _width + "px";
        canvas.style.height = _height + "px";
        dom_overlay_container.style.width = _width + "px";
        dom_overlay_container.style.height = _height + "px";
    }
    window.onresize = function() {
        setTimeout(delayedStretch, 0);
    };
    function delayedStretch() {
        stretchToFit();
    }
</script>

And in the first frame of your inner Animate FLA work you have to add this trigger for the above function:

stage.on('drawstart', initStage, this, true);
function initStage() {
    stretchToFit();
}

So far it is sure that your HTML5/Canvas is totally stretched into the iframe. Now of course you want width = 100% and a fixed height of 250 pixels.

Right, that needs to be set up in the main page which hosts the iframe. I guess that the people who run the website and host your work in their iframe will have mechanisms in place to make sure that the measurements of the iframe are as intended. Everything is settable with javascript and iframe CSS rules. Including things like style="border-style:none, overflow:hidden" and the lot. Your work then will stretch nicely into the iframe window.

My little example package includes stretch_to_fit_template.html, which is the HTML Template (Import New ... see above) and an example FLA, HTML and JS. It's here: Adobe Creative Cloud

Klaus