Es el Flash para HTML5, permite generar animación con o sin interactividad para navegadores modernos, smartphones y tablets de forma fácil y rápida.
1. Generar contenido gráfico desde Photoshop o Illustrator. Reutilizarlo desde Flash.
2. Crear composiciones nuevas, importación de gráficos para la web
3. Crear animaciones y añadir efectos aceleración Diseño sólido: medidas absolutas
Diseño elástico (responsive design): La animación se adapta automáticamente a distintos anchos de pantalla y formatos.
4. Añadir interactividad
5. Integración con flujos de trabajo:
Exportación e integración de la animación en: Muse, Dreamweveaver, DPS revistas digitales InDesign, IbooksAuthor
No se requieren conocimientos previos, aunque sería recomendable, estar familiarizado con:
Muse, Dreamweaver CS6, DPS revistas digitales con InDesign, ibookAuthor, Web Apps, Photoshop CS6, Illustrator CS6
1. Introducción e interficie
Para que sirve la herramienta EdgeAnimate
Compatibilidad con navegadores (url)
Soporta exportación e integración de la animación en: Muse, Dreamweveaver, DPS revistas digitales InDesign, IbooksAuthor
Descarga e instalación. Requerimientos (url)
Interfacie:
Recorrer ventanas
No soporta (short to brillant)
Soporta: teclas aceleradores, espacios de trabajo navegación alias
Recursos (url)
Escenario, Línea de tiempo, Paneles Elementos, Panel de Propiedades, Herramientas, Menús
2. Preparación del contenido gráfico e importación
Reutilizar contenido gráfico de Flash
Illustrator: Exportación de múltiples páginas, en formato jpg y png. Formato svg (vectorial nativo html5).
Photoshop: uso de sectores
Creación sitio EdgeAnimate, carpeta images
Importación y multi-importacion y archivos soportados
3. Composición: configuración del escenario y sus elementos
Panel Propiedades:
Dimensiones y color del escenario
Imagen de poster
Percargador: circulos o cuadrados de espera, barra de progreso
Selección y edición de elementos:
Herramienta de selección y Transformar
Alinear, distribuir, organizar
Diseño sólido: medidas absolutas
Diseño elástico (responsive design): medidas relativas. Configuración individual y global de elementos y animación.
La animación se adapta automáticamente a distintos anchos de pantalla y formatos.
4. Animaciones básicas
Panel Propiedades (ver equivalencia con reglas css)
Orden de apilamiento
Activación fotograbas clave, transiciones graduales, pin
Selección de efectos de aceleración (lineal, aceleración, frenado, rebote…)
Intercambio de elementos gráficos animados.
Testear animation desde:
El escenario y desde el navegador. Seleccionar navegadores de escritorio alternativos.
Simulador de IOS
Dispositivo iPad, iPhone, Android
Animación de contenido web pre-existente p.e. realizado en DreamWeaver
5. Uso de Textos
Texto y asignación de propiedades
Fuentes web @font-face CSS3 (fuentes no rasterizadas)
Texto y grupos
6. Animaciones Avanzadas
Símbolos y anidación.
Transiciones de translación y rotación
Activadores y Loops (asignación de acciones a fotogramas)
Animación con máscaras
7. Interactividad
Hipervínculos
Textos dinámicos
Interactividad, asignación de acciones a fotogramas y acciones a objetos.
Eventos para ratón y para dispositivos táctiles.
Botones de control de la animación con varios estados
Toggle button: despliega-repliega menu
Efectos animados aleatorios random
8. Exportación de animaciones a:
DreamWeaver: animación con fondo transparente sobre imagen de fondo
Integración con: Muse, DPS InDesign, iBooks Author