En aquesta pràctica experimentareu amb el tercer grup de símbols que es poden crear amb Flash: els símbols de botó.
Els botons són símbols que, associats amb les accions del llenguatge ActionScript que incorpora el Flash, fan que les creacions esdevinguin interactives.
Els objectius d'aquesta pràctica són:
Editar botons ja creats, en context i fora de context.
Crear botons.
Estats dels botons
La línia del temps dels botons està dividida en quatre espais o fotogrames anomenats Estats.
Cada un d'aquests Estats pot incorporar un gràfic o text:
Reposo. En aquest espai s'hi posa la imatge o el text que es visualitza quan el botó no realitza cap acció.
Sobre. En aquest espai s'hi posa la imatge o el text que es visualitza quan el ratolí passa per damunt del botó.
Presionado. En aquest espai s'hi posa la imatge o el text que es visualitza quan es prem el botó principal del ratolí al damunt.
Zona activa. En aquest espai s'hi posa una imatge que marqui les dimensions i posició de la zona sensible que activarà el botó.
Biblioteques comunes de botons
Les Biblioteques comunes de botons són un conjunt de botons predissenyats que estan inclosos dins del programa Flash.
» Activeu el menú Ventanas | Otros paneles | Bibliotecas comunes | Botones per obrir el panell de les biblioteques comunes.
Desenvolupament
de la pràctica
Podeu crear un botó igual que qualsevol altre símbol, és a dir, a partir d'un element que ja estigui a l'escenari, com per exemple un gràfic, o també el podem crear totalment de nou.
» Creeu un document nou i deseu-lo amb el nom de botons.
» Aneu al menú Insertar | Nuevo símbolo i s'obrirà el panell Crear nuevo símbolo .
» Escriviu boto01 a l'apartat Nombre i trieu Botón per al Comportamiento.
» Feu clic a Aceptar.
S'obrirà l'àrea de treball corresponent als botons.
Observeu que hi ha el capçal lector al mig del fotograma Reposo: està indicant que és aquesta l'àrea de treball on esteu situats.
» Dibuixeu un cercle de color verd dins de l'àrea de treball de l'estat Reposo. Amb el panell Alinear, situeu-lo al centre de l'escenari.
» Premeu la tecla F6 per inserir un Fotograma clave en l'estat Sobre.
• Observeu que quan s'insereix un fotograma clau aquest és idèntic a l'anterior; per això el cercle verd del fotograma Reposo es repeteix en el fotograma Sobre.
» Amb l'eina Cubo de pintura canvieu el color verd del cercle del fotograma Sobre pel color vermell.
» Premeu la tecla F6 per inserir un Fotograma clave en l'estat Presionado.
» Amb l'eina Cubo de pintura canvieu el color vermell del cercle del fotograma Presionado pel color blau.
» Premeu la tecla F6 per inserir un Fotograma clave en l'estat Zona activa.
• El cercle de la Zona activa el podeu posar d'un color gris. Aquest fotograma assenyala la zona en què el botó serà sensible tot i que no és visible quan es publica la pel·lícula. No obstant, no es pot deixar buit en cap cas perquè és molt important, com veurem a la propera pràctica.
» Deseu la pel·lícula però no la tanqueu: hi seguireu treballant. Així, en cas d'un error, sempre la podreu recuperar des d'aquest punt.
• De vegades us haureu trobat amb textos que funcionen com a botons o amb imatges que tenen zones interactives. Tot seguit realitzareu dos tipus de botons que, de ben segur, fareu servir quan creeu futurs materials pel vostre compte: botons de text i botons transparents.
Creació de botons de text
» Aneu al menú Insertar | Nuevo símbolo o premeu la combinació de tecles Ctrl+F8 i s'obrirà el panell Crear nuevo símbolo .
» Escriviu boto02 a l'apartat Nombre i trieu Botón per al Comportamiento.
» Feu clic a Aceptar.
» Seleccioneu l'eina Texto, indiqueu el tipus de lletra Arial de mida 40 i escriviu la paraula Rectángulo dins de l'àrea de treball de l'estat Reposo. Amb el panell Alinear, situeu-la al centre de l'escenari.
» Cliqueu sobre el fotograma Activo i premeu la tecla F6 per inserir un fotograma clau en aquest estat. Observeu que s'ha copiat la paraula anterior.
» Torneu a la línia de temps principal de l'escenari: feu clic a la icona Escena 1 o a la fletxa blava.
» Ja heu creat un botó de text. Ara, arrossegueu una instància d'aquest botó a l'escenari i proveu la pel·lícula: premeu Ctrl+Retorn i observeu com es visualitza el botó.
» Moveu el ratolí per sobre del text i comproveu com la mà que ens indica que el cursor està passant per sobre d'un botó apareix i desapareix segons si està a sobre de la línia d'una lletra o a fora.
• Això passa perquè no hem indicat la zona sensible del botó. Aquesta és una errada típica de quan dissenyem un botó de text i pot complicar molt la navegació. La solució és molt senzilla.
» Creeu un altre botó repetint tots els passos que heu fet per crear el botó anterior però posant el nom de boto03. Recordeu que no podeu tenir dos símbols amb el mateix nom.
» Després de crear el fotograma clau a la Zona activa, activeu l'eina Rectángulo i dibuixeu un rectangle sense traç que tapi totalment el text.
» Torneu a la línia de temps principal de l'escenari: feu clic a la icona Escena 1 o a la fletxa blava.
» Arrossegueu una instància d'aquest botó a l'escenari i observeu com es visualitza. Premeu Ctrl+Retorn per provar la pel·lícula.
» Moveu el ratolí per sobre dels dos botons i comproveu-ne la diferència.
» Deseu la pel·lícula.
Creació de botons transparents
• Ara aprendreu a crear zones interactives amb botons transparents.
» Obriu el fitxer cicle_aigua4.fla que heu treballat en la pràctica anterior i deseu-lo amb el nom de cicle_aigua4_boto.fla.
» Assegureu-vos de tenir totes les capes bloquejades.
» Creeu una capa nova per sobre de la del sol i anomeneu-la boto_sol.
» Amb l'eina Óvalo, dibuixeu un cercle que tapi el dibuix del Sol. Podeu triar qualsevol color sòlid.
» Seleccioneu el cercle que heu dibuixat i activeu el menú Modificar | Convertir en símbolo o premeu la tecla F8.
» Anomeneu-lo boto_sol i feu clic a Aceptar.
» Feu doble clic al botó de l'escenari per editar-lo en context.
» Seleccioneu de nou el cercle que hi ha a l'estat Reposo i retalleu-lo: activeu el menú Editar | Cortar o premeu Ctrl+X
» Inseriu un Fotograma clave ( F6 ) a l'estat Sobre.
» Seleccioneu l'eina Texto i copieu el text L'escalfor del sol evapora l'aigua del mar a l'espai situat entre el sol i el mar.
» Feu un clic al rectangle corresponent al fotograma de la Zona activa i inseriu un fotograma clave vacio o premeu la tecla F7.
» Activeu el menú Edición | Pegar in situ per enganxar el cercle que heu retallat abans o premeu la combinació de tecles Ctrl+Majúscules+V.
» Sortiu de la línia de temps del botó fent clic a la icona Escena 1 o a la fletxa blava. Fixeu-vos que on hi ha el cercle del botó apareix una zona blavosa: és la forma en què Flash us indica que hi ha un botó transparent. Quan publiqueu la pel·lícula el botó no es veurà perquè no hi ha res a l'estat Reposo.
» Comproveu com es visualitza prement Ctrl+Retorn.
• S'ha de veure més o menys així:
» Moveu el ratolí per sobre del Sol per comprovar com el cursor es converteix en una mà i apareix el text que heu indicat a l'estat Sobre.
