DESARROLLO 2. MANIPULAR BOTONES

2 MANIPULAR BOTONES

PARA MANIPULAR UN BOTÓN, PRIMERO DEBEMOS SABER QUE ES:

LOS BOTONES DE FLASH SON OBJETOS GRÁFICOS A LOS QUE PODEMOS ASIGNAR DIFERENTES ESTADOS (NORMAL, SOBRE, PRESIONADO...) Y QUE CUANDO LOS PULSEMOS (O PASEMOS POR ENCIMA), SE EJECUTEN DETERMINADAS ACCIONES.

PARA CREAR UN BOTÓN PODEMOS PRIMERO DIBUJARLO, POR EJEMPLO EN EL ESTADO DE REPOSO, Y DESPUÉS CONVERTIRLO EN SÍMBOLO; PARA ELLO, UNA VEZ SELECCIONADO, ELEGIMOS EL MENÚ: "INSERTAR-CONVERTIR EN SÍMBOLO". DEBEMOS ESCRIBIRLE UN NOMBRE.

2.1 BOTONES

LOS SÍMBOLOS DE TIPO BOTÓN SON LOS QUE APORTAN LA MAYOR PARTE DE LA INTERACTIVIDAD DE LAS PELÍCULAS FLASH CON AQUEL QUE LA ESTÁ VISUALIZANDO. UN BOTÓN, EN FLASH, ES IGUAL QUE CUALQUIER BOTÓN DE CUALQUIER ENTORNO INFORMÁTICO, SEA WEB O CUALQUIER OTRO.

SON ELEMENTOS QUE SE PRESTAN A QUE EL USUARIO LOS PRESIONE, DESENCADENANDO AL HACERLO UNA SERIE DE ACCIONES. TAMBIÉN ES HABITUAL VER COMO ESTE TIPO DE ELEMENTOS REACCIONAN CUANDO SE LES PASA EL RATÓN POR ENCIMA O CUANDO SE LES ESTÁ PULSANDO, POR EJEMPLO.

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 BASTANTE GRANDE YA QUE EL USO DE LOS BOTONES ES UNA PRÁCTICA MUY HABITUAL EN EL DISEÑO EN INTERNET. SIN EMBARGO, EN FLASH NO OCURRE ASÍ. SU INTERFAZ ESTÁ DISEÑADA DE MANERA ESPECIAL PARA LA CREACIÓN DE BOTONES, LO QUE NOS PERMITE CREAR TODOS ESTOS EFECTOS DE UNA MANERA MUY SENCILLA.

AL IGUAL QUE LOS OTROS SÍMBOLOS DE FLASH 8, LOS BOTONES TIENEN SU PROPIA LÍNEA DE TIEMPOS. ESTA ES INDEPENDIENTE PERO, SIN EMBARGO, ESTÁ FORMADA ÚNICAMENTE POR CUATRO FOTOGRAMAS, UNO PARA CADA ESTADO POSIBLE DEL BOTÓN.

REPOSO. ASPECTO POR DEFECTO DEL BOTÓN, ES DECIR, CUANDO EL PUNTERO DEL RATÓN NO ESTÁ SITUADO SOBRE ÉL.

SOBRE. ASPECTO DEL BOTÓN CUANDO SITUAMOS EL PUNTERO SOBRE ÉL.

PRESIONADO. APARIENCIA QUE DESEAMOS TENGA NUESTRO BOTÓN MIENTRAS LO MANTENGAMOS PULSADO.

ZONA ACTIVA. AQUÍ DEBEMOS INDICAR EL ÁREA REAL EN LA QUE QUEREMOS QUE ACTÚE NUESTRO BOTÓN. ESTO ES IMPORTANTE SOBRE TODO EN BOTONES COMPUESTOS SÓLO POR TEXTO COMO VEREMOS MÁS ADELANTE.

PARECE QUE LA LIMITACIÓN DE FOTOGRAMAS PODRÍA IMPLICAR UNA LIMITACIÓN EN LA CAPACIDAD DE ESPECTACULARIDAD Y UTILIDAD DE ESTOS SÍMBOLOS, PERO NO ES ASÍ.

LOS BOTONES PUEDEN CONTENER A SU VEZ OTROS SÍMBOLOS, COMO CLIPS O GRÁFICOS (TAMBIÉN DE TIPO BITMAP). LA UNIÓN DE LAS POSIBILIDADES DE TODOS LOS SÍMBOLOS DOTA A LOS BOTONES DE GRAN ESPECTACULARIDAD.

2.1.1 CREA BOTONES

  EN LA CREACIÓN DE UN BOTÓN PODEMOS CONSIDERAR DOS FASES. EN LA PRIMERA VAMOS A CONVERTIR NUESTRO OBJETO A SÍMBOLO DE TIPO BOTÓN Y POSTERIORMENTE VEREMOS CÓMO COMPLETARLO INTERNAMENTE, LO QUE NOS AYUDARÁ A ENTENDER MEJOR DICHA ESTRUCTURA.

PRIMERAMENTE CREAREMOS EL OBJETO QUE REPRESENTARÁ EL ASPECTO POR DEFECTO DE NUESTRO BOTÓN CON LAS HERRAMIENTAS QUE NOS OFRECE FLASH 8.

SELECCIONAREMOS EL OBJETO Y ACCEDEREMOS AL MENÚ INSERTAR → CONVERTIR EN SÍMBOLO, LE DAREMOS EL COMPORTAMIENTO BOTÓN Y ASIGNAREMOS UN NOMBRE A NUESTRO NUEVO SÍMBOLO.

DE ESTA FORMA YA TENEMOS TRANSFORMADO EL OBJETO PARA QUE SE COMPORTE COMO UN BOTÓN. 

AHORA LO COMPLETAREMOS INTERNAMENTE.

PARA DETERMINAR CÓMO DEBE REACCIONAR EL BOTÓN EN FUNCIÓN DE LAS ACCIONES DEL RATÓN, LO EDITAREMOS HACIENDO CLIC CON EL BOTÓN DERECHO DEL RATÓN SOBRE NUESTRO NUEVO BOTÓN Y SELECCIONANDO LA OPCIÓN EDITAR.

CUANDO TENGAMOS DELANTE LA LÍNEA DE TIEMPOS DEL BOTÓN (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 BOTÓN PARA CADA POSICIÓN DEL CURSOR Y MARCAR EL ÁREA DE ACCIÓN DEL BOTÓN (FOTOGRAMA HIT) EN LA QUE SIMPLEMENTE PODREMOS DEJAR LA MISMA FIGURA QUE LA INICIAL (EN ESTE CASO SÓLO 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 BOTÓN.

 ESTE ES UN BOTÓN MUY BÁSICO, COMO VEREMOS SE PUEDEN COMPLICAR MUCHO, PERO PARA EMPEZAR NOS SERVIRÁ CON ESTE.

SI UNA VEZ CREADO EL BOTÓN QUEREMOS OBSERVAR SUS DISTINTOS ESTADOS Y TODAVÍA NO HEMOS TERMINADO LA PELÍCULA ENTERA Y POR TANTO NO DESEAMOS TENER QUE REPRODUCIRLA TODA PODEMOS HACERLO ACCEDIENDO A LA BIBLIOTECA DE NUESTRA PELÍCULA Y SELECCIONANDO EL BOTÓN CREADO. PARA VER LO QUE COMENTÁBAMOS BASTARÁ CON PULSAR LA TECLA  SITUADA A LA DERECHA DE LA VISTA PREVIA DEL SÍMBOLO.

2.1.2 FORMAS EN LOS BOTONES

  LOS BOTONES SON SÍMBOLOS QUE PUEDEN TENER MULTITUD DE FORMAS. SI BIEN LO MÁS HABITUAL ES VER BOTONES RECTANGULARES, CUADRADOS Y CIRCULARES, CUYA CREACIÓN ES INMEDIATA COMO VIMOS EN EL PUNTO ANTERIOR, TAMBIÉN HAY OTROS MUCHOS TIPOS DE BOTONES QUE, PESE A SER MENOS UTILIZADOS, ES MUY HABITUAL VERLOS EN MULTITUD DE PÁGINAS WEB.

ENTRE ESTOS ESTÁN LOS CREADOS MEDIANTE FORMAS POLIGONALES, AQUELLOS QUE ESTÁN FORMADOS POR TEXTO ÚNICAMENTE, DIBUJOS CON DIFERENTES MOTIVOS, ETC. ES INTERESANTE SU USO PARA DAR MÁS VISTOSIDAD YA QUE ALGUNOS RESULTAN MÁS EXPRESIVOS, Y EN ESTO FLASH NOS AYUDA MUCHO, DEBIDO A LA RELATIVA SENCILLEZ DE CREACIÓN DE BOTONES QUE SUS HERRAMIENTAS DE DIBUJO NOS OFRECE.

HAY VARIAS FORMAS DE BOTÓN TAMBIÉN MUY EXTENDIDAS, COMO EL BOTÓN CON RELIEVE SENCILLO O LOS BOTONES EN FORMA DE PÍLDORA.

2.1.3 INCLUIR UN CLIC EN UN BOTÓN

INCLUIR UN CLIP EN UN BOTÓN

LA INCLUSIÓN DE CLIPS DE PELÍCULA EN LOS BOTONES PUEDE DOTAR A ÉSTOS DE MÁS VISTOSIDAD.

ES HABITUAL COLOCAR UN CLIP EN EL FOTOGRAMA SOBRE PARA INDICAR ALGÚN TIPO DE INFORMACIÓN EXTRA O UNA ANIMACIÓN PARA IR MÁS ALLÁ DE UN CAMBIO DE COLOR.

TAMBIÉN ES COMÚN VER UN CLIP DE PELÍCULA ACTUANDO COMO UN BOTÓN. ESTO CASO SE PUEDE HACER POR EJEMPLO PONIENDO EL CLIP EN EL FOTOGRAMA REPOSO.

COMPRUEBA TODOS LOS ESTADOS DEL RATÓN. POR LO QUE NOS DICE EL BOTÓN PODEMOS INTUIR QUE EMPIEZA ALGO, PERO QUIZÁ NO TENGAMOS CLARO QUÉ.

SI NOSOTROS EN DETERMINADO MOMENTO NO QUEREMOS QUE ESTO OCURRA EN NUESTRAS PÁGINAS WEB, PODEMOS RECURRIR A LA INTRODUCCIÓN DE UN CLIP EN EL BOTÓN, QUE EXPLIQUE UN POCO MÁS ACERCA DE LO QUE PASARÁ SI PULSAMOS.

INCLUIR UN CLIP EN UN BOTÓN ES MUY SENCILLO, SÓLO TENDRÁS QUE, PRIMERO, HACER DOBLE CLIC SOBRE EL BOTÓN PARA ENTRAR EN SU MODO DE EDICIÓN.

HAZ CLIC EN EL ESTADO SOBRE PARA MODIFICARLO. SELECCIONA EL TEXTO Y PULSA LA TECLA SUPRIMIR PARA ELIMINARLO.

AHORA ABRE LA BIBLIOTECA DESDE EL MENÚ VENTANA → BIBLIOTECA DONDE SE ENCONTRARÁ EL CLIP QUE HABREMOS CREADO PREVIAMENTE. SELECCIÓNALO Y ARRÁSTRALO SOBRE EL BOTÓN.

YA ESTA LISTO, AHORA CUANDO PASES EL RATÓN SOBRE EL BOTÓN EL CLIP DE PELÍCULA EMPEZARÁ A REPRODUCIRSE.

2.1.4 BITMAPS Y BOTONES

ADEMÁS DE CLIPS, LOS BOTONES TAMBIÉN PUEDEN CONTENER SÍMBOLOS DE TIPO GRÁFICO.

PUESTO QUE, COMO YA HEMOS VISTO, TODO LO QUE SE PUEDE HACER CON UN GRÁFICO SE PUEDE HACER CON UN CLIP, VAMOS A CENTRARNOS EN LOS BITMAPS QUE FLASH NOS PERMITE IMPORTAR, YA QUE ESTÁN MUY EXTENDIDOS COMO FORMA DE EXPRESIÓN GRÁFICA A LO LARGO Y ANCHO DE LA RED.

     

SI CONSIDERAMOS LAS LIMITACIONES QUE YA CONOCEMOS SOBRE LOS MAPAS DE BITS PUEDE PARECER POCO INTERESANTE HACER USO DE ELLOS EN LA CREACIÓN DE BOTONES, PERO NO ES ASÍ.

    

  BÁSICAMENTE PODEMOS HACER DOS COSAS:

    

  1) INCLUIR EN CADA UNO DE LOS FOTOGRAMAS DEL BOTÓN UN BITMAP DISTINTO, OBTENIENDO UN EFECTO COMO EL QUE SE CONSIGUE CON LENGUAJES COMO JAVASCRIPT (SIEMPRE CONSIDERANDO LA MAYOR SENCILLEZ DE FLASH).

     

2) APROVECHAR LAS PROPIEDADES DE LOS GRÁFICOS EN FLASH. PARA ESTO, DEBERÍAMOS IMPORTAR PRIMERO EL BITMAP Y DESPUÉS CONVERTIRLO A SÍMBOLO BOTÓN. POSTERIORMENTE LO EDITARÍAMOS Y, DESPUÉS DE INSERTAR CADA FOTOGRAMA CLAVE, CONVERTIRÍAMOS SU CONTENIDO A SÍMBOLO GRÁFICO. UNA VEZ HECHO ESTO, VARIANDO LOS EFECTOS DE LAS INSTANCIAS EN FLASH (ALFA, TINTA, BRILLO) PODREMOS CONSEGUIR EFECTOS BASTANTE BUENOS.

2.1.5 ACCIONES

LAS ACCIONES SON FUNCIONES PREDEFINIDAS DE ACTIONSCRIPT, ES DECIR: FLASH 8 LAS CREA, Y NOSOTROS SÓLO TENEMOS QUE USARLAS DE LA MANERA QUE SE NOS INDICA. NO TENEMOS QUE DEFINIR LAS FUNCIONES NI NADA POR EL ESTILO, NI SIQUIERA NECESITAMOS SABER CÓMO ESTÁN HECHAS... LO IMPORTANTE ES QUE ESTÁN LISTAS PARA USAR, LO QUE FACILITA EL USO DE ESTE LENGUAJE DE PROGRAMACIÓN Y SOBRE TODO, HAGA MUY RÁPIDO COMENZAR A PROGRAMAR.

AL IGUAL QUE EN EL CASO ANTERIOR, EXPLICAREMOS LAS ACCIONES MÁS IMPORTANTES. PARA UNA REFERENCIA MÁS COMPLETA, RECOMENDAMOS MIRAR LA AYUDA DEL PROGRAMA.

DEFINIREMOS LAS ACCIONES ESCRIBIENDO SU CABECERA (NOMBRE + PARÁMETROS CON UN NOMBRE GENÉRICO) PARA DESPUÉS EXPLICAR QUÉ ES CADA PARÁMETRO.

 ACCIONES - CONTROL DE PELÍCULA

ESTAS ACCIONES SE EMPLEAN, COMO SU NOMBRE INDICA, PARA CONTROLAR EL FLUJO DE NUESTRA PELÍCULA, ESTO ES, PARA INDICAR A FLASH EN TODO MOMENTO QUÉ FOTOGRAMA TIENE QUE MOSTRAR, CUÁNDO TIENE QUE PARAR, DÓNDE SEGUIR ETC... VEÁMOSLAS Y LO ENTENDEREMOS MEJOR:

gotoAndPlay / goto: ESTA ACCIÓN SERÁ, PROBABLEMENTE LA QUE MÁS USES DURANTE LA REALIZACIÓN DE NUESTRAS PELÍCULAS. LA ACCIÓN QUE REALIZA CONSISTE EN MOVER LA CABEZA LECTORA AL FOTOGRAMA QUE LE INDIQUEMOS. LA CABEZA LECTORA ES LO QUE DETERMINA QUÉ FOTOGRAMA DE NUESTRA PELÍCULA SE ESTÁ REPRODUCIENDO EN CADA MOMENTO. SI, POR EJEMPLO, LO MOVEMOS DEL FOTOGRAMA 1 AL 25, LO QUE VEREMOS INSTANTÁNEAMENTE SERÁ EL FOTOGRAMA 25 Y LA PELÍCULA CONTINUARÁ REPRODUCIÉNDOSE A PARTIR DE AHÍ.

USO:

gotoAndPlay(escena, fotograma):

escena: Nombre de la escena a la que queremos enviar la cabeza lectora. Debe ir entre comillas dobles.

fotograma: Número o nombre del fotograma al que queremos enviar la cabeza lectora. Si es un nombre, debe ir entre comillas dobles, si es un número, NO.

EJEMPLO:

gotoAndPlay("Escena2", 7); --> Esta acción lleva la cabeza lectora al fotograma 7 de la escena llamada "Escena2".

Play: Da comienzo a la reproducción de la película, generalmente porque algo la ha detenido.

Uso:

Play();

No tiene Parámetros.

Stop: Detiene la reproducción de la película. Se puede usar en un fotograma, cuando queramos detenernos en él (porque es un menú, por ejemplo), en un botón, (para que detenga la película) etc...

Uso:

Stop();

No tiene Parámetros.

 Acciones - Navegador / Red

Estas acciones tiene diversas funciones, describimos las más importantes:

fscommand: Esta acción, es capaz de ejecutar ciertos comandos muy potentes. Lo más cómodo es pasar a Modo Básico (sino estábamos ya) e insertarla, nos aparecerá una pestaña con los posibles comandos que admite:

- fullscreen : Si se activa pone nuestra película a pantalla completa. Muy útil para presentaciones en CD-Rom, por ejemplo.

- allowscale: Controla el redimensionamiento de los objetos insertados en la película cuando el usuario estira los bordes de la misma (o de la página web en la que se encuentre) ¿Queremos mantener las proporciones? Este comando nos permite controlarlo.

- showmenú: Si has visto el menú que aparece al pulsar el botón derecho del ratón sobre una película Flash, seguro que has pensado en hacerlo desaparecer ... puede que no interese que los usuarios puedan moverse a sus anchas por nuestra película. Ejecutando esta sentencia del modo adecuado (false), podremos ocultarlo.

- trepallkeys: Sirve para detectar las pulsaciones de todas las teclas durante la reproducción de nuestras películas.

TODAS ESTAS ALTERNATIVAS, COMPARTEN MODO DE USO, VEÁMOSLO:

USO:

fscommand("comando","true / false")

comando: El comando a ejecutar (fullscreen, allowscale, etc...)

true / false: Aquí debemos escribir true o false, según queramos desactivar la opción o activarla.

Ejemplo:

fscommand("fullscreen", "true"); -> Activa la pantalla completa.

getURL: Esta acción se emplea para abrir el navegador web y abrir la página web que deseemos.

USO:

getURL(url , ventana , "variables")

url: Dirección web a la que queremos acceder (se abrirá una ventana).

ventana: Parámetro OPCIONAL. Modo en el que queremos abrir la ventana (en la ventana actual (_self) en otra nueva (_blank) etc...)

variables: Parámetro OPCIONAL, puede haber varios. Si la página lo permite (es ASP, PHP etc...) podemos enviarle variables.

EJEMPLO:

getURL("http://www.aulaclic.com", "_blank");

loadMovie / loadMovieNum: Esta acción permite cargar nuevas películas Flash o imágenes en nuestra película de forma dinámica (la película se cargará cuando se lo indiquemos, y no antes).

USO:

loadMovieNum(url , nivel / destino, variables)

url: Dirección absoluta donde está situada la película SWF o la imagen JPEG

nivel / destino: Nivel donde cargaremos la película, teniendo en cuenta que el nivel básico es el 0, luego va el 1 y así sucesivamente. Cada nivel superior se sitúa delante del anterior y toma el control. Si lo usamos como destino, aquí deberemos introducir el nombre del movieclip donde cargaremos la película o el nombre del marco si estamos cargando un fichero SWF en una página HTML con marcos.

variables: Parámetro OPCIONAL. Podemos enviar variables.

EJEMPLO:

loadMovieNum("MiPeli2.swf", 0) --> Cargamos la película "MiPeli2.swf" en el nivel principal. No enviamos variables.

 ACCIONES - CONDICIONES

ESTAS ACCIONES SIRVEN PARA CONTROLAR LA LÓGICA DE LA PELÍCULA. SE PUEDE DECIR QUE NOS PERMITEN "HABLAR" CON FLASH PARA INDICARLE LO QUE DEBE HACER ANTE DISTINTAS SITUACIONES. POR EJEMPLO, AHORA QUE CONOCEMOS MUCHAS ACCIONES, ¿CÓMO INDICARLE A FLASH QUE "SI LA VARIABLE X = 3, ENTONCES VAYA AL FOTOGRAMA 5, Y SINO, VAYA AL FOTOGRAMA 10"?. SABEMOS COMPARAR, SABEMOS IR A LOS FOTOGRAMAS, PERO NO SABEMOS DECIRLE A FLASH "SI PASA ESTO, HAZ UNA COSA, Y SINO, HAZ LA OTRA...". VEAMOS CÓMO DECÍRSELO:

if ... else: Si partimos de que la traducción literal de if es "si..." y la de else es "sino ...", nos encontramos de repente con todas las herramientas para decirle a Flash: "si (pasa una condicion) {haz esto} sino {haz lo otro}"

VEAMOS ANTES QUE NADA SU USO PARA COMPRENDERLO MEJOR:

Uso:

if (condición) {sentencias1 ... } else {sentencias2 ... }

if: Indica que acción que viene a continuación es una condicional

condicion: Indica una condicion que DEBE cumplirse para que sucedan las acciones indicadas en "sentencias1". Si éstas no se cumplen, entonces lo que sucede es lo especificado en las acciones indicadas en "sentencias2".

PARA QUE UNA CONDICIÓN SE CUMPLA, DEBE TENER COMO RESULTADO TRUE, O LO QUE ES LO MISMO, VERDADERO, O LO QUE ES LO MISMO, 1. DE AHÍ LA IMPORTANCIA DE LOS OPERADORES DE COMPARACIÓN Y EL VALOR QUE DEVUELVEN.

sentencias1: Conjunto de acciones que sucederán si la condición se evalúa como verdadera. Si hay más de 1, deben incluirse todas ENTRE LLAVES

else: Especifica la alternativa si condicion se evalúa a falso. Es OPTATIVO. Sino existe, y no se cumple la condición, no se hará nada, pues no lo hemos especificado.

sentencias2: Conjunto de acciones que sucederán si la condición se evalúa como falsa. Si hay más de 1, deben incluirse todas ENTRE LLAVES

Ejemplo:

if (x == 2) {gotoAndPlay(6); } --> Si la variable x vale 2, entonces saltamos al fotograma 2, sino, no hacemos nada

if (y > 7) { Stop(); } else {gotoAndPlay(1); } --> si la variable y es mayor que 7, paramos la película, sino, volvemos al fotograma 1.

2.1.6 INCLUIR SONIDO

SI NUESTRAS PÁGINAS VAN A TENER SONIDO, EL SONIDO EN LOS BOTONES ES UNA PARTE FUNDAMENTAL. PODEMOS HACER, POR EJEMPLO QUE SE ACTIVEN SONIDOS AL PULSAR UN BOTÓN.

     

PARA ELLO, SIMPLEMENTE DEBEMOS EDITAR NUESTRO BOTÓN Y SELECCIONAR EL FOTOGRAMA PRESIONADO. AHORA DEBEMOS INSERTAR EL SONIDO. POR EJEMPLO PODRÍAMOS IMPORTAR UNO DESDE NUESTRO DISCO DURO O BIEN TOMAR ALGUNO QUE YA TENGAMOS EN LA BIBLIOTECA.