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