Curso Intensivo Edge

¿Qué es Adobe Edge?

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.


¿Qué aprenderás en este curso?

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:
Editar archivos generados, con Dreamweaver para completar el proyecto
Exportación e integración de la animación en: Muse, Dreamweveaver, DPS revistas digitales InDesign, IbooksAuthor



Conocimientos Previos

No se requieren conocimientos previos, aunque sería recomendable, estar familiarizado con:
Creación de banners y animación con Flash o After Effects
Nociones básicas del entorno web (HTML5 y CSS3)
Programas de diseño gráfico como Illustrator, Photoshop
Tener una formación específica inicial favorece la comprensión del contenido del curso, pero no se precisan conocimientos de Flash, ni de programación.


Cursos relacionados

Muse, Dreamweaver CS6, DPS revistas digitales con InDesign, ibookAuthor, Web Apps, Photoshop CS6, Illustrator CS6


Contenidos

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