Создание и публикация документов HTML5 Canvas в Animate

Canvas — это новый элемент в HTML5, который предоставляет API-интерфейс, обеспечивающий возможность динамического создания и визуализации графики, диаграмм, изображений и анимации. Элемент Canvas API дополняет преимущества платформы HTML5 функциями отрисовки двумерной графики. Эти функции поддерживаются в большинстве современных операционных систем и браузеров.

По существу, Canvas — это процессор для визуализации растровых изображений. Полученные рисунки являются окончательными, их размер нельзя изменить. Более того, объекты, отрисованные с помощью Canvas, не являются частью DOM-модели веб-страницы.

Элемент Canvas может быть добавлен на веб-страницу с помощью тега <Canvas>. Такие элементы затем могут быть расширены с помощью JavaScript, чтобы придать им интерактивность. Дополнительные сведения см. на этой странице.

Новый тип документа HTML5 Canvas

Animate позволяет создавать документы HTML5 Canvas с обилием изображений, графики, анимаций и т. д. Новый тип документа (HTML5 Canvas) добавлен в Animate, и теперь обеспечивается встроенная поддержка для создания расширенного и интерактивного содержимого HTML5. Это означает, что можно использовать традиционную временную шкалу, рабочую среду и инструменты Animate для создания содержимого, а затем выводить его в формате HTML5. Всего несколько щелчков мыши — и все готово к созданию и формированию полнофункционального документа HTML5 Canvas. Для формирования такого файла HTML5 в Animate имеются заранее установленные параметры документа и публикации.

Animate интегрирован с библиотеками CreateJS, предназначенными для создания богатого интерактивного содержимого в технологиях Open Web посредством HTML5. Animate генерирует HTML и JavaScript для содержимого (включая растровые, векторные изображения, фигуры, звуки, анимации движения и т. д.), созданного в рабочей области. Полученный файл можно запустить на любом устройстве или браузере, которые поддерживают HTML5 Canvas.

Animate и Canvas API

Animate публикует данные в формат HTML5, пользуясь API-интерфейсом Canvas. Animate преобразует объекты, созданные в рабочей области, в их точные аналоги в элементе Canvas. Каждая функция Animate сопоставлена с конкретным API элемента Canvas, поэтому Animate позволяет публиковать в формат HTML5 даже сложное содержимое.

Создание документа HTML5 Canvas

Для создания документа HTML5 Canvas выполните следующие действия:

1. Выберите пункт меню Файл > Создать для вывода окна «Новый документ». Щелкните вкладку Дополнительно в верхней части экрана и выберите параметр HTML5 Canvas. При этом будет открыт новый FLA-файл, параметры публикации которого уже изменены под формат HTML5.

Теперь можно создавать содержимое HTML5 с помощью инструментов в Animate. Приступая к работе с документом HTML5 Canvas, вы заметите, что определенные функции и инструменты не поддерживаются и отключены. Это объясняется тем, что Animate поддерживает только те возможности, которые предоставляются элементом Canvas в HTML5. Например, не поддерживаются 3D-преобразования, пунктирные линии, эффекты фаски.

Добавление интерактивности в документ HTML5 Canvas

Animate публикует содержимое HTML5 с использованием библиотек CreateJS. CreateJS — это набор модульных библиотек, которые позволяют использовать расширенное интерактивное содержимое на базе открытых веб-технологий посредством HTML5. Набор CreateJS включает библиотеки EaselJS, TweenJS, SoundJS и PreloadJS. CreateJS преобразует содержимое, созданное в рабочей области, в HTML5 с использованием этих отдельных библиотек для получения файлов вывода в формате HTML и JavaScript. Также можно обрабатывать этот файл JavaScript с целью улучшения содержимого.

Однако Animate позволяет реализовать интерактивность объектов на рабочей области, созданные для HTML5 Canvas в самом приложении. Это означает, что код JavaScript можно добавлять в отдельные объекты на рабочей области прямо в Animate и просматривать их в процессе разработки. В свою очередь, Animate предоставляет встроенную поддержку для JavaScript вместе с полезными функциями в редакторе кода, которые позволяют повысить производительность рабочего процесса программистов.

Можно выбрать отдельные кадры и ключевые кадры на временной шкале и добавить интерактивные элементы в содержимое. В документы HTML5 Canvas интерактивность можно добавить с помощью JavaScript. Дополнительные сведения о создании кода JavaScript см. на этой странице.

Код JavaScript можно составить непосредственно на панели «Действия»: она поддерживает следующие функции при работе с кодом JavaScript:

Эта функция позволяет быстро вставлять и редактировать код JavaScript без ошибок. По мере ввода символов на панели «Действия» может отображаться список кандидатов на возможное дополнение вводимого текста.

Кроме того, Animate обеспечивает возможность использования некоторых функции с панели «Действия» при работе с HTML5 Canvas. Эти функции позволяют повысить производительность рабочего процесса при добавлении интерактивности в объекты на рабочей области. Они перечислены ниже.

Код отображается с использованием разных шрифтов или цветов в соответствии с синтаксисом. Эта функция позволяет писать код с опорой на структуру, позволяя визуально отличить правильный код и легко находить ошибки синтаксиса.

Код отображается с использованием разных цветов в соответствии с синтаксисом. Это позволяет визуально различать различные части синтаксиса.

Автоматически добавляются закрывающие квадратные и круглые скобки при написании кода JavaScript.

С помощью JavaScript можно добавлять интерактивность в фигуры или объекты на рабочей области. Код JavaScript можно добавлять в отдельные кадры или ключевые кадры.

1. Выберите кадр, в который нужно добавить JavaScript.
2. Выберите Окно > Действия , чтобы открыть панель «Действия».

Использование фрагментов кода JavaScript

Можно добавить фрагменты кода JavaScript, доступные в Animate. Чтобы открыть и использовать фрагменты кода, выберите Окно > Фрагменты кода. Дополнительные сведения о добавлении фрагментов кода JavaScript см. в этой статье.

Ссылки на документацию CreateJS

Коды для добавления интерактивности

Javascript предоставляет вам разнообразные возможности, позволяющие сделать анимацию интерактивной. Хотите узнать, как добавить интерактивные движения для своего персонажа? Посмотрите учебный видеоролик в конце этого примера и выполните следующие действия.

Как сделать контент интерактивным с помощью HTML5

Публикация анимаций в HTML5

Для публикации содержимого рабочей области в формат HTML5 выполните следующие действия:

1. Выберите Файл > Параметры публикации.
2. В диалоговом окне «Параметры публикации» укажите следующие параметры:

Основные настройки

Каталог, в который публикуется FLA-файл. По умолчанию он совпадает с каталогом FLA-файла, но его можно сменить кнопкой обзора "...".

Если флажок установлен, временная шкала будет зациклена, если нет — воспроизведение остановится, достигнув конца шкалы.

Если флажок снят, скрытые слои не будут добавлены в файл вывода.

Пользователи могут выбирать тип центрирования рабочей области: «По горизонтали», «По вертикали» или «В обоих направлениях». По умолчанию документ или рабочая область HTML Canvas отображается в центре окна браузера.

Пользователи могут выбирать, будет ли анимация адаптивной в отношении ширины, высоты или обоих показателей, и изменять размер опубликованного вывода с учетом различных форм-факторов. В результате файлы вывода получаются адаптивными и совместимыми с HiDPI, а изображение — более четким.

Кроме того, вывод растягивается на всю область экрана без полей и сохраняет исходное соотношение сторон, но некоторые части холста могут не поместиться в область просмотра.

• Параметры «Ширина», «Высота» и «В обоих направлениях» обеспечивают масштабирование всего содержимого по размеру холста и его видимость даже при просмотре на небольшом экране (например, мобильного устройства или планшета). Если размер экрана превышает размер созданной рабочей области, холст отображается в исходном размере.

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

По размеру обл. просмотра: отображение вывода в полноэкранном режиме с заполнением всей области просмотра и сохранением соотношения сторон.

Растянуть по размеру: растягивание вывода без полей.

Пользователи могут выбирать используемый предварительный загрузчик: по умолчанию или из библиотеки документа.

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

По умолчанию этот параметр не выбран.

• Параметр По умолчанию для использования предварительного загрузчика по умолчанию или
• параметр Обзор для использования GIF-файла предварительного загрузчика по своему выбору. GIF-файл предварительного загрузчика копируется в папку настроенных изображений в разделе Экспортировать графические ресурсы.
• Для предварительного просмотра выбранного GIF-файла выберите параметр Просмотр.

Используйте переключатели для выбора публикации на уровне корневой папки или вложенной папки. Этот параметр ВКЛЮЧЕН по умолчанию. При отключении поле для папки исчезает. Ресурсы будут экспортированы в ту же папку, что и файл вывода.

Экспорт документа как текстуры  Экспортируйте векторную анимацию как текстуры, чтобы повысить производительность. Дополнительные сведения см. в разделе Публикация текстуры.

Это применимо, только если флажок «Объединить изображения в лист спрайтов» снят.

 При необходимости вы можете экспортировать все импортированные изображения (в том числе сжатые) из документа Canvas, сохранив его размер. Для этого снимите флажки «Экспортировать документ как текстуру» и «Объединить изображения в лист спрайтов» на вкладке «Основные». Изображения экспортируются без изменения размера.

Папка, в которую помещаются графические ресурсы и из которой к ним предоставляется доступ.

Объединить в листы спрайтов: выберите этот параметр, чтобы объединить все графические ресурсы в лист спрайта. Сведения о других параметрах листов спрайта см. в разделе Экспорт растровых изображений в виде листа спрайтов.

Папка, в которую помещаются звуковые ресурсы и из которой к ним предоставляется доступ.

Папка, в которую помещаются библиотеки CreateJS и из которой к ним предоставляется доступ.

 При настройках по умолчанию файлы продолжат публиковаться с распределением по логическим подпапкам.

Дополнительные настройки

Относительные URL-адреса для экспорта изображений, звуков и вспомогательных библиотек JavaScript CreateJS. Если флажок справа не установлен, эти ресурсы не будут экспортированы из FLA-файла, но указанный путь все равно будет использоваться для составления их URL-адресов. Это ускоряет публикацию из FLA-файла, который содержит много медиаресурсов или предотвращает перезапись измененных библиотек JavaScript.

Параметр Экспортировать все растровые изображения как таблицы спрайтов позволяет упаковать все растровые изображения в документе Canvas в одну таблицу спрайтов, что сокращает количество запросов к серверу и повышает производительность. Можно указать максимальный размер таблицы спрайтов, задав значения высоты и ширины.

Использовать по умолчанию: выходной файл HTML5 публикуется с использованием шаблона по умолчанию.

Импортировать новый: импортируется новый шаблон для документа HTML5.

Экспортировать: документ HTML5 экспортируется в качестве шаблона.

Если флажок установлен, будут использованы копии библиотек, размещенные в сети CDN CreateJS по адресу code.createjs.com. Это позволяет кэшировать библиотеки и использовать их для различных сайтов одновременно.

Если флажок снят, скрытые слои не будут добавлены в файл вывода.

Если флажок установлен, векторные инструкции будут выведены в сжатой форме. Снимите флажок для экспорта подробных читаемых инструкций (удобно при обучении).

Если флажок установлен, символы временной шкалы будут иметь свойство frameBounds, содержащее массив прямоугольников, представляющих собой границы каждого кадра временной шкалы. Использование границ мультикадра значительно увеличивает время публикации.

если параметр «Включить JavaScript в HTML-файл» активен, флажок «Перезаписать файл HTML при публикации» будет установлен и отключен. При снятии флажка «Перезаписать файл HTML при публикации» флажок «Включить JavaScript в HTML-файл» снимается и отключается.

3. Нажмите кнопку «Опубликовать» для вывода содержимого в указанный каталог.

 Анимация, созданная с использованием вложенных временных шкал с единственным кадром, не может быть зациклена.

Переменные шаблона HTML

При импорте нового пользовательского шаблона HTML во время публикации переменные по умолчанию заменяются настраиваемыми фрагментами кода на основе компонентов файла FLA. 

В следующей таблице приведены текущие переменные шаблонов, которые распознает и заменяет Animate.

В текущей версии не поддерживаются следующие маркеры из предыдущих версий:

 Такие маркеры разделяются на модули и заменяются другими маркерами.

Поддержка интерфейсов JSAPI при импорте и экспорте шаблонов HTML для документов Canvas

При импорте и экспорте шаблонов HTML для документов Canvas поддерживаются следующие интерфейсы JSAPI:

• Экспорт шаблона публикации HTML5 Canvas для заданного документа в указанный каталог:

bool document::exportCanvasPublishTemplate(pathURI)

• Пример:

var pathURI ="file:///C|/Users/username/desktop/CanvasTemplate.html" 

var exportFlag =fl.getDocumentDOM().exportCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace("Экспортировать шаблон не удалось.");

• Импорт шаблона публикации HTML5 Canvas для заданного документа из указанного каталога (pathURI) и его выбор:
  

bool document::importCanvasPublishTemplate(pathURI)

• Пример: 

var pathURI= "file:///C|/Users/username/desktop/CanvasTemplate.html";

var exportFlag =fl.getDocumentDOM().importCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace("Импортировать шаблон не удалось.");

Внедрение JavaScript в HTML

В Animate реализована возможность включения файла JS в файл HTML в процессе публикации ресурсов Canvas.

1. В меню Параметры публикации перейдите на вкладку Дополнительно и выберите Включить JavaScript в HTML-файл. 
2. Выберите ОК в диалоговом окне Включение JavaScript в HTML-файл при публикации для повторной публикации содержимого, перезаписывающего файл HTML.
3. При этом флажок Перезаписать файл HTML при публикации снимается, после чего при публикации любого содержимого файл HTML формируется, но перезаписывается.
4. В разделе Больше не включать JavaScript в HTML выберите ОК для исключения JavaScript и повторной публикации файла HTML.
5. Когда параметр Перезаписать файл HTML при публикации не выбран, параметр Включить JavaScript в HTML-файл автоматически отключается. 

Если перезаписывать HTML не нужно, параметры «Перезаписать файл HTML при публикации» и «Встроить JS в HTML» нельзя выбирать одновременно.

Добавление глобальных и сторонних сценариев

Аниматоры часто используют код JavaScript, который применяются ко всей анимации. С помощью этой функции можно добавить не связанные с кадрами глобальные и сторонние сценарии, которые можно применить ко всей анимации прямо в Animate. 

Чтобы добавить или использовать глобальные сценарии, выполните следующие действия. 

Добавление сценариев сторонних разработчиков

Аниматоры часто встраивают библиотеки JavaScript сторонних разработчиков, но им приходится вручную вносить изменения в код, создаваемый в Animate Эта функция предоставляет аниматорам больше гибкости для использования самых актуальных библиотек или кода JavaScript для анимации.

Чтобы добавить сценарии сторонних разработчиков, выполните следующие действия.

Объединение данных JSON с JS

Проанализировав отзывы клиентов и небезопасность, свойственную файлам JSON, мы объединили релевантные данные с файлом JS, так что отдельный файл JSON не создается.

Оптимизация вывода в формате HTML5 Canvas

Animate оптимизирует размер вывода HTML5 Canvas и повышает производительность работы с данных благодаря следующим возможностям.

• Экспорт растровых изображений в виде листа спрайтов с использованием параметров на вкладке «Лист спрайтов» в окне «Параметры публикации».
• Исключение скрытых слоев (необходимо снять флажок «Включить скрытые слои») из опубликованного вывода.
• Исключение всех неиспользуемых ресурсов, например звуков и растровых изображений, и всех ресурсов на неиспользуемых кадрах (по умолчанию).
• Отказ от экспорта ресурсов из FLA-файлов за счет отключения параметров экспорта изображений, звуков и вспомогательных библиотек JavaScript CreateJS и использования относительных URL-адресов.
• Вывод HTML5 Canvas, совместимый с HiDPI: Animate масштабирует вывод с учетом попиксельной пропорции на устройстве для просмотра содержимого. Такая совместимость обеспечивает более высокую детализацию вывода и помогает устранить проблемы пикселизации для документов Canvas при просмотре вывода HTML Canvas на устройствах с высокой плотностью пикселей. 
  

Установка прозрачного фона холста

Для холста можно выбирать различные цвета, а также изменять его прозрачность при отображении. Если пользователь создает прозрачный холст, то при публикации будет виден фон содержимого HTML.

Примечание. Эта настройка также делает фон прозрачным при публикации OAM.

1. Выберите холст, который нужно изменить.
2. На панели Свойства выберите Рабочая область.
3. В разделе «Рабочая область» укажите процентную величину для параметра Альфа.

Поддержка «бесцветного» образца

Сделать фон холста прозрачным также можно также при помощи параметра «Образец без цвета».

1. Выберите Модификация > Документ > Цвет рабочей области или перейдите к инспектору свойств и нажмите Дополн. настройки.
2. В образце Цвет рабочей области выберите Без цвета.

Экспорт растровых изображений в виде таблицы спрайтов

При экспорте множества растровых изображений, используемых в документе HTML5 Canvas, в виде единой таблицы спрайтов сокращается количество запросов к серверу, уменьшается размер вывода и повышается производительность. Лист спрайтов можно экспортировать в формате PNG (по умолчанию), JPEG или и в том и в другом.

1. На вкладке Лист спрайтов установите флажок Объединить изображение и ресурсы в лист спрайта.
2. В поле Формат выберите PNG, JPEG или Оба.
   
3. Если выбран вариант PNG или Оба, задайте следующие параметры в области Настройки PNG.
   • Качество: выберите качество листа спрайта (8 бит (по умолчанию), 24 бита или 32 бита).
   • Максимальный размер: задайте максимальные значения высоты и ширины листа спрайтов.
   • Фон: щелкните и выберите фоновый цвет для листа спрайта. 
4. Если выбран вариант JPEG или Оба, задайте следующие параметры в области Параметры JPEG.
   
   • Качество: выберите качество листа спрайта (8 бит, 24 бита или 32 бита).
   • Максимальный размер: задайте максимальные значения высоты и ширины листа спрайтов.
   • Фон: щелкните и выберите фоновый цвет для листа спрайта.  

Работа с текстом в документе HTML5 Canvas

HTML Canvas поддерживает статический и динамический текст.

Статический текст

Статический текст — это более функциональный вариант, при выборе которого все ресурсы преобразуются в контуры во время публикации и обеспечивает отличные возможности WSYWIG. Так как текст публикуется в виде векторных контуров, его нельзя редактировать время выполнения.

Примечание. Чрезмерное использование статического текста может сделать файл слишком большим.

Динамический текст

Динамический текст позволяет изменять текст во время выполнения и не оказывает значительного влияния на размер файла. Он поддерживает меньше параметров, чем статический текст. Он также поддерживает веб-шрифты через Adobe Fonts.

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

Добавление веб-шрифтов в документ HTML5 Canvas

Animate предоставляет веб-шрифты для динамического текста в документе HTML5 Canvas. Adobe Fonts обеспечивает прямой доступ к тысячам качественных шрифтов премиум-класса, созданных самыми популярными дизайнерами. Имея подписку Creative Cloud, можно без затруднений просматривать и использовать шрифты Adobe Fonts в своих выходных документах HTML5 для современных браузеров и мобильных устройств.

Дополнительные сведения об использовании шрифтов Adobe Fonts в Animate см. в разделе Использование веб-шрифтов в документах HTML5 Canvas.

В выпуске Animate 2015.2 улучшено визуальное представление динамического текста в документах Canvas, что обеспечивает синхронизацию внешнего вида рабочей области и опубликованного документа.

Примечание. Шрифты Adobe Fonts недоступны для статического текста.

Общие сведения о выводе HTML5 Canvas

Опубликованный вывод HTML5 содержит следующие файлы:

Содержит определения для всех фигур, объектов и изображений в элементе Canvas. Он также вызывает пространство имен CreateJS для преобразования Animate в HTML5, а также соответствующий файл JavaScript, содержащий интерактивные элементы. 

Содержит выделенные определения и код для всех интерактивных элементов анимации. В файле JavaScript также определяются коды для всех типов анимации движения.

По умолчанию эти файлы копируются в ту же папку, что и для FLA-файла. Папку можно изменить, указав путь вывода в диалоговом окне «Параметры публикации» («Файл» > «Параметры публикации»).

Перенос существующего содержимого в HTML5 Canvas

Можно перенести существующее содержимое в Animate для формирования вывода HTML5. С этой целью в Animate предусмотрена возможность переноса содержимого путем ручного копирования или импорта отдельных слоев, символов и других элементов библиотеки. Также можно выполнить команду «Преобразование документа AS3 в HTML5 Canvas», чтобы автоматически импортировать существующее содержимое ActionScript в новый документ HTML5 Canvas. Дополнительные сведения см. на этой странице.

При работе в Animate с типом документа HTML5 вы можете обратить внимание, что некоторые функции Animate не поддерживаются. Это происходит потому, что такие функции Animate не имеют своих аналогов в API-интерфейсе Canvas. Как следствие, они не могут использоваться в документе типа HTML5 Canvas. Это может случиться во время перемещения содержимого при попытке:

содержимого (слоев или символов библиотеки) из традиционного документа Animate (такого как ActionScript 3.0, AIR для Android, AIR для компьютера и т. д.) в документ HTML5. В этом случае неподдерживаемые типы содержимого будут либо удалены, либо преобразованы в поддерживаемые типы по умолчанию.

Например, при копировании 3D-анимации удаляются все 3D-преобразования, примененные к объектам на рабочей области.

файла PSD или AI с неподдерживаемым содержимым. В этом случае содержимое будет либо удалено, либо преобразовано в поддерживаемые типы по умолчанию.

Например, импортируйте PSD-файл, в котором применены эффекты градиентной фаски. Animate удаляет такие эффекты.

с различными типами документов одновременно (к примеру, с ActionScript 3.0 и HTML5 Canvas), если переключиться между документами, когда выбран неподдерживаемый инструмент или параметр. В этом случае Animate визуально подскажет, что выбранная функция не поддерживается.

Например, вы создали пунктирную линию в документе ActionScript 3.0 и переключились в режим HTML5 Canvas, когда все еще был выбран инструмент «Линия». Обратите внимание на указатель мыши и на область инспектора свойств: отображаются значки, которые указывают на то, что пунктирная линия не поддерживается в HTML5 Canvas.

Компоненты ActionScript удаляются, а код превращается в комментарий. Кроме того, если в блоке комментариев имеется код JavaScript (для Toolkit for CreateJS с Animate 13.0), обязательно раскомментируйте тег вручную.

Например, если скопированные слои содержат кнопки, они удаляются.

Изменения, примененные к содержимому после переноса

Ниже перечислены типы изменений, которые применяются при переносе устаревшего содержимого в документ HTML5 Canvas.

Типы содержимого, не поддерживаемые в HTML5 Canvas, удаляются. Например:

• 3D-преобразования удаляются
• Код ActionScript превращается в комментарий
• Видео удаляется

Тип содержимого или функция поддерживается, а свойство элемента — нет. Например:

• Режим наложения «Перекрытие» не поддерживается и меняется на «Обычный».
• Пунктирная линия не поддерживается и меняется на сплошную.

Полный список неподдерживаемых элементов и их резервных значениях во время переноса см. в этой статье.

Преобразование разных документов в HTML5 Canvas

Универсальный конвертер типа документа обеспечивает преобразование существующих проектов FLA (любого типа) в документ любого другого типа, например HTML5 Canvas, ActionScript/AIR, WebGL или пользовательский документ. При преобразовании в тот или иной формат можно использовать функции разработки Animate, соответствующие определенному типу документа. 

Дополнительные сведения см. в разделе Преобразование в другой формат документа

Преобразование ActionScript 3 в документ HTML5 Canvas с использованием сценария JSFL

В Animate предусмотрен сценарий JSFL для преобразования документа AS3 в документ HTML5 Canvas. При запуске сценарий JSFL выполняет следующие действия:

• создает новый документ HTML5 Canvas;
• копирует все слои, символы и элементы библиотеки в новый документ HTML5 Canvas;
• применяет значения по умолчанию для неподдерживаемых элементов, подэлементов и свойств элементов;
• создает отдельные FLA-файлы для каждой сцены, так как документ HTML5 Canvas не поддерживает использование нескольких сцен.

1. Откройте документ ActionScript 3 в Animate.
2. Выберите Команды > Преобразование AS3 в документ HTML5 Canvas.

Это применимо, только если флажок «Объединить изображения в лист спрайтов» снят.