Highlighted

Pasting html info into working web page

New Here ,
Jul 31, 2019

Copy link to clipboard

Copied

I made an animation 550 x 550px on canvas.

I traded out the original static image on the web page to the new animation. The only difference is old image fit into a 122 x 122px div.

So I changed the three widths in the generated animation code to 122 x 122px. I pushed the new page live with the scripts and <body onload="init();"> and then I pushed the js file to the root with the html.

But the animation does not show up. Just blank space where the image/animation should be.

Did I miss changing something essential? I remember in the old days of flash you had to push up some sort of active x widget...

Any ideas on what I failed to do?

Thanks,

Robert

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

The potentialities for you to have messed up the code are for all practical purposes infinite. Try opening up your browser dev console and checking for errors.

That being said, you can't jam arbitrary HTML documents into DIVs and expect them to work. That's what IFRAMEs are for. Just set your Animate project to responsive in the publish settings (it's just scaling, not actually responsive, but that's what the Animate team calls it). That way it will automatically scale to the size of its container and you won't have to manually faff about with anything.

TOPICS
Discussions

Views

105

Likes

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

Pasting html info into working web page

New Here ,
Jul 31, 2019

Copy link to clipboard

Copied

I made an animation 550 x 550px on canvas.

I traded out the original static image on the web page to the new animation. The only difference is old image fit into a 122 x 122px div.

So I changed the three widths in the generated animation code to 122 x 122px. I pushed the new page live with the scripts and <body onload="init();"> and then I pushed the js file to the root with the html.

But the animation does not show up. Just blank space where the image/animation should be.

Did I miss changing something essential? I remember in the old days of flash you had to push up some sort of active x widget...

Any ideas on what I failed to do?

Thanks,

Robert

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

The potentialities for you to have messed up the code are for all practical purposes infinite. Try opening up your browser dev console and checking for errors.

That being said, you can't jam arbitrary HTML documents into DIVs and expect them to work. That's what IFRAMEs are for. Just set your Animate project to responsive in the publish settings (it's just scaling, not actually responsive, but that's what the Animate team calls it). That way it will automatically scale to the size of its container and you won't have to manually faff about with anything.

TOPICS
Discussions

Views

106

Likes

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
Jul 31, 2019 0
Adobe Community Professional ,
Jul 31, 2019

Copy link to clipboard

Copied

The potentialities for you to have messed up the code are for all practical purposes infinite. Try opening up your browser dev console and checking for errors.

That being said, you can't jam arbitrary HTML documents into DIVs and expect them to work. That's what IFRAMEs are for. Just set your Animate project to responsive in the publish settings (it's just scaling, not actually responsive, but that's what the Animate team calls it). That way it will automatically scale to the size of its container and you won't have to manually faff about with anything.

Likes

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
Reply
Loading...
Jul 31, 2019 0
New Here ,
Aug 01, 2019

Copy link to clipboard

Copied

Actually, after inspecting using web dev in the browser, I noticed it was referencing three images after further investigation I found those images and pushed them to the server where the animation worked but was too large, I then put it inside an iFrame and replaced the div where it sort of fit.

Two things I'm not happy with: One, there are what seems like my tiny characters run back and forth super fast, then the actual animation runs. Two, there's a slight border or shadow on the iFrame which makes the page look strange.

I would post a URL but my animation is on a protected server behind firewalls.

Any ideas where these artifacts are coming from?

Robert

Likes

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
Reply
Loading...
Aug 01, 2019 0
New Here ,
Aug 02, 2019

Copy link to clipboard

Copied

I added a frameborder="0" to the frame that took care of the border and I realized that the images are changing in the image folder. Things are going as expected thanks!

Robert

Likes

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
Reply
Loading...
Aug 02, 2019 0