La utilización de flash en los sitios WEB casi siempre proveerá de una interfaz más animada, sin embargo está directamente relacionado el peso del archivo flash con la carga del sitio.
En el caso de nuestros botones con efecto hoja hemos tratado de diseñarlos lo más liviano posible sin embargo obligadamente cargaremos nuestro al menos un poco nuestro sitio |
La ventaja frente a esto es que cada vez el ancho de banda que nos otorgan nuestros ISP's es mayor y el archivo flash se hace casi imperceptible.
- En este caso utilizaremos netamente:
- Adobe Flash CS3 Professional
En el Workspace por defecto debemos crear 3 capas con 1 frame cada una. La capa clave es la 1, sin embargo mencionamos a continuación que función cumplen las otras capas.
En la capa 3 tenemos el fondo en donde se mostrarán los botones, se podrá cambiar o quitar el fondo de acuerdo a nuestras necesidades, en la parte inferior están los fuentes listos a descargar.
En la capa 3 tenemos el fondo en donde se mostrarán los botones, se podrá cambiar o quitar el fondo de acuerdo a nuestras necesidades, en la parte inferior están los fuentes listos a descargar.
En la capa 2 nos sirve para añadir un mensaje que en el caso del ejemplo hace referencia a "Capacitación en Seguridad y TICS - CAYTICS", como lo supondrán también pueden modificar el mensaje o borrarlo al momento de aplicarlo en sus sitios. Ahora, si creen que este manual o alguno de los publicados en CAYTICS ha sido de su utilidad podrían enlazarnos desde sus sitios.
En la capa 1 están las animaciones de cada botón. Tenemos 10 capas pero 7 botones, esto es así porque las capas adicionales sirven para lineas, trazos, etc. Vamos a visualizar una de las capas dado que esto se repetirá para todos los botones que deseemos añadir.
Para uno de los botones tenemos la siguiente estructura:
Es necesario que descarguen los fuentes para poder evidenciar la estructura que tiene los botones junto con la funcionalidad que ofrecen, con el análisis de los fuentes será mucho más clara la redacción que aquí se realiza. Cada uno de los botones se enlaca a un URL en una ventana nueva. Para el caso del botón que revisamos el código es el siguiente:
onClipEvent (load)
{
num = 1;
this.ti1.gotoAndStop(num);
this.ti2.gotoAndStop(num);
}
on (rollOver)
{
this.gotoAndPlay("s1");
this.swapDepths(_root.maxdepth + 1);
}
on (rollOut)
{
this.gotoAndPlay("s2");
}
on (release)
{
_root.animation = 0;
_root.link_prev = _root.link;
_parent["item" + _root.link].gotoAndPlay("s2");
_root.link = num;
_root.play();
_root.getURL("http://www.caytics.com.ec/", "_blank");
}
Los botones tienen la siguiente apariencia con sin fondo:
Con fondo negro como se encuentra el DEMO, los botones tienen la siguiente apariencia, les recomiendo visualizarlo:
Retornar al INICIO Visualizar DEMO Descargar Fuentes
También te recomendados
Galería de Imágenes en FLASHClic en en enlace: Clic aquí
No hay comentarios:
Publicar un comentario