Creación y publicación de documentos de HTML5 Canvas en Animate

  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 HTML5 Canvas?

Canvas es un elemento nuevo en HTML5 que proporciona API que permiten generar y procesar dinámicamente gráficos, tablas, imágenes y animaciones. La presencia de la API Canvas para HTML5 consolida la plataforma HTML5 ya que proporciona capacidad de dibujo bidimensional. Esta capacidad es compatible con la mayoría de sistemas operativos y navegadores modernos.

Básicamente, Canvas es un motor de representación; los dibujos son finales y no se puede cambiar su tamaño. Además, los objetos dibujados en Canvas no forman parte del DOM de la página web.

En una página web, podrá añadir elementos Canvas con la etiqueta <Canvas>. Estos elementos se podrán mejorar con JavaScript para crear interactividad. Para obtener más información, consulte este vínculo.

El nuevo tipo de documento HTML5 Canvas

Animate permite crear documentos de HTML5 Canvas con ilustraciones enriquecidas, gráficos, animaciones, etc. Se ha agregado un nuevo tipo de documento (HTML5 Canvas) a Animate que proporciona compatibilidad nativa para crear contenido enriquecido e interactivo de HTML5. Esto significa que puede utilizar la línea de tiempo, el espacio de trabajo y las herramientas tradicionales de Animate para crear contenido y producir salidas de HTML5. Con unos pocos clics podrá crear y un documento de HTML5 Canvas y generar salidas totalmente funcionales. Para ello, en Animate, las opciones de publicación y documento están preestablecidas para generar una salida de HTML5.

Animate está integrado con CreateJS, lo que habilita contenido interactivo enriquecido en tecnologías de web abierta mediante HTML5. Animate genera HTML y JavaScript para el contenido (incluye mapas de bits, vectores, formas, sonidos, interpolaciones, etc.) creado en el escenario. La salida se puede ejecutar en cualquier dispositivo o navegador que admita HTML5 Canvas.

Animate y la API Canvas

Animate publica en HTML5 mediante la API Canvas. Animate convierte los objetos creados en el escenario en sus equivalentes de Canvas sin problemas. Animate le permite publicar contenido complejo en HTML5 al permitir la asignación individual de funciones de Animate a las API de Canvas.

Creación de un documento de HTML5 Canvas

Para crear un documento de HTML5 Canvas, haga lo siguiente:

  1. Seleccione Archivo > Nuevo para mostrar el cuadro de diálogo Nuevo documento. Seleccione la pestaña Avanzado, en la parte superior de la pantalla, y haga clic en la opción HTML5 Canvas. Se abrirá un nuevo archivo FLA con la configuración de publicación modificada para generar una salida HTML5.
Nuevo documento
Nuevo documento

Ya puede empezar a crear contenido HTML5 con las herramientas de Animate. Cuando comience a trabajar con el documento de HTML5 Canvas, observará que ciertas funciones y herramientas no son compatibles y se desactivan. Esto se debe a que Animate admite las funciones compatibles con el elemento Canvas en HTML5. Por ejemplo, no se admiten las transformaciones 3D, las líneas de puntos y los efectos biselados.

Adición de interactividad a un documento de HTML5 Canvas

Animate publica contenido HTML5 con las bibliotecas de CreateJS. CreateJS es un conjunto de bibliotecas modulares y herramientas que permite agregar contenido interactivo enriquecido en tecnologías de web abierta mediante HTML5. El conjunto CreateJS está compuesto por: EaselJS, TweenJS, SoundJS y PreloadJS. CreateJS convierte el contenido creado en el escenario a HTML5 con estas bibliotecas individuales para generar archivos de salida de HTML y JavaScript. También puede manipular este archivo JavaScript para mejorar su contenido.

No obstante, Animate permite añadir interactividad directamente a los objetos del escenario creados para HTML5 Canvas. Esto significa que puede añadir código JavaScript a objetos individuales en el escenario en Animate y previsualizarlos durante la creación. A su vez, Animate ofrece compatibilidad nativa para JavaScript con funciones útiles del editor de código para ayudar a mejorar la eficacia del flujo de trabajo de los programadores.

Puede seleccionar fotogramas y fotogramas clave individuales en la línea de tiempo para añadir interactividad al contenido. Para un documento de HTML5 Canvas, puede agregar interactividad mediante JavaScript. Para obtener más información sobre el código JavaScript, consulte este vínculo.

Ahora el código JavaScript se puede escribir directamente en el panel Acciones y puede hacer uso de las siguientes funciones mientras se redacta el código JavaScript:

Sugerencias de código

Le permite insertar y editar rápidamente y sin errores código JavaScript. Conforme introduzca caracteres en el panel Acciones, verá una lista de candidatos que podrían completar la entrada automáticamente.

Asimismo, Animate también admite algunas funciones inherentes al panel Acciones al trabajar con HTML5 Canvas. Estas funciones ayudarán a mejorar la eficacia del flujo de trabajo al agregar interactividad a los objetos en el escenario. Son:

Resaltado de la sintaxis

Muestra el código en diferentes fuentes o colores según la sintaxis. Esta función permite escribir código en un modo estructurado, ayudándole a distinguir visualmente los códigos correctos y los errores de sintaxis.

Coloreado del código

Muestra el código en distintos colores según la sintaxis. Esto le permite distinguir visualmente las distintas partes de una sintaxis.

Llaves

Añade automáticamente llaves de cierre y paréntesis para abrir al escribir código JavaScript.

(A) Resaltado de la sintaxis (B) Coloreado del código (C) Llaves

Puede añadir interactividad a formas u objetos en el escenario mediante JavaScript. Puede añadir JavaScript a fotogramas y fotogramas clave individuales.

  1. Seleccione el fotograma al que quiera añadir JavaScript.
  2. Seleccione Ventana > Acciones para abrir el panel Acciones.

Uso de los fragmentos de código JavaScript

Puede añadir interactividad mediante fragmentos de código JavaScript disponibles en Animate. Para acceder a los fragmentos de código y utilizarlos, seleccione Ventana > Fragmentos de código. Para obtener más información acerca de la adición de fragmentos de código JavaScript, consulte este artículo.

Referencias a la documentación de CreateJS

Códigos para inducir la interactividad

JavaScript le proporciona una variedad de opciones para que la animación sea interactiva. ¿Desea aprender a añadir movimientos interactivos al personaje? Consulte el tutorial al final de este ejemplo y siga estos pasos.

  1. En las propiedades, introduzca el nombre de la instancia.

  2. Haga clic en la ventana y seleccione Acción.

  3. En el fotograma actual, seleccione Agregar utilizando el asistente.

Cómo hacer que su contenido sea interactivo con HTML5

Consulte el vídeo para obtener más información sobre cómo modificar códigos para hacer que sus personajes hagan lo que usted quiera.

Publicación de animaciones en HTML5

Para publicar contenido del escenario en HTML5, haga lo siguiente:

  1. Seleccione Archivo > Configuración de publicación.
  2. En el cuadro de diálogo Configuración de publicación, especifique las opciones siguientes:

Configuración básica

Configuración básica de publicación

Salida

Directorio en el que se publicará el FLA. Se asigna el directorio del FLA como directorio predeterminado, pero se puede cambiar la ruta haciendo clic en el botón Examinar "...".

Línea de tiempo de bucle

Si marca esta opción, la línea de tiempo se reproduce indefinidamente; si no marca esta opción, se detiene al llegar al final de la reproducción.

Incluir capas ocultas

Si se anula la selección de esta casilla, las capas ocultas no se incluirán en la salida.

Centrar escenario

Permite que los usuarios seleccionen si el escenario se centra horizontalmente, verticalmente o en ambos. El escenario/HTML Canvas se mostrará en el centro de la ventana del navegador de forma predeterminada.

Hacer interactivo

Permite que los usuarios seleccionen si se cambia la anchura, la altura o ambas de forma interactiva y cambia el tamaño de la salida según diversos factores de forma. El resultado es una salida interactiva compatible con HiDPI, precisa y más nítida.

La salida también se amplía para cubrir la pantalla completa sin bordes, pero mantiene la proporción original, aunque puede ser que parte de Canvas no quepa en la vista.

  • Las opciones Anchura, Altura o Ambas garantizan que todo el contenido se adapta al tamaño de Canvas y que será visible incluso cuando se visualice en una pantalla pequeña (tal como las de dispositivos móviles o tablets). Si el tamaño de la pantalla es mayor que el tamaño del escenario creado, Canvas se muestra en su tamaño original.

Ajustar para rellenar el área visible

Permite que los usuarios seleccionen si la animación se ajustará para ver la salida en modo de pantalla completa o se ampliará para ajustarse a todo el espacio disponible. De forma predeterminada, esta opción está desactivada.

Ajustar a la vista: Muestra la salida en el modo de pantalla completa con el espacio de pantalla completa pero mantiene la proporción de aspecto.

Estirar para ajustar: Estira siempre que no hay espacios de borde en la salida.

Incluir precargador:

Permite que los usuarios seleccionen si desean utilizar el precargador personalizado o elegir un precargador de la biblioteca de documentos.

El precargador es un indicador visual en forma de GIF animado que se muestra cuando los scripts y los recursos necesarios para procesar la animación se están cargando. Una vez que se han cargado los recursos, se oculta el precargador y se muestra la animación real.

De forma predeterminada, la opción de precargador no está seleccionada.

  • Opción Predeterminado para utilizar el precargador personalizado u
  • Opción Examinar para utilizar el precargador GIF de su elección. El GIF de precargador se copia en la carpeta de imágenes configuradas en Exportar recursos de imagen.
  • Utilice la opción Previsualización para previsualizar el GIF seleccionado.
Configuración de publicación

Utilice las opciones de conmutación para publicar en la raíz o en un nivel de subcarpeta. Este botón está activado de forma predeterminada. Si se desactiva, se desactiva el campo de carpeta y se exportan los recursos a la misma carpeta que el archivo de salida.

Publicación de recursos de Canvas en la carpeta raíz

Exportar documento como textura  Exporte las animaciones vectoriales como texturas para mejorar el rendimiento de las animaciones. Para obtener más información, consulte Publicación de textura.

Exportar documento como textura
Exportar documento como textura

Nota:

Esto solo es aplicable cuando la opción Combinar imágenes en una hoja de Sprite no está marcada.

Nota:

Puede elegir si desea exportar todas las imágenes importadas (incluidas las comprimidas) del documento de lienzo conservando su tamaño. Desmarque las opciones Exportar documento como textura y Combinar imágenes en una hoja de Sprite de la ficha Básico. Las imágenes se exportan sin ningún cambio de tamaño.

Exportar recursos de imagen

La carpeta en la que se colocan y los recursos de imágenes y donde se hace referencia a ellos.

Combinar en hojas de Sprite: seleccione esta opción para combinar todos los recursos de imágenes en una sola hoja de Sprite. Para ver más opciones de las hojas de Sprite, consulte Exportación de mapas de bits como hoja de Sprite.

Exportar recursos de sonido

La carpeta en la que se colocan los recursos de sonido del documento y donde se hace referencia a ellos.

Exportar recursos de CreateJS

La carpeta en la que se colocan las bibliotecas CreateJS y donde se hace referencia a ellas.

Nota:

La configuración predeterminada continúa publicando archivos segregados en subcarpetas lógicas.

Configuración avanzada

Opciones de exportación de recursos

Las direcciones URL relativas para exportar imágenes, sonidos y bibliotecas de JavaScript de CreateJS. Si la casilla de verificación situada a la derecha no está marcada, los activos no se exportarán desde el FLA, pero se seguirá usando la ruta especificada para combinar sus direcciones URL. Agiliza la publicación de un archivo FLA con muchos recursos de medios, o bien evita sobrescribir bibliotecas modificadas JavaScript.

La opción Exportar todos los mapas de bits como hojas de Sprite permite empaquetar todos los mapas de bits en el documento Canvas en una hoja de Sprite, lo que reduce la cantidad de solicitudes de servidor y mejora el rendimiento. Puede especificar el tamaño máximo de la hoja de Sprite si establece los valores de altura y anchura.

HTML/JS

Plantilla para publicar HTML:

 

Utilizar predeterminada: publique el archivo de salida HTML5 con la plantilla predeterminada.

Importar nueva: importe una nueva plantilla para su documento HTML5.

Exportar: exporte su documento HTML5 como plantilla.

Bibliotecas alojadas:

Si marca esta casilla, se utilizan copias de las bibliotecas alojadas en CreateJS CDN en code.createjs.com. Esto permite guardar en caché las bibliotecas y compartirlas entre distintos sitios.

Incluir capas ocultas:

Si se anula la selección de esta casilla, las capas ocultas no se incluirán en la salida.

Compactar formas:

Si marca esta opción, las instrucciones vectoriales se producen de forma compacta. Anule la selección para exportar instrucciones legibles y redactadas (útil con fines de aprendizaje).

Límites de múltiples fotogramas:

Si marca esta opción, los símbolos de la línea de tiempo incluyen una propiedad frameBounds con un conjunto de objetos Rectangle correspondientes a los límites de cada fotograma de la línea de tiempo. Los límites de múltiples fotogramas aumentan considerablemente el tiempo de publicación.

Sobrescribir el archivo HTML al publicar e Incluir JavaScript en el archivo HTML:

Si se ha seleccionado Incluir JavaScript en el archivo HTML, se desactiva la casilla de verificación Sobrescribir el archivo HTML al publicar. Si se desactiva la casilla de verificación Sobrescribir el archivo HTML al publicar, también se desactiva Incluir JavaScript en el archivo HTML.

  1. Haga clic en Publicar para publicar el contenido en la ubicación especificada.
Nota:

No se puede reproducir indefinidamente una animación diseñada con líneas de tiempo anidadas con un solo fotograma.

Variables de plantillas HTML

Cuando se importa una nueva plantilla HTML personalizada, durante la publicación, las variables predeterminadas se substituyen por los fragmentos de código personalizados basados en los componentes del archivo FLA. 

En la tabla siguiente se indican las variables de plantilla actuales que Animate reconoce y sustituye:

Atributo/parámetro Variable de plantilla
Título del documento HTML   $TITLE
Marcador de posición para incluir scripts de CreateJS $CREATEJS_LIBRARY_SCRIPTS
Marcador de posición para incluir scripts generados (incluidos los scripts de fuente web) $ANIMATE_CC_SCRIPTS
Etiqueta HTML para iniciar un script de lado del cliente                                                                                                               $SCRIPT_START
Marcador de posición para que el código cree el objeto loader (CreateJS LoadQueue) $CREATE_LOADER
Marcador de posición para que el código cargue recursos presentes en el manifiesto $LOAD_MANIFEST
Marcador de posición para el código que define el método para cargar los archivos $HANDLE_FILE_LOAD_START
Marcador de posición para el código de gestión de eventos de carga del archivo $HANDLE_FILE_LOAD_BODY
Marcador de posición para el código que finaliza el método para cargar los archivos $HANDLE_FILE_LOAD_END
Marcador de posición para el código que define el control de método Complete, que se invoca después de cargar los recursos $HANDLE_COMPLETE_START
Marcador de posición para el código que crea el escenario $CREATE_STAGE
Marcador de posición para el código que registra el evento de selección, después del cual se inicia la animación $START_ANIMATION
Marcador de posición para que el código sea compatible con la escala interactiva y las pantallas HiDPI $RESP_HIDPI
Marcador de posición para el código que finaliza el control del método Complete $HANDLE_COMPLETE_END
Marcador de posición para que una función gestione contenido con
sonidos                                                                            
$PLAYSOUND
Marcador de posición para que la sección de diseño admita el centrado de Canvas $CENTER_STYLE
Marcador de posición para que la propiedad de estilo de visualización de Canvas admita el precargador $CANVAS_DISP
Marcador de posición para que el código muestre el precargador $PRELOADER_DIV
Etiqueta HTML para el final del script de lado del cliente                                                                                                                $SCRIPT_END
ID del elemento Canvas                                                                                                                                                  $CANVAS_ID
La anchura del escenario o del elemento Canvas                                                                                                              $WT
La altura del escenario o del elemento Canvas                                                                                                                 $HT
Color de fondo del escenario o del elemento Canvas                                                                                          $BG
Versión de Animate que se utiliza para generar
contenido                                                                                     
$VERSION

Los símbolos siguientes de versiones anteriores no se incluyen en la versión actual:

Atributo/parámetro

Variable de plantilla

Marcador de posición para incluir scripts (CreateJS y JavaScript generado)

$CREATEJS_SCRIPTS

Marcador de posición para que el código inicialice las bibliotecas de CreateJS, cargue medios y cree y actualice el escenario

$CJS_INIT*

Nota:

Estos símbolos se han segmentado y sustituido por otros.

Compatibilidad con JSAPI para importar y exportar plantillas HTML para documentos de Canvas

Las JSAPI siguientes admiten la importación y exportación de plantillas HTML para publicaciones de Canvas:

  • Exporta la plantilla de publicación HTML5 Canvas para un documento determinado, en la ubicación especificada:

bool document::exportCanvasPublishTemplate(pathURI)

  • Ejemplo:

var pathURI ="file:///C|/Users/username/desktop/CanvasTemplate.html” 

var exportFlag =fl.getDocumentDOM().exportCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace(“No se pudo exportar la plantilla”);

  • Importa y define la plantilla de publicación de HTML5 Canvas para un documento determinado, desde el pathURI de la ubicación especificada:

bool document::importCanvasPublishTemplate(pathURI)

  • Ejemplo: 

var pathURI= “file:///C|/Users/username/desktop/CanvasTemplate.html”;

var exportFlag =fl.getDocumentDOM().importCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace(“No se pudo importar la plantilla”);

Incrustar JS en HTML

Animate permite incluir archivos de JS dentro del archivo HTML durante la publicación de Canvas.

  1. En el menú Configuración de publicación, vaya a la ficha Avanzada y seleccione Incluir JavaScript en el archivo HTML
  2. Seleccione Aceptar en el cuadro de diálogo Incluir JavaScript en el archivo HTML para volver a publicar el contenido que sobrescribe el HTML.
  3. Se desactiva la casilla de verificación Sobrescribir el archivo HTML al publicar y, durante cualquier evento de publicación, se genera HTML, pero se sobreescribe.
  4. En Dejar de incluir JavaScript en el archivo HTML, seleccione Aceptar para excluir el JavaScript y volver a publicar el archivo HTML.
  5. Si no se selecciona Sobrescribir el archivo HTML al publicar, se desactiva automáticamente la opción Incluir JavaScript en el archivo HTML.
Nota:

Si no desea que el HTML se sobrescriba, no puede elegir las opciones Sobrescribir el archivo HTML al publicar e Incrustar JS en HTML al mismo tiempo.

Combinación de JS con HTML

Adición de scripts globales y de terceros

Las animaciones suelen utilizar código JavaScript que se aplica a toda la animación. Con esta función, puede agregar scripts globales y de terceros específicos que no sean de fotograma a toda la animación en Animate. 

Para añadir y utilizar scripts globales: 

  1. Seleccione Ventana > Acciones

  2. En el panel Acciones, seleccione Script en la jerarquía Global.

    La sección Script global permite escribir scripts aplicables a los documentos de Animate o como script externo.

    Como script externo:  en la pantalla Incluir, seleccione el script específico para la inclusión, tal como se describe en la sección siguiente.

Agregar scripts de terceros

Los animadores suelen incorporar bibliotecas de JavaScript de terceros, pero tienen que modificar manualmente el código que genera Animate. Con esta función, los animadores tienen mayor flexibilidad para usar el código o las bibliotecas de JavaScript más recientes para la animación.

Para agregar scripts de terceros: 

  1. Seleccione Ventana >  Acciones

  2. En el panel Acciones, seleccione Incluir en la jerarquía Global.

  3. Haga clic en el botón + para agregar un script desde una URL alojada externamente o vaya a la biblioteca local para agregar un archivo.

    También puede cambiar el orden de los scripts en función de sus interdependencias, ya que algunos objetos dependen de otras bibliotecas ya existentes.

Combinación de datos de JSON en JS

De acuerdo con los comentarios de clientes y como los archivos de JSON son intrínsecamente inseguros, hemos combinado los datos relevantes con el archivo de JS y, por lo tanto, no se crea un archivo JSON independiente.

Optimización de las salidas de HTML5 Canvas

Animate optimiza el tamaño de las salidas y el rendimiento de HTML5 Canvas de las formas siguientes:

  • Exporta mapas de bits como hoja de Sprite utilizando las opciones de la ficha de hoja de Sprite en la configuración de publicación.
  • Excluye las capas ocultas (anulando la selección de la casilla de verificación Incluir capas ocultas) de la salida publicada.
  • Excluye todos los recursos no utilizados, como sonidos y mapas de bits, y todos los recursos en los fotogramas no utilizados (opción predeterminada).
  • Especifica que no se exporten los recursos del archivo FLA, anulando la selección de las opciones de exportación de recursos para imágenes, sonidos y bibliotecas asociadas de JavaScript de CreateJS y usando las URL relativas para exportar.
  • Salida compatible con HiDPI HTML5 Canvas: Animate escala la salida en función de la proporción de píxeles del dispositivo en el que se visualiza el contenido. Esta compatibilidad proporciona una salida más nítida con el zoom y también soluciona los problemas de pixelación de los documentos de Canvas cuando se visualiza el archivo de salida HTML Canvas en un equipo con HiDPI.
     

Configuración de un fondo de Canvas transparente

Puede personalizar Canvas para distintos colores y modificar su transparencia de visualización. Cuando crea un canvas transparente, puede ver el contenido HTML subyacente durante la publicación.

Nota: Esta configuración también hace que el fondo sea transparente durante la publicación de OAM.

  1. Seleccione el Canvas que desee modificar.
  2. En el panel Propiedades, seleccione Escenario.
  3. En Escenario, establezca los valores de porcentaje de Alfa.

Compatibilidad con muestras “sin color”

También puede utilizar la opción de muestra sin color para hacer que el fondo de Canvas sea transparente:

  1. Seleccione Modificar>Documento>Color del escenario o, en el Inspector de propiedades, seleccione Configuración avanzada.
  2. En la muestra de Color del escenario, seleccione Sin color.

 

Transparencia de Canvas

Transparencia de Canvas: Configuración avanzada

Exportación de mapas de bits como hoja de Sprite

La exportación de varios mapas de bits que haya utilizado en el documento de HTML5 Canvas como una sola hoja de Sprite reduce el número de solicitudes de servidor, reduce el tamaño de salida y mejora el rendimiento. Puede exportar la hoja de Sprite como PNG (predeterminado), JPEG o ambos.

  1. En la pestaña Hoja de Sprite, seleccione la casilla de verificación Combinar imágenes y recursos en hojas de Sprite.
  2. Seleccione el Formato como PNG, JPEG o Ambos.
  3. Si ha seleccionado PNG o Ambos, especifique las opciones siguientes en Ajustes de PNG:
    • Calidad: establezca la calidad de la hoja de Sprite en 8 (valor predeterminado), 24 o 32 bits.
    • Tamaño máximo: especifique la altura y la anchura máximas de la hoja de Sprite en píxeles.
    • Fondo: haga clic y defina el color de fondo para la hoja de Sprite.   
  4. Si ha seleccionado JPEG o Ambos, especifique las siguientes opciones en la Configuración JPEG:
    • Calidad: defina la calidad de la hoja de Sprite.
    • Tamaño máximo: especifique la altura y la anchura máximas de la hoja de Sprite, en píxeles.
    • Fondo: haga clic y defina el color de fondo para la hoja de Sprite.   

Trabajar con texto en un documento de HTML5 Canvas

HTML Canvas admite texto estático y dinámico.

Texto estático

El texto estático es una opción enriquecida en la que todos los recursos se convierten en contornos durante la publicación y ofrece una experiencia de usuario WYSIWYG. Como el texto se publica como contornos vectoriales, se puede editar en tiempo de ejecución.

Nota: Si usa demasiado texto estático, el tamaño del archivo puede aumentar considerablemente.

Texto dinámico

El texto dinámico permite modificar el texto en tiempo de ejecución y no aumenta demasiado el tamaño del archivo. Admite menos opciones que el texto estático. También admite fuentes web mediante Adobe Fonts.

Si está utilizando texto dinámico con fuentes que no están disponibles en los equipos de los usuarios finales, la salida utiliza la fuente predeterminada para la visualización y distorsiona la experiencia de usuario. Estos problemas se resuelven mediante las fuentes web.

Agregar fuentes web a su documento HTML5 Canvas

Animate ofrece fuentes web de texto dinámico en su documento HTML5 Canvas. Adobe Fonts proporciona acceso directo a miles de fuentes de calidad superior de los principales socios. Puede utilizar fuentes de Adobe Fonts y acceder a ellas sin problemas en el archivo de salida HTML5 (en navegadores modernos y en dispositivos móviles) con su suscripción a Creative Cloud.

Para obtener más información sobre el uso de las fuentes web de Adobe Fonts en Animate, consulte Usar fuentes web en documentos HTML5 Canvas.

La versión 2015.2 de Animate mejora la experiencia visual del texto dinámico en un documento de Canvas para sincronizar el aspecto del escenario y el publicado.

Nota: Las fuentes de Adobe Fonts no están disponibles para el tipo de texto estático.

Conceptos básicos de la salida de HTML5 Canvas

La salida de HTML5 publicada contiene los siguientes archivos:

Archivo HTML

Contiene las definiciones para todas las formas, los objetos y las ilustraciones dentro del elemento Canvas. También invoca el espacio de nombre CreateJS para convertir Animate en HTML5 y el archivo JavaScript correspondiente que contiene elementos interactivos. 

Archivo JavaScript

Contiene definiciones dedicadas y código para todos los elementos interactivos de la animación. En el archivo JavaScript también se define el código para todos los tipos de interpolaciones.

De forma predeterminada, estos archivos se copian en la misma ubicación que el archivo FLA. Puede cambiar la ubicación si escribe la ruta de salida en el cuadro de diálogo Configuración de publicación (Archivo > Configuración de publicación).

Migración de contenido existente a HTML5 Canvas

Puede migrar el contenido existente de Animate para generar una salida de HTML5. Para ello, Animate permite migrar el contenido de forma manual, copiando o importando capas, símbolos y otros elementos de biblioteca individuales. Si lo prefiere, puede ejecutar el comando Convertir AS3 en un documento de HTML5 Canvas para transferir automáticamente contenido existente de ActionScript a un nuevo documento de HTML5 Canvas. Para obtener más información, consulte este vínculo.

Sin embargo, cuando trabaje con el tipo de documento de HTML5 en Animate, observará que algunas funciones de Animate no son compatibles. Esto se debe a que las funciones de Animate no tienen funciones correspondientes en la API Canvas. por lo que no pueden utilizarse con el tipo de documento de HTML5 Canvas. Esto puede afectarle durante la migración de contenido, cuando intente:

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.) en el documento de HTML5. 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 un efecto Bisel degradado. Animate elimina el efecto.

Trabajar

con varios tipos de documento (por ejemplo, ActionScript 3.0 and HTML5 Canvas) 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 característica.

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

Scripts

Se eliminan componentes de ActionScript y se eliminan los comentarios del código. Asimismo, si tiene JavaScript escrito en el bloque de comentarios (para el kit de herramientas de CreateJS con Animate 13.0), deberá quitar manualmente los comentarios del código.

Por ejemplo, si ha copiado capas que contienen botones, se eliminará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 HTML5 Canvas.

Se elimina el contenido

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

  • Se eliminarán las transformaciones 3D
  • Se quitarán los comentarios del código ActionScript
  • Se eliminarán vídeos

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:

  • No se admite el modo de mezcla de superposición, se cambia a Normal.
  • La línea de puntos no se admite, se cambia a Sólido.

Para obtener una lista completa de las funciones que no se admiten y las sustituciones durante la migración, consulte este artículo.

Convertir otros tipos de documentos a documentos de HTML5 Canvas

El convertidor de tipo de documento universal permite convertir sus proyectos existentes de FLA (de cualquier tipo) en cualquier otro tipo de documento como HTML5 Canvas, ActionScript/AIR, WebGL o un tipo de documento personalizado. Cuando se convierte a un formato, pueden aprovecharse las funciones de creación de Animate para ese tipo de documento. 

Para obtener más información, consulte Conversión a otros formatos de documento

Convertir un archivo ActionScript 3 a un documento de HTML5 Canvas mediante el script JSFL

Animate proporciona un script JSFL para convertir un archivo AS3 a un documento de HTML5 Canvas. Cuando se ejecuta, el script JSFL realiza lo siguiente:

  • Crea un nuevo documento de HTML5 Canvas.
  • Copia todas las capas, los símbolos y los elementos de biblioteca al nuevo documento de HTML5 Canvas.
  • Aplica valores predeterminados a las funciones, subfunciones y a las propiedades de las funciones que no se admiten.
  • Crea archivos FLA independientes para cada escena, porque el documento de HTML5 Canvas no admite varias escenas.
Para convertir un documento de AS3 a HTML5 Canvas, haga lo siguiente:
  1. Abra el documento de ActionScript 3 en Animate.
  2. Seleccione Comandos > Convertir AS3 en un documento de HTML5 Canvas.

Páginas relacionadas

Logotipo de Adobe

Inicia sesión en tu cuenta