Highlighted

Animate CC - HTML5 Canvas - Make responsive?

Engaged ,
Jan 17, 2017

Copy link to clipboard

Copied

I would like my interactive application to expand to the browser window width, these seemed like just the settings to make that happen, but they do not work.

Any idea then, what these parameters are for?

The app on the page will be used as a full screen exhibit for a touch screen, and also viewed on phones and in iframes on web sites, this is the published result viewed in an iPhone 6 sized window, the canvas did not respond at all:

I even changed the parameters in the html to accommodate this, also to no avail. Any suggestions?

<div id="animation_container" style="background-color:rgba(226, 225, 221, 1.00); width:100%; height:100%">

  <canvas id="canvas" width="100%" height="100%" style="position: absolute; display: block; background-color:rgba(226, 225, 221, 1.00);"></canvas>

  <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:100%; height:100%; position: absolute; left: 0px; top: 0px; display: block;">

  </div>

  </div>

You can see the interactive in real time here, if that helps: http://corpapps.parker.com/corpapps/Interactives/Ride_Control/RC_html5.html

Thanks!

Screen Shot 2017-01-17 at 8.18.07 AM.png

Doesn't look like you've saved/implemented those publish settings.

After choosing your desired publish settings, press "okay" and republish your file.  If you view the source code of your published HTML file, you should see "true" instead of "false" on line 83.

Views

6.5K

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

Animate CC - HTML5 Canvas - Make responsive?

Engaged ,
Jan 17, 2017

Copy link to clipboard

Copied

I would like my interactive application to expand to the browser window width, these seemed like just the settings to make that happen, but they do not work.

Any idea then, what these parameters are for?

The app on the page will be used as a full screen exhibit for a touch screen, and also viewed on phones and in iframes on web sites, this is the published result viewed in an iPhone 6 sized window, the canvas did not respond at all:

I even changed the parameters in the html to accommodate this, also to no avail. Any suggestions?

<div id="animation_container" style="background-color:rgba(226, 225, 221, 1.00); width:100%; height:100%">

  <canvas id="canvas" width="100%" height="100%" style="position: absolute; display: block; background-color:rgba(226, 225, 221, 1.00);"></canvas>

  <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:100%; height:100%; position: absolute; left: 0px; top: 0px; display: block;">

  </div>

  </div>

You can see the interactive in real time here, if that helps: http://corpapps.parker.com/corpapps/Interactives/Ride_Control/RC_html5.html

Thanks!

Screen Shot 2017-01-17 at 8.18.07 AM.png

Doesn't look like you've saved/implemented those publish settings.

After choosing your desired publish settings, press "okay" and republish your file.  If you view the source code of your published HTML file, you should see "true" instead of "false" on line 83.

Views

6.5K

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
Jan 17, 2017 0
Advocate ,
Jan 17, 2017

Copy link to clipboard

Copied

Screen Shot 2017-01-17 at 8.18.07 AM.png

Doesn't look like you've saved/implemented those publish settings.

After choosing your desired publish settings, press "okay" and republish your file.  If you view the source code of your published HTML file, you should see "true" instead of "false" on line 83.

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...
Jan 17, 2017 0
New Here ,
Dec 13, 2017

Copy link to clipboard

Copied

I do have same issue, and tried your given solution, however still having responsive issue. have to scroll horizontal to test this game. We are using Animate CC HTML5 canvas mode.     

Picture1.jpg

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...
Dec 13, 2017 0
Advocate ,
Dec 13, 2017

Copy link to clipboard

Copied

If you share an example link, we might be able to help troubleshoot.

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...
Dec 13, 2017 0
New Here ,
Dec 13, 2017

Copy link to clipboard

Copied

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...
Dec 13, 2017 0
Advocate ,
Dec 13, 2017

Copy link to clipboard

Copied

I inspected the source code, and it appears (like the OP)  that you have not save/implemented the responsive publish settings.

Screen Shot 2017-12-13 at 10.02.36 AM.png

The responsive settings should be set to true, not false.

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...
Dec 13, 2017 0
Explorer ,
Sep 03, 2018

Copy link to clipboard

Copied

Just Emma,

My Animate project is not responsive. I checked the code as you directed. My line reads makeResponsive(true, 'both', true,1);

The animation was being responsive until I added some text to it (in Animate using a Typekit font). Would that make a difference? Do I need to adjust the settings to make it accommodate the text?

Thank you for your time and expertise.

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 03, 2018 0
New Here ,
Jul 30, 2020

Copy link to clipboard

Copied

I have been searching for a solution to this problem. I see that many of these posts date back several years. But have yet to see a solution. In my case, I've published the OAM files from Animated and selected to make both width and height responsive (frankly I've tried every option possible). Then inserted the animated composition in my Dreamweaver file. I changed the width to 100% rather than pixel width in the html file. And used .css to define width as 100% and height as auto. This works to make the width responsive But the height is retaining the original pixel height of the original animated composition, so it pushes all of the content below way down the page (leaving a large gap of white space). Has anyone come up with a solution or work around for this? 

 

here's the CODE in my html doc...

<section class="hero" id="hero">
<object data="animation_assets/cfd-banner-animation-2/Assets/cfd-banner-animation-2.html" type="text/html" width="100%" height="1149" class="EdgeID" id="EdgeID" data-dw-widget="Edge">
</object>

 

here's the CSS...

.hero {
width: 100%;
height: auto;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
 
object .EdgeID {
width: 100%;
max-width: 100%;
height: auto;
}
 

 

 

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...
Jul 30, 2020 0