Примечание.

Typekit теперь называется Adobe Fonts и входит в состав Creative Cloud и других подписок. Подробнее.

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

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

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

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

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

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

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

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

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

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

Подсказки кода

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

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

Подсветка синтаксиса

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

Цветовое оформление кода

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

Скобки

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

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

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

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

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

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

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

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

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

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

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

publish-settings-basics

Вывод

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Publish settings
Параметры публикации

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

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

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

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

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

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

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

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

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

Примечание.

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

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

publish_settings_output

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

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

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

JSEmbed23
Export-spritesheets
Publish_Settings_JavaScript_Namespaces

Шаблон для публикации 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 CC, использовавшаяся для создания
содержимого                                                                                     
$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 нельзя выбирать одновременно.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    actions-include

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

Объединение данных 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. В образце Цвет рабочей области выберите Без цвета.

 

canvas tranperancy_final
Прозрачность холста

advanced_settings
Прозрачность холста: дополнительные настройки

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

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

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

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

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

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

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

Примечание. Слишком интенсивное использование статического текста может привести к значительному увеличению размера файла.

Static-text

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

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

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

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

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

Дополнительные сведения об использовании шрифтов Adobe Fonts в Animate CC см. в разделе Использование веб-шрифтов в документах 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 CC с типом документа 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 CC визуально подскажет, что выбранная функция не поддерживается.

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

Сценарии

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

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

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

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

Содержимое удаляется

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

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

Содержимое изменяется в соответствии с поддерживаемым значением по умолчанию

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

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

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

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

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

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

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

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

  • создает новый документ HTML5 Canvas;
  • копирует все слои, символы и элементы библиотеки в новый документ HTML5 Canvas;
  • применяет значения по умолчанию для неподдерживаемых элементов, подэлементов и свойств элементов;
  • создает отдельные FLA-файлы для каждой сцены, так как документ HTML5 Canvas не поддерживает использование нескольких сцен.
Чтобы преобразовать документ AS3 в документ HTML5 Canvas, выполните следующие действия.
  1. Откройте документ ActionScript 3 во Animate CC.
  2. Выберите Команды > Преобразование AS3 в документ HTML5 Canvas.

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет