Guía del usuario Cancelar

Autoría y publicación de realidad virtual

Buscar
Animate

Animate

Abrir aplicación
  1. Guía del usuario de Adobe Animate
  2. Introducción a Animate
    1. Novedades de Animate
    2. Glosario visual
    3. Requisitos del sistema para Animate
    4. Métodos abreviados de teclado de Animate
    5. Trabajar con varios tipos de archivo en Animate
  3. Animación
    1. Aspectos básicos de animaciones en Animate
    2. Cómo utilizar los fotogramas y fotogramas clave en Animate
    3. Animación fotograma a fotograma en Animate
    4. Cómo trabajar con la animación de interpolación clásica en Animate
    5. Herramienta Pincel
    6. Guía de movimiento
    7. Interpolación de movimiento y ActionScript 3.0
    8. Acerca de la animación de interpolación de movimiento
    9. Animaciones de interpolación de movimiento
    10. Creación de una animación de interpolación de movimiento
    11. Uso de fotogramas clave de propiedad
    12. Animación de la posición con una interpolación
    13. Edición de interpolaciones de movimiento con el editor de movimiento
    14. Edición del trazado de movimiento de una animación de interpolación
    15. Manipulación de las interpolaciones de movimiento
    16. Adición de aceleraciones personalizadas
    17. Creación y aplicación de ajustes preestablecidos de movimiento
    18. Configuración de grupos de interpolación de animación
    19. Uso de interpolaciones de movimiento guardadas como archivos XML
    20. Interpolaciones de movimiento e interpolaciones clásicas
    21. Interpolación de forma
    22. Uso de la animación de la herramienta Hueso en Animate
    23. Trabajar con el rigging de personajes en Animate
    24. Uso de las capas de máscara en Adobe Animate
    25. Uso de escenas en Animate
  4. Interactividad
    1. Creación de botones en Animate
    2. Conversión de proyectos de Animate a otros formatos de documento
    3. Creación y publicación de documentos de HTML5 Canvas en Animate
    4. Adición de interactividad con fragmentos de código en Animate
    5. Creación de componentes HTML5 personalizados
    6. Uso de componentes en HTML5 Canvas
    7. Creación de componentes personalizados: Ejemplos
    8. Fragmentos de código para componentes personalizados
    9. Prácticas recomendadas - Publicidad con Animate
    10. Autoría y publicación de realidad virtual
  5. Espacio de trabajo y flujo de trabajo
    1. Creación y administración de pinceles
    2. Uso de Google Fonts en documentos HTML5 Canvas
    3. Utilización de las Bibliotecas Creative Cloud y Adobe Animate
    4. Utilización del Escenario y el panel Herramientas en Animate
    5. Flujo de trabajo y espacio de trabajo de Animate
    6. Uso de las fuentes web en documentos de HTML5 Canvas
    7. Líneas de tiempo y ActionScript
    8. Trabajo con varias líneas de tiempo
    9. Configuración de preferencias
    10. Utilización de los paneles de edición de Animate
    11. Creación de capas de la línea de tiempo en Animate
    12. Exportación de animaciones para aplicaciones móviles y motores de juegos
    13. Desplazamiento y copia de objetos
    14. Plantillas
    15. Buscar y reemplazar en Animate
    16. Deshacer y rehacer en el panel Historial
    17. Métodos abreviados de teclado
    18. Uso de la Cronología en Animate
    19. Creación de extensiones HTML
    20. Opciones de optimización para Imágenes y archivos GIF animados
    21. Configuración de exportación de imágenes y archivos GIF
    22. Panel de Recursos en Animate
  6. Multimedia y vídeo
    1. Transformación y combinación de objetos gráficos en Animate
    2. Crear y trabajar con instancias de símbolo en Animate
    3. Calco de imagen
    4. Cómo utilizar el sonido en Adobe Animate
    5. Exportación de archivos SVG
    6. Creación de archivos de vídeo para su uso en Animate
    7. Cómo añadir un vídeo a Animate
    8. Dibujo y creación de objetos en Animate
    9. Remodelado de líneas y formas
    10. Trazos, rellenos y degradados en Animate CC
    11. Uso de Adobe Premiere Pro y After Effects
    12. Paneles de color en Animate CC
    13. Apertura de archivos de Flash CS6 con Animate
    14. Uso de texto clásico en Animate
    15. Colocación de ilustraciones en Animate
    16. Mapas de bits importados en Animate
    17. Gráficos 3D
    18. Trabajo con símbolos en Animate
    19. Dibujo de líneas y formas en Adobe Animate
    20. Uso de bibliotecas en Animate
    21. Exportación de sonidos
    22. Selección de objetos en Animate CC
    23. Trabajo con archivos AI de Illustrator en Animate
    24. Aplicación de modos de mezcla
    25. Organización de objetos
    26. Automatización de tareas con el menú Comandos
    27. Texto en varios idiomas
    28. Utilización de la cámara en Animate
    29. Filtros de gráficos
    30. Sonido y ActionScript
    31. Preferencias de dibujo
    32. Dibujo con la herramienta Pluma
  7. Plataformas
    1. Conversión de proyectos de Animate a otros formatos de documento
    2. Compatibilidad con plataformas personalizadas
    3. Creación y publicación de documentos de HTML5 Canvas en Animate
    4. Creación y publicación de un documento de WebGL
    5. Empaquetado de aplicaciones para AIR para iOS
    6. Publicación de aplicaciones de AIR for Android
    7. Publicación para Adobe AIR para escritorio
    8. Configuración de publicaciones de ActionScript
    9. Prácticas recomendadas - Organización de ActionScript en una aplicación
    10. Uso de ActionScript con Animate
    11. Accesibilidad en el espacio de trabajo de Animate
    12. Cómo escribir y gestionar scripts
    13. Activación de la compatibilidad con plataformas personalizadas
    14. Información general sobre compatibilidad con plataformas personalizadas
    15. Uso de plugins de compatibilidad con plataformas personalizadas
    16. Depuración de ActionScript 3.0
    17. Activación de la compatibilidad con plataformas personalizadas
  8. Exportación y publicación
    1. Exportación de archivos de Animate CC
    2. Publicación de OAM
    3. Exportación de archivos SVG
    4. Exportación de gráficos y vídeos con Animate
    5. Publicar documentos de AS3
    6. Exportación de animaciones para aplicaciones móviles y motores de juegos
    7. Exportación de sonidos
    8. Prácticas recomendadas - Sugerencias para crear contenido para dispositivos móviles
    9. Prácticas recomendadas - Convenciones de vídeo
    10. Prácticas recomendadas - Directrices de edición de aplicaciones SWF
    11. Prácticas recomendadas - Estructuración de archivos FLA
    12. Prácticas recomendadas de optimización de archivos FLA para Animate
    13. Configuración de publicaciones de ActionScript
    14. Especificación de configuración de publicación para Animate
    15. Exportación de archivos de proyector
    16. Exportar imágenes y archivos GIF animados
    17. Plantillas de publicación HTML
    18. Uso de Adobe Premiere Pro y After Effects
    19. Compartir y publicar animaciones rápidamente
  9. Solución de problemas
    1. Problemas solucionados
    2. Problemas conocidos

 

Animate presenta los tipos de documentos RV 360 y panorámicos de RV para ayudarle a crear contenido atractivo de manera sencilla. Asimismo, puede utilizar el nuevo tipo de documento de realidad virtual para importar modelos 3D (como archivos .glb) al proyecto de Animate y crear animaciones en contenido 3D. 

Para previsualizar contenido creado en tipos de documentos de RV, puede utilizar el nuevo panel Vista de RV. En el panel Vista de RV, puede hacer clic en las instancias de clip de película y moverlas como desee. Animate detecta los objetos automáticamente al hacer clic y moverlos. La vista de RV le permite situar los objetos en el espacio 3D. Los cambios realizados en la colocación de los objetos (clip de película) en la vista de RV se reflejan automáticamente en el escenario 2D. También puede marcar capas como capas de textura en el panel Línea de tiempo para envolverlas en un cilindro o una esfera para los dos tipos de documentos respectivos.

Animate también le permite administrar las animaciones de realidad virtual en tiempo de ejecución con la ayuda de un conjunto de API muy completo. Por ejemplo, puede introducir algunos objetos en el entorno de realidad virtual cuando un usuario hace clic en un botón. 

 La realidad virtual (360) y la realidad virtual (panorámica) en Animate son versiones beta para el lanzamiento de octubre de 2018.

Tipos de documento de realidad virtual

Hay dos tipos de documentos para realidad virtual (RV):

Panorámico de RV

  • Utilice este tipo de documento para crear contenidos panorámicos para aplicaciones de realidad virtual. 
  • En este tipo de documento, el contenido que se dibuja directamente en las capas de textura se envuelve en un cilindro.
  • Puede elegir tener una imagen panorámica en la capa de textura o dibujar un fondo. 
  • Animate convierte las animaciones 2D que haya creado en contenido panorámico, junto con la interactividad. 

Escenario

  • Utilice este tipo de documento para crear contenidos de 360 grados para aplicaciones de realidad virtual.  
  • En este tipo de documento, el contenido que se dibuja directamente en las capas de textura se envuelve en una esfera.
  • Puede elegir entre tener una imagen equirrectangular o dibujar el contenido. 
  • Animate convierte las animaciones 2D que haya creado en contenido de 360 grados, junto con la interactividad.
Realidad virtual 360 y panorama en la pantalla de inicio
Realidad virtual 360 y panorama en la pantalla de inicio

Creación y publicación de contenido de realidad virtual

Utilice los siguientes pasos para crear contenido de realidad virtual en Animate:

  1. Importe una imagen 360 o panorámica en el escenario para el fondo.

    Si el tamaño de la imagen es grande, puede ajustar el de la vista del escenario.

    • Para configurar el tamaño, seleccione Modificar > Documento.
    •  Haga clic en Coincidir contenido.

    Elija el icono Escenario central, en la esquina superior derecha de la ventana, para fijar la imagen en el centro de su pantalla. 

  2. Para crear una capa como capa de textura, haga clic en el icono Crear envoltura de textura para todas las capas en el panel de línea de tiempo, como se muestra a continuación en la captura de pantalla:

    Crear envoltura de textura para capas
    Crear envoltura de textura para capas

    La capa de textura se envuelve alrededor del cilindro o esfera, según el tipo de documento seleccionado.

  3. Agregue objetos al escenario, agregue interpolado clásico o de movimiento a los objetos en función de sus recursos, y cree su animación. 

    Escenario RV 360
    Escenario RV 360

    En la captura de pantalla anterior se muestra la vista de escenario de Animate con la imagen equirrectangular en el tipo de documento RV 360, un pájaro con una trayectoria de movimiento guiada y una interpolación clásica en la línea de tiempo. 

  4. Previsualice el contenido mediante Windows > Vista de RV.

    Utilizar la vista de RV para obtener una vista previa del contenido de realidad virtual
    Utilizar la vista de RV para obtener una vista previa del contenido de realidad virtual

    Haga clic en el botón Iniciar vista de RV en el panel Vista de RV. 

    Panel Vista de RV
    Panel Vista de RV

    En el modo de previsualización Vista de RV, para restablecer el contenido a su estado inicial, utilice el botón Restablecer. El modo Vista de RV no refleja automáticamente ningún cambio en la etapa de creación. Para ver los cambios aplicados en sus recursos en el entorno provisional, haga clic en Actualizar. 

    Actualizar y restablecer opciones de vista de RV
    Actualizar y restablecer opciones de vista de RV

    Puede mover instancias de los clips de película en el panel de vista previa. Animate detecta los objetos automáticamente al pasar el ratón sobre ellos. Como se muestra en la siguiente captura de pantalla, la forma del cursor cambia a un icono de barra transversal al desplazar el ratón sobre los objetos. Según el tipo de documento seleccionado, puede mover objetos a lo largo de una ruta cilíndrica o esférica.

    Para desplazarse por la ventana Vista de RV, haga clic en la pantalla de vista previa y arrastre los deslizadores. 

    Icono de barras cruzadas para mover objetos
    Icono de barras cruzadas para mover objetos

  5. Utilice Archivo > Publicar o Ctrl+Intro para publicar el contenido. Al publicar contenido, la imagen envuelve una malla cilíndrica o esférica en Animate. Puede agregar más capas y contenido de animación en esas capas.

    La salida publicada de realidad virtual 360 de ejemplo aparece como se muestra en el siguiente GIF animado. 

    Muestra de la salida de RV 360
    Muestra de la salida de RV 360

    Muestra de la salida de Panorámico de RV
    Muestra de la salida de Panorámico de RV

    Al publicar el contenido de realidad virtual, puede optar por utilizar bibliotecas de JavaScript hospedadas como tiempo de ejecución. De forma predeterminada, Animate utiliza el tiempo de ejecución para contenido publicado de las bibliotecas hospedadas. Si quiere empaquetar el tiempo de ejecución con la salida publicada, puede desmarcar la opción en Configuración de publicación. 

    Configuración de publicación
    Configuración de publicación para bibliotecas

Modernización de animaciones con realidad virtual

La realidad virtual es una tendencia predominante en el mercado. ¿Quiere incorporar la realidad virtual en su contenido? Consulte el tutorial al final de este ejemplo y siga estos pasos.

  1. En la Pestaña Inicio, haga clic en Avanzada.

  2. Seleccione Panorámico de RV y haga clic en Crear.

Creación de contenido panorámico con Animate

Vea el vídeo para obtener más información sobre cómo añadir efectos en la vista panorámica para mejorar la experiencia virtual.

Tutorial en vídeo sobre el uso de la exportación WebGL-glTF (Standard y Extended)

Vídeo de demostración sobre el uso de la exportación WebGL-glTF (Standard y Extended)

Uso de contenido 3D

Puede usar el tipo de documento de realidad virtual para importar modelos 3D (archivos .glb) a su proyecto de Animate y crear contenido 3D.

  1. Cree un documento de tipo RV (360) de vista previa o RV (panorámico).

  2. Elija Archivo > Importar y vaya al archivo .glb para importarlo al escenario o la biblioteca.

    Importación de contenido 3D a escenario
    Importación de contenido 3D a escenario

  3. Agregue animaciones y una interactividad similares a los de los objetos de clip de película y publique el contenido.

    También puede previsualizar el modelo 3D en la Vista de RV. 

Usar realidad virtual en tiempo de ejecución

Animate también le permite administrar las animaciones de realidad virtual en tiempo de ejecución con la ayuda de las API. Por ejemplo, puede introducir objetos en un entorno de realidad virtual de 360 grados cuando un usuario haga clic en un botón. 

La lista de API en tiempo de ejecución de realidad virtual es la siguiente:

Paquete: anWebgl

Propiedades

Nombre

Tipo / Nombre

Acceso

Descripción

Ejemplo

Stage

Stage

RW

Obtener/establecer propiedades de escenario

anWebgl.stage

virtualCamera

VirtualCamera

RW

Cámara de acceso predeterminada

anWebgl.virtualCamera

Raíz

Clip de película

RO

Objeto superior mostrado (línea de tiempo de la escena actual)

anWebgl.root

Métodos

Nombre

Prototipo

Descripción

Ejemplo

addGLBFile

addGLBFile(filePath: string, successCallback : function, errorCallback : function):void

Cargue el modelo 3D del archivo especificado de GLB

anWebgl.addGLBFile(“model.glb”, successCallbackFunction, errorCallbackFunction)

playAll

playAll() : void

Reproducir animación para todos los clips de película, incluida la raíz

anWebgl.playAll();

stopAll

stopAll() : void

Detener animación para todos los clips de película, incluida la raíz

anWebgl.stopAll();

Clase: Clip de película

Obtenido: DisplayObjectContainer

Propiedades

Métodos

Nombre

Prototipo

Descripción

Ejemplo

Reproducción

play(): void

Reproduce animación para el clip de película.

anWebgl.root.getChildByName("name").play();
(o)

this.play(); 

Detener

stop(): void

Detiene animación para el clip de película

anWebgl.root.getChildByName("name").stop();

 

playAll

playAll() : void

Reproduce animaciones para todos los clips de película, incluida la raíz.

anWebgl.root.getChildAt(0).playAll();

 

stopAll

stopAll():void

Detiene animaciones para todos los clips de película, incluida la raíz.

anWebgl.root.getChildAt(0)).stopAll();

 

Clase: DisplayObject

Obtenido: IEventDispatcher

Nombre

Prototipo

Descripción

Ejemplo

hitTestPoint

hitTestPoint(x, y, Boolean)

devuelve displayObject/displayObjectContainer/movieClip, en función del tipo de objeto utilizado.

x e y son coordenadas en la pantalla.

anWebgl.root.hitTestPoint(300, 200, true, false);

Nombre

Tipo / Nombre

Acceso

Descripción

Ejemplo

X

número

RW

Traslado en el eje X

var name =anWebgl.root.getChildByName("name");
name.x+=10;

 

Y

número

RW

Traslado en el eje Y

var name = anWebgl.root.getChildByName("name");
name.y+=10;

 

Z

número

RW

Traslado en el eje Z

var name = anWebgl.root.getChildByName("name");
name.z+=10;

 

scaleX

número

RW

Escala a lo largo del eje X

var root = anWebgl.root;
var child = root.getChildAt(0);
child.scaleX=2;

 

scaleY

número

RW

Escala a lo largo del eje Y

var root = anWebgl.root;
var child = root.getChildAt(0);
child.scaleY=10;

 

scaleZ

número

RW

Escala a lo largo del eje Z

var root = anWebgl.root;
var child = root.getChildAt(0);
child.scaleZ=10;

 

rotationX

número

RW

Rotación a lo largo del eje X

anWebgl.root.getChildByName("name").rotationX+=30;

(o)

anWebgl.root.movieClip_name.rotationX+=30;

rotationY

número

RW

Rotación a lo largo del eje Y

anWebgl.root.getChildByName("name").rotationY+=30;

 

rotationZ

número

RW

Rotación a lo largo del eje Z

anWebgl.root.getChildByName("name").rotationZ+=30;

 

Elemento principal

DisplayObjectContainer

RO

Contenedor principal

var root = anWebgl.root;
var child = root.getChildAt(0);
console.log(child.parent)

 

Visible

Boolean

RW

Visibilidad de los objetos

var root = anWebgl.root;
var child = root.getChildAt(0);
console.log(child.visible);

Clase: DisplayObjectContainer

Hereda: DisplayObject

Nombre

Prototipo

Descripción

Ejemplo

numChildren

numChildren:num

devuelve el número de elementos secundarios de un objeto

anWebgl.root.movieClipInstanceName.numChildren;

removeChild

removeChild(obj:DisplayObject):void

quita el objeto argumento, si está presente

anWebgl.root.movieClipInstanceName.removeChild(childObj);

Contiene

contains(obj:DisplayObject):boolean

devuelve “true” si el objeto argumento es un elemento secundario; si no, devuelve “false”

anWebgl.root.movieClipInstanceName.contains(childObj);

getChildAt

getChildAt(index:Number): DisplayObject

devuelve el elemento secundario en el índice del argumento

anWebgl.root.movieClipInstanceName.getChildAt(2);

getChildByName

getChildByName(name:String):DisplayObject

devuelve el elemento secundario con el nombre del argumento, si existe

anWebgl.root.movieClipInstanceName.getChildByName(childName);

Clase: Escenario

Propiedades

Nombre

Acceso

Descripción

Ejemplo

stageWidth

RO

Grosor del escenario

anWebgl.stage.stageWidth

stageHeight

RO

Altura del escenario

anWebgl.stage.stageHeight

Color

RW

Color de fondo del escenario

anWebgl.stage.color

Clase: Cámara virtual

Métodos

Nombre

Prototipo

Descripción

Ejemplo

getCamera

getCamera()

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

let cam = anWebgl.virtualCamera.getCamera();
let pos = cam.getPosition();
console.log("camera position x: " +pos.x + " y: "+ pos.y+" z: "+pos.z);

 

getPosition

getPosition()

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

let cam = anWebgl.virtualCamera.getCamera();
let pos = cam.getPosition();
console.log("camera position x: " +pos.x + " y: "+ pos.y+" z: "+pos.z);

 

setPosition

setPosition()

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

let cameraPos = {x: 10, y:10, z:10};
anWebgl.virtualCamera.getCamera().setPosition(cameraPos);

 

moveBy

moveBy()

Mueve la cámara en relación con la posición actual con la medida

let moveByPos = {x: 10, y:10, z:10};
anWebgl.virtualCamera.getCamera().moveBy(moveByPos);

 

resetPosition

resetPosition()

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


anWebgl.virtualCamera.getCamera().resetPosition();

 

setRotation

SetRotation()

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

let __rotation__ = {x: 10, y:10, z:10};
anWebgl.virtualCamera.getCamera().setRotation(__rotation__);

 

resetRotation

resetRotation()

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

anWebgl.virtualCamera.getCamera().resetRotation();

 

Más productos similares

 Adobe

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

¿Nuevo usuario?

Vínculos rápidos

Ver todos los planes Administrar los planes
Ver vínculos rápidos
Ocultar vínculos rápidos

Avisos legales    |    Política de privacidad en línea