Adobe Animate

Ejercicio 04
Botón que activa un morphing

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 (  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. ¡Ojo!
no elija ActionScript 3.0 porque luego no podrá seguir el ejercicio a la hora de aplicar acciones.
 2

Ejercicio 04: BOTÓN QUE ACTIVA UN MORPHING

CREACIÓN DEL BOTÓN

Vamos a comenzar creando el botón que provocará la transformación del objeto en un texto:

2. Seleccione la opción Insertar→Nuevo símbolo. En la ventana que se abrirá introduzca boton

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.

3. 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. Seleccione 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.

4. Con el círculo seleccionado, elija la opción Ventana→Información para visualizar el panel Informació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 (la crucetita superior-izquierda del
icono se convertirá en un cuadradito). 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 AN y AL ajuste un valor de 100 para dotar al círculo de un tamaño
de 100 píxeles de diámetro.

5. 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.

6. Escriba la palabra Pulsa en cualquier lugar de la pantalla. Haga doble clic sobre el texto para
seleccionarlo y, si no estaba abierto, abra el panel Propiedades. 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

Ejercicio 04: BOTÓN QUE ACTIVA UN MORPHING

7. Con la herramienta Selección arrastre el texto hasta depositarlo centrado sobre el círculo.

8. 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.

9. 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, seleccione solamente
el texto con la herramienta , y en el
panel Propiedades 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.

10. 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.

11. C on 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.

12. A hora 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, seleccione el círculo
y en el panel Información que ha utilizado
antes, asigne un tamaño de 120 píxeles
para cada una de las dos casillas AN y AL.

13. Para rizar el rizo haremos que, además del

cambio de color y tamaño del círculo, 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.

14. S eleccione ahora el texto que acaba de

escribir, y con el panel Propiedades cambie
su color, tamaño y tipo de letra para que
quede más o menos como se muestra en
la figura.
 4

Ejercicio 04: BOTÓN QUE ACTIVA UN MORPHING

15. B ien, 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
(también puede pulsar en en la misma
barra) 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. Igualmente, 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.

16. E lija la opción Archivo→Importar→Importar a biblioteca y en la ventana que se abrirá, localice

la carpeta de este ejercicio, seleccione Todos los formatos e importe el archivo de sonido Aviso.
wav. Este sonido se incorporará directamente a la biblioteca del documento.

17. A hora 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.

18. S e l e c c i o n e e l f o t o g r a m a P r e s i o n a d o
correspondiente al aspecto del botón cuando
se pulsa y desde la biblioteca 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 correspondiente.

19. Vuelva a la escena principal, active el test de la pelí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á transformarse en un texto. Concretamente, convertiremos
un rectángulo en el texto ISTPH 2018. Vamos a realizar la transformación directamente en la ventana
de la escena, y para estructurarla correctamente colocaremos cada elemento en una capa diferente.

20. A sí 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 boton.

21. S eguidamente, en la parte inferior de la lista de capas

pulse en para crear una nueva capa y cambie 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.
 5

Ejercicio 04: BOTÓN QUE ACTIVA UN MORPHING

22. A hora 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 Propiedades.

23. A rrastre en la mitad superior de la escena para dibujar un

rectángulo.

24. S eleccione el rectángulo con la herramienta y mediante

el panel Propiedades en la sección asigne
al rectángulo unas dimensiones de 200 píxeles de ancho por
60 píxeles de alto, actuando para ello en las casillas AN y AL
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.

25. S eleccione el fotograma nº 30 de la capa morphing y pulse F6 para crear un nuevo fotograma
clave.

26. O bserve 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 transformación.

27. H aga clic sobre el fotograma 30 de la capa

morphing para seleccionarlo.

28. Deseleccione todo haciendo clic en un lugar

libre de la escena y seleccione el rectángulo
con la herramienta de selección. Pulse en
la tecla Supr ( delete ⌦ ) para eliminarlo.

29. Seleccione la herramienta de texto , haga

clic en la mitad superior de la escena y
escriba el texto IESTPH 2018.

30. A rrastre el ratón sobre todo el texto para

seleccionarlo al completo y en el panel
Propiedades cambie los atributos del texto
seleccionado asignando un tamaño de 60,
tipo de letra Arial Black y color rosa.

31. S eleccione el texto con la herramienta y arrástrelo para dejarlo más o menos centrado en
la parte superior de la escena.
 6

Ejercicio 04: BOTÓN QUE ACTIVA UN MORPHING

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.

32. A ntes 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.

33. A hora seleccione el primer fotograma de la capa morphing (fíjese en que vuelve a aparecer el
rectángulo). Seguidamente, seleccione la opción Insertar→Interpolación de forma. La línea de
tiempo mostrará la creación de la animación mediante la aparición de una flecha en el sentido
de desarrollo de la película.

34. 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 queremos, 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.

35. Vamos a comenzar por el final, es decir, hacer que la transformación se detenga en cuanto
aparezca el texto IESTPH 2018 perfectamente formado. Para ello, haga clic en el último
fotograma de la capa morphing y abra el panel Acciones pulsando F9 (  F9) . Si no está
activado, haga clic en el botón fragmento de codigo para activar el asistente para la
introducción de acciones. Haga clic en Action Script, navegacion de linea de tiempo luego detener en
este fotograma.

36. 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

Ejercicio 04: BOTÓN QUE ACTIVA UN MORPHING

37. 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 Action Script luego navegacion de linea de tiempo.

38. En la parte superior derecha de la ventana aparecerán los diferentes eventos que se relacionan
con un ratón. Active la casilla hacer clic para ir al fotograma y reproducir, que significa que la
acción se realizará al pulsar el botón del ratón.

39. 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 navegacion de linea de tiempo
hacer clic para ir al fotograma y
detener. En el comando,
gotoAndPlay(...); escribimos 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.
 8

Ejercicio 04: BOTÓN QUE ACTIVA UN MORPHING

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 IESTPH 2018. 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 IESTPH 2018 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.

40. A sí 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.

41. Abra el grupo Action Script controladores

de eventos luego Event MouseOver. De este
modo, le diremos al programa que
queremos que la acción se ejecute desde
un inicio cuando pasemos el cursor por
encima del botón.

42. Seguidamente, programaremos dicha acción.

haciendo doble click sobre el evento MouseOver
asignamos un gotoAndStop() y
en la casilla Fotograma asígnele el valor 1. 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 acciones que
se han incorporado al botón.
43. F inalmente, seleccione el fotograma 1 de la capa Botón e inserte
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 IESTPH 2018. 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.

44. 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.

45. Con objeto de tener una referencia correcta del tamañ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 IESTPH 2018 que deberá
subrayarse.
46. A hora, desde el panel Biblioteca arrastre a la escena el nuevo clip creado (de momento no
contiene 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 una cruz en su interior.
 9

Ejercicio 04: BOTÓN QUE ACTIVA UN MORPHING

47. S eguidamente, 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.

48. A ctive la herramienta para dibujar rectángulos.

49. E n 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.

50. A hora 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.

51. S eleccione 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.

52. H aga 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 negra sobre
fondo color violeta.

53. C on el fotograma 20 seleccionado, haga clic con el botón derecho sobre el rectángulo
verde y en el menú que aparecerá elija la opción Transformación libre. El rectángulo
mostrará unos tiradores a su alrededor.

54. M ueva el cursor del ratón por encima del tirador central derecho hasta que aparezca
una doble flecha horizontal. Utilice la herramienta Zoom si le hace falta.

55. M ientras 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.

56. 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.

57. A rrastre 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.
 10

Ejercicio 04: BOTÓN QUE ACTIVA UN MORPHING

MONTAJE EN LA ESCENA PRINCIPAL

Ahora sólo falta incorporar el clip a la escena principal y ubicarlo en una capa independiente.

58. P ulse 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 ( delete ⌦ ) para eliminarlo. No se preocupe. El clip continúa estando disponible
en la biblioteca.

59. P ulse 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.

60. 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 IESTPH 2018. Tenga en cuenta que para poder ver el texto
deberá seleccionar el fotograma número 30.

61. A hora, haga clic sobre el primer fotograma de la capa subrayado y, seguidamente, después de
haber soltado el botón del ratón, arrastre el fotograma hacia la derecha hasta llevarlo al fotograma
número 30. De este modo, el clip del subrayado no se iniciará hasta que el cursor de tiempo
llegue a ese fotograma.

62. 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
independientemente de la línea de tiempo principal, ya que posee su propia línea de tiempo.