Highlighted

simple responsive project doesn't fill browser viewport

New Here ,
Sep 20, 2019

Copy link to clipboard

Copied

hello all,

I just created a simple project from scratch using all settings as default: 

- canvas is 1920x1080

- I created a simple rectangle that is 1920x1080px.

I published the file so that it should be reactive (make reactive: both).

The result is reactive but it doesn't fill my browser viewport. 

It's a bit smaller in width (see attachment)

Why?

It should fill the browser windows here (my monitor resolution is 1920x1080px).

Perhaps I am missing something?

TIA for any help.

Tony

 

 

 

Views

108

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

simple responsive project doesn't fill browser viewport

New Here ,
Sep 20, 2019

Copy link to clipboard

Copied

hello all,

I just created a simple project from scratch using all settings as default: 

- canvas is 1920x1080

- I created a simple rectangle that is 1920x1080px.

I published the file so that it should be reactive (make reactive: both).

The result is reactive but it doesn't fill my browser viewport. 

It's a bit smaller in width (see attachment)

Why?

It should fill the browser windows here (my monitor resolution is 1920x1080px).

Perhaps I am missing something?

TIA for any help.

Tony

 

 

 

Views

109

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
Sep 20, 2019 0
Adobe Community Professional ,
Sep 22, 2019

Copy link to clipboard

Copied

Hi.

 

What Animate CC does is to scale up or down the default canvas and stage according to the browser inner size and the device pixel density.

 

But this is scaling is similar to the one we see applied to videos. Which means that your content will hardly fit without borders to the users browser.

 

If you want a really responsive UI, you're gonna have to disable all scaling options in the Publish Settings and write a true responsive code yourself. Meaning that you need your UI elements to keep the same size in any device screen but with different individual positions.

 

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
Sep 22, 2019 0
New Here ,
Sep 23, 2019

Copy link to clipboard

Copied

Thanks JC,

I don't need the animation to fit the viewport by widht __and__ height.

I need it to fit by width and get the height proportionally. 

The same as a responsive image would fit in the browser window.

I tried all combinations in the publication settings, but without luck.

Tony

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
Reply
Loading...
Sep 23, 2019 0
New Here ,
Sep 23, 2019

Copy link to clipboard

Copied

just to let you know: using Animate CC 2015.2 seems to work correctly.

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
Reply
Loading...
Sep 23, 2019 0
Adobe Community Professional ,
Sep 23, 2019

Copy link to clipboard

Copied

Hi. Have you tried Scale to fill visible area: Strectch to fit?

 

clipboard_image_0.png

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
Sep 23, 2019 0
New Here ,
Sep 23, 2019

Copy link to clipboard

Copied

yes, I tryed all combinations. Only Animate CC 2015 works. :(.

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
Reply
Loading...
Sep 23, 2019 0
Adobe Community Professional ,
Sep 23, 2019

Copy link to clipboard

Copied

Do you mind sharing your FLA? Even if you have to use placeholder assets. Because it's working for me and I'm using the latest release of Animate CC.
__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
Sep 23, 2019 0
New Here ,
Sep 23, 2019

Copy link to clipboard

Copied

Hi JoãoCésar,

you can download my sample assets here: https://we.tl/t-udhFmqVJ7V

TIA

tony

 

 

browser maximized:

0.png

 

 

 

 

 

 

 

 

 

browser half height (about):

1.png
Please note that the animation try to fit vertically. This should not happen, when you publish and set "make responsive: by width" only.

 

 

 

 

 

Stretching the browser window vertically make scroll bars to appear. But only vertical scrollbars should appear. Horizontal scroll bars should not be displayed because the content should fit.

 

2.png

 

 

 

 

 

 

 

Here you can see how Animate should work (I have done the animation on the home page using Animate cc 2015.2): https://www.nespoligroup.de/

Please note I had to tweak the code by hand to make this work. 

But I think Adobe should revisit the engine code a bit, to make Animate work for production.

It seems a beta to me.

TIA again.

tony

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
Reply
Loading...
Sep 23, 2019 0
Adobe Community Professional ,
Sep 23, 2019

Copy link to clipboard

Copied

Thanks for all the info and file.

I used this settings and it worked.

clipboard_image_0.png

 

What happens if you create a new file using the latest version of Animate and then copy the content from your old FLA to this new FLA?

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
Sep 23, 2019 0