Creación de Contenido Alternativo y Preloader en Adobe Animate Parte 15
Objetivo de Aprendizaje:
Al finalizar esta
guía, el usuario será capaz de utilizar las herramientas de Adobe Animate para
crear contenido alternativo (down-level stage) y un preloader, asegurando que
los usuarios con navegadores antiguos o conexiones lentas tengan una experiencia
óptima. Además, aprenderá a optimizar el flujo de trabajo mediante el uso de
atajos de teclado y técnicas avanzadas de configuración.
Introducción a
Adobe Animate
Adobe Animate es una
herramienta esencial para la creación de animaciones interactivas y dinámicas.
En esta guía, nos enfocaremos en crear contenido alternativo para navegadores
antiguos (como IE7 e IE8) y configurar un preloader para mejorar la experiencia
del usuario durante la carga de la animación.
Pasos para Utilizar
Adobe Animate
1. Creación de
un Poster para Navegadores Antiguos
- Selección del Escenario Principal: Haz clic en el Stage (escenario
principal) para que el panel de Propiedades muestre las
opciones del escenario.
- Uso de la Función Poster: En el panel de Propiedades,
busca la opción Poster. Esta función permite crear una captura
de pantalla (snapshot) del escenario en un momento específico.
- Posicionamiento del Playhead: Lleva el playhead al
final de la línea de tiempo, donde toda la infografía está en su lugar.
- Captura del Poster: Haz clic en el ícono de la cámara junto
a la opción Poster y selecciona Capture Current
State. Esto generará un archivo poster.png en el directorio
de imágenes, que servirá como contenido alternativo.
2. Configuración
del Down-Level Stage
- Edición del Down-Level Stage: Haz clic en Down-Level Stage
> Edit. Esta sección permite crear contenido que los navegadores
antiguos (como IE7 e IE8) mostrarán si no son compatibles con las técnicas
avanzadas de animación.
- Inserción del Poster: En el Down-Level Stage,
selecciona Insert > Poster. Esto insertará la imagen poster.png en
el escenario alternativo.
- Ajustes Adicionales: Asegúrate de que el contenido
alternativo sea claro y representativo de la animación principal.
3. Configuración
del Preloader
- Edición del Preloader: Dirígete a Preloader > Edit.
Esta sección permite configurar una pantalla de carga que los usuarios
verán mientras se carga la animación.
- Inserción de la Animación de Preloader: En el panel de Library,
arrastra la animación de preloader al centro del escenario.
- Ajuste del Color de Fondo: Si es necesario, ajusta el color de
fondo (matte color) en Photoshop para que coincida con el fondo de la
página HTML donde se incrustará la animación.
4. Previsualización
y Ajustes Finales
- Regreso al Escenario Principal: Una vez configurados el Down-Level
Stage y el Preloader, regresa al escenario principal
para realizar ajustes finales.
- Previsualización del Proyecto: Utiliza la opción Preview in
Browser (atajo: Ctrl + Enter en Windows / Cmd +
Enter en Mac) para ver cómo se comporta la animación, el preloader y
el contenido alternativo.
5. Preparación
para la Publicación
- Opciones de Publicación: El siguiente paso será configurar las
opciones de publicación para exportar el proyecto en el formato adecuado.
Comandos Rápidos
(Atajos de Teclado)
- Capturar Poster: Clic en el ícono de la cámara en el
panel de Propiedades.
- Previsualizar en Navegador: Ctrl + Enter (Windows) / Cmd
+ Enter (Mac).
- Seleccionar Herramienta de Selección: V
- Guardar Archivo: Ctrl + S (Windows) / Cmd
+ S (Mac).
Definiciones
Técnicas
- Poster: Captura de pantalla estática que se muestra como contenido
alternativo en navegadores antiguos.
- Down-Level Stage: Escenario alternativo que se muestra en
navegadores que no soportan técnicas avanzadas de animación.
- Preloader: Pantalla de carga que se muestra
mientras la animación principal se carga en el navegador.
- Playhead: Indicador en la línea de tiempo que marca el punto actual de la
animación.
- Matte Color: Color de fondo utilizado en la animación
de preloader para que coincida con el diseño de la página.
Conclusión
Esta guía proporciona
una base sólida para crear contenido alternativo y configurar un preloader en
Adobe Animate, asegurando una experiencia óptima para todos los usuarios,
independientemente del navegador o la velocidad de conexión. Al dominar estas
técnicas, podrás garantizar que tu animación sea accesible y profesional.
Título Sugerido
para la Guía:
"Creación de
Contenido Alternativo y Preloader en Adobe Animate: Optimización para
Navegadores Antiguos"
Lista de Palabras
Clave en Inglés:
Adobe Animate,
animation, timeline, playhead, poster, down-level stage, preloader, properties
panel, snapshot, capture current state, infographic, IE7, IE8, compatibility,
workflow, keyboard shortcuts, library, matte color, HTML, preview in browser,
advanced techniques, user experience, static content, loading screen,
optimization.
Comentarios
Publicar un comentario