Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Flash cs6
Flash cs6
1. ABRIMOS FLASH 5
Cuando abrimos el programa, lo primero que encontramos es la pantalla en blanco, lo
que llamamos comúnmente "STAGE", el escenario, la pantalla donde vamos a
realizar toda la animación. Por arriba podemos observar, la línea de tiempo que está
compuesta por FRAMES (cuadros) y LAYERS (capas).
La línea de tiempo nos sirve para darle el tiempo necesario a la animación que vamos
a diseñar; el sumatorio de frames equivale a los segundos que queremos que dure
nuestra animación. En forma predeterminada, en el Flash viene definida una
velocidad de 12 cuadros por segundo. Como apunte personal me gustaría comentar
que para realizar una película eficiente uno se tiene que basar en determinados
elementos: si el objetivo es, por ejemplo, utilizarla en una página 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 película: más pesado, más tarda
en bajar. (Tenemos que tener en cuenta que estas películas 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 animación. Aquellos que ya han
utilizado algún programa gráfico reconocerán 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 Lápiz, Línea, Óvalo, Rectángulo o Pincel, para dibujar
una línea sobre otra línea o forma pintada, las líneas que se solapan se dividen en
segmentos, en los puntos de intersección. Puede utilizar la herramienta Flecha para
seleccionar, mover y remodelar cada segmento independientemente. Las líneas que se
solapan creadas con la herramienta Pluma, no se dividen en segmentos en los puntos
de intersección, sino que permanecen intactas.
2. HERRAMIENTAS DE DIBUJO
Al pintar sobre formas y líneas, 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 líneas quedan separadas
Para dibujar líneas y formas, se utiliza la herramienta Lápiz, de manera muy similar a
como se emplea un lápiz real para realizar un dibujo. Para aplicar un suavizado o un
enderezamiento a las líneas y las formas, según se va dibujando, basta con seleccionar
un modo de dibujo para la herramienta Lápiz.
Para dibujar con la herramienta Lápiz:
1 Seleccione la herramienta Lápiz.
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 líneas rectas y convertir figuras similares
a triángulos, óvalos, círculos, rectángulos y cuadrados en estas formas
geométricas.
• Seleccione Suavizar para dibujar curvas suaves.
• Seleccione Tinta para dibujar líneas a mano alzada sin aplicarles ninguna
modificación. Líneas 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 Lápiz. Arrastre con la
tecla Mayús presionada para dibujar sólo líneas verticales u horizontales.
Las herramientas Línea, Óvalo y Rectángulo permiten crear fácilmente las formas
geométricas habituales. Las herramientas Óvalo y Rectángulo crean tanto formas
rellenas como formas sólo definidas por el trazo. Puede utilizar la herramienta
Rectángulo para crear rectángulos con esquinas rectas o redondeadas.
Para dibujar trazados precisos como líneas rectas o bien como suaves curvas fluidas,
puede utilizar la herramienta Pluma.
Puede crear segmentos de líneas 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
líneas rectas o bien hacer clic y arrastrar para crear puntos en los segmentos de las
líneas curvas.
Puede ajustar los segmentos de las líneas curvas y rectas ajustando los puntos de las
líneas.
Puede convertir líneas curvas en líneas rectas y viceversa. También puede mostrar los
puntos de las líneas creadas con otras herramientas de dibujo de Flash, como las
herramientas Lápiz, Pincel, Línea, Óvalo o Rectángulo, para ajustar estas líneas.
puntos de la línea que determinan la longitud de cada uno de los segmentos de línea.
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 pequeño bucle
cerca de la punta de la pluma. Haga clic o arrastre para cerrar el trazado.
Para terminar la forma tal cual, seleccionando Edición > Anular selección de todo
o bien elija otra herramienta de la caja de herramientas.
Para mostrar los puntos de anclaje de una línea de un contorno de forma creados con
las herramientas Lápiz, Pincel, Línea, Óvalo o Rectángulo:
1 Seleccione la herramienta Subselección.
2 Haga clic en la línea o el contorno de la forma.
Para remodelar una línea o el contorno de una forma, puede arrastrar cualquier punto
de la línea mediante la herramienta Flecha. El puntero cambia para indicar el tipo de
modificación que se puede realizar en la línea o relleno. Flash ajusta la curva del
segmento de línea para acomodarla a la posición del punto desplazado. Si se trata de
El enderezamiento hace los pequeños ajustes necesarios a las líneas y las curvas ya
dibujadas. No tiene ningún efecto sobre los segmentos rectos. También puede utilizar
la técnica de enderezamiento para que Flash reconozca las formas. Si dibuja cualquier
forma ovalada, rectangular o triangular con la opción Reconocer formas desactivada,
puede utilizar la opción Enderezar para hacer las formas geométricamente perfectas.
Pero no reconoce las formas que se tocan y están conectadas con otros elementos.
Optimización de curvas
Modificación de formas
Para alinear automáticamente elementos entre sí, es posible utilizar el ajuste. Se puede
activar la función de ajuste mediante el modificador Ajuste de la herramienta o con el
comando Ajustar a objetos del menú Ver. También puede ajustar a la cuadrícula o a
las guías. Al activar el modificador Ajustar de la herramienta Flecha, aparece un
pequeño anillo negro bajo el puntero cuando se arrastra un elemento. Este anillo
aumenta de tamaño cuando el objeto está dentro de la distancia de ajuste de una línea
de la cuadrícula.
2.- Diseñamos el cuerpo de un muñeco 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 círculos rellenos de color blanco y
sin contorno. Dibujamos fuera del muñeco anterior un círculo, lo seleccionamos
(aunque no se vea el círculo sigue estando ahí), y lo agrupamos con Ctrl + G. Ahora
ya podemos arrastrar el círculo y situarlo sobre el óvalo grande, ya que, en caso
contrario quedaría por debajo de este. Copiamos (Ctrl + C) y pegamos (Ctrl + V) el
círculo anterior para crear otro ojo junto al anterior. Si tenemos problemas para situar
los círculos debemos desactivar la opción Ver/Ajustar a objetos.
5.- Con el mismo procedimiento de antes creamos dos círculos negros para situarlos
como pupilas dentro de los ojos del muñeco. No debemos olvidarnos de agrupar cada
círculo para que quede por encima de los otros objetos.
6.- Con la herramienta lápiz junto con el modificador suavizar y ayudándonos 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 cículos 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.
Creación 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á automáticamente
lo mismo que el fotograma anterior.
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 precisión.
Creación 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 opción Rotar arrastramos
hacia arriba del mismo tirador que antes para devolver las antenas a su estado inicial.
17.- Volvemos a deformar las antenas del mismo modo que hicimos en el paso 10
pero procurando que queden ligeramente difierentes para que la animación no quede
tan repetitiva.
Ya hemos acabado la animación. Ahora sólo queda ponerla en marcha y observar lo
que sucede. Para ello debemos pulsar Ctrl + Intro y se reproducirá la película.
Otra opción es insertar más 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.
La interpolación nos permite crear rápidamente animaciones sin tener que recurrir al
método de fotograma a fotograma. Con la interpolación de movimiento, a partir de un
fotograma inicial y otro final, Flash creará todos los fotogramas intermedios.
2.- Seleccionamos el primer fotograma y hacemos clic sobre él con el botón derecho
del ratón para abrir el menú contextual.
5.- Editamos el objeto que contiene el último fotograma y sobre él realizamos todos
los cambios que deseemos. Ya podemos reproducir la animación.
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: interpolación de movimiento, guía de
movimiento, rotación de los objetos y aceleración de los objetos.
Creación de la pelota
1.- Dibujamos un círculo con contorno y, mediente la herramienta Lápiz con el
modificador suavizar, trazamos unas líneas curvas verticales dentro del círculo para
divirlo en tres partes.
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
típico de pelota hinchable de playa, como se ve en la siguiente figura.
10.- Tampoco importa el grueso del trazo, aunque es preferible que no sea demasiado
ancho.
14.- Reproducimos la película pulsando Ctrl + Intro y veremos como la pelota recorre
el camino descrito simulando una serie de botes.
Rotación y aceleración 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 rotación en
sentido horario (CMR) e introducimos un valor de 6 para que la pelota describa seis
vueltas sobre sí misma durante todo el trayecto. Además podemos seleccionar una
aceleración positiva, con lo que la pelota irá más rápido al principio y más lento al
final.
Creación de la bola
1.- Creamos un documento nuevo con las dimensiones por defecto y una velocidad de
reproducción de 25 fps.
2.- Con la orden Insertar/Nuevo Símbolo creamos un símbolo gráfico denominado
“bola”.
3.- Dibujamos una circunferencia sin contorno y un relleno degradado de color gris.
5.- Con la herramienta de relleno hacemos clic en el cuadrante superior izquierdo del
círculo para descentrar el brillo del relleno.
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 película.
8.- Para ver los objetos que tenemos en la biblioteca debemos ir al menú Ventana –
Biblioteca o directamente con Ctrl + L.
9.- Con la orden Insertar – Nuevo Símbolo creamos un símbolo gráfico denominado
“bola sombra”.
12.- Dibujamos una elipse horizontal de tamaño 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 película.
19.- Con el ratón seleccionamos la opción Escalar del menú contextual de la bola y
escalamos a un tamaño de 115x95.
25.- Seleccionamos todas las interpolaciones de la otra capa (con el botón izquierdo
del ratón), las copiamos con la orden Copiar fotogramas, y las pegamos en la nueva
capa a partir de su primer fotograma.
26.- Como habrán aparecido fotogramas no deseado mostrando una línea 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 película no se observará ninguna diferencia. Se trata, pues, de
crear la versión simétrica de la interpolación de la segunda capa. Vamos a verlo:
29.- Seguidamente seleccionamos las dos bolas a la vez y las centramos en la escena
horizontalmente.
7.- Podemos ya comprobar cómo todo lo realizado hasta este momento funciona
perfectamente. Al ejecutar la animación vemos como el número 1 se convierte en el
número 2 de forma progresiva y luego como de golpe se convierte de nuevo en el
número 1 para comenzar de nuevo. Para evitar este salto vamos a hacer que el número
2 se convierta a su vez en el número 1.
8.- Seleccionamos todos los fotogramas que tenemos creados hasta el momento y los
copiamos (botón derecho del ratón sobre la línea de tiempo y cogemos la opción de
copiar fotogramas).
9.- Pegamos los fotogramas a partir del último fotograma que teníamos (botón
derecho del ratón opción pegar fotogramas). Lo que hemos conseguido es concatenar
dos animaciones que van desde el número 1 al 2.
11.- Con esto ya tenemos completa la animación y podemos reproducirla con Ctrl +
Enter.
Ejercicio 5: Creación 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 conversión
de una interpolación de forma en una interpolación de movimiento.
2.- Con la herramienta elíptica 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.
5.- Con el fotograma 30 seleccionado, hacemos clic con el botón derecho sobre la
elipse y seleccionamos la opción Escalar del menú contextual. Ponemos un tamaño
de 220x70. La centramos.
6.- Si desplazamos manualmente el cursor de la línea de tiempo veremos cómo crece
la elipse. Por último, pulsamos sobre “Escena 1” para dejar de editar el gráfico.
9.- Desde la biblioteca arrastramos a la pantalla una instancia del gráfico con la elipse
y la centramos para que aparezca en el centro de la pantalla.
14.- Hacemos clic sobre la interpolación de la primera capa para seleccionarla por
completo y elegimos la opción Edición – Copiar Fotogramas.
17.- Repetimos el paso anterior para pegar la interpolación en la tercera capa a partir
del fotograma número 6. Por último cerramos el clip pulsando sobre “Escena 1”.
Al final del ejercicio tendremos una escena principal desde la que podremos llamar a
otras tres escenas, una con una animación fotograma a fotograma, otra con una
interpolación de movimiento y la última con una interpolación de forma.
1.- Escribimos en la escena principal una frase parecida a: “Estas son las posibilidades
de animación de Flash”
2.- Vamos a empezar creando los botones, tal y como lo hicimos en ejercicios
anteriores. Menú Insertar – Nuevo Símbolo. Llamamos al símbolo Boton1 y lo
ponemos de tipo botón.
Vamos a usar sólo 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
ratón encima de este botón las letras cambien de color.
3.- En la escena principal podemos verificar que la biblioteca contiene el botón que
acabamos de crear.
4.- Los siguientes botones queremos que tengan el mismo aspecto, por lo que la forma
más sencilla es en la biblioteca ponernos encima del Boton 1 y con el botón derecho
del ratón 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
“Interpolación de Movimiento”
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”, “Interpolación de forma” e “Interpolación de movimiento”. Cada escena
se crea dando al botón + 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-animación de
dos fotogramas solamente.
12.- Comprobamos que al ejecutar la animación con ctrl. + Enter se suceden todas las
escenas repetidamente. Ha llegado el momento de establecer el orden de ejecución
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 acción básica y doble clic en stop para añadirlo. A partir de
este momento la escena 1 parará su ejecución en este fotograma, es decir, el primero.
Ejecutamos la Película para ver cómo va quedando.
15.- Doble clic de nuevo en fotograma 1 y abrimos acciones del fotograma. Nos
vamos al explorador de películas y seleccionamos Boton 1. Veremos como la solapa
que ponía 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.