Guia do Usuário Cancelar

Uso de câmera no Animate

  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

 

Use este artigo para saber mais sobre como trabalhar com a câmera no Animate.

A câmera no Animate permite que os animadores simulem uma câmera real. Anteriormente, os animadores contavam com extensões de terceiros com qualidade e compatibilidade variáveis ou modificavam suas animações para imitar o movimento de uma câmera. Os animadores podem usar os recursos a seguir, que fazem parte de qualquer animação.

  • Panorâmica com o assunto do quadro
  • Ampliar o objeto de interesse para um efeito dramático
  • Diminuir um quadro para lembrar o visualizador sobre uma imagem maior
  • Modificar o ponto focal para deslocar a atenção do espectador de um objeto para outro
  • Girar a câmera
  • Usar o matiz de cor ou filtros para aplicar efeitos de cor em uma cena 

Quando você ajusta a exibição da câmera para sua composição, você olha as camadas como se estivesse olhando através dessa câmera. Você também pode adicionar interpolações ou quadros-chave em uma camada de câmera.

A ferramenta Câmera está disponível para todos os tipos de documento incorporados no Animate - HTML Canvas, WebGL e Actionscript.

Ativar ou desativar a câmera

Use qualquer uma das opções a seguir para ativar a ferramenta Câmera:

  • Clique na ferramenta Câmera no painel Ferramentas.
  • Clique no botão Adicionar/Remover câmera na linha do tempo.

Quando a câmera estiver ativada, o limite do palco é exibido na mesma cor da camada da câmera.

Área de trabalho da câmera

A. Contorno do palco B. Ícone de câmera C. Propriedades da câmera D. Efeitos de cor da câmera E. Ferramenta Câmera F. Ícone de câmera G. Camada de câmera 

O palco agora se comporta como uma câmera para o documento. Uma nova camada da câmera com o objeto da câmera é adicionada ao painel Linha do tempo. Quando você seleciona a ferramenta câmera, o ícone de câmera é ativado no Inspetor de propriedades.

Quando a câmera está ativada:

  • O documento atual é colocado no modo câmera.
  • O palco é transformado em uma câmera.
  • A borda da câmera é visível no limite do palco.
  • A camada de câmera é selecionada.  

Zoom, rotação ou deslocamento da câmera

Aplicar zoom à câmera

  1. Use os controles de zoom na tela para aplicar zoom ao objeto ou ajuste os valores de Zoom no painel Propriedades da câmera.

    Aplicar zoom e girar
    Aplicar zoom e girar

  2. Para aplicar zoom na cena, altere os valores de zoom ou selecione a barra deslizante na parte inferior do palco.

  3. Para aplicar mais zoom ao conteúdo, mova o controle deslizante para o lado + e para aplicar menos zoom, movimente o controle deslizante para o lado -.

  4. Para ativar níveis infinitos de valores de zoom, solte o controle deslizante de modo a retorná-lo à posição central. 

Girar a câmera

  1. Use os controles de zoom na tela para girar o objeto ou defina os valores de rotação no painel de propriedades da câmera.

  2. Para especificar o efeito de rotação em cada camada, modifique os valores de rotação ou use o controle deslizante para manipular a rotação.

  3. Para ativar níveis infinitos de rotação em cada lado, solte o controle deslizante para retorná-lo à posição de repouso. O número no meio do controle indica os graus de rotação aplicados atualmente.

Girar a câmera

  1. Clique e arraste a caixa delimitadora da câmera para qualquer lugar na camada de câmera no palco.

  2. Para filtrar o objeto selecionado, role para cima ou para baixo ou usar a tecla Shift para deslocar horizontal ou verticalmente, sem inclinação.

  3. Quando a ferramenta de câmera está ativa, qualquer ação de arrastar é uma operação de rotação dentro dos limites da câmera.

Uso dos controles de deslocamento da câmera

É possível usar as coordenadas da câmera X e Y nas Propriedades da câmera do Inspetor de propriedades para deslocar a câmera com precisão. 
Controles de deslocamento da câmera
Controles de deslocamento da câmera

Para deslocar objetos na direção horizontal, mova o mouse para cima do valor da coordenada X e arraste o controle deslizante para a direita ou para a esquerda. 

Para deslocar objetos na direção vertical, mova o mouse pelo valor da coordenada Y e arraste o controle deslizante para a direita ou para a esquerda.

Redefinir opções dos efeitos de câmera

É possível redefinir as alterações feitas na câmera para efeitos de deslocamento, zoom, rotação e de cor sempre que se desejar voltar para as configurações iniciais. Para manter os valores de propriedade anteriores, clique no ícone de redefinição ao lado de cada uma das propriedades.

Propriedades da câmera
Propriedades da câmera

Aplicar um matiz em uma camada de câmera

  1. Selecione Câmera > Painel propriedades. Para ativar ou desativar o efeito da matiz, selecione a caixa de seleção Tonalidade

    Efeitos de cor da câmera
    Efeitos de cor da câmera

  2. Altere o valor do matiz (porcentagem) e o matiz de cor RGB para o quadro atual.

     Este recurso é suportado para os tipos de documento AS3 e WebGL.

Ajustar filtros de cor em uma camada de câmera

  1. No painel de Propriedades da câmera, marque a caixa de seleção Ajustar cor para ativar ou desativar o efeito de filtro.

  2. Altere os valores de Brilho, Contraste, Saturação e Matiz para o quadro atual. A faixa aceitável para Brilho, Contraste e Saturação é de -100 a 100% e para a Matiz, de -180 a 180°.

     Este recurso é suportado somente para o tipo de documento AS3.

Criar efeito de paralaxe com a câmera e a profundidade de camada

Como um designer ou desenvolvedor de jogos, você deseja criar uma experiência envolvente para um jogo. Usando diferentes objetos de um jogo no primeiro plano e camadas de segundo plano, você pode controlar a velocidade e a posição desses objetos. Mantendo a câmera selecionada em um ponto focal constante, você pode mover os objetos em velocidades diferentes para criar um efeito tridimensional. No Animate, ao criar suas animações em 2D, você pode obter esse efeito usando a câmera e o recurso de profundidade da camada. Você pode criar o efeito de paralaxe para os objetos, alterando as profundidades das camadas usando o painel Profundidade da camada. Para usar a profundidade de camada, clique em Janela > Profundidade da camada.

Clique aqui para obter mais informações sobre profundidade de camada. 

  1. Crie vários objetos em diferentes camadas no Animate.

  2. Adicione diferentes profundidades de camada a cada camada.

  3. Adicione uma camada de câmera ao clicar na ferramenta câmera.

    Camada da câmera na profundidade de camada
    Camada da câmera na profundidade de camada

Você pode visualizar a profundidade e a perspectiva de objetos com esse efeito.

  • Os objetos mais próximos da câmera deslocam-se de modo mais rápido do que os objetos que estão longe da câmera.
  • Quando a camada da câmera está no valor 0, os objetos mais próximos da câmera possuem um número positivo menor e os objetos distantes da câmera possuem um número maior. As camadas que estão atrás da câmera possuem números negativos. 

Vídeo que descreve o efeito de paralaxe e a profundidade z da câmera

Neste vídeo, você pode visualizar o efeito de paralaxe seguido pelo zoom da câmera.

Bloquear uma camada com a câmera

Como um animador ou designer de jogos, você deseja fazer com que alguns objetos de animação colem à exibição da câmera. Por exemplo, um botão de ação, uma exibição pronta em um jogo mostrando o medidor de tempo ou uma arma. Nesses casos, você precisa manter o ativo bloqueado com o movimento da câmera. O recurso Anexar à câmera no Animate permite atingir esse efeito.

Bloquear uma camada com a câmera
Bloquear uma camada com a câmera

Ao anexar uma camada à câmera, os objetos daquela camada são fixados à câmera e sempre se moverão junto a ela. Assim, eles parecem não ser afetados pelos movimentos da câmera na saída.

É possível anexar uma única camada à câmera clicando no ponto na coluna do ícone Anexar câmera. Se a camada estiver anexada à câmera, um ícone representativo aparece ao lado do nome daquela camada.  

As ilustrações a seguir descrevem o comportamento da camada antes e depois de anexá-la à câmera: 

Ilustração que descreve uma animação quando a camada não está anexada à câmera:

Camada sem bloqueio da câmera
Camada sem bloqueio da câmera

Ilustração que descreve uma animação quando a camada está anexada à câmera: 

Camada com bloqueio da câmera
Camada com bloqueio da câmera

Você também pode anexar ou desanexar todas as camadas da câmera clicando no ícone Anexar câmera na linha do tempo. 

Anexar todas as camadas à câmera
Ilustração que mostra todas as camadas quando estão anexadas à câmera

Usar a câmera no tempo de execução

É possível introduzir, acessar e gerenciar a câmera no tempo de execução usando as APIs de câmera para os tipos de documento AS3, WebGL e HTML Canvas. A lista de APIs de tempo de execução da câmera para os tipos de documento AS3, WebGL e HTML Canvas é a seguinte:

Tipo

Classe 

Exemplo

Descrição

AS3

VirtualCamera

import fl.VirtualCamera;

var cameraObj = VirtualCamera.getCamera(root);

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

HTML Canvas

VirtualCamera

var cameraObj = AdobeAn.VirtualCamera.getCamera(exportRoot);

Obter o objeto da câmera. Certifique-se de ativar a câmera durante a criação do conteúdo.

WebGL

VirtualCamera

var cameraObj = flwebgl.VirtualCamera.getCamera(stage.getPlayer());

Obter o objeto da câmera. Certifique-se de ativar a câmera durante a criação do conteúdo.

 Todos os métodos são aplicáveis para o tipo de documento AS3. Alguns dos métodos não estão disponíveis para os tipos WebGL e HTML Canvas. Os métodos aplicáveis/não aplicáveis para WebGL e HTML Canvas estão indicados nas últimas duas colunas da tabela abaixo.

Métodos da câmera virtual

S.No

Método

Protótipo

Exemplo

Descrição

HTML Canvas

WebGL

1

getPosition

getPosition():Objeto

trace(cameraObj.getPosition().x, cameraObj.getPosition().y,
cameraObj.getPosition().z);
Retorna o objeto com as propriedades x, y e z que especificam o local atual da câmera.

Sim

Sim

2

setPosition

setPosition(posX: Number, posY: Number, posZ: Number = 0): void

cameraObj.setPosition(100,100,100);

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

Sim

Sim

3

moveBy

moveBy(tx: Number, ty: Number, tz: Number = 0): void

cameraObj.moveBy(100,100,100);

Mova a câmera para a posição atual por tx,ty ou tz.
Observação: o 'tz' só será significativo se a profundidade de camada estiver ativada, valor padrão = 0.

Sim

Sim

4

resetPosition

resetPosition():void

cameraObj.resetPosition();

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

Sim

Sim

5

getZoom

getZoom(): Number

trace(cameraObj.getZoom());

Retorna o valor de zoom atual da câmera, o padrão é 100%.

Sim

Sim

6

setZoom

setZoom(zoom: Number): void

cameraObj.setZoom(120);

Aplicar zoom na câmera com valor absoluto especificado pelo parâmetro de entrada em porcentagem.

Sim

Sim

7

zoomBy

zoomBy(zoom: Number): void

cameraObj.zoomBy(100);

Aplicar zoom na câmera com valor de zoom atual (a unidade é a porcentagem).

Sim

Sim

8

resetZoom

resetZoom(): void

cameraObj.resetZoom();

Redefinir zoom da câmera com o valor de zoom padrão, isto é, 100%.

Sim

Sim

9

getRotation

getRotation(): Number

trace(cameraObj.getRotation());

Retorna o ângulo atual da câmera.  

Sim

Sim

10

setRotation

setRotation(angle: Number): void

cameraObj.setRotation(45);

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

Sim

Sim

11

rotateBy

rotateBy(angle: Number): void

cameraObj.rotateBy(60);

Girar a câmera para o ângulo atual especificado por parâmetros de entrada.

Sim

Sim

12

resetRotation

resetRotation():void

cameraObj.resetRotation();

Redefinir ângulo da câmera como zero.

Sim

Sim

13

setTint

setTint(tintColor: uint, tintPercent: Number): void

cameraObj.setTint(0x56FFFF, 68);

Definir tonalidade da câmera usando a tonalidade de cor(RGB) e tintpercent (porcentagem de tonalidade).

Não

Sim

14

setTintRGB

setTintRGB(red: uint, green: uint, blue: uint, tintPercent: Number): void

cameraObj.setTintRGB(0xff, 0, 0, 50);

Defina a tonalidade da câmera usando valores de cor decompostos R, G, B & tintPercent (porcentagem de tonalidade).

Não

Sim

15

getTint()

getTint(): Object

var tint=cameraObj.getTint();
trace("color:",tint.color,
"percentage:",tint.percent);

Retorna o objeto com duas propriedades: “porcentagem” e “cor”.

Não

Sim

16

getTintRGB

getTintRGB(): Object

var tint = cameraObj.getTintRGB();
trace("tint color red:", tint.red,"green:",
tint.green," blue:",tint.blue,"tint percent: ",tint.percent);

Retorna o objeto com quatro propriedades: ‘percent’ , ‘red’, ‘green’, e ‘blue’.

Não

Sim

17

resetTint

resetTint()

cameraObj.resetTint();

Remover a tonalidade da câmera.

Não

Sim

18

setColorFilter

setColorFilter(brightness: Number, contrast: Number, saturation: Number, hue: Number): void

cameraObj.setColorFilter(100,-50,
50,-100);

Definir filtro de cor da câmera usando valores decompostos de (Brightness,Contrast,saturation,hue).

Não

Não

19

resetColorFilter

resetColorFilter()

cameraObj.resetColorFilter();

Remover filtro de cor.

Não

Não

20

reset

reset()

cameraObj.reset();

Redefinir todas as propriedades da câmera como padrão.

Sim

Sim

21

setZDepth

setZDepth(zDepth: Number): void

cameraObj.setZDepth(200);

Defina o valor de profundidade Z da câmera.

Sim

Não

22

getZDepth

getZDepth(): Number

trace(cameraObj.getZDepth());

Retorna o valor atual de profundidade Z da câmera.

Sim

Não

23

pinCameraToObject

pinCameraToObject(object:DisplayObject, offsetX:Number=0,offsetY:Number=0, offsetZ=0)

cameraObj.pinCameraToObject
(getChildByName("InstanceName"), 200,50);

A câmera continua seguindo o objeto especificado como parâmetro de entrada em tempo de execução. Se offsetX, offsetY e offsetZ forem fornecidos, a câmera seguirá (x+offsetX,y+offsetY, z+offsetZ).

Sim

Sim

24

setPinOffset

setPinOffset(offsetX:Number, offsetY:Number,offsetZ:Number)

cameraObj.setPinOffset(-60,0);

Altere offsetX e offsetY para fixar a câmera com o objeto. A câmera segue o objeto em relação ao ponto (x+offsetX, y+offsetY, zDepth+z) no tempo de execução.

Sim

Sim

25

unpinCamera

unpinCamera()

cameraObj.unpinCamera();

Remove a fixação da câmera com qualquer objeto.

Sim

Sim

26

setCameraMask

setCameraMask(maskObj:DisplayObject)

cameraObj.setCameraMask(maskObj);

Definir maskObj como uma máscara sobre a câmera.

Não

Não

27

removeCameraMask

removeCameraMask()

cameraObj.removeCameraMask();

Remove a máscara da câmera.

Não

Não

Acessar a câmera como um objeto de clipe de filme

Tipo

Método

Protótipo

Exemplo

AS3

getCameraAsMovieClip

getCameraAsMovieClip(container:DisplayObject):MovieClip

var cameraObj=fl.VirtualCamera.getCameraAsMovieClip(root);

HTML Canvas

getCameraAsMovieClip

getCameraAsMovieClip(container:DisplayObject):MovieClip

var cameraObj = AdobeAn.VirtualCamera.getCamera(exportRoot);

WebGL

getCameraAsMovieClip

getCameraAsMovieClip(container:DisplayObject):MovieClip

var cameraObj=flwebgl.VirtualCamera.getCameraAsMovieClip(this);

Mascarar objetos em tempo de execução (para documento AS3)

É possível mascarar os objetos no tempo de execução usando o seguinte código da API da câmera:

import fl.VirtualCamera;
fl.VirtualCamera.getCamera(root).setCameraMask(torch);

Um instantâneo de amostra da animação, quando você usa uma máscara em forma oval, é exibido da seguinte maneira:

Criar animações de câmera interativa com o assistente de códigos para ações

Uma abordagem passo a passo para criar uma animação que usa a câmera interativa é descrita no seguinte diagrama de fluxo. Você pode usar o assistente de código de ações em documentos HTML Canvas. 

Abaixo encontra-se um vídeo de exemplo, que demonstra o uso da câmera interativa. Nele, você pode observar como é feita a variação do foco no tempo de execução, em paraquedas, jet pack e paisagem urbana, em vários intervalos.

Vídeo de demonstração do uso da câmera no tempo de execução

Vídeo de demonstração do uso da câmera no tempo de execução

Cortar o objeto no palco

O Adobe XD permite empilhar ou sobrepor o conteúdo sobre outra prancheta para simular efeitos interativos de slide. Por exemplo, listas suspensas, teclados ao deslizar para cima ou efeitos de lightbox. Com as sobreposições, você também pode reutilizar várias vezes uma prancheta sem duplicar o conteúdo de sobreposição para cada prancheta. 

Para cortar o conteúdo que flui para fora do palco, clique no botão Cortar o conteúdo fora do palco . Com a exibição de Palco e Câmera, é possível visualizar o conteúdo dentro dos limites da câmera.

Receba ajuda com mais rapidez e facilidade

Novo usuário?