O Animate apresenta tipos de documento VR 360 e Panorama VR para ajudá-lo a criar conteúdo interativo com facilidade. Além disso, você pode usar o tipo de documento de realidade virtual para importar conteúdo de modelos 3D (como arquivos .glb) para seu projeto do Animate e criar conteúdo 3D. 

Para visualizar o conteúdo criado em tipos de documento VR, você pode usar o painel de Exibição VR recém-inserido. É possível clicar e mover instâncias de MovieClip no painel Exibição em VR. O Animate detecta os objetos automaticamente quando você clica neles e os move pelo painel.A Exibição de VR permite colocar objetos no espaço 3D. As alterações feitas no posicionamento dos objetos (clipe de filme) na Exibição de VR são refletidas novamente no palco 2D de modo automático. Também é possível marcar camadas como camadas de textura no painel Linha de tempo, para ser colocado em um cilindro ou em uma esfera para os dois tipos de documento.

Além disso, o Animate permite que você gerencie animações de realidade virtual no tempo de execução com a ajuda de um grande conjunto de APIs. Por exemplo, você pode introduzir objetos no ambiente de realidade virtual de graus quando um usuário clicar em um botão. 

Observação:

Realidade virtual (360) e Realidade virtual (Panorama) no Animate são versões Beta da versão de outubro de 2018. 

Tipos de documento de realidade virtual

Há dois tipos de documento para Realidade virtual (VR):

VR Panorama

panorama outside vacation wooden village home in sunny evening day . Full 360 degree seamless panorama in equirectangular spherical projection
  • Use este tipo de documento para criar conteúdo de panorama para aplicativos de Realidade virtual. 
  • Nesse tipo de documento, o conteúdo desenhado diretamente em camadas de textura é aplicado em torno de um cilindro.
  • Escolha entre ter uma imagem panorâmica em uma camada de textura ou desenhar um plano de fundo. 
  • O Animate converte animações 2D que você criou em conteúdo de panorama com interatividade. 

VR 360

panorama outside vacation wooden village home in sunny evening day . Full 360 degree seamless panorama in equirectangular spherical projection
  • Use este tipo de documento para criar conteúdo de 360 graus para aplicativos de Realidade virtual.  
  • Nesse tipo de documento, o conteúdo desenhado diretamente em camadas de textura é aplicado em torno de uma esfera.
  • Escolha entre ter uma imagem de equirretangular ou desenhar o conteúdo. 
  • O Animate converte animações 2D que você criou em conteúdo de 360 graus com interatividade.

Realidade virtual 360 e panorâmica na tela de inicialização
Realidade virtual 360 e panorâmica na tela de inicialização

Criação e publicação de conteúdo de realidade virtual

Use as seguintes etapas para criar o conteúdo da realidade virtual em Animate:

  1. Importe uma imagem panorâmica ou 360 graus no palco para o plano de fundo.

    Se o tamanho da imagem for grande, é possível ajustar o tamanho da exibição do palco.

    • Para definir o tamanho, selecione Modificar > Documento
    •  Clique em Corresponder conteúdos

    Selecione o ícone Palco central central no canto superior direito da janela para ajustar a imagem no centro da tela. 

  2. Para criar uma camada como uma camada de textura, clique no ícone Criar envolvimento de textura para todas as camadas no painel de Linha de tempo, de acordo com a captura de tela abaixo:

    Criar envolvimento de textura para camadas
    Criar envolvimento de textura para camadas

    A camada de textura é aplicada ao redor do cilindro ou da esfera, dependendo do tipo de documento escolhido.

  3. Adicione objetos ao palco, adicione interpolação clássica ou de movimento aos objetos dependendo dos ativos e crie sua animação. 

    Palco de VR 360
    Palco de VR 360

    A captura de tela mostrada acima demonstra a etapa de exibição do Animate com a imagem equirectangular no tipo de documento VR 360, um pássaro com um caminho de movimento guiado e interpolação clássica na linha de tempo. 

  4. Visualize o conteúdo usando Janelas > Exibição de VR.

    Uso da exibição de VR para visualizar conteúdo de VR
    Uso da exibição de VR para visualizar conteúdo de VR

    Clique no botão Inicializar exibição de VR no painel Exibição de VR.

    Painel de exibição VR
    Painel de exibição VR

    No modo Exibição de VR, para restaurar o conteúdo para seu estado inicial, use o botão Redefinir. A Exibição de VR não reflete automaticamente nenhuma alteração no estágio de criação. Para ver as alterações aplicadas aos ativos no ambiente do palco, clique em Atualizar

    Opções Atualizar e Redefinir da exibição de VR
    Opções Atualizar e Redefinir da exibição de VR

    É possível mover instâncias de MovieClip no modo de visualização. O Animate deteca os objetos automaticamente quando você passa o mouse sobre eles. O formato do cursor é alterado para um ícone de barra cruzada ao passar o mouse sobre objetos, conforme ilustrado na captura de tela abaixo. Você pode mover objetos ao longo de um caminho de esfera ou cilindro, dependendo do tipo de documento selecionado.

    Para deslocar pela janela Exibição VR, clique na tela de visualização e arraste. 

    Ícone de barra cruzada para mover objetos
    Ícone de barra cruzada para mover objetos
  5. Use Arquivo > Publicar ou Ctrl + Enter para publicar o conteúdo. Ao publicar, a imagem envolve uma malha cilíndrica ou em esfera no Animate. Você pode adicionar mais camadas e conteúdo animado a essas camadas.

    A Ralidade virtual 360 de amostra publicada aparece como mostrado no GIF animado abaixo. 

    Amostra de saída VR 360
    Amostra de saída VR 360
    Amostra de saída de VR panorama
    Amostra de saída de VR panorama

    Ao publicar o conteúdo de realidade virtual, você pode optar por usar as bibliotecas JavaScript hospedadas como o tempo de execução. Por padrão, o Animate usa o tempo de execução para o conteúdo publicado das bibliotecas hospedadas. É possível desmarcar essa opção nas Configurações de publicação se você quiser compactar o tempo de execução com a saída publicada. 

    Configurações de publicação
    Configurações de publicação para bibliotecas

Uso de conteúdo 3D

Você pode usar o tipo de documento de realidade virtual para importar modelos 3D (arquivos .glb) para seu projeto do Animate e criar conteúdo 3D.

  1. Crie um documento de tipo de visualização VR (360) ou VR (panorama).

  2. Escolha Arquivo > Importar e navegue até o arquivo .glb a ser importado no palco ou na biblioteca.

    Importação de conteúdo 3D para o palco
    Importar conteúdo 3D para o palco
  3. Adicione animações e interatividade semelhantes aos objeto de clipe de filme e publique-os.

    Além disso, é possível visualizar o modelo 3D na Exibição VR.

Uso de realidade virtual no tempo de execução

Além disso, o Animate permite que você gerencie animações de realidade virtual no tempo de execução com a ajuda de APIs. Por exemplo, você pode introduzir objetos em um ambiente de realidade virtual de 360 graus quando um usuário clicar em um botão. 

A lista de APIs de realidade virtual no tempo de execução encontra-se a seguir:

Pacote : anWebgl

Propriedades

Nome

Tipo / Classe

Acesso

Descrição

Exemplo

Palco

Palco

RW

Obter/definir propriedades do palco

anWebgl.stage

virtualCamera

VirtualCamera

RW

Acessar câmera padrão

anWebgl.virtualCamera

Raiz

MovieClip

RO

Objeto de exibição na extremidade superior (linha de tempo atual da cena).

anWebgl.root

Métodos

Nome

Protótipo

Descrição

Exemplo

addGLBFile

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

Carregar o modelo 3D a partir de um arquivo GLB especificado

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

playAll

playAll() : void

Reproduzir a animação de todos os clipes de filme incluindo a raiz

anWebgl.playAll();

stopAll

stopAll() : void

Interromper a animação de todos os clipes de filme incluindo a raiz

anWebgl.stopAll();

Classe: MovieClip

Herda: DisplayObjectContainer

Propriedades

Métodos

Nome

Protótipo

Descrição

Exemplo

Reproduzir

play(): void

Reproduz a animação do clipe de filme.

anWebgl.root.getChildByName("name").play();
(ou)

this.play(); 

Parar

stop(): void

Interrompe a animação do clipe de filme

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

 

playAll

playAll() : void

Reproduz a animação de todos os clipes de filme incluindo a raiz.

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

 

stopAll

stopAll():void

Interrompe a animação de todos os clipes de filme incluindo a raiz.

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

 

Classe: DisplayObject

Herda: IEventDispatcher

Nome

Protótipo

Descrição

Exemplo

hitTestPoint

hitTestPoint(x, y, Boolean).

retorna displayObject/displayObjectContainer/movieClip com base no tipo do objeto de ocorrência.

x e y são coordenadas do ponto na tela.

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

Nome

Tipo / Classe

Acesso

Descrição

Exemplo

X

Número

RW

Tradução no eixo X

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

 

S

Número

RW

Tradução no eixo Y

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

 

Z

Número

RW

Tradução no eixo Z

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

 

scaleX

Número

RW

Dimensionar ao longo do eixo X

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

 

scaleY

Número

RW

Dimensionar ao longo do eixo Y

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

 

scaleZ

Número

RW

Dimensionar ao longo do eixo Z

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

 

rotationX

Número

RW

Girar ao longo do eixo X

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

(ou)

anWebgl.root.movieClip_name.rotationX+=30;

rotationY

Número

RW

Girar ao longo do eixo Y

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

 

rotationZ

Número

RW

Girar ao longo do eixo Z

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

 

Pai

DisplayObjectContainer

RO

Contêiner principal

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

 

Visível

Booliano

RW

Visibilidade do objeto

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

Classe: DisplayObjectContainer

Herda: DisplayObject

Nome

Protótipo

Descrição

Exemplo

numChildren

numChildren:num

retorna o número de filhos de um objeto

anWebgl.root.movieClipInstanceName.numChildren;

removeChild

removeChild(obj:DisplayObject):void

remove o objeto de argumento, se presente

anWebgl.root.movieClipInstanceName.removeChild(childObj);

Contém

contains(obj:DisplayObject):boolean

retorna true se o objeto de argumento for um filho, caso contrário retorna falso

anWebgl.root.movieClipInstanceName.contains(childObj);

getChildAt

getChildAt(index:Number): DisplayObject

retorna o filho no índice de argumentos

anWebgl.root.movieClipInstanceName.getChildAt(2);

getChildByName

getChildByName(name:String): DisplayObject

retorna o filho com um nome de argumento, se existente

anWebgl.root.movieClipInstanceName.getChildByName(childName);

Classe: Stage

Propriedades

Nome

Acesso

Descrição

Exemplo

stageWidth

RO

Largura do palco

anWebgl.stage.stageWidth

stageHeight

RO

Altura do palco

anWebgl.stage.stageHeight

Cor

RW

Cor do plano de fundo do palco

anWebgl.stage.color

Classe: VirtualCamera

Métodos

Nome

Protótipo

Descrição

Exemplo

getCamera

getCamera()

Obter o objeto da câmera. Para obter ou definir as propriedades da câmera no tempo de execução.

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

 

getPosition

getPosition()

Retorna o objeto com as propriedades x, y e z que especificam o local atual da câmera.

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

 

setPosition

setPosition()

Mover a câmera para a posição absoluta fornecida pelos parâmetros de entrada. Valor padrão = 0.

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

 

moveBy

moveBy()

Mover a câmera para a posição atual relativa.

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

 

resetPosition

resetPosition()

Redefinir a posição da câmera para a posição original, isto é, (0,0,0).


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

 

SetRotation

SetRotation()

Girar a câmera pelo ângulo absoluto especificado por parâmetros de entrada.

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

 

resetRotation

resetRotation()

Redefinir ângulo da câmera como zero.

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

 

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online