Adobe Animate CC - Fundamentos: Animaciones HTML5

Learn

pert Design and Creativity

Adobe Animate CC - Fundamentos (v. 2017) www.xpert.video/p/adobe-animate-cc

Marlon Ceballos - @adobexpert

Marlon Ceballos

CERTIFIED INSTRUCTOR

Design Master / Web Master

www.linkedin.com/in/marlonceballos/

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Conceptos bรกsicos

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Qué es Adobe Animate?

• NO es Adobe Edge Animate • Adobe Flash con un nuevo nombre • Aplicación gráfica para creación de elementos dinámicos e interactivos = “rich media”.

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Características de Adobe Animate • Todo el contenido se encuentra en un Stage o Scenario • Los elementos se animan usando un Timeline • Posibilidad de expandir sus capacidades mediante lenguajes de programación o scripts y/o frameworks.

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Usos de Adobe Animate • Animaciones y elementos interactivos: - Elementos publicitarios - Contenido eLEarning - Juegos - Etc

• Web y Publicaciones Digitales.

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Tipos de documentos • HTML5 Canvas • WebGL (Preview) • ActionScript • AIR.

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Por qué no seguir usando AS3?

• Necesidad de un plug-in (Flash Player) en el navegador • La mayoría de los navegadores móviles no soportan plug-ins • Los dispositivos móviles no soportan contenido en formato .swf • Tipo de documento recomendado: HTML5 Canvas.

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Por qué seguir usando AS3?

• Desarrollos específicos • Publicación en formato AIR • www.adobe.com/devnet-apps/flashshowcase/ • www.adobe.com/devnet/air/samples-mobile.html.

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Cómo reemplazar a AS3?

• JavaScript • Cualquier librería de JavaScript: - Librerías CreateJS - GSAP (GreenSock Animation Platform) - etc.

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Documentos HTML5 Canvas HTML5 Canvas (tipo de documento recomendado): • .fla • .html • .js.

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Necesito programar?

Depende...

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Cómo agregar interactividad?

• Snippets (muy fácil, reuso código) • Librerías CreateJS como EaselJs (requiere conocimiento básico de JS) • Javascript.

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Interfaz

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Menu bar

Pasteboard

Stage Panels

Layers

Timeline

Tools Panel

Importaciรณn de archivos

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Importación de archivos • Formatos soportados (HTML5 Canvas) • Tener en cuenta: La mayoría de estos elementos aumentan el tamaño de la publicación final • Justificar su uso.

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Dibujo

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Dibujo en Adobe Animate • Modos de dibujo: - Merge Drawing mode o Modo de dibujo combinado - Object Drawing Mode o Modo de dibujo de objetos

• Tipos de objetos: - Shapes (creados o importados) - Drawing objects u Objetos de dibujo - Primitive objects u Objetos primitivos - Bitmaps. www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Líneas

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Curvas

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Color

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Modelos de color Permiten definir y medir los colores: • HSB • RGB • Hexadecimal.

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Modelo RGB

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Timeline

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Timeline • Keyframes o Fotogramas claves • Frames o Fotogramas.

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Tween o Interpolaciรณn

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Tween o Interpolación • En una animación existen unas etapas "claves" y unas etapas intermedias • Nosotros creamos las etapas "claves" • Tween es el proceso de creación de las etapas intermedias.

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Tipos de Tween • Shape Tween (Interpolación de forma) • Classic Tween (Interpolación clásica) • Motion Tween (Interpolación de movimiento).

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Symbols o Símbolos

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Symbols o Símbolos • Contenedores especiales • Propiedades especiales • Instancias.

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Tipos de símbolos • Graphic symbols (Símbolos gráficos) • Movie Clips (Clips de películas) • Buttons (Botones).

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Buttons o Botones • Elementos interactivos por naturaleza • Frames especiales en su Timeline (estados): - Up (Arriba) - Over (Sobre) - Down (Presionado) - Hit (Zona activa).

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Interactividad

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Interactividad Tipos de elementos creados con Adobe Animate: • Elementos dinámicos: Creados con herramientas gráficas • Elementos interactivos: Requieren el uso de programación.

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Interactividad • Documentos HTML5 Canvas: Javascript • Forma fácil: Code Snippets (Fragmentos de código).

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Audio

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Conceptos básicos Bit depth (Profundidad de bits): • Equivalente a la resolución de imágenes • Mayor Bit depth: mayor precisión en captura de audio original y más tamaño de archivo • 8 Bits: 256 posibles valores • 16 bits: 65.536 posibles valores.

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Conceptos básicos Bit rate (Tasa de bits): • Cantidad de bits transmitida por cada segundo • 8 Kbps Mono: Sonido Telefónico.

• 16 Kbps Mono: Mejor calidad que onda corta.

• 32 Kbps Mono: Mejor calidad que AM. • 64 Kbps Stéreo: Mejor calidad que FM. • 112 – 128 Kbps: Calidad cercana a CD. • 160 Kbps: Calidad más cercana a CD. www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Conceptos básicos Formatos soportados (HTML5 Canvas): • Wav • Mp3.

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Gracias!

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Esta presentaciรณn (y otras)

www.xper.co/presenta

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master

Recursos

www.delicious.com/marliton

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master