01 boton que activa un morphing

INTRODUCCIÓN

Se trata de crear una escena con un botón que, al pulsarlo, desencadenará una secuencia deanimación en la que un objeto se convertirá en un texto y se subrayará automáticamente. Mediantela pulsación de la combinación de teclas Ctrl + Z podrá ir deshaciendo acciones que desee eliminarporque 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.0de ActionScript (recuerde que en la introducción del libro se dijo que el nuevo lenguaje ActionScript3.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 ventanaque se abrirá y pulse en Aceptar. Se creará un documento en blanco de Flash.

01Ejercicio

Botón que activa un morphing

Flash CS4 Curso Práctico

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 enla casilla Nombre, marque la opción Botón y pulse en Aceptar. Eso le llevará a una pantalla dedicadaexclusivamente a la creación del botón. Observe la biblioteca y verá cómo, aunque no ha hecho nadatodaví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 uncí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 herramientaColor 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 paraque las coordenadas del símbolo coincidan con el centro del mismo ( ). Seguidamente, introduzcael valor 0 en cada una de las casillas X e Y; con esta operación habrá centrado el círculo justo enel eje de coordenadas (0,0). Finalmente, en las casillas W y H ajuste un valor de 100 para dotaral 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 herramientaTexto . Seguidamente, pulse en la barra lateral de herramientas y seleccione un color queresalte 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 paraseleccionarlo y abra el panel Propiedades si no estaba abierto. En la sección aparece elparámetro Tamaño mediante el cual se puede ajustar el tamaño de la fuente del texto. Introduzcael valor 25 para asignar al texto una altura de 25 píxeles y en el campo Familia elija el tipo de letraArial Black.


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

7 Bien, ya hemos definido el aspectodel botón cuando esté en reposo. En lalínea de tiempo haga clic en el segundofotograma para seleccionarlo y pulse F6para crear un nuevo fotograma clave.Deseleccione el círculo haciendo clic enun lugar libre de la pantalla.

8 El segundo fotograma del botón esel que contendrá el aspecto del botóncuando se pase el cursor del ratón porencima. Vamos a hacer que en ese casoel texto Pulsa se agrande para llamarla 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 untamaño de 32 píxeles. Centre el textoen el círculo arrastrándolo con el ratóno moviéndolo con las teclas de cursor.

9 Vamos a crear el tercer fotograma, que mostrará el aspecto del botóncuando se haga clic sobre él. Para ello, selecciónelo y pulse F6 paraconvertirlo en un nuevo fotograma clave.

10 Con la herramienta seleccione únicamente el círculo y cámbieleel color mediante el panel Color al que puede acceder con la opciónVentana/Color. Debe hacer clic en el icono de ese panel y elegirel color, por ejemplo, rojo.

11 Ahora vamos a agrandar el círculocon objeto de que al hacer clic sobreel botón, además de que cambie de colorse haga más grande. Para ello, selec-cione el círculo y en el panel Informa-ción que ha utilizado antes, asigne untamaño de 120 píxeles para cada unade las dos casillas W y H.

12 Para rizar el rizo haremos que, ademásdel cambio de color y tamaño del cír-culo, el texto Pulsa se convierta en eltexto O.K. Para ello, seleccione sólo eltexto con la herramienta de texto y haciendo doble clic sobre él, bórreloy 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 deletra para que quede más o menos comose muestra en la figura.


14 Bien, con esto se ha concluido el botón.Pulse en el texto Escena 1 de la barra deedició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 elbotón recién creado. Pulse Ctrl + Intro paratestear la película y verá cómo, al pasar elratón por encima del botón, el texto Pulsase 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 sonidopara que se reproduzca en el momento enque 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 elarchivo 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 escenaprincipal 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 correspondienteal 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 laforma 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 hacerclic sobre el botón, además de todo lo de antes suena elsonido insertado.

CREACIÓN DEL OBJETO

Ahora vamos a crear el objeto que deberá trans-formarse en un texto. Concretamente, convertiremosun rectángulo en el texto Flash CS4. Vamos a rea-lizar la transformación directamente en la ventanade la escena, y para estructurarla correctamente co-locaremos cada elemento en una capa diferente.

19 Así pues, vamos a renombrar la capa actual quees la que contiene el botón. Haga doble clic sobre elnombre de la capa y asígnele el nombre botón.

20 Seguidamente, en la parte inferior de la lista decapas pulse en para crear una nueva capa y cam-bie su nombre por defecto por el de morphing, yaque lo que vamos a crear es una transformación de una cosa en otra llamada popularmente de esemodo. Haga clic en esa última capa creada para seleccionarla y poder trabajar en ella.

SONIDOINCRUSTADO


21 Ahora vamos a dibujar un rectángulo de color rojo sin borde. Para ello seleccione la herramientaRectá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 elpanel Propiedades en la sección asigne al rec-tángulo unas dimensiones de 200 píxeles de ancho por 60 píxelesde 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 lafigura.

Bien, con eso hemos creado el objeto inicial. Ahora hay que definirel objeto final y en qué fotograma de la película debe aparecer.

24 Seleccione el fotograma nº 30 de la capa morphing y pulse F6para 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 detiempo de la capa del botón que llegue también hasta el fotograma 30. Así pues, seleccione el fotograma30 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 elfotograma 30 el botón haga nada diferente, es decir, deseamos que el cometido del botón y lasacciones 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 capamorphing para seleccionarlo.

27 Deseleccione todo haciendo clic en un lugar li-bre de la escena y seleccione el rectángulo con laherramienta de selección. Pulse en la tecla Suprpara eliminarlo.

28 Seleccione la herramienta de texto , haga clicen la mitad superior de la escena y escriba el texto Flash CS4.


29 Arrastre el ratón sobre todo el texto para seleccionarlo al completo y en panel Propiedades cambielos atributos del texto seleccionado asignando un tamaño de 60, tipo de letra Arial Black, estilonegrilla y color rosa.

30 Seleccione el texto con la herramienta y arrástrelo para dejarlo más o menos centrado en laparte 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 quecrearla.

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 vecesla opción Modificar/Separar, ya que, como sabe, con una sola separación el texto separa únicamentelas letras del texto pero éstas permanecen agrupadas individualmente.

32 Ahora seleccione el pri-mer fotograma de la capamorphing (fíjese en quevuelve a aparecer el rectán-gulo). Seguidamente, selec-cione la opción Insertar/Interpolación de forma. La líneade tiempo mostrará la crea-ción de la animación mediantela aparición de una flecha enel sentido de desarrollo de lapelícula.

33 Vamos a comprobar si se produce la transformación. Para ello, sitúe el cursor sobre el cabezalque aparece sobre el primer fotograma de la línea de tiempo y arrastre hacia la derecha. Si todoestá correctamente realizado, verá cómo el rectángulo se va transformando en el texto según vayaarrastrando. Ahora pulse Ctrl + Intro para testear la película de forma automática y observe cómola 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 alhacer 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 lacapa 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 enel 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 derechadel panel mostrará la acción seleccionada para ese fotograma y, al mismo tiempo, podrá ver cómoen el fotograma seleccionado aparece una pequeña «a» indicativa de que ese fotograma poseeacciones definidas. Pulse de nuevo Ctrl + Intro para testear la película y compruebe cómo ahorala transformación sólo se ejecuta una vez.


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 grupoFunciones globales y dentro de éste seleccione el subgrupo Control de clip de película. Busque laacció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 unratón. Active la casilla Presionar, que significa que la acción se realizará al pulsar el botón del ratóny desactive la casilla Liberar.


37 Ya hemos programado cuándo debe producirse la acción pero... ¿cuál debe ser la acción? Puesevidentemente, será que comience la reproducción de la película de la transformación desde el fotogramanúmero 2, ya que el número 1 ya se está visualizando. Así pues, haga clic en el grupo Funcionesglobales, abra el subgrupo Control de la línea de tiempo y haga doble clic en la acción goto. En lacasilla Fotograma de parte derecha del panel introduzca el valor 2, indicándose así que deseamosque al hacer clic en el botón se desencadene la reproducción de la transformación desde el fotogramanú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 arrancaautomá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 textoFlash CS4 en la pantalla pero, al mover el ratón fuera del botón y volverlo a situar encima, sevisualice de nuevo el rectángulo. Para ello, lo que hay que hacer es detectar que el cursor ha salidoy vuelto a la superficie del botón y provocar que en ese momento el cursor de la línea de tiempovuelva 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 nospermitirán conseguir lo propuesto. En el panel, sitúe el cursor sobre el símbolo } para que las nuevasacciones 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 depelícula. Seguidamente haga doble clic en la acción On, desactive la casilla Liberar, y active la casillaSituar sobre objeto. De este modo, le diremos al programa que queremos que la acción se ejecutecuando pasemos el cursor por encima del botón.

40 Seguidamente, programaremos dicha acción. Para ello, en el subgrupoControl de la línea de tiempo haga doble clic sobre la acción gotoy en la casilla Fotograma asígnele el valor 1. Seguidamente, activela casilla Ir a y detener, ya que lo que queremos es que el cursorvaya al fotograma 1 y se quede ahí. Si observa el recuadro derechode 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áticamenteuna vez haya aparecido. Para ello, crearemos un clip de película que posteriormente insertaremosen 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á escribael nombre subrayado, seleccione Clip de película en la casilla Tipo y pulse en Aceptar. Con estaoperación entrará en una pantalla específica para la creación del nuevo clip.


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 hagaclic sobre la pestaña Escena 1 para volver a la escenaprincipal, ya que al haber creado el clip de película habremosentrado en una pantalla independiente para su creación. Seguidamente, arrastre el cabezal de lalí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ículase 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 enla 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 ypulse en para eliminar el color de contorno. Seguidamente, pulse en para seleccionar uncolor 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 deanchura por 20 de altura.

49 Seleccione el rectángulo por separado y elija la opción Modificar/Agrupar para agruparlo, ya queno 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 Crearinterpolación clásica. Seleccione el fotograma 20 y pulse F6 para crear un nuevofotograma clave; la línea de tiempo mostrará la creación de la animación mediantela 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. Elrectá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 hastaque el texto quede totalmente subrayado. La pulsación de esta tecla provocará que el rectángulose estire únicamente por la derecha y no simétricamente por los dos lados.


54 Para finalizar, insertaremos una acción de stop al final del clip para evitar que se reproduzcacontinuamente. Para ello, seleccione el último fotograma del clip y, en el panel Acciones seleccioneuna 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 hastaconvertirse 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ómoel inicio del clip creado aparece en el lugar en donde lo hemos ubicado. Selecciónelo y pulse la teclaSupr 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 haciaarriba 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 principiode la película, con lo cual, el subrayado se producirá antes de la transformación del rectángulo entexto. De todos modos, en principio, seleccione la capa que acaba de crear y arrastre el clip depelícula desde la biblioteca (recuerde que es el que tiene el icono a la izquierda del nombresubrayado). Sitúe el pequeño cuadradito en el lugar adecuado, es decir, por debajo y a la izquierdadel texto Flash CS4. Tenga en cuenta que para poder ver el texto deberá seleccionar el fotogramanú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 elfotograma hacia la derecha has-ta llevarlo al fotograma número30. De este modo, el clip delsubrayado 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 loprevisto. Si el subrayado no queda centrado con respecto al texto, seleccione el clip y muévalo conlos 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.

01 boton que activa un morphing

Documents

Transcript of 01 boton que activa un morphing