Guía del usuario Cancelar

Autoría y publicación de realidad virtual

 

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 > PublicarCtrl+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();

 

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

¿Nuevo usuario?