Alpha Code Labs | Video Tutoriales y Aplicaciones M&oacuteviles

Crear y publicar un documento HTML5 Canvas

Animate CC permite crear documentos de HTML5 Canvas con ilustraciones enriquecidas, gráficos, animaciones, etc. Se 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. Podrá crear documentos 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 CC está integrado con CreateJS, lo que habilita contenido interactivo enriquecido en tecnologías de web abierta mediante HTML5. Animate CC 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.

Crear un documento de HTML5 Canvas

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

  1. En la pantalla de bienvenida de Animate CC, 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.

  2. Pinceles Vectoriales
  3. Si lo prefiere, seleccione Archivo > Nuevo para mostrar el cuadro de diálogo Nuevo documento. Haga clic en la opción HTML5 Canvas.

  4. Pinceles Vectoriales

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.

Agregar interactividad a un documento de HTML5 Canvas

Animate CC 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 código JavaScript se puede escribir directamente en el panel Acciones con sugerencias de código para insertar y editar rápidamente y sin errores código JavaScript. También hay funciones de resaltado de la sintaxis con diferentes fuentes o colores ayudándole a distinguir visualmente los códigos correctos y los errores de sintaxis.

Muestras etiquetadas

Fragmentos de código JavaScript

Puede añadir interactividad mediante fragmentos de código JavaScript disponibles en Animate CC. Para acceder a los fragmentos de código y utilizarlos, seleccione Ventana > Fragmentos de código.

También se puede acceder a los fragmentos de código seleccionando Fragmentos de código, que se ubica en la parte superior derecha de la ventana de Acciones.

Rotación del escenario

Publicar animaciones en HTML5

    La salida de HTML5 publicada contiene dos tipos de archivos uno HTML5 y otro JavaScript. Estos archivos se guardan de forma predeterminada en la misma ubicación que el archivo FLA.

  1. Puede publicar las animaciones en HTML5 con las opciones predeterminadas: Seleccione Archivo > Publicar.

  2. Papel cebolla mejorado

  3. Si prefiere, puede publicar el contenido seleccionando las opciones de configuración que necesite: Seleccione Archivo > Configuracón de publicación. A continuación le detallamos las opciones de configuración.

  4. Exportar vídeo

Opciones de configuración Básicas

Para seleccionar las opciones de configuración HTML primero debe seleccionar a la izquierda, en las opciones de PUBLICAR, la casilla: JavaScript/HTML.

Las opciones de configuración básicas son las siguientes:

Exportar vídeo

  1. Archivo de salida: Es el directorio donde se guardara la publicación, por defecto se asigna el directorio donde se encuentra el archivo FLA. Pero puede cambiar esta ubicación seleccionando Examinar Exportar vídeo .


  2. Sobrescribir el archivo HTML al publicar: Si desactiva esta casilla, el archivo HTML no se generará y se sobrescribirá el existente.


  3. Reproducir 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.


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


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


  6. Combinar en hojas de Sprite: Seleccione esta opción para combinar todos los recursos de imágenes en una sola hoja de Sprite.


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


  8. Exportar recursos de CreateJS: La carpeta en la que se colocan las bibliotecas CreateJS y donde se hace referencia a ellas.


Utilizar predeterminada: utilice la plantilla predeterminada para generar el archivo envolvente de HTML al publicar.

Importar nueva: importe una plantilla personalizada basada en la que se crea al publicar el archivo envolvente de HTML.

Exportar: exporte la plantilla actual utilizada para la publicación.

Configuración avanzada

Las configuraciones de publicación avanzadas son las siguientes:

Exportar vídeo

  1. Plantilla para publicar HTML: Puede seleccionar la plantilla predeterminada o importar una nueva plantilla.


    • Utilizar predeterminada: Seleccione esta opción para publicar el archivo de salida HTML5 con la plantilla predeterminada.


    • Importar nueva: Importe una nueva plantilla nueva para su documento HTML5.


    • Exportar: Exporte su documento HTML5 como plantilla.


  2. 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.


  3. 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).


  4. 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.


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. También puede establecer el tamaño, la calidad y el color de fondo de la hoja de Sprite.

Exportar vídeo

Fuentes Web

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

URL del sitio: Especifique una lista de direcciones URL separadas por comas. Las fuentes Typekit utilizadas en el documento se vincularan a estas URL.

Delimitador de objetos de dibujo mejorado

Aquí te dejamos el video tutorial para Crear y publicar un documento HTML5 Canvas.