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

  1. Руководство пользователя Adobe Animate
  2. Введение в Animate
    1. Новые возможности Animate
    2. Визуальный глоссарий
    3. Системные требования Animate
    4. Сочетания клавиш Animate
    5. Разные типы файлов в Animate
  3. Анимация
    1. Основы анимации в Animate
    2. Кадры и ключевые кадры в Animate
    3. Покадровая анимация в Animate
    4. Классическая анимация движения в Animate
    5. Инструмент «Кисть»
    6. Руководство по движению
    7. Анимация движения и язык ActionScript 3.0
    8. Сведения об анимации движения
    9. Анимация движения
    10. Создание анимации движения
    11. Использование ключевых кадров свойств
    12. Положения в анимации движения
    13. Использование Редактора движения для анимаций
    14. Редактирование траектории анимации движения
    15. Управление анимациями движения
    16. Настраиваемое ускорение и замедление
    17. Создание и применение стилей движения
    18. Настройка диапазонов анимации движения
    19. Сохранение анимации движения в файлах XML
    20. Анимация движения и классическая анимация
    21. Анимация фигур
    22. Инструмент «Кость» в Animate
    23. Скелетная анимация персонажей в Animate
    24. Слои-маски в Adobe Animate
    25. Работа со сценами в Animate
  4. Интерактивность
    1. Создание кнопок в Animate
    2. Преобразование проектов Animate в другие форматы документов
    3. Создание и публикация документов HTML5 Canvas в Animate
    4. Добавление интерактивных возможностей с помощью фрагментов кода в Animate
    5. Создание пользовательских компонентов HTML5
    6. Использование компонентов в HTML5 Canvas
    7. Создание пользовательских компонентов: примеры
    8. Фрагменты кода для пользовательских компонентов
    9. Рекомендации: реклама в Animate
    10. Разработка и публикация контента для виртуальной реальности
  5. Рабочая среда и рабочий процесс
    1. Создание и использование малярных кистей
    2. Использование шрифтов Google в документах HTML5 Canvas
    3. Использование библиотек Creative Cloud Libraries и Adobe Animate
    4. Использование рабочей области и панели «Инструменты» в Animate
    5. Рабочие процессы и рабочая среда Animate
    6. Использование веб-шрифтов в документах HTML5 Canvas
    7. Временные шкалы и ActionScript
    8. Работа с несколькими временными шкалами
    9. Задание настроек
    10. Использование панелей разработки Animate
    11. Создание слоев временной шкалы в Animate
    12. Экспорт анимаций для мобильных приложений и игровых платформ
    13. Перемещение и копирование объектов
    14. Шаблоны
    15. Поиск и замена в Animate
    16. Отмена/повтор действий и панель «История»
    17. Сочетания клавиш
    18. Использование временной шкалы в Animate
    19. Создание HTML-расширений
    20. Параметры оптимизации изображений и GIF-анимаций
    21. Настройки экспорта для изображений и GIF
    22. Панель «Ресурсы» в Animate
  6. Мультимедиа и видео
    1. Преобразование и объединение графических объектов в Animate
    2. Создание экземпляров символов и работа с ними в Animate
    3. Трассировка изображения
    4. Использование звука в Adobe Animate
    5. Экспорт SVG-файлов
    6. Создание видеофайлов для использования в Animate
    7. Добавление видео в Animate
    8. Работа с ключевыми точками видео
    9. Рисование и создание объектов в Animate
    10. Изменение линий и фигур
    11. Обводки, заливки и градиенты в Animate CC
    12. Работа с Adobe Premiere Pro и After Effects
    13. Панели «Цвет» в Animate CC
    14. Открытие файлов Flash CS6 в Animate
    15. Работа с классическим текстом в Animate
    16. Размещение иллюстраций в Animate
    17. Импортированные растровые изображения в Animate
    18. Трехмерная графика
    19. Работа с символами в Animate
    20. Рисование линий и фигур в Adobe Animate
    21. Работа с библиотеками в Animate
    22. Экспорт звуков
    23. Выделение объектов в Animate CC
    24. Работа с AI-файлами Illustrator в Animate
    25. Нанесение узоров с помощью инструмента «Аэрограф»
    26. Применение режимов наложения
    27. Упорядочивание объектов
    28. Автоматизация задач с помощью меню «Команды»
    29. Многоязычный текст
    30. Использование камеры в Animate
    31. Использование Animate с Adobe Scout
    32. Работа с файлами Fireworks
    33. Графические фильтры
    34. Звук и ActionScript
    35. Настройки рисования
    36. Рисование инструментом «Перо»
  7. Платформы
    1. Преобразование проектов Animate в другие форматы документов
    2. Поддержка специализированных платформ
    3. Создание и публикация документов HTML5 Canvas в Animate
    4. Создание и публикация документа WebGL
    5. Упаковка приложений AIR for iOS
    6. Публикация приложений AIR for Android
    7. Публикация для Adobe AIR на настольных ПК
    8. Параметры публикации ActionScript
    9. Рекомендации: размещение ActionScript в приложении
    10. Использование ActionScript в Animate
    11. Рекомендации: специальные возможности
    12. Специальные возможности в среде Animate
    13. Создание и использование сценариев
    14. Обеспечение поддержки специализированных платформ
    15. Общие сведения о поддержке специализированных платформ
    16. Создание содержимого со специальными возможностями
    17. Работа с плагинами поддержки специализированных платформ
    18. Отладка сценариев ActionScript 3.0
    19. Обеспечение поддержки специализированных платформ
  8. Экспорт и публикация
    1. Экспорт файлов из Animate CC
    2. Публикация OAM
    3. Экспорт SVG-файлов
    4. Экспорт графики и видео из Animate
    5. Публикация документов AS3
    6. Экспорт анимаций для мобильных приложений и игровых платформ
    7. Экспорт звуков
    8. Экспорт видеофайлов в QuickTime
    9. Управление воспроизведением внешнего видео с помощью ActionScript
    10. Рекомендации: советы по созданию контента для мобильных устройств
    11. Рекомендации: правила работы с видео
    12. Рекомендации: руководство по созданию SWF-приложений
    13. Рекомендации: формирование структуры FLA-файлов
    14. Рекомендации: оптимизация FLA-файлов для Animate
    15. Параметры публикации ActionScript
    16. Задание параметров публикации для Animate
    17. Экспорт файлов-проекторов
    18. Экспорт изображений и анимированных файлов GIF
    19. Шаблоны публикации HTML
    20. Работа с Adobe Premiere Pro и After Effects
    21. Быстрая публикация анимаций

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

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.

(A) Подсветка синтаксиса (B) Цветовое оформление кода (C) Квадратные скобки

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

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

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

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

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

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

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

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

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

Вывод

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

Временная шкала цикла

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

Включить скрытые слои

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

Центрировать рабочую область

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

Сделать адаптивной

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

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

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

Включить «Масштаб до заполн. видимой области»

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

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

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

Включить предзагрузчик:

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

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

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

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

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

Публикация ресурсов Canvas в корневой папке

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

Экспорт документа как текстуры
Экспорт документа как текстуры

Примечание.

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

Примечание.

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

Экспортировать графические ресурсы

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

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

Экспортировать звуковые ресурсы

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

Экспортировать ресурсы CreateJS

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

Примечание.

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

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

Параметры экспорта ресурса

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

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

Шаблон для публикации HTML:

 

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

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

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

Размещенные библиотеки:

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

Включить скрытые слои:

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

Компактные фигуры:

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

Границы мультикадра:

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

«Перезаписать файл HTML при публикации» и «Включить JavaScript в HTML-файл»:

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

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

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

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

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

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

Параметр атрибута Переменная шаблона
Заголовок документа HTML   $TITLE
Местозаполнитель для вставки сценариев CreateJS $CREATEJS_LIBRARY_SCRIPTS
Местозаполнитель для вставки сформированных сценариев (включая сценарии веб-шрифтов) $ANIMATE_CC_SCRIPTS
Тег HTML для запуска клиентского сценария                                                                                                               $SCRIPT_START
Местозаполнитель для кода создания загрузчика (CreateJS LoadQueue) $CREATE_LOADER
Местозаполнитель для кода загрузки ресурсов, указанных в манифесте $LOAD_MANIFEST
Местозаполнитель для кода, определяющего способ загрузки файлов $HANDLE_FILE_LOAD_START
Местозаполнитель для кода, обрабатывающего события загрузки файлов $HANDLE_FILE_LOAD_BODY
Местозаполнитель для кода, завершающего способ загрузки файлов $HANDLE_FILE_LOAD_END
Местозаполнитель для кода, определяющего способ обработки завершения, который вызывается после загрузки ресурсов $HANDLE_COMPLETE_START
Местозаполнитель для кода создания рабочей области $CREATE_STAGE
Местозаполнитель для кода регистрации события Tick, после которого запускается анимация $START_ANIMATION
Местозаполнитель для кода поддержки адаптивного масштабирования и дисплеев HiDPI $RESP_HIDPI
Местозаполнитель для кода, завершающего способ обработки завершения $HANDLE_COMPLETE_END
Местозаполнитель для функции, обрабатывающей содержимое со
звуковым сопровождением                                                                            
$PLAYSOUND
Местозаполнитель для раздела стиля, поддерживающего центрирование холста $CENTER_STYLE
Местозаполнитель для свойства стиля, отвечающего за отображение холста, с поддержкой предварительного загрузчика $CANVAS_DISP
Местозаполнитель для кода отображения предварительного загрузчика $PRELOADER_DIV
Тег HTML для обозначения конца клиентского сценария                                                                                                                $SCRIPT_END
Идентификатор элемента холста                                                                                                                                                  $CANVAS_ID
Ширина рабочей области или элемента холста                                                                                                              $WT
Высота рабочей области или элемента холста                                                                                                                 $HT
Цвет фона рабочей области или элемента холста                                                                                          $BG
Версия Animate, использовавшаяся для создания
содержимого                                                                                     
$VERSION

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

Параметр атрибута

Переменная шаблона

Местозаполнитель для вставки сценариев (CreateJS и сформированный сценарий JavaScript)

$CREATEJS_SCRIPTS

Местозаполнитель для кода инициализации библиотек CreateJS, загрузки мультимедийных материалов, а также создания и обновления рабочей области

$CJS_INIT*

Примечание.

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

Поддержка интерфейсов 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 нельзя выбирать одновременно.

Объединение JS с HTML

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

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

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

  1. Выберите Окно > Действия

  2. На панели «Действия» выберите Сценарий в глобальной иерархии.

    В разделе «Глобальный сценарий» можно писать сценарии, применимые в документам в Animate или как внешние сценарии.

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

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

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

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

  1. Выберите Окно > Действия.

  2. На панели «Действия» выберите Включить в глобальной иерархии.

  3. Нажмите кнопку +, чтобы добавить сценарий из внешнего URL-адреса или добавьте файл из локальной библиотеки.

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

Объединение данных 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 содержит следующие файлы:

HTML-файл

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

Файл 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 не поддерживает использование нескольких сцен.
Чтобы преобразовать документ AS3 в документ HTML5 Canvas, выполните следующие действия.
  1. Откройте документ ActionScript 3 в Animate.
  2. Выберите Команды > Преобразование AS3 в документ HTML5 Canvas.

Справки по другим продуктам

Логотип Adobe

Вход в учетную запись