Использование Adobe Animate CC в режиме холста HTML5 с внешними файлами JavaScript

Question

Я переношу большой проект FLA AS3 в Canvas/JS. У меня есть большая структура внешних папок AS-файлов и много объектов библиотеки, связанных с классами.

Я преобразовал FLA в режим холста, но я не могу найти способ связать JS-файлы с объектами. Я видел онлайн-примеры о включении сценариев JS в фрейм-сценарии, но я действительно надеюсь найти способ сделать это с помощью объединения внешних файлов и библиотек.

Буду признателен за любое направление или пример того, как это можно сделать.

Спасибо

Answer 1

Я провел некоторое время и удалось получить лучшее понимание того, как это работает, и создал простой пример преобразования проекта Flash Actionscript с внешними AS файлами и объектно-ориентированной структуры в Animate CC Canvas и Проект Javascript-файлов с аналогичной структурой файлов.

Вы можете просмотреть его на https://github.com/xims/X-simple-flahtml

Answer 2

Что я добавляю все мои JS утилитов в HTML на лету из Animate с appenChild, как это:

рамки сценарий:

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 

И доступ к стадии от внешнего JS так:

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

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

Я видел, что, к сожалению, невозможно ускорить создание объектов из библиотеки динамически в Анимации с холстом, я думаю, что лучшим решением является подготовка ваших представлений на временной шкале.

С другой стороны, JS предлагает множество функциональных возможностей (например, вызывая коды модуляции Bootstrap из вашего кода).