Adobe 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 Adobe Edge

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

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR