Llegó el turno de crear la botonera que nos permitirá navegar a través del sitio.
Vamos a la escena uno (Portada) y pongamos candado a la capa donde están las letras para no pasarlas a llevar. A continuación crea una capa nueva y procederemos a insertar los botones en ella.
Ahora, para hacer los botones puedes utilizar el método que aprendimos en el tutorial anterior o, si prefieres abocarte sólo a la creación del sitio, también está la opción de tomar botones prediseñados desde las bibliotecas comunes de Flash. Para esto:
Si usas Flash 8, iremos al menú:
Ventana > Bibliotecas Comunes > Botones : Botones Clásicos : Óvalos
Si usas Flash MX 2004 ó MX:
Ventana > Otros Paneles > Bibliotecas Comunes > Botones : Óvalos
Desde allí, arrastra al escenario una instancia de los botones azul, rojo y verde (uno para cada sección), más el botón amarillo (que nos llevará de regreso a la portada). Sólo como referencia, copiando las instancias sus respectivos símbolos se agregarán también en nuestra biblioteca. Una vez finalizado, puedes cerrar las bibliotecas comunes.
NOTA: Las bibliotecas comunes son excelentes para conseguir botones y otros elementos con rapidez, sin embargo no recurras a ellas cuando se trate de un trabajo profesional. Se reconocen de inmediato.
Ordena los botones en el lado derecho de la escena (exactamente, el que dejamos desocupado). Puedes desplegarla con precisión paranoica usando el panel Alinear, disponible desde el menú Ventana. Procura seguir el mismo orden de las secciones: amarillo, rojo, verde y azul.
Estupendo. Ahora necesitamos hacer que cada botón nos lleve a su sección correspondiente. Para ello usaremos un procedimiento similar al del tutorial anterior, con algunas ligeras diferencias...
Selecciona el primer botón (amarillo). Pulsa F9 para abrir el panel de acciones y escribe el siguiente código:
on (release) {
gotoAndStop("Escena 1", 1);
}
La explicación de esto es que cuando el usuario (on) pulse el botón y lo suelte (release), Flash irá y detendrá la película (gotoAndStop) en la Escena 1, fotograma 1. Más claro echarle agua, ¿no?
Pulsemos F9 para ocultar el panel, seleccionemos el botón siguiente (rojo) y volvamos a abrir el panel. El código es casi idéntico... pero casi:
on (release) {
gotoAndStop("Escena 2", 1);
}
Como verán, lo único que hacemos es ordenarle a Flash que esta vez nos lleve al fotograma 1 pero de la Escena 2... donde 'casualmente' está la sección roja. Repitamos la operación con el botón verde llevándonos a Escena 3 y el azul a Escena 4.
NOTA: Si tienes Flash en inglés es probable que los nombres de las escenas sean "Scene 1", "Scene 2" y así en adelante. Verifícalo en el botón de Escenas antes de escribir el código.
¿Me pueden creer que esto es todo lo que necesitamos? O bueno, casi. Pulsen CTRL+ENTER para previsualizar y notarán un pequeño problema... ¡nuestro sitio Web da vueltas como loco!
La explicación: dado que Flash es un programa de animaciones, asume que deseamos ejecutarlo como tal y va de un fotograma a otro para luego reiniciar hasta el infinito (y más allá). Tenemos que ponerle un alto a la situación, y es justamente lo que vamos a hacer.
Cierra la previsualización y ve a la Escena 1 (Portada). Selecciona el primer – y único – fotograma clave en la capa donde están los textos. Ahora abre el panel de acciones con F9 y escribe esta instrucción:
stop();
Sobra decirles qué significa, ¿verdad? Los paréntesis y el punto y coma son, aunque imprescindibles, sólo formalidades del lenguaje.
Prueben nuevamente con CTRL+ENTER y se darán cuenta que esta vez no sólo nos detenemos en la portada, sino que podemos ir cómodamente a cualquier sección del sitio... con un sólo pero (siempre tiene que haber uno): no podemos navegar entre ellas ni regresar a la portada.