Guía del usuario Cancelar

Utilización de la cámara en Animate

 

Utilice este artículo para aprender a usar la cámara en Animate.

La cámara en Animate permite que los animadores simulen una cámara real. Anteriormente, los animadores confiaban en extensiones de terceros de calidad y compatibilidad diversas o modificaban sus animaciones para imitar el movimiento de una cámara. Los animadores podrán utilizar las siguientes funciones integradas en cualquier película en movimiento.

  • Panoramización con el sujeto del fotograma
  • Acercamiento del objeto de interés para un efecto dramático
  • Alejamiento de un fotograma para recordar al espectador una imagen mayor
  • Modificación del punto focal para desplazar la atención del espectador de un sujeto a otro
  • Rotación de cámara
  • Uso de matiz o filtros de color para aplicar efectos de color en una escena 

Al configurar la vista de cámara para su composición, verá las capas como si estuviera mirando a través de esa cámara. También puede añadir interpolaciones o fotogramas clave en una capa de cámara.

La herramienta de cámara está disponible para todos los tipos de documentos integrados en Animate: HTML Canvas, WebGL y ActionScript.

Activación o desactivación de la cámara

Utilice cualquiera de las siguientes opciones para activar la herramienta de cámara:

  • Haga clic en el icono de cámara del panel Herramientas.
  • Haga clic en el botón Añadir/Eliminar cámara en la línea de tiempo.

Cuando la cámara esté activada, se mostrará el límite del escenario del mismo color que la capa de la cámara.

Espacio de trabajo de la cámara

A. Contorno del escenario B. Icono de cámara C. Propiedades de cámara D. Efectos de color de la cámara E. Herramienta de cámara F. Icono de cámara G. Capa de cámara 

El escenario ahora funciona como una cámara para el documento. Se agrega una nueva capa de cámara con el objeto de cámara en el panel Línea de tiempo. Al seleccionar la herramienta de cámara, el icono de la cámara se activa en el inspector de propiedades.

Cuando la cámara está activada:

  • El documento actual se coloca en modo de cámara.
  • El escenario se convierte en una cámara.
  • El borde de la cámara es visible en los límites del escenario.
  • Se selecciona la capa de cámara.  

Zoom, giro o panorámica de la cámara

Zoom de la cámara

  1. Utilice los controles de zoom en la pantalla para aplicar zoom en el objeto o definir los valores de zoom en el panel Propiedades de la cámara.

    Zoom y giro
    Zoom y giro

  2. Para enfocar la escena, modifique los valores de zoom o seleccione el control deslizante situado en la parte inferior del escenario.

  3. Mueva el regulador hacia + para aumentar el contenido y hacia - para reducirlo.

  4. Para activar el nivel infinito de valores de zoom en ambos sentidos, libere el deslizador para ajustarlo a la posición media. 

Rotación de cámara

  1. Utilice los controles de zoom en la pantalla para rotar el objeto o definir los valores de Girar en el panel Propiedades de la cámara.

  2. Modifique los valores de giro para especificar el efecto de rotación sobre cada capa o para utilizar los controles reguladores de la rotación para manipular la rotación.

  3. Para activar los niveles infinitos de rotación en ambos sentidos, libere el deslizador para ajustarlo a la posición inicial. El número en el medio del control indica que actualmente se han aplicado los grados de rotación.

Panorámica de la cámara

  1. Haga clic y arrastre el cuadro delimitador de la cámara a cualquier punto dentro de la capa de cámara en el escenario.

  2. Desplácese hacia arriba y hacia abajo para realizar una panorámica del objeto seleccionado o utilice la tecla Mayús para realizar una panorámica horizontal o vertical sin ninguna inclinación.

  3. Cuando la herramienta de cámara está activa, cualquier acción de arrastre realizada se considera una operación de panorámica dentro del límite de la cámara.

Uso de los controles de panorámica de cámara

Puede utilizar las coordenadas X e Y en las Propiedades de la cámara del inspector de propiedades de cámara para hacer panorámicas con la cámara con precisión. 
Controles de panorámica de cámara
Controles de panorámica de cámara

Para hacer una panorámica de los objetos en dirección horizontal, pase el ratón sobre el valor de la coordenada X y arrastre el regulador hacia la derecha o hacia la izquierda. 

Para hacer una panorámica de los objetos en dirección vertical, pase el ratón sobre el valor de la coordenada Y y arrastre el regulador hacia la derecha o hacia la izquierda.

Restablecer las opciones para efectos de cámara

Puede restablecer los cambios realizados con la cámara respecto a los efectos de panorámica, zoom, rotación y color, siempre que desee regresar a la configuración original. Para conservar los valores de propiedad anteriores, haga clic en el icono de restablecimiento situado junto a cada una de las propiedades.

Propiedades de cámara
Propiedades de cámara

Aplicación del matiz en una capa de cámara

  1. Seleccione el panel Cámara > Propiedades. Para activar o desactivar el efecto del matiz, seleccione la casilla de verificación Matiz

    Efectos de color de la cámara
    Efectos de color de la cámara

  2. Modifique el valor de matiz (porcentaje) y el valor de color del matiz RGB para el fotograma actual.

     Esta función es compatible con los tipos de documento AS3 y WebGL.

Ajuste de los filtros de color en una capa de cámara

  1. En el panel Propiedades de cámara, marque la casilla Ajustar color para activar o desactivar el efecto de filtro.

  2. Modifique los valores de Brillo, Contraste, Saturación y Tono para el fotograma actual. El rango aceptable para Brillo, Contraste y Saturación es de -100 a 100 % y, para Tono, de -180 a 180 grados.

     Esta función solo está disponible para el tipo de documento AS3.

Creación de efecto de paralaje mediante la profundidad de la cámara y la capa

Como diseñador o desarrollador de juegos, trata de crear una experiencia envolvente. Mediante el uso de distintos objetos en las capas en primer plano y de fondo, se puede controlar la velocidad y posición de esos objetos. Si se mantiene la cámara enfocada en un punto focal constante, puede mover los objetos a distintas velocidades para crear un efecto tridimensional. En Animate, puede lograr este efecto al crear animaciones 2D mediante la cámara y la función de profundidad de la capa. Puede crear efecto de paralaje en los objetos cambiando la profundidad de las capas en el panel Profundidad de la capa. Para utilizar la profundidad de la capa, haga clic en Ventana > Profundidad de la capa.

Haga clic aquí para obtener más información sobre la profundidad de la capa. 

  1. Cree varios objetos en diferentes capas en Animate.

  2. Añada distintas profundidades de capa a cada capa.

  3. Añada la capa de cámara haciendo clic en herramienta de cámara.

    Capa de la cámara en profundidad de la capa
    Capa de la cámara en profundidad de la capa

Con este efecto, se puede ver la profundidad y perspectiva de los objetos.

  • Los objetos que están más cerca de la cámara se mueven más rápido que los más lejanos.
  • Cuando la capa de la cámara tiene el valor 0, los objetos más cercanos a la cámara tienen un valor inferior positivo. Los objetos muy alejados de la cámara tienen un numero positivo muy alto. Las capas que se encuentran detrás de la cámara tienen números negativos. 

Vídeo que muestra el efecto de paralaje y la profundidad z de la cámara

En este vídeo puede apreciar el efecto de paralaje seguido del zoom de cámara.

Anclaje de una capa a la cámara

Como animador o diseñador de juegos, querrá que algunos objetos de la animación se ciñan a la vista de la cámara. Por ejemplo, un botón de acción, un visor que muestra un cronómetro, o un arma. En estos casos, debe mantener el recurso vinculado al movimiento de la cámara. La función Adjuntar a cámara de Animate le permite lograr este efecto.

Anclaje de una capa a la cámara
Anclaje de una capa a la cámara

Cuando adjunte una capa a la cámara, los objetos de esa capa se anclan con la cámara y siempre se moverán con la cámara. Por lo tanto, no se verán afectados por los movimientos de cámara en la salida.

Puede adjuntar una sola capa a la cámara haciendo clic en el punto en la columna del icono de adjuntar a cámara. Si la capa se asocia con la cámara, aparece un icono representativo junto al nombre de la capa.  

Las ilustraciones siguientes muestran el comportamiento de la capa antes y después de adjuntarla a la cámara: 

Ilustración que muestra una animación cuando la capa no está adjunta a la cámara:

Capa no asociada a la cámara
Capa no asociada a la cámara

Ilustración que muestra una animación cuando la capa está adjunta a la cámara:

Capa asociada a la cámara
Capa asociada a la cámara

También puede adjuntar o separar todas las capas de la cámara haciendo clic en el icono de adjuntar a cámara en la línea de tiempo. 

Adjuntar todas las capas a la cámara
Ilustración que muestra todas las capas adjuntas a la cámara

Uso de la cámara interactiva en tiempo de ejecución

Puede introducir o gestionar la cámara (o acceder a ella) en tiempo de ejecución utilizando las API de cámara para los tipos de documento AS3, WebGL y HTML Canvas. La lista de API de tiempo de ejecución de la cámara para los tipos de documento AS3, WebGL y HTML Canvas, es el siguiente:

Tipo

Clase 

Ejemplo

Descripción

AS3

VirtualCamera

import fl.VirtualCamera;

var cameraObj = VirtualCamera.getCamera(root);

Obtiene el objeto de la cámara. Sirve para obtener o establecer las propiedades de la cámara en tiempo de ejecución.

HTML Canvas

VirtualCamera

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

Obtiene el objeto de la cámara. Se asegura de activar la cámara durante la creación de contenido.

WebGL

VirtualCamera

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

Obtiene el objeto de la cámara. Se asegura de activar la cámara durante la creación de contenido.

 Todos los métodos son aplicables al tipo de documento AS3. Algunos de los métodos no están disponibles para los tipos WebGL y HTML Canvas. En las dos últimas columnas de la tabla se indica qué métodos son aplicables y cuáles no para WebGL y HTML Canvas.

Métodos de cámara virtual

S.No

Método

Prototipo

Ejemplo

Descripción

HTML Canvas

WebGL

1

getPosition

getPosition():Objeto

trace(cameraObj.getPosition().x, cameraObj.getPosition().y,
cameraObj.getPosition().z);
Devuelve un objeto con las propiedades “x”, “y” y “z”, que especifican la posición de la cámara en ese momento.

2

setPosition

setPosition(posX: número, posY: número, posZ: número = 0): void

cameraObj.setPosition(100,100,100);

Mueve la cámara a la posición absoluta dada por los parámetros de entrada. Valor predeterminado = 0.

3

moveBy

moveBy(tx: número, ty: número, tz: número = 0): void

cameraObj.moveBy(100,100,100);

Mueve la cámara en relación con la posición actual con la medida tx, ty o tz.
Nota: “tz” solo es pertinente si está activada la profundidad de capa, valor predeterminado = 0.


4

resetPosition

resetPosition():void

cameraObj.resetPosition();

Restablece la posición de la cámara a la posición original, es decir, (0,0,0).


5

getZoom

getZoom(): número

trace(cameraObj.getZoom());

Devuelve el valor de zoom actual de la cámara; el valor predeterminado es 100 %.


6

setZoom

setZoom(zoom: número): void

cameraObj.setZoom(120);

Aplica zoom a la cámara con el valor absoluto dado en el parámetro de entrada en porcentaje.


7

zoomBy

zoomBy(zoom: número): void

cameraObj.zoomBy(100);

Aplica zoom a la cámara respecto al valor de zoom actual (la unidad es el porcentaje).


8

resetZoom

resetZoom(): void

cameraObj.resetZoom();

Restablece el zoom de la cámara al valor de zoom predeterminado, es decir, 100 %.


9

getRotation

getRotation(): número

trace(cameraObj.getRotation());

Devuelve el ángulo actual de la cámara.  

10

setRotation

setRotation(angle: número): void

cameraObj.setRotation(45);

Gira la cámara con el ángulo absoluto dado en los parámetros de entrada.

11

rotateBy

rotateBy(angle: número): void

cameraObj.rotateBy(60);

Gira la cámara con el ángulo actual dado en los parámetros de entrada.

12

resetRotation

resetRotation():void

cameraObj.resetRotation();

Restablece el ángulo de la cámara a cero.

13

setTint

setTint(tintColor: uint, tintPercent: número): void

cameraObj.setTint(0x56FFFF, 68);

Establece el matiz de la cámara usando el color de matiz (RGB) y el porcentaje de matiz.

No

14

setTintRGB

setTintRGB(red: uint, green: uint, blue: uint, tintPercent: número): void

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

Establece el matiz de la cámara usando los valores de color desglosados R, G, B y tintPercent (porcentaje de matiz).

No

15

getTint()

getTint(): objeto

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

Devuelve el objeto con dos propiedades: “percent” y “color”.

No

16

getTintRGB

getTintRGB(): objeto

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

Devuelve el objeto con cuatro propiedades: “percent”, “red”, “green” y “blue”.

No

17

resetTint

resetTint()

cameraObj.resetTint();

Quita el matiz de la cámara.

No

18

setColorFilter

setColorFilter(brightness: número, contrast: número, saturation: número, hue: número): void

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

Establece un filtro de color de la cámara usando valores desglosados de (brillo, contraste, saturación, tono).

No

No

19

resetColorFilter

resetColorFilter()

cameraObj.resetColorFilter();

Quita el filtro de color.

No

No

20

reset

reset()

cameraObj.reset();

Restablece todas las propiedades de la cámara a los valores predeterminados.

21

setZDepth

setZDepth(zDepth: número): void

cameraObj.setZDepth(200);

Establece el valor de profundidad Z de la cámara.

No

22

getZDepth

getZDepth(): número

trace(cameraObj.getZDepth());

Devuelve el valor de profundidad Z actual de la cámara.

No

23

pinCameraToObject

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

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

La cámara sigue al objeto dado como parámetro de entrada en tiempo de ejecución. Si se proporcionan el offsetX, offsetY y offsetZ, la cámara sigue (x + offsetX, y + offsetY, z + offsetZ).

24

setPinOffset

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

cameraObj.setPinOffset(-60,0);

Cambia offsetX y offsetY por la cámara fijada con el objeto. La cámara sigue al objeto en relación con el punto (x + offsetX, y + offsetY, zDepth + z) en el motor de ejecución.

25

unpinCamera

unpinCamera()

cameraObj.unpinCamera();

Quita la fijación de la cámara con cualquier objeto.

26

setCameraMask

setCameraMask(maskObj:DisplayObject)

cameraObj.setCameraMask(maskObj);

Define MaskObj como una máscara sobre la cámara.

No

No

27

removeCameraMask

removeCameraMask()

cameraObj.removeCameraMask();

Elimina la máscara de la cámara.

No

No

Accede a la cámara como objeto de clip de película

Tipo

Método

Prototipo

Ejemplo

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);

Aplicar máscaras a objetos en el tiempo de ejecución (para el documento AS3)

Puede aplicar máscaras a los objetos en el tiempo de ejecución con el siguiente código de API de cámara:

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

Una captura de pantalla de muestra de la animación, si utiliza una máscara con forma ovalada, aparece de la siguiente manera:

Crear animaciones a partir de una cámara interactiva con el asistente de código de acciones

En el sigueinte diagrama de flujo se muestra un enfoque paso a paso para crear animaciones con una cámara interactiva. Puede utilizar el asistente de código de acciones en un documento HTML Canvas. 

A continuación, encontrará un vídeo de muestra, que le enseñará a usar la cámara interactiva. Puede observar cómo puede variar el enfoque durante el tiempo de ejecución en el paracaídas, la mochila propulsora y el paisaje urbano en diferentes intervalos.

Vídeo que enseña el uso de la cámara en tiempo de ejecución

Un vídeo de muestra que enseña el uso de la cámara durante el tiempo de ejecución

Recorte de un objeto en el escenario

Adobe XD permite apilar o superponer el contenido encima de otra mesa de trabajo para simular efectos interactivos de la diapositiva. Por ejemplo, listas desplegables, teclados que se deslizan hacia arriba o efectos de la caja de luz. Con las superposiciones, también puede reutilizar una mesa de trabajo varias veces sin necesidad de duplicar el contenido de superposición para cada mesa de trabajo. 

Haga clic en el botón Recortar contenido fuera del escenario para recortar el contenido que se encuentra fuera del escenario .  Junto a la vista de la cámara y del escenario, podrá ver el contenido dentro de los límites de la cámara.

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?