Функция
- Руководство пользователя Adobe Animate
- Введение в Animate
- Анимация
- Основы анимации в Animate
- Кадры и ключевые кадры в Animate
- Покадровая анимация в Animate
- Работа с классической анимацией движения в Animate
- Инструмент «Кисть»
- Руководство по движению
- Анимация движения и язык ActionScript 3.0
- Сведения об анимации движения
- Анимация движения
- Создание анимации движения
- Использование ключевых кадров свойств
- Положения в анимации движения
- Использование Редактора движения для анимаций
- Редактирование траектории анимации движения
- Управление анимациями движения
- Настраиваемое ускорение и замедление
- Создание и применение стилей движения
- Настройка диапазонов анимации движения
- Сохранение анимации движения в файлах XML
- Анимация движения и классическая анимация
- Анимация формы
- Анимация с использованием инструмента «Кость» в Animate
- Работа с риггингом персонажей в Animate
- Слои-маски в Adobe Animate
- Работа со сценами в Animate
- Интерактивность
- Создание кнопок в Animate
- Преобразование проектов Animate в другие форматы документов
- Создание и публикация документов HTML5 Canvas в Animate
- Добавление интерактивных возможностей с помощью фрагментов кода в Animate
- Создание пользовательских компонентов HTML5
- Использование компонентов в HTML5 Canvas
- Создание пользовательских компонентов: примеры
- Фрагменты кода для пользовательских компонентов
- Рекомендации: реклама в Animate
- Разработка и публикация контента для виртуальной реальности
- Рабочая среда и рабочий процесс
- Создание и использование малярных кистей
- Использование шрифтов Google в документах HTML5 Canvas
- Использование библиотек Creative Cloud Libraries и Adobe Animate
- Использование рабочей области и панели «Инструменты» в Animate
- Рабочие процессы и рабочая среда Animate
- Использование веб-шрифтов в документах HTML5 Canvas
- Временные шкалы и ActionScript
- Работа с несколькими временными шкалами
- Задание настроек
- Использование панелей разработки Animate
- Создание слоев временной шкалы в Animate
- Экспорт анимаций для мобильных приложений и игровых платформ
- Перемещение и копирование объектов
- Шаблоны
- Поиск и замена в Animate
- Отмена/повтор действий и панель «История»
- Сочетания клавиш
- Использование временной шкалы в Animate
- Создание HTML-расширений
- Параметры оптимизации изображений и GIF-анимаций
- Настройки экспорта для изображений и GIF
- Панель «Ресурсы» в Animate
- Мультимедиа и видео
- Преобразование и объединение графических объектов в Animate
- Создание экземпляров символов и работа с ними в Animate
- Трассировка изображения
- Использование звука в Adobe Animate
- Экспорт SVG-файлов
- Создание видеофайлов для использования в Animate
- Добавление видео в Animate
- Рисование и создание объектов в Animate
- Изменение линий и фигур
- Обводки, заливки и градиенты в Animate CC
- Работа с Adobe Premiere Pro и After Effects
- Панели «Цвет» в Animate CC
- Открытие файлов Flash CS6 в Animate
- Работа с классическим текстом в Animate
- Размещение иллюстраций в Animate
- Импортированные растровые изображения в Animate
- Трехмерная графика
- Работа с символами в Animate
- Рисование линий и фигур в Adobe Animate
- Работа с библиотеками в Animate
- Экспорт звуков
- Выделение объектов в Animate CC
- Работа с AI-файлами Illustrator в Animate
- Применение режимов наложения
- Упорядочивание объектов
- Автоматизация задач с помощью меню «Команды»
- Многоязычный текст
- Использование камеры в Animate
- Графические фильтры
- Звук и ActionScript
- Настройки рисования
- Рисование инструментом «Перо»
- Платформы
- Преобразование проектов Animate в другие форматы документов
- Поддержка специализированных платформ
- Создание и публикация документов HTML5 Canvas в Animate
- Создание и публикация документа WebGL
- Упаковка приложений AIR for iOS
- Публикация приложений AIR for Android
- Публикация для Adobe AIR на настольных ПК
- Параметры публикации ActionScript
- Рекомендации: размещение ActionScript в приложении
- Использование ActionScript в Animate
- Специальные возможности в среде Animate
- Создание и использование сценариев
- Обеспечение поддержки специализированных платформ
- Общие сведения о поддержке специализированных платформ
- Работа с плагинами поддержки специализированных платформ
- Отладка сценариев ActionScript 3.0
- Обеспечение поддержки специализированных платформ
- Экспорт и публикация
- Экспорт файлов из Animate CC
- Публикация OAM
- Экспорт SVG-файлов
- Экспорт графики и видео из Animate
- Публикация документов AS3
- Экспорт анимаций для мобильных приложений и игровых платформ
- Экспорт звуков
- Рекомендации: советы по созданию контента для мобильных устройств
- Рекомендации: правила работы с видео
- Рекомендации: руководство по созданию SWF-приложений
- Рекомендации: формирование структуры FLA-файлов
- Рекомендации: оптимизация FLA-файлов для Animate
- Параметры публикации ActionScript
- Задание параметров публикации для Animate
- Экспорт файлов-проекторов
- Экспорт изображений и анимированных файлов GIF
- Шаблоны публикации HTML
- Работа с Adobe Premiere Pro и After Effects
- Быстрая публикация анимаций
- Устранение неполадок
Создайте лист спрайтов или атлас текстур и экспортируйте свои анимации для мобильных приложений и игровых платформ. Импортируйте атлас текстур в Unity или на любую другую игровую платформу с помощью подключаемого модуля.
Общие сведения
Animate позволяет создавать анимации на основе листа спрайтов или атласа текстур и экспортировать их для мобильных приложений и игровых платформ.
Лист спрайтов
Лист спрайтов — это файл растрового изображения, содержащий меньшие изображения, упорядоченные в виде «плитки». Компиляция нескольких графических объектов в один файл позволяет использовать графику в Animate и других приложениях, загружая только один файл. Это повышает эффективность загрузки изображений, что полезно в случае повышенных требований к производительности, например при разработке игр.
Листы спрайтов можно создать из любого выбранного набора роликов, символов кнопок, графических символов или растровых изображений. Элементы можно выбирать на панели «Библиотека» или в рабочей области (нельзя выбирать элементы из этих двух источников одновременно). Каждое растровое изображение и каждый кадр выбранных символов отображаются на листе спрайтов как отдельные графические объекты. Если выполняется экспорт из рабочей области, любые преобразования (масштабирование, сдвиг и т. д.), примененные к экземпляру символа, сохраняются в выходном изображении.
Атлас текстур
Атлас текстур — это коллекция текстур в виде одного большого изображения или нескольких изображений требуемого размера. Можно оптимизировать игру, создав атлас текстур и используя его в игровом приложении.
В Animate можно создать атлас текстуры из символов, таких как фрагменты роликов, графические объекты или кнопки. Элементы можно выбирать на панели «Библиотека» или в рабочей области (нельзя выбирать элементы из этих двух источников одновременно). Каждое векторное изображение и каждый ключевой кадр выбранных символов отображается как отдельное растровое изображение в атласе текстур. При экспорте объектов рабочей области все преобразования (масштабирование, сдвиг и т. д.), примененные к экземпляру символа, сохраняются в выходном изображении.
Различие между листом спрайтов и атласом текстур
В мобильных приложениях можно использовать либо лист спрайтов, либо атлас текстур в зависимости от потребностей. В следующей таблице приводятся некоторые основные различия между листом спрайтов и атласом текстур.
|
Лист спрайтов |
Атлас текстур |
---|---|---|
Производительность в мобильных приложениях |
Низкая |
Высокая |
Эффективность загрузки приложения |
Высокая, так как отсутствуют вычисления |
Низкая, так как выполняется вычисление файла JSON |
Размер |
Занимает больше места |
Занимает меньше места |
Качество анимации |
Среднее |
Высокое |
Количество создаваемых файлов |
Два файла: один файл растрового изображения и один файл json |
Переменная: на основе размера изображения. |
Количество создаваемых растровых изображений |
В зависимости от количества кадров, используемых в листе спрайтов, также может увеличиваться количество растровых файлов, что приводит к увеличению размера листа спрайтов |
В спрайте генерируются только уникальные растровые изображения, благодаря чему уменьшается суммарный размер. |
Создание листа спрайтов
Чтобы создать лист спрайтов, выполните следующие действия.
-
Выделите один или несколько символов в библиотеке или экземпляры символов в рабочей области. Выделение также может содержать растровые изображения.
-
Щелкните выделенные объекты правой кнопкой мыши и выберите пункт «Создать лист спрайта».
-
В диалоговом окне Создать лист спрайта выберите необходимые параметры и нажмите Экспорт.
Параметр экспорта
Описание
Размер изображения
Общий размер листа спрайтов в пикселях. Значение по умолчанию («Автоматический размер») позволяет вместить все включаемые спрайты.
Формат изображения
Формат файла изображения, содержащего экспортируемые спрайты. Прозрачность изображения (альфа-канал) поддерживается для 8-битных и 32-битных изображений PNG. В 24-битных изображениях PNG и изображениях JPG прозрачный фон не поддерживается. В общем случае разница в визуальном качестве 8-битных и 32-битных изображений PNG незначительна. Размер 32-битных файлов PNG в четыре раза превышает размер 8-битных файлов PNG.
Отступы листа
Отступы от краев листа спрайтов (в пикселях).
Отступы фигуры
Отступы в пикселях между изображениями на листе спрайтов
Алгоритм
Способ размещения изображений на листе спрайтов. Этот параметр может принимать два значения:
- Базовый (по умолчанию)
- MaxRects
Формат данных
Внутренний формат для хранения данных изображений. Выберите формат, который наилучшим образом подходит для предполагаемого использования листа спрайтов после экспорта.
Поворот
Поворот спрайтов на 90 градусов. Данная настройка доступна только для некоторых форматов данных.
Обрезка
Данная настройка обеспечивает экономию места на листе спрайтов за счет обрезания неиспользуемых пикселей каждого символьного кадра, добавляемого на лист.
Кадры стека
Выбор этой настройки исключает дублирование повторяющихся кадров выбранных символов на результирующем листе спрайтов.
Экспорт анимаций в мобильные приложения или игровые движки
Animate помогает экспортировать анимацию на игровые платформы и мобильные приложения. Хотите смотреть анимацию на мобильном телефоне или в игровом движке? Посмотрите учебный видеоролик в конце этого примера и выполните следующие шаги.
-
В разделе «Библиотека» щелкните правой кнопкой мыши фрагмент ролика.
-
Выберите «Создать лист спрайта».
-
В диалоговом окне «Лист спрайтов» выберите необходимые параметры.
-
Нажмите «Экспорт».
Как экспортировать анимацию для мобильных приложений и игровых движков
Создание атласа текстур
Разработчики игр могут использовать Animate для управления анимированными объектами и их экспорта в Unity или на любые другие часто используемые игровые платформы в виде атласа текстур.
Процесс генерирования атласа текстур в Animate и его импорта в Unity представлен на следующей схеме.
Для создания атласа текстур анимации выполните следующие действия.
-
В Animate можно создать атлас текстур для выбранного символа в Библиотеке или для экземпляра символа в рабочей области.
-
Щелкните этот символ правой кнопкой мыши и выберите в меню Создать атлас текстур. Откроется окно Создание атласа текстур.
-
Выберите параметры экспорта для атласа текстур.
Параметр экспорта Описание Размер изображения Общий размер атласа текстур в пикселях. Значение по умолчанию («Автоматический размер») позволяет вместить все включаемые изображения. Оптимизировать размеры - Когда установлен флажок «Оптимизировать размеры», удаляются пустые пиксели из растрового изображения, а размеры не являются степенью числа два. Это применимо ко всем генерируемым растровым изображениям.
- Когда флажок «Оптимизировать размеры» снят, растровое изображение генерируется на основе выбранных размеров.
Формат изображения Формат файла изображения, содержащего экспортируемые спрайты. Прозрачность изображения (альфа-канал) поддерживается для 8-битных и 32-битных изображений PNG. В общем случае разница в визуальном качестве 8-битных и 32-битных изображений PNG незначительна. Размер 32-битных файлов PNG в четыре раза превышает размер 8-битных файлов PNG. Разрешение Выберите любое значение в диапазоне 0,3–3,0 Отступы листа Отступы в пикселях от краев атласа текстур Отступы фигуры Отступы в пикселях между изображениями в атласе текстур. Алгоритм Способ размещения изображений в атласе текстур. Этот параметр может принимать два значения:
- Основные
- MaxRects (по умолчанию)
Формат данных Внутренний формат для хранения данных изображений. По умолчанию используется формат JSON. Поворот Поворот изображения на 90°. Данная настройка доступна только для некоторых форматов данных. Свести наклоненные объекты в растр Выберите этот параметр, если вы используете преобразования объектов с наклоном. Animate преобразует эти объекты в растровые изображения, так как некоторые игровые платформы неправильно интерпретируют преобразование с наклоном. Оптимизировать файл Animation.json - Когда установлен флажок «Оптимизировать файл Animation.json», то удаляются отступы и разложенная матрица, а также сокращаются используемые имена (по умолчанию).
- Когда флажок «Оптимизировать файл Animation.json» не установлен, то при экспорте сохраняются отступы и значимые имена.
-
Можно выбрать вариант экспорта символа в несколько растровых изображений в зависимости от размера.
Если размер ресурса больше выбранного измерения изображения, появляется предупреждение.
-
Чтобы просмотреть конечный результат, откройте вкладку «Просмотр».
-
Нажмите кнопку Обзор и выберите путь назначения для файла вывода на компьютере, либо введите путь к текстовое поле, затем нажмите кнопку Экспорт.
Созданная папка вывода для атласа текстур содержит следующие файлы.
Animation.json
Этот файл содержит сведения об анимации. Идентичные кадры по умолчанию оптимизируются и консолидируются в файле Animation.json.
spritemap.json
Этот файл содержит сведения о файле spritesheet.png.
spritemap.png
Если говорить об экспортируемом символе, созданный файл будет содержать растровые представления всех уникальных текстур, необходимых для воссоздания анимации.
Созданный атлас текстур можно будет использовать с любой игровой платформой, например Unity. Для обеспечения совместимости импортируемых данных потребуется соответствующий подключаемый модуль.
Импорт атласа текстур в Unity
Можно импортировать созданные в Animate файлы атласов текстур в избранные игровые платформы. Чтобы импортировать файлы атласов текстур, создайте подключаемые модули для соответствующих игровых платформ. В этот выпуск включен образец подключаемого модуля импорта для инструмента Unity.
Импортируйте атлас текстур в Unity, выполнив следующие действия.
-
Создайте проект в Unity, выбрав для него путь размещения. В указанном местоположении будет создана папка с вложенной папкой Активы.
-
Создайте две вложенные папки в разделе Активы как Ресурсы и Редактор.
-
Щелкните здесь, чтобы загрузить образец подключаемого модуля для импорта для Unity. Выберите Подключаемый модуль Unity с вкладки Загрузки и укажите номер версии, который требуется загрузить.
Архив unity-plugin.zip состоит из файлов Plugin.cs, WrapperPlugin.cs, AnimateEditor.cs и Effect.shader.
Загружая образец, вы принимаете Условия использования и Политику конфиденциальности в сети Интернет.
-
Переместите файлы атласа текстур, такие как Animation.json, spritemap.json, spritemap.png, и файлы подключаемого модуля Unity, например Plugin.cs и Effect.shader, в папку Активы > Ресурсы.
-
Переместите файлы AnimateEditor.cs и WrapperPlugin.cs в папку Активы.
-
В Unity выберите файл AnimateEditor.cs и перетащите его в область главной камеры.
-
Воспроизведите проект. Воспроизведение проекта приводит к разделению карты спрайтов на разные спрайты.
-
Переместите файл AnimateEditor.cs в в редактор.
-
В Unity выберите файл WrapperPlugin.cs и перетащите его в область Главная камера. Кроме того, отмените выбор или удалите файл AnimateEditor.cs из области главной камеры.
-
Воспроизведите или опубликуйте результаты в зависимости от потребностей.
Можно даже настроить подключаемый модуль, изменив файл WrapperPlugin.cs в соответствии с потребностями.
Подключаемый модуль Unity поддерживает цветовые эффекты для созданных в Animate файлов атласа текстур. Кроме того, подключаемый модуль поддерживает маскирование с помощью слоев. Функция маскирования применяется только начиная с выпуска Unity 2017.
Публикация текстур
Аниматоры могут создавать и экспортировать контент в векторном формате или использовать растровый формат для платформ HTML 5. Для более высокой производительности при работе с анимациями в параметры публикации добавлена возможность их экспорта в качестве атласа текстур.
1. Создайте документ Canvas. Выберите пункт меню Файл > Создать для вывода окна «Новый документ».
2. Щелкните вкладку Дополнительно в верхней части экрана и выберите параметр HTML5 Canvas. Откроется новый FLA-документ.
3. Щелкните Файл > Параметры публикации.Если установлен флажок Экспортировать документ как текстуру на вкладке «Основные», то на вкладке Параметры изображения появятся параметры публикации текстур. По умолчанию в публикацию текстур включены все символы. Чтобы выбрать отдельные символы, щелкните значок параметров рядом.
Хотя этот параметр может увеличить размер ресурсов, он повышает производительность. Кроме того, вы можете увеличить разрешение изображений в два или три раза от исходного для дисплеев HiDPI. Чтобы изменить параметры разрешения, щелкните значок гаечного ключа рядом с функцией Экспортировать документ как текстуру, как показано на снимке экрана ниже. Измените значение параметра «Разрешение», чтобы увеличить его в 2 или 3 раза.
По умолчанию при публикации текстур задается в 2 раза большее разрешение. Кроме того, диапазон для разрешения можно менять от 0,3 до 3.
Публикация текстур применима только к типу документа HTML5 Canvas.
Выбор между векторным или растровым файлом напоминает выбор между размером файла и производительностью. Платформы HTML5 оптимизированы для растрового контента. Таким образом, для сложных фигур лучше предварительно преобразовать векторные изображения в растровые. Для части базового контента все еще можно использовать векторный контент. Эта функция в Animate доступна в диалоговом окне «Частичный выбор символов». Частичный выбор символов позволяет выбрать символы, которые следует преобразовать в растровый контент, а остальные сохранить как векторные объекты.
Чтобы открыть раздел «Частичный выбор символов», щелкните Изменить в диалоговом окне Параметры публикации и выберите символ в списке. По умолчанию выбраны все символы.
Выберите символы в списке.
Повышение производительности графики с помощью растровых текстур
В Animate растровые текстуры позволяют повысить производительность анимации на разных платформах. Хотите снизить уровень сложности векторов с помощью растровых текстур? Посмотрите учебный видеоролик в конце этого примера и выполните следующие шаги.
-
На панели «Инспектор свойств» щелкните «Параметры публикации».
-
На вкладке «Основные» щелкните значок гаечного ключа рядом с пунктом «Экспортировать документ как текстуру».
-
На вкладке «Параметры изображения» нажмите кнопку «Изменить» и выберите нужные символы.
-
Нажмите кнопку ОК.