Adobe Animate CC - Fundamentos

Page 1

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

Marlon Ceballos - @adobexpert Adobe Community Professional / Adobe CertiďŹ ed Instructor

pert pert

Learn design & code Learn design & code

www.xpert.video

CERTIFIED INSTRUCTOR Web C E R Design T I F I E DMaster I N S T R/ U C T OMaster R

Design Master / Web Master


CERTIFIED INSTRUCTOR

Design Master / Web Master

www.linkedin.com/in/marlonceballos/

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Learn

Learn

pert

design & code

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Conceptos bรกsicos

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Qué es Adobe Animate? • NO es Adobe Edge Animate • Adobe Flash con otro nombre • Aplicación gráfica para creación de elementos dinámicos, interactivos y “rich media”.

Learn

pert

design & code

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 script.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Usos de Adobe Animate • Animaciones • Banners • Publicidad • Juegos • Web y Publicaciones Digitales.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Tipos de documentos • HTML5 Canvas • WebGL • ActionScript • AIR.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Por qué no seguir usando AS3? • Necesidad de un plug-in en el navegador • Muchos dispositivos móviles no soportan Flash • Tipo de documento recomendado: HTML5 Canvas.

Learn

pert

design & code

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/air/samples-mobile.html.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Cómo reemplazar a AS3? • JavaScript • Librerías CreateJS • Cualquier librería de JavaScript.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Archivos de Adobe Animate • .fla • .html y .js.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Necesito programar?

Depende...

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Cómo agregar interactividad? • Snippets • Librerías CreateJS como EaselJs • Javascript.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Interfaz

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Menu

Stage Panels

Layers

Timeline

Tools Panel


Interactividad

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Conceptos básicos • Las librerías más recomendadas son las que hacen parte del paquete CreateJS. • CreateJS facilita el uso de HTML5 Canvas • Su sintaxis es similar a ActionScript3.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Conceptos básicos • Cada composition tiene un stage • El stage es el root de la scena (como el root de Flash) • El stage es llamado symbol y tiene una línea de tiempo

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Symbols • Los symbols son objetos con línea se tiempo • Symbol definition (Library panel) • Symbol instance (Stage).

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Actions & events • La animación en Animate se crea mediante Actions los cuales se ejecutan en respuesta a eventos como click • Algunos eventos son disparados por la línea de tiempo y se llaman Triggers • En las Actions se usa sym para acceder al Symbol definition (Library panel) • Cuando se crea un trigger, sym es el Stage.

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Manipular timeline y elementos • Para acceder a la línea de tiempo de un símbolo se usa:
 sym.getSymbol(“name"); • Para manipular un elemento con jQuery se usa:
 sym.$(“name”); • Para acceder al sym se usa:
 sym.getSymbolElement(); • El parámetro name es el nombre que se ve en los páneles Properties y Elements. Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Gracias!

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Esta presentaciรณn (y otras)

www.xper.co/presenta

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Recursos

www.delicious.com/marliton

Learn

pert

design & code

www.xpert.video

CERTIFIED INSTRUCTOR

Design Master / Web Master


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.