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

Importing Animation into HTML Canvas

Community Beginner ,
May 24, 2024 May 24, 2024

Copy link to clipboard

Copied

I would like to ask if someone already did this and can help me to understand if is possible or not.

I made an simple animation in After Effect and i export in a Json file with bodymovin plugin, now i want to export this Jason file into an html canvas with animate.

 

Is that possible or not? 

 

Thanks a lot,

TOPICS
ActionScript , Code

Views

162

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 Expert ,
May 24, 2024 May 24, 2024

Copy link to clipboard

Copied

animate can load and parse json files with code, but i don't think that's what you want.

 

you probably should export a png sequence from after effects and import that into animate.

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
Community Beginner ,
May 24, 2024 May 24, 2024

Copy link to clipboard

Copied

This video explain what i want to do 😉

 

https://www.youtube.com/watch?v=ua7PWQH83U4

 

 

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
Community Expert ,
May 24, 2024 May 24, 2024

Copy link to clipboard

Copied

why do you want to involve html/json?

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
Community Expert ,
May 24, 2024 May 24, 2024

Copy link to clipboard

Copied

Hi.

 

You'll either need to write your own parser to turn the animation described in the JSON file into Animate's symbols in a FLA or you'll need to use Lottie to play it to you but in an external canvas, which defeats the purpose of using Animate to begin with.

 

Regards,

JC

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
Community Beginner ,
May 24, 2024 May 24, 2024

Copy link to clipboard

Copied

Hello JC,

 

thanks... i would like to avoid to write my own parser 😉 

I am just trying to find a solution from AE to HTML canvas with animate. 

 

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
Community Expert ,
May 24, 2024 May 24, 2024

Copy link to clipboard

Copied

again, you probably should export a png sequence from after effects and import that into animate.

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
Community Beginner ,
May 24, 2024 May 24, 2024

Copy link to clipboard

Copied

because it's different to import just a PNG sequece from import a full animation. I work in a sport industry and my pourpose is to find a fast way to move from a project in AE to an HTML canvas... Because depending of same variable i should change names, photos, goals, points... etc....

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
Community Expert ,
May 24, 2024 May 24, 2024

Copy link to clipboard

Copied

if that's all you're doing why not create an mp4 in ae and display that in animate?

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
Community Beginner ,
May 24, 2024 May 24, 2024

Copy link to clipboard

Copied

Yes i know i can do with an MP4, but this mean that i need to render everytime i want to change something.

Lets say that I wrote an HTML5 canvas that read from a Json stored in our cloud and change "live" flags, names point and i use as an overlay in a live production etc.... if i use Mp4 i can not do that.

My Original purpose is to understand if there is a wait from this Json (generated from AE) there is a way to parse and create a movieclip thath allow me to modify directly inside animate... i don't know if i am explain my idea clearly 😉

With Flash this is 1000 times easier than with a html canvas 😉

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
Community Expert ,
May 24, 2024 May 24, 2024

Copy link to clipboard

Copied

LATEST

you can use json.  you'll just need to encode the loading and parsing of that json 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