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