i’m trying to achieve a specific type of responsiveness in my html5 canvas project. i would like the stage to dynamically scale and *reshape* so that both the width and height are always the same size as the browser window (viewport maybe?). so, the shape of the stage would be the same shape of the user’s browser window.
also, i’d like the objects on stage (mc, graphic, btn) to scale according to the browsers width, i.e. i’d like a mc to scale (both width and height so as to maintain its shape) when the browser is resized.
i will be inserting (iframe i guess?) this canvas into a div in a previously built html doc. the div is made to resize to both the width and height of the viewport.
i appreciate any suggestions on the best way to achieve this. thank you for your help.
Animate has no native support for actual responsive layout like this. The "responsive" options in the publish settings are a straight lie-- all Animate supports is simple stretchy scaling, the same as Flash supported for years.
If you want this sort of dynamic layout, you'll have to write a pile of scripting to make it happen.
can it not be done by some tweeking to the "resizeCanvas" function that animate generates??
For certain magnitudes of "tweak", sure, anything is possible.
anyone else have any pointers.
Please checkout the 2nd answer on this thread:
It explains how to make canvas content responsive on desktop devices. I updated the example with a rec that scales proportionally according to the browser inner width.
Please let us know if you have any further questions.
thank you for the suggested code, @JoãoCésar. it's certainly helpful, but i have some issues. first, with your code exactly as you have it into my project, all the rectangles disappear. they do seem to be there though, as the code is not broken. any idea what's going on there?
next, it does seem to be working to scale the canvas, but only up. if i resize the browser smaller than the original canvas size, it appears to remain that original size, and scrollbars appear. any idea why it doesn't resize down?
i think i may have figured out the scale down issue, but i have a new issue.
whenever i iframe the page into my other html webpage, the canvas doesn't work anymore. i.e. when i open the animate cc generated html page on it's own, the code your gave me works, the canvas and it's objects scale on the window resize. however, when i iframe the page into my webpage, nothing resizes anymore.