Guía del usuario Cancelar

Uso de componentes en HTML5 Canvas

Buscar
Animate

Animate

Abrir aplicación
  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. 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
  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. 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
  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. 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
  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. 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
  9. Solución de problemas
    1. Problemas solucionados
    2. Problemas conocidos

 

Utilice este artículo para obtener más información sobre cómo utilizar los componentes personalizables.

El componente proporciona una función o un grupo de componentes personalizables y reutilizables relacionados, con el fin de mejorar la productividad para los creadores de publicidad. Anteriormente, Animate admitía componentes Flash que se utilizaban con objetivos basados en Flash. A partir de esta versión, Animate es compatible con HTML5 Canvas. 

  1. Seleccione Archivo > Nuevo.

    Elija Avanzado entre las pestañas en la parte superior de la pantalla, en el cuadro de diálogo Nuevo documento y, a continuación, seleccione la opción HTML5 Canvas.

    Nuevo documento
    HTML5 Canvas

  2. Seleccione Ventana > Componentes.

    Componentes predeterminados

  3. Seleccione Componentes > Vídeo. Arrastre y suelte los componentes asociados al lienzo. 

  4. Seleccione la Instancia del componente de vídeo en el escenario y consulte y modifique los parámetros en el inspector de propiedades. El parámetro Origen permite seleccionar el archivo de vídeo desde una ubicación local o proporcionar cualquier URL para reproducir el vídeo (formatos .mp4, .ogg, .ogv o .webm). 

    Arrastre y suelte los componentes

  5. Seleccione “Coincidir con dimensiones de origen” para que el tamaño del reproductor de vídeo se ajuste a las dimensiones del vídeo de entrada. Esta característica solo funciona con vídeos mp4. Para otros tipos de vídeo, ajuste el tamaño de la instancia de vídeo manualmente en el escenario para asegurarse de que la relación de aspecto sigue siendo la misma.

  6. Pulse Ctrl+Intro (CMD+Intro en Mac) para previsualizar la película. El vídeo se reproducirá en el navegador predeterminado. Puesto que los controles son visibles de forma predeterminada, podrá verlos cuando pase el ratón por encima del vídeo en un navegador.

    Se puede seguir el mismo procedimiento para utilizar otros componentes.

    Salida del componente de previsualización

 Los componentes se añaden al documento HTML como elementos DOM, así que debe consultar los fragmentos de código Componente (Fragmentos de código > Lienzo HTML5 > Componentes) para añadir interactividad a los componentes.

Adición de interactividad a los componentes con fragmentos de código

  1. Seleccione Ventana > Componentes.

  2. Para añadir interactividad a los componentes, seleccione el panel Ventana > Fragmentos de código. Puede ver la asignación de los diferentes comportamientos de los componentes disponibles.

  3. En la pantalla Fragmentos de código, seleccione HTML5 Canvas > Componentes.

    Fragmentos de código predeterminados

  4. En función del componente seleccionado, haga doble clic en el fragmento de código correspondiente para mostrar el fragmento de código en el panel Acciones. Para obtener más información sobre la adición de interactividad en los fragmentos de código, consulte Cómo añadir interactividad mediante fragmentos de código en Animate. 

Ejemplo

Utilice el ejemplo siguiente para aprender a utilizar los fragmentos de código cuando se controla la reproducción del vídeo mediante código.

  1. Seleccione la instancia de vídeo en el escenario y desactive la función Reproducción automática en el inspector de propiedades. 

  2. Haga doble clic en el componente Botón dos veces en el panel Componentes para crear dos instancias en el escenario y colocar los botones. También puede arrastrarlos y soltarlos directamente desde el panel Componentes al escenario.

    Colocar los botones

  3. Seleccione la instancia del primer botón y cambie la etiqueta por Reproducir en el inspector de propiedades, y la del segundo botón por Detener. 

  4. Abra el panel Fragmentos de código haciendo clic en Ventana > Fragmentos de código. Vaya a HTML5 Canvas > Componentes y expanda la sección Interfaz de usuario. 

  5. Seleccione el botón Reproducir en el escenario, haga doble clic en el evento de clic de botón en panel Fragmentos de código y haga clic en Aceptar. Animate asigna un nombre de instancia al botón seleccionado. Podrá ver el código recién añadido en el panel Acciones.

    Adición de fragmentos de código

  6. Seleccione el vídeo en el escenario y expanda la sección Vídeo en Fragmentos de código. Haga doble clic en Reproducir un vídeo. El código necesario para reproducir el vídeo se añade al panel Acciones.

    Código añadido al panel Acciones

  7. Para reproducir el vídeo cuando se hace clic en el botón, sitúe ese código entre la sección <Start your custom code> y <End your custom code>. 

    Mover el código dentro de las etiquetas

  8. Para añadir un código para detener el vídeo, seleccione el botón de pausa, asigne el nuevo controlador de clic en el botón y añada el código para detener el vídeo.

  9. Previsualice la película. Haga clic en el botón de reproducción para reproducir el vídeo y, a continuación, haga clic en el botón Pausa para detener el vídeo. 

 Puede ver el atributo className de cada componente en el Inspector de propiedades. Utilice estos nombres de clase para aplicar aspectos a los componentes con CSS. Utilice el componente de CSS para cargar su CSS personalizada. El componente CSS permite seleccionar cualquier archivo CSS local que se incluya en la película.

Componentes de HTML5 interesantes

Añadir interactividad a su contenido es interesante e incluye numerosas funciones con componentes HTML 5. ¿Desea aprender a utilizar estos componentes de HTML5 en Animate? Consulte el tutorial al final de este ejemplo y siga estos pasos.

  1. Haga clic en Ventanas y seleccione Componentes .

  2. Expanda la carpeta Vídeos, haga clic en el icono vídeo y arrástrelo hasta el escenario.

  3. En Propiedades, expanda la pestaña Posición y tamaño y configure los valores necesarios.

Cómo mejorar las composiciones de Animate con componentes HTML5

Vea el vídeo para obtener más información sobre cómo incluir más componentes en su composición.

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 Instalar extensiones.

Requisito previo

Instalación de componentes

Para instalar componentes distribuidos puede realizar los pasos siguientes: 

  1. Haga doble clic en el archivo ManageExtensions.exe. Se mostrará el cuadro de diálogo Gestionar extensiones.

  2. Haga clic en Instalar una extensión y seleccione la extensión (archivo .zxp) que quiera instalar. Para obtener más información, consulte Instalar extensiones.

  3. Para ver los componentes instalados en Animate, haga clic en Ventana > Componente. Se mostrará el cuadro de diálogo Componentes. 

  4. Haga clic en el icono de hamburguesa situado en el extremo superior derecho y haga clic en Volver a cargar componentes.

Más productos similares

 Adobe

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
Adobe MAX 2024

Adobe MAX
La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Regístrate ahora

Adobe MAX

La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Regístrate ahora
Adobe MAX 2024

Adobe MAX
La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Regístrate ahora

Adobe MAX

La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Regístrate ahora

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