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.
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 e Interficie
- Animación HTML5 vs Flash-SWF. Descarga, requerimientos mínimos. Versión CC trial o subscripción Creative Cloud. Compatibilidad entre versiones.
- Recorrer ventanas. Herramientas. Teclas aceleradoras. Espacios de trabajo. Cambiar idioma.
- Paneles: Escenario, Línea de tiempo, Elementos, Propiedades (ver equivalencia con reglas CSS).
Generación de contenido gráfico e importación a Edge
- Flash: reutilizar contenido gráfico.
- Illustrator y Photoshop: exportación de múltiples páginas, en formato jpg, png, SVG (vectorial HTML5).
- 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).
Animaciones no interactivas
- Tipos de animación: keyframing, Pinning (inversa-directa), Mostrar-ocultar, FlipBook.
- Reemplazar imagen y editar en origen.
- Efectos de aceleración Easing a canales de animación: lineal, aceleración, frenado, rebote…
- Añadir animación a contenido HTML existente.
- Símbolos y anidación. Compartir símbolos (importación-exportación).
- Rutas de movimiento transformables.
- Máscaras de recorte y filtros.
- Diseño líquido: objetos con escala y posición porcentual. Centrado y escalado del Escenario.
- Textos: Fuentes web. Texto vivo seleccionable e indexable en Google. Animación con propiedades de texto p.e. tamaño, interletrado…
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.
Audio
- Importación archivos de audio compatibles con HTML5 mediante un nuevo Panel, sin escribir código.
- Asociar eventos de audio a objetos o a un activador en la línea de tiempo.
- Crear con transiciones con propiedad volumen para intensificar o desvanecer sonido.
Animaciones interactivas avanzadas
- 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.
- Random: animación con movimiento aleatorio.
- Efecto Paralax: animación interactiva sincronizada p.e. con la posición de la barra de scroll.
- Cargar contenido HTML dentro un objeto.
- Carga de scripts: importación de bibliotecas JavaScript (p.e. jQueryUI…) mediante el nuevo Panel.
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 y publicación
- Pantalla de Precarga para web y DPS. Pantalla de Nivel-inferior para navegadores antiguos que no soportan HTML5.
- Integración con Dreamweaver CS6 y CC. Publicaciones digitales: DPS, IbooksAuthor.
Novedades y mejoras de la versión Edge Animate CC 3.0
- Audio: importación archivos de audio compatibles con HTML5 mediante nuevo Panel, sin escribir código. Asociar eventos de audio a un activador en la línea de tiempo o a objetos y crear transiciones (p.e. intensificar o desvanecer sonido).
- Centrado y escalado del Escenario: manteniendo la proporción respecto a la ventana del navegador.
- Imagen de póster .OAM con transparencia: para DPS actualmente no soportada, para publicaciones PDF, sólo PNG y JPG.
- Animación con rutas de movimiento mejoradas: basado en trazado vectoriales editables, opción de auto-orientación y escalar y girar.
- Evento swipe: barrido horizontal a derecha e izquierda con el ratón o dedo.
- Herramienta cuentagotas: tomar y almacenar muestras de color de objetos del escenario.
- Carga de scripts: añada bibliotecas JavaScript (p.e. jQueryUI…) para ampliar sus proyectos Animate con el nuevo panel de carga de scripts. La importación puede ser desde fuentes locales y en línea.
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.
