Guía del usuario Cancelar

Adición de interactividad con fragmentos de código en Animate

  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

 

El panel Fragmentos de código está diseñado para facilitar a los usuarios que no sean programadores su familiarización con ActionScript 3.0 y JavaScript. Permite añadir código al archivo FLA para agregar funcionalidades comunes. Para utilizar el panel Fragmentos de código no es necesario tener ningún conocimiento de ActionScript 3.0 ni JavaScript.

En el panel Fragmentos de código puede hacer lo siguiente:

  • Añadir código que afecte al comportamiento de un objeto en el escenario

  • Añadir código que controle el movimiento de la cabeza lectora en la línea de tiempo

  • (Solo CS5.5) - Añadir código que permite al usuario interacción táctil

  • Añadir nuevos fragmentos de código creados en el panel

Los fragmentos de código incluidos en Animate también ayudan a familiarizarse rápidamente con ActionScript 3.0 o JavaScript. Al observar el código de los fragmentos y los ajustes descritos en sus instrucciones, el usuario empieza a comprender mejor la estructura del código y el vocabulario.

Opción de fragmentos de código en Animate
Opción de fragmentos de código en Animate

Antes de comenzar

Cuando se trabaja con el panel Fragmentos de código es importante entender los siguientes conceptos de Animate:

  • Muchos de los fragmentos de código requieren la personalización de algunos elementos del código. En Animate, esto puede hacerse desde el panel Acciones. Cada fragmento de código contiene instrucciones específicas para esta tarea.

  • Todos los fragmentos de código incluidos son de JavaScript o ActionScript 3.0.

  • Algunos fragmentos de código afectan al comportamiento de un objeto y permiten que se pueda hacer clic en él para moverlo o hacerlo desaparecer. Estos fragmentos de código se aplican al objeto del escenario.

  • Algunos fragmentos desencadenan la acción inmediatamente cuando la cabeza lectora entra en el fotograma que contiene el fragmento. Estos fragmentos de código se aplican al fotograma de la línea de tiempo.

  • Cuando se aplica un fragmento de código, el código se agrega al fotograma actual de la capa Acciones de la línea de tiempo. Si no ha creado una capa Acciones propia, Animate añade una sobre todas las posteriores en la línea de tiempo.

  • Para que ActionScript controle un objeto en el escenario, el objeto debe tener un nombre de instancia asignado en el inspector de propiedades.

  • Puede hacer clic en los botones Mostrar descripción y Mostrar código que aparecen al seleccionar un fragmento de código en el panel.

Cómo añadir un fragmento de código a un objeto o fotograma de la línea de tiempo

Para añadir una acción que afecte a un objeto o a la cabeza lectora:

  1. Seleccione un objeto del escenario o un fotograma de la línea de tiempo.

    Si selecciona un objeto que no es una instancia de símbolo, Animate convierte el objeto en símbolo de clip de película cuando se aplica el fragmento de código.

    Si selecciona un objeto que aún no tiene nombre de instancia, Animate la añade al aplicar el fragmento de código.

  2. En el panel Fragmentos de código (Ventana > Fragmentos de código), haga doble clic en el fragmento de código que quiera aplicar.

    Si selecciona un objeto del escenario, Animate añade el fragmento de código al panel Acciones en los fotogramas que contienen el objeto seleccionado.

    Si selecciona un fotograma de la línea de tiempo, Animate añade el fragmento de código solo a dicho fotograma.

  3. En el panel Acciones, puede ver el código nuevo añadido y reemplazar los elementos necesarios según las instrucciones indicadas en la parte superior del fragmento.

Fragmento de código en el panel de acciones

Cómo añadir nuevos fragmentos al panel Fragmentos de código

Puede añadir nuevos fragmentos de código al panel Fragmentos de código de dos formas:

  • Añada un fragmento en el cuadro de diálogo Crear nuevo fragmento de código.

  • Importar un archivo XML de fragmento de código.

Para utilizar el cuadro de diálogo Crear nuevo fragmento de código:

  1. En el panel Fragmentos de código, seleccione Crear nuevo fragmento de código en el menú del panel.

  2. En el cuadro de diálogo, introduzca el título, el texto de información de herramienta y el código JavaScript o ActionScript 3.0 del fragmento.

    Puede añadir cualquier código seleccionado actualmente en el panel Acciones haciendo clic en el botón Autocompletar.

  3. Seleccione la casilla de verificación Remplazar automáticamente nombre_instancia_aquí si el código incluye la cadena “nombre_instancia_aquí” y quiere que Animate lo reemplace por el nombre de instancia correcto cuando se aplique el fragmento de código.

    Animate añade el nuevo fragmento al panel Fragmentos de código en una carpeta llamada Personalizado.

Para importar un fragmento de código en formato XML:

  1. En el panel Fragmentos de código, elija Importar archivo XML de fragmentos de código en el menú del panel.

  2. Seleccione el archivo XML que quiera importar y haga clic en Abrir

Para ver el formato XML correcto para los fragmentos de código, elija Editar archivo XML de fragmentos de código en el menú del panel.

Para eliminar un fragmento de código, haga clic con el botón derecho en el fragmento en el panel y seleccione Eliminar fragmento de código en el menú contextual.

Animaciones interactivas con HTML5

Algunas animaciones requieren fragmentos de código para admitir varias plataformas de publicación. ¿Desea aprender a utilizar fragmentos de código para hacer que sus animaciones sean interactivas? Consulte el tutorial al final de este ejemplo y siga estos pasos.

  1. En Biblioteca, haga clic en Configuración de publicación.

  2. Seleccione JavaScript/HTML.

  3. En la pestaña HTML/JS , haga clic en exportar y elija las opciones siguientes:

    • Nombre de archivo: escriba el nombre del archivo.
    • Guardar como tipo: seleccione HTML.
  4. Haga clic en Aceptar.

Cómo mejorar sus animaciones interactivas de HTML5

Vea el vídeo para obtener información sobre cómo editar los códigos.

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

¿Nuevo usuario?