Manual Flash 2010

2010
PRCTICAS DE
FLASH
MODULO II, SUBMODULO II
MODULO II, CREACIN DE PRODUCTOS MULTIMEDIA A TRAVS
DEL SOFTWARE DE DISEO.
SUBMODULO II, GENERACION DE ANIMACION CON ELEMENTOS
MULTIMEDIA.
ELABORO: L.I. GERARDO DEL JESUS SEGOVIA PACHECO

PLANTEL MIGUEL HIDALGO
13/07/2010
MANUAL DE FLASH
2010
INDICE
PRACTICA 1, BARRA DE HERRAMIENTAS.......................................................3
PRACTICA 2, ACTIVACION DE LOS PANELES..................................................4
PRACTICA 3, AROS OLIMPICOS..........................................................................5
PRACTICA 4, NEPTUNO.........................................................................................6
PRACTICA 5, ABEJA, .............................................................................................7
PRACTICA 6, LA MARIPOSA................................................................................9
PRACTICA 7, LA GUACAMAYA............................................................................10
PRACTICA 8, EL MUECO....................................................................................12
PRACTICA 9, CAPAS...............................................................................................14
PRACTICA 10, BOLAS QUE REBOTAN...............................................................17
PRACTICA 11, LA PELOTA...................................................................................21
PRACTICA 12, MASCARA.....................................................................................23
PRACTICA 13, BOTON SIMPLE............................................................................26
PRACTICA 14, BOTON ANIMADO.......................................................................28
PRACTICA 15, MOVIE CLIP..................................................................................31
ACADEMIA DE INFORMATICA
MANUAL DE FLASH
2010
1. BARRA DE HERRAMIENTAS
1. Abre el software flash 8

2. Localiza en el men archivo la opcin ventana
3. Selecciona la opcin Barra de Herramientas.
4. Ahora Selecciona Principal
5. Con esto quedar activada la barra de Herramientas Principal.
De esta misma forma podremos obtener la barra de Edicin y la barra de Control.
Caja de herramientas
1 Localizamos en el men archivo la opcin Ventana
2 Luego seleccionamos herramientas
3 Con esto queda activada la caja de herramientas en caso de haberse desactivado.
MANUAL DE FLASH
2010
2. ACTIVACION DE LOS PANELES
.
1. Para activar los paneles hay que iniciar la aplicacin
2. Posteriormente localizar dentro de los elementos del men la opcin Ventana.
3. Luego elegimos el panel en el que deseamos trabajar.
4. De manera automtica los paneles se activaran.
Podemos encontrar diferentes paneles como son:
Acciones
Comportamiento
Mezclador de colores
Muestras de color
Acciones
Propiedades
Etc
Mezclador de color
Transformar
MANUAL DE FLASH
2010
3. AROS ALIMPICOS
Dibujar los aros olmpicos.

1 Seleccionamos la Herramienta valo.
2
Trazamos
valos,
para
que
sean
perfectamente circulares, mantenemos pulsada la

tecla Shift.
3 Una vez que estn dibujados, seleccionamos el
relleno de cada valo y pulsamos la tecla
Suprimir para eliminarlo. (Igualmente podamos
haber seleccionado el color "ninguno"
y posteriormente creado los valos que
hubieran aparecido sin color de fondo)

4 Ahora seleccionamos los bordes de cada aro y le damos el color que queramos
seleccionndolo en el Panel Mezclador de Colores.
5 Ahora mueve cada aro hasta la posicin deseada. Para mover un objeto, selecciona la
Herramienta Seleccin, haz clic en el aro que quieras mover y arrstralo.
MANUAL DE FLASH
2010
4. SATURNO
Vamos a dibujar un planeta parecido a Saturno
1 Seleccionamos la Herramienta valo.
2 Creamos un valo
3 Eliminamos el borde, para ello, hacemos clic en l y pulsamos la tecla Suprimir.
4 Seleccionamos el Relleno del valo y abrimos el Panel Relleno.
5 Seleccionamos la opcin Degradado Radial.

6 Pulsamos en
y seleccionamos los colores que deseemos, (podemos aadir tantos
colores como queramos y probar su efecto).
7 Dibujamos el anillo de Saturno, por ejemplo creando otro valo con

la forma adecuada.
8 Tenemos que cambiar la forma de uno de los 2 para que tenga la
forma deseada. Por ejemplo, borramos parte del planeta como en la
imagen.
9 Solapamos los 2 objetos dibujados, de modo que formen el dibujo que queramos.
MANUAL DE FLASH
2010
5. ABEJA
Haremos uso de las herramientas de la caja para crear una graciosa abeja
1. Abre la aplicacin de Flash
2. Elige un documento de Flash
3. Para iniciar crearas dos valos
ejemplo.
sin bordes lo ms semejante al
4. Selecciona los objetos y en el men modificar elije combinar objetos/

unin.
5. Con esto ambos objetos se unirn y ahora formaran uno solo.
6. Ahora con ayuda del bote de tinta

le colocaremos a ese grafico un borde completo quedando de la siguiente manera.
7. Ahora para que lo que hayamos hecho no se baya mezcle con los dems elementos
que vamos a crear necesitaras agrupar estos elementos con ctrl+g.
8. Para la creacin de los ojos de la abeja realizaras el mismo
procedimiento que realizamos para la creacin del cuerpo y al termino
agrupa los elementos que componen al ojo. Posteriormente nelos al
resto del cuerpo. Ahora tu figura debe de quedar de la siguiente
manera.
9. Ahora crearemos las antenas del de la abeja para ello hars uso de
la herramienta lpiz y de la herramienta ovalo para crear unas sencillas
antenas trata de darle el color que tiene su cuerpo para obtener una
buena combinacin, no olvides agrupar cada una de las antenas y
posteriormente la unes al resto del cuerpo. Deber quedar as.
10. Bien nuestra abeja va tomando forma ahora le haremos su boca, para esta parte
podrs hacer uso del lpiz y luego darle curva a la lnea, o puedes tambin utilizar la
pluma.
MANUAL DE FLASH
2010
11. Ahora vamos a crearle las franjas que distinguen a la abeja para ello utilizaras la
herramienta lpiz y le crearas la curva nicamente que a la lnea le tendrs que dar en su
propiedad grosor de lnea un tamao ms grande para que se visualice de la siguiente
manera.
12. Bien nuestra abeja esta casi lista, le falta el aguijn, las alas y
unas manos.
13. Para el aguijn dibuja un triangulo y modifcalo hasta obtener la
forma deseada, para las manos puedes usar el lpiz para darle la
forma y usar suavizado.
14. Bien nos quedan nicamente las alas para ello necesitaremos
dibujar un ovalo, primero dibujaremos una sola ala y posteriormente
mediante una copia obtendremos la otra.
15. Dentro de ese ovalo ahora con ayuda del lpiz dibujaras unas lneas
para darle un toque final a esta ala.
16. Ahora solo duplicaremos el ala para crear una copia, selecciona la
copia nueva del ala y dirgete al men modificar/transformar/horizontalmente.
17. con esto el ala quedara en otra direccin agrupa las alas por
separado y agrgalas al cuerpo.
18. Ahora ya tienes una abeja hecha en flash.
MANUAL DE FLASH
2010
6. LA MARIPOSA
3. Para iniciar este grafico empezaras por crear un crculo
sin borde con un relleno.
4. Agrupo el circulo para evitar que los grficos se
sobrepongan, y borres accidentalmente parte del dibujo.
5. Seguidamente crea clones y modifica el tamao de cada
uno de ellos para obtener lo siguiente. Si lo requieres vete
al final para ver la mariposa.
6. Bien coloquemos al grafico ojos boca y nariz para que
baya teniendo forma.
7. para los ojos necesitaremos valos, para la boca una lnea recta y
para la nariz otro ovalo. Convierte la lnea en una curva para
formar la boca.
8. Bien a crear las antenas dos lneas curvas y dos valos en la
parte superior.
9. Para crear las sus alas lo hars con la ayuda del pincel elige un
color semejante para dibujar con el pincel delinea una figura
parecida al de las alas nicamente te quedara la silueta. Con ayuda
del bote de pintura rellenaras la figura resultante. Es importante que
agrupes despus de crear el ala.
9. ahora le colocaremos algunos detalles al ala, para ello con ayuda
del pincel crearas unas siluetas y las rellenaras y les quitaras su
borde. Crearas dos duplicados los ajustaras a los
tamaos mostrados en el siguiente ejemplo obteniendo
lo siguiente.
MANUAL DE FLASH
2010
10. Integra las alas al resto del cuerpo de la mariposa, trata de colocar las alas detrs del
cuerpo para darle un buen efecto. Para ello utiliza organizar.
7. LA GUACAMAYA
Haremos uso de las herramientas de la caja para crear una guacamaya.
3. Para iniciar insertaremos un ovalo que ser la cabeza de la guacamaya.
Colcale un fondo radial como muestra la siguiente figura. Agrupa este
elemento.
4. Ahora para crear su pico crearemos un ovalo de nuevo pero ms
pequeo. Y con ayuda de la herramienta envoltura le iremos dando forma al
pico de la guacamaya. No se te olvide agrupar este elemento.
5. Ahora nuestra guacamaya debe de tener el siguiente aspecto.
6. Seguimos con la creacin de ojos de nuestra guacamaya, para ello

necesitaremos valos y lneas.
7. Como habrs notado nuestro dibujo est tomando forma.
8. Bien toma el elemento del pico y crea un duplicado, hazlo ms pequeo a

escala como muestra la siguiente figura.
MANUAL DE FLASH
9. crea un rectngulo grande guate del ejemplo. Este ser una vara en la cual est
sostenida la guacamaya.
10. agrgale el duplicado de la figura que reducimos

anteriormente pero tendrs que crear cinco duplicados ms.
Guate del ejemplo.
11. Bien solo nos resta por hacer la cola, para ello solo haremos una
y luego duplicaremos las otras dos, y les cambiaremos el color.
12. Crea dos crculos y sobreponlos de tal manera que queden de
cmo el ejemplo.
13. Solo tomaremos la parte intersectada de ambos circulos para
ello retiraremos los bordes sobrantes, recuerda que aun no se han
agrupado los elementos asi que las lineas se pueden mover de
manera independiente. Quedando de la siguiente manera.
14. al dibujo resultante lo adaptaremos para crear las plumas y
previamente le colocaremos relleno. Dando como resultado.
15. Ahora agrupa cada una de las plumas y colcalas detrs de la guacamaya
quedndote una imagen de la siguiente manera.
2010
MANUAL DE FLASH
2010
8. EL MUECO
1. cree un documento nuevo vaco.
2. Dibuje el cuerpo de un mueco con pies parecido al de la figura a base
de valos sin contorno rellenos con un degradado de color azul utiliza la
herramienta
para las formas y para el relleno degradado
Dibuja el cuerpo y los pies por separados. Luego los unirs.
3. Selecciona de manera individual cada valo y pulse Ctrl + G para que queden
agrupados pero independientes el uno del otro. Eso permitir dibujar sobre ellos y
superponerlos sin que se vean afectados. Site cada elemento en el lugar
correspondiente segn la figura.
4. Configura la herramienta valo para crear crculos rellenos de color
blanco y sin contorno. Dibuja un crculo para simular uno de los ojos del
mueco y agrpalo pulsando ctrl + G. Copia y pega el crculo blanco
para crear otro junto al anterior.
5. Con el mismo procedimiento crea dos pequeos crculos negros para
situarlos como pupilas para los ojos del mueco. No olvides agrupar
cada crculo para que queden por encima de los otros objetos.
6. Con la herramienta lpiz
junto con el modificador
y
ayudndote del panel trazo, crea una especie de antena de color rojo y
trazo grueso para colocar en la cabeza de nuestro amigo. Puedes
dibujar una y luego copiar, pegar y reflejar horizontalmente para crear la
otra. No las agrupes an.
7. Finalmente, completa las antenas con crculos rellenos con un
degradado a tu gusto para simular una bola. Selecciona a la vez una bola y su antena y
pulsa ctrl + G para crear un grupo con esos dos elementos. Haga lo mismo en la otra
antena.
MANUAL DE FLASH
2010
Bien ahora sitate en el fotograma 2.

8. Ahora pulsa F6 para crear un nuevo fotograma clave que contendr
automticamente lo mismo que el fotograma anterior.
9. Selecciona a la vez las dos pupilas de los ojos y llvalas hacia la
derecha para simular que el mueco mira hacia ese lado. Utiliza las teclas para hacerlo
con mayor precisin.
10. Seleccione el grupo correspondiente a la antena de la izquierda y
elija la opcin Rotar en el men contextual para visualizar los
tiradores de rotacin. Arrastre hacia abajo del tirador central izquierdo
para deformar la antena hacia abajo.
11. Haga lo mismo con la antena de la derecha.
12. sitate en el fotograma 3 y pulsa F6 para crear un fotograma clave.
13. Selecciona de nuevo las dos pupilas y llvalas al centro para
simular que el mueco vuelve a mirarnos a nosotros.
14. Selecciona cada antena por separado y mediante la opcin rotar
arrastra hacia arriba del mismo tirador que antes para devolver las
antenas a su estado inicial.
15. Sitate y pulsa F6 en el cuarto y ltimo fotograma clave.
16. Selecciona las dos pupilas y llvalas a la izquierda para simular
que ahora el mueco mira hacia la izquierda.
17. Vuelve a deformar las antenas del mismo modo que hiciste en el
paso 10 pero procura que queden ligeramente diferentes par que la
animacin no resulte repetitiva.
18. Bien, ya esta acabada la animacin. Ahora solo falta ponerla en marcha y observar lo
que sucede. Para ello, pulsa ctrl + Intro y se reproducir la pelcula.
MANUAL DE FLASH
2010
9. CAPAS
1. Abre la herramienta flash

2. Crea un nuevo documento de flash
3. Nombra la capa con el nombre cielo, en esta capa
crearas un rectngulo con relleno azul de tal forma
que simule el cielo, como fondo de nuestra animacin.
4. Crea una nueva capa a la cual le asignars el
nombre
mar,
de igual manera dibujaras un
rectngulo con un color azul.
5. ahora crea una tercera capa a la cual le pondrs
como nombre olas, bien, ahora activa la herramienta
pincel y dibuja una lnea que te d el aspecto de una
ola, tu asgnale el degradado de lineal.
6. Crea de nuevo una capa nueva esta vez asgnale

el nombre sol, aqu dibujaras un circulo en la parte
superior derecha a la cual le asignaras un color de
relleno utilizando algn degradado., y le eliminaras el
borde al crculo.
7. Ahora bien crea una capa mas con el nombre
Gaviotas, aqu dibujaremos unas gaviotas, como
veras estamos dibujando un mar con sol e
implementaremos las gaviotas para complementar el
paisaje y posteriormente animarlo. Para crear las
gaviotas utilizaremos la herramienta pincel, seleccinala y dentro de sus propiedades
elige la opcin ms pequea del pincel y elige del tipo de pincel el biselado que es en
diagonal, la ltima opcin, con esto iras creando las gaviotas dibuja un numero de
gaviotas en el horizonte, para terminar esta parte.
MANUAL DE FLASH
2010
8. Crea una capa mas y colcale el nombre barco,

aqu dibujaras un barco con las herramientas
bsicas, utilizando la herramienta lnea dibuja la
figura del barco ahora que has creado la figura
rellnalo de color caf o algn otro color de tu
preferencia, ahora crea el mstil donde se colocar
la bandera, para crear la bandera utilizars la
herramienta polystar, una vez que hallas creado la
bandera le colocaras un relleno con degrado lineal.
9. Ahora una vez creadas las capas con sus respectivos grficos el fotograma deber
quedar de la siguiente manera. De igual forma tus capas se visualizaran como se
muestra en el ejemplo, checa que el orden de tus capas sea como se muestran en la
figura, esto para que no se traslapen tus grficos.
10. Ahora bien una vez terminado el

fotograma con sus respectivas capas
procederemos a la animacin de nuestros
grficos, sitate en el fotograma nmero 10
para crear fotogramas clave o en su defecto
fotogramas intermedios. Una vez situado en
el fotograma 10 a las capas cielo, mar y
olas, les crearas fotogramas intermedios
debido a que no queremos que estos
grficos cambien. Para las capas gaviotas y
barco crearemos fotogramas claves ya que
estos grficos sufrirn cambios durante la pelcula.
MANUAL DE FLASH
2010
11. Una vez creado el fotograma clave en las

capas gaviotas y barco modificaremos estos
grficos para su posterior animacin. Mueve el
barco que se encuentra en la capa barco, un
poco hacia delante e inclnalo, de igual manera
mueve las gaviotas de la capa gaviotas en otras
posiciones.
12. Repite la operacin en el fotograma 20 y 30, de tal manera que tu lnea del tiempo
quede como se muestra en el ejemplo de la figura.
13. A continuacin vamos a realizar la animacin, para ello vas a darle clic derecho sobre
el fotograma 1 de la capa barco y seleccionaras crear interpolacin de movimiento, lo
mismo realizaras para el fotograma 1 de la capa gaviotas. Los fotogramas sol, olas mar
y cielo quedan sin modificacin alguna.
14. Seguidamente crearemos las interpolaciones para los fotogramas 10 y 20, seguirs
las instrucciones del paso 13.
15. Despus de haber hecho todos los pasos indicados tu lnea del tiempo debi haber
quedado de la siguiente manera.
16. Nada ms nos queda probar nuestra animacin creada en capas y con la
herramienta interpolacin de movimiento.
MANUAL DE FLASH
2010
10. BOLAS QUE REBOTAN
1. Cree documento nuevo con las dimensiones por defecto y una velocidad de
reproduccin de 25 fps.
2. Con la orden insertar/nuevo smbolo cree un smbolo grfico
denominado bola.
3. Selecciona la herramienta
y prepare los selectores de color para dibujar sin
contorno y con un relleno degradado de color gris.
4. Dibuja en el centro de la pantalla una circunferencia de unos 30 punto de dimetro.
5. Con la herramienta
haga clic en el cuadrante superior izquierdo del crculo para
descentrar el brillo del relleno.
CREACIN DE LA SOMBRA.
6. Con la orden Insertar/ Nuevo smbolo cree un smbolo grfico
denominado bola sombra.
7. Abre la biblioteca y arrastre al centro de la pantalla una instancia de la
bola. Centra las dos crucecillas.
8. Selecciona la herramienta
y prepara los selectores de color para dibujar sin
contorno y con un relleno de color negro.
9. Dibuja una elipse horizontal de 35 x 7 puntos y sitala por debajo de la bola como si
fuera su sombra proyectada en el suelo.
MANUAL DE FLASH
CREACIN DE LA PRIMERA INTERPOLACIN.
Vas a crear una interpolacin en la
que una instancia de la bolla
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.
10. Renombra la capa actual de la
escena como bola izquierda.
11. Selecciona el primer fotograma y
desde la biblioteca arrastra una
instancia del smbolo bola sombra
que has creado antes. Sitala en el
extremo superior izquierdo de la
escena pero por fuera de esta.
12. Selecciona el primer fotograma y crea una interpolacin de movimiento.
13. Selecciona el fotograma 30 y pulsa F6 para acabar de definir la interpolacin.
14. Con el fotograma 30 seleccionado arrastra la bola hacia el centro de la escena.
15. Escala con el ratn Escalar el contenido del fotograma 30 hasta que tenga un
tamao de unos 115 puntos de altura.
2010
MANUAL DE FLASH
2010
CREACIN DE LA SEGUNDA INTERPOLACIN.

Ahora vamos a crear la
interpolacin que simular que las
bolas salen rebotadas tras
colisionar.
16. Selecciona el fotograma 30 y
crea una nueva interpolacin de
movimiento a partir de ah.
17. Selecciona el fotograma 60 y
pulsa F6 para concluir esta
segunda interpolacin.
18. Con el foto grama 60
seleccionado arrastra la bolla
hacia el borde inferior izquierdo de
la escena y escala su tamao
hasta que ocupe unos 170 puntos
de anchura. Si es necesario
recoloque la bola para evitar que
se salga de la escena.
19. Reproduce la animacin y observa cmo 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 debes imaginar, eso sucede porque la segunda interpolacin
utiliza 30 fotogramas igual que la primera pero la bola recorre aqu menos distancia.
MANUAL DE FLASH
2010
CREACIN DEL CHOQUE DE LAS BOLAS

La simulacin del choque de las bolas
consiste en crear otra capa en la que se
ubicarn las dos interpolaciones
creadas pero de forma simtrica.
20. Pulsa en
para crear una nueva capa y denomnala bola derecha.
21. Selecciona todas las interpolaciones de la otra capa, cpialas con la orden copiar
fotogramas y pgalas en la nueva capa a partir de su primer fotograma.
22. como habrn aparecido fotogramas indeseados mostrando una lnea discontinua.
Arrastra del ltimo de estos fotogramas hacia la izquierda hasta depositarlo sobre el
primer fotograma clave que encuentre. Ahora dispones 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.
23. Selecciona el primer fotograma de la segunda interpolacin y
arrastra la bola hasta el extremo derecho de la escena por fuera de sta
para que las bolas queden simtricas n su comienzo.
24. Selecciona ahora el fotograma 30 de la segunda capa y mueve un poco hacia la
derecha la bola para visualizar la de la otra capa. Vaya arrastrando con los cursores
hasta que ambas bolas queden en contacto.
25 Seguidamente, selecciona las dos bolas a la vez y cntralas en la escena
horizontalmente.
26 Finalmente, selecciona el fotograma 60 de la segunda interpolacin y arrastra la bola
que contiene hasta el extremo derecho de la escena para que las bolas queden
simtricas en su fase final.
27 Reproduce la pelcula pulsando Ctrl + intro y observe el efecto conseguido.
11. PELOTA
MANUAL DE FLASH
2010
1. Inicia Flash
2. Dibuja un crculo con contorno y, mediante la herramienta lpiz y con el
modificador suavizar, traza unas lneas verticales dentro del crculo para
dividirlo en tres partes.
3. Selecciona todo el dibujo y en el panel propiedades cambia el tamao
de la lnea a numero 2.
4. Selecciona por separado cada uno de los tres rellenos que han quedado en la pelota y
aplcales relleno a cada uno con un color diferente para darle un aspecto de pelota de
playa.
5. Ahora agrupa todos los elementos de la pelota.
Creacin de movimiento
6. Sitate en el fotograma 40 y crea un fotograma clave.
7. A continuacin colcate en el fotograma 1 y crea una interpolacin de movimiento.
Creacin de la Trayectoria.
8. Haz clic en el icono de gua de movimiento.
9. Mediante la herramienta lpiz o lnea y el
modificador suavizar traza un camino que intente
reproducir el que deber seguir la pelota cuando
aparezca en escena, es decir una serie de botes,
cada uno de los cuales debe ser menor que el
anterior hasta que ya no bote ms.
10. No importa que el trazo rebase los lmites de
la escena, ya que, de ese modo, la pelota
aparecer y desaparecer de la escena.
11. Tampoco importa el tamao del trazo pero es preferible que no sea tan ancho.
12. Bloquea la capa de gua para que no se pueda editar, sitate en el fotograma 40 y
crea un fotograma clave.
Colocacin de la pelota en los lugares adecuados.

MANUAL DE FLASH
2010
13. Activa la orden Ver/Ajuste/Ajustar objetos.

14. Selecciona el primer fotograma y con la herramienta seleccin arrastra la pelota
hasta que su punto central se encaje con el principio de la lnea.
15. Selecciona el ltimo fotograma y arrastra igualmente la pelota hasta que su centro
coincida con el final de la lnea trazada.
16. Reproduce la pelcula pulsando ctrl+Intro vers como la pelota recorre el camino
descrito simulando una serie de botes.
Simulacin de rotacin de la pelota.
17. Ahora selecciona el primer fotograma de la capa pelota y en el panel propiedades
localiza la opcin y elige horario colcale 6 veces. Esto es para crear una simulacin de
vueltas sobre si misma durante la animacin.
12. MASCARA
MANUAL DE FLASH
2010
1. Inicia Flash
2. Empezaremos por crear un fondo base para
nuestra siguiente animacin, bien, selecciona la
herramienta rectngulo y dibuja un rectngulo de
tal forma que abarque lo largo de el fotograma
checa el ejemplo.
3. A continuacin insertars sobre el grafico tu
nombre pero tendrs que realizarlo de la siguiente
manera.
4. Primero insertars la primera letra y le asignaras el color de tu preferencia. Bien una
vez colocada la letra colcale una lnea gua para que las dems letras estn alineadas.
5. una vez creada la primera letra realiza el mismo
proceso para las posteriores letras de tu nombre.
6. Al terminar tu nombre deber de quedar de la
siguiente manera.
7. Ahora crearemos una capa mscara, para lo
cual hars lo siguiente, crea una mscara normal
y posteriormente haz clic derecho sobre ella y
selecciona la opcin mscara.
8. Cuando se cree la capa mscara aparecern

bloqueadas ambas capas, desbloqualas para que
puedas trabajar con ellas.
9. Tus capas debern quedar de la siguiente
manera:
10. Selecciona nicamente la capa mascara para crear el siguiente efecto.
MANUAL DE FLASH
2010
11. Dibuja un crculo que logre cubrir el alto de las letras, y colcalo fuera del rea del
fotograma como se detalla a continuacin.
12. Bien ahora ya tenemos objetos en ambas capas, lo siguiente ser la creacin de
fotogramas, bien para la capa donde se encuentra tu nombre solo se crear fotograma
intermedio en el fotograma 40, y para la capa mscara crears un fotograma clave en
el fotograma 40 respectivamente.
13. En la capa mscara haremos lo siguiente

una vez creado el fotograma clave tendrs
que situar el circulo al extremo opuesto del
primer Fotograma como se muestra a
continuacin.
14. Como siguiente paso crearas una

interpolacin de movimiento en la capa
mscara para crear un efecto de
mscara.
15. Para lo cual te tendrs que situar en
el fotograma 1 de la capa mscara y clic
derecho y elegir crear interpolacin de
movimiento. Ahora tus capas y la lnea
del tiempo se vern de la siguiente
manera.
16. Ahora si ejecuta la pelcula.
17. A continuacin vamos

agregarle un efecto ms a la
animacin. Localiza la lnea de
MANUAL DE FLASH
2010
tiempo y arrstrala hasta que tu crculo haya pasado la primera letra como se muestra en
la siguiente figura.
18. Sitate en el fotograma 1 de la capa nueva y selecciona el fotograma uno y arrstralo
hasta que el punto que aparece en el fotograma se corra hasta donde se encuentra tu
lnea de tiempo.
13. BOTON SIMPLE

Vamos a comenzar creando el botn que provocar la transformacin del objeto en texto.
1. Selecciona la opcin insertar/Nuevo smbolo. En la ventana que se abrir introduzca
botn en la casilla Nombre y seleccione botn. Eso te llevar a una pantalla dedicada
exclusivamente a la creacin del botn.
MANUAL DE FLASH
2010
2. con la herramienta
dibuja un crculo en el centro de la pantalla. Selecciona el
contorno del crculo y elimnalo. Selecciona el crculo y asgnale color azul mediante la
herramienta relleno
de la paleta lateral de herramientas.
3. Con el circulo seleccionado, activa el panel informacin ubicado en el men

ventana/informacin.
4. La zona superior derecha del panel informacin muestra unos pequeos cuadritos
pequeos. Marca el cuadrito del centro e introduce el valor 0 en cada una de las casillas
X y Y. con esta operacin habr centrado el circulo justo en el eje de coordenadas (0,0).
Igualmente, las casillas Ancho w- y alto H ajusta un valor de 100 para dotar al crculo de
una tamao de 100 pxeles de dimetro.
5. Deselecciona el crculo y selecciona la herramienta texto
. Seguidamente pulsa
color de relleno en la barra lateral de herramientas y selecciona un color que resalte
sobre el azul, por ejemplo el color amarillo.
6. Escribe la palabra PULSA en cualquier lugar de la pantalla. Haga clic
sobre el texto para seleccionarlo y abre el panel de caracteres de texto
pulsando
. Cambia el tamao a 25 y el tipo de letra Arial Black.
7. Con la herramienta de seleccin arrastra el texto hasta depositarlo centrado sobre el

circulo.
Bien ya esta definido el botn cuando esta en reposo.
8. Ahora haz clic sobre el segundo fotograma para seleccionarlo y pulsa F6 para crear
un nuevo fotograma clave. Deselecciona el crculo haciendo clic en un lugar libre de la
pantalla.
9. Este segundo fotograma del botn es el que contendr el aspecto del
botn cuando se pase el cursor del ratn por encima. Aumenta el tamao
del texto en 32, centra el texto en el crculo arrastrndolo con el ratn o
movindolo con las teclas de cursor.
10. Ahora crearemos el tercer fotograma, que mostrar el aspecto del botn
cuando se haga clic sobre l. Para ello, selecciona y pulsa F6 para
convertirlo en un nuevo fotograma clave.
11. Selecciona nicamente el crculo y cambia el color mediante el panel
mezclador, haz clic en el icono de relleno y elige el color, por ejemplo rojo.
12. Vamos a agrandar el crculo con objeto de que al hacer clic sobre el botn. Adems
de que cambie de color se haga ms grande. Para eso selecciona el crculo y en el panel
informacin asgnale un tamao de 120.
13. Ahora cambiaremos el texto pulsa por un O.K.
MANUAL DE FLASH
2010
14. Selecciona el texto y cambia las propiedades como: color, tamao y tipo de letra.
15. Bien con esto se ha concluido el botn. Pulsa en la pestaa Escena para volver a la
escena principal y arrastre a ella desde la biblioteca el botn recin creado.
14. BOTON ANIMADO

En esta ocasin crearemos un botn animado, para lo cual tendremos que elaborar
previamente 3 clips de pelcula para lo cual desarrollaremos a continuacin.
2. Elije un documento de flash.
3. Ahora para iniciar elige men insertar/smbolo y selecciones la opcin clip de pelcula
y le asignas el nombre Reposo, que ser el clip para el primer estado del botn.
MANUAL DE FLASH
2010
4. Ya en la biblioteca inserta un crculo sin borde y de color rojo, ajusta sus

propiedades para que quede con un dimetro de 120 pxeles. Ahora ajusta
en las propiedades X y Y para que quede con los datos 0 para que quede
justo en el centro en su defecto ajstalo manualmente de tal forma que el
centro del circulo quede alineado con la cruz.
5. Bien ahora crea un fotograma clave f6 en el fotograma 10 y cambia de color el
relleno del crculo por uno verde.
6. Seguidamente selecciona el fotograma 1 y te vas a propiedades del fotograma y
seleccionas la opcin animar/forma, debe de quedar tu lnea de tiempo con un
sombreado verde con una fecha indicando la trayectoria.
7. Ahora crea un fotograma clave nuevo en el
fotograma 20, cambia de nuevo de color de relleno por
un rojo.
8. regresa al fotograma 10 y seleccinalo, elige
propiedades y selecciona en la opcin animar forma.
9. tu lnea de tiempo debi haber quedado de la siguiente manera.
10. para comprobar el clip, regresa a la escena 1 e inserta el clip en el fotograma, ahora
ejecuta la pelcula, el clip lo que hace es cambiar de color.
11. Bien hemos acabado con lo que ser nuestro primer estado del botn.
12. Ahora iniciaremos con el siguiente clip para el segundo estado del botn, aqu
crearemos una especie de ondas alrededor del circulo.
13. Para ello volvemos a seleccionar men/insertar/smbolo y eliges la
opcin clip de pelcula, asgnale el nombre sobre.
14. Bien inserta un crculo sin contorno y con relleno en color verde,
ajusta las propiedades para que el crculo quede de 120 pxeles de
dimetro y que quede alineado justo con la cruz.
16. crea una capa nueva con el nombre ondas.
15. Vas a crear un crculo en la capa nueva pero en esta ocasin sin relleno y con
contorno en color negro.
16. El crculo nuevo ajusta sus propiedades para que quede de un
dimetro de 130 pxeles de dimetro, y que quede alineado con la
cruz. Se vera de la siguiente forma.
17. Ahora procederemos a la animacin de este elemento. De la capa
ondas crea un fotograma clave en el fotograma 20, estando en el
fotograma 20 cambia las propiedades del crculo que solo tiene
contorno para ajustarlo a un tamao de 160 pxeles de dimetro.
MANUAL DE FLASH
2010
18. Bien selecciona el fotograma 1 de la capa ondas, y en propiedades ajusta en la

opcin animar a forma, tu lnea de tiempo debi haber quedado sombreado en color
verde y con la flecha indicando la trayectoria.
19. Con la capa del crculo con relleno solo nos resta crearle un fotograma intermedio en
el fotograma 20.
20. configura la animacin del clip a 25 fotogramas por
segundo.
21. Aqu hemos terminado con el segundo clip que nos
servir para el segundo estado del botn.
22. Ahora regresa a la escena 1 y inserta el clip de sobre
en el fotograma y prueba la pelcula. El clip debe funcionar como una onda.
23. El siguiente clip es para el tercer estado del botn, para ello vuelve a seleccionar
men/insertar/smbolo y elige clip de pelcula, asgnale en nombre presionado.
24. inserta un circulo sin borde y con relleno en color gris con degradado.
Ajusta sus propiedades para que tenga un dimetro de 120 pxeles de
dimetro y se alinea con la cruz.
25. Bien crea un fotograma clave en el fotograma 20.
26. Seleccionado el fotograma 20 elimina el crculo del fotograma e
inserta en su lugar una estrella de 5 lados con contorno en color negro y
relleno en color rojo con degradado, ajusta sus propiedades para que
tenga un dimetro de 130 pxeles y alineado con la cruz.
27. Ahora selecciona el fotograma 1 y ajusta las propiedades en animar y
selecciona forma, tu lnea de tiempo quedara sombreado en color verde
con una flecha indicando la trayectoria.
28. Bien ya finalizado este clip solo resta probarlo, para ello regresa a la escena 1 y
arrastra tu clip al fotograma y prubalo, la animacin que se creo es una interpolacin de
forma que hace que cambie de crculo a una estrella.
29. Despus de haber creado los tres clipes de
pelcula ahora crearemos el botn.
30. Actualmente tu biblioteca debe contener los
siguientes clipes.
MANUAL DE FLASH
2010
31. Bien ahora crearemos el botn para ello selecciona men/insertar/smbolo y elige
botn asgnale el nombre botn animado.
32. Ahora ubica la biblioteca pues de ah tomaremos los elementos para generar el botn
animado.
33. En el botn de reposo realizaras lo siguiente: arrastra de la biblioteca el clip reposo y
ajstalo para que quede alineado con la cruz.
34. Ahora crea un fotograma clave para el estado sobre y arrastra en l el clip sobre
solo checa que quede alineado con la cruz.
35. Seguidamente crea un fotograma clave para el estado
Presionado, y arrastra en l el clip presionado ubicado de
igual forma en la biblioteca.
36. Ya tenemos el botn creado ahora regresa a la escena 1
37. Y corrobora que en tu biblioteca se encuentren los
siguientes elementos.
40. Bien ya que estamos en la escena principal, borra cualquier elemento que halla en l
e inserta el elemento botn que se encuentra ubicado en la biblioteca.
41. Ya hemos creado el botn, animado, como habrs apreciado tuvimos que crear tres
clip de pelcula para llegar a este elemento, esto quiere decir que podemos realizar
mltiples combinaciones para crear diferentes elementos en flash la nica limitante es tu
imaginacin.
42.
Prueba la pelcula y corrobora que realmente el botn esta animado.

15. CLIP DE PELICULA
Creacin del primer Clip de Pelcula

1 Crea una nueva escena
2 Pulsa Ctrl+ F8 para crear un nuevo
smbolo de clip de pelcula. Asgnale el
nombre coche1
MANUAL DE FLASH
2010
3 En la pantalla de edicin del clip, dibuja el elemento a animar. En

este caso dibuja este gracioso cochecito de ambulancia.
4 Sita el objeto en el lado izquierdo de la pantalla.

5 Crea una interpolacin de movimiento.
6 Selecciona el fotograma 40 y pulsa F6 para completar la interpolacin.
7 Con el fotograma 40 seleccionado, use el cursor derecho junto con la tecla Mays para
llevar el objeto hasta el lado derecho de la pantalla para que el objeto quede ms o
menos simtricamente ubicado con respecto al fotograma numero 1
8 Selecciona el fotograma 1 e inserta una accin stop() para evitar que el clip se
reproduzca automticamente.
9 Regresa a la escena principal pulsando en la pestaa Escena 1.
Creacin del segundo clip de pelcula

10 Pulsa Ctrl+ F8 para crear otro smbolo de clip de pelcula. Asgnale el nombre coche
2
11 En la pantalla de edicin del clip, dibuja el elemento a animar. Ahora
importa el mismo dibujo pero reflejado hacia la izquierda para que el
cochecito mire hacia el otro lado y cambiado de color.
12 Sita el objeto en el lado derecho de la pantalla.

13 Crea una interpolacin de movimiento.
14 Seleccione el fotograma 40 y pulse F6 para completar la interpolacin.
15 Con el fotograma 40 seleccionado, usa el cursor izquierdo junto con la tecla Mays
para llevar el objeto hasta el borde izquierdo de la escena.
16 Selecciona el fotograma 1 e inserta una accin stop() para evitar que el clip se
reproduzca automticamente.
MANUAL DE FLASH
2010
17 Regresa a la escena principal pulsando en la pestaa Escena 1.
Ubicacin de las instancias en la escena y nombrado de las mismas

18 desde la escena principal, abra la biblioteca y arrastre el clip coche1 hasta
depositarlo en el extremo superior izquierdo de la escena. Seguidamente, arrastre el clip
coche 2 y llvalo al borde superior derecho de la escena.
19 Selecciona a la vez las dos instancias de los dos clips y alinelas horizontalmente. Si
es necesario, utiliza la orden Escalar-Scale para aumentar o reducir el tamao delas
instancias con objeto de adecuarlas al tamao de la escena, es decir, que los coches no
sean ni demasiado grandes ni demasiado pequeos.
20 Selecciona la instancia de la izquierda y pulsa en propiedades para abrir el panel

instancia. Asgnale el nombre coche1. Haz lo mismo con la instancia de la derecha y
asgnale el nombre coche2.
21 Abre la biblioteca de elementos comunes con la orden Ventana/Bibliotecas

comunes/Botones.
22 Abre la carpeta Playback Flat y arrastra a la escena los botones siguientes flat blue
back, flat blue forward, flat blue play y flat blue stop.
23 Alinee y distribuya los botones en la parte central de la escena.
MANUAL DE FLASH
2010
Asignacin de las acciones al botn Play

Ahora se trata de asignar a cada botn las acciones necesarias para que cumplan su
cometido. Para asignar las acciones al botn de reproduccin play haga lo siguiente:
24 Haz clic sobre l con el botn y selecciona Acciones para abrir el panel.
25 Haz doble clic sobre la accin Tell Target
26 En el campo destino escriba el nombre de instancia del clip a activar, es decir,
coche1.
27 Haz doble clic sobre la accin Play, con eso le indicar
el tipo de accin a aplicar al clip elegido, es decir,
arrancarlo.
28 Sita el cursor en la ltima lnea de expresiones, es
decir, la que muestra el caracter } y haga doble clic de
nuevo sobre la accin Tell Target para agregar otra accin
de este tipo que deber ser ejecutada con el mismo botn.
29. En el campo destino escriba el nombre de instancia del
clip a activar ahora, es decir, coche 2.
30. Haz doble clic sobre la accin Play; con eso le indicar el tipo de accin a aplicar al
segundo clip elegido, es decir, arrancarlo.
31 Pulsa Ctrl + Intro y comprueba que al hacer clic sobre el botn play se inicia la
reproduccin de los dos clips.
Asignacin de las acciones al resto de botones

El procedimiento para asignar las acciones las acciones al resto de botones es
exactamente el mismo que se ha descrito. Lo nico que cambia es el tipo de accin que
aparece a continuacin de las expresiones Tell Target. Recuerda que antes hemos
colocado Play porque es lo que queramos que sucediera con los dos clips al pulsar en el
botn play. As pues, programa cada botn segn estas caractersticas:
Botn Stop: Debe detener la reproduccin, as que la accin ser Stop para los dos clips.
Botn Regresar: Debe hacer retroceder la reproduccin fotograma a fotograma, as que
la accin ser Go to y con parmetro tipo = Fotograma anterior.
Botn Adelantar: Debe hacer avanzar la reproduccin fotograma a fotograma, as que la
accin ser Go to y con el parmetro tipo= fotograma siguiente.
MANUAL DE FLASH
2010
En la siguiente figura puedes ver el programa para cada uno de los botones
mencionados.
32 Reproduce la pelcula y observa cmo puedes controlar tanto el arranque como la

parada de los clips y puedes reproducirlos paso a paso en ambos sentidos. Si lo deseas,
puedes agregar otros botones para, por ejemplo, llevar los clips directamente al principio
o al final de la pelcula.

Manual Flash 2010

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Manual Flash 2010

Transféré par

Droits d'auteur :

Formats disponibles

2010

ELABORO: L.I. GERARDO DEL JESUS SEGOVIA PACHECO

1. Abre el software flash 8

De esta misma forma podremos obtener la barra de Edicin y la barra de Control.

Dibujar los aros olmpicos.

perfectamente circulares, mantenemos pulsada la

y posteriormente creado los valos que

hubieran aparecido sin color de fondo)

5 Seleccionamos la opcin Degradado Radial.

y seleccionamos los colores que deseemos, (podemos aadir tantos

colores como queramos y probar su efecto).

7 Dibujamos el anillo de Saturno, por ejemplo creando otro valo con

sin bordes lo ms semejante al

4. Selecciona los objetos y en el men modificar elije combinar objetos/

6. Ahora con ayuda del bote de tinta

5. Ahora nuestra guacamaya debe de tener el siguiente aspecto.

6. Seguimos con la creacin de ojos de nuestra guacamaya, para ello

7. Como habrs notado nuestro dibujo est tomando forma.

8. Bien toma el elemento del pico y crea un duplicado, hazlo ms pequeo a

10. agrgale el duplicado de la figura que reducimos

Bien ahora sitate en el fotograma 2.

1. Abre la herramienta flash

6. Crea de nuevo una capa nueva esta vez asgnale

8. Crea una capa mas y colcale el nombre barco,

10. Ahora bien una vez terminado el

11. Una vez creado el fotograma clave en las

CREACIN DE LA SEGUNDA INTERPOLACIN.

CREACIN DEL CHOQUE DE LAS BOLAS

para crear una nueva capa y denomnala bola derecha.

Colocacin de la pelota en los lugares adecuados.

13. Activa la orden Ver/Ajuste/Ajustar objetos.

8. Cuando se cree la capa mscara aparecern

10. Selecciona nicamente la capa mascara para crear el siguiente efecto.

13. En la capa mscara haremos lo siguiente

14. Como siguiente paso crearas una

16. Ahora si ejecuta la pelcula.

17. A continuacin vamos

13. BOTON SIMPLE

de la paleta lateral de herramientas.

3. Con el circulo seleccionado, activa el panel informacin ubicado en el men

. Cambia el tamao a 25 y el tipo de letra Arial Black.

7. Con la herramienta de seleccin arrastra el texto hasta depositarlo centrado sobre el

14. BOTON ANIMADO

4. Ya en la biblioteca inserta un crculo sin borde y de color rojo, ajusta sus

18. Bien selecciona el fotograma 1 de la capa ondas, y en propiedades ajusta en la

Prueba la pelcula y corrobora que realmente el botn esta animado.

Creacin del primer Clip de Pelcula

3 En la pantalla de edicin del clip, dibuja el elemento a animar. En

4 Sita el objeto en el lado izquierdo de la pantalla.

Creacin del segundo clip de pelcula

12 Sita el objeto en el lado derecho de la pantalla.

17 Regresa a la escena principal pulsando en la pestaa Escena 1.

Ubicacin de las instancias en la escena y nombrado de las mismas

20 Selecciona la instancia de la izquierda y pulsa en propiedades para abrir el panel

21 Abre la biblioteca de elementos comunes con la orden Ventana/Bibliotecas

Asignacin de las acciones al botn Play

Asignacin de las acciones al resto de botones

32 Reproduce la pelcula y observa cmo puedes controlar tanto el arranque como la

Vous aimerez peut-être aussi