Skip to main content
MatthewLally
MatthewLally
Known Participant
July 26, 2020
Question

Getting an Animate .OAM file to scale dynamically/responsively on a webpage

  • July 26, 2020
  • 2 replies
  • 781 views

MY GOAL:  to get my Animate HTML5 file to play on a website so that it fills desktop screens and SCALES DOWN DYNAMICALLY on smaller screens.

 

I created an interactive, animated HTML5 file (call it an 'app') in Animate.  

I selected Test Movie in Browser.  The app fills the screen (close enough anyway) and scales down perfectly if I reduce the window size.  

In 'Publish Settings' I select make responsive and scale to visible area.  I publish it as an .OAM.

 

1) I can't place it in Adobe Portfolio.  Portfolio doesn't accept .OAM

2) I place it in Muse.  It is PERFECT.  It fills a desktop screen and scales down smoothly and beautifully to ANY smaller screen.  However when I publish it on GoDaddy, the webpage is blank.  If you re-fresh the page several times it works perfectly but having to re-fresh the page seems non-viable.  Adobe Support will not comment on Muse.

3) When placed into Dreamweaver using the 'Insert, Animated Composition' option, the .OAM is placed but the dynamic scaling is gone.  The .OAM does not scale down dynamically.  It seems to be using media queries but the result is that it fits only medium screens well. The automatic, dynamic scaling of the Animate browser test and Muse is gone.

 

Question: Can I place my animated, interactive HTML5 .OAM into a website so that it keeps the dynamic - or responsive - scaling so that it looks good on any screen?  To be clear, I don't need any of the usual features of a website (header, footer, additional pages).  I just want my self-standing HTML5 on the web.

 

Thank you!

    This topic has been closed for replies.

    2 replies

    A
    andrewandterry
    Participating Frequently
    March 6, 2021

    I have a little different issue with an OAM animation I created in Adobe Animate CC and placed on a web page using Dreamweaver/Bootstrap4 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 a gap between the animation <object> and the next element grow substantially larger. The web page works and looks great on my PC but on the android phone the gap between these elements is half the screen.  Any thoughts?

    C
    ClayUUID
    Brainiac
    July 26, 2020

    Why are you fixated on turning it into an OAM? Animate publishes an HTML file natively, why not just use that?

    MatthewLally
    MatthewLallyAuthor
    Known Participant
    July 27, 2020

    Thank you so much for your reply.  I can see that I do seem fixated.  

     

    I thought that OAM was the only way to put my Animate creations on the web.  I didn't know there was an easier way.  Could you tell me how or point me to a reference for doing that. Thank you for considering!

    C
    ClayUUID
    Brainiac
    July 27, 2020

    You take the files that Animate generates when you publish... and you upload them to a web server. That's it.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices