Use os controles de zoom na tela para aplicar zoom ao objeto ou ajuste os valores de Zoom no painel Propriedades da câmera.
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.
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.
Use qualquer uma das opções a seguir para ativar a ferramenta Câmera:
Quando a câmera estiver ativada, o limite do palco é exibido na mesma cor da camada 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:
Use os controles de zoom na tela para aplicar zoom ao objeto ou ajuste os valores de Zoom no painel Propriedades da câmera.
Para aplicar zoom na cena, altere os valores de zoom ou selecione a barra deslizante na parte inferior do palco.
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 -.
Para ativar níveis infinitos de valores de zoom, solte o controle deslizante de modo a retorná-lo à posição central.
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.
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.
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.
Clique e arraste a caixa delimitadora da câmera para qualquer lugar na camada de câmera no palco.
Para filtrar o objeto selecionado, role para cima ou para baixo ou usar a tecla Shift para deslocar horizontal ou verticalmente, sem inclinação.
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.
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.
É 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.
Selecione Câmera > Painel propriedades. Para ativar ou desativar o efeito da matiz, selecione a caixa de seleção Tonalidade.
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.
No painel de Propriedades da câmera, marque a caixa de seleção Ajustar cor para ativar ou desativar o efeito de filtro.
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.
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.
Crie vários objetos em diferentes camadas no Animate.
Adicione diferentes profundidades de camada a cada camada.
Adicione uma camada de câmera ao clicar na ferramenta câmera.
Você pode visualizar a profundidade e a perspectiva de objetos com esse efeito.
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.
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:
Ilustração que descreve uma animação quando a camada está anexada à 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.
É 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.
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. |
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, |
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 |
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); |
É 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:
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.
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.
Fazer logon em sua conta