Создание и публикация документа WebGL

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

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

В некоторых браузерах поддержка WebGL не включена по умолчанию. Инструкции по включению WebGL в браузере см. в этой статье.

 Обязательно проверьте, включена ли поддержка WebGL в браузере, так как в некоторых браузерах она выключена по умолчанию.

Использование типа документов WebGL-glTF (бета-версия)

Animate теперь включает два типа документов WebGL-glTF. Тип документа WebGL-glTF (стандартный) интегрируется с любыми пакетами с WebGL-glTF (стандартный). Он полностью совместим со стандартами.

Публикация файла WebGL-glTF

Преобразование анимации в форматы GLTF и GLB

WebGL-glTF и GLB уменьшают размер файла и объем обработки во время выполнения. В Animate можно использовать документы обоих форматов. Хотите использовать свои видео в обоих форматах? Посмотрите учебный видеоролик в конце этого примера и выполните следующие действия.

Создание сложных анимаций с помощью экспорта WebGL GLTF в Animate

Посмотрите видео, чтобы узнать, как выглядит анимация в форматах WebGL GLTF, GLB.

Animate 18.0 и более ранние версии

Если используется Animate 18.0 и более ранние версии Animate, см. следующие ресурсы.

Тип документа WebGL

Animate позволяет создавать и публиковать расширенное интерактивное содержимое в формате Web Graphics Library (WebGL). Так как поддержка WebGL полностью интегрирована в браузеры, это позволяет Animate применять аппаратное ускорение для обработки и визуализации графики в пределах холста веб-страницы.

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

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

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

В Animate документ WebGL позволяет быстро создавать и публиковать содержимое для формата WebGL. Чтобы создать документ WebGL, выполните следующие действия.

1. Запустите Animate.
2. В окне приветствия выберите вариант WebGL (Просмотр). Можно также выбрать пункт меню Файл > Создать, открыв окно Создать документ. Выберите вариант WebGL (Просмотр).

Предварительный просмотр содержимого WebGL в браузерах

Для предварительного просмотра или тестирования содержимого можно использовать функцию Animate «Тестировать ролик». Для предварительного просмотра выполните следующие действия.

1. В Animate нажмите клавиши Ctrl+Enter в ОС Windows или CMD+Enter в ОС Mac. При этом запускается браузер по умолчанию для визуализации содержимого WebGL.

Для выполнения содержимого WebGL программе Animate требуется веб-сервер. Animate имеет встроенный веб-сервер, настроенный для выполнения содержимого WebGL через порт № 8090. Если сервер уже использует этот порт, Animate автоматически обнаруживает и устраняет конфликт.

Публикация содержимого в формате WebGL

Animate позволяет создавать и публиковать содержимое WebGL с использованием встроенных средств.

Чтобы опубликовать документ WebGL, выполните следующие действия.

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

Введите описательное имя для вывода. Также выберите или введите папку, в которую требуется опубликовать вывод WebGL.

Позволяет указать, следует ли перезаписывать файл-оболочку HTML или нет при каждой публикации проекта WebGL. Этот флажок можно снять, если в опубликованный HTML-файл внесены изменения извне и требуется сохранить их в процессе синхронизации изменений, внесенных в анимацию или ресурсы в Animate.

Включает все скрытые слои в вывод WebGL. Когда флажок «Включить скрытые слои» снят, в итоговый файл WebGL не выполняется экспорт слоев, помеченных как скрытые. Это упрощает тестирование различных версий документов WebGL.

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

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

 Максимальная частота кадров для содержимого WebGL, запускаемого в браузерах, составляет 60 кадров/с.

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

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

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

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

Выполняет визуализацию опубликованного содержимого на платформе WebGL. Публикуется в папку libs/ документа WebGL. Файлу присваивается имя: flwebgl-<версия>.min.js

HTML-оболочка использует JS-файл для визуализации содержимого WebGL.

Хранит все значения цветов (форм), включая экземпляры растровых изображений на рабочей области.

Добавление звука в документ WebGL

Можно импортировать и встраивать аудиодорожки в документ WebGL, управлять воспроизведением с помощью настроек синхронизации (событие, начать и остановить) и проигрывать звук на временной шкале во время выполнения. На данный момент WebGL поддерживает только форматы .wav и .mp3.

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

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

Можно перенести существующее содержимое из Animate в документ WebGL. Для этого в Animate предусмотрена возможность переноса путем копирования и импорта содержимого вручную. Кроме того, при работе с несколькими документами в Animate копируют содержимое между документами в виде слоев или активов в библиотеке. Хотя большинство функций Animate поддерживаются, некоторые типы содержимого изменяются в соответствии с требованиями формата WebGL.

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

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

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

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

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

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

Например, вы создали пунктирную линию в документе ActionScript 3.0 и переключились в режим WebGL, когда был все еще выбран инструмент «Линия». Изучите указатель и инспектор свойств — в них визуально указывается, что пунктирная линия не поддерживается в WebGL.

На панели «Действия» можно разместить код Javascript, в таком случае он будет выполняться после того, как воспроизведение дойдет до этого кадра. Переменная this в контексте сценариев кадров относится к тому же экземпляру объекта MovieClip, что и данный кадр. Кроме того, сценарии кадров получают доступ к функциям и переменным Javascript, объявленным в HTML-файле-контейнере. При копировании кадра или слоя из документа ActionScript в документ WebGL имеющиеся сценарии будут закомментированы.

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

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

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

не поддерживаются. Эффект удаляется, а фигура заполняется сплошной заливкой.

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

 

изменяется: заполняется сплошной заливкой основным цветом.

Оптимизация производительности визуализации путем кэширования растрового изображения

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

Например, при создании анимации со сложным фоном создайте фрагмент ролика, в котором все элементы включены в фон. Затем в инспекторе свойств выберите команду «Сохранить в кэше как растровое изображение» для фонового фрагмента ролика. Во время воспроизведения фон визуализируется как растровое изображение, сохраненное на текущей глубине экрана. Браузер прорисовывает растровое изображение в рабочей области быстро и только единожды, что способствует более быстрому и плавному воспроизведению анимации.

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

Чтобы включить свойство Кэшировать как растровое изображение для символа Movieclip, выберите нужный экземпляр Movieclip и установите значение «Кэшировать как растровое изображение» в поле «Визуализация» окна «Инспектор свойств» (Окно > Свойства).

Советы по применению кэширования в качестве растрового изображения

При установке свойства «Кэшировать как растровое изображение» для содержимого WebGL примите во внимание следующие замечания.

• Максимальный размер символа Movieclip — 2048 x 2048. Обратите внимание, что реальное ограничение на размер кэшируемых фрагментов ролика будет меньше 2048 x 2048, поскольку WebGL резервирует некоторые пиксели.
• При наличии нескольких экземпляров одного объекта Movieclip, Animate формирует кэш с размером первого встреченного экземпляра. Даже если размеры фрагмента ролика сильно вырастут при преобразовании, кэш не формируется заново и все так же будет действовать свойство «Кэшировать как растровое изображение». По этой причине, если символ Movieclip сильно вырастет в размерах в ходе анимации, на изображении станут видны пиксели.