OAM file not responsive in Dreamweaver

Explorer ,
Aug 03, 2018 Aug 03, 2018

Copy link to clipboard

Copied

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.

 

  

Views

496

Likes

translate

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
community guidelines

correct answers 1 Correct Answer

Explorer , Aug 03, 2018 Aug 03, 2018
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 wi...

Likes

translate

Translate

Translate
Adobe Community Professional ,
Aug 03, 2018 Aug 03, 2018

Copy link to clipboard

Copied

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.

Likes

translate

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
community guidelines
Explorer ,
Aug 03, 2018 Aug 03, 2018

Copy link to clipboard

Copied

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.

Likes

translate

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
community guidelines
Adobe Community Professional ,
Aug 03, 2018 Aug 03, 2018

Copy link to clipboard

Copied

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>

Likes

translate

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
community guidelines
Explorer ,
Aug 03, 2018 Aug 03, 2018

Copy link to clipboard

Copied

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;

Likes

translate

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
community guidelines
New Here ,
Mar 05, 2021 Mar 05, 2021

Copy link to clipboard

Copied

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?

Likes

translate

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
community guidelines