• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

An .oam file does not fill desktop screen when placed in Dreamweaver

New Here ,
Jul 15, 2020 Jul 15, 2020

Copy link to clipboard

Copied

I created an interactive HTML5 canvas document in Adobe Animate.  When I place the .oam file into Dreamweaver it looks great on a smartphone screen but does not fill the screen when viewed on a desktop screen.  Increasing the height and width dimensions in Dreamweaver does not seem to icrease the size on desktop viewing.  I have to admit I have not mastered media queries yet. I am not sure if that is where the solution will be.  Are there any suggestions to have the .oam file fill on a desktop screen and be centered?  Using Adobe Muse I could just drag the corners of the imported .oam and it seemed to work beautifully but I have abandoned Muse for a different problem. Thank you for considering.

Views

302

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
Community Expert ,
Jul 15, 2020 Jul 15, 2020

Copy link to clipboard

Copied

In Animate CC, did you make your Canvas responsive?   See YT video below for details.

 

 

In DW CC, create a responsive layout from one of the responsive starter templates.  File > New > Starter Templates > Bootstrap Templates or Responsive Starters.  Select a layout and hit Create button.  Save and name your document. Then insert OAM.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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 ,
Jul 20, 2020 Jul 20, 2020

Copy link to clipboard

Copied

THANK YOU SO MUCH for your timely response.

 

I created a demo/sample Animate file and tested it in browser per YT video instructions.  It was PERFECT - perfectly sized, centered, and scaled resposnively.

 

Then I went to Dreamweaver and selected 'Starter template' - 'Responsive started' - 'Resposive About page'.  I don't want an About page; I just want my .oam file, but it seemed as good a choice as any.  I figured I could just cut out all the auto-populated templated stuff that I don't want.

 

Unfortunately once I publish the Dreamweaver wesbite my sample/demo .oam file LOSES all it sizing/ scale responsiveness.  The website as a whole with all the auto-populated Dreamweaver template elements is responsive but my .oam itself is not.

 

I'll attach 2 screenshots of the website on my desktop.  One shows that it doesn't fill the desktop screen (or come close enough) and the other shows that the .oam isn't scaling down responsively. 

 

P.s. I went back to cut out all the template stuff and left my .oam.  The .oam still wasn't responsive.

 

I want to emphasize that I appreciate your suggestions and they did help move me closer to my goal.  

 

It may be unnecessary but I'll attach 2 screenshots.  One is that the .oam doesn't scale up to fill the desktop.  The other is that it doesn't scale down.

 

.oam not scaling UP to fill desktop screen.oam not scaling UP to fill desktop screenNot scaling down dynamicallyNot scaling down dynamically

Votes

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
Community Expert ,
Jul 20, 2020 Jul 20, 2020

Copy link to clipboard

Copied

Upload your work to a staging server so we can see it.  Screenshots don't tell us much.

 

The parent container that the OAM sits in should be 100% width.

Also you might find it easier to use an <iframe> for your animation.

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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 ,
Jul 23, 2020 Jul 23, 2020

Copy link to clipboard

Copied

Thank you again  for your response!

 

Unfortunately I don't have a staging server.  But if you want to see what I was trying to show in the screenshots - just go to my website GlanceMD.com.  Please note the .oam file currently placed there is just a demo until I can figure out how to make it scale dynamically.  ( Another small detail: I have modified the demo .oam after the screenshots.  It now has a tiny bit of interaction and animation.)

 

Also, unfortunately,  I don't know what a "parent container" is.  I am just selecting "Insert", then "Animated Composition", then selecting my saved .oam file.  I don't see a reference to parent container.

 

I see  the <iframe> option in Dreamweaver under the "Insert" tab - not far below the "Animated Composition" option.  I have never used it - I don't even know what it is.  If you think it would helpful to get this .oam to size dynamically, I'll starting looking into it.

 

 

 

Votes

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 ,
Jul 23, 2020 Jul 23, 2020

Copy link to clipboard

Copied

LATEST

P.S. This may not be helpful or necessary but here is a link to demo Animate file that I published for the demo .oam

https://shared-assets.adobe.com/link/205f6724-38e4-4d21-4557-a768db723c16

 

Thanks again for considering!!

Votes

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