Using Adobe Animate CC in HTML5 canvas mode with external JavaScript files

Question

I'm transitioning a large FLA AS3 project into Canvas/JS. I have a large external folder structure of AS files and many library objects associated with classes.

I've converted FLA into a canvas mode but I can't find a way to associate JS files to the objects. I've seen online examples about including JS in frame scripts but I really hope to find a way to do it with external files and library objects association.

I'd appreciate any direction or example of how it can be done.

Thank you

jck · Answer 1 · 2016-05-26T00:45:15.007

6

What I do is adding all my JS utilities to the html on-the-fly from Animate with appenChild like this:

frame script:

function loadScript(url) {
    var body = document.getElementsByTagName('body')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    body.appendChild(script);
}

loadScript('assets/app/myUtilities.js');
loadScript('assets/libs/coolTool.js');
loadScript('etc..');

s = this; //to have access to the stage

And access the stage from the external JS like this:

s.my_movieclip.addEventListener("click", fl_MouseClickHandler.bind(s));

function fl_MouseClickHandler() {
    console.log('I want banana!');
}

What I saw is that unfortunately it seems not possible to instanciate objects from the library dynamically in Animate with canvas, I think that the best solution is to prepare your views on the timeline.

On the other hand, JS offer lot of functionalities (for instance calling Bootstrap Dialog Modals from your code).

edited May 26 '16 at 00:45

answered May 26 '16 at 00:15

jck

541
6
21

Additionally, if you have to load several JS with dependencies (like for jQuery), I suggest you to load only one file 'launcher.js' that contains [LABjs](http://labjs.com/documentation.php) and to append all your librairies at the end of the file using $LAB – jck May 26 '16 at 00:27
Hi, thanks for your input. However, I must tell you that it is indeed possible to instanciate objects from the library dynamically in Animate : `var myClip = new lib.MyClipsNameInTheLibrary();` – Danyright Jun 28 '17 at 12:34
Thanks @Danyright. It seems to work only if the object is already on stage, and what is the way to show the new created object on stage then? – jck Jun 28 '17 at 16:37
Here's some code you can use inside of Animate CC : `var myClip = new lib.MyClipsNameInTheLibrary(); exportRoot.addChild(myClip);`. MyClipsNameInTheLibrary does not need to be on stage. You can simply have it in the library. – Danyright Jun 29 '17 at 07:55

potatoDie · Answer 2 · 2021-03-19T16:27:06.827

1

CreateJS can do that for you (the PreloadJS library).

var queue = new createjs.LoadQueue();
queue.loadManifest([
    "auxiliary.js",
    "main.js"
]);

edited Mar 19 '21 at 16:27

answered Mar 18 '21 at 08:15

potatoDie

71
6

score 0 · Accepted Answer · answered Apr 26 '16 at 23:38

0

I've spent some time and managed to get a better understanding how it works and created a simple example of converting Flash Actionscript project with external AS files and object-oriented structure into Animate CC Canvas and Javascript files project with similar files structure.

You can view it at https://github.com/xims/X-simple-flahtml

answered Apr 26 '16 at 23:38

xims

1,570
17
22

1

I don't understand how it works, but it works. An issue I think is that you have to modify the generated html to add your includes and js snippet, how do you do each time that you recompile from Animate? Do you use a tool to do that? – jck May 26 '16 at 00:43

Using Adobe Animate CC in HTML5 canvas mode with external JavaScript files

3 Answers3

Linked