BOTONERA EN FLASH

Supongamos que poseemos un conjunto de archivos que contienen diferentes temas de nuestro sitio web, y queremos enlazarlos mediante una botonera en Macromedia Flash como la siguiente:

Creación del archivo Flash

Antes que nada hay que tener claro de que tamañao v a a ser nuestra botonera, es decir cuanto espacio va a ocupar en la página web donde se le colocará. Se deberá además tener claro el diseño que vamos a ocupar (colores, formas, tipografía) y los textos que vamos a utilizar.

Una vez claro esto abrimos Flash, y modificamos las propiedades del documento (menú Insertar, opción documento). Para nuestro caso vamos definir el tamaño de la animación en 150 pixeles por 400 px.


Tomaremos la herramienta círculo y dibujaremos una elipse como la de la figura:

Con la herrmienta flecha seleccionaremos la elipse haciendo doble click, y la convertiremos en símbolo (menú modificar, convertir a símbolo; o F8). Bautizaremos el símbolo como inicio (u otro nombre que convenga) y el comportamiento del símbolo será del tipo botón.




Abrimos la biblioteca (menú Ventana, Biblioteca o F11 o Ctrl+L

Vamos ahora a modificar el botón, para lo cual haremos doble click sobre el ícono que lo representa en la ventana bibioteca.




Cambiaremos el color de border (en nuestro ejemplo plomo) y el relleno a un degradado radial.

En el ejemplo hemos tomado el degradado radial compuesto por negro y azul. Pero que modificaremos mediante el Mezclador de colores que podemos hacer aparecer mediante el menú Ventana, Mezclador de colores.

Tomaremos el tarrito del extremo izquierdo del degradado (1), luego cambiaremos dicho color a blanco (2). De la misma forma procederemos con el tarrito del extremo derecho del degradado (3).


Tomaremos ahora la herramienta de transformación de relleno y lo modificaremos de manera que quede como en segundo de los siguientes dibujos:

Insertemos ahora un fotograma clave en el estado sobre.

Selecccionemos el relleno de la elipse correspondiente al nuevo fotograma clave y modifiquémoslo a través del Mezclador de Color.


Una vez hechos los cambios, volvamos a la escena, mediante el vínculo Escena 1 (1) o la plaqueta (2).

De vuelta en la escena vamos a centrar horizontalmente el botón, seleccionandolo y usando el panel Alineamiento (Ventana, Alinear)

A estas alturas ya sería bueno guardar nuestro archivo, por si tuviésmos cualquier traspié que nos haga perder nuestro trabajo.

Vamos ahora a insertar un texto sobre el botón. Seleccionamos la Herramienta de Texto . Pondremos cuidado en que en las propiedades de texto, esté seleecionado Texto Estático.

Además elejimos un color adecuado para que se vizualice sobre nuetro botón. Escribimos el texto que nos interesa. Luego cambiamos el tamaño de texto y tipografría.

Para asegurarnos de que el texto quede centrado con relación al botón podemos, verificar que la opción ajustar objetos en el menú Ver esté activada (con ticket) y luego tomamos el texto desde su centro geométrico y lo hacemos coincidir con el centro del botón. Al estar activada la opción ajustar objetos estos automáticamente se solapan.

Para hacer el resto de los botones arrastramos el botón hasta la escena y luego escribimos el texto que requerimos.

   

Viene ahora el proceso de hacer que los botones nos conecten con las páginas de nuestro sitio. Para ello nos ubicaremos sobre el primer botón (hay que tener cuidado de seleccionar el botón y no el texto), presionaremos el botón derecho del mouse y seleccionaremos con el botón izquierdo la opción Acciones. En la catregoría Acciones, buscaremos la subcategoría Navegadro de Red, y dentro de ella haremos doble click sobre la acción getURL.

En la ventana de parámetros en el campo URL colocaremos la dirección del documento que queremos abrir. En nuestro caso linkearemos el archivo index.htm, que corresponde a la página de inicio de nuestro sitio web. El resto de los parámetros los dejaremos con su valor por defecto.

Procederemos de las misma manera con el resto de los botones, conectándolos con la pagina o docuemnto correspondiente.

Insertando la botonera en las páginas del sitio

Una vez terminado el archivo porcederemos a crear el archivo SWF que es el que se inserta en las páginas del sitio. Par ello vamos al menú Archivo, Exportar Película. En la ventana de diálogo indicamos la ruta, escribimos nombre y elegimos como tipo de archivo Película Flash. La ruta debería ser la misma ubicación donde tenemos las páginas de nuestros sitio

Una vez hecho esto editamos las páginas de nuestro sitio con el Dream Weaver e insertamos la película en forma similar a como se inserta una imagen JPG o GIF, pero se hace mediante el botón de insertar Flash . Se indica la ruta y el nombre del archivo.

Película con Fondo Transparente (só visualizable en Internet Explorer)

Si deseamos que el fondo de nuestra película sea transparente, deberemos seguri los siguientes pasos: Ir al menú Archivo, Opciones de Publicación.

Asegurarse de que en la pestaña Formatos, este seleccionado SWF y HTML

En en apartado HTML en parámetro Modo de Ventana, Elegir Transparente, sin marcos y luego presionar el botón publicar.

En el Dream Weaver abrir el archivo HTML que se generó en la carpeta donde tenemos nuestro archivo fuente, y copiamos el código que va desde la etiqueta hasta . Luego pegar ese código en nuestras páginas.