Creación de componentes HTML5 personalizados

  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

En este artículo le enseñamos a crear componentes personalizados para HTML5 Canvas.

Animate se suministra con un conjunto de componentes predeterminados. Sin embargo, estos son insuficientes para su proyecto. Este tema le ayudará a comprender cómo crear componentes HTML5 personalizados para Animate.

Una definición de componente consta de tres partes principales:

  • Metadatos: proporciona información sobre el componente, como el nombre para mostrar, la versión, el conjunto de propiedades configurables, el icono, etcétera. Esto se captura en un archivo llamado components.js. Puede agrupar los componentes como categoría y este archivo le permite proporcionar los metadatos para todos los componentes en una categoría.
  • Origen: Proporciona información sobre el origen real del componente. Esto se incrusta en el motor de ejecución cuando se previsualiza o se publica una película mediante componentes.
  • Recursos: Aporta información sobre cualquier dependencia del motor de ejecución, por ejemplo, la biblioteca JavaScript o CSS o los elementos de tiempo de ejecución y los iconos. Los recursos se pueden utilizar en el entorno de edición de Animate.
Nota:

Una definición de componente también tiene recursos relacionados con la localización.

Configuración de la carpeta de muestra para una categoría de componentes personalizados

Animate comprueba las siguientes carpetas en busca de cualquier componente de HTML5 personalizado y lo carga al inicio:

• Windows:

<AppData>/Local/Adobe/Adobe Animate 2017/en_US/Configuration/HTML5Components

 

• MAC:

~/Library/Application Support/Adobe/Animate 2017/en_US/Configuration/HTML5Components/

Nota:

La ruta de carpeta anterior se aplica a inglés de Estados Unidos. Si usa Animate en otro idioma, sustituya en_US por su idioma para buscar el nombre de carpeta específico.

Animate crea una categoría y carga todos los componentes dentro de cada carpeta de la ubicación que contiene el archivo "components.js".

Metadatos de componente

Los metadatos de Componente están incluidos en un archivo llamado components.js que se coloca en una carpeta independiente dentro del directorio HTML5Components

Metadatos de ejemplo para un componente de vídeo.

Components.js

Components.js

es un archivo JSON que contiene las siguientes secciones:

  • Categoría: nombre del panel Componentes para este conjunto de componentes y que se puede localizar.
  • Componentes: conjunto donde cada entrada contiene los metadatos sobre un componente. El ejemplo anterior solo tiene un elemento en el conjunto. Los metadatos tienen las secciones siguientes:

Nombre

Obligatorio

Descripción

ClassName

Nombre de clase del componente especificado en el archivo de origen. El nombre de la clase admite un nivel de espacios de nombres. Por ejemplo, vídeo.

 

Versión

No

Número de versión del componente. Se utiliza para las actualizaciones futuras de los componentes. Sin embargo, el flujo no está definido en este momento.

Fuente

Ruta relativa del archivo de origen principal del componente. En la siguiente sección se proporcionan más detalles sobre el contenido del origen.

Icono

No

Ruta relativa para el icono para el componente. Este icono se utiliza en el panel de componentes y en el escenario al crear una instancia para el componente junto con su nombre. Si no se proporciona ninguno, se utiliza un icono predeterminado.

Puede especificar el nombre del icono png que va a cargarse (normalmente 32x32). O bien, si desea admitir distintos iconos para una interfaz de usuario clara o una interfaz de usuario oscura, entonces debe proporcionar los dos .png con la siguiente convención de asignación de nombres:

custom_icon_N.png – Icono para interfaz de usuario oscura

custom_icon_D.png – Icono para interfaz de usuario clara

y especifique el nombre 'custom_icon' como el valor para este campo. Los sufijos se añaden automáticamente en función de los ajustes actuales del usuario.

Dimensiones

No

Tamaño predeterminado de las instancias del componente. Siempre que el usuario arrastre y suelte un componente del panel Componentes al escenario, se crea una instancia nueva. Este campo especifica el tamaño inicial predeterminado para la instancia de componente. El valor debe ser un conjunto [anchura, altura]. Si no hay ningún valor especificado, entonces, Animate detecta un tamaño predeterminado. Además, Animate también restringe el tamaño en el rango entre [2,2] a [1000, 1000].

Dependencias

No

El conjunto de dependencias para el componente. Se trata de un conjunto donde cada entrada proporciona la ruta relativa de un origen local (con clave = “src”) y la ruta de la CDN (con clave = "cdn"). La ruta de CDN normalmente no es obligatoria. Esta ruta se utiliza cuando se usan bibliotecas alojadas en la configuración de publicación. De lo contrario, para la vista previa o la publicación, se utiliza el origen local.

Observe la ruta relativa utilizada en el ejemplo anterior (vídeo). Carga las dependencias de un nivel superior, lo cual permite compartir algunas dependencias en múltiples conjuntos de componentes.

Propiedades

Este es un conjunto de propiedades. Cuando cree una instancia de este componente en el escenario, el conjunto de propiedades que se configure aquí se mostrará automáticamente en el inspector de propiedades. Los usuarios de este componente pueden configurar estas propiedades en Animate. Asimismo, las propiedades configuradas estarán disponibles durante la creación del componente en tiempo de ejecución.

Cada entrada de la propiedad contiene las siguientes claves:

  1. nombre: el nombre que se muestra en el Inspector de propiedades para esta propiedad. Debe ser un nombre descriptivo. Este se puede localizar.
  2. variable: nombre interno utilizado para esta propiedad. Los valores configurados estarán disponibles con este nombre de variable en tiempo de ejecución. En secciones posteriores podrá encontrar más información sobre esto.
  3. Tipo: especifica el tipo de propiedad. Animate permite los siguientes tipos:
    1. Booleano: casilla de verificación en el inspector de propiedades
    2. Número: cuadro numérico en el inspector de propiedades
    3. Cadena: cuadro de texto en el inspector de propiedades
    4. Lista: permite al usuario configurar una matriz de valores.
    5. Colección: permite que los usuarios configuren una lista de pares <clave, valor>. (Consulte el cuadro combinado)
    6. Ruta de archivo: permite que el usuario busque y seleccione cualquier archivo local. El valor de cadena se indica en tiempo de ejecución. El archivo se copia automáticamente en la salida publicada en la carpeta "assets" y la ruta relativa pasa a estar disponible en tiempo de ejecución.
    7. Ruta de imagen: permite al usuario buscar y seleccionar una imagen. El archivo se copia automáticamente en la salida publicada en la carpeta de imágenes configuradas. A continuación, la ruta relativa pasa a estar disponible en tiempo de ejecución.
    8. Ruta de contenido de vídeo: permite al usuario buscar y seleccionar cualquier origen de vídeo en el formato web (mp4, ogg , ogv , webm ). El activo configurado se copia a la carpeta "videos" en la salida publicada.
    9. Color - selector de color en el Inspector de propiedades
  4. Predeterminado: valor predeterminado de la propiedad. El valor predeterminado debe ser del mismo tipo que el de la propiedad.

Origen del componente

Cada componente debe disponer de un archivo de origen asociado con código para gestionar lo siguiente:

  • Creación de la instancia de componente en tiempo de ejecución con un conjunto configurado de valores de propiedad
  • Asociar o desasociar al DOM.
  • Actualizaciones de la propiedad en cada fotograma

Se proporciona una clase base y una función de utilidad en el archivo anwidget.js para facilitar el desarrollo de componentes personalizados. Esta interfaz se incrementará en el futuro, pero será compatible con versiones anteriores. Actualmente, solo son compatibles los componentes basados en DOM; sin embargo, se ampliará la compatibilidad con componentes basados en Canvas. Actualmente solo son compatibles los widgets; sin embargo, se mejorará el marco para la compatibilidad con comportamientos de adición (componentes distintos a la interfaz de usuario).

El archivo anwidget.js está presente en la carpeta HTML5Components/sdk de la carpeta que se ejecutó por primera vez. Proporciona una clase base AnWidget para componentes personalizados y un método de utilidad $.anwidget (<className>, {prototipo de objeto}) para registrar un componente personalizado. La implementación actual utiliza jQuery, por lo que siempre se añade jQuery como una dependencia siempre que utilice los servicios ofrecidos por un widget. Sin embargo, si no desea agregar una dependencia implícita en jQuery, puede que tenga que implementar una clase de componente sin jQuery que proporcione la misma interfaz que un widget.

 

Plantilla HTML

El HTML contiene las siguientes secciones (excepto el div de precargador) de forma predeterminada:

Secciones del código HTML predeterminado (excepto el div de precargador)

Tenga en cuenta que la figura anterior muestra el orden en que los elementos se añaden en el DOM. Por tanto, sobre el lienzo se muestra el dom_overlay_container div.

Nota:

No cambie la identificación del dom_overlay_container div como en nuestra primera versión, hay un par de funciones que dependen de esta identificación como fragmentos de código.

Como se muestra en la ilustración anterior, el dom_overlay_container div se muestra encima del lienzo como superposición. Para asegurarse de que los eventos de ratón también se hayan propagado correctamente al lienzo subyacente, se utiliza la propiedad CSS {pointer-events: none} para este div para que los eventos de ratón se propaguen al lienzo subyacente. Todas las instancias de componentes que se configuran en Animate en el proyecto se crean y se asocian como elemento secundario de este div dom_overlay_container. El orden relativo de las instancias de componente se mantiene en el tiempo de ejecución, aunque actualmente todas las instancias de componente se muestran como superposición. Se ha establecido {pointer.events: all} para todas las instancias de componente en tiempo de ejecución para que también reciban los eventos de ratón.

Ciclo de vida del componente

Ciclo de vida del componente

  1. Se crea la instancia de componente cuando se construye DOM para el contenedor.

  2. A continuación, la instancia se asocia al DOM cuando la cabeza lectora alcanza el fotograma en el que se utiliza la instancia de componente. Entonces, asocia un controlador de actualización al cual se llama en cada marca en tiempo de ejecución. El componente también activa un evento ‘adjunto’ en este momento con los siguientes datos de evento {id: id_of_the_instance} en el elemento principal.

  3. Se actualizan las propiedades en cada llamada de actualización. Todas las actualizaciones de la propiedad se almacenan en caché y se aplican de forma instantánea durante un controlador de marca. Actualmente no se admiten las interpolaciones de propiedades personalizadas. Solo se actualizan las propiedades básicas, como la transformación y la visibilidad.

  4. Cuando el cabezal de reproducción llega a un fotograma en el que se elimina la instancia de componente por completo, se separa del DOM. Un evento “separado” se activa en este momento en el elemento principal.

La clase base se denomina $.AnWidget e incluye los cambios siguientes:

Nombre

Obligatorio

Descripción

getCreateOptions()

No

Devuelve cualquier opción que el componente se desee aplicar durante la creación del componente. Una anulación típica normalmente utiliza esto para asignar una identificación única para cada instancia utilizando la variable _widgetID. El ejemplo en la siguiente sección, aclara su uso.

getCreateString()

Devuelve la cadena para la creación de la instancia DOM. Esta cadena se transfiere al programa de jQuery para crear el elemento DOM en sí el cual se adjunta posteriormente al DOM base.

 

Por ejemplo, para un componente de imagen debe devolver el “<image>”.

 

En tiempo de ejecución se crea el elemento y la referencia a un contenedor de jQuery se almacena de la forma siguiente en la instancia de componente:

 

this._element =  $(this.getCreateElement())

 

// this._element – contenedor jQuery para el elemento DOM creado subyacente.

 

También podemos crear elementos compuestos; se abordarán en más detalle en una sección de ejemplos.

getProperties()

No

Devuelve un conjunto de nombres de propiedades CSS configurables. Normalmente, este coincide con todas las propiedades configuradas en components.json

 

Por ejemplo, para el componente de vídeo este conjunto contiene las siguientes entradas:

 

["left", "top", "width", "height", "position", "transform-origin", "transform"]

getAttributes()

No

Devuelve un conjunto de atributos configurables. Normalmente, este coincide con todos los atributos que le permiten configurar components.json

 

Por ejemplo, para el componente de vídeo este conjunto contiene las siguientes entradas:

 

["id", "src", "controls", "autoplay", "loop", "class"]

attach(parent)

No

Se llama a esta función cada vez que la instancia de componente está a punto de ser adjuntada al elemento DOM "parent".

 

La implementación predeterminada realiza lo siguiente (y más cosas):

 

// Añade el elemento al DOM principal

$(parent).append(this._elemento);

 

//Almacena la ref en this._$this

this._$this = $(this._elemento);

 

//Llama a la actualización forzada para aplicar todas las propiedades

this.update(true);

this._attached = true;

 

//Activa el evento asociado al elemento principal

$(parent).trigger("attached", this.getEventData("attached"))

 

No es necesario anular esta función. Sin embargo, para los elementos compuestos, es posible que deba anularse. En la sección de ejemplos se explican en más detalle.

 

Nota: Puede utilizar this._superApply(arguments) para llamar a cualquier método de la clase base de cualquier anulación.

detach()

No

Se llama a esta función cada vez que la instancia de componente está a punto de eliminarse del DOM. La implementación predeterminada hace lo siguiente:

 

//Elimina el elemento del DOM

this._$this.remove();

//Activa el evento por separado en el elemento principal

$(parent).trigger("detached", this.getEventData("detached"));

setProperty(k,v)

No

Esta función se utiliza para definir cualquier propiedad para la instancia. Estos cambios se almacenan en caché y se aplican de una sola vez durante la llamada para actualizar con update() cada fotograma de cada propiedad que esté sucio.

update(force)

No

Se llama a esta función en cada fotograma cuando el componente forma parte del DOM y está visible. La implementación predeterminada aplica todas las propiedades CSS y los atributos que se han modificado o si el parámetro de fuerza es verdadero.

show()

No

Muestra la instancia del elemento. No suele ser necesario anular eso, pero es posible que sea necesario para elementos compuestos.

hide()

No

Oculta la instancia del elemento. No suele ser necesario anular eso, pero es posible que sea necesario para elementos compuestos.

getEventData(e)

No

Devuelve cualquier dato personalizado para el evento con el nombre 'e'. La implementación predeterminada pasa los datos {id: instance_id} para los eventos asociados o desasociados.

destroy()

No

Libera la memoria cuando la instancia del componente se separa de DOM. No suele ser necesario anular this.

applyProperties(e)

No

Asistente API para aplicar propiedades CSS para el envolvente de jQuery e.

applyAttributes(e)

No

Asistente API para aplicar los atributos para el envolvente de jQuery e.

Localización

La cadena de categoría, el nombre de visualización del componente y el nombre de la propiedad pueden ser localizados. Cree un archivo denominado strings.json en una carpeta con el nombre regional en la carpeta de componentes. Introduzca los pares de valor clave para que todas las cadenas puedan localizarse y se pueda utilizar la clave en components.js. Para otras configuraciones regionales, debe proporcionar las cadenas en las carpetas correspondientes en la carpeta local.

cadena .json

Empaquete y distribuya componentes HTML5 personalizados

Los desarrolladores y los diseñadores de Animate pueden permitir que los animadores instalen y utilicen componentes sin codificación, con componentes empaquetados listos para usar. Anteriormente, los animadores tenían que aprender estructuras de archivos, hacer programación y mover manualmente los archivos a carpetas concretas para activar las extensiones HTML5.

Requisitos previos

Antes de empaquetar un componente, cree un archivo MXI con los metadatos de la ruta de componentes de origen y de destino. Por ejemplo,

<file source="jquery-ui-1.12.0" destination="$FLASH\HTML5Components\jQueryUI\" file-type="ordinary" />

Esta información del archivo de origen y de destino es necesaria para activar la utilidad de extensiones para la instalación precisa del componente.

Componentes de empaquetado

Para empaquetar los componentes HTML5 personalizados, realice los pasos siguientes: 

  1. Para crear un archivo MXI, introduzca un contenido similar al del archivo de ejemplo abc.mxi  utilizando un editor de texto y guárdelo con la extensión MXI .

    Descargar

  2. Añada el componente MXII y otros archivos asociados en una carpeta.

  3. Cree un archivo .zip con la extensión ZXP usando la herramienta CC signing (ZXPSignCmd.exe). Utilice los comandos siguientes en la herramienta ZXP Sign Command para crear un archivo ZXP:

    1. Cree un certificado con firma automática usando la opción -selfSignedCert.

    Este paso se puede omitir si ya dispone de un certificado.

    ZXPSignCmd -selfSignedCert US NY MyCompany MyCommonName password FileName.p12

    El archivo FileName.p12 se genera en la carpeta actual.

    2. Inicie la extensión con el siguiente comando: 

    ZXPSignCmd -sign projectName projectName.zxp FileName.p12 password

    projectName es el nombre del proyecto de la extensión. En la carpeta actual se genera un archivo con el nombre projectName.zxp.

Componentes de distribución

Puede distribuir este archivo de componentes empaquetados projectName.zxp a cualquier usuario de Animate.

Nota:

Adobe recomienda que distribuya sus productos a través del sitio web Adobe Add-ons. Puede distribuir complementos públicamente (gratis o de pago) o de forma privada (disponible para los usuarios indicados). Obtenga más información acerca de cómo compartir productos de forma privada.

Instalación de componentes distribuidos

Los diseñadores o desarrolladores de Animate pueden instalar el componente del archivo ZXP distribuido usando la utilidad Gestionar extensiones.

Para obtener más información, consulte Instalación de componentes compartidos.

Logotipo de Adobe

Inicia sesión en tu cuenta