Clase 1 de Diseño Interactivo

Jorge Llantén Briceño Diseñador Gráfico Publicitario

www.j2.cl /wwwj2cl @jorgellanten jorgellantenb /jorgellanten /jorgellanten

Animaciones antes de Flash

CUADRO A CUADRO

GIF ANIMADOS

VIDEO

1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013

1996 FUTURE SPLASH

Herramienta de animación vectorial

Animación

1997 Macromedia Flash 2

Sigue siendo una herramienta solo de animación

1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013

Animación

1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013

Ahora incluye

script pero la

programación

es muy

deficiente.

Animación

1998 Macromedia Flash 3

Ahora incluye script pero la programaciónes mY]�HI½GMIRXe.Web

1998 Macromedia Flash 3

Scripting

1996

1997

1998

1999

2000

2001

2002

2003

2004

2005

2006

2007

2008

2009

2010

2011

2012

2013

Se m

ejor

a la

na

vega

ción

y

el 92%

de

los

Nav

egad

ores

lo

usa

.

Anim

ació

nW

eb /

Mul

timed

ia

1999

Mac

rom

edia

Fla

sh 4

Se m

ejor

a la

nav

egac

ión

y el

92%

de

los

Nav

egad

ores

lo u

sa.

1999

Mac

rom

edia

Fla

sh 4

Scrip

ting

1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013

Se hace tan masivo que la gran parte de los sitios tienen grandes intros y menus que en ocasiones son exageradas.

Animación Web / Multimedia

2000 Macromedia Flash 52000 Macromedia Flash 5

Se hace tan masivo que la gran parte de los sitiostienen grandes intros y menus que en ocasiones

son exageradas.

Scripting AS1

Ejemplo: Balthaser (2000)

ver ejemplo

1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013

Comienza a exportar para dispositivos móviles

Animación Web / Multimedia

2002 Macromedia Flash MX

Scripting AS1

2002 Macromedia Flash MX

Comienza a exportar para dispositivos móviles

Web Móbil

Ejemplo

http://www.maestrosdelweb.com/editorial/fladismovil/

1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013

2 Versiones

2 formas de programar

AS1 y AS2

Animación Web / Multimedia

2003 Macromedia Flash MX 2004

Scripting AS1

Web Móbil

2003 Macromedia MX 2004

Aparecen dos versiones con formas diferentesde trabajar el código de programación.

2003 Macromedia MX 2004

Aparecen dos versiones con formas diferentesde trabajar el código de programación.

AS2

1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013

Animación Web / Multimedia

2005 Macromedia Flash 8

Scripting AS1

Web Móbil

AS2

2005 Macromedia Flash 8

2005 Macromedia Flash 8

2005

1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013

Web / Multimedia

2006 Adobe Flash 9

Scripting AS1

Web Móbil

AS2

Animación

Primera Versión de ActionScript 3

2006 Adobe Flash 9(alpha)

La programación de Flashya va en ActionScript 3.0

AS3

2007 Adobe Flash CS3

1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013

Web / Multimedia

2007 Adobe Flash CS3

Scripting AS1

Web Móbil

AS2

Animación

AS3

Compatibilidad con Photoshop e IllustratorAIR 1

AS1

Es un entorno de ejecución multiplataforma para la creación

de aplicaciones.

Ejemplo de 10 aplicaciones para desarrollo web hechas para Adobe Air

1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013

Web / Multimedia

2008 Adobe Flash CS4

Scripting AS1

Web Móbil

AS2

Animación

AS3

2008 Adobe Flash CS4

Compatibilidad de video H.264 (MP4), rotación 3D y herramientas de huesos y deco.

AIR 1

AS1

2009 Aparece el primer iPhone y no reproduce archivos Flash

Que razones da Apple para no usar Flash?

1.Es un software 100% propietario, es decir, cerrado a los aportes de terceros.

2.Hay un formato más moderno, H.264, que está disponible en los citados dispositivos de Apple.

3.Tiene un antiguo historial de problemas no resueltos de seguridad.

4.Requiere decodificación por hardware, lo que puede aumentar hasta en un 100% el uso de la batería de dispositivos móviles

1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013

Web / Multimedia

2010 Adobe Flash CS5

Scripting AS1

Web Móbil

AS2

Animación

AS3

Nuevo motor de texto

Flexibilidad para Huesos y Nuevas herramientas Deco de dibujo

AIR 1 AIR 2Android

Aplicaciones Juegos

AS1

1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013

Web / Multimedia

2011 Adobe Flash CS 5.5

Scripting AS1

Web Móbil

AS2

Animación

AS3

AIR 1 AIR 2Android

AIR 3Smart TV

Aplicaciones Juegos

Autorecuperación y autoguardado.

(por fin!)

AS1

.5

1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013

Web / Multimedia

2012 Adobe Flash CS6

AS1

Web Móbil

AS2 AS3

Animación

AIR 1 AIR 2 AIR 3Smart TVAndroid

Aplicaciones Juegos

AS1

Herramienta para

creación de juegos

y contenidos para

dispositivos.

Exportar para HTML5

http://youtu.be/5cYxKEVa1N4

2013 Adobe Creative Cloud

Aplicaciones totalmente nuevas solo descargables por internet. Servicios y herramientas mejor conectados. Comunidad creativa a solo un clic de distancia. (Behance)

2013 Adobe Flash CC

Solo ActionScript 3 Sin herramientas de Huesos, Deco, sin texto TLF. Sin Comportamientos, entre otras cosas.

1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013

Web / Multimedia

Scripting AS1

Web Móbil

AS2

Animación

AS3

AIR 1 AIR 2Android

AIR 3Smart TV

Aplicaciones /Juegos

AS1 AS2

Casi por completo para crear aplicaciones y juegos.

Impresión / Publicidad

Trabajo del diseñador con Flash

Animación

Multimedia

Web

Web Movil

Aplicaciones y Juegos para PC

Aplicaciones y Juegos para Movil y Tablets

Aplicaciones y Juegos para Smart TV

Av. Ricardo Lyon 1177, Providenci Fonos: 204 2998 - 204 2370

www.academiamac.c info@academiamac.cl

CONTENIDOS

ÁREA GRÁFICA

Photoshop Conocimiento de la plataforma Tipos de archivos e imágenes Tamaño y resoluciones Herramientas de diseño básicas,

selección, pluma y dibujo Composición a base de capas y

carpetas de desarrollo Filtros y selección Trabajo con Bitmaps y vectores Desarrollo de interfaz y

aplicación para usuario Integración con Illustrator y

Flash

Illustrator Conocimiento de la plataforma Tipos de archivo e imágenes Documentos y formatos Dibujo y rellenos de color Composición a base de capas y

carpetas de desarrollo Filtros y selección Trabajo con Bitmaps y vectores Objetos inteligentes y símbolos Desarrollo de interfaz y

aplicación para usuario Integración con Photoshop y Flash

ÁREA WEB HTML Lenguaje HTML Estructura de TAGS Rich Media en HTML

CSS Qué es CSS y su relación con

HTML Edición de Etiquetas Básicas

con CSS

ID, tags y clases Armado y maquetado con CSS CSS Avanzado

CSS3 Comparativa con CSS2 Cambios más importantes

introducidos Animación con CSS3

HTML 5 Comparativa con HTML4 Cambios más importantes

introducidos Animación con HTML5 Nuevas etiquetas Canvas Geolocalización WebStorage

JavaScript Introducción a la programación Sintaxis Básica y tipos de datos Condicionales e iterativos y

funciones Arreglos y Objetos Manipulación de elementos,

propiedades HTML y Eventos Integración y manejo de API’s Animación y dibujo en Canvas Frameworks para creación de

Videojuegos con Javascript (LimeJS, ImpactJS, EaselJS)

PhoneGap

PHP - MySQL

jQuery - jQuery Mobile Introducción Selección de Elementos Manipulación de propiedades y

elementos HTML

Eventos, Animación y jQuery UI Librería para creación de

VideoJuegos gameQuery

ÁREA FLASH Fundamentos AS3 Fundamentos OOP Fundamentos AS3 Arquitectura de Carpetas Templates y Escenarios Metodología de Desarrollo Elementos del Lenguaje Clases Esenciales (XML, Array,

Object) Creación de Paquetes AS3 Clases Externas AS3 Propiedades, Métodos y Eventos Asociaciones de Clases Cargar y Gestionar Videos Cargar y Gestionar Sonidos y

Mp3s Reproductores de Audio y Video Cargar y Gestionar Imágenes

(JPG, GIF, PNG) Uso e Implementación de

Bitmaps Carga y Gestión de SWF Gestionar Cargas y Precargas Uso y gestión de Niveles (root,

parent, this, childindex)

Fundamentos Games Fundamentos Games Flash Tipos de Games en Flash Metodología de Desarrollo de

Juegos Convenciones y mejores

prácticas Clases Esenciales (Vector,

stage3D) FrameWorks AS3 para Games Games Engines Escenarios y

Templates

Interactive Games Interacción con Teclado y Mouse Colisiones de MovieClip Control de animación

TweenMax/TweenLite Interacción con Sonido y Videos Matemáticas y Física en AS3 Aleatoriaridad Arrays Multidimensionales Diccionarios y Vectores Loops y Bucles 2D Games Planos Cartesianos Posicionamiento de Objetos Backgrounds y SpriteSheets

Conectividad Conectividad XML Conectividad JSON Conectividad PHP Conectividad SharedObject Conectividad PHP - AS3 - MySQL BDD MySQL BDD SQL Lite

Librerías TweenMax/TweenLite Box2D AS3Mob Facebook API AS3 Adobe Utilities AS3mathlib Flare3D Alternative3D Pv3D Flint JigLib

Logic Games Fundamentos Lógica en AS3 Desarrollo Inteligencia Artificial

(CPU versus Player) Desarrollo de Niveles

Social Games

Fundamentos Social Games Tipos de Juegos Sociales Facebook para Desarrolladores Aplicaciones Facebook Fundamentos Facebook

Connect Facebook SDK y API AS3 Creación de Social Games con

Facebook Conectividad entre Amigos Invitaciones y desafíos FB Escalabilidad Ranking, Compartir, Publicar APIs y AS3

Casual Games Fundamentos Casual Plataformas Fluidez - Rapidez Desarrollos Ágiles

Adver Games Fundamentos Advertising Publicidad y Juegos Marcas y Juegos

Framework AS3 Fundamentos FrameWorks AS3 Desarrollo Juegos con

FrameWorks FlashPunk, Starling, Flint,

Flixel, AS3 ISO Lib, PushButton, Platogo, Geewa

MultiPlayer Games Metodología de Desarrollo

MultiPlayer RMTFP Seguridad y Desarrollo Servidores MultiPlayer Peer to Peer Client Server Latency Cliente o Servidor Juegos colaborativos BDD para MultiPlayers Games

ÁREA SONIDO Introducción a Reason

(Herramientas, paneles e interfaz)

Conceptualización del Sonido Diseño de Sonido Ambiental Diseño de Sonido Incidental Diseño de Sonido de Interfaz

ÁREA VIDEO Introducción a Adobe Media

Encoder Importación y Exportación de

Videos para Flash Professional con Adobe Media Encoder

Edición de Video Rápida con Adobe Media Encoder

Introducción a After Effects Edición de Video con After

Effects Creación y gestión de CuePoints

en After Effects Integración con Flash

ÁREA GESTIÓN Y CREATIVIDAD Creación de Guión de un

VideoJuego Caracterización de Personajes Diagramas de Flujo en el

desarrollo de Aplicaciones Adaptación del Guión Usabilidad Arquitectura de la Información Prototipado y WireFrames Usuarios Medición (Analíticas con Google

y Facebook)

Animación cuadro a cuadro

HBruna TV

Tablas Digitalizadoras

Wacom Bamboo

Tablas Digitalizadoras

Wacom 24 HD

Tablas Digitalizadoras

Wacom Inkling