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.
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.
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.
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.
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.
Copy link to clipboard
Copied
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!!