Guía del usuario Cancelar

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

  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. Uso de 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. Trabajo con puntos de referencia de vídeo
    9. Dibujo y creación de objetos en Animate
    10. Remodelado de líneas y formas
    11. Trazos, rellenos y degradados en Animate CC
    12. Uso de Adobe Premiere Pro y After Effects
    13. Paneles de color en Animate CC
    14. Apertura de archivos de Flash CS6 con Animate
    15. Uso de texto clásico en Animate
    16. Colocación de ilustraciones en Animate
    17. Mapas de bits importados en Animate
    18. Gráficos 3D
    19. Trabajo con símbolos en Animate
    20. Dibujo de líneas y formas en Adobe Animate
    21. Uso de bibliotecas en Animate
    22. Exportación de sonidos
    23. Selección de objetos en Animate CC
    24. Trabajo con archivos AI de Illustrator en Animate
    25. Aplicación de patrones con el pincel rociador
    26. Aplicación de modos de mezcla
    27. Organización de objetos
    28. Automatización de tareas con el menú Comandos
    29. Texto en varios idiomas
    30. Utilización de la cámara en Animate
    31. Uso de Animate con Adobe Scout
    32. Trabajo con archivos de Fireworks
    33. Filtros de gráficos
    34. Sonido y ActionScript
    35. Preferencias de dibujo
    36. 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. Prácticas recomendadas - Directrices de accesibilidad
    12. Accesibilidad en el espacio de trabajo de Animate
    13. Cómo escribir y gestionar scripts
    14. Activación de la compatibilidad con plataformas personalizadas
    15. Información general sobre compatibilidad con plataformas personalizadas
    16. Creación de contenido accesible
    17. Uso de plugins de compatibilidad con plataformas personalizadas
    18. Depuración de ActionScript 3.0
    19. 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. Exportación de archivos de vídeo QuickTime
    9. Control de reproducción de vídeo externo con ActionScript
    10. Prácticas recomendadas - Sugerencias para crear contenido para dispositivos móviles
    11. Prácticas recomendadas - Convenciones de vídeo
    12. Prácticas recomendadas - Directrices de edición de aplicaciones SWF
    13. Prácticas recomendadas - Estructuración de archivos FLA
    14. Prácticas recomendadas de optimización de archivos FLA para Animate
    15. Configuración de publicaciones de ActionScript
    16. Especificación de configuración de publicación para Animate
    17. Exportación de archivos de proyector
    18. Exportar imágenes y archivos GIF animados
    19. Plantillas de publicación HTML
    20. Uso de Adobe Premiere Pro y After Effects
    21. Compartir y publicar animaciones rápidamente

¿Qué es 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.

  1. Para crear un documento basado en WebGL-glTF, seleccione WebGL-glTF Standard o WebGL-glTF Extended en la categoría Avanzado de la pantalla de inicio. 

    Tipo de documento WebGL-glTF
    Tipo de documento WebGL-glTF

  2. Especifique la anchura, la altura y las unidades según sus requisitos y haga clic en Crear.

Publicación de un archivo WebGL-glTF

  1. Haga clic en Configuración de publicación, en el inspector de propiedades.

    Publicación de archivos WebGL-glTF
    Publicación de archivos WebGL-glTF

  2. Escriba un nombre en el cuadro de texto Nombre de salida.

  3. Seleccione GLB o GLTF en la opción Formato.

  4. Especifique el número de decimales (entre 1 y 3) en el cuadro de texto Resolución de la imagen.

  5. Marque la opción Eliminar espacios en blanco en el archivo JSON para reducir el tamaño del archivo.

  6. De forma predeterminada, las opciones estándar Línea de tiempo de bucle e Incluir capas ocultas están marcadas. Puede desmarcarlas para encontrar cualquier pequeño error.

  7. Haga clic en el botón Publicar para publicar el archivo.

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.

  1. En Propiedades, haga clic en Configuración de publicación.

  2. Escriba un nombre en el cuadro de texto Nombre de salida.

  3. Seleccione GLB o GLTF en la opción Formato.

  4. Especifique el número de decimales (hasta 3) en el cuadro de texto Resolución de la imagen.

  5. Marque la opción Eliminar espacios en blanco en el archivo JSON para reducir el tamaño del archivo.

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:

Archivo de salida

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

Sobrescribir HTML

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.

Incluir capas ocultas

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.

Línea de tiempo de bucle

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.

  1. 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:

Archivo envolvente de HTML

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.

Archivo JavaScript (tiempo de ejecución de WebGL)

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.

Atlas de textura

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.

Copiar

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.

Importar

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.

Trabajar

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.

Scripts

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 elimina el contenido

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

Filtros

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

El efecto Filtro de desenfoque se eliminará y se sustituirá con el relleno Sólido.

El contenido se cambia a un valor predeterminado admitido

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

 

Degradado radial

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

Degradado radial 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.
Logotipo de Adobe

Inicia sesión en tu cuenta