Sei sulla pagina 1di 8

QU ES UN BOTN?

Los smbolos de tipo Botn son los que aportan la mayor parte de la interactividad de las pelculas Flash con aquel que la est visualizando. Un botn, en Flash, es igual que cualquier botn de cualquier entorno informtico, sea web o cualquier otro. Son elementos que se prestan a que el usuario los presione, desencadenando al hacerlo una serie de acciones. Tambin es habitual ver cmo este tipo de elementos reaccionan cuando se les pasa el ratn por encima o cuando estn pulsados. Pues bien, para conseguir los efectos interactivos que acabamos de mencionar en otros lenguajes orientados a la web, que es el caso que nos ocupa, debemos crear programas relativamente grandes. Esto es un inconveniente ya que el uso de los botones es una prctica muy habitual en el diseo en Internet. Sin embargo, en Flash no ocurre as. Su interfaz est diseada de manera especial para la creacin de botones, lo que nos permite crear todos estos efectos de una manera muy sencilla. Al igual que los otros smbolos de Flash CS4, los botones tienen su propia lnea de tiempo. Esta es independiente pero, sin embargo, est formada nicamente por cuatro fotogramas, uno para cada estado posible del botn.

Reposo. Aspecto por defecto del botn, es decir, cuando el puntero del ratn no est situado sobre l. Sobre. Aspecto del botn cuando situamos el puntero sobre l. Presionado. Apariencia que deseamos tenga nuestro botn mientras lo mantengamos pulsado. Zona activa. Aqu debemos indicar el rea real en la que queremos que acte nuestro botn. Esto es importante sobre todo en botones compuestos slo por texto como veremos ms adelante.

Parece que la limitacin de fotogramas podra implicar una limitacin en la capacidad de espectacularidad y utilidad de estos smbolos, pero no es as. Los botones pueden contener a su vez otros smbolos, como clips o grficos (tambin de tipo Bitmap). La unin de las posibilidades de todos los smbolos pueden dotar a los botones de efectos asombrosos.

MSc Ing. John Harold Bonilla B.___ Maestro en artes plsticas

CREACIN DE UN BOTN
En la creacin de un botn podemos considerar dos fases. En la primera vamos a convertir nuestro objeto a smbolo de tipo botn y posteriormente veremos cmo completarlo internamente, lo que nos ayudar a entender mejor dicha estructura. Comenzamos creando el objeto que representar el aspecto por defecto de nuestro botn con las herramientas que nos ofrece Flash CS4. Seleccionaremos el objeto y accederemos al men Insertar Convertir en Smbolo, le daremos el Tipo Botn y asignaremos un nombre a nuestro nuevo smbolo.

De esta forma ya tenemos transformado el objeto para que se comporte como un botn. Ahora lo completaremos internamente. Para determinar cmo debe reaccionar el botn en funcin de las acciones del ratn, lo editaremos haciendo clic con el botn derecho del ratn sobre nuestro nuevo botn y seleccionando la opcin Editar. Cuando tengamos delante la lnea de tiempo del botn (observa que tiene el aspecto que hemos mostrado anteriormente), seleccionaremos cada uno de los frames (sobre, reposo, presionado y zona activa) y pulsaremos F6 para crear un fotograma clave en cada uno de ellos.

Ahora ya podemos modificar el aspecto inicial del botn para cada posicin del cursor y marcar el rea de accin del botn (fotograma Hit) en la que simplemente podremos dejar la misma figura que la inicial (en este caso slo es importante la forma del objeto, no los colores u otras cosas) o bien dibujar con las herramientas de dibujos de Flash una nueva figura, en cuya superficie "se sentir aludido" nuestro botn.

MSc Ing. John Harold Bonilla B.___ Maestro en artes plsticas

Este es un botn muy bsico, como veremos se pueden complicar mucho, pero para empezar nos servir con este. Observa cmo cambian los estados de reposo (rojo plido), sobre (rojo) y pulsado (azul). Si una vez creado el botn queremos observar sus distintos estados y todava no hemos terminado la pelcula entera y por tanto no deseamos tener que reproducirla toda podemos hacerlo accediendo a la Biblioteca de nuestra pelcula y seleccionando el botn creado. Para ver lo que comentbamos bastar con pulsar el icono situado a la derecha de la vista previa del smbolo.

FORMAS EN LOS BOTONES


Los botones son smbolos que pueden tener multitud de formas. Si bien lo ms habitual es ver botones rectangulares, cuadrados y circulares, cuya creacin es inmediata como vimos en el punto anterior, tambin hay otros muchos tipos de botones que, pese a ser menos utilizados, es muy habitual verlos en multitud de pginas web. Entre estos estn los creados mediante formas poligonales, aquellos que estn formados por texto nicamente, dibujos con diferentes motivos, etc. Es interesante su uso para dar ms vistosidad ya que algunos resultan ms expresivos, y en esto Flash nos ayuda mucho, debido a la relativa sencillez de creacin de botones que sus herramientas de dibujo nos ofrece. Hay varias formas de botn tambin muy extendidas, como el botn con relieve sencillo o los botones en forma de pldora. Puesto que existen muchas formas de conseguir estos efectos, a continuacin tienes un ejercicio paso a paso que muestra una forma de conseguir el relieve en un botn rectangular.

INCLUIR UN CLIP EN UN BOTN


La inclusin de clips de pelcula en los botones puede dotar a stos de ms vistosidad. Es habitual colocar un clip en el fotograma Sobre para indicar algn tipo de informacin extra o una animacin para ir ms all de un cambio de color. Tambin es comn ver un clip de pelcula actuando como un botn. Esto caso se puede hacer por ejemplo poniendo el clip en el fotograma Reposo. Veamos por ejemplo el botn siguiente: Comprueba todos los estados del ratn. Por lo que nos dice el botn podemos intuir que empieza algo, pero quiz no tengamos claro qu. Ayudara a la navegacin que al ponernos sobre el cursor, el texto cambie para darnos informacin extra. Por ejemplo:

MSc Ing. John Harold Bonilla B.___ Maestro en artes plsticas

Lo nico que hemos cambiado es que tenemos el texto como un movie clip, en cuando el cursor est encima, lo cambiamos por otro con la informacin. Incluir un Clip en un botn es muy sencillo. Tomando este ejemplo, y partiendo de que tenemos los dos textos como clips en la biblioteca, slo tendremos que: - Hacer doble clic sobre el botn para entrar en su modo de edicin. - Seleccionamos el estado Sobre para modificarlo. Selecciona la instancia del texto. Ahora tenemos dos opciones: - Pulsa la tecla SUPRIMIR para eliminarlo. - Desde la Biblioteca (men Ventana Biblioteca) arrastramos el clip con el nuevo texto, para crear una instancia. O la opcin ms prctica: - En las propiedades de la instancia, pulsamos Intercambiar... y elegimos el nuevo objeto de texto. - Por ltimo, centramos el nuevo texto en el botn, si es necesario. Ya est listo, ahora cuando pases el ratn sobre el botn el clip de pelcula empezar a reproducirse. Por supuesto, en vez de cambiar el texto podemos aadir otros clips, que simulen movimientos, reflejos, etc.

INCLUIR UN CLIP EN UN BOTN


La inclusin de clips de pelcula en los botones puede dotar a stos de ms vistosidad. Es habitual colocar un clip en el fotograma Sobre para indicar algn tipo de informacin extra o una animacin para ir ms all de un cambio de color. Tambin es comn ver un clip de pelcula actuando como un botn. Esto caso se puede hacer por ejemplo poniendo el clip en el fotograma Reposo. Veamos por ejemplo el botn siguiente: Comprueba todos los estados del ratn. Por lo que nos dice el botn podemos intuir que empieza algo, pero quiz no tengamos claro qu. Ayudara a la navegacin que al ponernos sobre el cursor, el texto cambie para darnos informacin extra. Por ejemplo:

MSc Ing. John Harold Bonilla B.___ Maestro en artes plsticas

Lo nico que hemos cambiado es que tenemos el texto como un movie clip, en cuando el cursor est encima, lo cambiamos por otro con la informacin. Incluir un Clip en un botn es muy sencillo. Tomando este ejemplo, y partiendo de que tenemos los dos textos como clips en la biblioteca, slo tendremos que: - Hacer doble clic sobre el botn para entrar en su modo de edicin. - Seleccionamos el estado Sobre para modificarlo. Selecciona la instancia del texto. Ahora tenemos dos opciones: - Pulsa la tecla SUPRIMIR para eliminarlo. - Desde la Biblioteca (men Ventana Biblioteca) arrastramos el clip con el nuevo texto, para crear una instancia. O la opcin ms prctica: - En las propiedades de la instancia, pulsamos Intercambiar... y elegimos el nuevo objeto de texto. - Por ltimo, centramos el nuevo texto en el botn, si es necesario. Ya est listo, ahora cuando pases el ratn sobre el botn el clip de pelcula empezar a reproducirse. Por supuesto, en vez de cambiar el texto podemos aadir otros clips, que simulen movimientos, reflejos, etc.

ACCIONES EN LOS BOTONES


Puesto que existen multitud de acciones que se pueden aplicar tanto a los botones, como a otros elementos de Flash CS4 vamos a comentar dos de las ms comunes. Nota: Al crear un archivo, habrs visto que podemos elegir distintas versiones de ActionScript (AS 3.0, AS 2.0...). Esto se refiere al lenguaje de programacin que podemos empelar en Flash y que lo convierte en una herramienta realmente potente. En las versiones 1 y 2, se podan agregar comportamientos directamente en las propiedades de los botones. Pero nosotros venimos empleando las versin 3.0 a lo largo del curso, por ser la ms actual y potente. Esta versin nos obliga a escribir el cdigo ActionScript. Veremos cosas bsicas, y entraremos un poco ms en ActionScript a partir del tema 16. Comenzamos por crear o aadir nuestro botn, y asignarle un nombre de instancia. El nombre que le demos es muy importante, porque nos permitir acceder a l desde el cdigo.

MSc Ing. John Harold Bonilla B.___ Maestro en artes plsticas

Aunque podemos escribir el cdigo en la misma capa, recomendamos crear una capa exclusivamente para el cdigo, por tenero todo mejor organizado. Ahora, abrimos en el panel Acciones (men Ventana Acciones). Se mostrar un rea en blanco en la que podemos escribir:

Sin entrar en detalle de qu es cada palabra, pues esto ya lo veremos, este es el cdigo que debemos de escribir para asociar acciones a un botn: miBoton.addEventListener(click, accionesMiBoton); function accionesMiBoton(event):void{ //Acciones } Donde miBoton ser el nombre de la instancia del botn.

accionesMiBoton contiene las acciones a realizar. Observa que aparece en dos


sitios. El nombre que le hemos dado es el que queramos. Si tenemos varios botones, a cada uno lo referiremos por su nombre de instancia que es nico. Tambin tenemos que dar un nombre nico a accionesMiBoton para cada uno, si no todos realizaran las mismas acciones. Ahora, cambiamos donde pone //Acciones por lo que queramos que haga. Veamos las ms comunes: 1) Abrir una pgina web. Con esto conseguiremos abrir una pgina cualquiera de internet (o una pelcula Flash), lo que nos servir para irnos desplazando por webs

MSc Ing. John Harold Bonilla B.___ Maestro en artes plsticas

que contengan ms de una pgina, o permitir al usuario descargarse archivos entre otras cosas. La instruccin en ActionScript que nos permite hacerlo es navigateToURL(new URLRequest("http://www.johnbonilla.es.tl"), "_blank");. "http://www. johnbonilla.es.tl " se refiere a la pgina que queremos abrir, y "_blank" indica que se abrir en una pgina nueva. Por lo tanto, si tenemos un botn cuyo nombre de instancia es btnVisitarCun que queremos que abra la web http://www.cun.edu.co, escribiramos: btnVisitarcun.addEventListener('click', visitarcun); function visitarcun(event):void{ navigateToURL(new URLRequest("http://www.cun.edu.co"), "_blank"); } 2) Controlar una pelcula en curso. Si estamos reproduciendo una pelcula Flash y queremos permitir que el usuario la detenga, la ponga en marcha, avance, retroceda ... Para ello podemos emplear las acciones:

stop(); para detener. play(); para reproducir. gotoAndPlay(numeroFotograma); para ir a un fotograma determinado.

Por ejemplo, podemos tener el botn btnPausar para parar la pelcula y el botn btnContinuar para reproducirla: btnPausar.addEventListener('click', pausar); function pausar(event):void{ stop(); } btnContinuar.addEventListener('click', continuar); function continuar(event):void{ play(); }

MSc Ing. John Harold Bonilla B.___ Maestro en artes plsticas

Tal cual lo hemos puesto, afectara a la pelcula principal. Si lo que queremos parar o reproducir es un clip determinado, habra que escribirlo delante de la accin, separado por un punto. Por ejemplo miClip.stop();.

INCLUIR SONIDO EN UN BOTN


Si nuestras pginas van a tener sonido, el sonido en los botones es una parte fundamental. Podemos hacer, por ejemplo que se activen sonidos al pulsar un botn. Para ello, simplemente debemos editar nuestro botn y seleccionar el fotograma Presionado, e insertar el sonido. Como vimos en el tema correspondiente. Es este caso, el tipo de sincronizacin ms conveniente suele ser Evento. Por ejemplo podramos importar uno desde nuestro disco duro o bien tomar alguno que ya tengamos en la biblioteca.

MSc Ing. John Harold Bonilla B.___ Maestro en artes plsticas