práctica de flash cs4

1. INTRODUCCIÓN
Se trata de crear una escena con un botón que, al pulsarlo, desencadenará una secuencia de
animación en la que un objeto se convertirá en un texto y se subrayará automáticamente. Mediante
la pulsación de la combinación de teclas Ctrl + Z podrá ir deshaciendo acciones que desee eliminar
porque se haya equivocado.
CREACIÓN DE UN NUEVO DOCUMENTO
Vamos a crear un nuevo documento preparado para poder introducir acciones en la versión 2.0
de ActionScript (recuerde que en la introducción del libro se dijo que el nuevo lenguaje ActionScript
3.0 no está cubierto en este manual por estar más indicado para desarrolladores).
1 Seleccione la opción Archivo/Nuevo, elija la opción Archivo de Flash (ActionScript 2.0) de la ventana
que se abrirá y pulse en Aceptar. Se creará un documento en blanco de Flash.
01Ejercicio
Botónqueactivaunmorphing
Flash CS4 Curso Práctico

2.  RA-MA
Ejercicio 01: BOTÓN QUE ACTIVA UN MORPHING 2 2
CREACIÓN DEL BOTÓN
Vamos a comenzar creando el botón que provocará la transformación del objeto en un texto:
1 Seleccione la opción Insertar/Nuevo símbolo. En la ventana que se abrirá introduzca botón en
la casilla Nombre, marque la opción Botón y pulse en Aceptar. Eso le llevará a una pantalla dedicada
exclusivamente a la creación del botón. Observe la biblioteca y verá cómo, aunque no ha hecho nada
todavía, ya aparece el símbolo de botón en ella.
2 Con la herramienta Óvalo y ayudándose de la tecla Mayús arrastre el ratón para dibujar un
círculo en el centro de la pantalla. Si el círculo aparece con contorno, selecciónelo y elimínelo. Se-
leccione el círculo haciendo clic en él y asígnele un color azul intermedio mediante la herramienta
Color de relleno de la barra lateral de herramientas o el panel Propiedades.
3 Con el círculo seleccionado, elija la opción Ventana/Información para visualizar el panel Infor-
mación. La zona central muestra el controlador del punto de registro ; haga clic sobre él para
que las coordenadas del símbolo coincidan con el centro del mismo ( ). Seguidamente, introduzca
el valor 0 en cada una de las casillas X e Y; con esta operación habrá centrado el círculo justo en
el eje de coordenadas (0,0). Finalmente, en las casillas W y H ajuste un valor de 100 para dotar
al círculo de un tamaño de 100 píxeles de diámetro.
4 Deseleccione el círculo haciendo clic en un lugar libre de la pantalla y seleccione la herramienta
Texto . Seguidamente, pulse en la barra lateral de herramientas y seleccione un color que
resalte sobre el azul, por ejemplo, el color amarillo.
5 Escriba la palabra Pulsa en cualquier lugar de la pantalla. Haga doble clic sobre el texto para
seleccionarlo y abra el panel Propiedades si no estaba abierto. En la sección aparece el
parámetro Tamaño mediante el cual se puede ajustar el tamaño de la fuente del texto. Introduzca
el valor 25 para asignar al texto una altura de 25 píxeles y en el campo Familia elija el tipo de letra
Arial Black.

3.  RA-MA
Ejercicio 01: BOTÓN QUE ACTIVA UN MORPHING 3 3
6 Con la herramienta Selección arrastre el texto hasta depositarlo centrado sobre el círculo.
7 Bien, ya hemos definido el aspecto
del botón cuando esté en reposo. En la
línea de tiempo haga clic en el segundo
fotograma para seleccionarlo y pulse F6
para crear un nuevo fotograma clave.
Deseleccione el círculo haciendo clic en
un lugar libre de la pantalla.
8 El segundo fotograma del botón es
el que contendrá el aspecto del botón
cuando se pase el cursor del ratón por
encima. Vamos a hacer que en ese caso
el texto Pulsa se agrande para llamar
la atención del usuario. Para ello, se-
leccione solamente el texto con la he-
rramienta , y en el panel Propieda-
des que acabamos de usar asígnele un
tamaño de 32 píxeles. Centre el texto
en el círculo arrastrándolo con el ratón
o moviéndolo con las teclas de cursor.
9 Vamos a crear el tercer fotograma, que mostrará el aspecto del botón
cuando se haga clic sobre él. Para ello, selecciónelo y pulse F6 para
convertirlo en un nuevo fotograma clave.
10 Con la herramienta seleccione únicamente el círculo y cámbiele
el color mediante el panel Color al que puede acceder con la opción
Ventana/Color. Debe hacer clic en el icono de ese panel y elegir
el color, por ejemplo, rojo.
11 Ahora vamos a agrandar el círculo
con objeto de que al hacer clic sobre
el botón, además de que cambie de color
se haga más grande. Para ello, selec-
cione el círculo y en el panel Informa-
ción que ha utilizado antes, asigne un
tamaño de 120 píxeles para cada una
de las dos casillas W y H.
12 Para rizar el rizo haremos que, además
del cambio de color y tamaño del cír-
culo, el texto Pulsa se convierta en el
texto O.K. Para ello, seleccione sólo el
texto con la herramienta de texto
y haciendo doble clic sobre él, bórrelo
y escriba en su lugar el texto O.K.
13 Seleccione ahora el texto que aca-
ba de escribir, y con el panel Propieda-
des cambie su color, tamaño y tipo de
letra para que quede más o menos como
se muestra en la figura.

4.  RA-MA
Ejercicio 01: BOTÓN QUE ACTIVA UN MORPHING 4 4
14 Bien, con esto se ha concluido el botón.
Pulse en el texto Escena 1 de la barra de
edición para volver a la escena principal (tam-
bién puede pulsar en en la misma ba-
rra) y arrastre a ella desde la biblioteca el
botón recién creado. Pulse Ctrl + Intro para
testear la película y verá cómo, al pasar el
ratón por encima del botón, el texto Pulsa
se agranda para llamar la atención. Igual-
mente, si hace clic sobre el botón verá cómo
éste se agranda y muestra el texto O.K.
para indicar que hemos pulsado en él.
¿He dicho que hemos acabado el botón?
Pues no, ahora vamos a añadirle un sonido
para que se reproduzca en el momento en
que hagamos clic sobre él.
15 Seleccione la opción Archivo/Importar/Importar a biblioteca y en la ventana que se abrirá, lo-
calice la carpeta de este ejercicio, seleccione Todos los formatos en la casilla Tipo e importe el
archivo de sonido Aviso.wav. Este sonido se incorporará directamente a la biblioteca del documento.
16 Ahora haga doble clic sobre el botón desde la escena
principal o directamente en su nombre en la biblioteca.
Se abrirá de nuevo la ventana de edición del botón.
17 Seleccione el fotograma Presionado correspondiente
al aspecto del botón cuando se pulsa y desde la biblio-
teca arrastre el sonido hasta depositarlo sobre el botón.
En ese momento, una reproducción en miniatura de la
forma de onda del sonido aparecerá en el fotograma co-
rrespondiente.
18 Vuelva a la escena principal, active el test de la pe-
lícula pulsando Ctrl + Intro y vea cómo ahora, al hacer
clic sobre el botón, además de todo lo de antes suena el
sonido insertado.
CREACIÓN DEL OBJETO
Ahora vamos a crear el objeto que deberá trans-
formarse en un texto. Concretamente, convertiremos
un rectángulo en el texto Flash CS4. Vamos a rea-
lizar la transformación directamente en la ventana
de la escena, y para estructurarla correctamente co-
locaremos cada elemento en una capa diferente.
19 Así pues, vamos a renombrar la capa actual que
es la que contiene el botón. Haga doble clic sobre el
nombre de la capa y asígnele el nombre botón.
20 Seguidamente, en la parte inferior de la lista de
capas pulse en para crear una nueva capa y cam-
bie su nombre por defecto por el de morphing, ya
que lo que vamos a crear es una transformación de una cosa en otra llamada popularmente de ese
modo. Haga clic en esa última capa creada para seleccionarla y poder trabajar en ella.
SONIDO
INCRUSTADO

5.  RA-MA
Ejercicio 01: BOTÓN QUE ACTIVA UN MORPHING 5 5
21 Ahora vamos a dibujar un rectángulo de color rojo sin borde. Para ello seleccione la herramienta
Rectángulo y antes de hacer nada elija los colores correspondientes en los iconos para contorno
(deberá seleccionar ) y relleno de la barra lateral de herramientas o del panel Pro-
piedades.
22 Arrastre en la mitad superior de la escena para dibujar un rec-
tángulo.
23 Seleccione el rectángulo con la herramienta y mediante el
panel Propiedades en la sección asigne al rec-
tángulo unas dimensiones de 200 píxeles de ancho por 60 píxeles
de alto, actuando para ello en las casillas W y H respectivamente.
Sitúe el rectángulo centrado sobre el botón tal como se ve en la
figura.
Bien, con eso hemos creado el objeto inicial. Ahora hay que definir
el objeto final y en qué fotograma de la película debe aparecer.
24 Seleccione el fotograma nº 30 de la capa morphing y pulse F6
para crear un nuevo fotograma clave.
25 Observe cómo el botón ha desaparecido. Eso sucede porque no le hemos dicho a la línea de
tiempo de la capa del botón que llegue también hasta el fotograma 30. Así pues, seleccione el fotograma
30 en la línea de tiempo de la capa del botón y pulse F5 para crear un fotograma. El botón aparecerá.
En este caso no hemos pulsado F6 para crear un fotograma clave porque no deseamos que en el
fotograma 30 el botón haga nada diferente, es decir, deseamos que el cometido del botón y las
acciones que luego le programaremos se mantengan desde el principio hasta el final.
CREACIÓN DEL TEXTO
Ahora vamos a crear el texto en el que tendrá
que convertirse el rectángulo durante la transfor-
mación.
26 Haga clic sobre el fotograma 30 de la capa
morphing para seleccionarlo.
27 Deseleccione todo haciendo clic en un lugar li-
bre de la escena y seleccione el rectángulo con la
herramienta de selección. Pulse en la tecla Supr
para eliminarlo.
28 Seleccione la herramienta de texto , haga clic
en la mitad superior de la escena y escriba el texto Flash CS4.

6.  RA-MA
Ejercicio 01: BOTÓN QUE ACTIVA UN MORPHING 6 6
29 Arrastre el ratón sobre todo el texto para seleccionarlo al completo y en panel Propiedades cambie
los atributos del texto seleccionado asignando un tamaño de 60, tipo de letra Arial Black, estilo
negrilla y color rosa.
30 Seleccione el texto con la herramienta y arrástrelo para dejarlo más o menos centrado en la
parte superior de la escena.
CREACIÓN DE LA INTERPOLACIÓN DE FORMA
Bien, ya hemos definido los objetos inicial y final de la transformación de forma. Ahora hay que
crearla.
31 Antes de nada, hay que quitarle al texto su condición elemento agrupado y convertirlo en gráfico,
ya que, en caso contrario, no se realizará la transformación. Para ello, selecciónelo y elija dos veces
la opción Modificar/Separar, ya que, como sabe, con una sola separación el texto separa únicamente
las letras del texto pero éstas permanecen agrupadas individualmente.
32 Ahora seleccione el pri-
mer fotograma de la capa
morphing (fíjese en que
vuelve a aparecer el rectán-
gulo). Seguidamente, selec-
cione la opción Insertar/
Interpolación de forma. La línea
de tiempo mostrará la crea-
ción de la animación mediante
la aparición de una flecha en
el sentido de desarrollo de la
película.
33 Vamos a comprobar si se produce la transformación. Para ello, sitúe el cursor sobre el cabezal
que aparece sobre el primer fotograma de la línea de tiempo y arrastre hacia la derecha. Si todo
está correctamente realizado, verá cómo el rectángulo se va transformando en el texto según vaya
arrastrando. Ahora pulse Ctrl + Intro para testear la película de forma automática y observe cómo
la transformación se realiza de forma automática e ininterrumpidamente, lo cual no es lo que que-
remos, ya que la transformación debe activarse sólo cuando se pulse el botón.
ASIGNACIÓN DE ACCIONES
Así pues, vamos a introducir los elementos necesarios para que la película sólo se reproduzca al
hacer clic en el botón y que, además, al llegar al final se detenga.
34 Vamos a comenzar por el final, es decir, hacer que la transformación se detenga en cuanto apa-
rezca el texto Flash CS4 perfectamente formado. Para ello, haga clic en el último fotograma de la
capa morphing y abra el panel Acciones pulsando F9. Si no está activado, haga clic en el botón
para activar el asistente para la introducción de acciones. Haga clic primero en
el grupo Funciones globales y dentro de éste seleccione el subgrupo Control de la línea de tiempo.
Localice la acción Stop y haga doble clic sobre ella para seleccionarla. El recuadro de la derecha
del panel mostrará la acción seleccionada para ese fotograma y, al mismo tiempo, podrá ver cómo
en el fotograma seleccionado aparece una pequeña «a» indicativa de que ese fotograma posee
acciones definidas. Pulse de nuevo Ctrl + Intro para testear la película y compruebe cómo ahora
la transformación sólo se ejecuta una vez.

7.  RA-MA
Ejercicio 01: BOTÓN QUE ACTIVA UN MORPHING 7 7
35 Ahora vamos a programar la activación de la transformación cuando se pulse el ratón. Para ello,
seleccione el botón y continúe trabajando en el panel Acciones. Ahora haga clic primero en el grupo
Funciones globales y dentro de éste seleccione el subgrupo Control de clip de película. Busque la
acción On y haga doble clic sobre ella para asignársela al botón.
36 En la parte derecha de la ventana aparecerán los diferentes eventos que se relacionan con un
ratón. Active la casilla Presionar, que significa que la acción se realizará al pulsar el botón del ratón
y desactive la casilla Liberar.

8.  RA-MA
Ejercicio 01: BOTÓN QUE ACTIVA UN MORPHING 8 8
37 Ya hemos programado cuándo debe producirse la acción pero... ¿cuál debe ser la acción? Pues
evidentemente, será que comience la reproducción de la película de la transformación desde el fotograma
número 2, ya que el número 1 ya se está visualizando. Así pues, haga clic en el grupo Funciones
globales, abra el subgrupo Control de la línea de tiempo y haga doble clic en la acción goto. En la
casilla Fotograma de parte derecha del panel introduzca el valor 2, indicándose así que deseamos
que al hacer clic en el botón se desencadene la reproducción de la transformación desde el fotograma
número 2. Pulse Ctrl + Intro y compruebe que todo funciona correctamente.
MEJORA DE LA INTERPOLACIÓN
Tal como tenemos ahora la práctica, una vez realizada la transformación (que de momento arranca
automáticamente), permanece en la pantalla el texto Flash CS4. Si volvemos a pulsar en el botón,
la transformación comienza de nuevo pero casi no da tiempo de ver el objeto inicial tal cual es. Así
pues, vamos a provocar que mientras se mantenga el cursor sobre el botón permanezca el texto
Flash CS4 en la pantalla pero, al mover el ratón fuera del botón y volverlo a situar encima, se
visualice de nuevo el rectángulo. Para ello, lo que hay que hacer es detectar que el cursor ha salido
y vuelto a la superficie del botón y provocar que en ese momento el cursor de la línea de tiempo
vuelva al fotograma número 1.
38 Así pues, seleccione de nuevo el botón y abra el panel Acciones para añadir las acciones que nos
permitirán conseguir lo propuesto. En el panel, sitúe el cursor sobre el símbolo } para que las nuevas
acciones se escriban a continuación de la anterior.
39 Haga clic en el grupo Funciones globales y luego haga clic en el subgrupo Control de clip de
película. Seguidamente haga doble clic en la acción On, desactive la casilla Liberar, y active la casilla
Situar sobre objeto. De este modo, le diremos al programa que queremos que la acción se ejecute
cuando pasemos el cursor por encima del botón.
40 Seguidamente, programaremos dicha acción. Para ello, en el subgrupo
Control de la línea de tiempo haga doble clic sobre la acción goto
y en la casilla Fotograma asígnele el valor 1. Seguidamente, active
la casilla Ir a y detener, ya que lo que queremos es que el cursor
vaya al fotograma 1 y se quede ahí. Si observa el recuadro derecho
de la ventana de acciones, podrá ver el código de todas las accio-
nes que se han incorporado al botón.
41 Finalmente, seleccione el fotograma 1 de la capa Botón e inser-
te ahí una acción Stop tal como hizo en el paso 34.
CREACIÓN DEL SUBRAYADO
Bien, para acabar el ejercicio, vamos a hacer que el texto Flash CS4 se subraye automáticamente
una vez haya aparecido. Para ello, crearemos un clip de película que posteriormente insertaremos
en el lugar adecuado en la escena principal.
42 Para crear el clip elija la opción Insertar/Nuevo símbolo y en la pantalla que aparecerá escriba
el nombre subrayado, seleccione Clip de película en la casilla Tipo y pulse en Aceptar. Con esta
operación entrará en una pantalla específica para la creación del nuevo clip.

9.  RA-MA
Ejercicio 01: BOTÓN QUE ACTIVA UN MORPHING 9 9
43 Con objeto de tener una referencia correcta del ta-
maño del subrayado con relación al texto a subrayar,
trabajaremos de otro modo. En la barra de edición haga
clic sobre la pestaña Escena 1 para volver a la escena
principal, ya que al haber creado el clip de película habremos
entrado en una pantalla independiente para su creación. Seguidamente, arrastre el cabezal de la
línea de tiempo hasta el fotograma 30 para que se visualice el texto Flash CS4 que deberá subrayarse.
44 Ahora, desde el panel Biblioteca arrastre a la escena el nuevo clip creado (de momento no con-
tiene nada). Lo reconocerá porque aparece en la biblioteca precedido del icono . El clip de película
se mostrará en la escena únicamente con un circulito con un cruz en su interior .
45 Seguidamente, haga doble clic sobre el simbolito del clip de película y entraremos de nuevo en
la pantalla para editarlo pero, esta vez, podremos ver el resto de elementos de la escena.
46 Active la herramienta para dibujar rectángulos.
47 En la barra lateral de herramientas, pulse en para abrir la lista de colores de contorno y
pulse en para eliminar el color de contorno. Seguidamente, pulse en para seleccionar un
color de relleno cualquiera, por ejemplo, el verde oscuro.
48 Ahora dibuje un pequeño rectángulo por debajo y a la izquierda de lo que será el texto a subrayar.
Selecciónelo enmarcándolo con y en el panel Propiedades, asígnele un tamaño de 6 píxeles de
anchura por 20 de altura.
49 Seleccione el rectángulo por separado y elija la opción Modificar/Agrupar para agruparlo, ya que
no es posible crear clips con objetos no agrupados.
50 Haga clic con el botón derecho sobre el fotograma 1 y seleccione la opción Crear
interpolación clásica. Seleccione el fotograma 20 y pulse F6 para crear un nuevo
fotograma clave; la línea de tiempo mostrará la creación de la animación mediante
la aparición de una flecha roja.
51 Con el fotograma 20 seleccionado, haga clic con el botón derecho sobre el rec-
tángulo verde y en el menú que aparecerá elija la opción Transformación libre. El
rectángulo mostrará unos tiradores a su alrededor.
52 Mueva el cursor del ratón por encima del tirador central derecho hasta que apa-
rezca una doble flecha horizontal. Utilice la herramienta Zoom si le hace falta.
53 Mientras mantiene pulsada la tecla Alt, estire del tirador central derecho hacia la derecha hasta
que el texto quede totalmente subrayado. La pulsación de esta tecla provocará que el rectángulo
se estire únicamente por la derecha y no simétricamente por los dos lados.

10.  RA-MA
Ejercicio 01: BOTÓN QUE ACTIVA UN MORPHING 10 10
54 Para finalizar, insertaremos una acción de stop al final del clip para evitar que se reproduzca
continuamente. Para ello, seleccione el último fotograma del clip y, en el panel Acciones seleccione
una acción Stop tal como ha visto antes y ya debe conocer.
55 Arrastre el cursor de la línea de tiempo y verá cómo el rectángulo crece hacia la derecha hasta
convertirse en una línea.
MONTAJE EN LA ESCENA PRINCIPAL
Ahora sólo falta incorporar el clip a la escena principal y ubicarlo en una capa independiente.
56 Pulse en el texto Escena 1 de la barra de edición para visualizar la escena principal y verá cómo
el inicio del clip creado aparece en el lugar en donde lo hemos ubicado. Selecciónelo y pulse la tecla
Supr para eliminarlo. No se preocupe. El clip continúa estando disponible en la biblioteca.
57 Pulse en para crear una nueva capa y asígnele el nombre subrayado. Arrastre la capa hacia
arriba para que quede en la parte superior de la lista de capas.
58 Ahora piense. Si ubicamos el clip en el primer fotograma, éste se reproducirá desde el principio
de la película, con lo cual, el subrayado se producirá antes de la transformación del rectángulo en
texto. De todos modos, en principio, seleccione la capa que acaba de crear y arrastre el clip de
película desde la biblioteca (recuerde que es el que tiene el icono a la izquierda del nombre
subrayado). Sitúe el pequeño cuadradito en el lugar adecuado, es decir, por debajo y a la izquierda
del texto Flash CS4. Tenga en cuenta que para poder ver el texto deberá seleccionar el fotograma
número 30.
59 Ahora, haga clic sobre el pri-
mer fotograma de la capa su-
brayado y, seguidamente, des-
pués de haber soltado el bo-
tón del ratón, arrastre el
fotograma hacia la derecha has-
ta llevarlo al fotograma número
30. De este modo, el clip del
subrayado no se iniciará has-
ta que el cursor de tiempo lle-
gue a ese fotograma.
60 Ahora pruebe la película pulsando Ctrl + Intro y compruebe que todo se desarrolla según lo
previsto. Si el subrayado no queda centrado con respecto al texto, seleccione el clip y muévalo con
los cursores hasta que el resultado sea el deseado. El clip de película se reproduce independiente-
mente de la línea de tiempo principal, ya que posee su propia línea de tiempo.