Biblioteca de CreateJS
- Guía del usuario de Adobe Animate
- Introducción a Animate
- Animación
- Aspectos básicos de animaciones en Animate
- Cómo utilizar los fotogramas y fotogramas clave en Animate
- Animación fotograma a fotograma en Animate
- Cómo trabajar con la animación de interpolación clásica en Animate
- Herramienta Pincel
- Guía de movimiento
- Interpolación de movimiento y ActionScript 3.0
- Acerca de la animación de interpolación de movimiento
- Animaciones de interpolación de movimiento
- Creación de una animación de interpolación de movimiento
- Uso de fotogramas clave de propiedad
- Animación de la posición con una interpolación
- Edición de interpolaciones de movimiento con el editor de movimiento
- Edición del trazado de movimiento de una animación de interpolación
- Manipulación de las interpolaciones de movimiento
- Adición de aceleraciones personalizadas
- Creación y aplicación de ajustes preestablecidos de movimiento
- Configuración de grupos de interpolación de animación
- Uso de interpolaciones de movimiento guardadas como archivos XML
- Interpolaciones de movimiento e interpolaciones clásicas
- Interpolación de forma
- Uso de la animación de la herramienta Hueso en Animate
- Trabajar con el rigging de personajes en Animate
- Uso de las capas de máscara en Adobe Animate
- Uso de escenas en Animate
- Interactividad
- Creación de botones en Animate
- Conversión de proyectos de Animate a otros formatos de documento
- Creación y publicación de documentos de HTML5 Canvas en Animate
- Adición de interactividad con fragmentos de código en Animate
- Creación de componentes HTML5 personalizados
- Uso de componentes en HTML5 Canvas
- Creación de componentes personalizados: Ejemplos
- Fragmentos de código para componentes personalizados
- Prácticas recomendadas - Publicidad con Animate
- Autoría y publicación de realidad virtual
- Espacio de trabajo y flujo de trabajo
- Creación y administración de pinceles
- Uso de Google Fonts en documentos HTML5 Canvas
- Utilización de las Bibliotecas Creative Cloud y Adobe Animate
- Utilización del Escenario y el panel Herramientas en Animate
- Flujo de trabajo y espacio de trabajo de Animate
- Uso de las fuentes web en documentos de HTML5 Canvas
- Líneas de tiempo y ActionScript
- Trabajo con varias líneas de tiempo
- Configuración de preferencias
- Utilización de los paneles de edición de Animate
- Creación de capas de la línea de tiempo en Animate
- Exportación de animaciones para aplicaciones móviles y motores de juegos
- Desplazamiento y copia de objetos
- Plantillas
- Buscar y reemplazar en Animate
- Deshacer y rehacer en el panel Historial
- Métodos abreviados de teclado
- Uso de la Cronología en Animate
- Creación de extensiones HTML
- Opciones de optimización para Imágenes y archivos GIF animados
- Configuración de exportación de imágenes y archivos GIF
- Panel de Recursos en Animate
- Multimedia y vídeo
- Transformación y combinación de objetos gráficos en Animate
- Crear y trabajar con instancias de símbolo en Animate
- Calco de imagen
- Cómo utilizar el sonido en Adobe Animate
- Exportación de archivos SVG
- Creación de archivos de vídeo para su uso en Animate
- Cómo añadir un vídeo a Animate
- Dibujo y creación de objetos en Animate
- Remodelado de líneas y formas
- Trazos, rellenos y degradados en Animate CC
- Uso de Adobe Premiere Pro y After Effects
- Paneles de color en Animate CC
- Apertura de archivos de Flash CS6 con Animate
- Uso de texto clásico en Animate
- Colocación de ilustraciones en Animate
- Mapas de bits importados en Animate
- Gráficos 3D
- Trabajo con símbolos en Animate
- Dibujo de líneas y formas en Adobe Animate
- Uso de bibliotecas en Animate
- Exportación de sonidos
- Selección de objetos en Animate CC
- Trabajo con archivos AI de Illustrator en Animate
- Aplicación de modos de mezcla
- Organización de objetos
- Automatización de tareas con el menú Comandos
- Texto en varios idiomas
- Utilización de la cámara en Animate
- Filtros de gráficos
- Sonido y ActionScript
- Preferencias de dibujo
- Dibujo con la herramienta Pluma
- Plataformas
- Conversión de proyectos de Animate a otros formatos de documento
- Compatibilidad con plataformas personalizadas
- Creación y publicación de documentos de HTML5 Canvas en Animate
- Creación y publicación de un documento de WebGL
- Empaquetado de aplicaciones para AIR para iOS
- Publicación de aplicaciones de AIR for Android
- Publicación para Adobe AIR para escritorio
- Configuración de publicaciones de ActionScript
- Prácticas recomendadas - Organización de ActionScript en una aplicación
- Uso de ActionScript con Animate
- Accesibilidad en el espacio de trabajo de Animate
- Cómo escribir y gestionar scripts
- Activación de la compatibilidad con plataformas personalizadas
- Información general sobre compatibilidad con plataformas personalizadas
- Uso de plugins de compatibilidad con plataformas personalizadas
- Depuración de ActionScript 3.0
- Activación de la compatibilidad con plataformas personalizadas
- Exportación y publicación
- Exportación de archivos de Animate CC
- Publicación de OAM
- Exportación de archivos SVG
- Exportación de gráficos y vídeos con Animate
- Publicar documentos de AS3
- Exportación de animaciones para aplicaciones móviles y motores de juegos
- Exportación de sonidos
- Prácticas recomendadas - Sugerencias para crear contenido para dispositivos móviles
- Prácticas recomendadas - Convenciones de vídeo
- Prácticas recomendadas - Directrices de edición de aplicaciones SWF
- Prácticas recomendadas - Estructuración de archivos FLA
- Prácticas recomendadas de optimización de archivos FLA para Animate
- Configuración de publicaciones de ActionScript
- Especificación de configuración de publicación para Animate
- Exportación de archivos de proyector
- Exportar imágenes y archivos GIF animados
- Plantillas de publicación HTML
- Uso de Adobe Premiere Pro y After Effects
- Compartir y publicar animaciones rápidamente
- Solución de problemas
¿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:
- 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.
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.
Puede añadir interactividad a formas u objetos en el escenario mediante JavaScript. Puede añadir JavaScript a fotogramas y fotogramas clave individuales.
- Seleccione el fotograma al que quiera añadir JavaScript.
- 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
|
Documentación de API |
Ejemplos de código en Github |
EaselJS |
||
TweenJS |
||
SoundJS |
||
PreloadJS |
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.
-
En las propiedades, introduzca el nombre de la instancia.
-
Haga clic en la ventana y seleccione Acción.
-
En el fotograma actual, seleccione Agregar utilizando el asistente.
Cómo hacer que su contenido sea interactivo con HTML5
Publicación de animaciones en HTML5
Para publicar contenido del escenario en HTML5, haga lo siguiente:
- Seleccione Archivo > Configuración de publicación.
- En el cuadro de diálogo Configuración de publicación, especifique las opciones siguientes:
Configuración básica
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.
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.
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.
Esto solo es aplicable cuando la opción Combinar imágenes en una hoja de Sprite no está marcada.
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.
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.
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.
- Haga clic en Publicar para publicar el contenido en la ubicación especificada.
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* |
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.
- En el menú Configuración de publicación, vaya a la ficha Avanzada y seleccione Incluir JavaScript en el archivo HTML.
- Seleccione Aceptar en el cuadro de diálogo Incluir JavaScript en el archivo HTML para volver a publicar el contenido que sobrescribe el HTML.
- 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.
- En Dejar de incluir JavaScript en el archivo HTML, seleccione Aceptar para excluir el JavaScript y volver a publicar el archivo HTML.
- Si no se selecciona Sobrescribir el archivo HTML al publicar, se desactiva automáticamente la opción Incluir JavaScript en el archivo HTML.
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.
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:
-
Seleccione Ventana > Acciones
-
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:
-
Seleccione Ventana > Acciones
-
En el panel Acciones, seleccione Incluir en la jerarquía Global.
-
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.
- Seleccione el Canvas que desee modificar.
- En el panel Propiedades, seleccione Escenario.
- 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:
- Seleccione Modificar>Documento>Color del escenario o, en el Inspector de propiedades, seleccione Configuración avanzada.
- En la muestra de Color del escenario, seleccione Sin color.
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.
- En la pestaña Hoja de Sprite, seleccione la casilla de verificación Combinar imágenes y recursos en hojas de Sprite.
- Seleccione el Formato como PNG, JPEG o Ambos.
- 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.
- 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.
- Abra el documento de ActionScript 3 en Animate.
- Seleccione Comandos > Convertir AS3 en un documento de HTML5 Canvas.
Esto solo es aplicable cuando la opción Combinar imágenes en una hoja de Sprite no está marcada.