Guía del usuario Cancelar

Creación de componentes personalizados: Ejemplos

  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

Utilice este artículo para entender un componente personalizado de HTML5 de muestra.

Este artículo describe cómo crear componentes personalizados. El primer ejemplo describe el componente de imagen (que también se suministra con Animate CC) y el proceso para entender el marco y los pasos involucrados en el desarrollo. El segundo ejemplo explica cómo insertar cualquier componente de la interfaz de usuario (UI, como jQueryUI) e importarlos en Animate CC.

  1. Creación de un componente de imagen de DOM

    Creación de una categoría denominada “Mis componentes”. 

    a. Cree una carpeta denominada miscomponentes en la carpeta <HTML5Components> al ejecutar la aplicación por primera vez.

    b. Descargue el archivo adjunto myimage.zip y extraiga el contenido en la

    carpeta miscomponentes.

    Descargar

    c. Reinicie Animate.

Estructura del directorio de la carpeta miscomponentes
Estructura del directorio de la carpeta miscomponentes

Ahora debería poder ver una nueva categoría llamada “Mis componentes” en la carpeta de componentes y un nuevo componente denominado Mi imagen debajo. Puede arrastrarlo y soltarlo en el escenario, definir la propiedad de origen de la imagen y publicar la película para ver el componente personalizado en acción. 

Metadatos de componente: components.js

Código de Components.js
Components.js

Tenga en cuenta que la categoría está establecida en CATEGORY_MY_COMPONENTS. Los nombres de cada una de las propiedades también utilizan teclas similares. Esta es la tecla para la cadena localizada del nombre de la categoría. Si abre strings.json desde la carpeta local, verá las siguientes entradas.

Nota:

El error más común al editar este archivo es dejar una coma final innecesaria en el último elemento de la matriz.

Detalles de la categoría
Detalles de la categoría

El valor del campo de icono está establecido en Sp_Image_Sm. Si va a la carpeta de recursos, en ella verá los dos siguientes png con el prefijo Sp_Image_Sm.

Valor del campo icono
Valor del campo icono

Estos son los iconos para interfaz de usuario clara y oscura.

El valor del campo 'origen' en components.json, está establecido en 'src/myimage.js'. 

(function($) {    

// Register a component with the className: my.Image,
 // and prototype with the following overrides 
 // getCreateOptions
 // getCreateString
 // getProperties
 // getAttributes
    $.anwidget("my.Image", {
         options: {
   'visible': true,
   'position': 'absolute'
         },
  _props: ["left", "top", "width", "height", "position", "transform-origin", "transform"],
  
_attrs: ["id", "src", "alt", "class", "border"],
  
// Return a unique ID with the prefix image
  // _widgetID is a global declared in anwidget
  // This id is used only if the user has not set any instance ID for the component in Animate CC
  // Otherwise the user configured name is used
  getCreateOptions: function() {
   return $.extend(this.options, { 'id': "image" + _widgetID++ });
  },
  
// Return the string for creating the DOM element
  // For image we just need to create the <img> tag
  getCreateString: function() {
   return "<img>";
  },
  
// Set of configurable properties
  getProperties: function() {
   return this._props;
  },
  
// Set of configurable attributes
  getAttributes: function() {
   return this._attrs;
  }    
 });   
})(jQuery);

Puede seguir los comentarios del código para comprenderlo con facilidad. 

No dude en mirar el origen de los demás componentes que se proporcionan con Animate. En la mayoría de los casos, puede utilizar uno de ellos como punto de partida y luego configurarlo según sus propios requisitos.

Ajuste de un componente de jQuery-UI

Esta sección explica cómo ajustar un widget de jQuery-UI y utilizarlo en Animate CC. Los mismos conceptos se pueden utilizar para ajustar cualquier otro componente que se encuentre en otro marco de la interfaz de usuario.

Veamos el componente empaquetado del selector de fecha con Animate CC, que es un widget de jQuery-UI. Descargue y extraiga el contenido del siguiente archivo y utilícelo como referencia.

Descargar

Estructura del contenido extraído
Estructura del contenido extraído

La carpeta llamada jquery-ui-1.12.0 es el origen del marco de jQuery UI y contiene el widget DatePicker original y sus recursos, como imágenes y css, para ajustarlos y utilizarlos en Animate CC, al igual que cualquier otro componente de HTML5. Esto solo es necesario para la previsualización local; cuando se utiliza “Bibliotecas alojadas” en la configuración de publicación, existe la opción de utilizar una cdn para descargar los recursos dependientes. 

Código de Components.js
Components.js

Existen dos dependencias predeterminadas, jQuery y anwidget.js. Puesto que anwidget.js no se encuentra en CDN, no existe ninguna entrada de CDN para el mismo.

El siguiente conjunto de entradas es para los otros recursos necesarios para cargar el widget Datepicker de jQuery ui. Si se ajusta un widget de cualquier otra biblioteca, se puede especificar el conjunto de dependencias para el mismo de forma similar. Estas dependencias se descargan antes de que se inicialice el componente.

En la sección de propiedades, únicamente hemos expuesto una propiedad denominada etiqueta, que está vinculada a la propiedad de la etiqueta del componente selector de fecha. Del mismo modo, también se pueden mostrar las demás propiedades, lo que se desee que el usuario pueda configurar en el entorno de edición de Animate. En tiempo de ejecución, cada una de ellas estará disponible como un par clave-valor en el conjunto de options para la instancia. Se puede extraer el valor configurado y aplicarlo en tiempo de ejecución.

Archivo de origen principal: src/datepicker.js.
Archivo de origen principal: src/datepicker.js.

Secciones que difieren del ejemplo

  1. getCreateString:

    El widget Datepicker de jQuery-UI toma este elemento de introducción de texto y lo convierte en un elemento de selección de fecha en tiempo de ejecución. Por lo tanto, se inicializa el DOM en consecuencia.

  2. attach:

    Es necesario anular esta función para este widget. Siempre que se vincula un elemento al DOM, se llama a esta API. Sin embargo, debido a la forma en la que funciona el tiempo de ejecución subyacente (en este caso createjs), se puede llamar varias veces a esta API durante un mismo grupo de fotogramas.

    Se recuerda el estado asociado al elemento subyacente y, a continuación, se llama a la API adjunta de la clase base (mediante this._superApply(argumentos)). Si es la primera vez que se adjunta el elemento al DOM de elemento principal, se utiliza la llamada del widget jQuery-UI subyacente para convertir el DOM del componente a un selector de fecha. Consulte: https://jqueryui.com/datepicker/

    La mayor parte de los widgets de Javascript funcionan de manera similar. Se puede utilizar la misma técnica para ajustar cualquier componente elegido e importarlo en Animate CC de la misma manera.

  3. Actualización: Se anula la actualización y se aplican las propiedades css al contenedor div y los atributos al elemento DOM real.

    Nota:

    Cuando se anulan API como attach, detach o update, se debe evaluar la implementación predeterminada de la clase base y llamar a la implementación base en el momento adecuado. En caso contrario la inicialización del componente puede fallar.

Logotipo de Adobe

Inicia sesión en tu cuenta