Exportación de archivos SVG

  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

¿Qué es SVG?

SVG (gráficos vectoriales escalables) es un lenguaje de formato XML para describir imágenes bidimensionales. Los archivos SVG ofrecen gráficos HiDPI en un formato compacto, independientes de la resolución, para su uso en Internet y en dispositivos móviles y para su impresión. Puede diseñar SVG con CSS y su compatibilidad con scripts y animaciones hacen de SVG una parte integral de la plataforma web.

Algunos formatos de imagen comunes en Internet, como GIF, JPEG, y PNG son muy grandes y tienen una resolución muy baja. El formato SVG es más eficaz ya que describe imágenes en términos de formas vectoriales, texto y efectos de filtro. Los archivos SVG son compactos y ofrecen gráficos de alta calidad en Internet y en dispositivos portátiles con restricciones de recursos. Se puede aumentar la vista de una imagen SVG en la pantalla sin perder enfoque, detalle o claridad. Además, el formato SVG ofrece mejor compatibilidad con texto y colores, lo que garantiza que las imágenes se verán tal y como aparecen en el escenario. El formato SVG está totalmente basado en XML y ofrece muchas ventajas tanto para desarrolladores como para otros usuarios.

Nota:

Ahora puede exportar archivos SVG de Animate sin que se creen definiciones ni identificadores no deseados en el proceso. La composición en SVG está mejorada en la versión 19.1 de Animate. Esta opción de exportación aumentará la calidad de los archivos SVG que se importen en Character Animator.

Flujo de trabajo de exportación a SVG en Animate

Animate permite exportar contenido al formato SVG (versión 1.1). Puede crear ilustraciones enriquecidas con las eficaces herramientas de diseño disponibles en Animate y, a continuación, exportarlas a SVG.

En Animate, puede exportar los fotogramas y fotogramas clave seleccionados de una animación. Asimismo, como las imágenes exportadas son vectoriales, la resolución de imagen es superior incluso si se escala a diferentes tamaños.

La función de exportación a SVG sustituye a la anterior función de exportación a FXG (eliminada de Animate enjunio de 2013). Observará que el rendimiento de la función de exportación a SVG y la calidad de la salida son muy superiores. Asimismo, en comparación con FXG, la pérdida de contenido en SVG es mínima.

Ilustración con efectos de filtro

Con SVG, los efectos de filtro no se mostrarán exactamente igual que en Animate, ya que no hay una asignación equivalente entre los filtros disponibles en Animate y SVG. Sin embargo, Animate aprovecha las combinaciones de diferentes filtros simples disponibles en SVG para simular un efecto parecido.

Control de varios símbolos

La exportación de SVG puede controlar varios símbolos sin problemas ni pérdida de contenido. El resultado es similar a la ilustración en el escenario en Animate.

Exportación de ilustraciones en formato SVG

  1. En Animate, es posible arrastrar o mover la cabeza lectora hasta el fotograma que desee.
  2. Seleccione Archivo > Exportar > Exportar imagen. O bien seleccione Archivo > Configuración de publicación (opción Imagen SVG de la sección Otros formatos.)
  3. Introduzca o acceda hasta la ubicación en la que quiera guardar el archivo SVG. Asegúrese de que selecciona SVG en Guardar como.
  4. Haga clic en Aceptar.
  5. En el diálogo Exportar SVG, elija Incorporar o Vincular al archivo SVG.
    • Incluir capas ocultas: exporta todas las capas ocultas del documento de Animate. Si se anula la selección de Exportar capas ocultas se evita que todas las capas (incluidas las anidadas dentro de clips de película) marcadas como ocultas se exporten en el archivo SVG resultante. De esta forma puede probar distintas versiones de documentos de Animate con capas invisibles.
    • Incorporar: incorpora un mapa de bits en el archivo SVG. Utilice esta opción si desea incorporar mapas de bits directamente en el archivo SVG.
    • Vincular: proporciona un vínculo a la ruta de los archivos de mapa de bits. Utilice esta opción si no desea incorporar, sino proporcionar un vínculo a los mapas de bits del archivo SVG. Si selecciona la opción Copiar imágenes en la carpeta, los mapas de bits se guardarán en la carpeta Imágenes creada en la ubicación donde se exporta el archivo SVG. Cuando no se selecciona la opción Copiar imágenes en la carpeta, se hace referencia a los mapas de bits en el archivo SVG desde su ubicación original. Si la ubicación del mapa de bits de origen no está disponible, se incorporarán en el archivo SVG.
    • Copiar imágenes en la carpeta /Imágenes: permite copiar el mapa de bits en la carpeta/Imágenes. Si todavía no existe la carpeta /Imágenes se crea en la ubicación de exportación del SVG.
    • Optimize for Character Animator (Optimizar para Character Animator): permite exportar SVG que funciona bien con Character Animator.

  1. Haga clic en Aceptar.
Nota:

El formato SVG no admite algunas funciones de Animate. Durante la exportación, el contenido creado mediante estas funciones se eliminará o se cambiará de forma predeterminada a una función admitida. Para obtener más información, consulte este artículo.

Si lo prefiere, puede utilizar el cuadro de diálogo Configuración de publicación para exportar archivos SVG desde Animate (Archivo > Configuración de publicación). Seleccione la opción SVG de la sección Otros formatos para exportar archivos SVG.

Nota:

Se recomienda visualizar los archivos SVG únicamente en navegadores modernos con las últimas actualizaciones. Esto se debe a que algunos filtros gráficos y efectos de color no se procesarán correctamente en versiones anteriores de navegadores como Internet Explorer 9.

Intercambio de archivos SVG con Adobe Illustrator

Animate permite el intercambio de contenido con Adobe Illustrator. Este flujo de trabajo sustituye a la función de exportación de FXG que se eliminó en Animate (13.0). Puede exportar archivos SVG desde Animate e importarlos en Adobe Illustrator. Para obtener más información sobre el uso de archivos SVG en Adobe Illustrator, consulte este tema de la ayuda.

Utilice este flujo de trabajo si desea realizar ediciones granulares en las ilustraciones y añadir detalles enriquecidos. También puede utilizar Illustrator para añadir efectos, como sombras, a la ilustración.

Para editar archivos SVG en Adobe Illustrator y usar el contenido editado en Animate, haga lo siguiente:

  1. En Animate, exporte a SVG.
  2. Abra el archivo SVG en Adobe Illustrator para editar la ilustración.
  3. Guarde el archivo SVG como un archivo .ai e impórtelo en Animate. Para obtener más información sobre el uso de archivos de Illustrator en Animate.

Logotipo de Adobe

Inicia sesión en tu cuenta