Guia do Usuário Cancelar

Criação e publicação de Realidade virtual

Pesquisar
Animate

Animate

Abrir aplicativo
  1. Guia do Usuário do Adobe Animate
  2. Introdução ao Animate
    1. Novidades no Animate
    2. Glossário visual
    3. Requisitos de sistema do Animate
    4. Atalhos de teclado do Animate
    5. Trabalhar com vários tipos de arquivo no Animate
  3. Animação
    1. Noções básicas de animação no Animate
    2. Como usar quadros e quadros-chave no Animate
    3. Animação quadro a quadro no Animate
    4. Como trabalhar com animação de interpolação clássica no Animate
    5. Ferramenta Pincel
    6. Guia de movimento
    7. Interpolação de movimento e ActionScript 3.0
    8. Sobre a animação com interpolação de movimento
    9. Animações de interpolação de movimento
    10. Criação de uma animação de interpolação de movimento
    11. Utilização dos quadros-chave de propriedade
    12. Animação de posição com uma interpolação
    13. Editar interpolações de movimento usando o Motion Editor
    14. Edição do caminho de movimento de uma animação de interpolação
    15. Manipulação de interpolações de movimento
    16. Adição de atenuações personalizadas
    17. Criação e aplicação das predefinições de movimento
    18. Configuração de extensões de interpolação de animação
    19. Trabalhar com interpolações de movimento salvas como arquivos XML
    20. Interpolações de movimento e interpolações clássicas
    21. Interpolação de formas
    22. Uso da animação da ferramenta Bone no Animate
    23. Trabalho com articulações de personagens no Animate
    24. Como usar camadas de máscara no Adobe Animate
    25. Como trabalhar com cenas no Animate
  4. Interatividade
    1. Como criar botões com o Animate
    2. Converter projetos do Animate em outros formatos de tipo de documento
    3. Criação e publicação de documentos HTML5 Canvas no Animate
    4. Adicionar interatividade com snippets de código no Animate
    5. Criar componentes HTML5 personalizados
    6. Uso de componentes do HTML5 Canvas
    7. Criação de componentes personalizados: exemplos
    8. Snippets de código para componentes personalizados
    9. Práticas recomendadas - Publicidade com o Animate
    10. Criação e publicação de Realidade virtual
  5. Fluxo de trabalho e espaço de trabalho
    1. Criação e gerenciamento de pincéis
    2. Uso de Google Fonts em documentos HTML5 Canvas
    3. Uso das Bibliotecas da Creative Cloud e do Adobe Animate
    4. Uso dos painéis Palco e Ferramentas do Animate
    5. Fluxo e espaço de trabalho do Animate
    6. Uso de fontes da Web em documentos HTML5 Canvas
    7. Linhas de tempo e ActionScript
    8. Trabalhar com múltiplas linhas de tempo
    9. Definir preferências
    10. Uso de painéis de criação do Animate
    11. Criar camadas na linha do tempo com o Animate
    12. Exportar animações para aplicativos móveis e mecanismos de jogo
    13. Mover e copiar objetos
    14. Modelos
    15. Localização e substituição no Animate
    16. Desfazer, refazer e o painel de Histórico
    17. Atalhos de teclado
    18. Como usar a linha do tempo no Animate
    19. Criação de extensões HTML
    20. Opções de otimização para imagens e GIFs animados
    21. Configurações de exportação para imagens e GIFs
    22. Painel Ativos no Animate
  6. Multimídia e vídeo
    1. Transformação e combinação de objetos gráficos no Animate
    2. Criar e trabalhar com instâncias do símbolo no Animate
    3. Traçado de imagem
    4. Como usar som no Adobe Animate
    5. Exportação de arquivos SVG
    6. Criação de arquivos de vídeo para uso no Animate
    7. Como adicionar vídeos no Animate
    8. Desenhar e criar objetos com o Animate
    9. Remodelação de linhas e formas
    10. Traçados, preenchimentos e gradientes com o Animate CC
    11. Trabalhar com o Adobe Premiere Pro e o After Effects
    12. Painéis de cor no Animate CC
    13. Abrir arquivos do Flash CS6 com o Animate
    14. Trabalho com texto clássico no Animate
    15. Aplicação de ilustração final no Animate
    16. Bitmaps importados no Animate
    17. Gráficos em 3D
    18. Trabalhar com símbolos no Animate
    19. Desenhar linhas e formas com o Adobe Animate
    20. Trabalho com bibliotecas no Animate
    21. Exportação de sons
    22. Seleção de objetos no Animate CC
    23. Trabalho com arquivos AI do Illustrator no Animate
    24. Aplicação de modos de mesclagem
    25. Organização de objetos
    26. Automação de tarefas com o menu Comandos
    27. Texto multilíngue
    28. Uso de câmera no Animate
    29. Filtros gráficos
    30. Som e ActionScript
    31. Preferências de desenho
    32. Desenho com a ferramenta Caneta
  7. Plataformas
    1. Converter projetos do Animate em outros formatos de tipo de documento
    2. Compatibilidade com plataforma personalizada
    3. Criação e publicação de documentos HTML5 Canvas no Animate
    4. Criação e publicação de um documento WebGL
    5. Compactação de aplicativos no AIR para iOS
    6. Publicação de AIR em aplicativos Android
    7. Publicação no Adobe AIR para desktop
    8. Configurações de publicação do ActionScript
    9. Práticas recomendadas - Organização do ActionScript em um aplicativo
    10. Como usar ActionScript com o Animate
    11. Acessibilidade no espaço de trabalho do Animate
    12. Programação e gerenciamento de scripts
    13. Ativação do suporte para plataformas personalizadas
    14. Visão geral do suporte da plataforma personalizada
    15. Trabalhar com plug-ins personalizados de suporte da plataforma
    16. Depuração do ActionScript 3.0
    17. Ativação do suporte para plataformas personalizadas
  8. Publicação e exportação
    1. Exportação de arquivos do Animate CC
    2. Publicação OAM
    3. Exportação de arquivos SVG
    4. Exportar gráficos e vídeos com o Animate
    5. Publicação de documentos AS3
    6. Exportar animações para aplicativos móveis e mecanismos de jogo
    7. Exportação de sons
    8. Práticas recomendadas - Dicas para a criação de conteúdo em dispositivos móveis
    9. Práticas recomendadas - Convenções de vídeo
    10. Práticas recomendadas - Diretrizes de criação de aplicativos SWF
    11. Práticas recomendadas - Estruturação de arquivos FLA
    12. Práticas recomendadas para otimizar arquivos FLA para o Animate
    13. Configurações de publicação do ActionScript
    14. Especificar configurações de publicação para o Animate
    15. Exportação de arquivos projetores
    16. Exportar imagens e GIFs animados
    17. Modelos de publicação HTML
    18. Trabalhar com o Adobe Premiere Pro e o After Effects
    19. Compartilhar e publicar animações rapidamente
  9. Solução de problemas
    1. Problemas corrigidos
    2. Problemas conhecidos

 

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. 

 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

  • 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. 

Palco de VR 360

  • 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 equirretangular 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 detecta 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

Modernizar animações com realidade virtual

A realidade virtual é uma tendência predominante no mercado. Que tal trazer a realidade virtual ao seu conteúdo? Assista ao tutorial no fim deste exemplo e siga estas etapas.

  1. Na guia Página inicial, clique em Avançado.

  2. Selecione VR panorâmica e clique em Criar.

Como criar conteúdo panorâmico com o Animate

Assista ao vídeo para saber como adicionar mais efeitos na exibição panorâmica para impulsionar uma experiência virtual.

Um tutorial em vídeo sobre a exportação de WebGL-glTF (Standard e Extended)

Vídeo de demonstração de como usar a exportação de WebGL-glTF (Standard e Extended)

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 / Nome da 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 / Nome da 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();

 

Mais itens similares

 Adobe

Receba ajuda com mais rapidez e facilidade

Novo usuário?

Links rápidos

Ver todos os seus planos Gerenciar seus planos
Ver links rápidos
Ocultar links rápidos
Adobe MAX 2024

Adobe MAX:
a conferência da criatividade

14 a 16 de outubro, Miami Beach e online

Inscreva-se agora

Adobe MAX

A conferência da criatividade

14 a 16 de outubro, Miami Beach e online

Inscreva-se agora
Adobe MAX 2024

Adobe MAX:
a conferência da criatividade

14 a 16 de outubro, Miami Beach e online

Inscreva-se agora

Adobe MAX

A conferência da criatividade

14 a 16 de outubro, Miami Beach e online

Inscreva-se agora

Avisos legais | Política de privacidade online