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

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

 

В 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();

 

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

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