INSTITUTO MARA AUXILIADORA SANTA ANA

INFORMTICA EDUCATIVA I AO DE BACHILLERATO GENERAL

PRCTICA #1 INTRODUCCIN A LAS ANIMACIONES EN FLASH PROF. NSTOR A. LINARES

FUNDAMENTOS TERICOS

Se entiende por animacin como cualquier cambio visual que se produce a lo largo del tiempo. Se puede modificar varios

aspectos de un elemento grfico para animarlo: posicin, tamao, rotacin, color, transparencia... Al ir generando cambios en

la imagen, se produce en el usuario la sensacin de movimiento.

La animacin de grficos bidimensionales en general se basa en el concepto de fotograma o frame. La animacin se compone

por tanto de una secuencia de fotogramas que son mostrados al usuario en orden y uno detrs del otro. Por lo tanto un

fotograma es un estado de los elementos que componen la animacin en un instante concreto de tiempo. La sucesin de estos

fotogramas produce la sensacin de movimiento.

La velocidad a la que se muestra la secuencia de fotogramas se llama velocidad FPS o fotogramas por segundo o frames per

second. A partir de 25 fotogramas por segundo el ojo humano es incapaz de distinguir la sucesin de fotogramas estticos, e

interpreta la animacin como movimiento. En Flash la velocidad FPS no es un valor fijo, sino es el mximo valor deseado de

velocidad. Esto quiere decir que nuestra pelcula SWF se puede reproducir a una velocidad menor si es que el ordenador no

dispone de los recursos necesarios para reproducir la pelcula a dicha velocidad. De esta manera, si tenemos una pelcula muy

compleja, con muchos vectores, animaciones, transparencias, degradados, etc... Es posible que se reproduzca a una velocidad

inferior a la indicada en los FPS. Adems este valor es variable a lo largo de la reproduccin de la pelcula. Es decir, en algn

momento nuestra pelcula puede ralentizarse bien por el contenido que manejemos dentro o bien por causas ajenas a la pelcula

(otras aplicaciones ejecutadas al mismo tiempo...).

Otro concepto importante es el de fotograma clave. Se trata de aquellos fotogramas en los que se define un nuevo estado con

respecto a los fotogramas anteriores. En los fotogramas clave se realizan los cambios a la hora de generar las diferentes

imgenes por las que pasa una animacin. Un volumen exagerado de fotogramas clave puede hacer que nuestro archivo pese

demasiado y que la animacin no se reproduzca de forma fluida (ralentizacin). Por este motivo hay que evitar utilizar

fotogramas clave en los elementos estticos de la animacin.

Al hecho de transitar de un fotograma clave a otro fotograma clave separados en el tiempo se le denomina interpolacin. El

conjunto de fotogramas que quedan entre dos fotogramas clave con interpolacin se les llama fotogramas interpolados. Estos

fotogramas, a diferencia de los fotogramas clave, no se almacenan en ninguna parte, sino que se calculan cuando se reproduce

la pelcula. Por este motivo los fotogramas interpolados reducen el peso de archivo. Sin embargo el clculo de interpolaciones

con demasiados elementos, o elementos grficos muy complejos (muchas transparencias y degradados), puede hacer que se

ralentice la animacin.

Por otro lado la animacin tiene mucho que ver con la cintica (parte de la fsica que estudia el movimiento de los objetos), por

lo tanto siempre podremos utilizar algunas de sus frmulas y conceptos. Hablaremos de velocidad, aceleracin, tiempo,...

Descripcin de Flash

Flash es una herramienta de edicin con la que los diseadores y desarrolladores pueden crear presentaciones, aplicaciones y

otro tipo de contenido que permite la interaccin del usuario. Los proyectos de Flash pueden abarcar desde simples

animaciones hasta contenido de vdeo, presentaciones complejas, aplicaciones y cualquier otra utilidad relacionada. La

animacin es un punto clave en el xito de Flash, puesto que la gran mayora de pginas web animadas lo hacen con Flash. Esto

es debido a la facilidad y rapidez de la herramienta para obtener grficos animados.

Dado el tamao tan pequeo de sus archivos, Flash resulta especialmente ideal para crear contenido que se facilite a travs de

Internet. Para ello, utiliza en gran medida grficos vectoriales. Este tipo de grfico requiere mucha menos memoria y espacio

de almacenamiento que las imgenes de mapa de bits, ya que se representan mediante frmulas matemticas en lugar de

grandes conjuntos de datos. Las imgenes de mapa de bits son de un tamao superior porque cada pxel requiere un fragmento

de datos independiente que lo represente.

Cuando se edita contenido en Flash, se trabaja en un archivo de documento de Flash. Estos documentos tienen la extensin de

archivo .fla (FLA) y se componen de las siguientes partes:

TRABAJO PRCTICO

Transparencias

1. Iniciaremos ahora el trabajo con el programa. Incialo dando clic en Botn inicio Todos los programas Macromedia

Macromedia Flash 8.

2. En la ventana que se te muestra, selecciona la opcin que se te indica:

3. Ahora se te debe desplegar la ventana de trabajo del programa, tal como la que se mostr con sus nombres anteriormente.

4. Ya que no utilizaremos el panel de propiedades que se muestra en la parte inferior, lo ocultaremos haciendo clic en la

flechita superior izquierda de ste.

5. En ocasiones ser necesario tener delimitaciones o marca que permitan alinear los objetos que formarn la animacin,

selecciona la opcin Cuadrcula del men Ver.

6. Se desplegar un submen como el de la figura. Selecciona la opcin Mostrar Cuadrcula para hacerlo visible.

7. Lo siguiente que se necesita es establecer las propiedades del espacio para la animacin. Activa el panel de propiedades

que escondiste anteriormente, haciendo clic en la misma flechita.

8. Pulsa donde se muestran las medidas del tamao para que se muestre una ventana de edicin de las propiedades.

9. En Unidades de Reglas selecciona Centmetros.

10. A continuacin selecciona Dimensiones y escribe en las casillas Anchura 22.46 y en Altura 16.84.

11. Completa la informacin que se muestra para las opciones de Ttulo y Descripcin.

12. Pulsamos sobre la pestaa Color de fondo, el puntero se convertir en un "cuentagotas". Seleccionamos el color preferido

haciendo clic en el cuadro correspondiente.

13. En Velocidad de Fotogramas escribe 14 fps.

14. Pulsa en Aceptar y observa cmo cambia el tamao. Estas medidas equivalen al standard 640 x 480 px.

15. Guardaremos el trabajo. Ve al men Archivo Guardar.

16. Ubica la carpeta Mis documentos en el rbol de carpetas que aparece a la izquierda. Nombra el archivo como

Apellido_Nombre_primera_animacin.

17. Pulsa el botn Guardar.

18. Crearemos un valo con las medidas y la forma que queramos. Pulsa sobre la Herramienta valo que se encuentra

en la Barra de Herramientas.

19. Sita el cursor del ratn en el Escenario.

20. Haz clic y arrastra el ratn hacia el lugar que desees. Observars que el movimiento de tu ratn provoca la creacin de un

valo (figura 1). Cuando el valo tenga la forma deseada, suelta el ratn. El resultado ser similar al de la figura 2.

Truco: Si quieres crear un crculo perfecto, mantn pulsada la tecla SHIFT mientras das forma al valo. (Sucede igual con

la Herramienta Rectngulo)

21. Ahora cambiamos el color de relleno de la figura creada. Activa la herramienta de Seleccin .

22. Hacemos clic en el interior del valo o en su borde (en nuestra figura est desactivado el borde por lo que no lo

distinguirs). Depender de la zona cuyo color queramos modificar.

23. Obtendremos algo similar a la figura 1 o a la 2.

24. Una vez hecho esto, nos fijamos en el Panel de Colores, que se encuentra dentro de la Barra de Herramientas. Y

seleccionamos el color que nos guste en el cuadro de la derecha del boto de pintura (como no tenemos un borde, el cuadro

a la derecha del lpiz aparece tachado).

25. Guarda los cambios realizados en el archivo.

26. Crearemos un nuevo objeto el cual ser ubicado en una nueva capa para que no se mezcle con el valo recin dibujado.

Ve al panel de capas que se encuentra a la izquierda de la lnea de tiempo y haz doble clic sobre Capa 1.

27. Cmbiale el nombre por valo y pulsa Enter.

28. Inserta una nueva capa y nmbrala como rectngulo desde el botn que se seala en la imagen (este se encuentra en el

mismo panel de capas).

29. Cercirate que te encuentres colocada sobre la nueva capa, esta debe mostrarse en color azul. En caso contrario haz clic

sobre ella.

30. Creamos un rectngulo con la Herramienta Rectngulo.

31. Aplcale un color de relleno de tu predileccin al rectngulo.

32. Una vez creado, seleccionamos el relleno del Rectngulo con la herramienta de Seleccin.

33. Una vez seleccionado el relleno ve al panel de Color que se muestra en la parte derecha de la ventana. Cambia el valor

Alfa a 45% y pulsa Enter.

34. En el mismo panel de colores, pulsa en el color de borde y selecciona la opcin de bloqueo para quitarle el borde a nuestro

rectngulo.

35. De regreso en la escena, vers aun seleccionado el relleno del rectngulo. Da un clic fuera de ste para ver el resultado. El

color de relleno se ver alterado.

36. Con la herramienta de seleccin arrastra el rectngulo y ubica una parte de ste sobre el valo.

37. Da un clic fuera de la figura para deseleccionarla y ver el resultado de modificar el valor de Alfa. Esto es una forma de

transparentar objetos.

38. Para obtener el resultado deseado tambin es necesario comprender el orden de posicin de las capas. La capa rectngulo

se encuentra encima de valo, el orden de visin es desde arriba hacia abajo.

39. Colcate sobre la capa valo en el panel de capas. Arrastra y colcala arriba de la capa recngulo.

40. Da un clic fuera de cualquier objeto en la escena para ver el resultado de cambiar las capas.

41. La figura del valo por tener un Alfa de 100% no deja ver la zona cubierta del rectngulo.

42. Aplique un Alfa de 60% para el valo. Observe el resultado.

43. Cambia el orden de las capas, deja valo en segundo lugar. Nota que esta vez no hay problema de ver ambas figuras por

completo pues tienen rellenos con transparencia.

44. Guarda los cambios realizados en el archivo.

Edicin bsica de formas

1. Cierra el archivo sin salir de programa de Flash haciendo clic en Archivo Cerrar.

2. En la ventana de bienvenida selecciona un Nuevo documento de Flash.

3. En el siguiente archivo crearemos 2 rectngulos para editar su relleno y borde. Seleccionamos desde el panel de

herramientas los colores para borde y relleno que t prefieras.

4. Hacemos clic en la Herramienta Rectngulo y antes de dibujarlos muestra el panel de propiedades (parte inferior).

5. Establece el grosor de borde en 2.

6. Dibujamos 2 rectngulos en la escena.

7. Activamos la herramienta de Seleccin . Hacemos clic en el interior del primer rectngulo y pulsamos la tecla Suprimir

(Supr) o Delete (Del).

8. Hacemos doble clic en el borde del otro rectngulo y volvemos a pulsar la tecla Suprimir. Con esto hemos conseguido

eliminar el relleno en uno y el borde en el otro rectngulo.

9. Guardaremos el trabajo. Ve al men Archivo Guardar.

10. Ubica la carpeta Mis documentos en el rbol de carpetas que aparece a la izquierda. Nombra el archivo como

Apellido_Nombre_edicin_objetos.

11. Ve al panel capas y cambia el nombre de Capa 1 por Borde-Relleno haciendo doble clic en esta.

12. Aade una nueva capa pulsando el botn que se indica a continuacin y luego nmbrala como objetos alineados. Haremos

invisible el contenido de la capa Borde-Relleno pulsando el punto que aparece bajo la columna que muestra un ojo.

13. La escena quedar en blanco, pero no quiere decir que est vaca, es solo que parte del contenido est oculto. Estando

ubicada en la capa objetos alineados dibujo 4 rectngulos uno a continuacin del otro.

14. Abrimos el Panel Alinear desde el men Ventana Alinear. El panel se desplegar a la derecha de la ventana.

15. En dicho panel hacemos clic en "En escena" para que las distribuciones de los objetos se hagan en funcin de la escena.

16. Activamos la herramienta de Seleccin. Damos doble clic en el primer objeto para que quede seleccionado por completo

(borde y relleno) y hacemos clic en para alinear el objeto en el extremos izquierdo de la pelcula (observa que a

partir del dibujo del botn nos podemos hacer una idea de dnde ubicar al objeto seleccionado).

17. Manteniendo el objeto seleccionado, hacemos clic en para situarlo en el borde superior de la escena. Como el objeto

est en el extremo superior izquierdo, quedar ubicado en la esquina superior izquierda.

18. Para alinear el segundo objeto en la esquina superior derecha hacemos clic en y .

19. Para alinear el tercer objeto en la esquina inferior izquierda hacemos clic en y .

20. Para alinear el cuarto objeto en la esquina inferior derecha hacemos clic en y .

21. Reduciremos la vista para ver completamente el resultado. Arriba de la lnea de tiempo ubica el botn zoom que se

muestra a continuacin y establece un 50%.

22. Debers ver que los rectngulos tuvieron que quedar en las esquinas de la escena. Guarda los cambios en el archivo.

23. Cierra el archivo sin salir de programa de Flash haciendo clic en Archivo Cerrar.

Trabajando con varias capas

1. En la ventana de bienvenida selecciona un Nuevo documento de Flash.

2. Desde el panel de propiedades ingresa a la ventana de Propiedades. Establece las siguientes propiedades y pulsa Enter.

3. Oculta el panel de propiedades.

4. Guardaremos el trabajo. Ve al men Archivo Guardar.

5. Ubica la carpeta Mis documentos en el rbol de carpetas que aparece a la izquierda. Nombra el archivo como

Apellido_Nombre_aros_olmpicos.

6. En el panel de capas, crea 5 capas bajo los nombres siguientes:

7. Activa la capa verde.

8. Selecciona la herramienta de valo.

9. En la seccin Colores del panel de herramientas bloque el relleno y seleccione un color verde para el borde.

10. Traza un valo en la escena y para que sea perfectamente circular, mantenemos pulsada la tecla Shift.

11. Activa la herramienta de Seleccin y haz clic sobre el borde del valo recin dibujado.

12. Muestra el panel de propiedades que est oculto en la parte inferior de la ventana.

13. Establece las dimensiones de la forma de alto y ancho en 150.

14. En el mismo panel establece en 6 el valor del grosor del borde.

15. Guarda los cambios realizados desde Archivo Guardar y colcate en la capa amarillo.

16. Selecciona la herramienta de valo.

17. En la seccin Colores del panel de herramientas bloque el relleno y seleccione un color amarillo para el borde.

18. Traza un valo en la escena a la par del valo verde y para que sea perfectamente circular, mantenemos pulsada la

tecla Shift.

19. Activa la herramienta de Seleccin y haz clic sobre el borde del valo recin dibujado.

20. Desde el panel de propiedades establece las dimensiones de la forma de alto y ancho en 150.

21. En el mismo panel verifica que el grosor del borde sea 6.

22. Guarda los cambios realizados en el archivo.

23. Repite el procedimiento para completar los otros 3 crculos de colores segn el nombre de las capas restantes. No olvidar

que cada uno se dibuja en su correspondiente capa y el las dimensiones son de 150, adems el borde debe establecerse

en 6.

24. Cuando hayas terminados los 5 crculos, formaremos el smbolo de las olimpiadas arrastrando cada aro a la posicin

correcta. Para mover cada figura primero da un clic en el borde de ella, luego arrstrala a la posicin indicada. Si en el

intento deformas el borde, puedes utilizar Ctrl + Z para deshacer la accin.

25. Guarda los cambios realizados.

Fotogramas de animacin

1. Inicie un Nuevo documento Flash.

2. Haga clic en el escenario con la herramienta Seleccin activada y luego en las propiedades establezca un tamao de 500

x 150 pxeles.

3. Guarde el archivo en Mis documentos con el nombre Apellido_Nombre_Rtulo_Flotante.

4. En la barra de herramientas, seleccione la herramienta Rectngulo y elija un tono azul (o el que usted quiera) para

el relleno .

5. Haga clic en el botn Dibujo de objeto, en la zona de Opciones de la barra de herramientas. Al activar esta opcin el borde

y el relleno del rectngulo a dibujar quedan agrupados y se tratan como un solo elemento.

6. Utilizando el ratn, trace un rectngulo en la escena (no importa la medida del rectngulo trazado).

7. Observe que ahora el indicativo de que la figura est seleccionada es que la bordea una lnea color aqua a diferencia de

cuando quedaban separados el borde y el relleno, que aparecan punteadas las zonas seleccionadas.

8. Para animar el rectngulo con mayor facilidad lo convertiremos en un smbolo, manteniendo la figura seleccionada pulse

la opcin Convertir en smbolo del men Modificar, en la barra de mens.

9. En el cuadro de dilogo que aparece pulse el botn Aceptar. Ms adelante se aclarar el concepto de smbolos.

10. Manteniendo seleccionado el rectngulo (ahora se muestra un pequeo crculo en su centro) cambie en las propiedades

de este los valores ancho, alto, posicin X y posicin Y:

11. Observa como ha quedado ubicado el rectngulo en la escena.

12. En el panel de capas nombre a Capa 1 como Fondo. Aada una segunda capa y nmbrela como Rtulo. As obtendremos

una segunda capa en la lnea de tiempo.

13. Estando seleccionada la capa Rtulo, seleccione la herramienta Texto en la barra de herramientas y elija el color que

combine bien con el fondo que eligi.

14. Al tener seleccionada la herramienta vaya al panel propiedades, seleccione en la opcin Tamao el valor de 24. Tambin

puede modificar la fuente si as lo desea.

15. Haga clic en la escena y escriba el texto Trabajando con Flash en dos lneas tal como se muestra en la imagen.

16. Ubique el objeto del texto a la izquierda del rectngulo.

17. Guarde los cambios realizados en el archivo.

Crear una animacin

La lnea de tiempo, que contiene capas y fotogramas, ayuda a organizar los elementos activos del documento y tambin controla

el contenido a lo largo del tiempo.

Los documentos de Flash pueden reproducirse durante un perodo de tiempo (tal como ocurre con las pelculas o los sonidos)

que se mide en fotogramas. Se podra decir que las capas son transparencias que se apilan una encima de otra. Cada capa

puede contener imgenes, texto o animaciones que se muestran en el escenario.

18. Cuando termine de escribir el texto, elija la herramienta Seleccin en la barra de herramientas.

19. En la lnea de tiempo, seleccione las dos casillas de la posicin 20 arrastrando el ratn sobre ellas mientras mantiene

pulsado el botn izquierdo del ratn.

20. En el men Insertar de la barra de mens seleccione la opcin Lnea de tiempo Fotograma clave. Con esto indicamos

que en el fotograma 20 se espera que ambos objetos en escena sufran algn cambio.

21. Haga clic en cualquier lugar fuera de la escena (zona gris) para quitar la seleccin de los objetos.

22. Haga clic sobre el texto (exactamente sobre cualquier zona que sea parte del texto) para seleccionarlo y a continuacin

arrstrelo hacia la derecha del rectngulo manteniendo Shift presionado para que no se mueva verticalemente.

23. Seleccione el fotograma 1 de la capa Rtulo haciendo clic sobre l. Observe que el texto se muestra nuevamente a la

izquierda, esto es porque estamos en el estado inicial del objeto el cual era mantenerse a la izquierda, de modo que, en

el fotograma 20 deber estar a la derecha.

24. Sobre el fotograma seleccionado haga clic derecho y en el men contextual seleccione Crear interpolacin de

movimiento. En el tramo entre los fotogramas 1-20 se ha creado una flecha, esto indica que se realizar un desplazamiento

durante ese perodo, el cual llevar al objeto de su posicin inicial (en la izquierda) a su posicin final (en la derecha).

Una interpolacin de movimiento es una animacin en la que se definen propiedades tales como la posicin, el tamao y la

rotacin de una instancia en un instante especfico, y despus estas propiedades se pueden cambiar en otro momento. En esta

animacin nos ha interesado cambiar la posicin del objeto.

25. Para ver el resultado de la animacin recin creada a travs de los fotogramas pulse las teclas Ctrl + Enter. Se abrir una

ventana nueva en la que se mostrar el resultado del proceso.

26. Cierre la ventana de prueba.

27. Para ver ms acelerada la animacin haga clic sobre cualquier zona blanca de la escena. Luego en las propiedades cambie

el valor de la velocidad de fotograma por 20.

28. De un clic sobre la escena y luego pulse Ctrl + Enter para ver nuevamente el resultado, debe ser ahora ms acelerado.

29. Cambie nuevamente la velocidad de fotograma, esta vez por 7 para ver el desplazamiento ms lento. Pruebe el resultado.

30. Guardar los cambios y cierre el archivo.