C.P.F.

Santa Mara de Jess

MANUAL DE ADOBE FLASH CS5

Profesor: Yhonny Mitac Julca

Promoviendo una Educacin Humanista

C.P.F. Santa Mara de Jess

QU ES FLASH?

Promoviendo una Educacin Humanista

Flash Professional CS5 es una potente herramienta desarrollada por Adobe que ha superado las mejores expectativas de sus creadores. Flash fue creado con el objeto de realizar animaciones y diseos vistosos para la web, y grficos interactivos. Las posibilidades de Flash son extraordinarias, con cada nueva versin se han mejorado y simplificado las herramientas, y cada vez es posible lograr mejores efectos con menos trabajo. Aunque su uso ms frecuente es el de crear animaciones sus usos son muchos ms. Durante mucho tiempo, Flash consigui 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. Con Flash podremos crear de modo fcil y rpido desde animaciones simples para lograr algunos efectos visuales, hasta aplicaciones complejas, como juegos .

EL ESPACIO DE TRABAJO DE FLASH

El espacio de trabajo predeterminado que viene con Flash es el Clsico. Probablemente al abrir el programa te vas a encontrar con un panel de herramientas a tu izquierda, la lnea de tiempo en la parte superior, y finalmente a tu derecha el panel de propiedades. Y claro, en el centro el lienzo sobre el cual vamos a trabajar. Vamos al men Ventana > Espacio de trabajo y seleccionemos la opcin Nuevo espacio de trabajo. Va a aparecer una ventanita donde te pedir un nombre para el espacio de trabajo. Escoge un nombre y click en Aceptar. Ahora puedes cambiar tu espacio de trabajo como ms te guste. En el men Ventana puedes elegir los paneles que quieras tener en el escenario, para luego organizarlos como t quieras.

QU ES ACTIONSCRIPT ?
ActionScript es el lenguaje de programacin que ha utilizado Flash desde sus comienzos, y que por supuesto, emplea Flash CS5. A grandes rasgos, podemos decir que el ActionScript nos permitir realizar con Flash CS5 todo lo que nos propongamos, ya que nos da el control absoluto de todo lo que rodea a una pelcula Flash. Absolutamente de todo.
CARACTERISTICAS PRINCIPALES

Como ya hemos comentado, el ActionScript es el lenguaje de programacin propio de Flash. El ActionScript est basado en la especificacin ECMA-262, al igual que otros lenguajes como Javascript.

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.

Prof. Yhonny MItac Julca

2

C.P.F. Santa Mara de Jess

Promoviendo una Educacin Humanista

LAS HERRAMIENTAS Y SUS UTILIDADES

Herramienta de Seleccin (V) sala para seleccionar, mover y deformar objetos (si mantienes presionado el botn izquierdo del ratn y lo arrastras, puedes hacer una seleccin rectangular) Herramienta Convertir punto de Ancla (C) te Herramienta de Subseleccin (A) sala para modificar objetos por sus nodos permite modificar los puntos de ancla para as modificar la curvatura de una lnea. Herramienta Eliminar punto de Ancla (-) sala para eliminar un punto de ancla en una lnea curva.

Herramienta de Transformacin Libre (Q) sala para aumentar o disminuir el tamao de objetos (para aumentar o disminuir proporcionalmente, mantn presionada la tecla Shift)

Herramienta Texto (T) sala para introducir un texto.

Herramienta Lnea (N) sala para dibujar una lnea recta (para dibujar una lnea totalmente horizontal, vertical o en diagonal, mantn presionada la tecla Shift)

Herramienta de Transformacin de Degradado (F) (surge al mantener presionado el botn de la herramienta de Transformacin Libre sala para modificar degradados. Herramienta Rectngulo (R) sala para dibujar un rectngulo (para dibujar un cuadrado perfecto mantn presionada la tecla Shift).

Herramienta de rotacin 3D (W) y herramienta de Traslacin 3D (G) (slo compatibles con actionscript 3.0) salas para transformar objetos simulando 3D

Herramienta valo (O) sala para dibujar un valo (para dibujar un crculo perfecto mantn presionada la tecla Shift)

Herramienta Lazo (L) sala para hacer selecciones a mano alzada.

Herramienta Rectngulo Simple (R) te permite dibujar un rectngulo o cuadrado y curvar fcilmente sus vrtices.

Herramienta Pluma (P) sala para dibujar lneas rectas o curvas. Herramienta Aadir punto de Ancla (+) sala para aadir un punto de ancla en una lnea (te permite curvarla). Herramienta valo Simple (O) te permite dibujar un valo o crculo y cortarlo fcilmente (para que quede una especie de pacman o pizza )

Prof. Yhonny MItac Julca

3

C.P.F. Santa Mara de Jess

Herramienta PolyStar sala para dibujar polgonos regulares o estrellas (modifica las propiedades en el panel propiedades).

Promoviendo una Educacin Humanista

borde ya existente.

Herramienta Cuentagotas (I) sala para seleccionar un color y automticamente pasar a la herramienta

Herramienta Lpiz ( Y) sala para dibujar lneas a mano alzada.

Cubo de pintura.

Herramienta Borrador (E) sala para borrar rellenos Herramienta Pincel (B) sala para dibujar lneas (que funcionan como rellenos) a mano alzada. Herramienta Rociador (B) sala para rociar formas (que son smbolos en la biblioteca) sobre el escenario. Herramienta Mano (H) sala para deslizarte a lo largo Herramienta Deco (U) permite incorporar una decoracin en el escenario (puede interpolarse). del escenario (tambin puede utilizarse manteniendo presionada la barra espaciadora). y/o bordes (al seleccionarlo aparecern tres botones: uno sirve para regular el grosor, otro para seleccionar qu borrar, y una canillita para borrar un objeto entero.

Herramienta Hueso (X) y herramienta Vinculacin (Z) (slo compatibles con actionscript 3.0) permiten simular el movimiento del esqueleto humano (es una herramienta muy interesante para animar personajes y darles cierto realismo).

Herramienta Zoom (M) es una lupa (manteniendo presionado Alt aleja). Adems de la lupa puedes presionar Ctrl + + para acercar o Ctrl + - para alejar.

Debajo de estas herramientas hay un lapicito que sirve Herramienta Cubo de pintura (K) sala para agregar relleno a una forma cerrada compuesta por una lnea, o bien para cambiar el color de un relleno ya existente. para seleccionar el color de borde, el alfa (transparencia) o si prefieres que el objeto no tenga borde. A su lado hay un cubo de pintura para seleccionar el color de relleno, el alfa o si prefieres que el objeto no tenga relleno. Herramienta Bote de tinta (S) sala para agregar borde a un relleno, o bien para cambiar el color de un

Prof. Yhonny MItac Julca

4

C.P.F. Santa Mara de Jess

DEGRADADOS Y PANEL DE COLOR

Promoviendo una Educacin Humanista

Si no tienes este panel en el espacio de trabajo brelo en el men Ventana.

Click en el botn de relleno y selecciona el pequeo rectngulo con el degradado de blanco a negro. Vers que puedes modificar este degradado agregando puntos y colores, movindolos, cambindolos de color o eliminndolos (presionando Ctrl).

Una vez que te guste el resultado puedes modificar el degradado con la herramienta Transformacin de degradados (puedes girarlo, achicarlo, torcerlo, etc).

BIBLIOTECA
Si no tienes este panel en el espacio de trabajo brelo en el men Ventana. En la biblioteca se encuentran los smbolos y las imgenes, videos, sonidos o lo que sea que importes para incorporar al escenario. Para importar un archivo a la biblioteca debes ir al men Archivo > Importar > Importar a biblioteca y seguido de ello seleccionas el archivo. Para importar video debes elegir la opcin Importar video.

Para insertar un nuevo smbolo (que puede ser un Clip de pelcula, Botn o Grfico) ve al men Insertar > Nuevo smbolo, o bien presiona Ctrl+F8. Dale un nombre, selecciona el tipo de smbolo y clickea Aceptar. Vas a entrar automticamente al smbolo creado, y ahora puedes modificar dicho smbolo. Una vez que hayas terminado de modificar el smbolo a tu gusto, vuelve a la Escena

Prof. Yhonny MItac Julca

5

C.P.F. Santa Mara de Jess

Promoviendo una Educacin Humanista

principal y para incorporar el smbolo en el escenario ve a la biblioteca y arrstralo desde all.

CLIP DE PELCULA / MOVIECLIP / MC

Puedes incorporar en l Interpolaciones de Movimiento (ya veremos ms tarde qu son), otros smbolos o lo que t quieras.

BOTN
Tienes en l cuatro estados: Reposo, que es cuando no tiene encima al cursor; Sobre, que es cuando el cursor est encima del botn; Presionado, que es cuando el usuario mantiene presionado el botn izquierdo del ratn; por ltimo la Zona Activa, que en realidad no se ve, all puedes dibujar un rectngulo de cualquier color para indicar qu partes del escenario pertenecen al botn.

PANEL DE PROPIEDADES
Si no tienes este panel en el espacio de trabajo brelo en el men Ventana, o bien presionando Ctrl + F3. Aqu puedes cambiar las propiedades de cualquier objeto, interpolacin, smbolo, relleno, borde o lo que sea. Puedes darles nombres de instancia a los smbolos, lo cual te va a servir de mucho cuando tengas que programar con actionscript; puedes agregar filtros a los textos y clips de pelcula (ya sean sombras, desenfocados, iluminados, bisel, etc.); puedes cambiar las propiedades de color de los clips de pelcula o botones (alfa, tinta, brillo, etc.); puedes cambiar los tipos de letra, tamaos y colores de los textos; incluso puedes agregar efectos a las interpolaciones de movimiento y forma.

CMO CAMBIAR LAS PROPIEDADES DEL DOCUMENTO

En cualquier lugar vaco del escenario da click derecho + Propiedades del documento. Ah puedes variar el tamao del lienzo, color de fondo, fps y unidad de regla.

Prof. Yhonny MItac Julca

6

C.P.F. Santa Mara de Jess

CAPAS

Promoviendo una Educacin Humanista

Te permiten organizar los distintos componentes de tu pelcula (fondo, textos, animaciones, o lo que necesites).

LNEA DE TIEMPO

Prof. Yhonny MItac Julca

7

C.P.F. Santa Mara de Jess

INTERPOLACIONES

Promoviendo una Educacin Humanista

Se podra decir que llegamos a la parte ms importante de esta gua. Ac se juntan todos los otros conceptos para poder animar. Tenemos dos tipos diferentes de interpolacin: Interpolacin de movimiento e interpolacin de forma. Son bastante diferentes, la primera sirve para mover (como su nombre lo indica) smbolos, sean botones, MC o grficos, y la segunda sirve para cambiar color o forma de un objeto que no es un smbolo. Vamos a ver cada una por separado.

INTERPOLACIN DE MOVIMIENTO
Qu es? Una forma de animar objetos, los cuales deben ser Clips de pelcula.

Qu vara del objeto? Podemos variar el tamao, posicin en el escenario, color (mediante el panel de propiedades) o filtros.

Cmo se aplica? Primero que nada seleccionamos el objeto que queremos animar, y presionamos F8 para convertirlo en un Clip de Pelcula. Seguido de eso insertamos un fotograma clave en el fotograma que queramos (click derecho en el fotograma + Insertar fotograma clave). En este fotograma hacemos las variaciones que queramos hacerle al clip de pelcula. Entre el fotograma 1 y el fotograma x donde se encuentren las variaciones del clip, hacemos click derecho y seleccionamos la opcin Crear interpolacin clsica (ms tarde veremos la nueva interpolacin de movimiento para flash CS4 y CS5). Y ya est, podemos ver el resultado presionando Ctrl + Enter para probar la pelcula. Qu pasa si yo quiero que pare la animacin al terminar? Para eso hace falta algo de actionscript bsico. En una nueva capa, al final de la animacin insertamos un fotograma clave (F6), abrimos el panel de acciones (si no est en el espacio de trabajo lo abrimos el men ventana (o bien presionando F9), y escribimos esto: Cdigo : stop();

Con este sencillo cdigo (compatible con actionscript 1.0, 2.0 y 3.0) ya logramos que la pelcula se detenga.

Prof. Yhonny MItac Julca

8

C.P.F. Santa Mara de Jess

GUAS DE MOVIMIENTO
Si quieres que el clip siga un recorrido

Promoviendo una Educacin Humanista

puedes

utilizar

las

guas

de

movimiento.

Para aplicar una gua, debes de seguir los mismos pasos que los que sigues para aplicar una interpolacin de movimiento clsica. Luego de aplicar la interpolacin, en una nueva capa dibuja con el lpiz, o con la herramienta de lnea, el recorrido que quieres que siga tu clip (debe ser una lnea que tenga un extremo tocando al clip en el fotograma 1 y el otro extremo tocndolo en el fotograma x donde termina la interpolacin). Selecciona la capa de la gua, da click derecho y selecciona la opcin Gua. Corrobora que la capa de abajo (interpolacin) sea modificada por la capa de arriba, si no lo es, arrstrala hacia arriba. Prueba la pelcula con Ctrl + Enter.

NUEVA INTERPOLACIN DE MOVIMIENTO

Esta interpolacin apareci con el Adobe Flash CS4 y ahora perdura en el CS5. No tiene muchas diferencias con el anterior, pero la manera de aplicarla es distinta y las guas de movimiento se incluyen automticamente en la misma capa, y es ms sencillo modificarlas. Para aplicar la interpolacin clsica haca falta insertar un fotograma clave de inicio y un fotograma clave de fin. Ahora nos ahorramos un paso, ya que slo debemos insertar el fotograma clave de inicio, dar click derecho al fotograma o al clip, seleccionar Crear Interpolacin de Movimiento y Flash automticamente inserta ms fotogramas. Para que el clip de pelcula se mueva, o sea que tenga un cambio por el cual quieres aplicarle una interpolacin, debes de ir al ltimo fotograma (o a cualquiera de los que abarque la interpolacin) y mover o cambiar las caractersticas del clip. Qu pasa con las guas de movimiento. Ahora flash las incluye automticamente en la misma capa, de un color fluorescente, y es ms sencillo manipularlas.
Abre un nuevo documento.

Dibuja un cuadrado o un valo y convirtelo en smbolo con F8. Dale cualquier nombre y selecciona de tipo clip de pelcula. Dale clic derecho al clip recin creado y selecciona la opcin Crear interpolacin de movimiento (automticamente Flash insertar ms fotogramas). Si quieres prolongar o achicar la interpolacin, simplemente ve al ltimo fotograma de la misma y vers que aparece un cursor diferente para variar la duracin. Ahora ve al ltimo fotograma de la interpolacin y mueve el clip de pelcula hacia la derecha o hacia la izquierda y aumenta su tamao (presiona Q). Vas a ver que apareci una lnea de puntos de un color fluorescente, esa es la gua de movimiento y puedes manipularla fcilmente con el ratn. Pon un stop en el ltimo fotograma de una nueva capa. Prueba la pelcula con Ctrl+Enter

Prof. Yhonny MItac Julca

9

C.P.F. Santa Mara de Jess

Promoviendo una Educacin Humanista

Interpolacin de forma

Qu es? Una forma de animar objetos, que no pueden ser smbolos, textos (para aplicarles una interpolacin de forma hay que separarlos con click derecho + separar) u objetos agrupados (deben ser separados al igual que los textos).

Qu vara del objeto? Puede variar el color, tamao, posicin y forma del objeto.

Cmo se aplica? Dibujamos o incorporamos el objeto en el escenario. Insertamos un fotograma clave en el fotograma que queramos (click derecho en el fotograma + Insertar fotograma clave). En este fotograma hacemos las variaciones que queramos hacerle al objeto. Entre el fotograma 1 y el fotograma x donde se encuentren las variaciones del mismo, hacemos click derecho y seleccionamos la opcin Crear interpolacin de forma. Y ya est, podemos ver el resultado presionando Ctrl + Enter para probar la pelcula.

Qu pasa si yo quiero que pare la animacin al terminar? Utilizamos el cdigo stop(); aprendido anteriormente. Ejemplo de interpolaciones

Interpolaciones de movimiento (archivo .fla): http://www.megaupload.com/?d=U6IO2HX7 Interpolaciones de forma (archivo .fla): http://www.megaupload.com/?d=3D3AA3VP Mscaras

Otra herramienta interesante del Flash son las mscaras. Las mscaras sirven para mostrar slo una determinada parte de lo que se encuentra en la capa inferior. Si yo en una capa dibujo un rectngulo, en la capa de abajo tengo una foto, y a la capa del rectngulo la defino como mscara, de la foto se va a ver slo la parte que sea abarcada por el rectngulo. El rectngulo no se va a ver, sea del color que sea o tenga el alfa que tenga, slo se va a ver una parte de la foto. Para que entiendas bien pondr un ejemplo.

Supongamos que quieres hacer un sencillo efecto de lupa con una interpolacin de movimiento. Tienes el dibujo de la lupa animada (por ejemplo que va de un lado a otro) en una capa, en otra tienes una imagen o un texto pequeo y en una ltima capa tienes la misma imagen o texto pero ms grande. Cmo se hace para lograr el efecto de lupa?

Prof. Yhonny MItac Julca

10

C.P.F. Santa Mara de Jess

Promoviendo una Educacin Humanista

Vamos a ver... Para conseguir el efecto debes tener el dibujo de una lupa en una capa. Esta lupa la vas a animar para que parezca que alguien la est moviendo de un lado a otro. En otra capa debes tener el crculo que funciona como lupa, es decir la mscara. En otra capa vas a tener el dibujo grande, que ser lo que se ver slo al pasar la lupa por encima. Y en una ltima capa vas a tener el dibujo pequeo. Es decir que la estructura es la siguiente:

Dibuja la lupa en la capa del dibujo de la lupa, dibuja un crculo en la capa de la lupa, dibuja, por ejemplo, una flor grande en la capa del dibujo grande y por ltimo, una flor chica en la capa del dibujo pequeo (copia la flor grande, en la capa de la flor chica presiona Ctrl+Shift+V para pegarla en el mismo lugar y achcala con la herramienta de transformacin libre). Ahora aplcale una interpolacin de movimiento a las dos primeras capas (ten cuidado, la lupa y el dibujo de la lupa deben moverse al mismo tiempo, en la misma direccin y del mismo modo). Ahora, si pruebas pelcula con Ctrl+Enter no vas a ver el efecto que esperamos, porque an no aplicaste la mscara. Para aplicarla, dale click derecho a la capa de la lupa y tilda la opcin Mscara. Ahora s, puedes probar pelcula .

Aqu est el archivo por si lo quieres bajar (formato .fla): http://www.megaupload.com/?d=ZBOHGCCQ

Ahora ya sabes todo lo bsico de Flash, ya ests en condiciones, por ejemplo, de hacer un banner sencillo. El resto depende de ti, depende de que estudies Actionscript para poder programar. Depende de que abras Adobe Flash y te pongas curios@ a ojear todas las herramientas que no describ aqu porque me llevara 200 pginas ms . Hay tips interesantes como lo que ya te mencion de mantener presionado Shift para cuadrados o crculos perfectos, el pegar in situ o pegar en el mismo lugar (Ctrl+Shift+V), entre otros.

Espero que esta gua te haya servido de ayuda

Pueblo que escucha, pueblo que ora

Prof. Yhonny MItac Julca

11