Creación y publicación de un documento de WebGL

WebGL es un estándar de web abierta para representar gráficos en cualquier navegador compatible, sin necesidad de plugins adicionales. WebGL se integra totalmente con todos los estándares web del navegador y permite el uso acelerado por GPU de procesamiento de imágenes y efectos como parte del lienzo de la página web. Los elementos WebGL pueden incrustarse en otros elementos HTML y combinarse con otras partes de la página.

Aunque la mayoría de los navegadores modernos admiten WebGL, visite este vínculo para conocer más detalles sobre las versiones exactas que se admiten.

Algunos navegadores no tienen WebGL activado de forma predeterminada. Para activar WebGL en el navegador, consulte este artículo.

 Asegúrese de activar WebGL en el navegador, ya que algunos navegadores lo desactivan de forma predeterminada.

Uso del tipo de documento WebGL-glTF (Beta)

Animate ahora tiene dos tipos de documento WebGL-glTF. Puede utilizar el tipo WebGL-glTF Standard para lograr la integración con cualquiera de los paquetes WebGL-glTF estándar. Cumple completamente los estándares del sector.

Publicación de un archivo WebGL-glTF

Convertir animaciones a los formatos GLTF y GLB

WebGL-glTF y GLBreducen el tamaño del archivo y el procesamiento del tiempo de ejecución. En Animate, puede utilizar documentos en ambos formatos. ¿Quiere utilizar vídeos en ambos formatos? Consulte el tutorial al final de este ejemplo y siga estos pasos.

How to create advanced animations using WebGL GLTF Export in Animate (Cómo crear animaciones avanzadas utilizando Exportación de WebGL GLTF en Animate)

Para obtener más información sobre cómo se ven las animaciones en los formatos WebGL GLTF y GLB, vea este vídeo.

Animate 18.0 y versiones anteriores

Si utiliza Animate 18.0 o cualquiera de las versiones anteriores de Animate, puede consultar el siguiente contenido.

El tipo de documento de WebGL

Animate permite crear y publicar contenido interactivo enriquecido en el formato Web Graphics Library (WebGL). Como WebGL está totalmente integrado con los navegadores, permite que Animate aproveche el uso acelerado por GPU del procesamiento y la representación de gráficos, como parte del lienzo de la página web.

Este nuevo tipo de documento le permite crear contenido y publicarlo rápidamente en una salida de WebGL. Puede aprovechar herramientas potentes de Animate para crear contenido enriquecido y representar salidas de WebGL que se ejecutan en cualquier navegador compatible. Esto significa que puede utilizar la línea de tiempo, el espacio de trabajo y las herramientas de dibujo tradicionales de Animate para editar y crear contenido de WebGL de forma nativa. La mayor parte de los navegadores admiten WebGL, por lo que Animate puede representar contenido en la mayoría de las plataformas web.

 La compatibilidad con WebGL solo está disponible como previsualización. Esta actualización de Animate admite animaciones básicas con sonido y secuencias de comandos y un conjunto de funciones de interactividad. En versiones futuras de Animate, verá más funciones habilitadas para el tipo de documento de WebGL. Para obtener una lista completa de las funciones de Animate que se admiten en WebGL, consulte este artículo de la base de conocimientos.

Creación de un documento de WebGL

En Animate, el documento de WebGL permite crear contenido rápidamente y publicarlo en el formato WebGL. Para crear un documento de WebGL:

1. Inicie Animate.
2. En la pantalla de bienvenida, haga clic en la opción WebGL (previsualización). Si lo prefiere, seleccione la opción de menú Archivo > Nuevo para mostrar el cuadro de diálogo Nuevo documento. Haga clic en la opción WebGL (previsualización).

Previsualización de contenido WebGL en navegadores

Puede utilizar la función Probar película de Animate para previsualizar o probar el contenido. Para previsualizar, haga lo siguiente:

1. Desde Animate, pulse Ctrl+Intro en Windows o Cmd+Intro en Mac. Se iniciará el navegador predeterminado y se representará el contenido WebGL.

Animate requiere un servidor web para ejecutar contenido WebGL. Animate tiene un servidor web incorporado configurado para ejecutar el contenido WebGL en el puerto 8090. Si un servidor ya está utilizando este puerto, Animate detecta y resuelve el conflicto automáticamente.

Publicación de contenido en el formato WebGL

Animate le permite crear y publicar contenido WebGL nativo.

Para publicar el documento de WebGL, haga lo siguiente:

1. Seleccione Archivo > Configuración de publicación para mostrar el cuadro de diálogo Configuración de publicación. Si lo prefiere, seleccione Archivo > Publicar si ya ha especificado la configuración de publicación para WebGL.
2. En el cuadro diálogo Configuración de publicación, especifique los valores para:

Escriba un nombre descriptivo para la salida. Asimismo, busque o especifique la ubicación donde desea publicar la salida de WebGL.

Permite especificar si desea sobrescribir el contenedor HTML o no cada vez que publique su proyecto de WebGL. Puede anular la selección de esta opción si ha realizado cambios externos al archivo HTML publicado y desea conservarlos mientras se actualizan todos los cambios realizados en la animación o los recursos en Animate.

Incluye todas las capas ocultas de la salida de WebGL. Si se anula la selección de Incluir capas ocultas se evita que todas las capas (incluidas las anidadas dentro de clips de película) marcadas como ocultas se exporten en el archivo WebGL resultante. De esta forma puede probar distintas versiones del documento de WebGL con capas invisibles.

Repite el vídeo cuando llega al último fotograma. Anule la selección de esta opción para que el contenido se detenga al llegar al último fotograma.

3. Haga clic en Publicar para publicar el contenido WebGL en la ubicación especificada.

 La velocidad máxima de FPS que puede especificarse para el contenido WebGL que se ejecuta en navegadores es 60 FPS.

Conceptos básicos de la salida de WebGL

La salida de WebGL publicada contiene los siguientes archivos:

Incluye el tiempo de ejecución, las llamadas de recursos e inicializa el procesador de WebGL. De forma predeterminado, el nombre del archivo será <FLA_nombre>.html. Puede especificar un nombre distinto para el archivo HTML en el cuadro de diálogo Configuración de publicación (Archivo > Configuración de publicación).

De forma predeterminada, el archivo HTML se coloca en el mismo directorio que el archivo FLA. Puede especificar una ubicación diferente en el cuadro de diálogo Configuración de publicación.

Procesa el contenido publicado en WebGL. Se publica en la carpeta libs/ del documento de WebGL. El archivo se denomina: flwebgl-<versión>.min.js

El archivo envolvente de HTML utiliza este archivo JS para procesar contenido WebGL.

Almacena todos los valores de color (de formas), incluidas las instancias de mapas de bits en el escenario.

Adición de audio al documento de WebGL

Se puede importar e incorporar audio al documento de WebGL, controlar la reproducción mediante la configuración de sincronización (evento, iniciar y detener) y reproducir audio de la línea de tiempo en tiempo de ejecución. Actualmente WebGL solo admite los formatos .wav y .mp3.

Para obtener más información sobre el uso del audio, consulte Uso de sonidos en Animate.

Migración de contenido existente a un documento de WebGL

Puede migrar el contenido existente de Animate a un documento de WebGL. Para ello, Animate permite migrar mediante la copia o la importación manual del contenido. Además, al trabajar con varios documentos en Animate, es una práctica habitual copiar el contenido entre documentos como capas o recursos de la biblioteca. Aunque se admiten la mayoría de las funciones de Animate, algunos tipos de contenido se modifican para ajustarse mejor al formato WebGL.

Animate incluye varias funciones potentes que permiten producir contenido visual enriquecido. Sin embargo, algunas de las funciones nativas de Animate no se admitirán en un documento de WebGL. Animate se ha diseñado para modificar dicho contenido a un formato compatible e indicar visualmente qué herramientas o funciones no son compatibles.

contenido (capas o símbolos de biblioteca) de un documento de Animate tradicional (como ActionScript 3.0, AIR para Android, AIR para escritorio, etc.) a un documento de WebGL. En este caso, los tipos de contenido no compatibles se eliminan o se convierten en valores predeterminados compatibles.

Por ejemplo, si se copia una animación 3D, se eliminarán todas las transformaciones 3D aplicadas a objetos en el escenario.

un archivo PSD o AI con contenido no compatible. En este caso, el contenido se eliminará o se convertirá en valores predeterminados compatibles.

Por ejemplo, importe un archivo PSD con efectos de desenfoque. Animate elimina el efecto.

con varios tipos de documento (por ejemplo, ActionScript 3.0 y WebGL) simultáneamente, si cambia de documentos con una opción o herramienta no compatible seleccionada. En este caso, Animate indica visualmente que no se admite la función.

Por ejemplo, ha creado una línea de puntos en un documento de ActionScript 3.0 y pasa a WebGL con la herramienta Línea aún seleccionada. Observe el puntero y el Inspector de propiedades; indican visualmente que la línea de puntos no se admite en WebGL.

En el panel Acciones, puede escribir código JavaScript que se ejecutará cuando el reproductor entre en el fotograma. La variable “this” en el contexto de los scripts de fotograma hace referencia a la instancia de MovieClip a la que pertenece. Además, los scripts de fotograma pueden acceder a funciones de JavaScript y las variables declaradas en el archivo HTML contenedor. Cuando copia un fotograma o una capa de un documento de ActionScript y los pega en un documento de WebGL, los scripts, si los hay, se comentarán.

Cambios aplicados al contenido después de la migración

A continuación se muestran los tipos de cambios que se aplicarán cuando migre el contenido heredado a un documento de WebGL.

Se eliminan los tipos de contenido que no se admiten en HTML5 Canvas. Por ejemplo:

no se admiten. El efecto se eliminará y la forma tendrá un relleno sólido.

Se admite el tipo de contenido o la función, pero una de las propiedades de la función no se admite. Por ejemplo:

 

se cambia a un relleno sólido con el color primario.

Mejora del rendimiento de representación con almacenamiento en caché de mapas de bits

Esta función permite optimizar el rendimiento del procesamiento, ya que especifica que un clip de película estático (por ejemplo, una imagen de fondo) o el símbolo de un botón quede en caché, como mapa de bits, en tiempo de ejecución. De forma predeterminada, los elementos vectoriales se vuelven a dibujar en cada fotograma. Con el almacenamiento en caché de un clip de película o símbolo de botón como mapa de bits, se evita que el navegador tenga que volver a dibujar continuamente el elemento, ya que la imagen es un mapa de bits y su posición no cambia. Esto representa una mejora significativa en el rendimiento de procesamiento de contenido de WebGL.

Por ejemplo, cuando cree una animación con un fondo complejo, cree un clip de película que contenga todos los elementos incluidos en el fondo. A continuación seleccione Guardar en caché como mapa de bits para el clip de película de fondo en el inspector de propiedades. Durante la reproducción, el fondo se presenta como un mapa de bits almacenado a la profundidad de pantalla actual. El navegador dibuja el mapa de bits en el escenario rápidamente y solo una vez, por lo que la animación se reproduzca con más rapidez y suavidad.

Si se guarda en caché un mapa de bits, se puede utilizar un clip de película y congelarlo automáticamente en un punto. Si cambia un área de la pantalla, se actualiza la caché de mapa de bits a partir de los datos vectoriales. De este modo se reduce al mínimo el número de veces que el navegador debe redibujar el fondo y se obtiene un rendimiento de procesamiento más suave y rápido.

Para activar la propiedad Caché como mapa de bits como una propiedad en un símbolo de clip de película, seleccione la instancia de clip de película y, a continuación, seleccione Caché como mapa de bits en el menú desplegable Procesar del Inspector de propiedades (Ventana > Propiedades).

Consideraciones al usar Caché como mapa de bits

Al utilizar la propiedad Caché como mapa de bits con contenido WebGL, considere lo siguiente:

• El tamaño máximo del símbolo de clip de película está limitado a 2048 x 2048. Tenga en cuenta que los límites reales de la instancia de clip de película que se puede guardar en caché son menores que 2048 x 2048, WebGL reserva algunos píxeles.
• Si hay más de una instancia del mismo clip de película, Animate genera una caché del tamaño de la primera instancia detectada. Sin embargo, la caché no se vuelve a generar y no se omite la propiedad Caché como mapa de bits, aunque la transformación del clip de película cambie en gran medida. Por ello, si el símbolo de clip de película aumenta mucho de tamaño durante la animación, puede ser que la animación se muestre pixelada.