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

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

New Here ,
Jul 26, 2020 Jul 26, 2020

Copy link to clipboard

Copied

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!

Views

373

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
LEGEND ,
Jul 26, 2020 Jul 26, 2020

Copy link to clipboard

Copied

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

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

Copy link to clipboard

Copied

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!

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
LEGEND ,
Jul 26, 2020 Jul 26, 2020

Copy link to clipboard

Copied

You take the files that Animate generates when you publish... and you upload them to a web server. That's 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 30, 2020 Jul 30, 2020

Copy link to clipboard

Copied

Thank you.  I made a simple protoype/demo Adobe Animate HTML5 file and published it.  It produced 4 files:  

an .fla file,

an .html file,

a .js file,

and a .png file

 

I went to my GoDaddy account and uploaded the files to the 'public_html' folder in the 'File Manager'.

 

If I go to my website there is simply a listing of the files in text - not the actual animation.

 

I contacted GoDaddy support.  They recommended re-naming of the .html file to "index.html".  That didn't help.  They also recommended writing an "htacess".  I do remeber seeing this before giving up on Dreamweaver but I don't know how to write one independently.

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
LEGEND ,
Jul 30, 2020 Jul 30, 2020

Copy link to clipboard

Copied

Publishing doesn't make an FLA file. That's your Animate project file.

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

Copy link to clipboard

Copied

Thanks. That makes sense. I deleted it from the 'public_html' folder of the File Manager in my GoDaddy account.  The website is still not playing the animation.

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 ,
Mar 05, 2021 Mar 05, 2021

Copy link to clipboard

Copied

LATEST

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?

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