Flash CS4 Curso Prctico

Ejercicio
INTRODUCCIN

01

Botn que activa un morphing

Se trata de crear una escena con un botn que, al pulsarlo, desencadenar una secuencia de animacin en la que un objeto se convertir en un texto y se subrayar automticamente. Mediante la pulsacin de la combinacin de teclas Ctrl + Z podr ir deshaciendo acciones que desee eliminar porque se haya equivocado.

CREACIN DE UN NUEVO DOCUMENTO

Vamos a crear un nuevo documento preparado para poder introducir acciones en la versin 2.0 de ActionScript (recuerde que en la introduccin del libro se dijo que el nuevo lenguaje ActionScript 3.0 no est cubierto en este manual por estar ms indicado para desarrolladores). 1 Seleccione la opcin Archivo/Nuevo, elija la opcin Archivo de Flash (ActionScript 2.0) de la ventana que se abrir y pulse en Aceptar. Se crear un documento en blanco de Flash.

 RA-MA

Ejercicio 01: BOTN QUE ACTIVA UN MORPHING

CREACIN DEL BOTN

Vamos a comenzar creando el botn que provocar la transformacin del objeto en un texto: 1 Seleccione la opcin Insertar/Nuevo smbolo. En la ventana que se abrir introduzca botn en la casilla Nombre, marque la opcin Botn y pulse en Aceptar. Eso le llevar a una pantalla dedicada exclusivamente a la creacin del botn. Observe la biblioteca y ver cmo, aunque no ha hecho nada todava, ya aparece el smbolo de botn en ella. 2 Con la herramienta valo y ayudndose de la tecla Mays arrastre el ratn para dibujar un crculo en el centro de la pantalla. Si el crculo aparece con contorno, seleccinelo y elimnelo. Seleccione el crculo haciendo clic en l y asgnele un color azul intermedio mediante la herramienta Color de relleno de la barra lateral de herramientas o el panel Propiedades. 3 Con el crculo seleccionado, elija la opcin Ventana/Informacin para visualizar el panel Informacin. La zona central muestra el controlador del punto de registro ; haga clic sobre l para que las coordenadas del smbolo coincidan con el centro del mismo ( ). Seguidamente, introduzca el valor 0 en cada una de las casillas X e Y; con esta operacin habr centrado el crculo justo en el eje de coordenadas (0,0). Finalmente, en las casillas W y H ajuste un valor de 100 para dotar al crculo de un tamao de 100 pxeles de dimetro.

4 Deseleccione el crculo haciendo clic en un lugar libre de la pantalla y seleccione la herramienta . Seguidamente, pulse en la barra lateral de herramientas y seleccione un color que Texto 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 seccin aparece el parmetro Tamao mediante el cual se puede ajustar el tamao de la fuente del texto. Introduzca el valor 25 para asignar al texto una altura de 25 pxeles y en el campo Familia elija el tipo de letra Arial Black.

 RA-MA

Ejercicio 01: BOTN QUE ACTIVA UN MORPHING

Con la herramienta Seleccin

arrastre el texto hasta depositarlo centrado sobre el crculo.

7 Bien, ya hemos definido el aspecto del botn cuando est en reposo. En la lnea de tiempo haga clic en el segundo fotograma para seleccionarlo y pulse F6 para crear un nuevo fotograma clave. Deseleccione el crculo haciendo clic en un lugar libre de la pantalla. 8 El segundo fotograma del botn es el que contendr el aspecto del botn cuando se pase el cursor del ratn por encima. Vamos a hacer que en ese caso el texto Pulsa se agrande para llamar la atencin del usuario. Para ello, seleccione solamente el texto con la herramienta , y en el panel Propiedades que acabamos de usar asgnele un tamao de 32 pxeles. Centre el texto en el crculo arrastrndolo con el ratn o movindolo con las teclas de cursor. 9 Vamos a crear el tercer fotograma, que mostrar el aspecto del botn cuando se haga clic sobre l. Para ello, seleccinelo y pulse F6 para convertirlo en un nuevo fotograma clave. 10 Con la herramienta seleccione nicamente el crculo y cmbiele el color mediante el panel Color al que puede acceder con la opcin Ventana/Color. Debe hacer clic en el icono de ese panel y elegir el color, por ejemplo, rojo. 11 Ahora 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 ello, seleccione el crculo y en el panel Informacin que ha utilizado antes, asigne un tamao de 120 pxeles para cada una de las dos casillas W y H. 12 Para rizar el rizo haremos que, adems del cambio de color y tamao del crculo, el texto Pulsa se convierta en el texto O.K. Para ello, seleccione slo el texto con la herramienta de texto y haciendo doble clic sobre l, brrelo y escriba en su lugar el texto O.K. 13 Seleccione ahora el texto que acaba de escribir, y con el panel Propiedades cambie su color, tamao y tipo de letra para que quede ms o menos como se muestra en la figura.

 RA-MA

Ejercicio 01: BOTN QUE ACTIVA UN MORPHING

14 Bien, con esto se ha concluido el botn. Pulse en el texto Escena 1 de la barra de edicin para volver a la escena principal (tambin puede pulsar en en la misma barra) y arrastre a ella desde la biblioteca el botn recin creado. Pulse Ctrl + Intro para testear la pelcula y ver cmo, al pasar el ratn por encima del botn, el texto Pulsa se agranda para llamar la atencin. Igualmente, si hace clic sobre el botn ver cmo ste se agranda y muestra el texto O.K. para indicar que hemos pulsado en l. He dicho que hemos acabado el botn? Pues no, ahora vamos a aadirle un sonido para que se reproduzca en el momento en que hagamos clic sobre l. 15 Seleccione la opcin Archivo/Importar/Importar a biblioteca y en la ventana que se abrir, localice 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 botn desde la escena principal o directamente en su nombre en la biblioteca. Se abrir de nuevo la ventana de edicin del botn. 17 Seleccione el fotograma Presionado correspondiente al aspecto del botn cuando se pulsa y desde la biblioteca arrastre el sonido hasta depositarlo sobre el botn. En ese momento, una reproduccin en miniatura de la forma de onda del sonido aparecer en el fotograma correspondiente. 18 Vuelva a la escena principal, active el test de la pelcula pulsando Ctrl + Intro y vea cmo ahora, al hacer clic sobre el botn, adems de todo lo de antes suena el sonido insertado.

SONIDO INCRUSTADO

CREACIN DEL OBJETO

Ahora vamos a crear el objeto que deber transformarse en un texto. Concretamente, convertiremos un rectngulo en el texto Flash CS4. Vamos a realizar la transformacin directamente en la ventana de la escena, y para estructurarla correctamente colocaremos cada elemento en una capa diferente. 19 As pues, vamos a renombrar la capa actual que es la que contiene el botn. Haga doble clic sobre el nombre de la capa y asgnele el nombre botn. 20 Seguidamente, 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 transformacin de una cosa en otra llamada popularmente de ese modo. Haga clic en esa ltima capa creada para seleccionarla y poder trabajar en ella.

 RA-MA

Ejercicio 01: BOTN QUE ACTIVA UN MORPHING

21 Ahora vamos a dibujar un rectngulo de color rojo sin borde. Para ello seleccione la herramienta Rectngulo 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. 22 Arrastre en la mitad superior de la escena para dibujar un rectngulo. 23 Seleccione el rectngulo con la herramienta y mediante el panel Propiedades en la seccin asigne al rectngulo unas dimensiones de 200 pxeles de ancho por 60 pxeles de alto, actuando para ello en las casillas W y H respectivamente. Site el rectngulo centrado sobre el botn 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 pelcula debe aparecer. 24 Seleccione el fotograma n 30 de la capa morphing y pulse F6 para crear un nuevo fotograma clave. 25 Observe cmo el botn ha desaparecido. Eso sucede porque no le hemos dicho a la lnea de tiempo de la capa del botn que llegue tambin hasta el fotograma 30. As pues, seleccione el fotograma 30 en la lnea de tiempo de la capa del botn y pulse F5 para crear un fotograma. El botn aparecer. En este caso no hemos pulsado F6 para crear un fotograma clave porque no deseamos que en el fotograma 30 el botn haga nada diferente, es decir, deseamos que el cometido del botn y las acciones que luego le programaremos se mantengan desde el principio hasta el final.

CREACIN DEL TEXTO

Ahora vamos a crear el texto en el que tendr que convertirse el rectngulo durante la transformacin. 26 Haga clic sobre el fotograma 30 de la capa morphing para seleccionarlo. 27 Deseleccione todo haciendo clic en un lugar libre de la escena y seleccione el rectngulo con la herramienta de seleccin. 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.

 RA-MA

Ejercicio 01: BOTN QUE ACTIVA UN MORPHING

29 Arrastre el ratn sobre todo el texto para seleccionarlo al completo y en panel Propiedades cambie los atributos del texto seleccionado asignando un tamao de 60, tipo de letra Arial Black, estilo negrilla y color rosa. 30 Seleccione el texto con la herramienta parte superior de la escena. y arrstrelo para dejarlo ms o menos centrado en la

CREACIN DE LA INTERPOLACIN DE FORMA

Bien, ya hemos definido los objetos inicial y final de la transformacin de forma. Ahora hay que crearla. 31 Antes de nada, hay que quitarle al texto su condicin elemento agrupado y convertirlo en grfico, ya que, en caso contrario, no se realizar la transformacin. Para ello, seleccinelo y elija dos veces la opcin Modificar/Separar, ya que, como sabe, con una sola separacin el texto separa nicamente las letras del texto pero stas permanecen agrupadas individualmente. 32 Ahora seleccione el primer fotograma de la capa morphing (fjese en que vuelve a aparecer el rectngulo). Seguidamente, seleccione la opcin Insertar/ Interpolacin de forma. La lnea de tiempo mostrar la creacin de la animacin mediante la aparicin de una flecha en el sentido de desarrollo de la pelcula. 33 Vamos a comprobar si se produce la transformacin. Para ello, site el cursor sobre el cabezal que aparece sobre el primer fotograma de la lnea de tiempo y arrastre hacia la derecha. Si todo est correctamente realizado, ver cmo el rectngulo se va transformando en el texto segn vaya arrastrando. Ahora pulse Ctrl + Intro para testear la pelcula de forma automtica y observe cmo la transformacin se realiza de forma automtica e ininterrumpidamente, lo cual no es lo que queremos, ya que la transformacin debe activarse slo cuando se pulse el botn.

ASIGNACIN DE ACCIONES
As pues, vamos a introducir los elementos necesarios para que la pelcula slo se reproduzca al hacer clic en el botn y que, adems, al llegar al final se detenga. 34 Vamos a comenzar por el final, es decir, hacer que la transformacin se detenga en cuanto aparezca 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 botn para activar el asistente para la introduccin de acciones. Haga clic primero en el grupo Funciones globales y dentro de ste seleccione el subgrupo Control de la lnea de tiempo. Localice la accin Stop y haga doble clic sobre ella para seleccionarla. El recuadro de la derecha del panel mostrar la accin seleccionada para ese fotograma y, al mismo tiempo, podr ver cmo en el fotograma seleccionado aparece una pequea a indicativa de que ese fotograma posee acciones definidas. Pulse de nuevo Ctrl + Intro para testear la pelcula y compruebe cmo ahora la transformacin slo se ejecuta una vez.

 RA-MA

Ejercicio 01: BOTN QUE ACTIVA UN MORPHING

35 Ahora vamos a programar la activacin de la transformacin cuando se pulse el ratn. Para ello, seleccione el botn y contine 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 pelcula. Busque la accin On y haga doble clic sobre ella para asignrsela al botn. 36 En la parte derecha de la ventana aparecern los diferentes eventos que se relacionan con un ratn. Active la casilla Presionar, que significa que la accin se realizar al pulsar el botn del ratn y desactive la casilla Liberar.

 RA-MA

Ejercicio 01: BOTN QUE ACTIVA UN MORPHING

37 Ya hemos programado cundo debe producirse la accin pero... cul debe ser la accin? Pues evidentemente, ser que comience la reproduccin de la pelcula de la transformacin desde el fotograma nmero 2, ya que el nmero 1 ya se est visualizando. As pues, haga clic en el grupo Funciones globales, abra el subgrupo Control de la lnea de tiempo y haga doble clic en la accin goto. En la casilla Fotograma de parte derecha del panel introduzca el valor 2, indicndose as que deseamos que al hacer clic en el botn se desencadene la reproduccin de la transformacin desde el fotograma nmero 2. Pulse Ctrl + Intro y compruebe que todo funciona correctamente.

MEJORA DE LA INTERPOLACIN
Tal como tenemos ahora la prctica, una vez realizada la transformacin (que de momento arranca automticamente), permanece en la pantalla el texto Flash CS4. Si volvemos a pulsar en el botn, la transformacin 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 botn permanezca el texto Flash CS4 en la pantalla pero, al mover el ratn fuera del botn y volverlo a situar encima, se visualice de nuevo el rectngulo. Para ello, lo que hay que hacer es detectar que el cursor ha salido y vuelto a la superficie del botn y provocar que en ese momento el cursor de la lnea de tiempo vuelva al fotograma nmero 1. 38 As pues, seleccione de nuevo el botn y abra el panel Acciones para aadir las acciones que nos permitirn conseguir lo propuesto. En el panel, site el cursor sobre el smbolo } para que las nuevas acciones se escriban a continuacin de la anterior. 39 Haga clic en el grupo Funciones globales y luego haga clic en el subgrupo Control de clip de pelcula. Seguidamente haga doble clic en la accin On, desactive la casilla Liberar, y active la casilla Situar sobre objeto. De este modo, le diremos al programa que queremos que la accin se ejecute cuando pasemos el cursor por encima del botn.

40 Seguidamente, programaremos dicha accin. Para ello, en el subgrupo Control de la lnea de tiempo haga doble clic sobre la accin goto y en la casilla Fotograma asgnele 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 cdigo de todas las acciones que se han incorporado al botn. 41 Finalmente, seleccione el fotograma 1 de la capa Botn e inserte ah una accin Stop tal como hizo en el paso 34.

CREACIN DEL SUBRAYADO

Bien, para acabar el ejercicio, vamos a hacer que el texto Flash CS4 se subraye automticamente una vez haya aparecido. Para ello, crearemos un clip de pelcula que posteriormente insertaremos en el lugar adecuado en la escena principal. 42 Para crear el clip elija la opcin Insertar/Nuevo smbolo y en la pantalla que aparecer escriba el nombre subrayado, seleccione Clip de pelcula en la casilla Tipo y pulse en Aceptar. Con esta operacin entrar en una pantalla especfica para la creacin del nuevo clip.

 RA-MA

Ejercicio 01: BOTN QUE ACTIVA UN MORPHING

43 Con objeto de tener una referencia correcta del tamao del subrayado con relacin al texto a subrayar, trabajaremos de otro modo. En la barra de edicin haga clic sobre la pestaa Escena 1 para volver a la escena principal, ya que al haber creado el clip de pelcula habremos entrado en una pantalla independiente para su creacin. Seguidamente, arrastre el cabezal de la lnea 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 contiene nada). Lo reconocer porque aparece en la biblioteca precedido del icono . El clip de pelcula 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 pelcula 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 rectngulos.

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 pequeo rectngulo por debajo y a la izquierda de lo que ser el texto a subrayar. y en el panel Propiedades, asgnele un tamao de 6 pxeles de Seleccinelo enmarcndolo con anchura por 20 de altura. 49 Seleccione el rectngulo por separado y elija la opcin Modificar/Agrupar para agruparlo, ya que no es posible crear clips con objetos no agrupados.

50 Haga clic con el botn derecho sobre el fotograma 1 y seleccione la opcin Crear interpolacin clsica. Seleccione el fotograma 20 y pulse F6 para crear un nuevo fotograma clave; la lnea de tiempo mostrar la creacin de la animacin mediante la aparicin de una flecha roja. 51 Con el fotograma 20 seleccionado, haga clic con el botn derecho sobre el rectngulo verde y en el men que aparecer elija la opcin Transformacin libre. El rectngulo mostrar unos tiradores a su alrededor. 52 Mueva el cursor del ratn por encima del tirador central derecho hasta que apasi le hace falta. rezca una doble flecha horizontal. Utilice la herramienta Zoom 53 Mientras mantiene pulsada la tecla Alt, estire del tirador central derecho hacia la derecha hasta que el texto quede totalmente subrayado. La pulsacin de esta tecla provocar que el rectngulo se estire nicamente por la derecha y no simtricamente por los dos lados.

 RA-MA

Ejercicio 01: BOTN QUE ACTIVA UN MORPHING

10

10

54 Para finalizar, insertaremos una accin 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 accin Stop tal como ha visto antes y ya debe conocer. 55 Arrastre el cursor de la lnea de tiempo y ver cmo el rectngulo crece hacia la derecha hasta convertirse en una lnea.

MONTAJE EN LA ESCENA PRINCIPAL

Ahora slo 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 edicin para visualizar la escena principal y ver cmo el inicio del clip creado aparece en el lugar en donde lo hemos ubicado. Seleccinelo y pulse la tecla Supr para eliminarlo. No se preocupe. El clip contina estando disponible en la biblioteca. 57 Pulse en para crear una nueva capa y asgnele 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 pelcula, con lo cual, el subrayado se producir antes de la transformacin del rectngulo en texto. De todos modos, en principio, seleccione la capa que acaba de crear y arrastre el clip de pelcula desde la biblioteca (recuerde que es el que tiene el icono a la izquierda del nombre subrayado). Site el pequeo 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 nmero 30. 59 Ahora, haga clic sobre el primer fotograma de la capa subrayado y, seguidamente, despus de haber soltado el botn del ratn, arrastre el fotograma hacia la derecha hasta llevarlo al fotograma nmero 30. De este modo, el clip del subrayado no se iniciar hasta que el cursor de tiempo llegue a ese fotograma. 60 Ahora pruebe la pelcula pulsando Ctrl + Intro y compruebe que todo se desarrolla segn lo previsto. Si el subrayado no queda centrado con respecto al texto, seleccione el clip y muvalo con los cursores hasta que el resultado sea el deseado. El clip de pelcula se reproduce independientemente de la lnea de tiempo principal, ya que posee su propia lnea de tiempo.