Animate CC - HTML5 Canvas - Make responsive?

[jeffery wright]

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!

[just.emma · Accepted solution]

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.

[manojdaniels]

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.     

[just.emma]

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

[manojdaniels]

Please find the SCORM link.

https://cloud.scorm.com/sc/InvitationConfirmEmail?publicInvitationId=bd87277a-7f29-489d-b004-74a42e7...

regards

[just.emma]

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

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

[ahurani]

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.

[campanafrost]

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;

}