clase 1 de flash

Clase ! de Flash

Profesor Jorge Llantén B.Diseñador Gráfico Publicitario

www.j!.cl /wwwj!cl @jorgellanten jorgellantenb /jorgellanten /jorgellanten

http://www.facebook.com/wwwj2cl










http://www.j2.cl

http://www.j2.cl

http://www.j2.cl

http://www.j2.cl

http://www.j2.cl

http://www.j2.cl

http://www.j2.cl

http://www.j2.cl

http://www.j2.cl

http://www.j2.cl

http://www.linkedin.com/jorgellanten










http://www.twitter.com/jorgellanten










http://www.youtube.com/jorgellanten










mailto:[email protected]?subject=Enviado%20desde%20presentaci%C3%B3n%20de%20SlideShare










"º Semestre

Gráfica Computacional IV

"º Semestre


"D

"º Semestre


"D

Taller Audiovisual

Hasta el #º Semestre

Photoshop

InDesign

Illustrator


Photoshop

InDesign

Illustrator

IMPRESIÓN

CMYK"## Pxl/pulg

TIFF - PDF


Photoshop

InDesign

Illustrator

IMPRESIÓN

CMYK"## Pxl/pulg

TIFF - PDF

PAPEL


Photoshop

InDesign

Illustrator

IMPRESIÓN

CMYK"## Pxl/pulg

TIFF - PDF

PAPEL

AHORA SOLOPANTALLA

"º y $º Semestre

"º y $º Semestre

"DVIDEO

MULTIMEDIAWEB

"º y $º Semestre

"DVIDEO

MULTIMEDIAWEB

$! pxl/pulgJPG - PNG

"º y $º Semestre

"DVIDEO

MULTIMEDIAWEB

$! pxl/pulgJPG - PNG

Color RGB

Decimales

Decimales

#%!"&'($)*

!-"

%

HexadecimalesDecimales

#%!"&'($)*

!-"

%


#%!"&'($)*

!-"

%

#%!"&'($)*ABCDEF

!-F

B


!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

R G B#%!"&'($)*

!-"

%

#%!"&'($)*ABCDEF

!-F

B


###BB$$!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

R G B#%!"&'($)*

!-"

%

#%!"&'($)*ABCDEF

!-F

B


!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

R G B###BB$$

!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

R G B#%!"&'($)*

!-"

%

#%!"&'($)*ABCDEF

!-F

B

#%&'(D"


!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

R G B###BB$$

!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

!"#$%&'()*ABCDEF

R G B#%!"&'($)*

!-"

%

#%!"&'($)*ABCDEF

!-F

B

#AA33BB

#AA33BB#A3B

#AA33BB

RGB(0,255,255)RGB(0,100%,100%)

#A3B

#AA33BB

whiteblacketc.

RGB(0,255,255)RGB(0,100%,100%)

#A3B

Animaciones antes de Flash


CUADRO A CUADRO


CUADRO A CUADRO

VIDEO


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 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013

!&&" FUTURE SPLASH

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

!&&" FUTURE SPLASH

Herramienta de animación vectorial

Animación

!&&$ Macromedia Flash '

Sigue siendouna herramientasolo 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

!&&( Macromedia Flash %

Scripting

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

Se mejora la navegación y el *#% de los Navegadores lo usa.

Animación Web / Multimedia


Se mejora la navegación y el 92% de losNavegadores lo usa.

!&&& Macromedia Flash )

Scripting

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.


'*** Macromedia Flash #2000 Macromedia Flash 5

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

son exageradas.

Scripting AS"

Ejemplo: Balthaser ('***)

ver ejemplo

http://www.j2.cl/ejemplosflash/balthaser.html

http://www.j2.cl/ejemplosflash/balthaser.html

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


'**' Macromedia Flash MX

Scripting AS"

2002 Macromedia Flash MX

Comienza a exportar para dispositivos móviles

WebMó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

# Versiones

# formas de programar

AS" y AS#


'**% Macromedia Flash MX '**)

Scripting AS"

WebMó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.

AS#

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


'**# Macromedia Flash (

Scripting AS"

Web Móbil

AS#



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

Web / Multimedia

'**" Adobe Flash &

Scripting AS"

Web Móbil

AS#

Animación

Primera Versión de ActionScript $

2006 Adobe Flash 9(alpha)

La programación de Flashya va en ActionScript 3.0

AS$

2007 Adobe Flash CS3

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

Web / Multimedia

'**$ Adobe Flash CS%

Scripting AS"

Web Móbil

AS#

Animación

AS$

Compatibilidad con Photoshop e Illustrator

AS%


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

Web / Multimedia

'**$ Adobe Flash CS%

Scripting AS"

Web Móbil

AS#

Animación

AS$

Compatibilidad con Photoshop e IllustratorAIR "

AS%

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

de aplicaciones.

Ejemplo de "! aplicaciones para desarrollo web hechas para Adobe Air

http://techtastico.com/post/mejores-aplicaciones-desarrollo-adobe-air/

http://techtastico.com/post/mejores-aplicaciones-desarrollo-adobe-air/

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

Web / Multimedia

'**( Adobe Flash CS)

Scripting AS"

Web Móbil

AS#

Animación

AS$


Compatibilidad de video H.#'% (MP%), rotación $D y herramientas de huesos y deco.

AIR "

AS%

#!!* Aparece el primer iPhone y no reproduce archivos Flash

Que razones da Apple para no usar Flash?


".Es un software "!!% propietario, es decir, cerrado a los aportes de terceros.



#.Hay un formato más moderno, H.#'%, que está disponible en los citados dispositivos de Apple.




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




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

%.Requiere decodificación por hardware, lo que puede aumentar hasta en un "!!% 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

'*!* Adobe Flash CS#

Scripting AS"

Web Móbil

AS#

Animación

AS$

AIR " AIR #Android

AS%

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

Web / Multimedia


Scripting AS"

Web Móbil

AS#

Animación

AS$

Nuevo motor de textoAIR " AIR #

Android

AS%

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

Web / Multimedia


Scripting AS"

Web Móbil

AS#

Animación

AS$

Nuevo motor de texto

Flexibilidad para Huesos y Nuevas herramientas Deco de dibujo

AIR " AIR #Android

AS%

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

Web / Multimedia


Scripting AS"

Web Móbil

AS#

Animación

AS$

Nuevo motor de texto

Flexibilidad para Huesos y Nuevas herramientas Deco de dibujo

AIR " AIR #Android

AplicacionesJuegos

AS%

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

Web / Multimedia

'*!! Adobe Flash CS #.#

Scripting AS"

Web Móbil

AS#

Animación

AS$

AIR #Android

AIR $Smart TV

AplicacionesJuegos

Autorecuperación y autoguardado.

(por fin!)

AS%

.5

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

Web / Multimedia

'*!! Adobe Flash CS #.#

Scripting AS"

Web Móbil

AS#

Animación

AS$

AIR " AIR #Android

AIR $Smart TV

AplicacionesJuegos

Autorecuperación y autoguardado.

(por fin!)

AS%

.5

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

Web / Multimedia

'*!' Adobe Flash CS"

AS"

Web Móbil

AS# AS$

Animación

AIR " AIR # AIR $Smart TVAndroid

AplicacionesJuegos

AS%

Herramienta para

creación de juegos

y contenidos para

dispositivos.

Exportar para HTML&

http://youtu.be/&cYxKEVa"N%

http://youtu.be/5cYxKEVa1N4




'*!% Adobe Creative Cloud

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

http://youtu.be/pC_eeT3aZls

http://youtu.be/pC_eeT3aZls

http://www.adobe.com/es/products/creativecloud.html

http://www.adobe.com/es/products/creativecloud.html

'*!% Adobe Flash CC

Solo ActionScript $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 AS"

Web Móbil

AS#

Animación

AS$

AIR " AIR #Android

AIR $Smart TV

Aplicaciones /Juegos

AS% AS!

'*!% Adobe Flash CC

Solo ActionScript $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 AS"

Web Móbil

AS#

Animación

AS$

AIR " AIR #Android

AIR $Smart TV

Aplicaciones /Juegos

AS% AS!

Casi por completo para crear aplicaciones y juegos.

Impresión / Publicidad


Trabajo del diseñador con Flash



Animación



Animación

Multimedia



Animación

Multimedia

Web



Animación

Multimedia

Web

Web Movil



Animación

Multimedia

Web

Web Movil

Aplicaciones y Juegos para PC



Animación

Multimedia

Web

Web Movil


Aplicaciones y Juegos para Movil y Tablets



Animación

Multimedia

Web

Web Movil


Aplicaciones y Juegos para Movil y Tablets

Aplicaciones y Juegos para Smart TV

Con lo visto en el semestrepara que salen preparados?

($! horas pedagógicas)

StopMotion

StopMotion

Animación

StopMotion

Animación

Banner

StopMotion

Animación

Banner

Catalogos interactivos

StopMotion

Animación

Banner


Infografias animadas

StopMotion

Animación

Banner



Multimedias parae-Learning

StopMotion

Animación

Banner



Multimedias parae-Learning

Web

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

www.academiamac.c [email protected]

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 Arti!cial

(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 E"ects Edición de Video con After

E"ects Creación y gestión de CuePoints

en After E"ects 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)

StopMotion

Gulp Making Of

http://youtu.be/ieN2vhslTTU

http://youtu.be/ieN2vhslTTU

http://youtu.be/fza5QdTfyxs

http://youtu.be/fza5QdTfyxs

StopMotion

Her Morning EleganceOren Lavie

Behind the scene

http://youtu.be/2_HXUhShhmY




http://youtu.be/JKptYcQuKxc

http://youtu.be/JKptYcQuKxc

Time Lapse

http://youtu.be/VHSxHy#EpEQ

http://youtu.be/VHSxHy0EpEQ

http://youtu.be/VHSxHy0EpEQ

Tilt Shift

http://youtu.be/o&mdIrbvSoE

http://youtu.be/o4mdIrbvSoE




Animación cuadro a cuadro

Os Sapos

http://youtu.be/P8Vr_kWaTC0

http://youtu.be/P8Vr_kWaTC0

Tablas Digitalizadoras

Wacom Bamboo

http://youtu.be/uI2ZHpgrezQ

http://youtu.be/uI2ZHpgrezQ


Wacom #% HD

http://youtu.be/0LHkHAHWEPk

http://youtu.be/0LHkHAHWEPk


Wacom Inkling

http://www.youtube.com/watch?v=fXbBA1DRE84&feature=share&list=PLFB5B923C3A5A5630

http://www.youtube.com/watch?v=fXbBA1DRE84&feature=share&list=PLFB5B923C3A5A5630

Radiohead - Creep by Monkeehub

Animación en Flash

http://youtu.be/2DhXcWZ85C8

http://youtu.be/2DhXcWZ85C8