Copy link to clipboard
Copied
hello all
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.
Hi.
Please checkout the 2nd answer on this thread:
https://community.adobe.com/t5/animate/how-to-make-canvas-fill-browser-window/m-p/10883533?page=1#M200881
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.
Regards,
JC
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
can it not be done by some tweeking to the "resizeCanvas" function that animate generates??
Copy link to clipboard
Copied
For certain magnitudes of "tweak", sure, anything is possible.
Copy link to clipboard
Copied
anyone else have any pointers.
Copy link to clipboard
Copied
Hi.
Please checkout the 2nd answer on this thread:
https://community.adobe.com/t5/animate/how-to-make-canvas-fill-browser-window/m-p/10883533?page=1#M2...
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.
Regards,
JC
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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.