Copy link to clipboard
Copied
lib.properties = {
id: 'E6A711C6D3714A758799092F7115FF77',
width: 700,
height: 188,
Copy link to clipboard
Copied
How do I make the canvas to fill the whole browser window without scaling the elements? Any way to do that once (in .hmtl) without editing the .js file manually each time?
No. The so-called "responsive" mode in publish settings isn't responsive at all. It's just scaling. Animate has no native responsive functionality.
Copy link to clipboard
Copied
Hi.
If you just want to make your content responsive on desktop computers, then this code may help:
var root = this;
root.start = function()
{
document.body.style.backgroundColor = lib.properties.color;
root.stop();
root.resizeHandler();
window.addEventListener("resize", root.resizeHandler);
};
root.resizeRoot = function(e)
{
var bounds = root.rec0.nominalBounds;
var column1 = root.w * 0.5;
var column2 = root.w - bounds.width * 0.5;
var row1 = root.h * 0.5;
var row2 = root.h - bounds.height * 0.5;
root.rec1.x = column1;
root.rec2.x = column2;
root.rec3.y = row1;
root.rec4.x = column1;
root.rec4.y = row1;
root.rec5.x = column2;
root.rec5.y = row1;
root.rec6.y = row2;
root.rec7.x = column1;
root.rec7.y = row2;
root.rec8.x = column2;
root.rec8.y = row2;
};
root.resizeCanvas = function(e)
{
root.w = window.innerWidth;
root.h = window.innerHeight;
canvas.width = root.w;
canvas.height = root.h;
canvas.style.width = root.w + "px";
canvas.style.height = root.h + "px";
stage.tickOnUpdate = false;
stage.update();
stage.tickOnUpdate = true;
};
root.resizeHandler = function(e)
{
root.resizeCanvas(e);
root.resizeRoot(e);
};
root.start();
For this to work, you have to go to the Publish Settings and uncheck Center stage and Make responsive under JavaScript/HTML > Basic.
Demo:
Code and files (FLA, JavaScript, HTML...):
https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/responsive_ui
This won't work on mobile devices though.
I do have a code that I use on some personal projects that is able to make Animate CC content responsive in both desktop and mobile devices but I'm not 100% sure it will work on all screens and browsers.
Maybe @ClayUUID can help us out here with a code that will work flawlessly anywhere.
Regards,
JC
Copy link to clipboard
Copied
oops, wrong thread.
[[[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
This is very cool. Thank you!
I'm curious about your code that may also work for mobile devices. 🙂