HTML5 canvas Animate CC - How to add external scripts and load .json files

[stephs28662241]

Hello,

So I have been using animate cc for a little while now, but can't seem to find much about the global scripts. The reason I want to know more is that I created an animation in After Effects, and used the bodymovin plug in to export this as an html5 file - producing a .JSON and the player being a .JS . I want to place this html5 version of my animation into my html5 canvas in Adobe Animate CC, but I am unsure how to do this?

I assume there is a way to do it from within the actions panel in Animate CC, loading the player as a global script.. but then how do I bring in the .JSON file?

Would be so grateful for any help with this!

Thanks.

[Lilybiri]

You posted this in the Captivate forum, do you want me to move it to the Animate forum?

[stephs28662241]

oh sorry! Yes please do,

thanks!

[Lilybiri]

Done!

[ClayUUID · Accepted solution]

Animate is not like Dreamweaver, where you can throw things into an HTML document together and expect them to just work. Animate in Canvas mode is essentially an IDE for the CreateJS library. When you publish you get a single canvas element that is under the direct control of the library.

Now, I have no specific idea what it means to publish After Effects as HTML5. I don't know if it's flinging divs around or using a canvas element of its own, but either way you're looking at something that most likely exists in its own world separate from any other library. I would be very surprised if you could directly integrate this animation. Most likely you'll have to float it above your Animate stage, creating the illusion that it's all part of the same animation.

That being said, to include third-party script files in an Animate project:

1. Open the Actions windows.

2. Drag out the left edge to display a list that shows Global, Include, Script.

3. Click Include.

4. Click the + button on the upper-right.

5. Select "Add a File..."

6. Pick your JS file.

7. Click Global to return to the local frame script view (yes, really).

In AS3 documents you can just go to publish settings and click the wrench button to include external scripts, but I guess they thought it would be more fun to do things this way in Canvas documents.

[SeanMcDade]

Thanks ClayUUID, for the external-file inclusion step-through; appreciate it.

[camilapb]

Hello I wanted to know if anyone had watched the html5 adobe animate webinars ? If someone coulda share material with me ?