Clase1 diseño interacivo

  • View
    38

  • Download
    0

Embed Size (px)

Text of Clase1 diseño interacivo

  1. 1. Clase 1 de Diseo Interactivo Jorge Llantn Briceo Diseador Grco Publicitario www.j2.cl /wwwj2cl @jorgellanten jorgellantenb /jorgellanten /jorgellanten
  2. 2. Animaciones antes de Flash CUADRO A CUADRO GIF ANIMADOS VIDEO
  3. 3. 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 1996 FUTURE SPLASH Herramienta de animacin vectorial Animacin
  4. 4. 1997 Macromedia Flash 2 Sigue siendo una herramienta solo de animacin 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 Animacin
  5. 5. 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 Ahora incluye script pero la programacin es muy deciente. Animacin 1998 Macromedia Flash 3 Ahora incluye script pero la programa es m e.Web 1998 Macromedia Flash 3 Scripting
  6. 6. 199619971998199920002001200220032004200520062007200820092010201120122013 Semejorala navegaciny el92%delos Navegadores lousa. AnimacinWeb/Multimedia 1999MacromediaFlash4 Semejoralanavegacinyel92% Navegadoreslousa. 1999MacromediaFlash4 Scripting
  7. 7. 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. Animacin Web / Multimedia 2000 Macromedia Flash 52000 Macromedia Flash 5 Se hace tan masivo que la gran parte de lo tienen grandes intros y menus que en oc son exageradas. Scripting AS1
  8. 8. Ejemplo: Balthaser (2000) ver ejemplo
  9. 9. 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 Comienza a exportar para dispositivos mviles Animacin Web / Multimedia 2002 Macromedia Flash MX Scripting AS1Comienza a exportar para dispositivos m Web Mbil
  10. 10. Ejemplo http://www.maestrosdelweb.com/editorial/adismovil/
  11. 11. 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 Animacin Web / Multimedia 2003 Macromedia Flash MX 2004 Scripting AS1 Web Mbil Aparecen dos versiones co de trabajar el cdigo d 2003 Macromedia MX 2004 Aparecen dos versiones con formas diferentes AS2
  12. 12. 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 Animacin Web / Multimedia 2005 Macromedia Flash 8 Scripting AS1 Web Mbil AS2 2005 Macromedia Flash 8
  13. 13. 2005
  14. 14. 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 Mbil AS2 Animacin Primera Versin de ActionScript 3 2006 Adobe Flash 9 (alpha) La programacin de Flash ya va en ActionScript 3.0 AS3
  15. 15. 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 Mbil AS2 Animacin AS3 Compatibilidad con Photoshop e Illustrator AIR 1 AS1
  16. 16. Es un entorno de ejecucin multiplataforma para la creacin de aplicaciones. Ejemplo de 10 aplicaciones para desarrollo web hechas para Adobe Air
  17. 17. 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 Mbil AS2 Animacin AS3 Compatibilidad de video H.264 (MP4), rotacin 3D y herramientas de huesos y deco. AIR 1 AS1
  18. 18. 2009 Aparece el primer iPhone y no reproduce archivos Flash
  19. 19. 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 ms 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 decodicacin por hardware, lo que puede aumentar hasta en un 100% el uso de la batera de dispositivos mviles
  20. 20. 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 Mbil AS2 Animacin AS3 Nuevo motor de texto Flexibilidad para Huesos y Nuevas herramientas Deco de dibujo AIR 1 AIR 2 Android Aplicaciones Juegos AS1
  21. 21. 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 Mbil AS2 Animacin AS3 AIR 1 AIR 2 Android AIR 3 Smart TV Aplicaciones Juegos Autorecuperacin y autoguardado. (por n!) AS1 .5
  22. 22. 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 Mbil AS2 AS3 Animacin AIR 1 AIR 2 AIR 3 Smart TVAndroid Aplicaciones Juegos AS1 Herramienta para creacin de juegos y contenidos para dispositivos. Exportar para HTML5
  23. 23. http://youtu.be/5cYxKEVa1N4
  24. 24. 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)
  25. 25. 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 Mbil AS2 Animacin AS3 AIR 1 AIR 2 Android AIR 3 Smart TV Aplicaciones /Juegos AS1 AS2 Casi por completo para crear aplicaciones y juegos.
  26. 26. Impresin / Publicidad Trabajo del diseador con Flash Animacin Multimedia Web Web Movil Aplicaciones y Juegos para PC Aplicaciones y Juegos para Movil y Tablets Aplicaciones y Juegos para Smart TV
  27. 27. Av. Ricardo Lyon 1177, Providenci Fonos: 204 2998 - 204 2370 www.academiamac.c info@academiamac.cl CONTENIDOS REA GRFICA Photoshop Conocimiento de la plataforma Tipos de archivos e imgenes Tamao y resoluciones Herramientas de diseo bsicas, seleccin, pluma y dibujo Composicin a base de capas y carpetas de desarrollo Filtros y seleccin Trabajo con Bitmaps y vectores Desarrollo de interfaz y aplicacin para usuario Integracin con Illustrator y Flash Illustrator Conocimiento de la plataforma Tipos de archivo e imgenes Documentos y formatos Dibujo y rellenos de color Composicin a base de capas y carpetas de desarrollo Filtros y seleccin Trabajo con Bitmaps y vectores Objetos inteligentes y smbolos Desarrollo de interfaz y aplicacin para usuario Integracin con Photoshop y Flash REA WEB HTML Lenguaje HTML Estructura de TAGS Rich Media en HTML CSS Qu es CSS y su relacin con HTML Edicin de Etiquetas Bsicas con CSS ID, tags y clases Armado y maquetado con CSS CSS Avanzado CSS3 Comparativa con CSS2 Cambios ms importantes introducidos Animacin con CSS3 HTML 5 Comparativa con HTML4 Cambios ms importantes introducidos Animacin con HTML5 Nuevas etiquetas Canvas Geolocalizacin WebStorage JavaScript Introduccin a la programacin Sintaxis Bsica y tipos de datos Condicionales e iterativos y funciones Arreglos y Objetos Manipulacin de elementos, propiedades HTML y Eventos Integracin y manejo de APIs Animacin y dibujo en Canvas Frameworks para creacin de Videojuegos con Javascript (LimeJS, ImpactJS, EaselJS) PhoneGap PHP - MySQL jQuery - jQuery Mobile Introduccin Seleccin de Elementos Manipulacin de propiedades y elementos HTML Eventos, Animacin y jQuery UI Librera para creacin de VideoJuegos gameQuery REA FLASH Fundamentos AS3 Fundamentos OOP Fundamentos AS3 Arquitectura de Carpetas Templates y Escenarios Metodologa de Desarrollo Elementos del Lenguaje Clases Esenciales (XML, Array, Object) Creacin de Paquetes AS3 Clases Externas AS3 Propiedades, Mtodos y Eventos Asociaciones de Clases Cargar y Gestionar Videos Cargar y Gestionar Sonidos y Mp3s Reproductores de Audio y Video Cargar y Gestionar Imgenes (JPG, GIF, PNG) Uso e Implementacin de Bitmaps Carga y Gestin de SWF Gestionar Cargas y Precargas Uso y gestin de Niveles (root, parent, this, childindex) Fundamentos Games Fundamentos Games Flash Tipos de Games en Flash Metodologa de Desarrollo de Juegos Convenciones y mejores prcticas Clases Esenciales (Vector, stage3D) FrameWorks AS3 para Games Games Engines Escenarios y Templates Interactive Games Interaccin con Teclado y Mouse Colisiones de MovieClip Control de animacin TweenMax/TweenLite Interaccin con Sonido y Videos Matemticas y Fsica 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 Libreras TweenMax/TweenLite Box2D AS3Mob Facebook API AS3 Adobe Utilities AS3mathlib Flare3D Alternative3D Pv3D Flint JigLib Logic Games Fundamentos Lgica 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 Creacin de Social Games con Facebook Conectividad entre Amigos Invitaciones y desafos 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 Metodologa 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 Introduccin a Reason (Herramientas, paneles e interfaz) Conceptualizacin del Sonido Diseo de Sonido Ambiental Diseo de Sonido Incidental Diseo de Sonido d