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

Add Adobe Animate Animation to WordPress WITHOUT Using an iFrame

Contributor ,
May 26, 2021 May 26, 2021

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.

1.5K
Translate
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

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.

Translate
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
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"}
],

Translate
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