Aprende cmo hacer los botones y cmo darle vida a todos los componentes de este pro yecto.

Por Susana Ros Suanes Atencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. Este es el tercer captulo de una serie para crear mapas interactivo en Flash. Te hemos explicado como empezar y cmo obtener los materiales en el artculo Armar el m apa interactivo. Ahora vamos a continuar haciendo una serie de botones para dar colorido a vuestr o mapa. 8) Hacer los botones encargados de pintar doce colores distintos. Hay que hacer cada botn sobre la marcha. Como pueden ver en la Carpeta de colores de la biblioteca, que mostramos en la imagen del fin de esta pgina, los botones se llaman simplemente, 1, 2, 3, .......12. Vamos a hacer el botn 1: con el ratn Insertar -> Nuevo smbolo Tipo botn Nombre 1 Esta vez nos da la lnea del tiempo del botn 1 con sus cuatro fotogramas. Solo el fotograma Reposo es fotograma clave. Pero en este caso, la figura va a s er idntica en Reposo, Presionado y Zona activa y como, mientras estos fotogramas no sean clave, la figura se repetir en todos los fotogramas, me ubico en el prime r fotograma. En el panel de las herramientas elijo el cuadrado, con el color negro para el bo rde, y de la paleta que Windows me ofrece elijo el color #FFCC33. Me aseguro al dibujar, tener presente el panel de propiedades. Dibujo el cuadrad o y ajusto las medidas y coordenadas en el panel. El cuadrado debe medir 20 px por 20 px y la coordenas x y sern ambas 10. Recin entonces, voy a los otros fotogramas y los convierto en fotogramas claves. Quiero hacer una pequea reforma en el escenario del fotograma Sobre. Selecciono el cuadradito y cambio la altura a 40. la coordenada x sigue igual. L a coordenada y pasa a ser 30, para ver al pasar el ratn que aumenta su altura, com o una brocha que sube. Nada ms, Escena para salir. El botn ya est en la biblioteca. Y por supuesto deben t ener apuntado el color que va a pintar botn 1 para cuando escriban la funcin. La funcin la escriben en Accin del fotograma de la lnea del tiempo de la capa tarje tas enlaces colores que es donde estamos trabajando, mientras tenemos las otras capas cerradas con candado. La funcin es muy clara: Se llama se llama function pintar ( ) porque explica que es lo que hay que hacer ante la orden de pintar( ); Cuando queremos establecer un color hay que darle un nombre al nuevo color y aqu lo llamamos Color_Panel. Adems se aclara donde se va a colorear: en un pas determinado por esos botoncitos que ya has probado en ASIA.swf pero que todava no tenemos. Color_Panel = new Color(_root.pais); switch (numero) { switch es un condicional. En este caso la traduccin de switch es llave como por e jemplo las que usamos para prender la luz. Tenemos muchas llaves en casa, pero s egn la llave que pulses, se prender tal o cual lamparilla. Aqu se trata de pulsar u n botn entre 12 que tenemos. Case Y como sabemos la diferencia entre esos botones? Para eso est case. Case especifica las diferencias entre las distintas posibilidades del switch. Si se trata de querer el color #FFCC33 hay que pulsar botn 1. Al escribir un cdigo debemos cambiar # por 0x es as que por ejemplo el color #FFCC 33 en el cdigo debe escribirse 0xFFCC33 Cuando tengas todos los botoncitos, ponemos a cada uno su accin, as despus los junt as hasta crear una paleta que agrupars con Modificar ->Agrupar para que despus pue das moverlos a todos juntos al lugar que ms te guste, cuando disees la presentacin de esta aplicacin. Para todos los botones de pintar, el cdigo es el mismo, solo cambia el nmero segn e l nombre del botn. Creo que debo haber explicado ms o menos bien. Cualquier problema no dejen de pre

guntar La Capa Taller se elimina al final. Es una capa creada para hacer los grficos, te niendo a salvo las dems capas invisibles y con candado. Ahora viene la parte ms comprometedora, y final, as que pueden bajar arbigos _6.fla que es la aplicacin completa que explico a continuacin: http://www.delphi.todouy.com/ASIA/arabigos_6.fla 9) Los botones de control Como estn mirando el fla no necesitamos imgenes. Hasta ahora en la Lnea del tiempo, en cada Capa haba solo un fotograma, porque all todo era esttico. No pasaba nada. Pero ahora comienza la actividad. Creamos la capa botones arriba de todas las de ms. Las otras capas con candado. Seleccionas con el ratn el primer fotograma y en el panel de acciones, escribes l a accin para que vuelva invisibles a todos los botones link que estn en el escenar io. Copia la accin de arabigos_6.fla Luego vas al segundo fotograma y en el panel de acciones escribes: gotoAndPlay(1 ); Botoncitos controles. Primeo hacemos un grfico que sirva de base a los nueve botoncitos que debemos cre ar. Con la herramienta valo y el panel Propiedades para ajustar las medidas hacemos u n crculo de 6 pxeles de dimetro, con un borde negro, trazo de ancho dos, y fondo ve rde. Lo convertimos en grfico: Como es el fondo de los nueve botones, lo llamar fb (por fondo botn) Lo seleccionamos y Modificar -> Convertir en smbolo -> Tipo Grfico Nombre fb . Para Arabia: selecciono el grfico y Modificar ->Convertir en smbolo ->Tipo botn Nombre bot_Arabi a El botn ya est en la biblioteca, lo borramos del escenario, para llamar de nuevo a fb y hacer otro botn. Los botoncitos todava no estn prontos. Para terminarlos hay que editarlos. Ejemplo: En la biblioteca vamos con el ratn a bot_Arabia con el botn derecho del ratn baja u n men y selecciono Edicin. Estando en edicin vamos al fotograma Sobre y lo convertimos en fotograma clave. Recuerda que lo que pretendemos es que al pasar sobre el botn nos d el nombre del pas. Vamos al fotograma Sobre, lo convertimos en fotograma clave y un poquito ms a rriba que el grfico fb escribimos Arabia Saudita. En el caso de Jordania, pusimos el nombre abajo, porque arriba nos tapaba los ot ros enlaces. Adems todos los nombres van sobre un rectngulo blanco. Despus terminas de convertir en fotogramas claves los otros dos: Reposo y Zona ac tiva. Antes de pulsar Escena para irte, repasa que el nombre recin escrito, est en los lt imos tres fotogramas, pero que no est en el primer fotograma. Escribimos los nombres correctos, copindolos de Wikipedia: Arabia Saudita, Emiratos rabes Unidos, Irak, Israel, Jordania, Lbano, Omn, Siria, Y emen. Sabemos que al final todos los pases sern blancos, pero por ahora nos conviene que tengan color, para no equivocarnos. En la carpeta Pases podemos fijarnos cual es la forma y el color de determinado pas. Cuidar que solo la capa botones est sin candado. Ubicar sobre cada pas el botn corr espondiente. La accin de los botoncitos: Como ejemplo con el panel acciones a la vista, seleccionas el botoncito bot_Arab ia. Todos tienen el mismo esquema pero adaptando en cada caso. Aqu se trata de Arabia. Las tres ltimas lneas marcan la diferencia. La lnea 10, aclara que se trata de Arabia, el lugar que hay que pintar. La lnea 11, dice que el clip informes debe ir al lugar 2 porque all est la tarjeta

sobre Arabia. ATENCIN esta lnea no funcionaba, porque ah dice informe en singular, falta la s final. Ya la arregl y les cont mi error porque es frecuente. La lnea 12, hace visible el enlace. Hay que arreglar esto para cada pas. Aparte de estas tres lneas debes asegurar que todos los otros links queden invisibles. En el fotograma 2 de la capa tarjeta, enlaces y colores hay que poner la accin st op(); porque si falta no funcionan los enlaces. Todo lo involucrado en acciones debe figurar en el panel de Propiedades y con el nombre exactamente igual. Por ejemplo cuidado con los acentos. Si en el panel d e Propiedades pones link_Oman no va a funcionar porque te olvidaste del acento. http://www.delphi.todouy.com/ASIA/arabigos_6.fla para bajar y estudiar. Pintar de blanco los pases. Dejas libre de candado, solo la capa pais arriba, y pulsando el dibujito del ojo que est sobre la lnea del tiempo permites que se vea solamente esos pases. Entonces, los vas seleccionando de a uno, y en el Panel de Propiedades, Color ->Tinta ->blanco en la paleta de colores. Y para cada pais abajo, repites lo mismo Me gustara que te animaras a presentarnos, algo por el estilo sobre tu pas, depart amento o provincia. Puedes inventar variaciones, como que sea un test, que pinte , solamente si el usuario sabe la Capital, o que en vez de tarjetas muestre foto s. En fin, nos encantara ayudar en nuevas ideas. Consulta sobre cualquier duda.