Guía del usuario Cancelar

Creación de extensiones HTML

Buscar
Animate

Animate

Abrir aplicación
  • Guía del usuario de Adobe 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
    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. Cómo trabajar con 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
    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
  • 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
    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. Dibujo y creación de objetos en Animate
    9. Remodelado de líneas y formas
    10. Trazos, rellenos y degradados en Animate CC
    11. Uso de Adobe Premiere Pro y After Effects
    12. Paneles de color en Animate CC
    13. Apertura de archivos de Flash CS6 con Animate
    14. Uso de texto clásico en Animate
    15. Colocación de ilustraciones en Animate
    16. Mapas de bits importados en Animate
    17. Gráficos 3D
    18. Trabajo con símbolos en Animate
    19. Dibujo de líneas y formas en Adobe Animate
    20. Uso de bibliotecas en Animate
    21. Exportación de sonidos
    22. Selección de objetos en Animate CC
    23. Trabajo con archivos AI de Illustrator en Animate
    24. Aplicación de modos de mezcla
    25. Organización de objetos
    26. Automatización de tareas con el menú Comandos
    27. Texto en varios idiomas
    28. Utilización de la cámara en Animate
    29. Filtros de gráficos
    30. Sonido y ActionScript
    31. Preferencias de dibujo
    32. Dibujo con la herramienta Pluma
    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. Accesibilidad en el espacio de trabajo de Animate
    12. Cómo escribir y gestionar scripts
    13. Activación de la compatibilidad con plataformas personalizadas
    14. Información general sobre compatibilidad con plataformas personalizadas
    15. Uso de plugins de compatibilidad con plataformas personalizadas
    16. Depuración de ActionScript 3.0
    17. Activación de la compatibilidad con plataformas personalizadas
    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. Prácticas recomendadas - Sugerencias para crear contenido para dispositivos móviles
    9. Prácticas recomendadas - Convenciones de vídeo
    10. Prácticas recomendadas - Directrices de edición de aplicaciones SWF
    11. Prácticas recomendadas - Estructuración de archivos FLA
    12. Prácticas recomendadas de optimización de archivos FLA para Animate
    13. Configuración de publicaciones de ActionScript
    14. Especificación de configuración de publicación para Animate
    15. Exportación de archivos de proyector
    16. Exportar imágenes y archivos GIF animados
    17. Plantillas de publicación HTML
    18. Uso de Adobe Premiere Pro y After Effects
    19. Compartir y publicar animaciones rápidamente
    1. Problemas solucionados
    2. Problemas conocidos
    1. Guía del usuario de Adobe 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
      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. Cómo trabajar con 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
      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
      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. Dibujo y creación de objetos en Animate
      9. Remodelado de líneas y formas
      10. Trazos, rellenos y degradados en Animate CC
      11. Uso de Adobe Premiere Pro y After Effects
      12. Paneles de color en Animate CC
      13. Apertura de archivos de Flash CS6 con Animate
      14. Uso de texto clásico en Animate
      15. Colocación de ilustraciones en Animate
      16. Mapas de bits importados en Animate
      17. Gráficos 3D
      18. Trabajo con símbolos en Animate
      19. Dibujo de líneas y formas en Adobe Animate
      20. Uso de bibliotecas en Animate
      21. Exportación de sonidos
      22. Selección de objetos en Animate CC
      23. Trabajo con archivos AI de Illustrator en Animate
      24. Aplicación de modos de mezcla
      25. Organización de objetos
      26. Automatización de tareas con el menú Comandos
      27. Texto en varios idiomas
      28. Utilización de la cámara en Animate
      29. Filtros de gráficos
      30. Sonido y ActionScript
      31. Preferencias de dibujo
      32. Dibujo con la herramienta Pluma
      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. Accesibilidad en el espacio de trabajo de Animate
      12. Cómo escribir y gestionar scripts
      13. Activación de la compatibilidad con plataformas personalizadas
      14. Información general sobre compatibilidad con plataformas personalizadas
      15. Uso de plugins de compatibilidad con plataformas personalizadas
      16. Depuración de ActionScript 3.0
      17. Activación de la compatibilidad con plataformas personalizadas
      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. Prácticas recomendadas - Sugerencias para crear contenido para dispositivos móviles
      9. Prácticas recomendadas - Convenciones de vídeo
      10. Prácticas recomendadas - Directrices de edición de aplicaciones SWF
      11. Prácticas recomendadas - Estructuración de archivos FLA
      12. Prácticas recomendadas de optimización de archivos FLA para Animate
      13. Configuración de publicaciones de ActionScript
      14. Especificación de configuración de publicación para Animate
      15. Exportación de archivos de proyector
      16. Exportar imágenes y archivos GIF animados
      17. Plantillas de publicación HTML
      18. Uso de Adobe Premiere Pro y After Effects
      19. Compartir y publicar animaciones rápidamente
      1. Problemas solucionados
      2. Problemas conocidos

     

    Animate puede ampliarse con extensiones HTML. Adobe Extension Builder 3 permite crear extensiones HTML para Animate Anteriormente, solo se podía ampliar Animate con extensiones SWF. Sin embargo, Adobe Extension Builder 3 permite crear extensiones HTML para aplicaciones de Creative Cloud. Para comenzar, debe descargar e instalar Eclipse y Extension Builder 3.0.

    Creación de una extensión HTML

    Para crear una extensión HTML, haga lo siguiente.

    1. Inicie Eclipse. 
    2. En el New Project wizard (Asistente de nuevo proyecto), cree un nuevo Application Extension Project (Proyecto de extensión de aplicación). Proporcione un nombre significativo para el proyecto y haga clic en Next (Siguiente).
    3. En el panel New Adobe Application Extension Project (Nuevo proyecto de extensión de aplicación de Adobe), elija Adobe Animate. Haga clic en Siguiente.
    4. Configure la extensión con las opciones disponibles:
      1. Bundle ID (ID de paquete) identifica la extensión.
      2. Menu name (Nombre de menú) es el nombre de la extensión. Menu Name aparece en el menú Ventana > Extensiones de Animate.
      3. Window Details (Detalles de la ventana) utilice estas opciones para personalizar el tipo y tamaño de la ventana de la extensión.

        Haga clic en Next (Siguiente).
    5. Puede personalizar las bibliotecas de referencia para la extensión en las próximas pantallas:
      1. CEP Interface Library (Biblioteca de interfaz de CEP) ofrece funciones para interactuar con la aplicación host. De forma predeterminada, esta opción está seleccionada.
      2. Frameworks (Arquitecturas) se aplica a bibliotecas comunes de JavaScript como jQuery.
      3. Services (Servicios) incluye el Adobe IPC Communication Toolkit (Kit de herramientas Adobe IPC Communication Toolkit), que permite la comunicación entre aplicaciones de Adobe, extensiones y aplicaciones externas. Proporciona un protocolo de mensajería mediante CEP Service Manager, que actúa como núcleo para las comunicaciones de Creative Cloud.

        Haga clic en Finish (Finalizar) para crear un nuevo proyecto de Eclipse.

    Eliminar errores de su extensión en Animate 

    Puede ejecutar la extensión directamente desde Eclipse:

    1. Haga clic en el proyecto, y seleccione Run As (Ejecutar como) > Adobe Flash Extension (Extensión de Adobe Flash). Esto inicia Animate.
    2. En Animate, seleccione el elemento de menú Ventana > Extensiones. Se abrirá el panel Extensión.

    Exportación de la extensión

    Para distribuir una extensión, deberá exportarla como un paquete ZXP. El paquete ZXP se descarga y ejecuta mediante Adobe Extension Manager en aplicaciones de Creative Cloud:

    1. En Eclipse, cambie a la vista Script Explorer (Explorador de scripts) para poder hacer clic con el botón secundario en el proyecto y seleccionar Export (Exportar) > Adobe Extension Builder 3 > Application Extension (Extensión de aplicación). Se mostrará el Export Wizard (Asistente de exportación).
    2. Debe tener un certificado para firmar el paquete de la extensión. Busque un certificado existente o haga clic en Create (Crear) para crear uno nuevo.
    3. Haga clic en Finish (Finalizar).
    4. Cuando finalice la exportación, encontrará el paquete ZXP para la extensión en la carpeta del proyecto, listo para su distribución.

    Nota: Para instalarlo necesitará acceder al archivo <extensión>\.staged-extension\CSXS\manifest.xml y actualizar la etiqueta host para definir la versión mínima de Animate en 13.0.

    Instalar su extensión en Animate 

    Puede instalar extensiones HTML en Animate con Adobe Extension Manager. Las extensiones HTML le ayudarán a ampliar las funciones y capacidades de Animate.

    Adición de interactividad a las extensiones HTML

    Puede crear una extensión HTML para interactuar con Animate si añade controles, define comportamientos y proporciona información sobre el entorno de host (incluye Animate y el sistema operativo). Esto se puede realizar de dos formas:

    1. Con la biblioteca de interfaz de CEP: La biblioteca de interfaz de CEP proporciona a las API información sobre el entorno de host y un script eval que permite ejecutar JSFL. Para obtener más información sobre la biblioteca de interfaz de CEP, abra Help (Ayuda) > Help Contents (Ayuda de contenido) > Adobe Extension Builder > References (Referencias) en Eclipse.
    2. Con JSFL: Los scripts JSFL se pueden ejecutar con la API del script eval de la biblioteca de interfaz de CEP.

      Además de los scripts JSFL, la infraestructura de CEP en Animate también muestra los siguientes eventos que solo pueden utilizarse dentro de los paneles HTML.
      • com.adobe.events.flash.documentChanged se activa debido a un cambio en el documento activo actual.
      • com.adobe.events.flash.timelineChanged se activa al realizar un cambio en la línea de tiempo del documento activo actual.
      • com.adobe.events.flash.documentSaved se activa al guardar el documento actual.
      • com.adobe.events.flash.documentOpened se activa al abrir un documento nuevo.
      • com.adobe.events.flash.documentClosed se activa al cerrar el documento activo actual.
      • com.adobe.events.flash.documentNew se activa al crear un documento nuevo.
      • com.adobe.events.flash.layerChanged se activa al seleccionar una capa distinta.
      • com.adobe.events.flash.frameChanged se activa al seleccionar un fotograma distinto.
      • com.adobe.events.flash.selectionChanged se activa al seleccionar un objeto distinto en el escenario.
      • com.adobe.events.flash.mouseMove se activa al mover el ratón por el escenario.

    Ejemplo

    csinterface.addEventListener(&quot;com.adobe.events.flash.selectionChanged&quot;, CallbackFunction)
    csinterface.addEventListener(&quot;com.adobe.events.flash.selectionChanged&quot;, CallbackFunction)
    csinterface.addEventListener(&quot;com.adobe.events.flash.selectionChanged&quot;, CallbackFunction)

    En el fragmento de código anterior:

    • csinterface: Objeto de la biblioteca de interfaz de CEP.
    • com.adobe.events.flash.selectionChanged: Evento que activa un cambio en la selección de un objeto. También puede utilizar cualquiera de los eventos anteriores.
    • CallbackFunction: Método que detecta el evento activado.

    Obtén ayuda de forma más rápida y sencilla

    ¿Nuevo usuario?

    Vínculos rápidos

    Ver todos los planes Administrar los planes
    Ver vínculos rápidos
    Ocultar vínculos rápidos

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