ANIMACIN WEB

CATEDRTICO: LVARO ZAVALA

ANIMACIN WEB
ANIMACIN Se refiere al proceso de generacin de imgenes donde cada imagen es una alteracin de la anterior La presentacin de estas imgenes a una velocidad suficiente produce la sensacin de movimiento

ANIMACION WEB
Web Animation. Cualquier animacin que est pensada para ser utilizada en una pgina web, pues emplea un formato ampliamente extendido y que generalmente puede visualizarse directamente desde un navegador web. Las animaciones web suele utilizarse para publicidad, banners, detalles de diseo, efectos, botones animados, etc.

IMPLEMENTACIONES DE LA ANIMACIN WEB

Las animaciones en la web suelen implementarse a travs de: Formatos grficos: Silverlight (XAML, VB .NET, C# .NET) Flash (puede incluir programacin en ActionScript). Shockwave. GIF animados u otros formatos grficos animados

IMPLEMENTACIONES DE LA ANIMACIN WEB

Programacin y diseo web: HTML dinmico (con JavaScript u otros). Java (empleando Java Applets). Formatos de video:

AVI, MPG, WMV, etc. Si bien no se consideran animaciones, pueden cumplir una funcin similar.

SILVERLIGHT

QU ES SILVERLIGHT?
Es un complemento para varias plataformas y mltiples exploradores y dispositivos que proporciona una generacin de medios basados en .NET y aplicaciones interactivas para la web y desktop Es una estructura para aplicaciones web que agrega nuevas funciones multimedia como la reproduccin de vdeos, grficos vectoriales, animaciones e interactividad, en forma similar a lo que hace Adobe Flash.

MOONLIGHT
Se lanz una versin en conjunto con Novell de Silverlight llamada Moon light, la cual es cdigo abierto para los sistemas operativos basados en UNIX.

INTRODUCCION A SILVERLIGHT
MULTIPLATAFORMA Windows Mac OS Linux (moonlight)

MULTINAVEGADOR Firefox Opera Chrome IE Etc.

SILVERLIGHT
No es dependiente de .NET Ni del cliente Ni del servidor

La Clave: XAML + CLR

MODOS DE EJECUCION
Dentro del navegador Afuera del Navegador (Similar a las aplicaciones de escritorio)

SILVERLIGHT
ULTIMA VERSION Silverlight 5 REQUISITOS BSICOS Visual Studio .NET 2010 Silverlight 5 tools for visual studio NET 2010 Silverlight 5 SDK Expression Blend 4

MAS HERRMIENTAS
Expression designer KaXaml Eclipse

RECURSOS EN LINEA
www.Silverlight.net http://Blogs.laligasilverlight.com

FUNDAMENTOS
La plantilla crea una solucin con: Proyecto Silverlight Proyecto Opcional de ASP NET para probar el proyecto Silverlight Las aplicaciones Silverlight es un archivo con Extensin .XAP Es un archivo ZIP Contiene como mnimo el ensamblado principal y un manifiesto

EJEMPLO
Ejemplo de botn y textblock en VS2010

XAML
XAML (acrnimo pronunciado xammel del ingls eXtensible Application Markup Language, Lenguaje Extensible de Formato para Aplicaciones en espaol) es el lenguaje de formato para la interfaz de usuario para la Base de Presentacin de Windows (WPF por sus siglas en ingls) y Silverlight(wpf/e), el cual es uno de los "pilares" de la interfaz de programacin de aplicaciones .NET en su versin 3.0 (conocida con anterioridad con el nombre clave WinFX).

XAML
XAML es un lenguaje declarativo basado en XML, optimizado para describir grficamente interfaces de usuarios visuales ricas desde el punto de vista grfico, tales como las creadas por medio de Adobe Flash. XAML es un lenguaje declarativo basado en XML, optimizado para describir grficamente interfaces de usuarios visuales ricas desde el punto de vista grfico, tales como las creadas por medio de Adobe Flash.

XAML: EJEMPLO
Crear XAML con VS2010 Crear XAML con Expression web

Figuras Brochas Controles Contenedores Transformaciones

ANIMACIONES, ESTADOS Y COMPORTAMIENTOS

OBJETIVO
Enriquecer la experiencia del usuario Decorativas o interactivas Realzar el aspecto visual de la interfaz Atraer la atencin del usuario

ANIMACIONES
Modificar las propiedades de los objetos Estas modificaciones ocurren en un periodo de tiempo

El cambio de valor de una propiedad sobre un

periodo de tiempo forma el efecto de animacin

ELEMENTOS
Tipo de animacin (DoubleAnimation,
ColorAnimation) El Storyboard (El guion de nuestra animacion) Eventos que interactan con la animacin Points

Transformaciones
Funciones de suavizacin

INTERPOLACIONES
Interpolacin Lineal Interpolacin No-Lineal

Interpolacin de Movimiento Interpolacin de Forma

COMO CREAR LAS ANIMACIONES

Diseador Microsoft Expression Blend 4 XAML Code Behind (VB, C#)

EXPRESSION BLEND
Heramienta amigable para la edicion de XAML Paneles Importantes Object y timeline Properties Resources Data Projects ToolBox

EJEMPLOS
Cuadro giratorio con interpolacin lineal Pelota rebotando con drag and drop e

interpolacin no lineal
Rectngulo que cambia de color, forma y giro

Rectngulo con gradiente (repeticion ciclica)

EJERCICIOS

Crear 2 comportamientos fsicamente aceptables

con 2 objetos reales

RECURSOS Y ESTILOS
Recursos: es un diccionario Estilos permiten estilizar un control o conjunto de controles Se guardan como recursos Tambin hay estilos implcitos Desarrollo de Ejemplo

CONTROLES Y PLANTILLAS
La mayora de Controles Tienen una plantilla predefinida La podemos cambiar con nuestro propio diseo Desarrollo de Ejemplo

CLIC DERECHO
Primero: MouseRightButtonDown
Manejar el evento con e.handled = true

Segundo: MouseRightButtonUp
Opcionalmente podemos obtener la coordenada del mouse usando el mtodo GetPosition()

PRXIMA CLASE
Adicionar sonidos a pelculas. Publicacin de pelculas. Realizacin de ejercicios