Руководство пользователя Отмена

Разработка и публикация контента для приложений виртуальной реальности

Поиск
Animate

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. Рисование и создание объектов в Animate
    9. Изменение линий и фигур
    10. Обводки, заливки и градиенты в Animate CC
    11. Работа с Adobe Premiere Pro и After Effects
    12. Панели «Цвет» в Animate CC
    13. Открытие файлов Flash CS6 в Animate
    14. Работа с классическим текстом в Animate
    15. Размещение иллюстраций в Animate
    16. Импортированные растровые изображения в Animate
    17. Трехмерная графика
    18. Работа с символами в Animate
    19. Рисование линий и фигур в Adobe Animate
    20. Работа с библиотеками в Animate
    21. Экспорт звуков
    22. Выделение объектов в Animate CC
    23. Работа с AI-файлами Illustrator в Animate
    24. Применение режимов наложения
    25. Упорядочивание объектов
    26. Автоматизация задач с помощью меню «Команды»
    27. Многоязычный текст
    28. Использование камеры в Animate
    29. Графические фильтры
    30. Звук и ActionScript
    31. Настройки рисования
    32. Рисование инструментом «Перо»
  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. Специальные возможности в среде Animate
    12. Создание и использование сценариев
    13. Обеспечение поддержки специализированных платформ
    14. Общие сведения о поддержке специализированных платформ
    15. Работа с плагинами поддержки специализированных платформ
    16. Отладка сценариев ActionScript 3.0
    17. Обеспечение поддержки специализированных платформ
  8. Экспорт и публикация
    1. Экспорт файлов из Animate CC
    2. Публикация OAM
    3. Экспорт SVG-файлов
    4. Экспорт графики и видео из Animate
    5. Публикация документов AS3
    6. Экспорт анимаций для мобильных приложений и игровых платформ
    7. Экспорт звуков
    8. Рекомендации: советы по созданию контента для мобильных устройств
    9. Рекомендации: правила работы с видео
    10. Рекомендации: руководство по созданию SWF-приложений
    11. Рекомендации: формирование структуры FLA-файлов
    12. Рекомендации: оптимизация FLA-файлов для Animate
    13. Параметры публикации ActionScript
    14. Задание параметров публикации для Animate
    15. Экспорт файлов-проекторов
    16. Экспорт изображений и анимированных файлов GIF
    17. Шаблоны публикации HTML
    18. Работа с Adobe Premiere Pro и After Effects
    19. Быстрая публикация анимаций
  9. Устранение неполадок
    1. Исправленные неполадки
    2. Известные проблемы

 

В Animate поддерживаются типы документов VR 360 и VR Panorama для быстрого создания привлекательного контента.Кроме того, новый тип документа VR можно использовать для импорта 3D-моделей (файлы .glb) в проект Animate и создания анимаций в 3D-контенте. 

Для предварительного просмотра контента, созданного в типах документа VR, можно использовать новую панель «Просмотр VR». Можно щелкать и перемещать экземпляры MovieClip на панели «Просмотр VR». Animate автоматически обнаруживает объекты, когда вы их щелкаете и перемещаете. Режим «VR-представление» позволяет разместить объекты в 3D-пространстве. Изменения расположения объектов (в видеоролике) на панели «VR-представление» автоматически отражаются в двухмерной рабочей области. На панели «Временная шкала» можно пометить слои как текстовые, чтобы они оборачивались вокруг цилиндра или сферы для соответствующих типов документов.

Animate также позволяет управлять анимациями виртуальной реальности во время выполнения с помощью большого выбора API-интерфейсов. Например, когда пользователь нажимает кнопку, в среду виртуальной реальности можно добавить несколько объектов. 

 «Виртуальная реальность (360)» и «Виртуальная реальность (панорама)» в Animate выпускаются в октябре 2018 года в рамках бета-тестирования.

Типы документов VR

Имеется два типа документов для виртуальной реальности (VR). 

VR Panorama

  • Используйте этот тип документа для создания панорамного контента для приложений виртуальной реальности. 
  • В этом типе документа содержимое, которое отрисовывается прямо на слоях текстуры, оборачивается вокруг цилиндра.
  • На слое текстуры можно использовать панорамное изображение или нарисовать фон. 
  • Animate преобразует создаваемые 2D-анимации в сферический панорамный контент с интерактивными возможностями. 

Рабочая область

  • Используйте этот тип документа для создания сферического контента для приложений виртуальной реальности.  
  • В этом типе документа содержимое, которое отрисовывается прямо на слоях текстуры, оборачивается вокруг сферы.
  • Можно использовать эквидистантное изображение или нарисовать контент. 
  • Animate преобразует создаваемые 2D-анимации в сферический панорамный контент с интерактивными возможностями.
VR 360 и VR Panorama на экране запуска
VR 360 и VR Panorama на экране запуска

Разработка и публикация VR-контента

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

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

    Если изображение большого размера, можно изменить размер представления рабочей области.

    • Чтобы задать размер, выберите Модификация > Документ
    •  Щелкните По размеру содержимого

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

  2. Чтобы создать слой текстуры, щелкните значок Создать обтекание текстур для всех слоев на панели «Временная шкала», как показано на снимке экрана.

    Создание обтекания текстур для слоев
    Создание обтекания текстур для слоев

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

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

    Рабочая область VR 360
    Рабочая область VR 360

    На снимке экрана выше показано представление рабочей области Animate с эквидистантным изображением в документе типа VR 360: птица с траекторией движения и классическая анимация на временной шкале. 

  4. Просмотрите контент, выбрав Окно > Просмотр VR.

    Использование VR-представления для просмотра VR-контента
    Использование VR-представления для просмотра VR-контента

    Нажмите кнопку VR-представление на панели «VR-представление». 

    Панель VR-представления
    Панель VR-представления

    В режиме предварительного просмотра «Просмотр VR» нажмите кнопку Сброс, чтобы вернуть первоначальное состояние контента. Просмотр VR не отражает автоматически изменений на рабочей области в среде создания. Для просмотра изменений, примененных к ресурсам в среде рабочей области, нажмите кнопку Обновить. 

    Кнопки «Обновить» и «Сбросить» в окне «VR-представление»
    Кнопки «Обновить» и «Сбросить» в окне «VR-представление»

    В режиме «Просмотр» можно перемещать экземпляры MovieClip. Animate автоматически обнаруживает объекты при наведении мыши. Форма курсора меняется на крестовидный значок при наведении мыши на объекты, как показано на снимке экрана. Можно перемещать объекты по цилиндру или сфере в зависимости от типа документа.

    Для перемещения в окне «Просмотр VR» щелкните и перетащите экран предварительного просмотра. 

    Крестообразный значок для перемещения объектов
    Крестообразный значок для перемещения объектов

  5. Выберите Файл > Опубликовать или нажмите клавиши Ctrl + Enter, чтобы опубликовать контент. При публикации изображение оборачивается вокруг цилиндрической или сферической сетки в Animate. Можно добавить больше слоев и анимированного контента на эти слои.

    В приведенном ниже GIF-файле показан образец опубликованного вывода VR 360. 

    Пример вывода VR 360
    Пример вывода VR 360

    Пример вывода VR (panorama)
    Пример вывода VR (panorama)

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

    Параметры публикации
    Параметры публикации для библиотек

Новый взгляд на анимацию через виртуальную реальность

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

  1. На вкладке Главная нажмите Дополнительно.

  2. Выберите VR Panorama и Создать.

Создание панорамного контента с помощью Animate

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

Видеоруководство по экспорту WebGL-glTF (стандартный и расширенный)

Видео с демонстрацией использования экспорта WebGL-glTF (стандартный и расширенный)

Использование 3D-контента

 Кроме того, тип документа VR можно использовать для импорта 3D-моделей (файлы .glb) в проект Animate и создания 3D-контента.

  1. Создайте документ типа VR (360) или VR (panorama).

  2. Выберите «Файл» > «Импортировать» и найдите GLB-файл для импорта в рабочую область или библиотеку.

    Импорт 3D-контента в рабочую область
    импорт 3D-контента в рабочую область

  3. Добавляйте анимацию и интерактивные функции, как объекты фрагмента ролика, и публикуйте вывод.

    Также можно выполнить предварительный просмотр 3D-модели в окне «Просмотр VR». 

Использование виртуальной реальности во время выполнения

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

Список API среды выполнения виртуальной реальности: 

Пакет: anWebgl

Свойства

Имя

Тип/класс

Доступ

Описание

Пример

Рабочая область

Рабочая область

RW

Получить/задать свойства рабочей области

anWebgl.stage

virtualCamera

VirtualCamera

RW

Доступ к камере по умолчанию

anWebgl.virtualCamera

Корень

MovieClip

RO

Самый верхний отображаемый объект (временная шкала текущей сцены).

anWebgl.root

Методы

Имя

Прототип

Описание

Пример

addGLBFile

addGLBFile(filePath: string, successCallback : function, errorCallback : function):void

Загрузка 3D-модели из заданного файла GLB

anWebgl.addGLBFile("model.glb" , successCallbackFunction, errorCallbackFunction).

playAll

playAll() : void

Воспроизведение анимации для всех фрагментов ролика, включая корневой

anWebgl.playAll();

stopAll

stopAll() : void

Остановка анимации для всех фрагментов ролика, включая корневой

anWebgl.stopAll();

Класс: MovieClip

Наследует: DisplayObjectContainer

Свойства

Методы

Имя

Прототип

Описание

Пример

Play

play(): void

Воспроизведение анимации для фрагмента ролика.

anWebgl.root.getChildByName("name").play();
(или)

this.play(); 

Stop

stop(): void

Останавливает анимацию для фрагмента ролика

anWebgl.root.getChildByName("name").stop();

 

playAll

playAll() : void

Воспроизведение анимации для всех фрагментов ролика, включая корневой.

anWebgl.root.getChildAt(0).playAll();

 

stopAll

stopAll():void

Остановка анимации для всех фрагментов ролика, включая корневой.

anWebgl.root.getChildAt(0)).stopAll();

 

Класс: DisplayObject

Наследует: IEventDispatcher

Имя

Прототип

Описание

Пример

hitTestPoint

hitTestPoint(x, y, Boolean).

Возвращает displayObject/displayObjectContainer/movieClip на основе типа объекта нажатия.

X и Y — точки координат на экране.

anWebgl.root.hitTestPoint(300, 200, true, false);

Имя

Тип/класс

Доступ

Описание

Пример

X

Number

RW

Перемещение по оси X

var name =anWebgl.root.getChildByName("name");
name.x+=10;

 

Y

Number

RW

Перемещение по оси Y

var name = anWebgl.root.getChildByName("name");
name.y+=10;

 

Z

Number

RW

Перемещение по оси Z

var name = anWebgl.root.getChildByName("name");
name.z+=10;

 

scaleX

Number

RW

Масштабирование по оси X

var root = anWebgl.root;
var child = root.getChildAt(0);
child.scaleX=2;

 

scaleY

Number

RW

Масштабирование по оси Y

var root = anWebgl.root;
var child = root.getChildAt(0);
child.scaleY=10;

 

scaleZ

Number

RW

Масштабирование по оси Z

var root = anWebgl.root;
var child = root.getChildAt(0);
child.scaleZ=10;

 

rotationX

Number

RW

Поворот по оси X

anWebgl.root.getChildByName("name").rotationX+=30;

(или)

anWebgl.root.movieClip_name.rotationX+=30;

rotationY

Number

RW

Поворот по оси Y

anWebgl.root.getChildByName("name").rotationY+=30;

 

rotationZ

Number

RW

Поворот по оси Z

anWebgl.root.getChildByName("name").rotationZ+=30;

 

Parent

DisplayObjectContainer

RO

Родительский контейнер

var root = anWebgl.root;
var child = root.getChildAt(0);
console.log(child.parent)

 

Visible

Boolean

RW

Видимость объекта

var root = anWebgl.root;
var child = root.getChildAt(0);
console.log(child.visible);

Класс: DisplayObjectContainer

Наследует: DisplayObject

Имя

Прототип

Описание

Пример

numChildren

numChildren:num

Возвращает число дочерних объектов для объекта.

anWebgl.root.movieClipInstanceName.numChildren;

removeChild

removeChild(obj:DisplayObject):void

Удаляет объект аргумента, если он есть.

anWebgl.root.movieClipInstanceName.removeChild(childObj);

Contains

contains(obj:DisplayObject):boolean

Возвращает значение True, если объект аргумента является дочерним, в противном случае возвращает False.

anWebgl.root.movieClipInstanceName.contains(childObj);

getChildAt

getChildAt(index:Number): DisplayObject

Возвращает дочерний объект в индексе аргументов.

anWebgl.root.movieClipInstanceName.getChildAt(2);

getChildByName

getChildByName(name:String): DisplayObject

Возвращает дочерний объект с именем аргумента, если он существует.

anWebgl.root.movieClipInstanceName.getChildByName(childName);

Класс: Stage

Свойства

Имя

Доступ

Описание

Пример

stageWidth

RO

Ширина рабочей области

anWebgl.stage.stageWidth

stageHeight

RO

Высота рабочей области

anWebgl.stage.stageHeight

Color

RW

Цвет фона рабочей области

anWebgl.stage.color

Класс: VirtualCamera

Методы

Имя

Прототип

Описание

Пример

getCamera

getCamera()

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

let cam = anWebgl.virtualCamera.getCamera();
let pos = cam.getPosition();
console.log("camera position x: " +pos.x + " y: "+ pos.y+" z: "+pos.z);

 

getPosition

getPosition()

Возвращает объект со свойствами x, y и z, которые определяют текущее положение камеры.

let cam = anWebgl.virtualCamera.getCamera();
let pos = cam.getPosition();
console.log("camera position x: " +pos.x + " y: "+ pos.y+" z: "+pos.z);

 

setPosition

setPosition()

Камера перемещается в абсолютное положение, заданное входными параметрами. Значение по умолчанию = 0.

let cameraPos = {x: 10, y:10, z:10};
anWebgl.virtualCamera.getCamera().setPosition(cameraPos);

 

moveBy

moveBy()

Камера перемещается относительно текущего положения.

let moveByPos = {x: 10, y:10, z:10};
anWebgl.virtualCamera.getCamera().moveBy(moveByPos);

 

resetPosition

resetPosition()

Положение камеры сбрасывается до исходной позиции, т. е. (0,0,0).


anWebgl.virtualCamera.getCamera().resetPosition();

 

SetRotation

SetRotation()

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

let __rotation__ = {x: 10, y:10, z:10};
anWebgl.virtualCamera.getCamera().setRotation(__rotation__);

 

resetRotation

resetRotation()

Угол камеры сбрасывается до нуля.

anWebgl.virtualCamera.getCamera().resetRotation();

 

Похожие темы

 Adobe

Получайте помощь быстрее и проще

Новый пользователь?

Ссылки быстрого перехода

Просмотреть все свои планы Управление планами
Просмотреть ссылки быстрого доступа
Скрыть ссылки быстрого доступа
Adobe MAX 2024

Adobe MAX
— творческая конференция

С 14 по 16 октября очно в Майами-Бич и онлайн

Зарегистрироваться

Adobe MAX

Творческая конференция

С 14 по 16 октября очно в Майами-Бич и онлайн

Зарегистрироваться
Adobe MAX 2024

Adobe MAX
— творческая конференция

С 14 по 16 октября очно в Майами-Бич и онлайн

Зарегистрироваться

Adobe MAX

Творческая конференция

С 14 по 16 октября очно в Майами-Бич и онлайн

Зарегистрироваться

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