OAM file not responsive in Dreamweaver

[ichristman]

OAM files are not responsive in Dreamweaver. Using responsive export publish settings in Animate CC latest version, I insert .oam file as an animated composition into latest dreamweaver with fluid layout and get this:

  <object id="EdgeID" type="text/html" width="820" height="420" data-dw-widget="Edge" data="animation_assets/TexasAniCheck/Assets/TexasAniCheck.html">

  </object>

Width and height are hard coded and not responsive. If I change width to 100% it will scale but the height does not.

This leaves a large gap below animation and additional content on page.

If I set height to a percentage (100%) the animation becomes very small around 40x40px. If I remove height it disappears. I've been using Flash since it came out but can't transition to Animate CC without this fix. Please help.

[resdesign]

I think when you publish an OAM package with scale to fit visible area, if you have a width and height values in your object it represents the box in which the oam will stretch. So basically your OAM is responsive in that area, if that makes sense. At least this was my understanding for OAM created with Edge Animate CC.

[ichristman]

thanks for you quick response

Yes, If height is set to 400px and width is set to 100% the oam/canvas embed in TexasAniCheck.html will scale to 400px high, if it hasn't reached 100% width yet.

The default insert size is the document size in animate cc.

Where I run into trouble is when I scale down the browser to mobile width (say 400px). A document that is originally 800px wide and 400px high with width changed to 100% will now be 400px wide and only 200px high leaving 200px gap before I can add more content below.

Setting the height correctly to keep it proportional with the width is what I'm struggling with.

[resdesign]

The solution is to add css for your html.

<style>

.mycontainer{

    min-height: auto !important;

}

</style>

and add the class in your object

  <object id="EdgeID" type="text/html" class="mycontainer" width="100%" height="420px" data-dw-widget="Edge" data="animation_assets/TexasAniCheck/Assets/TexasAniCheck.html">

  </object>

[ichristman · Accepted solution]

May not have implemented correctly I'm still getting gap. My site is bootstrap 3 so I tried this:

<div class="embed-responsive embed-responsive-16by9">   

<object id="EdgeID" type="text/html" width="820" height="390" data-dw-widget="Edge" data="../../../sites/JacksonCokerStaging/animation_assets/MI-Ani2/Assets/MI-Ani2.html">

</object>

</div>

and it is working. Note: width can still be hard set and I may need to keep my animations at 16by9 or 4by3.

Thanks for your help. I'm going to experiment more with min-height: auto !important;

[lysandersjoy]

I have a similar issue with an OAM animation I created in Adobe Animate CC and placed on a web page using Dreamweaver and html5. The animation scales very nicely between lg-xs screens but as the screen size dips below 1200 wide (lg to md) you see the gap betweeb the animation <object> and the next element grow substantially larger. The web page looks great on my PC but on the android phone the gap between these elements is half the screen. I tried the mycontainer style but it didn't make any difference. Any other thoughts?

[mondelplasmid]

When publishing the animation, check center stage, make responsive, and the thing that made the difference for me - scale to fit visible area select FIT IN VIEW from drop-down.