Add Adobe Animate Animation to WordPress WITHOUT Using an iFrame

Contributor ,
May 26, 2021 May 26, 2021

Copy link to clipboard

Copied

Is there any tutorial for adding an HTML5 Canvas from Adobe Animate to WordPress WITHOUT using an iFrame? I have added animations successfully using an iFrame in the past.

 

But this time I am trying to get the animation as part of the actual code in WordPress via a shortcode so that a lightbox plugin links work and I might possibly be able to hack the code to get the images in it places dynamically using Advanced Custom Fields. But have failed miserably.

 

There should be a way, the output of Animate is just code talking to code, but I can't seem to get it working.

Views

311

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
community guidelines
Community Beginner ,
Nov 18, 2021 Nov 18, 2021

Copy link to clipboard

Copied

Hello

Currently ask myself the self question.

Hint: the output as canvas is basically a bunch of html, loading the .js file and applying it to a div with an ID.
> enqueue_script (WP function)
then add a php function to return the div, fires the init() of the .js function with the correct ID with a shortcode... which I can only imagine, not realize.

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
community guidelines
New Here ,
Jan 29, 2022 Jan 29, 2022

Copy link to clipboard

Copied

LATEST

I have solved this problem. 

this issues is caused by the animation JS file where image's manifest with a wrong path.

If you paste the animation js and image file into the wordpress theme folder.

You should do it as below step.

 

For example.

open the animation JS. and then search and replace 'src:images' to  'src:wp-content/themes/Your_theme_name/images' 

 

Original path (Wrong path):

manifest: [
{src:"images/image_name.png", id:"ABC"}
],

 

rewrite it to a Right path:

manifest: [
{src:"wp-content/themes/Your_theme_name/images/image_name.png", id:"ABC"}
],

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
community guidelines