Nota:

  Typekit se llama ahora Adobe Fonts y viene incluido con Creative Cloud y otras suscripciones. Más información.

¿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 CC 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 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.

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

Code_Aspects
(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 CC. 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

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

publish-settings-basics

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.

Publish settings
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.

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

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 hojas de Sprite, consulte Exportar mapas de bits como hojas 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

publish_settings_output

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.

JSEmbed23
Export-spritesheets
Publish_Settings_JavaScript_Namespaces

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

Mering Json
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

    actions-add-script
  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.

Adición de scripts de terceros

Los animadores suelen incorporar bibliotecas de JavaScript de terceros, pero tienen que modificar manualmente el código que genera Animate CC. 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.

    actions-include

    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.

 

canvas tranperancy_final
Transparencia de Canvas

advanced_settings
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.   
sprite-sheet
Export-spritesheets-1

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.

Static-text

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

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.

Añadir fuentes web de Typekit a su documento HTML5 Canvas

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.

Para obtener más información sobre el uso de las fuentes de Typekit en Animate CC, consulte Uso de fuentes web de Typekit 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 web de Typekit 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 CC, 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 CC 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 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 CC 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

Conversión de ActionScript 3 a un documento de HTML5 Canvas mediante el script JSFL

Animate CC 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 CC.
  2. Seleccione Comandos > Convertir AS3 en un documento de HTML5 Canvas.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea