DISEO DE BANNERS INFORMATIVOS INSTITUCIONALES, APLICADOS EN LA PLATAFORMA FLASH PARA LA CREACIN DE ANIMACIONES 2D

Introduccin que es Flash y porqu usarlo

Que es Flash?

Es una potente herrmienta creada inicialmente por Macromedia, actualmente propiedad de Adobe, fue creada inicialmente para realizar animaciones, pero actualmente las posiblidades de Flash son inmensas y extarordinarias, tanto en web, cds interactivos, presentaciones corporativas o de productos.

Porq usar flash?

Por la gran cantidad de posibilidades que nos brinda, entre las cuales tenemos: botones mens banners animados galeras fotogrficas video manejo de audio juegos (lenguaje de programacin Action Script) manejo de bases de datos (ayudado con otros lenguajes de programacin como PHP MySql) sitios web completos, etc Adems de eso la facilidad con que podemos crear animaciones de calidad aadiendole el bajo peso del archivo final en web (.swf), lo que agiliza la carga en los navegadores.

Manejo de interfase
Introduccin al manejo de interfase en Flash.
Es muy importante tener un conocimiento y manejo adecuado de la interfase ya que nos permitir optimizar el trbajo y sacarle el mximo provecho al programa, por lo que en el siguiente esquema se presenta los elementos principales que componen la interfase de Flash, y estos son: Barra de menus, Herramientas, Escenario, Penel Propiedades, Biblioteca, Panel de acciones, Otros paneles y Linea de tiempo,

Barra de menus

Lnea de Tiempo Otros Paneles

Herramientas Biblioteca

Escenario

Propiedades

Manejo de interfase
Barra de mens
La componen todos los menus que se encuentra en la parte superior y que cumple la misma funcin como en cualquier otro progama como es Photoshop, Ilustrador, Word, Excel. Nos permiten ingresar a todas las funciones o paneles del programa. Vamos a ver rapidamente estos menus y destacar los que nos ayudaran en este curso:

Manejo de interfase
Escenario
Es lo que est pintado de blanco y lo podemos tomar como el lienzo de nuestra obra, en el plasmaremos toda nuestra creatividad, podemos dibujar, podemos pintar, borrar, etc.

Ocultar la de tiempo: muestra u oculta la lnea de tiempo Barra navegacin escenas y simbolos : nos permite pasar de una escena a otra y de un movie a otro
para poder editarlos Espacio de trabajo : nos permite personalizar la visualizacin de nuestra area de trabajo

Editar escena : nos permite editar escena

Editar simbolo : nos permite editar smbolos seleccionados

Porcentaje de visualizacin : nos permite cambiar el tamao de visualizacin de nuestro documento

Manejo de interfase
Barra Herramientas
En ella podremos encontrar lodas las herramientas necesarias para dibujar objetos, seleccionar objetos, pintar, hacer degradados, hacer zoom, etc. Vamos a ver rapidamente para que sirven cada una de estas herramientas:

Seleccin: Como su nombre lo indica no sirve para seleccionar objetos que esten en nuestro escenario Subseleccin: nos permite seleccionar un nodo de un dibujo Trasformacin libre: nos sirve para poder rotar, agrandar, achicar objetos, y tranformacin de degradado, nos
sirve para hacer transformaciones en el degradado en su posicin y ngulo.

Lazo: nos permite seleccionar de manera libre a mano alzada Pluma: herramienta para realizar dibujos vectoriales a base de puntos o nodos Texto: para poner textos en nuestra escena Lnea: traza lneas Rectngulo: sirve para crear formas geomtricas Mano: permite desplasamiento en escenario Lpiz: herramienta para dibujar a mano alzada Pincel: herramienta para dibujar a mano alzada con pincel Bote de Tinta: pone contornos a los objetos Bote de Pintura: pone color a los objetos Cuentagotas: clona el color de un objeto Borrador: borra dibujo Zoom: acercamiento y alejamiento en escenario Color de trazo: color de borde de objetos Color de relleno: color de relleno de objetos Blanco y negro, intercambio de colores, sin color Ajustar a objetos: encadenamiento a objetos

Manejo de interfase
Panel Propiedades
Nos permite manejar las propiedades de cada objeto que est en nuestro escenario como son: tamao, color, efectos de trasnparencia, efectos de fundido, identificar que clase de smbolo es, nombre de instancia, posicin en el escenario. Tambien si damos click en el escenario nos permite configurar el tamao de nuestro documento, la velocidad con que se ejecuta, el color de fondo y la configuracin para la posterior publicaicn.

Manejo de interfase
Repaso de todas las herramientas
Dibuje 3 plgonos diferentes: un cuadrado de 90 x 90 px de color de relleno rojo y color de borde negro, un crculo de 70 px de dametro de color de relleno azul color de borde naranja, y un pentgono de 200 px de ancho de color negro de relleno y borde de color celeste, hacer 1 copia de cada uno y las copias con color de relleno degradado de diferente tipo (lineal y radial sin borde. Una vez hechos esto podremos aplicar las diferentes herramientas de borrado selecciny demas. Y como extra terminamos haciendo una animacin bsica. Usaremos el archivo (pelota.gif) Ejercicios prcticos para el manejo de todas las herramientas

Manejo de interfase
Panel acciones
Nos permite ingresar acciones o sentencias de programacin Action Script para contralar nuestra pelcula y a los objetos que interactuan en ella. Existe el modo Normal (asisitido) y el modo Experto

Manejo de interfase
Biblioteca y otros paneles
La biblioteca es como su nombre indica es un contenedor de todo los simbolos que creemos o importemos a nuestro archivo, asi por ejemplo contiene: Movie Clips, botones, grficos, imgenes, video, audio, componentes, etc. Hay 2 tipos debibliotecas la del documento y las bibliotecas comunes Nota: Una vez creado un smbolo por ms que lo eliminemos del escenario continuar almacenado en la biblioteca. Otros paneles son: color, muestras de color, aliniacin, escenas, trasnformar, filtors, parmetros, etc. Tanto a la biblioteca como a los otros paneles les podemos activar o desactivar desde el men ventana.

Smbolos tipos, caractersticas y manejo de sus instancias en lnea de tiempo y escenario

Un smbolo es un objeto que esta en la biblioteca y una instancia es una copia de ese objeto en el escenario, esto quiere decir, que el smbolo puede tener varias copias en el escenario, y cada una puede actura completamente diferente, al contrario que si hacemos un cambio en el smbolo original cambia en todas las instancias. Cada smbolo posee una Lnea de Tiempo y un escenario exclusivos que incluyen capas. Al crear un smbolo, se elige el tipo de smbolo en funcin de cmo se desea utilizar dicho smbolo en el documento. Flash maneja tres tipos de smbolos, para realizar sus animaciones y facilitarnos al interactividad en nuestra pelcula estos son: Movie Clip Botn Grfico

Grfico. Se utiliza smbolos Grficos (Graphics) para las imgenes estticas y para crear animaciones reutilizables ligadas a la lnea de tiempo principal. los smbolos grficos funcionan de manera sincronizada con la lnea de tiempo principal. Los controles y sonidos interactivoss no funcionan en la secuencia de animacin de un smbolo grfico Movie Clip. Se utiliza smbolos de Clip de Pelcula (Movie Clip) para crear piezas de animacin reutilizables. Los clips de pelcula tienen sus propias lneas de tiempo de varios fotogramas, independientes de la lnea de tiempo principal. Se encuentran dentro de una lnea de tiempo principal que contiene elementos interactivos como controles, sonidos e incluso otras instancias de clip de pelcula. Tambin pueden colocarse instancias de clip de pelcula dentro de la linea de tiempo de un smbolo para crear botones animados. Botn. Se utiliza smbolos de Botn para crear botones interactivos que respondan a las pulsaciones y desplazamientos del ratn, o a otras aciones a una instancia del botn.

Lnea de tiempo y clase de fotogramas

La lnea de tiempo es en donde vamos a poder realizar nuestras animaciones, a continuacin una descripcin de cada elemento que conforman la lnea de tiempo. Seccin capas: en esta seccin podemos crear capas como cualquier otro programa de diseo tiene el mismo principio, adems existen tres tipos de capas: capa normal, capa tipo mscara, y capa gua de movimiento. Lnea de tiempo (espacio para fotogramas): es donde vamos a poder realizar toda nuestra animacin. Herramientas e informacin de la linea de tiempo: aqu tenemos informacin como a cuantos frames esta corriendo nuestra animacin, en que frame estamos ubicados, el tiempo q dura nuetra animacin en segundos, herramientas como papel cebolla

Lnea de tiempo (espacio para fotogramas)

Seccin capas

Herramientas e informacin de la lnea de tiempo

Clases de fotogramas

Existen 4 variedades de fotogramas: fotograma normal fotograma contenedor vaco fotograma clave fotograma clave vaci

Lnea de tiempo y tipos de animacin

Una vez que aprendimos a crear los diferentes tipos de smbolos ahora vamos a animarlos e interactuar con ellos, a continuacin conoceremos los diferentes tipos de animacin y algunas caractersticas de las capas que nos ayudarn a crear otro tipo de movimiento y efectos adicionales: forma: ese diferencia en que grada el cambio de la forma del objeto, realizada a travs de la manipulacin de sus puntos de control bezier. Tambin permite cambiar el color. movimiento: es que la debemos elegir cuando los objetos de los dos fotogramas claves slo se diferencian en su posicin, escala o rotacin frame por frame: debemos dibujar cada uno de los fotogramas de la animacin uno por uno, al estilo de las clsicas pelculas de dibujos animados. Permite una gran flexibilidad, pero a costa de un elevado esfuerzo. Adems, el archivo debe almacenar los cambios de cada fotograma. Efectos que podemos crear en animacin con la ayuda de las capas Capa Gua de movimiento: Una gua de movimiento es una capa especial que marca una trayectoria para los smbolos de la capa a la que afecta, para que dichos smbolos la sigan, durante el movimiento. Esta capa es invisible durante la reproduccin y permite dibujar cualquier tipo de dibujo vectorial, que nos permitir crear un movimiento no forzosamente rectilneo. Capa tipo mscara: las mscaras de capa nos permiten mostrar partes de una imagen o grfico de la capa situada debajo, esto es, todo aquello que se dibuje en ellas viene a ser como un agujero por el que se vern los elementos que estn situados en las capas inferiores. Aunque de manera habitual crearemos las Mscaras a partir de una forma geomtrica, un elemento de mscara puede ser tambin una forma rellena, un bloque de texto, una instancia de un smbolo de grfico o un clip de pelcula.

Ejercicios prcticos creacin de los diferentes smbolos y el manejo de instancias animacin

Crear 3 grficos diferentes no importa la forma, 3 movie clips, 3 botones 3 grficos con los siguientes nombres G1, G2, G3 con animacin bsica en G1 3 movie clips MC 1, MC 2, MC3, con animacin dentro de cada uno, vamos a crear en MC 1 interpolacin de forma y los 2 restantes de movimiento 3 botones BTN 1, BTN 2 y BTN 3 este ltimo invisible. Poner en el escenario una instancia de MC 1 y ponerle una gua de movimiento Ponemos una instancia de MC2 en el escenario y le damos una mscara Y los botones los dejamos en la librera para luego interactuar con ellos.

Action Script
El ActionScript es el lenguaje de programacin que ha utilizado Flash desde sus comienzos, y que por supuesto, emplea Flash CS3. A grandes rasgos, podemos decir que el ActionScript nos permitir realizar con Flash CS3 todo lo que nos propongamos, ya que nos da el control absoluto de todo lo que rodea a una pelcula Flash. Absolutamente de todo. Sin embargo, en este curso vamos a ver una pequea introduccin a ActionScript bastante bsica. Caractersticas generales del ActionScript * El ActionScript es, como su nombre indica, un lenguaje de script, esto quiere decir que no har falta crear un programa completo para conseguir resultados, normalmente la aplicacin de fragmentos de cdigo ActionScript a los objetos existentes en nuestras pelculas nos permiten alcanzar nuestros objetivos. * El ActionScript es un lenguaje de programacin orientado a objetos, tiene similitudes, por tanto, con lenguajes tales como los usados en el Microsoft Visual Basic, en el Borland Delphi etc... aunque, evidentemente no tiene la potencia de un lenguaje puramente orientado a objetos derivado del C o del Pascal como los anteriores... * El ActionScript presenta muchsimos parecidos con el Javascript; si conoce Javascript, la sintaxis y el estilo de ActionScript le resultarn muy familiares. Las diferencias entre ambos lenguajes las puede encontrar en la ayuda que acompaa al Flash CS3. * En la mayor parte de las ocasiones, no ser necesario "programar" realmente, Flash CS3 pone a nuestra disposicin una impresionante coleccin de "funciones" (de momento entenderemos "funciones" como "cdigo ActionScript que realiza una funcin determinada") ya implementadas que realizan lo que buscamos, bastar con colocarlas en el lugar adecuado.

Escribiendo mi primer Script

Podemos usar action script en movie clips en botones y en los fotogramas clave y clave vaco, de la linea de tiempo. Lo que nos interesa aprender en estos banners publicitarios es que nos lleven a algn lugar especfico de un sitio web, por lo cual la funcin que usaremos para este propsito es: getURL () Pero tembin necesitamos aprender unas funciones bsicas para botones on (release){ } Para to esto usaremos el modo normal del panel de acciones