Adobe Edge Animate CC es el Flash para HTML5, permite crear animación con o sin interactividad para navegadores modernos de ordenador, smartphones y tablets, de forma fácil y rápida.
¿Qué aprenderás en este curso de Edge Animate CC?
1. Generar contenido gráfico desde Photoshop o Illustrator. Reutilizar ilustraciones vectoriales de Flash.
2. Crear composiciones nuevas, importación de gráficos para la web.
3. Crear distintos tipos de animaciones para banners, intros…
- keyframing: crear fotogramas clave y Edge Animate crea una transición gradual.
- Pining (inversa-directa): una forma simplificada y flexible de keyframing, modificando las propiedades de los objetos en el escenario, interactivamente con el ratón.
- Mostrar-ocultar: activar des-activar keyframe visibilidad.
- Flipbook: animación frame a frame.
- Animaciones anidadas con símbolos: muy útil en objetos con animaciones secundarias, terciarias…
- Rutas de movimiento: con trazado vectoriales editables (novedad Edge Animate CC).
5. Posicionamiento relativo vs. absoluto: posición y escala de objetos, no en pixels sino porcentual.
6. Añadir interactividad.
7. Integración con flujos de trabajo:
Enriquecer el contenido de un proyecto web, con efectos animados o interactivos.
Exportación e integración de la animación a: Dreamweaver, DPS (revistas digitales InDesign), IbooksAuthor…
Usos de Edge Animate CC
• Animaciones web HTML5: banners, intros… mediante una interficie gráfica, sin escribir código CSS3. Soportado por navegadores modernos, en ordenador, tablets y smartphones.
• Animación interactiva: usando JavaScript, API propio Edge Animate, jQuery y otras librerías JavaScript.
• Integración con: Dreamweaver y witgets para publicaciones digitales DPS-InDesign e IbooksAuthor.
La creación del contenido gráfico debe realizarse desde Illustrator, Photoshop…
Qué es Edge Animate CC: animación HTML5 vs Flash-SWF.
• Descarga, requerimientos mínimos. Versión 1.5 gratuita. Versión CC trial o subscripción Creative Cloud. Compatibilidad entre versiones.
Interficie
• Recorrer ventanas. Herramientas. Teclas aceleradores. Espacios de trabajo. Cambiar idioma.
• Paneles (Menú Ventana): Escenario, Línea de tiempo, Elementos, Panel Propiedades (ver equivalencia con reglas CSS).
Generación de contenido gráfico e importación desde
• Flash: reutilizar contenido gráfico.
• Illustrator: exportación de múltiples páginas, en formato jpg, png, SVG (vectorial HTML5).
• Photoshop: uso de sectores.
Crear composiciones pre-animación: escenario y elementos
• Flash Panel Propiedades: dimensiones y color del escenario…
• Importación y multi-importación: archivos gráficos soportados. Activos carpeta images.
• Selección y Edición de objetos: Herramienta de selección y Transformar. Alinear, distribuir, organizar (orden de apilamiento).
Crear animaciones básicas
• Animaciones de tipo: keyframing, Pining (inversa-directa), Mostrar-ocultar, Flipbook.
• Cambiar origen de imagen.
• Efectos de aceleración Easing a canales de animación: lineal, aceleración, frenado, rebote…
• Añadir animación a contenido HTML existente.
Uso de Textos
• Formato de texto a cajas independientes y asignación de propiedades.
• Fuentes web: Acceso a bibliotecas de fuentes web gratuitas o incluido en la subscripción a Creative Cloud. Texto vivo seleccionable e indexable en Google.
• Animaciones con texto p.e. propiedad interletrado.
Animaciones Avanzadas
• Símbolos y anidación. Rutas de movimiento. Compartir símbolos (importación-exportación). Máscaras de recorte y filtros.
• Diseño líquido vs. sólido: objetos con escala y posición porcentual.
Animaciones interactivas con fragmentos de código: Se obtienen sentencias predefinidas, sin necesidad de escribir código.
• Animación con bucle, asignación de acciones a un Activador.
• Hipervínculos: a URL páginas web remotas.
• Textos dinámicos: cambiar el contendido de una caja de texto dinámicamente.
• Obtener símbolo: llamar a la línea de tiempo independiente de un símbolo, desde otro nivel.
Animaciones interactivas: JavaScript, API de Edge Animate, JQuery, JQueryUI…
• Efecto Paralax: animación interactiva sincronizada p.e. con la posición del ratón en el ejeX.
• Conmumtador Botón desplegar-replegar menú: Control dinámico de la línea de tiempo con JavaScript. Etiquetas-label. Variables Boolean y condicionales.
• Drag and Drop: Arrastrar y soltar objetos.
• Radom: animación con movimiento aleatorio.
• Cargar contenido HTML dentro un objeto.
Testear, probar la animación en:
• in-stage: en el escenario. in-browser: en el navegador. Asignar distintos navegadores de escritorio.
• simulador-IOS: viewport. Dispositivos: smartphone o tablet (iPad, iPhone, Android…)
Pre-publicación
• Pantalla de Precarga para web y DPS. Pantalla de Nivel-inferior para navegadores antiguos que no soportan HTML5.
Publicación e integración con:
• Dreamweaver CS6 y CC. Publicaciones digitales: DPS, IbooksAuthor.
En Microgestió ofrecemos de manera directa, sin trámites, un descuento en nuestros cursos para los siguientes colectivos:
15% de descuento para Estudiantes.
15% de descuento para Desempleados.
15% de descuento para Autónomos.
Además si vienes al curso con 1 amigo te ofrecemos un 5% de descuento adicional y si vienes con 2 un 10%. *
Empresas:
Realizamos los trámites necesarios para gestionar la bonificación del curso mediante la Fundación Tripartita para la Formación en el Empleo sin ningún coste adicional.
2 alumnos inscritos en el mismo curso 5% de descuento.*
3 alumnos inscritos en el mismo curso 10% de descuento. *
* Descuentos no acumulables a otras promociones.
Apple Premium Reseller - Servicio Técnico Apple - Apple Solution Expert - Apple Solution Educativo - Apple & Adobe Training Center
