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

A câmera no Animate CC 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 CC - 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.

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.

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

    Observação:

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

    Observação:

    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 CC, 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.

    camera-layer
    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

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.

Observação:

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(): Object

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:

camera-mask

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. 

using-runtime-updated-1

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
Vídeo de demonstração do uso da câmera no tempo de execução

Cortar o objeto no palco

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.

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