Instituto de Educacin Superior Tecnolgico Privado

SEMANA

05

ADOBE FLASH CS3

Flash CS3 es una potente herramienta desarrollada por Adobe que ha superado las mejores expectativas de sus creadores. Inicialmente Flash fue creado por Macromedia (Adobe) con el objeto de realizar animaciones vistosas para la web, as como para crear GIFs animados. Los motivos que han convertido a Flash CS3 en el programa elegido por la mayora de los diseadores web profesionales y aficionados son varios. Los logotipos de Flash son propiedad de Adobe, as como las marcas registradas Flash y Adobe.

POR QU USAR FLASH? Las posibilidades de Flash son extraordinarias, cada nueva versin ha mejorado a la anterior, y el actual Flash CS3 no ha sido menos. Aunque su uso ms frecuente es el de crear animaciones sus usos son muchos ms. Son tantos, que todos los diseadores web deberan saber utilizar Flash. Flash ha conseguido hacer posible lo que ms se echa en falta en Internet: Dinamismo, y con dinamismo no slo nos referimos a las animaciones, sino que Flash permite crear aplicaciones interactivas que permiten al usuario ver la web como algo atractivo, no esttico (en contraposicin a la mayora de las pginas, que estn realizadas empleando el lenguaje HTML). Con Flash podremos crear de modo fcil y rpido animaciones de todo tipo. Adems sus desarrolladores estn apostando muy fuerte por ActionScript, el lenguaje de programacin Flash. EL ESCENARIO El escenario es un rea rectangular en la que se coloca el contenido grfico al crear documentos de Flash. El escenario delentorno de edicin representa el espacio rectangular de Flash Player o del navegadorWeb donde se muestra el documentodurante la reproduccin. Para cambiar el aspecto del escenario mientras trabaja, utilice las opciones Acercar y Alejar. Puedeutilizar la cuadrcula, las guas y las reglas como ayuda para colocar los elementos en el escenario.

Prof. MOQUILLAZA LVANO, Cristopher

TALLER DE DESARROLLO WEB II

LNEA DE TIEMPO La lnea de tiempo organiza y controla el contenido de un documento a travs del tiempo en capas y fotogramas. Al igualque en las pelculas, los documentos de Flash dividen el tiempo en fotogramas. Las capas son como varias bandas depelcula apiladas unas sobre otras, cada una de las cuales contiene una imagen diferente que aparece en el escenario. Loscomponentes principales de la lnea de tiempo son las capas, los fotogramas y la cabeza lectora. Las capas de un documento aparecen en una columna situada a la izquierda de la lnea de tiempo. Los fotogramascontenidos en cada capa aparecen en una fila a la derecha del nombre de la capa. El encabezado de la lnea de tiemposituado en la parte superior de la lnea de tiempo indica los nmeros de fotograma. La cabeza lectora indica el fotogramaactual que se muestra en el escenario. Mientras se reproduce el documento, la cabeza lectora se desplaza de izquierda aderecha de la lnea de tiempo. La informacin de estado de la lnea de tiempo situada en la parte inferior de la misma indica el nmero del fotogramaseleccionado, la velocidad de fotogramas actual y el tiempo transcurrido hasta el fotograma actual.

LAS CAPAS Las capas ayudan a organizar las ilustraciones de los documentos. Los objetos de una capa pueden dibujarse y editarse sinque afecten a objetos de otras capas. Para dibujar, pintar o modificar una capa o una carpeta, primero se debe seleccionar en la lnea de tiempo para activarla. Un icono con forma de lpiz junto a una capa o carpeta de la lnea de tiempo indica que la capa o carpeta est activa. Slopuede haber una capa activa en cada momento (aunque se pueda seleccionar ms de una capa a la vez). Cuando se crea un documento de Flash, contiene una sola capa. Para organizar las ilustraciones, animaciones y los demselementos del documento, aadams capas. Asimismo, es posible ocultar, bloquear o reordenar capas. El nmero de capasque pueden crearse slo est limitado por la memoria del equipo. Para crear efectos sofisticados, el uso de capas de gua especiales facilita el dibujo y la edicin. Tambin se pueden utilizarcapas de mscaras. TALLER DE DESARROLLO WEB II

Prof. MOQUILLAZA LVANO, Cristopher

CREACIN DE CAPAS Cuando se crea una capa o una carpeta, sta aparece encima de la capa seleccionada. La capa recin creada se convierte enla capa activa. CREAR UNA CAPA: - Realice uno de los siguientes pasos: Haga clic en el botn Insertar capa situado en la parte inferior de la lnea de tiempo. Seleccione Insertar > Lnea de tiempo > Capa. Haga clic con el botn derecho del ratn (Windows) o con la tecla Control presionada (Macintosh) en un nombre decapa de la lnea de tiempo y elija Insertar capa en el men contextual. PANEL BIBLIOTECA El panel Biblioteca es donde se guardan y organizan los smbolos creados en Flash, adems de archivos importados talescomo grficos de imgenes de mapa de bits, archivos de sonido y clips de vdeo. En el panel Biblioteca puede organizar encarpetas los elementos de biblioteca, ver con qu frecuencia se utilizan en un documento y ordenarlos por tipo. Para mostrar el panel Biblioteca, seleccione Ventana > Biblioteca o presione Control+L (Windows) o Comando+L(Macintosh).

PANEL ACCIONES El panel Acciones permite crear y editar cdigo ActionScript para un objeto o fotograma. El panel Acciones se activacuando se selecciona una instancia de un fotograma, botn o clip de pelcula. El ttulo del panelAcciones cambia aAcciones. Para mostrar el panel Acciones, seleccione Ventana > Acciones o presione F9.

Prof. MOQUILLAZA LVANO, Cristopher

TALLER DE DESARROLLO WEB II

FOTOGRAMAS TIPOS Y USOS Un fotograma representa el contenido de la pelcula en un instante de tiempo. Por tanto, una animacin no es ms que una sucesin de fotogramas. Todo esto se puede controlar desde la Lnea de Tiempo, pero no todos los fotogramas tienen el mismo comportamiento ni se tratan igual. FOTOGRAMA CLAVE: Son fotogramas con un contenido especfico, se crean, por tanto, para insertar en ellos un nuevo contenido no existente en la pelcula. Se identifican por tener un punto negro en el centro y cuando est vaco se le diferencia por una lnea negra vertical. FOTOGRAMA NORMAL: Estos fotogramas siempre siguen a los fotogramas clave, no representan contenido nuevo y son de color gris. El ltimo fotograma de una secuencia de fotogramas normales viene representado por un cuadrado blanco sobre fondo gris. En el ejemplo, los fotogramas del 2 - 5 son fotogramas normales, su contenido no es nuevo, esto es, es el mismo que el del fotograma 1. Como vemos, su misin es prolongar la duracin de un fotograma clave. FOTOGRAMA CONTENEDOR: No son fotogramas propiamente dichos, sino que representan un lugar dentro de la Lnea de Tiempo en la que se puede insertar uno. Por defecto ocupan toda la pelcula y Flash no los tendr en cuenta al publicar la pelcula. En la imagen anterior, son fotogramas contenedor todos los fotogramas a partir del 12 (incluido). 1 de cada 5 fotogramas contenedor es gris, el resto, blancos. FOTOGRAMA VACO: Son fotogramas sin contenido, Su color es blanco. En la imagen, los fotogramas del 6 al 11 (incluidos) son fotogramas vacos. Es importante resaltar que Flash no ignora estos fotogramas y simplemente mostrar una imagen en blanco (no dar por terminada la animacin). De modo que si queremos que un objeto aparezca en el fotograma 1 y despus otra vez en el fotograma 10. Los fotogramas del 2 al 9 debern ser fotogramas vacos ya que as el objeto "desaparecer" y volver a aparecer. FOTOGRAMA ETIQUETADO: Contiene en la parte superior una "bandera" roja que indica que tienen un nombre asociado. Dicho nombre se establece desde el Panel "Propiedades". Si la duracin del fotograma es la suficiente, se puede leer el nombre (o etiqueta) que identifica al conjunto de fotogramas.

Prof. MOQUILLAZA LVANO, Cristopher

TALLER DE DESARROLLO WEB II

FOTOGRAMA CON ACCIONES ASOCIADAS: Contienen en la parte superior una "a" que indica que tienen una accin asociada. Estos fotogramas son especialmente importantes, pues estas acciones, en principio "ocultas" pueden cambiar el comportamiento de la pelcula. En la imagen, la accin existente en el fotograma 1 afecta tambin al 2 y al 3 (por ser fotogramas normales). FOTOGRAMAS ANIMADOS: Pueden ser de 2 tipos: 1) FOTOGRAMAS DE ANIMACIN DE MOVIMIENTO: Vienen caracterizados por el color morado y representa el movimiento (con o sin efectos) de un objeto, que pasa de la posicin delfotograma inicial al final. Para representar esta animacin aparece una flecha entre estos fotogramas claves. Esta imagen representa el ejemplo de la pelota. Del fotograma 1 se pasa al 6, (Flash representar el movimiento entre ambas posiciones en la pelcula final) y del 6 al 11. Otro movimiento.

2) FOTOGRAMAS DE ANIMACIN DE FORMA: Vienen caracterizados por el color verde y representan un cambio en la forma de un objeto, que pasa de la forma que tena en el Fotograma inicial a la del final. Para representar esta animacin aparece una flecha entre estos Fotogramas claves. Este ejemplo, similar al de arriba representa el cambio de forma de la pelota. En el fotograma 1 tendra la forma original, en el fotograma 5, forma de cuadrado (por ejemplo) y en el 11, otra forma distinta.

INTERPOLACIN DE MOVIMIENTO Es la accin bsica de las animaciones en Flash. Permite desplazar un smbolo Flash de un lugar a otro del escenario, siendo necesarios nicamente dos fotogramas, lo que optimiza mucho el rendimiento de la pelcula. Es importante destacar que para que una Interpolacin de movimiento se ejecute correctamente aquellos objetos que intervengan debern haber sido previamente convertidos a smbolo. Cuando realicemos la interpolacin correctamente observaremos un aspecto como este en la lnea de tiempo. TALLER DE DESARROLLO WEB II

Prof. MOQUILLAZA LVANO, Cristopher

La velocidad en el movimiento de las pelculas la podemos cambiar tambin modificando su parmetro en la barra de tiempos, pero esto no cambiar lo que hemos comentado anteriormente.

La velocidad est expresada en Fotogramas Por Segundo (fps) y se puede modificar haciendo doble clic en el lugar que hemos indicado de la barra de tiempos. A mayor valor ms velocidad, pero se deben poner siempre suficientes fotogramas para que se desarrolle la animacin como queremos. Observa en las siguientes imgenes dnde est situada la pelota en el primer fotograma de la animacin y su posicin final en el ltimo fotograma:

Prof. MOQUILLAZA LVANO, Cristopher

TALLER DE DESARROLLO WEB II