Sunteți pe pagina 1din 31

Flash 5.

1. ABRIMOS FLASH 5

Cuando abrimos el programa, lo primero que encontramos es la pantalla en blanco, lo que llamamos
comnmente "STAGE", el escenario, la pantalla donde vamos a realizar toda la animacin. Por arriba
podemos observar, la lnea de tiempo que est compuesta por FRAMES (cuadros) y LAYERS (capas).

Automticamente, se nos abren varias ventanas, donde podemos tener al alcance de la mano todas las
posibilidades y necesidades para nuestro diseo en Flash.

La lnea de tiempo nos sirve para darle el tiempo necesario a la animacin que vamos a disear; el
sumatorio de frames equivale a los segundos que queremos que dure nuestra animacin. En forma
predeterminada, en el Flash viene definida una velocidad de 12 cuadros por segundo. Como apunte
personal me gustara comentar que para realizar una pelcula eficiente uno se tiene que basar en
determinados elementos: si el objetivo es, por ejemplo, utilizarla en una pgina Web, primero hay que
determinar si ser larga o corta, y luego, que sea DIVERTIDA Y AGRADABLE para l. Otro factor a
tomar en cuenta es el peso de la pelcula: ms pesado, ms tarda en bajar. (Tenemos que tener en
cuenta que estas pelculas bajan a la carpeta de temporales del explorador que estemos utilizando para
poder ser vistas).
En la parte izquierda de la ventana podemos observar (ver figura anterior) la paleta de herramientas
que vamos a utilizar para lograr nuestra animacin. Aquellos que ya han utilizado algn programa
grfico reconocern todas las herramientas. Como se supone que ya estamos familiarizados que el
PhotoShop no vamos a hacer demasiado hincapi sobre la misma.
Al utilizar las herramientas Lpiz, Lnea, valo, Rectngulo o Pincel, para dibujar una lnea sobre otra
lnea o forma pintada, las lneas que se solapan se dividen en segmentos, en los puntos de interseccin.
Puede utilizar la herramienta Flecha para seleccionar, mover y remodelar cada segmento
independientemente. Las lneas que se solapan creadas con la herramienta Pluma, no se dividen en
segmentos en los puntos de interseccin, sino que permanecen intactas.

Un relleno; el relleno con una lnea que lo corta;


los dos rellenos y tres segmentos de lnea creados por la segmentacin.

2. HERRAMIENTAS DE DIBUJO

Al pintar sobre formas y lneas, lo que queda en la parte superior substituye a lo que estaba debajo. Si
son del mismo color se fusionan, pero si el color es diferente, formas y lneas quedan separadas

A continuacin, algunas partes del "Manual oficial de Macromedia" donde explica cada una de las
herramientas.
Dibujo con la herramienta Lpiz

Para dibujar lneas y formas, se utiliza la herramienta Lpiz, de manera muy similar a como se emplea
un lpiz real para realizar un dibujo. Para aplicar un suavizado o un enderezamiento a las lneas y las
formas, segn se va dibujando, basta con seleccionar un modo de dibujo para la herramienta Lpiz.
Para dibujar con la herramienta Lpiz:
1 Seleccione la herramienta Lpiz.
2 Seleccione un estilo y color de trazo.
3 Seleccione un modo de dibujo de las opciones de la caja de herramientas:
Seleccione Enderezar para dibujar lneas rectas y convertir figuras similares a tringulos,
valos, crculos, rectngulos y cuadrados en estas formas geomtricas.
Seleccione Suavizar para dibujar curvas suaves.
Seleccione Tinta para dibujar lneas a mano alzada sin aplicarles ninguna modificacin.
Lneas dibujadas con los modos Enderezar, Suavizar y Tinta.

4 Seleccione los atributos de estilo y peso del trazo en el panel Trazo (Stroke).
5 Arrastre sobre el Escenario para dibujar con la herramienta Lpiz. Arrastre con la tecla Mays
presionada para dibujar slo lneas verticales u horizontales.

Dibujo de lneas rectas, valos y rectngulos

Las herramientas Lnea, valo y Rectngulo permiten crear fcilmente las formas geomtricas
habituales. Las herramientas valo y Rectngulo crean tanto formas rellenas como formas slo
definidas por el trazo. Puede utilizar la herramienta Rectngulo para crear rectngulos con esquinas
rectas o redondeadas.

Para dibujar lneas rectas, valos o rectngulos:


1 Seleccione las herramientas Lnea, valo o Rectngulo.
2 Seleccione los atributos de trazo y relleno.
No es posible establecer atributos de relleno para la herramienta Lnea.
3 En la herramienta Rectngulo, haga clic en el modificador Rectngulo redondeado para especificar
que desea esquinas redondeadas e indique el valor del radio del ngulo. Si el valor es cero, las esquinas
son rectas.
4 Arrastre sobre el Escenario. Si est utilizando la herramienta Rectngulo, presione las teclas de
direccin hacia arriba o abajo para ajustar el radio de la esquina redondeada. Con las herramientas
valo y Rectngulo, arrastre con Mays presionada para crear slo crculos y cuadrados.
Con la herramienta Lnea, arrastre con Mays presionada para dibujar slo lneas en ngulos mltiplos
de 45.

Uso de la herramienta Pluma

Para dibujar trazados precisos como lneas rectas o bien como suaves curvas fluidas, puede utilizar la
herramienta Pluma.
Puede crear segmentos de lneas rectas o curvas, y ajustar el ngulo y la longitud de los segmentos
rectos, as como la pendiente de los segmentos curvos. Al dibujar con la herramienta Pluma, puede
hacer clic para crear puntos en los segmentos de las lneas rectas o bien hacer clic y arrastrar para crear
puntos en los segmentos de las lneas curvas.
Puede ajustar los segmentos de las lneas curvas y rectas ajustando los puntos de las lneas.
Puede convertir lneas curvas en lneas rectas y viceversa. Tambin puede mostrar los puntos de las
lneas creadas con otras herramientas de dibujo de Flash, como las herramientas Lpiz, Pincel, Lnea,
valo o Rectngulo, para ajustar estas lneas.

Establecimiento de las preferencias de la herramienta Pluma


Puede especificar las preferencias de aspecto del puntero de la herramienta Pluma, la manera de
previsualizar los segmentos de lneas conforme va dibujando o bien el aspecto de los puntos de anclaje
seleccionados. Los puntos de anclaje y los segmentos de lneas seleccionados aparecen en el color del
contorno de la capa en la que aparecen estas lneas y puntos.
Para establecer las preferencias de la herramienta Pluma:
1 Seleccione Edicin > Preferencias y haga clic en la ficha Edicin.
2 En Herramienta Pluma, establezca las siguientes opciones:
Seleccione Mostrar previsualizacin de pluma para ver una previsualizacin de los segmentos
de lnea conforme va dibujando. Flash muestra una previsualizacin del segmento de lnea
conforme mueve el puntero sobre el Escenario, antes de hacer clic para crear el punto final del
segmento. Si no se ha seleccionado esta opcin, Flash no mostrar un segmento de lnea hasta
que se haya creado el punto final del segmento.
Seleccione Mostrar puntos slidos para especificar que los puntos de anclaje no
seleccionados aparezcan como puntos slidos y que los puntos de anclaje seleccionados
aparezcan como puntos huecos (esta es la opcin seleccionada de manera predeterminada). No
seleccione esta opcin para mostrar los puntos de anclaje no seleccionados como puntos huecos
y los puntos de anclaje seleccionados como puntos slidos.
Seleccione Mostrar cursores de precisin para especificar que el puntero de la herramienta
Pluma aparezca como una cruz, en lugar del icono predeterminado de la herramienta Pluma,
para poder colocar as las lneas con mayor precisin. Si desea utilizar el icono predeterminado
de la herramienta Pluma, no seleccione esta opcin. Nota: Presione la tecla Bloq Mays
mientras est trabajando para cambiar de un cursor a otro.
3 Haga clic en Aceptar. Dibujo de lneas rectas con la herramienta Pluma Para dibujar segmentos de
lneas rectas con la herramienta Pluma, hay que crear puntos de anclaje, puntos de la lnea que

determinan la longitud de cada uno de los segmentos de lnea.

Para dibujar rectas con la herramienta Pluma:


1 Seleccione la herramienta Pluma.
2 Seleccione los atributos de trazo y relleno.
3 Coloque el puntero en el Escenario, en el inicio de la lnea recta y haga clic para definir el primer
punto de anclaje.
4 Vuelva a hacer clic para indicar dnde desea que termine el primer segmento de la lnea recta. Haga
Mays-clic para limitar la herramienta a los ngulos mltiplos de 45.
5 Siga haciendo clic para crear ms segmentos rectos.
3. LINEAS Y PLUMAS

Para terminar el trazado como una forma abierta o cerrada, utilice uno de los siguientes
procedimientos:
Para terminar un trazado abierto, haga doble clic en el ltimo punto, haga clic en la herramienta
Pluma de la caja de herramientas o bien haga Control-clic (Windows) o Comando-clic (Macintosh)
lejos del trazado.
Para cerrar un trazado, coloque la herramienta Pluma sobre el primer punto de anclaje. Al colocar
correctamente la herramienta, aparecer un pequeo bucle cerca de la punta de la pluma. Haga clic
o arrastre para cerrar el trazado.
Para terminar la forma tal cual, seleccionando Edicin > Anular seleccin de todo o bien elija otra
herramienta de la caja de herramientas.

Para mostrar los puntos de anclaje de una lnea de un contorno de forma creados con las herramientas
Lpiz, Pincel, Lnea, valo o Rectngulo:
1 Seleccione la herramienta Subseleccin.
2 Haga clic en la lnea o el contorno de la forma.

Remodelacin con la herramienta Flecha

Para remodelar una lnea o el contorno de una forma, puede arrastrar cualquier punto de la lnea
mediante la herramienta Flecha. El puntero cambia para indicar el tipo de modificacin que se puede
realizar en la lnea o relleno. Flash ajusta la curva del segmento de lnea para acomodarla a la posicin
del punto desplazado. Si se trata de un extremo, puede alargar o acortar la lnea. Si se trata de un

ngulo, los segmentos que lo forman se mantienen rectos al alargarse o acortarse.

Si aparece un ngulo junto al puntero, puede cambiar un extremo.


Si aparece una curva, puede ajustar una curva.
Algunas reas de trazo de pincel se remodelan con ms facilidad si se visualizan como contornos. Si
tiene algn problema para remodelar una lnea compleja, puede suavizarla para eliminar algunos
detalles y facilitar as la tarea. La ampliacin tambin puede facilitar la remodelacin y darle ms
precisin.

Para remodelar lneas o contornos de formas con la herramienta Flecha:


1 Seleccione la herramienta Flecha.
2 Realice los siguientes pasos:
Arrastre desde cualquier punto del segmento para remodelarlo.
Arrastre una lnea con Control (Windows) u Opcin (Macintosh) presionado para crear un
nuevo ngulo.

Enderezamiento y suavizado de lneas

Puede enderezar o suavizar lneas y contornos de formas para remodelarlos.


Ajuste el grado de suavizado o enderezamiento automtico utilizando la opciones del lz.

El enderezamiento hace los pequeos ajustes necesarios a las lneas y las curvas ya dibujadas. No
tiene ningn efecto sobre los segmentos rectos. Tambin puede utilizar la tcnica de enderezamiento
para que Flash reconozca las formas. Si dibuja cualquier forma ovalada, rectangular o triangular con la
opcin Reconocer formas desactivada, puede utilizar la opcin Enderezar para hacer las formas
geomtricamente perfectas. Pero no reconoce las formas que se tocan y estn conectadas con otros

elementos.

Como se puede ver en la figura, el reconocimiento de formas transforma las figuras superiores en las
inferiores.

El suavizado modera las curvas y reduce las protuberancias en la direccin general de la curva.
Tambin reduce el nmero de segmentos de la curva. Pero es relativo y no tiene ningn efecto sobre
segmentos rectos. Es especialmente til cuando surgen dificultades al remodelar una serie de
segmentos curvos muy cortos. Al seleccionar los segmentos y suavizarlos se reduce su nmero y el
resultado es una curva ms suave y fcil de remodelar. La aplicacin reiterada del suavizado o
enderezamiento hace que el segmento se suavice o enderece, segn lo recto o curvo que estuviera
originalmente.
Para suavizar la curva de cada lnea o contorno de relleno seleccionado:
Seleccione la herramienta Flecha y haga clic en el modificador Suavizar en la seccin Opciones de la
caja de herramientas o seleccione Modificar > Suavizar.

Para realizar pequeos ajustes de enderezamiento en cada lnea curva o contorno de relleno
seleccionado:

Seleccione la herramienta Flecha y haga clic en el modificador Enderezar en la seccin Opciones de la


caja de herramientas o seleccione Modificar > Enderezar.
Optimizacin de curvas

Otra forma de suavizar curvas es optimizarlas.


Esto refina las lneas curvas y los contornos de relleno reduciendo el nmero de curvas utilizadas para
definirlos.
Tambin reduce el tamao de las pelculas Flash y de las pelculas de Flash Player exportada. Al igual
que con los modificadores Suavizar o Enderezar, puede aplicar la optimizacin varias veces al mismo
elemento.
Para optimizar curvas:
1 Seleccione los elementos dibujados que desea optimizar y elija Modificar > Optimizar.
2 En el cuadro de dilogo Optimizar curvas, arrastre el control deslizante Suavizar para especificar el
grado de suavizado. Los resultados exactos dependen de las curvas seleccionadas. En general, la
optimizacin reduce el nmero de curvas y el resultado es menos similar al contorno original.
3 Establezca las opciones adicionales:
Seleccione Utilizar varias pasadas para repetir el proceso de suavizado hasta que no pueda realizarse otra
optimizacin; esto es lo mismo que elegir varias veces Optimizar con los mismos elementos seleccionados.
Active Mostrar mensaje con valores totales para visualizar un cuadro de alerta que indique el alcance de la
optimizacin una vez finalizado el suavizado.
4 Haga clic en Aceptar.

4. BORRADO, AJUSTE Y COLOR


La herramienta Borrador permite eliminar trazos y rellenos.
Puede borrar todo el Escenario con rapidez, borrar los diferentes segmentos de trazos o reas rellenas,
o borrar por arrastre.
Personalice la herramienta Borrador para borrar slo trazos, slo reas rellenas o slo una nica rea
rellena.
El borrador puede ser redondo o cuadrado y hay cinco tamaos disponibles.

Para borrar con rapidez todo el Escenario:


Haga doble clic en la herramienta Borrador.
Para eliminar segmentos de trazos o reas rellenas:

1 Seleccione la herramienta Borrador y, a continuacin, haga clic en el modificador Grifo.


2 Haga clic en el segmento de trazo o el rea rellena que desea borrar.

Para borrar por arrastre:


1 Seleccione la herramienta Borrador.
2 Haga clic en el modificador Modo Borrador y seleccione un modo de borrado:
Borrar normal borra trazos y rellenos de la misma capa.
Borrar rellenos slo borra rellenos, sin afectar a los trazos.
Borrar lneas slo borra los trazos, sin afectar a los rellenos.
Borrar rellenos seleccionados slo borra los rellenos actualmente seleccionados y no afecta a
los trazos, estn seleccionados o no. (Seleccione los rellenos que desea borrar antes de utilizar
la herramienta Borrador en este modo).
Borrar dentro slo borra el relleno en el que se ha iniciado el trazo de borrador. Si el punto de
inicio de borrado est vaco, no se borra nada. Este modo no afecta a los trazos.
3 Haga clic en el modificador Forma de borrador y seleccione el tamao y la forma del borrador.
Asegrese de no seleccionar el modificador Grifo.
4 Arrastre sobre el Escenario.
Modificacin de formas

Puede modificar las formas convirtiendo lneas en rellenos, expandiendo la forma de un objeto relleno
o suavizando los bordes de una forma rellena modificando las curvas que la definen.
La funcin Lneas a rellenos transforma las lneas en rellenos, lo que permite rellenar las lneas con
degradados o borrar parte de una lnea.
Las funciones Expandir forma y Suavizar bordes permite expandir formas rellenas y hacer borrosos
los bordes de las formas. Estas funciones trabajan mejor con formas pequeas que no contengan
demasiados detalles pequeos.
Si se aplica Suavizar bordes a formas con numerosos detalles, es posible que aumente el tamao del
archivo de una pelcula para Flash Player.

Para convertir lneas en rellenos:


1 Seleccione una o varias lneas.
2 Seleccione Modificar > Forma > Convertir lneas en rellenos. Las lneas seleccionadas se convertirn
en formas rellenas.
La conversin de lneas a rellenos incrementa el tamao de los archivos, pero tambin puede acelerar
el dibujo de algunas animaciones.

Para expandir la forma de un objeto relleno:


1 Seleccione una forma rellena. Este comando funciona de forma ptima con formas rellenas de un
slo color sin trazo.
2 Seleccione Modificar > Forma > Expandir relleno.
3 En el cuadro de dilogo Expandir trazados, introduzca un valor en pxeles para la distancia y
seleccione la direccin Expandir o Contraer. Expandir agranda la forma y Dimensiones la reduce.

Para suavizar los bordes de un objeto:


1 Seleccione una forma rellena. Este comando funciona de forma ptima con formas con un slo
relleno sin trazo.
2 Seleccione Modificar > Forma > Suavizar bordes de relleno.
3 Establezca las siguientes opciones:
Distancia es la anchura en pxeles del borde suavizado.
Nmero de escenarios controla la cantidad de curvas utilizadas para el efecto de suavizado de
borde. Un mayor nmero de etapas produce un efecto ms suave pero incrementa el tamao del
archivo y hace ms lento su dibujo.
Expandir o Contraer controla si la forma se ampla o reduce al suavizar los bordes.

Funciones de ajuste y encaje

Para alinear automticamente elementos entre s, es posible utilizar el ajuste. Se puede activar la
funcin de ajuste mediante el modificador Ajuste de la herramienta o con el comando Ajustar a objetos
del men Ver. Tambin puede ajustar a la cuadrcula o a las guas. Al activar el modificador Ajustar de
la herramienta Flecha, aparece un pequeo anillo negro bajo el puntero cuando se arrastra un elemento.
Este anillo aumenta de tamao cuando el objeto est dentro de la distancia de ajuste de una lnea de la
cuadrcula.

Para activar o desactivar el ajuste, utilice uno de los siguientes procedimientos:


Seleccione la herramienta Flecha y haga clic en el modificador Ajustar de la caja de
herramientas.
Seleccione > Ajustar a objetos. Si est activado, aparece una marca de verificacin junto al
comando.
Al mover o remodelar elementos, la posicin de la herramienta Flecha sobre el elemento es el punto de
referencia para el anillo de ajuste. Por ejemplo, si para mover una forma rellena, arrastra desde su
centro, el punto central se ajusta a las lneas de la cuadrcula y otros elementos. Esto es muy prctico
para ajustar formas a trazados de movimiento para animacin.
Para ajustar las tolerancias de ajuste:
Ajuste el valor Conectar lneas en Configuracin del dibujo en las preferencias de edicin. Para un
mejor control de la colocacin de objetos al activar el ajuste, comience arrastrando desde una esquina
o punto central.
Herramienta Color
Animacin paso a paso

Ejercicio 1: Marciano animado

Vamos a realizar un ejercicio en el que haremos una animacin fotograma a fotograma.

Diseo del primer fotograma

1.- Creamos un documento nuevo vaco. Este documento ya contiene por defecto un primer fotograma
clave.

2.- Diseamos el cuerpo de un mueco redondo con pies, tal como aperece en la figura, en base a
valos sin contornos rellenos de un degradado de color verde cuyos centros se han desplazado para
situar el brillo en el lugar adecuado. Por tanto utilizaremos la herramienta valo para las formas y la
relleno para descentrar los degradados. Inicialmente dibujamos cada valo por separado.

3.- Seleccinamos individualmente cada valo y pulsamos Ctrl + G para que queden agrupados pero
separados el uno del otro. Eso nos permitir dibujar sobre ellos y superponerlos sin que se vean
afectados. Situamos cada elemento en su sitio hasta que queden como se observa en la figura.

4.- Configuramos la herramienta valo para crear crculos rellenos de color blanco y sin contorno.
Dibujamos fuera del mueco anterior un crculo, lo seleccionamos (aunque no se vea el crculo sigue
estando ah), y lo agrupamos con Ctrl + G. Ahora ya podemos arrastrar el crculo y situarlo sobre el
valo grande, ya que, en caso contrario quedara por debajo de este. Copiamos (Ctrl + C) y pegamos
(Ctrl + V) el crculo anterior para crear otro ojo junto al anterior. Si tenemos problemas para situar los
crculos debemos desactivar la opcin Ver/Ajustar a objetos.

5.- Con el mismo procedimiento de antes creamos dos crculos negros para situarlos como pupilas
dentro de los ojos del mueco. No debemos olvidarnos de agrupar cada crculo para que quede por
encima de los otros objetos.

6.- Con la herramienta lpiz junto con el modificador suavizar y ayudndonos del panel Trazo,
creamos una especie de antenas de color rojo y trazo grueso para colocar en la cabeza de nuestro
marciano. Podemos dibujar primero una, copiar, pegar y reflejar horizontalmente (Modificar
Transformar Reflejar horizontalmente) para crear la otra.

7.- Finalmente completamos las antenas con dos cculos rellenos con un degradado a nuestro gusto
para simular una bola. Seleccionamos a la vez una antena y su bola y pulsamos Ctrl + G para crear un
grupo con esos dos elementos. Hacemos lo mismo con la otra antena y la otra bola.

Creacin del segundo fotograma

Ya tenemos creado el primer fotograma, ahora vamos a pasar a dibujar el segundo.

8.- Pulsamos F6 para crear un nuevo fotograma clave que contendr automticamente lo mismo que el
fotograma anterior.

9.- Seleccionamos el grupo correspondiente a la antena izquierda y elegimos la accin Rotar del men
contextual (al que accederemos con el botn derecho del ratn encima del objeto).
10.- Hacemos lo mismo con la antena derecha.

11.- Seleccionamos a la vez las dos pupilas de los ojos y las llevamos hacia la derecha para simular
que el marciano mira para ese lado. Utilizaremos las teclas del cursor para hacerlo con precisin.

Creacin del tercer fotograma

12.- Pulsamos F6 para crear el tercer fotograma clave.

13.- Seleccionamos de nuevo las dos pupilas y las llevamos al centro para simular que el marciano
vuelve a mirarnos a nosotros.

14.- Seleccionamos cada antena por separado y mediante la opcin Rotar arrastramos hacia arriba del
mismo tirador que antes para devolver las antenas a su estado inicial.

Creacin del cuarto y ltimo fotograma

15.- Pulsamos F6 para crear el cuarto y ltimo fotograma clave.


16.- Seleccionamos las dos pupilas y las llevamos hacia la izquierda.

17.- Volvemos a deformar las antenas del mismo modo que hicimos en el paso 10 pero procurando que
queden ligeramente difierentes para que la animacin no quede tan repetitiva.

Ya hemos acabado la animacin. Ahora slo queda ponerla en marcha y observar lo que sucede. Para
ello debemos pulsar Ctrl + Intro y se reproducir la pelcula.

Para reproducir una pelcula tenemos tres opciones:


Ctrl + Intro
En el men Control Reproducir
Durante la edicin de una pelcula podemos hacernos a la idea de cmo est quedando si
arrastramos manualmente el cursor o cabezal de la lnea de tiempo que es el rectngulo de color
rojizo con una lnea vertical que recorre los fotogramas de la lnea de tiempo.

Para alargar el tiempo de reproduccin de una pelcula tambin disponemos de varias opciones:
En el men Modificar Pelcula podemos controlar los fps (fotogramas por segundo), es decir,
la velocidad de reproduccin. El valor por defecto es 12 fps. Si bajamos este nmero la
velocidad de reproduccin ser ms lenta.

Adems podemos controlar las dimensiones del escenario y su color de fondo.


Otra opcin es insertar ms fotogramas clave pulsando F6. Cada vez que insertemos un nuevo
fotograma clave se crear una copia del fotograma anterior. Una vez realizada esta copia sobre
el fotograma clave podremos realizar todos los cambiamos que deseemos.

Respecto a los formatos de grabacin tenemos los siguientes:


Para poder volver a realizar todos los cambiamos que necesitemos tenemos que grabar el
fichero en formato Flash (.fla), el formato propio de la herramienta.
Para almacenar las pelculas de tal forma que las podamos insertar en una pgina Web debemos
guardarlas en formato Flash Player (.swf). La caracterstica principal de este formato es el
poco espacio que utiliza, lo que le hace muy til para su uso en Internet. Para poder exportar a
este formato debemos utilizar el men Archivo Exportar Pelcula...
A travs del men Archivo Exportar Pelcula... podemos tambin acceder a otros formatos de
pelculas ampliamente utilizados como avi, mov o gif animado.

Animacin por interpolacin de movimiento

La interpolacin nos permite crear rpidamente animaciones sin tener que recurrir al mtodo de
fotograma a fotograma. Con la interpolacin de movimiento, a partir de un fotograma inicial y otro
final, Flash crear todos los fotogramas intermedios.

La interpolacin de movimiento slo es aplicable a los objetos agrupados o a los smbolos. En


consecuencia, cualquier objeto dibujado en Flash deber ser previamente agrupado para que se
le pueda aplicar una interpolacin de este tipo.

Cmo crear una interpolacin de movimiento

1.- Dibujamos el contenido del primer fotograma

2.- Seleccionamos el primer fotograma y hacemos clic sobre l con el botn derecho del ratn para
abrir el men contextual.

3.- Seleccionamos la opcin Crear Interpolacin de Movimiento. De momento no parece que haya
sucedido nada.

4.- Seleccionamos el ltimo fotograma que deseamos para la interpolacin y pulsamos F6 para
convertirlo en fotograma clave. Veremos como aparece una flecha que indica que ha sido creada una
interpolacin y todos los fotogramas intermedios se colorean de violeta indicando que pertenecen a
una interpolacin de movimiento.

5.- Editamos el objeto que contiene el ltimo fotograma y sobre l realizamos todos los cambios que
deseemos. Ya podemos reproducir la animacin.

6.- Cualquiera de los fotogramas intermedios de la interpolacin lo podemos transformar a fotograma


clave para editarlo posteriormente con tan solo pulsar F6.

Tipos de acciones que se pueden realizar en una interpolacin de movimiento

En una interpolacin de movimiento podremos realizar las siguientes acciones:


El objeto cambia de posicin en lnea recta
El objeto va cambiando su color
El objeto va cambiando su transparencia
El objeto va cambiando su tamao
El objeto va girando
El objeto recorre un trazado determinado
El objeto realiza una transformacin sencilla

Ejercicio 2: Pelota botando

En este ejercicio vamos a pintar una pelota que aparece por la parte superior izquierda de la escena y
tras dar varios botes, se detiene en la parte inferior derecha de la escena. Este ejercicio pretende
trabajar con: interpolacin de movimiento, gua de movimiento, rotacin de los objetos y aceleracin
de los objetos.

Creacin de la pelota

1.- Dibujamos un crculo con contorno y, mediente la herramienta Lpiz con el modificador suavizar,
trazamos unas lneas curvas verticales dentro del crculo para divirlo en tres partes.

2.- Seleccionamos todo el conjunto y mediante el panel Trazo aplicamos un grueso de lnea de 3 4
puntos.

3.- Seleccionamos por separado cada uno de los tres rellenos que han quedado en la pelota y les
aplicamos con el selector de color un color diferente para darle un aspecto tpico de pelota hinchable
de playa, como se ve en la siguiente figura.

4.- Seleccionamos todo el conjunto y lo agrupamos con Ctrl + G. Con esto ya tenemos lista la pelota.

Creacin de la interpolacin de movimiento

5.- Hacemos clic sobre el primer fotograma con el botn derecho y seleccionamos Crear Interpolacn
de Movimiento.

6.- Seleccionamos el fotograma nmero 40 y pulsamos F6 para convertirlo en fotograma clave. Con
esto quedar definida la interpolacin, aunque, de momento, no se ha definido ningn movimiento.

Creacin del trayecto de la pelota

7.- Sobre la capa hacemos clic con el botn derecho del ratn y aparecer una capa de gua por encima
de la capa actual.
8.- Mediante la herramienta Lpiz y el modificador suavizar trazamos un camino que intente
reproducir el que deber seguir una pelota cuando aparezca en la escena, es decir, una serie de botes,
cada uno de los cuales debe ser menor que el anterior hasta que ya no bote ms. Esto se debe realizar
con la capa Gua seleccinada.

9.- No importa que el trazo rebase los lmites de la escena, ya que, de ese modo, la pelota aparecer y
desaparecer de la escena.

10.- Tampoco importa el grueso del trazo, aunque es preferible que no sea demasiado ancho.
Colocacin de la pelota en los lugares adecuados

11.- Activamos Ver/Ajustar a objetos, en caso de que no est activado.

12.- Seleccionamos la pelota y con la herramienta de movimiento arrastramos la pelota hasta que que
su centro se encaje con el principio de la lnea. Si seleccionamos la pelota cerca de su centro podremos
ver un pequeo crculo que indica el centro del objeto y que habr que hacer coincidir con la gua de
movimiento.

13.- Seleccionamos el ltimo fotograma y arrastramos igualmente la pelota hasta que su centro
coincida con el final de la lnea trazada.

14.- Reproducimos la pelcula pulsando Ctrl + Intro y veremos como la pelota recorre el camino
descrito simulando una serie de botes.

Rotacin y aceleracin de la pelota

15.- Seleccionamos el primer fotograma de la capa de la pelota

16.- Seleccionamos el panel Fotograma (en caso de no estar visible lo podemos abrir con Ctrl + F o
con Ventana Paneles Fotograma ). Ajustamos una rotacin en sentido horario (CMR) e
introducimos un valor de 6 para que la pelota describa seis vueltas sobre s misma durante todo el
trayecto. Adems podemos seleccionar una aceleracin positiva, con lo que la pelota ir ms rpido al
principio y ms lento al final.
Ejercicio 3: Bolas que rebotan

Con este tercer ejercicio acabamos con la parte de interpolacin de movimiento, y lo


aprovecharemos para introducirnos en el tema de la Librera de Objetos.

Creacin de la bola

1.- Creamos un documento nuevo con las dimensiones por defecto y una velocidad de reproduccin de
25 fps.

2.- Con la orden Insertar/Nuevo Smbolo creamos un smbolo grfico denominado bola.

3.- Dibujamos una circunferencia sin contorno y un relleno degradado de color gris.

4.- La centramos en medio de la pantalla con el Panel Alinear (Ventana Paneles Alinear o Ctrl +
K). Debemos centrar el objeto respecto a la escena, por lo que tenemos que tener el correspondiente
botn apretado.
5.- Con la herramienta de relleno hacemos clic en el cuadrante superior izquierdo del crculo para
descentrar el brillo del relleno.

6.- Cambiamos el tamao de la bola y la ponemos con un dimetro de 30 puntos. Para ello
seleccionamos la bola, y en el mencontextual seleccionamos la opcin escalar. En el Panel Info
podemos poner el ancho y alto de la bola, que ser de 30 por 30.

7.- Para dejar de editar el objeto hacemos clic en el texto que pone Escena 1 que est situado arriba a
la izquierda de la pelcula.

8.- Para ver los objetos que tenemos en la biblioteca debemos ir al men Ventana Biblioteca o
directamente con Ctrl + L.

Creacin de la sombra para la bola

9.- Con la orden Insertar Nuevo Smbolo creamos un smbolo grfico denominado bola sombra.

10.- Abrimos la biblioteca, en caso de que no lo est, y arrastramos al centro de la pantalla una
instancia de la bola.

11.- Seleccionamos la herramienta circular y preparamos los selectores para dibujar sin contorno y con
relleno de color negro.

12.- Dibujamos una elipse horizontal de tamao 35x7 puntos y la situamos por debajo de la bola como
si fuera su sombra proyectada en el suelo.
13.- Dejamos de editar bola sombra pulsando sobre el texto Escena 1 arriba a la izquierda de la
pelcula.

Creacin de la primera interpolacin

Vamos a crear una interpolacin en la que una instancia de la bola aparecer por la parte superior
izquierda de la escena y se desplazar hasta el centro a la vez que aumenta de tamao para simular que
se acerca.

14.- Renombramos la capa actual de la escena como bola izquierda haciendo doble clic sobre el
nombre.

15.- Seleccionamos el primer fotograma y desde la biblioteca arrastramos una instancia del smbolo
bola sombra que anteriormente creamos. La situamos en el extremo superior izquierdo de la escena
pero por fuera de sta.

16.- Selwccionamos el primer fotograma y creamos una interpolacin de movimiento.

17.- Seleccionamos el fotograma 30 y pulsamos F6 para acabar de definir la interpolacin.

18.- Con el fotograma 30 seleccionado arrastramos la bola hasta el centro de la escena.


19.- Con el ratn seleccionamos la opcin Escalar del men contextual de la bola y escalamos a un
tamao de 115x95.

Creacin de la segunda interpolacin

Ahora vamos a crear la interpolacin que simula que las bolas salen rebotadas tras colisionar.

20.- Seleccionamos el fotograma 30 y creamos una nueva interpolacin de movimiento a partir de ah.

21.- Seleccionamos el fotograma 60 y pulsamos F6 para concluir esta segunda interpolacin.

22.- Con el fotograma 60 seleccionado arrastramos la bola hasta el borde inferior izquierdo de la
escena y escalamos su tamao hasta que ocupe un tamao de 170x140. Si es necesario recolaremos la
bola para que no se salga de la escena.

23.- Si reproducimos la animacin observaremos como la bola se acerca al centro de la pantalla a gran
velocidad, pero luego, cuando se supone que ha rebotado, recorre el camino lentamente. Como ya
podemos imaginar, eso sucede porque la segunda interpolacin utiliza 30 fotogramas al igual que la
primera pero la bola recorre aqu menos distancia.

Creacin del choque de las bolas

24.- Creamos una nueva capa y la denominamos bola derecha.

25.- Seleccionamos todas las interpolaciones de la otra capa (con el botn izquierdo del ratn), las
copiamos con la orden Copiar fotogramas, y las pegamos en la nueva capa a partir de su primer
fotograma.

26.- Como habrn aparecido fotogramas no deseado mostrando una lnea discontinua, arrastramos del
ltimo de estos fotogramas hacia la izquierda hasta depositarlo sobre el primer fotograma clave que
encontremos.
Ahora disponemos de dos capas con las mismas interpolaciones superpuestas, con lo cual, si se
reproduce la pelcula no se observar ninguna diferencia. Se trata, pues, de crear la versin simtrica
de la interpolacin de la segunda capa. Vamos a verlo:

27.- Seleccionamos el primer fotograma de la segunda interpolacin y arrastramos la bola hasta el


extremo derecho de la escena por fuera de sta para que las bolas queden simtricas en su comienzo.

28.- Seleccionamos ahora el fotograma 30 de la segunda capa y movemos un poco hacia la derecha la
bola para visualizar la de la otra capa. Arrastramos con los cursores hasta que ambas bolas queden en
contacto.

29.- Seguidamente seleccionamos las dos bolas a la vez y las centramos en la escena horizontalmente.

30.- Finalmente, seleccionamos el fotograma 60 de la segunda interpolacin y arrastramos la bola


hasta el extremo derecho de la escena para que las bolas queden simtricas en su fase final.

31.- Reproducimos la pelcula pulsando Ctrl + Intro y observamos el efecto conseguido.

32.- Con el papel cebolla podemos observar como se ha ido prodiciendo la interpolacin.
Ejercicio 4: Nmeros cambiantes

Vamos a realizar un ejercicio que transforma un nmero en otro y de nuevo vuelve al primero de ellos.

1.- En el primer fotograma creamos un texto de las siguientes caractersticas: Tamao de letra 72, Tipo
de letra Times New Roman. Escribimos en pantalla el nmero 1, y lo centramos respecto a la escena.
Para ello hay que ir al men Pantalla Paneles Alinear. No hay que olvidarse de presionar el botn
en escena para que lo alinee correctamente.

2.- Seleccionamos el nmero que acabamos de escribir y vamos a la opcin Modificar Separar para
poder hacer la interpolacin de forma.

3.- Con el fotograma 1 seleccionado nos vamos a la etiqueta fotograma y elegimos interpolacin de
forma.

4.- Nos vamos al fotograma 30 y pulsamos F6 para convertirlo en fotograma clave y ponerlo como
punto final de la interpolacin.

5.- Seleccionamos el nmero 1 que escribimos y lo borramos. En su lugar ponemos escribimos un


nmero 2 con las mismas caractersticas de tamao y tipo. Volvemos a centrarlo respecto al escenario.

6.- Seguimos en el fotograma 30 y realizamos de nuevo Modificar Separar para que la interpolacin
de forma pueda funcionar.

7.- Podemos ya comprobar cmo todo lo realizado hasta este momento funciona perfectamente. Al
ejecutar la animacin vemos como el nmero 1 se convierte en el nmero 2 de forma progresiva y
luego como de golpe se convierte de nuevo en el nmero 1 para comenzar de nuevo. Para evitar este
salto vamos a hacer que el nmero 2 se convierta a su vez en el nmero 1.

8.- Seleccionamos todos los fotogramas que tenemos creados hasta el momento y los copiamos (botn
derecho del ratn sobre la lnea de tiempo y cogemos la opcin de copiar fotogramas).
9.- Pegamos los fotogramas a partir del ltimo fotograma que tenamos (botn derecho del ratn
opcin pegar fotogramas). Lo que hemos conseguido es concatenar dos animaciones que van desde el
nmero 1 al 2.

10.- Cogemos la segunda parte de nuestra animacin, la que acabamos de pegar y la invertimos (botn
derecho del ratn opcin Invertir Fotogramas).

11.- Con esto ya tenemos completa la animacin y podemos reproducirla con Ctrl + Enter.

Ejercicio 5: Creacin de ondas

En este ejercicio vamos a crear el efecto de unas ondas similares a las que se forman en la superficie
del agua cuando se tira una piedra. Veremos una curiosa conversin de una interpolacin de forma en
una interpolacin de movimiento.

Creacin de grfico bsico

1.- Creamos un documento nuevo y seleccionamos la opcin Insertar Nuevo Smbolo. En la ventan
que se abre asignamos el nombre grfico onda y activamos la opcin Grfico.

2.- Con la herramienta elptica dibujamos una elipse sin relleno, con el contorno negro de 1 punto de
grosor y unos 70 puntos de ancho por 20 de alto. La centramos.

Creacin de la interpolacin de forma

Una vez creado el grfico bsico, vamos a crear una interpolacin de forma para que simule una onda
nica que crece y se desvanece. El motivo por el que lo vamos a hacer con interpolacin de forma en
lugar de con movimiento radica en que, con la interpolacin de movimiento, al escalar la elipse para
simular el crecimiento, el grueso del trazo tambin se ensanchar y quedara demasiado grueso. En
cambio, utilizando una interpolacin de forma podemos escalar la elipse sin que aumente
proporcionalmente el grueso del contorno.

3.- Seleccionamos el primer fotograma, y en el panel Fotograma elegimos Forma en la casilla


Interpolacin.
4.- Seleccionamos el fotograma 30 y pulsamos F6 para crear un fotograma clave y completar la
interpolacin.

5.- Con el fotograma 30 seleccionado, hacemos clic con el botn derecho sobre la elipse y
seleccionamos la opcin Escalar del men contextual. Ponemos un tamao de 220x70. La centramos.
6.- Si desplazamos manualmente el cursor de la lnea de tiempo veremos cmo crece la elipse. Por
ltimo, pulsamos sobre Escena 1 para dejar de editar el grfico.

Creacin del clip de la pelcula

Ahora vamos a utilizar la interpolacin de forma que hemos creado para conseguir un clip de pelcula
ya con el resto de ondas que necesitamos.

7.- Seleccionamos de nuevo la opcin Insertar Nuevo Smbolo y en la ventana que se abre asignamos
el nombre clip onda y activamos Clip de pelcula.

8.- Visualizamos la biblioteca que debe contener el grfico con la interpolacin de forma y el nuevo
clip todava en construccin.

9.- Desde la biblioteca arrastramos a la pantalla una instancia del grfico con la elipse y la centramos
para que aparezca en el centro de la pantalla.

Ahora vamos a convertir la interpolacin de forma en interpolacin de movimiento. Eso nos permitir
aplicar a la elipse los efectos de transparencia que necesitamos para simular el efecto de
desvanecimiento de las ondas.

10.- Seleccionamos el primer fotograma y le asignamos una interpolacin de movimiento.


11.- Seleccionamos ahora el fotograma 30 y pulsamos F6 para crear el segundo fotograma clave y
completar la interpolacin. Podemos observar como aparece automticamente la elipse aumentada de
tamao en lugar de tener que hacerlo manualmente como hemos hecho siempre.
12.- Seguidamente hacemos clic sobre la elipse grande y nos vamos al panel de Efectos.
Seleccionamos Alfa (transparencia) y ajustamos su valor al 0% para que sea totalmente transparente.
Lgicamente la elipse desaparecer.

Creacin de las ondas repetidas

Estamos todava evitando el clip onda. Ahora se trata de crear varias capas cada una de las cuales
contendr la interpolacin de movimiento que acabamos de crear pero comenzando ligeramente
despus de la anterior. De ese modo conseguiremos que las ondas vayan surgiendo una tras otra
secuencialmente. Lo vamos a hacer con tres ondas, cada de las cuales estar en su propia capa.

13.- Creamos dos capas nuevas.

14.- Hacemos clic sobre la interpolacin de la primera capa para seleccionarla por completo y
elegimos la opcin Edicin Copiar Fotogramas.

15.- Seleccionamos el fotograma nmero 3 de la segunda capa y elegimos la opcin Edicin Pegar
Fotogramas. La interpolacin se pegar pero mostrar a continuacin una serie de fotogramas con una
lnea de trazos dentro. Ahora arreglaremos esto.
16.- Arrastramos del ltimo fotograma de la derecha hacia la izquierda hasta depositarlo sobre el
ltimo fotograma clave de la interpolacin y se eliminarn automticamente esos fotogramas
indeseados.

17.- Repetimos el paso anterior para pegar la interpolacin en la tercera capa a partir del fotograma
nmero 6. Por ltimo cerramos el clip pulsando sobre Escena 1.

Colocacin de las ondas en la escena

Finalmente, slo hace falta regresar a la escena principal y arrastrar a ella las instancias del clip onda
que deseemos. Cuando reproduzcamos la pelcula veremos cmo se produce el efecto de ondas
perseguido.
Ejercicio 6: Trabajo con escenas

Ahora que estamos finalizando con Flash ha llegado el momento de trabajar con las escenas. Hasta el
momento todos las animaciones que hemos realizado se basan en una sola escena, pero tambin
tenemos la posibilidad de introducir varias escenas y ser nosotros los que decidamos su orden de
ejecucin. Crearemos unos botones en la escena principal que sern los que nos darn paso a las
diferentes escenas que creemos.

Al final del ejercicio tendremos una escena principal desde la que podremos llamar a otras tres
escenas, una con una animacin fotograma a fotograma, otra con una interpolacin de movimiento y la
ltima con una interpolacin de forma.

1.- Escribimos en la escena principal una frase parecida a: Estas son las posibilidades de animacin
de Flash

2.- Vamos a empezar creando los botones, tal y como lo hicimos en ejercicios anteriores. Men
Insertar Nuevo Smbolo. Llamamos al smbolo Boton1 y lo ponemos de tipo botn.
Vamos a usar slo tres estados. En el estado Reposo escribimos Fotograma a fotograma y lo
centramos visualmente en la pantalla. Para crear el estado Sobre nos ponemos encima de l y
apretamos F6, con lo que se crear una copia del estado anterior de Reposo.

Cambiamos el color del texto que viene escrito, de forma que cuando situemos el ratn encima de este
botn las letras cambien de color.
Por ltimo en el estado de Zona Activa pintamos un rectngulo rodeando a la palabra, de forma que el
botn se activar siempre que estemos dentro de la zona de este rectngulo. Quedar algo parecido a la
siguiente imagen

Cuando finalicemos apretamos Escena 1 para volver a la escena principal.

3.- En la escena principal podemos verificar que la biblioteca contiene el botn que acabamos de crear.

4.- Los siguientes botones queremos que tengan el mismo aspecto, por lo que la forma ms sencilla es
en la biblioteca ponernos encima del Boton 1 y con el botn derecho del ratn abrimos el men
contextual y seleccionamos Duplicar. Le ponemos el nombre de Boton 2 y ya lo nico que nos queda
por hacer es editar el Boton 2 (haciendo doble clic sobre l) y cambiar los texto de Reposo y Sobre
para poner Interpolacin de Movimiento

5.- Duplicamos el botn 2 en el Boton 3, lo editamos y cambiamos los textos para poner Interpolacin
de Forma

Al finalizar estos pasos nuestra escena principal tendr el siguiente aspecto


6.- Ponemos una instancia de cada botn en la escena principal y con ctrl. + Enter comprobamos lo que
hemos realizado hasta este momento.

7.- Llega el momento de crear las tres escenas que nos faltan. Abrimos Ventana Paneles Escena y
creamos tres nuevas escenas, que se llamen Fotograma a fotograma, Interpolacin de forma e
Interpolacin de movimiento. Cada escena se crea dando al botn + que tenemos abajo en la ventana
escena. Para renombrarla hay que hacer doble clic sobre el nombre de la escena.

8.- Comprobar que a partir de este momento, cada vez que presionemos en el nombre de una escena la
editamos y podemos hacer cambios en ella.

9.- Nos vamos a la escena fotograma a fotograma y creamos una mini-animacin de dos fotogramas
solamente.
10.- Vamos a la escena Interpolacin de movimiento y creamos una interpolacin de movimiento lo
ms sencilla posible.
11.- Vamos a la escena interpolacin de forma y creamos una interpolacin de forma tambin muy
sencilla.

12.- Comprobamos que al ejecutar la animacin con ctrl. + Enter se suceden todas las escenas
repetidamente. Ha llegado el momento de establecer el orden de ejecucin que queremos.

13.- Doble clic en el fotograma 1 de la Escena 1 (la principal) y se nos abre el men de acciones.
Doble clic en accin bsica y doble clic en stop para aadirlo. A partir de este momento la escena 1
parar su ejecucin en este fotograma, es decir, el primero. Ejecutamos la Pelcula para ver cmo va
quedando.

Debera quedar algo parecido a lo siguiente:

14.- Slo quedar asignar a los botones sus acciones correspondientes.

15.- Doble clic de nuevo en fotograma 1 y abrimos acciones del fotograma. Nos vamos al explorador
de pelculas y seleccionamos Boton 1. Veremos como la solapa que pona acciones fotograma pasa a
poner acciones objeto.

Hacemos clic en Go to y se nos abre el siguiente men en donde podemos especificar a que escena
queremos ir. La seleccionamos de la casilla desplegable y hacemos lo mismo para los botones 2 y 3.

16.- Comprobamos el resultado final.

S-ar putea să vă placă și