Animate CC - width 100% and fixed height

[Srgl]

Hello,

is there a way to mantain the same height in a canvas but modify the width in %?

I need to create a banner that has always width 100% and a fixed height of 250pixels.

Thank you for your support         

[avid_body16B8]

maybe this post would help:

stage resizing

[Srgl]

Hello,

nope it doesn't.

I know how to resize stages without moving the content. I need that the width it's not a precise number but always at 100% so it takes all the browser window.

[avid_body16B8]

Then you need to set this up in the publish settings with Make Responsive / by width.

[Srgl]

Hello,

I did that, and also the height it's affected. That's why i'm trying to seek for help

[avid_body16B8]

Are you publishing in an Iframe?

[Srgl]

No, i publish in the html that Animate CC generate. It will be positioned in an iframe by the website that will host it.

[avid_body16B8]

That's what I meant. Let me think about it.

[kdmemory]

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

[Srgl]

Hello Klaus,

thanks for the answer.

I don't want a result that is out of proportion. What i need is something like this.

index http://www.srgl.cloud/ADV/srgl/test/

I need a centered block in which i put my important information and animation, and some background (left and right) that is shown or not depending on the screen size.

[arrowm70643763]

Hi! Any news about it?

[amhol]

There used to be a "Percentage Layout" option in Animate. In the Properties panel (under the "Stage" tab, which has been renamed "Document"). You could select % as a unit and enter 100 percent width. I've searched for this option in the 2020 Publish Settings but it is totally gone. Perhaps Adobe couldn't get it to work consistently? 

  I'm working on a project where I need to set the dimensions by %, and this would have been very useful if it were not removed.

[KevinMD]

I am redoing an old Flash site which is 100% vector and published in ActionScript to 100% width and 100% height. Trying to acomplish the same orientation but so far not successful. 

[amhol]

What happened to "Percentage Layouts" in Animate CC? The unit options used to include %. Now I only see pixels, points, inches(??). Thanks.