W+H Reshaping Responsive Stage

New Here ,
Feb 24, 2020 Feb 24, 2020

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.

TOPICS
Code, How to

Views

216

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , Feb 25, 2020 Feb 25, 2020
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

Likes

Translate

Translate
Adobe Community Professional ,
Feb 24, 2020 Feb 24, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 24, 2020 Feb 24, 2020

Copy link to clipboard

Copied

can it not be done by some tweeking to the "resizeCanvas" function that animate generates??

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 24, 2020 Feb 24, 2020

Copy link to clipboard

Copied

For certain magnitudes of "tweak", sure, anything is possible.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 24, 2020 Feb 24, 2020

Copy link to clipboard

Copied

anyone else have any pointers.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 25, 2020 Feb 25, 2020

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 27, 2020 Feb 27, 2020

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 27, 2020 Feb 27, 2020

Copy link to clipboard

Copied

LATEST

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. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines