Moderador del foro: ZorG  
Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Menús (escribimos aquí sobre la cosa)
Menús
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 1 | 5:28 PM
Menús desplegables. Más problemas que soluciones

Resumen: Los menús desplegables pueden parecer una buena solución para utilizar muy poco espacio para las categorías que estructuran un sitio web. Sin embargo son difíciles de utilizar, ocultan información, pueden dispersar la atención del usuario e, incluso, impedirle la navegación.

Menús desplegables
Los menús desplegables se pensaron para utilizarse en los formularios, lugar donde cumplen su función con eficacia. Sin embargo, muchos diseñadores, llevados por un ansia de ofrecer más contenidos en menos espacio, pensaron que unos cuantos menús desplegables les solucionarían el problema de disponer de una única pantalla de inicio para ofrecer las opciones principales. Así, en lugar de seleccionar las opciones realmente importantes se ponen todas y un problema solucionado. Pues no, error, ya que así se crea un problema adicional en lugar de solucionarlo.


- Desplegables de crackmanworld.com –

En otros casos, se fue más allá y, en lugar de utilizar el desplegable estándar, el típico de los formularios, se programó pequeños scripts para conseguir el efecto de un desplegable en cascada, con uno o incluso más niveles desplegables. Problema resuelto, pensaron, podemos poner absolutamente todas las opciones de navegación del sitio en un reducido espacio. Pero no pensaron en que las interfaces quienes las usan son los usuarios, no los diseñadores y que, por lo tanto:

• Un usuario no sabe, a priori, qué opciones hay en el desplegable de turno, hasta que utiliza el ratón para descubrirlo.
• No todos los usuarios tienen la suficiente habilidad psicomotriz para manejar un desplegable con soltura. Sí, sí, los hay, incluso hay personas con un mal pulso o con poca práctica en utilizar el endiablado ratón (¿recuerdas las primeras horas intentando usarlo?). También hay colectivos, como las personas mayores, que suelen padecer ciertos problemas psicomotrices, suficientes como para que el ratón les parezca una herramienta compleja. Además, suelen ser personas sin experiencia previa en el manejo de dispositivos de este tipo.
• Es mejor que las opciones disponibles se puedan ver de un vistazo, sin tener que ir tocando con el ratón varios desplegables hasta encontrar lo que se buscaba. En ocasiones, el enlace sólo funciona pulsando alguna de las opciones desplegables, pero no en el item que las encabeza, lo que desconcierta aún más.
• Excesivas opciones desvían la atención de las realmente importantes.
• Además, los desplegables en cascada que hacen algunos diseñadores no parecen desplegables, con lo que las opciones que contienen suelen pasar desapercibidas a un usuario que no se imagina que ahí no hay un enlace, sino múltiples.
• En determinados formularios de introducción de datos pueden llegar a ser realmente desconcertantes los menús interactivos, esos que cambian sus valores en función de lo que el usuario haga en determinadas partes de la pantalla.
• En muchos casos, esos scripts no son compatibles con todas las configuraciones de usuario, con lo que, para eos casos, el problema pasa a ser muy grave: impedimos totalmente al usuario navegar en nuestras páginas. Justo lo contrario de lo deseable ¿no?.

Menús no desplegables y en forma de directorio
Ya se ha analizado tres formas de disponer los elementos de menú en la pantalla:

• Uno era mediante un índice de categorías y subcategorías en el centro de la pantalla; ése es el caso del típico índice de Yahoo hasta hace poco (ahora parece desaparecido en favor del buscador), o el directorio de Google y similares.


- Directorio de Google –

• En otro caso se utilizaba un desplegable en cascada dispuesto horizontalmente


- Menú desplegable en cascada –

• En un tercer caso, el menú desplegable se disponía verticalmente en la parte de la izquierda de la pantalla.


- Menú vertical en la izquierda –

Los resultados de dicho experimento mostraban que los usuarios terminaban mucho antes las tareas encomendadas usando el índice de categorías que con cualquiera de los otros dos sistemas.

Además, los usuarios participantes en el estudio indicaban expresamente preferir la navegación mediante el índice de categorías a los otros dos modos.

Con el desplegable horizontal tuvieron problemas incluso para identificarlo, al ubicarse en la parte superior de la pantalla. Tal vez ese problema obedezca al famoso fenómeno de ceguera a los banners.

Recomendaciones para hacer un buen menú:
Los desplegables, como ya hemos visto, mejor no utilizarlos.

• Si no tienes más remedio que hacer un menú desplegable (aunque, salvo capricho del cliente no parece haber una razón lo suficientemente buena para hacerlo), asegúrate de que no dejarás ciego al usuario si no dispone de javascript.
• Lo mejor es no colocar seguidos más de 5 item, 7 como máximo (nos cuesta memorizar más de 5 elementos). Siempre podemos recurrir a usar elementos de separación visuales entre bloques de 5 ó 7 elementos.
• Habrá que recurrir a los bullets si algún item requiere de dos líneas.
• Seleccionar las categorías realmente importantes para que aparezcan en la página web.
• Si no parece fácil elegir las categorías más importantes y su jerarquía relativa puedes recurrir al card sorting, te ayudará a pensar las categorías del sitio y a jerarquizar tus menús.
• Si realmente hemos de gestionar finalmente una gran cantidad de categorías, lo mejor es recurrir a un índice de categorías (o directorio) en el centro de la página y la ayuda de un buscador.

En definitiva, si tienes bastantes categorías que gestionar y puedes usar un índice central de categorías, no te compliques la vida buscando formas originales y epatantes de mostrar las opciones de navegación con multidesplegables, sólo lograrías hacerle la vida más difícil a tus usuarios.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 2 | 6:52 PM
Menú en Flash dinámico de selección con Clases

Se me ocurrió armar un menú o lista dinámica el cual usa dos clases, una para los botones y otra para la lista.
Mi idea era poder crear un menú rápidamente en flash pudiendo indicarle si queremos que sea horizontal, vertical o que tenga varias columnas. (como en el caso de mi “minifolio” donde las miniaturas de mis trabajos están en varias columnas).

Clase Boton:

Quote
/*
La funcion boton asigna los eventos de rollover y rollout automaticamente
y tiene los metodos para habilitaro deshabilitar al boton. Ademas tenemos la opcion de darle al boton un estado de seleccioando
*/
class Boton extends MovieClip {
// Primero definimos las variables que usaremos dentro de la clase
public function click() {
}
// generamos una funcion click que sera un metodo donde asignaremos la accion del boton
var press:Boolean;
// variable booleana que define si el boton tiene o no un estado seleccionado
var pos:Number;
// variable donde guardaremos la posicion dentro de la lista que tiene el boton
/*
funcion constructora de la clase. En esta funcion asignamos los eventos del boton
*/
public function Boton() {
//en onPress asignamos la funcion click que dira que hacer y en en caso de tener estado seleccionado vamos al mismo y deshabilitamos el boton
this.onPress = function() {
this.click();
if (this.press == true) {
this.presionado(true);
_global.seleccionado.presionado(false);
_global.seleccionado = this;
}
};
// en onRollOver dirigimos el cabezal del boton al frame llamado "over" para generar el efecto
this.onRollOver = function() {
this.gotoAndPlay("over");
};
// en onRollOut dirigimos el cabezal del boton al frame llamado "out" para generar el efecto
this.onRollOut = this.onReleaseOutside=function () {
this.gotoAndPlay("out");
};
}
/*
METODOS:
esta es una function privada que lleva a cabo el efecto del boton al ser seleccionado y al dejar de estarlo
*/
private function presionado(estado:Boolean):Void {
if (estado == true) {
this.gotoAndPlay("press");
this.enabled = false;
} else {
this.enabled = true;
this.gotoAndPlay("pressout");
}
}
/*
SETTERS Y GETTERS:
habilitado es un metodo set y get que habilita y deshabilita segun su valor booleano al boton, con un efecto de alpha sobre el boton
*/
public function set _habilitado(estado:Boolean):Void {
if (estado == false) {
this.gotoAndPlay("out");
this.onEnterFrame = function() {
if (this._alpha>50) {
this._alpha -= 5;
} else {
this.onEnterFrame = null;
this.enabled = estado;
}
};
} else if (estado == true) {
this.onEnterFrame = function() {
if (this._alpha<100) {
this._alpha += 5;
} else {
this.onEnterFrame = null;
this.enabled = estado;
}
};
}
}
public function get _habilitado():Boolean {
return this.enabled;
}
// metodos set y get de _press que asigana si el boton tiene estado de seleccionado o no
public function set _press(estado:Boolean) {
this.press = estado;
}
public function get _press():Boolean {
return this.press;
}
// metodos set y get de _pos que nos guarda y asigna la posicion en la lista del boton
public function set _pos(valor:Number) {
this.pos = valor;
}
public function get _pos():Number {
return this.pos;
}
}
// fin clase Boton

Clase Lista:

Quote
/*
Esta clase se encargara de crear una nueva lista, tomando de la libreria un boton
modelo y duplicandolo, dando la opcion de poder pasarle un numero de columnas o si
los botones tendras la funcion presionado.
*/
class Lista extends MovieClip {
// Primero definimos las variables que usaremos dentro de la clase
var datos:Array;
//array que contendra los datos de los botones, como nombre, accion, etc
var linkage:String;
//el nombre del linkeage que tendra el boton en la libreria
var columnas:Number;
//cantidad de columnas en la que se mostraran los botones
var sep:Number;
//separacion en pixeles entre los botones
var press:Boolean;
//variable booleana que define si los botones tienen estado presionado o no
/*
funcion constructora de la clase, en este caso no tiene nada
*/
public function Lista() {
}
/*
METODOS:
la funcion "crear" crea, como su nombre lo dice, el listado de botones.
pasamos los parametros necesarios, explicados arriba
*/
public function crear(p_datos:Array, p_linkage:String, p_columnas:Number, p_sep:Number, p_press:Boolean) {
this._visible = true;
// hacemos visible la lista
// variable para acomodar el boton en X e Y segun el numero de columnas
var x:Number = 0;
var y:Number = 0;
// asignamos los parametros a las variables de la clase
this.datos = p_datos;
this.linkage = p_linkage;
this.sep = p_sep;
this.columnas = p_columnas;
this.press = p_press;
// bucle for que genera la lista de botones duplicandolos
for (var i:Number = 0; i<datos.length; i++) {
var item:MovieClip = this.attachMovie(linkage, "item"+i, i);
//genera una variable item donde guardamos la referencia al nuevo boton
//lo posicionamos en X e Y
item._x = (item._width+sep)*x;
item._y = (item._height+sep)*y;
item._press = press;
//asiganmos el valor pasado como press al metodo press de la clase Boton
item._pos = i;
//guardamos la posicion del boton para acciones futuras
var ruta:Object = this;
// asignamos a la variable "ruta" la referencia de la clase para usarla dentro de otros metodos y no perder su referencia
//le asignamos una accion al metodo click creado en la clase Boton (o sea lo que va a hacer el boton)
item.click = function() {
trace(ruta.datos[this._pos].dato);
};
item.label_txt.text = datos[i].label;
// ponemos el texto del boton en el campo de texto dinamico que el mismo tiene
x++;
//aumentamos el valor de "x" para generar columnas
// si "x" es igual a columnas vuelve a 0 y aumenta "y" para bajar a la siguiente fila
if (x == columnas) {
x = 0;
y++;
}
}
}
}
//fin de clase Lista

Lo que debemos hacer una vez creadas las clases es armar un MovieClip en Flash que será nuestro botón. Dentro de él tenemos que hacer la animación del efecto over y out con sus respectivas etiquetas en los frames.
Este MC debe estar en la librería con un linkage el cual utilizaremos para agregar el botón al menú. Además debemos asignarle la Clase “Botón”.
Para la lista creamos un MC vacío en escenario al cual le asignamos la Clase “Lista” y le ponemos el nombre de instancia que querremos (en este ejemplo “lista_mc”).
Una vez hecho esto en el primer frame de nuestra película escribimos en siguiente código:

Quote
/*
La idea seria que los datos vengan de un base de datos o un XML y los bolquemos en un array
en este caso cree un array cualquier para que vean como funciona el menú
la propiedad "label" que pueden ver sería en texto que aparecera en el boton, si es que dentro del MC del boton hay un Textfild dinamico con el nombre "label_txt".
y la propiedad datos es un texto que muestra la hacer click en el boton en un trace
*/
listado = [];
listado.push({label:"nombre 1", dato:"dato a mostrar 1"});
listado.push({label:"nombre 2", dato:"dato a mostrar 2"});
listado.push({label:"nombre 3", dato:"dato a mostrar 3"});
listado.push({label:"nombre 4", dato:"dato a mostrar 4"});
listado.push({label:"nombre 5", dato:"dato a mostrar 5"});
listado.push({label:"nombre 6", dato:"dato a mostrar 6"});
//
/*
el metodo que llamamos de la clase lista se llama "crear". Obviamente este metodo crea el menu y le pasamos los siguientes parametros:
1: el array que contiene todos nuestros datos
2: el linkage del boton en la libreria
3: cantidad de columnas
0: menu horizontal
1: menu vertical
2 o +: cantidad de columnas
4: separacion en pixeles entre los botones
5: true si tenemos el estado press en el boton
*/
lista_mc.crear(listado, "boton", 2, 10, true);

Espero les sirva y lo usen y dejen sus comentarios en el foro sobre este experimento.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 3 | 7:06 PM
Menú con efecto de easing para novatos


Cuando uno tiene experiencia con Flash y ActionScript le resulta sencillo leer script de terceros y entender lo que hacen. Pues bien, yo que empiezo ahora con AS me ocurre que leo, miro, canvio, y me quedó igual
Pero esta vez me dije. Basta ya! Deja de modificar medidas y mc's!! Hazlo tú y entiéndelo! (Oye que es verdad eh, hablo solo en la intimidad) y me hice el planning siguiente:
1. Pongo 5 MC en el escenario
2. Los muevo con dos frames incrementando su valor _x
3. Cuando llegen al final, que vuelvan al principio.
4. Cuando el ratón esté más allá de la mitad derecha, que se muevan a la izquierda y viceversa.
5. Cuando esté en el centro +/- se paren.
6. Que se incremente la velocidad cuanto más alejado esté el mouse del centro.
7. Encontrarme con un profe de mates, plantearle lo del incremento y que el tio me lo explique. (Este punto (7) fue un puntazo, pues paso de casualidad) (No lo tenía previsto, así que me he ahorrado un par de meses de pruebas, je, je, je)
8. Compartir el resultado con los que me han ayudado últimamente (cristalab) y sirva para otros principiantes (dummies) con AS.
9. Divertirme en el intento!!! y de paso que no sea aburrido.
10. Bueno vale ya!!! A Trabajar!!! (yo claro, vosotros a leer un poquito)

Descripción de la pelicula
La película tiene un tamaño de 600 X 300; consta de la escena EscenaMenú 2 fotogramas y 3 capas:
• AS que es donde están los scripts, en el 1 y el 2
• MARCO que es una máscara hecha de un rectángulo (Ya lo veran mas adelante a fondo)
• MC'S que es la capa donde están situados las instancias clips de película (rojo, amarillo, verde, cian, azul, y espacio) que harán la función de botones.

También existe la escena EscenaRoja, que la forman 2 capas y un fotograma:
• AS scripts
• BOTON, donde hay un botón hecho de un rectángulo. Este botón sirve para volver a la escena del menú.

En la biblioteca, están además de los mcs y el botón, 5 imágenes gif (que son los colores, claro que tu pondrás tus fotos preferidas) que están incluidas en los mcs. La película está puesta a una velocidad de 48 fps para que el movimiento sea suave a la vista.

Construcción de los Scripts
Empezaremos creando las variables que necesitaremos para hacer los cálculos necesarios. He procurado, pensando en que se pueda adaptar fácilmente a las necesidades de cada uno poner variable a cada número que se deba calcular, de forma modificando estos valores, podamos poner diferentes medidas y otros parámetros para la construcción de nuestra peli. La única condición es que los mcs tienen que tener la misma medida de ancho sea cual sea ésta.
Necesitaremos saber:
Posición del ratón, tamaño del escenario, velocidades máxima y mínima que queremos que se muevan los mcs (pixeles) a cada paso de la cabeza lectora, cual es la mitad de la escena, velocidad según posición del mouse llamada "factor", y por último, el ancho del mc.
Así pues empezamos declarando las variables, en el fotograma1 de la EscenaMenu:

Quote
//Declaramos variables
// Variable para saber la posición _x del mouse
var xposMouse:Number = _root._xmouse;
// Variable para asignar la velocidad máxima del movimiento de los MC
var velMax:Number = 6;
// Velocidad mínima de los MC
var velMin:Number = 0;
// Variable para asignar el punto medio de la escena
var xMitadEscena:Number = 300;
// La siguiente var, sirve para determinar cuando el mc está al
//límite _x de la pantalla, en este caso es de 600 pixels
var anchoEscena:Number = 600;
// A esta le asignaremos el ancho del mc, para saber cuando a desaparecido del
// todo de la escena y establecer las separaciones entre mcs
var anchoMC:Number = 120;

MATEMÁTICAS
A continuación viene la función que hace que funcione (valga la redundancia)
f(x)= ax + b
Donde:
a = (velMax-velMin)/xMitadEscena
Y que
b = 2*(velMin-velMax)
Y la x es igual a la siguiente variable, llamada factor

Quote
//variable factor, que en realidad es la función matemática
// f(x) = ax + b
var factor:Number = xposMouse*(velMax-velMin)/xMitadEscena+2*velMin-velMax;
//No queremos que factor pase de 6, o de -6
if (factor>velMax) {
factor = velMax;
} else if (factor<-velMax) {
factor = -velMax;
}

Ahora, comprobaremos que el mc esté en el escenario de forma que:

Quote
//Si el mc se ha salido por la derecha, ponerlo
//en la izquierda o viceversa.
//para el rojo
if (rojo_mc._x>anchoEscena) {
this.rojo_mc._x = -anchoMC;
}
if (rojo_mc._x<-anchoMC) {
this.rojo_mc._x = anchoEscena;
}
//para el amarillo
if (amarillo_mc._x>anchoEscena) {
this.amarillo_mc._x = -anchoMC;
}
if (amarillo_mc._x<-anchoMC) {
this.amarillo_mc._x = anchoEscena;
}
//verde
if (verde_mc._x>anchoEscena) {
this.verde_mc._x = -anchoMC;
}
if (verde_mc._x<-anchoMC) {
this.verde_mc._x = anchoEscena;
}
//cian
if (cian_mc._x>anchoEscena) {
this.cian_mc._x = -anchoMC;
}
if (cian_mc._x<-anchoMC) {
this.cian_mc._x = anchoEscena;
}
//azul
if (azul_mc._x>anchoEscena) {
this.azul_mc._x = -anchoMC;
}
if (azul_mc._x<-anchoMC) {
this.azul_mc._x = anchoEscena;
}

Al probar la película, me di cuenta de que quedaba un espacio en el medio, y cree un mc que me cubriera ese espacio (que puedes substituir por otra foto) por eso:

Quote
//espacio
if (espacio_mc._x>anchoEscena) {
this.espacio_mc._x = -anchoMC;
}
if (espacio_mc._x<-anchoMC) {
this.espacio_mc._x = anchoEscena;
}
// Y ahora Al ataqueeeee!!! pasamos al frame 2
play();

A continuación pasamos al frame dos.

"Factorizando", es decir, aplicando el easing ese
Bueeeeeno, ahora evaluamos la posición del ratón y le asignamos la variable "factor" al valor que tenga _x de todos los clips de la siguiente forma:

Quote
//Si la posición del mouse está más alla de la mitad derecha +30 pixels,
//mover hacia la izquierda (a la velocidad del factor)
if (xposMouse>(xMitadEscena)+30) {
this.rojo_mc._x -= factor;
this.amarillo_mc._x -= factor;
this.verde_mc._x -= factor;
this.cian_mc._x -= factor;
this.azul_mc._x -= factor;
this.espacio_mc._x -= factor;
}
//Si lo está a menos de 30 pixels de la mitad izquierda,
//mover a la derecha (a la velocidad del factor)
if (xposMouse<(xMitadEscena)-30) {
this.rojo_mc._x -= factor;
this.amarillo_mc._x -= factor;
this.verde_mc._x -= factor;
this.cian_mc._x -= factor;
this.azul_mc._x -= factor;
this.espacio_mc._x -= factor;
}

Cuando probé la película en este punto, los mcs se me descontrolaban, es decir perdian tiempo o lo ganaban cogiéndose unos a otros. Pero después, cogí una calculadora, un papel y un boli y estuve unos 200 horas haciendo cálculos. Nada. Me fui a dormir tuve unas pesadillas monstruosas, del tipo "que te pillan y nunca te acaban de coger", en fin que al final encontré la solución (eso creo!!!)...

Quote
/*
Debido a que el número factor es incremental, se debe
proceder a una corrección de la posición de los mc, de
forma que la posiciones de los mc dependan unas de otras
*/
//Corrección del rojo
if (this.espacio_mc._x<anchoEscena-anchoMC) {
this.rojo_mc._x = this.espacio_mc._x+anchoMC;
}
//corrección del amarillo
if (this.rojo_mc._x<anchoEscena-anchoMC) {
this.amarillo_mc._x = this.rojo_mc._x+anchoMC;
}
//corrección del verde
if (this.amarillo_mc._x<anchoEscena-anchoMC) {
this.verde_mc._x = this.amarillo_mc._x+anchoMC;
}
//corrección del cian
if (this.verde_mc._x<anchoEscena-anchoMC) {
this.cian_mc._x = this.verde_mc._x+anchoMC;
}
//corrección del azul
if (this.cian_mc._x<anchoEscena-anchoMC) {
this.azul_mc._x = this.cian_mc._x+anchoMC;
}
//corrección del espacio
if (this.azul_mc._x<anchoEscena-anchoMC) {
this.espacio_mc._x = this.azul_mc._x+anchoMC;
}
// Vamonoooooos !!!
gotoAndPlay(1);

ACLARACIÓN
Alguien se debe estar preguntando:
-¿porqué se suma 30 o se resta a xMitadEscena?
- ¿No se tendría que restar si la posición del mouse está más a la derecha y sumar al contrarioooo?
Pues si te estás preguntando esto, buena señal. Y si no, pues también. Una vez enjabonado, ahora te aclaro. Puesto que 'factor' es negativo o positivo, pues eso que suma o resta. Para sumar y restar 'factor' le tendriamos que poner Math.abs(factor) para que siempre sea positivo, y entonces...
Vale, vale, las mates no son lo mio. Además:

a)
He querido dejar en el espacio central de la escena una "zona muerta" que pare de mover los mc. Justo la mitad de la medida del mc.
b) Si quiero movimiento continuo, algo así como "nooo pares sigue, sigue; nooo pares sigue, sigue..." (que sólo se detenga cuando el mouse esté EXACTAMENTE en el centro, pues debe hacer lo siguiente:

1.- Al primer script

Quote
if (xposMouse>(xMitadEscena)+30) ......

poner sólo (xMitadEscena) (midad de la escena, quitando +30)

2.-
Quitar el siguiente script
Quote
if (xposMouse<(xMitadEscena)-30)...

3.- El script debería quedar así:

Quote
if (xposMouse<xMitadEscena) {
this.rojo_mc._x -= factor;
this.amarillo_mc._x -= factor;
this.verde_mc._x -= factor;
this.cian_mc._x -= factor;
this.azul_mc._x -= factor;
this.espacio_mc._x -= factor;
} else {
this.rojo_mc._x -= +factor;
this.amarillo_mc._x -= +factor;
this.verde_mc._x -= +factor;
this.cian_mc._x -= +factor;
this.azul_mc._x -= +factor;
this.espacio_mc._x -= +factor;
}

BOTONES, SINÓ, ¿QUE CLASE DE MENU SERÍA ESTE?
La escena EscenaRoja, la cree como ejemplo, de forma que al hacer click pues vayamos al contenido del botón rojo. Tendrás que crear las escenas que quieras y programar los botones para ir a ellas (¿?). Te recomiendo que crees tantas escenas como botones, y así lo tendrás más fácil para distribuir la información.
Otra cosa más, los mcs tienen un efecto alpha a 50 %. Cuando pasamos el ratón por encima lo ponemos a 100% y cuando salimos del botón otra vez a 50%.

Quote
//Si está el mouse encima, 100% de alpha
on (rollOver) {
this.rojo_mc._alpha = 100;
}
// si no, 50%
on (rollOut) {
this.rojo_mc._alpha = 50;
}
//Cuando hago click, voy a la escena correspondiente.
//O como quieras...
on (release) {
gotoAndStop("EscenaRoja", 1);
}

El botón que permite volver tiene el siguiente script:

Quote
//Ahora clico y vuelvo al menu
on (release) {
gotoAndPlay("EscenaMenu", 1);
}

CONCLUSIONES Y APÉNDICE
Ahora sólo te toca a tí programar los otros mc y crear las escenas. Y puedes:
1.
1.1. Ir a tomar un café y hacer una partidita las cartas.
1.2. Comprarte un buen libro de mates.
1.3. Salir de Flash y borrar este archivo.
1.4. Maldecir al autor por no habérselo currado un poco más.
1.5. Agradecer al autor, y responder el tema en el foro, aportando el comentario que quieras.
2.
2.1.
Completar los scripts de todos los botones.
2.2. Completar la escena(s) poniendo cosas como fotos, audio, etc.
2.3. Poner el menú en tu página y disfrutar de lo way que ha quedado.
2.4. Seguir la zaga, creando otro capitulo del mismo estilo.
2.5. No se me ocurre otro punto.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 4 | 11:47 AM
Menú de navegación con selección en Flash


En primer lugar renombramos la primera capa como “acciones”. En el primer fotograma de ésta abrimos el panel acciones y escribimos:

Quote
var menuactivo:String;

Esta será la variable donde guardaremos el nombre de instancia del botón inactivo actual.

Ahora creamos otra capa debajo y en ella creamos un recuadro de 90x25, pulsamos F8 para convertir en Símbolo y lo guardamos como “hit” y tipo “botón”. Entramos en él y arrastramos el recuadro al frame de “Zona activa”, es decir, el último. De esta forma obtendremos nuestro botón invisible.

El paso siguiente es crear los botones de nuestro menú. Empezamos escribiendo un texto cualquiera en el Stage, por ejemplo “Elemento 1”, luego hacemos lo mismo que en el paso anterior, F8 y guardamos como “Elemento 1” tipo “Movie Clip”.

A continuación editamos nuestro nuevo movie clip. Duplicamos el frame, y en este segundo cambiamos de color el texto, por ejemplo a rojo. A continuación creamos una capa por encima donde colocaremos el botón “hit” pero ojo! Solo debe ocupar un fotograma. Y por último creamos otra capa más llamada acciones donde pondremos un stop();

Debería quedar de esta forma:

Ahora seleccionamos el botón “hit” y en su panel de acciones escribimos (explicación en código comentado):

Quote
on (press) {
// devolvemos el elemento actual al estado normal
_parent[_parent.menuactivo].gotoAndStop(1);
// ahora pasará a ser el nombre de instancia de este MC
_parent.menuactivo = this._name;
// llevamos este elemento al estado clicado, en este caso el frame 2, en el que no
// tenemos hit y por tanto quedará anulado como botón
this.gotoAndStop(2);
// a partir de aquí se colocan el resto de
// acciones como loadMovie, llamada a funciones etc...
// en este ejemplo muestro la variable en el campo de texto que situaré en el Stage
_parent.debug_txt.text = _parent.menuactivo;
}

Ya solo nos queda ir al Stage y duplicar algunas veces el Movie clip “Elemento 1”, es decir, copiar y pegar, después botón derecho y renombramos a “Elemento 2” y así sucesivamente, según el número de elemento que queramos:

Nota: Tenemos la opción de asignar un nombre de instancia a cada elemento pero si no necesitas que el botón se active desde otro sitio, como una movie externa, no hace falta ponerlo.

Ejecutamos nuestra película.

Esta es la forma más fácil de hacerlo pero podemos combinarlo con más cosas. Toda la experimentación ya es cosa tuya.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 5 | 12:32 PM
Menú en Flash con slider


En este tutorial crearemos un menú de botones que posea una pequeña barra en su parte inferior (uds. podran colocar donde quieran), la cual se moverá al botón al cual le den enfoque... Mejor véanlo:

Pues esto comienza así:

En un nuevo documento de Flash (de 400px de ancho por 50px de alto), crearemos 2 capas las cuales llamaremos: Slider y Botones:

Ahora seleccionamos la capa Botones, donde crearemos 4 botones en el Escenario (no olviden de Alinear Ctrl+K) y haremos click derecho en el primero para convertirlo en un símbolo Boton, el cual llamaremos primBoton:

Siguiendo el mismo procedimiento, a los demas botones los llamaremos: segBoton, terBoton, cuaBoton respectivamente...ok???. Bien, ahora hay que asignarles un Nombre de Instancia a cada uno:

primBoton: boton_1
segBoton: boton_2
terBoton: boton_3
cuaBoton: boton_4

Ahora seleccionamos la capa Slider y procederemos a crear una barra horizontal bajo el primer botón, dicha barra será nuestro slider que se moverá bajo el menú. Una vez creada, la barra debe ser seleccionada para ser convertida a simbolo Clip de Película (metodo es identico al de la creación del primer botón pero con la diferencia que este es un Clip de Película). A este clip lo llamaremos slider_mc y como Nombre de Instancia slider...(recuerden el mismo procedimiento de los botones, solo que se cambia de opción).

Seleccionamos el slider_mc y abrimos el panel de Acciones (tecla F9) y escribimos el siguiente codigo:

Quote
//--->este evento actúa al momento de cargarse la instancia slider en el reproductor
onClipEvent (load){
//mueveX es la variable que toma la coordenada del objeto donde este el puntero del mouse
mueveX = _x;
//variable que determinara la velocidad del movimiento del slider
velocidad = 10;
}
//--->este evento hace que el siguiente script se dispare siempre, cada vez que pase un fotograma
onClipEvent (enterFrame) {
//la posicion de la instancia slide
_x += (mueveX-_x)/velocidad;
}
// LA ECUACION ANTERIOR SERIA LO MISMO A ESTO ---> _x = _x + ((mueveX-_x)/velocidad)
//por ejemplo al mover su mouse al segundo boton, la variable mueveX toma el valor de 154
//mientras _x posee un valor entre 66 y 154 aprox. supongamos que posee el valor de 70 en un "momento dado"
//entonces quedaria algo asi al otro lado del signo "=" :
//70 + ((154-70)/5)
//70 + (( 84 )/5)
//70 + ( 16.8 )
//86.8
//el nuevo valor de _x de slider "en ese momento dado" es de 86.8, he ahi el por que del movimiento.
// += ------> hay que entenderlo como "a esto que tengo, súmale esto"
//para entender mejor esto usen "trace()" dentro de los paréntesis coloquen alguna variable

Por ultimo, seleccionamos el primer botón, vamos al panel de Acciones nuevamente y escribimos el siguiente script:

Quote
on (rollOver) {
//mueve el slider a la posicion del boton 1
slider.mueveX = boton_1._x;
}

En el segundo:

Quote
on (rollOver) {
//mueve el slider a la posicion del boton 2
slider.mueveX = boton_2._x;
}

En el tercero:

Quote
on (rollOver) {
//mueve el slider a la posicion del boton 3
slider.mueveX = boton_3._x;
}

Y en el cuarto:

Quote
on (rollOver) {
//mueve el slider a la posicion del boton 4
slider.mueveX = boton_4._x;
}

y ya esta!!! tienes tu Menú con Slider....


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 6 | 1:26 PM
Crear menús de navegación en CSS usando listas


¿Qué son las listas?, ¿Para qué se usan?, ¿Por qué ES MEJOR usarlas en un menú? Estas son preguntas que siempre vienen a la mente al hablar de las listas, sobre todo en la transición hacia el uso de XHTML estándar y el maquetado con CSS.

Hablar de listas (<ul> y <ol>) es hablar de estructura, recordemos que el XHTML es un lenguaje diseñado para estructurar datos, y eso es lo que debemos hacer con el. En ese sentido, las listas nos ofrecen una muy buena forma de estructurar, pues... listas.

En HTML tenemos dos clases de listas, las ordenadas y las desordenadas, la única diferencia es que las ordenadas añaden un número correlativo a cada item de la lista, mientras que las desordenadas no:

Las Listas Ordenadas:

Quote
<ol>
<li>item</li>
<li>item</li>
<li>item</li>

</ol>

Nos da como resultado:

1. item
2. item
3. item

Mientras que, las listas desordenadas:

Quote
<ul>
<li>item</li>
<li>item</li>
<li>item</li>

</ul>

Nos queda:

item
item
item

Ahora la gran pregunta, Por qué &%$#$@/ tengo que usar eso para hacer mi menú?

Sencillo, porque un menú básicamente ES una lista, no es un párrafo, ni un titulo, es una lista de vínculos. Y como lista que és, lo mas correcto es que esté estructurada en el HTML como tal.

Pero no hay de que preocuparse, ya que el CSS nos permite cambiar completamente el aspecto de la lista, para convertirla en el bonito menú que queremos, sin que deje de ser lista. Pero primero, veamos en qué consisten los pre-formatos que trae de por sí una lista.

Las listas se renderizan en el navegador con ciertas características, como el margen / relleno (interpretado de diferente manera en los distintos navegadores) de la lista completa, el margen / relleno (idem) de cada item de la lista y las viñetas, ademas de un salto de línea para cada item por ser elementos de bloque.

Todos estos formatos pueden ser eliminados / modificados a través de CSS muy fácilmente. Comencemos con las viñetas.

Nota: para los ejemplos usaremos una lista desordenada, ya que no necesitamos la numeración.

Las viñetas por defecto de las listas desordenas es un circulo relleno, podemos cambiarlo por un cuadrado, un circulo vació, o una imagen, cambiando tan solo un atributo en nuestro CSS para la lista:

Quote
<ul id="navi">
<li>inicio</li>
<li>acerca de</li>
<li>contactos</li>
</ul>
<!--agregamos un ID para referirnos directamente a esta lista.-->

En el CSS:

Quote
#navi {
list-style-type:square;
}
//O bien...
#navi {
list-style-type:circle;
}
//O mas bien...
#navi {
list-style-image:url(images/vineta.png);
}

Nos da como resultado:

También podemos poner:

Quote
#navi {
list-style:none;
}

Con lo que le quitamos las viñetas:

Ahora vamos con los margenes y el relleno. Dado que los distintos navegadores pueden interpretar el margen y el relleno de diferente forma, hay que especificar ambos valores con los que queramos darle a nuestra lista, aunque parezca que el que trae la lista de por sí, sea el adecuado para lo que queremos, es mejor especificarlo en el CSS.

Quote
#navi {
list-style:none;
margin:0;
padding:0;
}
//luego a los elementos de la lista...
#navi li {
margin:2px;
padding:2px;
border:1px solid#CCCCCC;
}

Para continuar, vamos a agregarle vínculos a los elementos de la lista:

Quote
<ul>
<li><a href="#">inicio</a></li>
<li><a href="#">acerca de</a></li>
<li><a href="#">contactos</a></li>
</ul>

Ahora tendremos:

Ahora es tiempo de decidir si queremos nuestro menu horizontal, o vertical. Si es vertical, no necesitamos agregar nada especial al código, pero si es horizontal, hay que agregar un float para hacer que los elementos de la lista se coloquen uno al lado del otro:

Quote
#navi {
list-style:none;
margin:0;
padding:0;
}
#navi li {
margin:2px;
padding:2px;
border:1px solid #CCCCCC;
float:left; //para eliminar el comportamiento de elemento de bloque(salto de linea)
}

Y el resultado:

Nota: al aplicar el float, los elementos de la lista se reduciran al minimo tamaño necesario para el texto que contengan.

Todos los demás estilos que queramos agregarle al menú, se harán directamente sobre los vínculos, ya sea tamaño, tipo de letra, colores, imágenes de fondo, etc. Para seleccionar los vínculos dentro de los elementos de lista, encadenamos los nombres de las etiquetas en el selector CSS como lo hicimos con los <li>:

Quote
#navi {
list-style:none;
margin:0;
padding:0;
}
#navi li {
margin:2px;
padding:0; //Ya no necesito el padding, tambien quitare el borde que puse antes.
float:left;
}
#navi li a {
display:block; //Convertimos el vínculo en un bloque.
width:100px;
padding:4px 0;
text-decoration:none;
text-align:center;
font-size:11px;
color:#FFFFFF;
background-color:#000000;
}
//Ahora vamos con el hover:
#navi li a:hover {
color:#99CC00;
background-color:#003366;
}

Así obtenemos fácilmente un menú, obviamente muy sencillo:



De aquí en adelante, cambiar todo el aspecto es cosa de ir probando, cambiando los colores, cambiando el relleno, el margen, el tipo de letra colocando bordes:

Quote
#navi li a {
display:block;
width:100px;
padding:4px 0;
text-decoration:none;
text-align:center;
font-size:11px;
color:#FFFFFF;
background-color:#000000;
border-left:10px solid #666666; //Agrego un borde ancho a la izquierda
}
#navi li a:hover {
color:#99CC00;
background-color:#003366;
border-left-color:#99CC00; //Luego le cambio el color al borde en el evento hover.
}

Experimentando

Para este ejemplo, use una imagen de fondo, para el evento hover, con un pequeño truco, veamos el código:

Quote
ul li a {
display:block;
width:100px;
padding:40px 10px 4px 10px;
text-decoration:none;
text-align:right;
font-size:11px;
color:#666666;
background-image:url(images/boton1.png); //Aqui solo se ve la parte de arriba de la imagen
border:1px solid #666666;
}
ul li a:hover {
color:#000000;
background-position:bottom; //Aqui muestro la parte de abajo de la imagen
}

Para hacer los botones altos, le he agregado 40px de relleno superior, de esta forma agrando el botón dejando el texto abajo, le he cambiado la alineación a la derecha, y, como se puede ver en el código, la imagen de fondo la he puesto en el vínculo directamente, no en el evento hover, y en este solo le cambio la posición. El detalle es que la imagen es el doble de tamaño que el botón:

Por qué hago esto? La idea es cargar una sola imagen, y hacerlo al cargar la pagina, si pedimos que en el evento hover se cargue una imagen aparte, esta solo sera cargada al poner el cursor encima del botón, en conexiones lentas, suele haber un tiempo de descarga de la imagen que supera a la ación del usuario, lo que ocasiona que nunca vea la imagen del evento hover. Con este método, nos aseguramos que la imagen es cargada desde el principio y no hay espera.

Otro ejemplo

Para este ejemplo, hay varios cambios, comenzando por la lista:

Quote
<ul>
<li><a href="#" id="inicio"><span>inicio</span></a></li>
<li><a href="#" id="acerca"><span>acerca de</span></a></li>
<li><a href="#" id="contacto"><span>contactos</span></a></li>
</ul>

Agregamos un identificador único a cada vínculo, para poder colocar la imagen correspondiente. Adicionalmente le he puesto etiquetas <span> a el texto, para ocultarlo con CSS:

Quote
ul {
list-style:none;
margin:0;
padding:0;
}
ul li {
padding:0;
float:left;

ul li a {
display:block;
width:121px;
height:50px; //Quito el padding, pero le pongo altura.
text-decoration:none;
}
ul li a:hover {
background-position:bottom;
}
ul li a span {
display:none; //Oculto el texto.
}
#inicio {
background-image:url(images/inicio.png);
}
#acerca {
background-image:url(images/acerca.png);
}
#contacto {
background-image:url(images/contacto.png);
}

Por ahora es todo, a disfrutar y a hacer las respectivas pruebas.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 7 | 4:06 PM
MENÚ ROLLOVER

¿Para qué utilizar javascript cuando la solución está en CSS?

El siguiente estilo nos permite crear un menú similar a los de javascript, en donde representamos su estado de reposo (out) con un color y su estado sobre (over) con otro.

Quote
<style type="text/css">
#menu div.barraMenu,
#menu div.barraMenu a.botonMenu {
font-family: sans-serif, Verdana, Arial;
font-size: 8pt;
color: white;
}

#menu div.barraMenu {
text-align: left;
}

#menu div.barraMenu a.botonMenu {
background-color: #556975;
color: white;
cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}

#menu div.barraMenu a.botonMenu:hover {
background-color: #637D4D;
}

#menu div.barraMenu a.botonMenu:active {
background-color: #637D4D;
color: black;
}
</style>

<div id="menu"><div class="barraMenu">
<a class="botonMenu" href="">Opción 1</a>
<a class="botonMenu" href="">Opción 2</a>
<a class="botonMenu" href="">Opción 3</a>
<a class="botonMenu" href="">Opción 4</a>
</div></div>

background-color de a.botonMenu : color de estado reposo (out).
background-color de a.botonMenu:hover : color de estado sobre (over).
background-color de a.botonMenu:active : color de estado seleccionado.

Ver ejemplo.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 8 | 2:21 PM
Bonito Menu Css para lista de iconos

Se trata de un excelente menú con CSS basado en una lista de lectores de Feeds.

En principio pone a nuestra disposición los ficheros para descargarlos en nuestro ordenador.

Descargar Código

Paso 1: Código HTML
Creamos un <div> con el id=rss-menu y añadimos una cabecera usando la etiqueta <h2>, además de una lista desordenada usando <li>

Quote
HTML:
<ul>
<li class="feed-xml"> <a href="http://feeds.feedburner.com/Woork" onclick="javascript:pageTracker._trackPageview ('/outbound/feeds.feedburner.com');"> Suscribir aRSS Feed</a></li>
<li class="feed-yahoo"> <a href="http://add.my.yahoo.com/rss?url=http://feeds.feedburner.com/Woork" onclick="javascript:pageTracker._trackPageview ('/outbound/add.my.yahoo.com');">Añadir a My Yahoo</a></li>
<li class="feed-newsgator"> <a href="http://www.newsgator.com/ngs/subscriber/subext.aspx?url=http://feeds.feedburner.com/Woork" onclick="javascript:pageTracker._trackPageview ('/outbound/www.newsgator.com');"> Suscribir en NewsGator</a></li>
<li class="feed-bloglines"> <a href="http://www.bloglines.com/sub/%20http://feeds.feedburner.com/Woork" onclick="javascript:pageTracker._trackPageview ('/outbound/www.bloglines.com');">Suscribir con Bloglines</a></li>
<li class="feed-netvibes"> <a href="http://www.netvibes.com/subscribe.php?url=http://feeds.feedburner.com/Woork" onclick="javascript:pageTracker._trackPageview ('/outbound/www.netvibes.com');">Añadir a Netvibes</a></li>
<li class="feed-google"> <a href="http://fusion.google.com/add?feedurl=http://feeds.feedburner.com/Woork" onclick="javascript:pageTracker._trackPageview ('/outbound/fusion.google.com');">Añadir a Google</a></li>
</ul>
<p id="rss-menu"> </p>

<h2 id="231_mis-feeds_1">Mis Feeds</h2>

Como puedes ver en el código anterior, cada enlace de lector de feed está dentro de un <li>.

Se ha diseñado y usado un icono de fondo por cada elemento (usando CSS), añadiendo una pequeña descripción. (ex. “Añadir a Netvibes”).

Paso 2. Código CSS

Se ha usado una clase CSS por cada icono de feed:

Quote
CSS:
.feed-yahoo{
background:url(pic/feed-yahoo.png) no-repeat;
}
.feed-newsgator{
background:url(pic/feed-newsgator.png) no-repeat;
}
.feed-netvibes{
background:url(pic/feed-netvibes.png) no-repeat;
}
.feed-bloglines{
background:url(pic/feed-bloglines.png) no-repeat;
}
.feed-xml{
background:url(pic/feed-xml.png) no-repeat;
}
.feed-google{
background:url(pic/feed-google.png) no-repeat;
}

Descarga el fuente del código completo de CSS.

Paso 3. Mostrar/Ocultar Menú con Javascript
Puedes añadir una función Javascript para mostrar/ocultar el menú en tu página añadiendo un simple código Javascript en la cabecera.

Quote
JavaScript:
function showlayer(layer){
var myLayer = document.getElementById(layer).style.display;
if(myLayer=="none"){
document.getElementById(layer).style.display="block";
} else {
document.getElementById(layer).style.display="none";
}
}

Este código toma como input el parámetro que es el ID de la capa que quieres mostrar/ocultar (en este caso rss-menu). Así que creamos un botón que haga esta función:

Quote
HTML:
<a href="#" onclick="javascript:showlayer('rss-menu')" class="rss-button">Subscribe My Feed</a>

Si quieres que el menú se muestre por encima del contenido de tu página tienes que poner el atributo “position” a Absolute.

Eso es todo….


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 9 | 5:50 PM
Creación de un menú desplegable en Dreamweaver

Muchas veces, nuestras páginas tienen tantos contenidos que si quisiéramos que apareciesen todos estos en un determinado lugar de nuestra página, en un menú, este abarcaría casi la totalidad del espacio que tenemos para nuestra web. En estos casos es muy útil insertar uno o varios de estos menús desplegables, apareciendo por encima del propio contenido de la página para mostrar todas sus partes y desapareciendo posteriormente.

A lo largo de este artículo vamos a desarrollar la forma de crear uno de estos menús con DreamWeaver de una manera genérica para que cada uno lo amplíe a su gusto.

En primer lugar, tenemos que saber que este menú está construido casi en su totalidad por capas, a las cuales les atribuiremos unos comportamientos específicos para que aparezcan y desaparezcan a nuestro gusto.

Otra cosa que debemos tener en cuenta es la condición de capa absoluta o capa relativa, ya que a las capas absolutas se les tiene que dar unas coordenadas de posicionamiento a raíz de la esquina superior izquierda de nuestra web, coordenadas que no nos sirven para nada en el caso de que nuestra página tenga los contenidos centrados, ya que la posición en la que va a aparecer esta, dependerá de la configuración del monitor desde el que se visualice dicha página.

El primer paso que tenemos que dar es desarrollar mentalmente un esquema del menú que queremos realizar, o mejor, sobre papel. Nosotros nos hemos decantado por hacer un menú principal compuesto por 5 partes en posición horizontal, para lo cual crearemos una tabla con 5 celdas y les daremos a cada una de ellas un determinado el tamaño de píxel, en nuestro caso 100px - 20px. A continuación haremos clic en el icono de capa y dibujaremos una en cualquier lado, seguidamente arrastraremos el símbolo de capa (que determina el lugar donde el programa introducirá la línea de código HTML, que por defecto creará dentro de la etiqueta "Body") dentro una de las celdas de la tabla que hemos generado y a continuación modificaremos en la ventana propiedades, los campos "Iz" (izquierda) y "Sup" (superior) dejándolos en blanco, al hacer esto el programa engancha la capa en la esquina superior izquierda del recipiente en el que se encuentra, en este caso, la celda en la que hemos introducido la capa. Después daremos un valor a los campos de "An" (ancho) y "Al" (alto) En el ejemplo que estamos creando serán 100px y 20px respectivamente, este paso lo tenemos que repetir para cada una de las 5 celdas (en nuestro caso), de las que se compone nuestro menú principal.

Una vez terminado con este paso procederemos a crear otras capas dentro de las que ya hemos establecido, a estas capas tendremos que darles unos valores de tamaño dependiendo de las distintas partes que queramos introducir dependientes de cada menú (nosotros daremos 100px - 80px en el primer desplegable, 100px - 140px en el segundo, 100px - 100px en el tercero, 100px - 80px en el cuarto y 100px - 140px en el quinto). Para colocar una capa dentro de otra podemos hacerlo: 1º, arrastrando como hemos hecho anteriormente esta nueva capa dentro de la anterior, o 2º, presionando la tecla F2 nos aparecerá la ventana "capas" donde podremos ver un esquema de las capas que tenemos en nuestra web, cogiendo una de las capas que aparecen y arrastrándola encima de otra mientras que presionamos la tecla "Ctrl", introduciremos la capa arrastrada dentro de la que hayamos seleccionado.

Estas subcapas que hemos creado, que dependen de las principales, por defecto tienen la propiedad "default" que deja la capa visible en todo momento y nos viene bien para trabajar, pero antes de darles un comportamiento a estas, cuando tengamos terminado por completo la estructura de nuestro menú, deberemos cambiar este tributo "default" de las capas secundarias (las que se encuentran dentro de las 5 capas principales) por "hidden", que las hace invisibles, dándonos la posibilidad de trabajar con los comportamientos haciéndolas aparecer y desaparecer a nuestro gusto.

Dentro de estas capas secundarias introduciremos tablas con el numero de celdas que hayamos calculado con el tamaño de cada capa. Una vez hecho esto en todas las capas deberíamos colocar las imágenes o las palabras de nuestro menú para poder configurar los comportamientos, ya que si no colocamos nada dentro de las capas, estas no se verán cuando aparecen o desaparecen por ser transparentes. Otra solución es darles un color de fondo.

El último paso para terminar nuestro menú será dar a cada capa un comportamiento. Para eso necesitamos la ventana comportamiento que, si no la tenemos ya a la vista, presionando la tecla F3 aparecerá. Para poder jugar con los comportamientos de "mostrar u ocultar capa" debemos trabajar con un vinculo (estos vínculos serán las imágenes que hemos colocado dentro de las celdas y en su defecto las palabras, para hacer este vinculo introduciremos en el espacio reservado para los vínculos de la ventana propiedades el símbolo "#" creando así un vínculo en blanco, a continuación presionaremos el vinculo creado (en la parte inferior de la página principal aparecerá el símbolo de vínculo "<a>" en negrita) después iremos a la ventana comportamiento y presionaremos el símbolo "+" y pincharemos en "Mostrar - Ocultar capas" y nos aparecerá una ventana con un listado de todas las capas que tenemos creadas, lo que tenemos que hacer es presionar la capa que se tendría que desplegar cuando pasásemos el ratón por encima del vinculo que estamos modificando y apretar el botón "Mostrar" y las demás capas pincharlas y ocultarlas de la misma forma que hemos hecho antes pero en este caso apretando el botón de "Ocultar".

Este paso lo repetiremos para cada una de los cinco vínculos principales de los que se nos desplegarán los correspondientes submenús.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 10 | 12:59 PM
Menú circular en CSS

No sé porqué, pero algo me inspiró para crear un menú algo extraño. Quizá no sea del todo útil, pero fue un experimento interesante y me gustaría compartirlo con vosotros. Aquí está el ejemplo, para que vean de qué trata antes de leerse todo esto.

El propósito

El propósito de esta entrada es demostrar el poder que CSS tiene y que sinceramente no aprovechamos. Quizá sea algo difícil, pero créanme que vale la pena terminar y ver algo que funciona en casi cualquier ordenador sin importar su navegador, soporte de CSS, resolución, etc. Simplemente algo que FUNCIONA además de ser ÚTIL y ATRACTIVO. Esas tres palabras fueron las que se quedaron en mi mente mientras intentaba crear este menú. Al principio pensé que no serviría en Internet Explorer (pensaba usar pseudo-clases y algunas otras cosillas que IE no soporta bien); pero al final decidí crear algo más amigable al usuario y, sobretodo, más usable.

La cosa ha sido probada en IE6.0, IE7.0, Opera9.10 y Firefox2.0.0.3. En todos funciona como se esperaba. Si pueden probarlo en otros navegadores se los agradeceré. Y ahora si; pasemos al tutorial que empieza en la siguiente página.

Las imágenes
Y bueno, lo primero es tener las imagenes listas. Estas son las imagenes que utilizaré para este tutorial:

Las imágenes de los iconos miden 45px de ancho por 90px de alto. El fondo del menú mide 220px de alto y ancho. Por cierto, los iconos son parte del [utl=http://tango.freedesktop.org/Tango_Icon_Gallery]proyecto Tango[/url].

Creando el HTML
Y como siempre, empezaremos creando el esqueleto de nuestro HTML.

Quote
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>Menu extraño</title>
<meta http-equiv="content-Type" content="text/html; charset=ISO-8859-1" />
</head>

<body>


</body>
</html>

Ahora tenemos que crear nuestro menú. Si recordamos los contenidos semánticos, sabremos que un menú no es más que una lista de links. así que eso crearemos; una lista de links. Por lo tanto, nuestro menú debe ser una lista.

Quote
<div id="menwrap">
<ul id="menu">
<li><a href="#" id="home" class="menitem"><strong>Home</strong> <span>La página principal.</span></a></li>
<li><a href="#" id="tutos" class="menitem"><strong>Tutoriales</strong> <span>Tutoriales de CSS y HTML.</span></a></li>
<li><a href="#" id="files" class="menitem"><strong>Archivos</strong> <span>Archivos para descargar.</span></a></li>
<li><a href="#" id="search" class="menitem"><strong>Buscar</strong> <span>Formulario para buscar.</span></a></li>
<li><a href="#" id="mail" class="menactive"><strong>Mail</strong> <span>Envíanos un mail.</span></a></li>
<li><a href="#" id="id" class="menitem"><strong>Perfil</strong> <span>Controla tu cuenta.</span></a></li>
<li><a href="#" id="write" class="menitem"><strong>Escribir</strong> <span>Escribir una entrada.</span></a></li>
<li><a href="#" id="logout" class="menitem"><strong>Desconectar</strong> <span>Cerrar tu sesión.</span></a></li>
</ul>
</div>

Como pueden ver, nuestra lista contiene 3 elementos en cada <li>: un anchor (<a>), un <strong> y un <span>. El anchor contiene al <strong> y al <span>; el <strong> contiene el título de la sección y el <span> contiene una descripción breve de la sección. También he agregado un ID y una clase a cada anchor para poder identificar de qué sección del menú se trata y si está activa (menactive) o no (menitem).

Ahora vamos a agregar un pequeño código que nos creará el header o título de la sección que actualmente estamos visitando. Tambien agregaré un div extra que se requiere para arreglar un pequeño bug en IE5.5.

Quote
<div id="menwrap">
<div id="ie_height_fix">
<h2 class="mail">Mail <span>Envíanos un mail</span></h2>
<ul id="menu">
<li><a href="#" id="home" class="menitem"><strong>Home</strong> <span>La página principal.</span></a></li>
<li><a href="#" id="tutos" class="menitem"><strong>Tutoriales</strong> <span>Tutoriales de CSS y HTML.</span></a></li>
<li><a href="#" id="files" class="menitem"><strong>Archivos</strong> <span>Archivos para descargar.</span></a></li>
<li><a href="#" id="search" class="menitem"><strong>Buscar</strong> <span>Formulario para buscar.</span></a></li>
<li><a href="#" id="mail" class="menactive"><strong>Mail</strong> <span>Envíanos un mail.</span></a></li>
<li><a href="#" id="id" class="menitem"><strong>Perfil</strong> <span>Controla tu cuenta.</span></a></li>
<li><a href="#" id="write" class="menitem"><strong>Escribir</strong> <span>Escribir una entrada.</span></a></li>
<li><a href="#" id="logout" class="menitem"><strong>Desconectar</strong> <span>Cerrar tu sesión.</span></a></li>
</ul>
</div>
</div>

Con esto podrás ver que, como ejemplo, estoy usando la sección de Mail como activa. También hay que destacar que la tag <h2> contiene un <span> el cual contiene la breve descripción de la sección actual.

Ya con todo esto, nuestro HTML debe haber quedado algo así:

Quote
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>Menu extraño</title>
<meta http-equiv="content-Type" content="text/html; charset=ISO-8859-1" />
</head>

<body>

<h1 id="header">Tutorial: Menu circular en CSS</span></h1>

<h2>Ejemplo de menu</h2>

<div id="menwrap">
<div id="ie_height_fix">
<h2 class="mail">Mail <span>Envíanos un mail</span></h2>
<ul id="menu">
<li><a href="#" id="home" class="menitem"><strong>Home</strong> <span>La página principal.</span></a></li>
<li><a href="#" id="tutos" class="menitem"><strong>Tutoriales</strong> <span>Tutoriales de CSS y HTML.</span></a></li>
<li><a href="#" id="files" class="menitem"><strong>Archivos</strong> <span>Archivos para descargar.</span></a></li>
<li><a href="#" id="search" class="menitem"><strong>Buscar</strong> <span>Formulario para buscar.</span></a></li>
<li><a href="#" id="mail" class="menactive"><strong>Mail</strong> <span>Envíanos un mail.</span></a></li>
<li><a href="#" id="id" class="menitem"><strong>Perfil</strong> <span>Controla tu cuenta.</span></a></li>
<li><a href="#" id="write" class="menitem"><strong>Escribir</strong> <span>Escribir una entrada.</span></a></li>
<li><a href="#" id="logout" class="menitem"><strong>Desconectar</strong> <span>Cerrar tu sesión.</span></a></li>
</ul>
</div>
</div>

</body>
</html>

Ahora pasemos a lo divertido, el CSS.

Creando el CSS
Empezaremos dando estilo al contenedor y al div que creamos para arreglar el bug en IE5.5. El bug de IE5.5 que tratamos de arreglar es un problema con la forma en que representa las cajas. La cosa es así: si una caja tiene 200px de alto pero el contenido dentro de la misma es más alto que esto, IE5.5 se estira hasta cubrir todo el contenido en lugar de quedarse con su altura y seguir la propiedad de overflow respectiva (que puede ser mostrar scrollbars, esconder o mostrar el contenido). Esto rompía el fondo del menú y se veía todo chueco. También arregla algunos errores con la propiedad CSS ‘z-index’, pues IE requiere que esta propiedad sea aplicada al contenedor y no a los elementos contenidos. Con todo esto en mente, el CSS queda así:

Quote
/* contenedor */
div#menwrap {
width: 220px;
height: 220px;
margin: 5em auto;
padding: 0;
background: #fff url('background.jpg') no-repeat center 0;
}

div#ie_height_fix {
width: 1px;
height: 220px;
margin: 0;
padding: 0;
}

Seguiremos con nuestra lista. Le daremos un espacio de 50px de los elemento alrededor para darle espacio y que se vea bien; un ancho y alto de 220px; le quitaremos el padding y las bullets que por default tiene y por último lo posicionaremos relativamente para poder posicionar absolutamente los elementos contenidos dentro de ella.

Quote
ul#menu {
margin: 50px auto;
height: 220px;
padding: 0;
width: 220px;
height: 220px;
list-style: none;
list-style-type: none;
position: relative;
}

Seguimos con el elemento <li>. Este elemento será de 45px de alto y ancho; que es el alto y ancho de las imagenes de fondo; le quitaremos margin y padding y lo mostraremos como bloque. De nuevo, quitaremos las bullets que por default trae (algunos navegadores lo aplican a <li> otros a <ul>) y cambiaremos el tamaño de la fuente. El paso más importante es posicionar absolutamente estos elementos. Al posicionarlos absolutamente, se amontonarán en la esquina superior izquierda de nuestro menú lo cual es bueno, pues tendremos más control al posicionar nuestros items al rededor de nuestro círculo. También agregamos la propiedad z-index: 2;. Esta propiedad se encarga de acomodar los elementos en cascada, por así decirlo. El número 1 se mostrará primero, el número 2 detrás de el, el 3 detrás del 2 y así sucesivamente. Es poner elementos uno encima de otro. Cabe recordar que esta propiedad solo funciona con elementos que han sido posicionados, por ejemplo, con position: absolute; (como en nuestro caso).

Quote
ul#menu li {
width: 45px;
height: 45px;
margin: 0;
padding: 0;
display: block;
list-style: none;
list-style-type: none;
position: absolute;
z-index: 2;
font-size: 8pt;
font-family: verdana, arial, tahoma, serif;
}

Con todo este embrollo de CSS, tenemos algo como esto:

Como pueden ver, todo está amontonado. Eso es bueno. tambien pueden ver el header de nuestro menu encimado. Vamos a darle algo de estilo. Primero que nada, posicionaremos absolutamente la tag <h2>; le daremos un ancho de 150px y un alto de 35px. Con esto tenemos una pequeña cajita hasta arriba a la derecha; para centrarla le daremos algo de margin hacía arriba y abajo. Como queremos tener una imagen de fondo para esta tag, un padding centrara el texto y la imagen de la sección; alinearemos el texto a la izquierda e identaremos el texto unos 45px (que es más o menos el ancho de la imagen). Por último, le daremos un z-index de 0:

Quote
div#menwrap h2 {
position: absolute;
width: 150px;
height: 35px;
margin: 60px 0 0 45px;
padding: 10px 0 0 0;
text-align: left;
font-size: 1.5em;
z-index: 0;
text-indent: 45px;
}

Ahora le daremos estilo al span que está dentro de nuestro header. Este span lo mostraremos como bloque de 90px de ancho y le daremos 5px de margin hacia arriba y 25px hacia la izquierda. Esto para colocarlo en su lugar (abajo del título de la sección, centrado en el círculo). Le daremos además un padding de 10px para poder darle un borde hacía arriba de 2px de ancho y de este modo “subrayar” el título de la página. Bajaremos un poco el tamaño de la fuente, eliminaremos el identado que dimos anteriormente a la tag <h2> y cambiaremos el color de la misma. Por último, alinearemos el texto al centro:

Quote
div#menwrap h2 span {
display: block;
text-indent: 0;
font-size: .8em;
width: 90px;
border-top: 2px solid #abe9ab;
margin: 5px 0 0 25px;
padding: 5px 0 0 0;
color: #666;
text-align: center;
}

Ya hemos estilizado nuestro header, pero falta una cosa: la imagen. La imagen la colocaremos identificando la clase del <h2>. En el ejemplo tenemos class=“mail”, pero cada sección tiene una clase que se llama del mismo modo que el id del anchor de la sección. Por lo tanto, aplicaremos la imagen a todas las clases de cada sección. La imagen será posicionada a la izquierda y a -45px de arriba para ocultar la parte de la imagen que tiene el círculo verde a su alrededor:

Quote
/* Headers */

div#menwrap h2.home {
background: url('home.gif') no-repeat left -45px;
}

div#menwrap h2.tutos {
background: url('tutos.gif') no-repeat left -45px;
}

div#menwrap h2.files {
background: url('files.gif') no-repeat left -45px;
}

div#menwrap h2.search {
background: url('search.gif') no-repeat left -45px;
}

div#menwrap h2.mail {
background: url('mail.gif') no-repeat left -45px;
}

div#menwrap h2.id {
background: url('id.gif') no-repeat left -45px;
}

div#menwrap h2.write {
background: url('write.gif') no-repeat left -45px;
}

div#menwrap h2.logout {
background: url('logout.gif') no-repeat left -45px;
}

Ahora nuestro menú se ve así:

Ya va tomando forma. Ahora solo nos queda acomodar los iconos al rededor del círculo. Para esto, tenemos que acomodar cada icono por separado, con precisión de pixel y posicionando absolutamente cada elemento. Primero que nada, vamos a esconder la información; es decir, todo el texto dentro de nuestros anchors:

Quote
/* Esconder información */

ul#menu li a.menitem span, ul#menu li a.menitem strong, ul#menu li a.menactive span, ul#menu li a.menactive strong {
display: none;
}

Y ahora vamos a mostrar la información cuando pasemos el mouse sobre el anchor: Para esto posicionaremos el tag <strong> y el tag <span> absolutamente; los mostraremos como bloques y los pondremos a la izquierda del menu. El tag <hspan>, que es la descripción, será una caja amarilla con un borde un poco más oscuro, tendrá 120px de ancho, el atributo de z-index: 1; y le daremos 20px de padding hacia arriba para poder colocar ahí el tag <strong>, que es el título de la sección. Este tag (<strong>) tendrá un ancho de 100px y un borde al fondo de 1px color amarillo. También le daremos la propiedad de z-index: 2; para colocarlo sobre el tag <span>. A ambas tags les daremos el atributo left: 50px; para alejarlo 5px a la derecha de nuestro icono (¿recuerdas que la imagen es de 45px de ancho? Le vamos a dar 5px de espacio entre el icono y el tooltip; por lo que 45px+5px = 50px) y top:0; para que esté a la misma altura que nuestro icono. También he agregado el atributo opacity para los navegadores que lo soportan:

Quote
/* Mostrar información en :hover */

ul#menu li a.menitem:hover strong {
display: block;
text-align: left;
position: absolute;
width: 100px;
border-bottom: 1px solid #ffdb5e;
padding: 2px 0 2px 0;
margin: 0 0 0 5px;
color: #333;
left: 50px;
top: 0;
z-index: 2;
}

ul#menu li a.menitem:hover span {
display: block;
position: absolute;
width: 120px;
text-align: left;
border: 1px solid #ffe897;
background-color: #ffefb7;
padding: 20px 2px 2px 2px;
color: #333;
left: 50px;
top: 0;
z-index: 1;
opacity: .9;
}

Con todo esto ya practicamente hemos terminado. Solo nos falta dar algo de estilo a los iconos. Empezaremos con darles estilo cuando están activos y cuando no. Cuando un icono no está activo, queremos mostrar el fondo con el icono sin el círculo verde, por lo que posicionamos la imagen de fondo hasta abajo. Cuando el mouse pasa encima de un icono que no está activo, mostraremos la imagen con el círculo verde, por lo que posicionamos el fondo hasta arriba. Finalmente, cuando el icono está activo mostraremos la imagen con el círculo verde para diferenciarlo de los que no lo están. De nuevo, he agregado el atributo opacity para los navegadores que lo soportan:

Quote
/* Fondo en :active y :hover */

/* Items del menu no activos */

ul#menu a.menitem:link, ul#menu a.menitem:visited {
background-position: left bottom;
opacity: .7;
}

ul#menu a.menitem:hover, ul#menu a.menitem:active, {
background-position: left top;
background-color: transparent;
opacity: .9;
}

/* Items del menu activos */

ul#menu li a.menactive {
background-position: left top;
background-color: transparent;
opacity: 1;
}

ul#menu li a.menactive:hover {
opacity: 1;
}

Con todo esto lo único que nos queda es dar estilo a los anchos. Empezaremos con mostrarlos como un bloque de 45px por 45px posicionado absolutamente y quitando el borde (si es necesario):

Quote
/* Dando estilo a los anchors */
ul#menu a {
border: 0;
position: absolute;
width: 45px;
height: 45px;
}

Ya solo nos queda especificar la imagen de cada icono y posicionarla en su lugar. Para posicionarlas usaremos los atributos tops y left. ¿Recuerdas que todos nuestros <li> están hasta arriba a la izquierda? Esto nos facilitará el posicionamiento de los iconos. Relativo a esta posición (hasta arriba a la derecha) daremos los valores de tops y left e iremos acomodando los iconos alrededor del círculo. También especificaremos la iamgen de fondo de cada anchor:

Quote
#home {
top: -20px;
left: 95px;
background-image: url('home.gif');
}

#tutos {
top: 20px;
left: 170px;
background-image: url('tutos.gif');
}

#files {
top: 90px;
left: 200px;
background-image: url('files.gif');
}

#search {
top: 155px;
left: 170px;
background-image: url('search.gif');
}

#mail {
top: 195px;
left: 95px;
background-image: url('mail.gif');
}

#id {
top: 155px;
left: 10px;
background-image: url('id.gif');
}

#write {
top: 90px;
left: -20px;
background-image: url('write.gif');
}

#logout {
top: 20px;
left: 10px;
background-image: url('logout.gif');
}

Y con todo esto ya hemos terminado. Pueden ver el producto terminado aquí. Es un rollo, yo sé; pero traten de analizarlo y no es tan difícil. Ahora bien, la aplicación de este menú sigue siendo un misterio para mi… pero tal vez alguien en algún lugar logre encontrarle un uso.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 11 | 11:43 AM
Fondos continuos en flash. Menú infinito.


1. Introducción.
En este tutorial, vamos a ver como generar un menú para nuestros sitios web que nunca finalice. Es decir, el menú realizará un scroll infinito tanto hacia arriba como hacia abajo. La orientación como podéis observar va a ser vertical, aunque la resolución del problema es análoga para un menú horizontal (las propiedades y, cambian por x y la propiedad height por width, mas adelante lo veremos).

Para conseguir este efecto utilizando flash, nos vamos a apoyar en la técnica de los fondos continuos.
Un fondo continuo, es una imagen de un tamaño determinado que esta en movimiento (usualmente como fondo de la película) continuamente mostrando una sensación de no finalizar nunca. Es decir, que cuando llega al final del desplazamiento a lo largo de un eje, vuelve a comenzar por el principio.
Por ejemplo con la imagen que se muestra a continuación se puede simular este efecto.



Descarga del archivo .fla

Como se puede observar con una imagen con cuatro círculos, simulamos un movimiento a través de la ventana (la película flash) continuo. Así permanecerá infinitamente, según nuestra programación.

[color=purple]Nota: Es necesario Flash Player 8 o superior para la correcta visualización de los ejemplos del tutorial. Desde esta misma página en la parte izquierda de navegación hay un enlace a la página de descargas de Flash Player de Adobe.

Para realizar este tutorial, vamos a utilizar Macromedia Flash 8 o superior y por supuesto algo de ActionScript para Flash, nada complejo por otra parte.
Los fondos continuos, son muy útiles para el diseño y desarrollo de sitios web y en muchos otros ámbitos de la programación, incluso de otras disciplinas.

En el diseño de sitios web, nos puede servir para en un determinado espacio de nuestro sitio, mostrar continuamente una publicidad determinada, simplemente como elemento decorativo y todo lo que se nos pueda ocurrir. En nuestro caso lo hemos orientado a la creación de un menú web con scroll sin fin. Esto nos puede ser muy útil cuando pretendemos mostrar una cantidad de opciones (de un determinado tamaño), en un área reducida de nuestro sitio web. Por ejemplo mostrar un menú que ocupa mas de 500 pixels de alto en un área de 150 pixels.

El uso de fondos continuos, no solo lo podemos conseguir con Flash, en muchas disciplinas podemos utilizar esta técnica. JavaScript, Ajax y otras tecnologías. En lenguajes tradicionales de programación, o en cualquier ámbito que lo precise.

Cuando disponemos de una imagen mas ancha/alta que el área que queremos mostrar, como es nuestro caso, la técnica consiste en trabajar con dos instancias de la misma imagen, colocadas una al lado de la otra en caso de scroll horizontal, o colocadas una encima de la otra en caso del vertical, y adyacentes entre si, sin separación intermedia.

Estas imágenes se van desplazando a lo largo del eje del movimiento, con una velocidad determinada, y en una dirección. Cuando una de las imágenes, sale por completo del área de visualización, la colocamos inmediatamente detrás de la otra (según el sentido de la dirección), y continuamos con el movimiento.

De este modo es como se consigue este efecto en nuestro caso.



Cuando la imagen a mostrar es menor en tamaño (bien ancho o alto y según el tipo de scroll horizontal o vertical), al área de visualización, también existen técnicas que nos permitirían solapar varias instancias, mas de 2 instancias y en función de los tamaños, y gestionarlas mediante algún tipo de array y orden para conseguir un efecto similar. De todos modos no veremos este caso en este tutorial, y nos centraremos en el caso de imágenes a mover mayores al área de visualización, de modo que solo utilizaremos dos instancias de la imagen. Como ejercicio para el lector (o un próximo tutorial de redribera), puede intentar desarrollar cualquier estructura que permita esta técnica, como pista les diré que el uso de un array con instancias de las imágenes y el orden de las mismas puede funcionar.

Para el ejemplo anterior hemos creado un movieclip (podéis descargar el código fuente del ejemplo), con cuatro círculos. Hemos situado dos instancias del clip tal y como hemos visto en la imagen anterior llamadas bg1 y bg2 y en el fotograma 1 de la escena principal hemos colocado el siguiente código ActionScript.

Code
[font=Courier]var bg_width=200;    //Ancho del documento para limitar el scroll.
var bg_speed=3;  //Velocidad del fondo al andar

this.onEnterFrame=function(){
mueve_fondo();
}

function mueve_fondo(){
//mover fondo
bg1._x=bg1._x+bg_speed;
bg2._x=bg2._x+bg_speed;
//repetir cuando sale por la derecha
if(bg1._x>bg_width){
bg1._x=bg1._x-2*bg1._width;
}
if(bg2._x>bg_width){
bg2._x=bg2._x-2*bg2._width;
}
}[/font]


El código en si se explica de la siguiente forma: Dos variables, bg_speed y bg_width determinan la velocidad a la que se mueve el fondo, y el ancho del área de visualización. Cuando se produce un evento de proceso de fotograma (e indicado en tiempo por el fps de la película), llamamos a la función mueve_fondo() y esta a su vez, realiza las siguientes acciones; desplazar a lo largo de la escena principal la posición x del clip del fondo bg1 y bg2, si uno de ellos sale del area de visualización y determinada por la variable bg_width, entonces lo situaremos detrás de la otra instancia bg1._x=bg1._x-2*bg1._width; y así sucesivamente.

Pasemos pues a ver como aplicamos estos conceptos al desarrollo de un menú infinito.

2. Crear un menú infinito.
Para realizar nuestro menú de navegación, hemos realizado unos cambios al ejemplo anterior. Vamos a darle algo de interactividad a los elementos que se desplazan en el fondo. Antes teníamos algunos círculos, y ahora vamos a poner unos botones que nos enlacen con algunas secciones de nuestra web, en el ejemplo enlazaremos con las secciones de redribera. Aquí hemos utilizado esta imagen como elemento para nuestros botones de enlaces.



El objetivo perseguido es la siguiente película flash.

Descarga del archivo .fla

Si movéis el ratón sobre esta película, cerca del borde superior o inferior, se desplaza un menú, sobre el que podemos acceder a distintas secciones de nuestro sitio web. El menú no tiene fin resultando en un movimiento cíclico, tanto hacia arriba como hacia abajo. Podéis descargar el fichero *.fla y ver como está construido.



Aquí están los elementos que hemos creado; la imagen de la libreta que vimos antes, la hemos importado a la biblioteca y hemos creado varios clips, que utilizan como fondo esta imagen y contienen una etiqueta de texto con el nombre de la sección. Hemos utilizado la tipografía inkburrow para los textos.

Los movieclips a los que hemos llamado blog_mc, contactar_mc, directorioweb_mc, foros_mc, juegos_mc y tutoriales_mc son clips que contienen una capa con la imagen de la libreta y otra capa con el texto de la sección. Los nombres de los clips son bastante descriptivos.

El movieclip libretas_mc es el clip interesante y que utilizaremos al igual que hicimos en el ejemplo anterior, como la imagen de fondo a desplazar infinitamente en un área de visualización mas pequeña.

El movieclip libretas_mc, presenta este aspecto.



Dos capas, una de ellas con todos los clips de botones mencionados anteriormente, y con nombres de instancia asignados, ldirectorio, lcontacto, ltutoriales, ljuegos, lblog y foros.

La capa acciones contiene en el fotograma 1 el siguiente código ActionScript.

Code
[font=Courier]stop();
var dominio="http://www.redribera.es/";

ldirectorio.onPress=function(){
gotoURL(dominio+"directorio/")
};
lcontacto.onPress=function(){
gotoURL("mailto:dev@redribera.es")
};
ltutoriales.onPress=function(){
gotoURL(dominio+"formacion/tutoriales/")
};
ljuegos.onPress=function(){
gotoURL(dominio+"games/")
};
lblog.onPress=function(){
gotoURL("http://www.coceandobites.blogspot.com")
};
lforos.onPress=function(){
gotoURL(dominio+"forumphpbb")
};

function gotoURL(url){
getURL(url,"_blank","POST");
}[/font]


Con este código, sencillamente asignamos enlaces a los clips creados como secciones, cuando presionamos con el ratón sobre ellos. Hemos definido nuestro dominio, en la variable dominio y vamos apuntando a diversas secciones dentro de nuestro sitio. Usamos para abrir una nueva ventana con el vinculo apuntado, la función getURL, cuya ayuda se puede consultar en Flash. De este modo lo que hacemos es dar algo mas de interactividad al fondo en movimiento, con flash lo podemos hacer, ya que desplazamos un clip de película, no únicamente una imagen.

En la escena principal hemos hecho igual que hicimos en el ejemplo anterior de prueba con los clips de los círculos.



Code
[font=Courier]En el fotograma 1 de la capa acciones, hemos insertado el siguiente código ActionScript.

var bg_height=150;    //Ancho del documento para limitar el scroll.
var bg_speed=0;  //Velocidad del fondo al andar

this.onEnterFrame=function(){
mueve_fondo();  //mover por fps
bg_speed=0;
if(_ymouse>0 and _ymouse < bg_height/3){
bg_speed=4
}
if(_ymouse>(bg_height - bg_height/3 )
and _ymouse < bg_height){
bg_speed=-4
}
}

function mueve_fondo(){
//mover fondo
bg1._y=bg1._y+bg_speed;
bg2._y=bg2._y+bg_speed;
//repetir cuando sale por abajo
if(bg1._y>bg_height){
bg1._y=bg1._y-2*bg1._height;
}
if(bg2._y>bg_height){
bg2._y=bg2._y-2*bg2._height;
}

//repetir cuando sale por arriba
if(bg1._y<-bg1._height){
bg1._y=bg1._y+2*bg1._height;
}
if(bg2._y<-bg2._height){
bg2._y=bg2._y+2*bg2._height;
}
}[/font]


La función mueve_fondo, ya la comentamos anteriormente, solo que en este caso, y para que veaís el cambio, el desplazamiento o scroll es vertical, y por ello hemos cambiado las propiedades _x de los clips, bg1 y bg2, por las propiedades _y y la propiedad de anchura _width por _height que es la de altura. La variable bg_width se transforma en bg_height.

Además incluimos una nueva comprobación para permitir un scroll ascendente, así como uno descendente.

Pasamos al código para el evento onEnterFrame, por defecto establecemos la velocidad del fondo a 0 con lo que este no se moverá. Pero si estamos posicionados con el ratón, cerca del tercio superior del área de visualización o cerca del tercio inferior, nuestro fondo se mueve realizando el scroll en uno u otro sentido, de ahí que la velocidad la hagamos positiva o negativa. La posición del ratón la detectamos por medio de las variables globales a la escena _xmouse e _ymouse, y cuya ayuda se puede consultar en Flash. Esto puede representar un problema para nosotros, ya que si os fijaís, el fondo no se detiene si desplazamos rápidamente el puntero del ratón de la película fuera de esta, cuando el fondo está moviéndose.

Esto es debido a que el último valor de las variables _xmouse e _ymouse, permanece en la memoria de la película si el puntero del ratón sale de ella. Y debido a la comprobación que hacemos dentro de onEnterFrame, esto supone un problema a la hora de detener el fondo para nosotros.

Seguidamente veremos como mejorar el menú con unos pequeños cambios para evitar este error.

3. Perfeccionar nuestro menú y evitar errores.
Evitar los problemas que ocasiona _xmouse e _ymouse, para nuestro objetivo, se podría hacer de diversas formas, y cada cual puede aportar la suya. Nosotros en este caso, y así además, cambiamos a una nueva estética y la probamos, hemos optado por insertar en la escena, dos nuevos clips con las imagenes siguientes, que nos servirán para desplazar el fondo, cuando nos desplacemos sobre ellas.



Bajo estas líneas, el resultado final de modificar nuestro fichero.

[url=]http://www.directorio24.net/redribera/formacion/tutoriales/flash/fondocontinuo_tutorial_b.flaDescarga del archivo .fla[/url]

Si descargáis y abrís el fichero fla, con Macromedia Flash, observaréis que hemos creado dos nuevos clips, con las imágenes mostradas, que hemos ubicado en la parte superior e inferior del área visible, la escena principal de la película Flash y les hemos asignado los nombres de instancia bup y bdown. El código ActionScript del fotograma 1 de la escena principal (capa Acciones), ahora ha cambiado por el siguiente.

Code
[font=Courier]var bg_height=150;    //Ancho del documento para limitar el scroll.
var bg_speed=0;  //Velocidad del fondo al andar
var rolling_up=false;
var rolling_down=false;

this.onEnterFrame=function(){
mueve_fondo();  //mover por fps
bg_speed=0;
if(rolling_up){bg_speed=4}
if(rolling_down){bg_speed=-4}
}

bup.onRollOver=function(){rolling_up=true;}
bup.onRollOut=function(){rolling_up=false;}
bdown.onRollOver=function(){rolling_down=true;}
bdown.onRollOut=function(){rolling_down=false;}

function mueve_fondo(){
//mover fondo
bg1._y=bg1._y+bg_speed;
bg2._y=bg2._y+bg_speed;
//repetir cuando sale por abajo
if(bg1._y>bg_height){
bg1._y=bg1._y-2*bg1._height;
}
if(bg2._y>bg_height){
bg2._y=bg2._y-2*bg2._height;
}

//repetir cuando sale por arriba
if(bg1._y<-bg1._height){
bg1._y=bg1._y+2*bg1._height;
}
if(bg2._y<-bg2._height){
bg2._y=bg2._y+2*bg2._height;
}
}[/font]


La función mueve_fondo, ni la hemos tocado. Sin embargo nos hemos deshecho de las propiedades, _xmouse e _ymouse que usabamos en el evento onEnterFrame, sustituyendolas por una comprobación a las variables rolling_up y rolling_down.

Variables que establecemos a true o false cuando se producen los eventos onRollOver y onRollOut sobre los nuevos clips creados, acción con la cual si detectamos si el puntero del ratón está dentro o fuera del area que mueve el fondo, incluyendo esto la misma película Flash.

Si quisieramos eliminar el las imagenes de los botones de scroll up y scroll down, al igual que teniamos en el primer ejemplo del menú, Flash nos permite realizar esto inmediatamente simplemente modificando la propiedad _alpha de los dos clips utilizados como botones, bup y bdown. Para ello no es necesario modificar código ActionScript, tan solo seleccionar las instancias en la escena principal y cambiarles el valor _alpha a 0.

El resultado es el siguiente:

Descarga del archivo .fla
Finalmente, hemos obtenido un menú con scroll infinito, que solo responde al scroll cuando estamos posicionados con el puntero del ratón en el area superior o inferior de la película.

Si queremos adaptar el área visible, tan solo debemos modificar el tamaño del lienzo de la película flash y el valor de la variable bg_height en el código ActionScript.

Esperamos que este tutorial os haya parecido interesante, y ya sabeís que como siempre, esperamos vuestros comentarios en el foro de redribera, o en la sección de comentarios de este tutorial, a la que podeís acceder desde el menú izquierdo en esta misma página.

Anexo
Modificación para obtener un menú finito

Cómo hacer para que al llegar al final no vuelva al principio, es decir, que no sea un menú infinito.

Bien, podeís fijaros en como quedaría la pélicula flash, modificada para conseguir este efecto diferente, en el que cuando llegamos al elemento superior del menú la animación se detiene, e igualmente sucede al arribar al elemento inferior del menú.

Descarga del archivo .fla

Conseguir este resultado no es del todo complejo, partiendo de los ficheros de los que ya disponiamos para realizar este tutorial. De hecho el resultado es un fichero menos complejo, del que podemos reaprovechar casi todo.

Fijaros en la imagen que os pongo bajo estas líneas, y que es como debe quedar la película flash a primer nivel, es decir en la escena principal.


Anteriormente disponiamos de dos instancias del clip de pelicula libretas_mc, dispuestas una bajo la otra, para conseguir el efecto de fondo continuo. Sin embargo para este nuevo problema ya no es necesario disponer de ambas instancias, y tan solo necesitaremos una de ellas, por lo que procederemos a eliminar una de las dos instancias duplicadas que teniamos y que llamabamos bg1 y bg2. En mi caso he eliminado la instancia llamada bg2, por lo que en la escena principal tan solo me queda la instancia bg1.

Aunque parece obvio, pero lo digo nuevamente, es importante tener en cuenta que la escena principal, la ventana de visualización, debe ser de menor tamaño que el clip con el menú que deseamos deslizar. Así mismo puesto que en este caso se trata de una solución finita del problema, deberemos ser muy cautos y disponer a mano del valor de la altura de la escena principal (en caso de un scroll horizontal del menú, el dato a vigilar sería la anchura de la escena). Por supuesto y para conseguir un buen efecto de visualización, sobre todo inicialmente, es conveniente situar la película con los menús adecuadamente dentro de la escena principal. Fijaos como yo la he situado mas o menos a "boleo", por el medio de la escena.

Una vez realizado este sencillo cambio, tan solo debemos modificar minimamente la función mueve_fondo() del fotograma 1 de la capa Acciones, para que cambie su funcionalidad teniendo en cuenta que ahora tan solo tenemos una instancia del clip libretas_mc y que deseamos que el clip se detenga (paralice el scroll), al llegar al limite superior o al inferior de la película que contiene los menús (bg1, instancia de libretas_mc).

Así quedarían los cambios:

Code
[font=Courier]var bg_height=150;    //Alto del documento para limitar el scroll del fondo.
var bg_speed=0;  //Velocidad del fondo al andar
var margen=20;
var rolling_up=false;
var rolling_down=false;

this.onEnterFrame=function(){
mueve_fondo();  //mover por fps
bg_speed=0;
if(rolling_up){bg_speed=4}
if(rolling_down){bg_speed=-4}
}

bup.onRollOver=function(){rolling_up=true;}
bup.onRollOut=function(){rolling_up=false;}
bdown.onRollOver=function(){rolling_down=true;}
bdown.onRollOut=function(){rolling_down=false;}

function mueve_fondo(){
//mover fondo
bg1._y=bg1._y+bg_speed;

//comprobación de limite superior del menú
if(bg1._y>margen){
bg1._y=margen;
}

//comprobación del limite inferior del menú
if(bg1._y<-(bg1._height-bg_height+margen)){
bg1._y=-(bg1._height-bg_height+margen);
}
}[/font]


En rojo están marcados los cambios del Script del fotograma 1 de la capa acciones. Si os fijaís bien, con respecto a la anterior función mueve_fondo(), para un menú infinito, hemos realizado cambios de lógica, ya que ahora tan solo debemos controlar un clip de pelicula (la instancia bg1), con respecto a la escena principal. Creo que la lógica es suficientemente clara y no necesita mayor explicación. Tan solo comentar que hemos añadido una nueva variable margen, cuyo valor hemos establecido a 20, para que deje un pequeño margen tanto inferior como superior y los menús no queden demasiado pegados a los bordes de la escena principal. Este valor se puede variar al gusto del consumidor.

Como último apunte si variaís la altura de la película, debereís variar el valor de la variable bg_height. Realmente supongo que este valor se podrá consultar en tiempo de ejecución mediante ActionScript, pero bueno en estos momentos no se como se consulta, hasta ahora nunca me había hecho falta.
Espero que este nuevo apunte os sea de utilidad.[/size]

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 12 | 1:59 PM
Sistemas de navegación en Flash, botoneras y menús

Menú 1
Comencemos por el primer menú que es el más sencillo y menos complicado. El efecto que queremos es que cuando situemos el cursor sobre un botón éste se ilumine de un color y al mismo tiempo ilumine del mismo color dos líneas horizontales, una situada encima de los botones y otra debajo.

Empezamos creando un documento nuevo en flash y le damos las siguientes dimensiones:

  • 600 px de ancho por 50 px de alto. Tú elegirás las dimensiones que mejor se adapten a tus necesidades.
  • Cambia el nombre de la Capa1 por: fondo, y en ella dibuja un rectángulo sin líneas, que cubra completamente la película y dale un degradado lineal que vaya de gris (#333333) a gris (#666666).
  • Selecciona la Herramienta Transformación de relleno

  • Y dale clic al fondo, gira el degradado para que quede el cuadradito central hacia arriba y luego arrastra para que los selectores queden junto al borde superior.

    Los Botones
    Inserta una nueva capa y dale como nombre Botones. Si quieres puedes colocar cada botón en una capa diferente. En este ejemplo vas a colocar todos los botones en una misma capa.

    Puedes tener tantos botones como necesites. Crearemos un botón, los demás los crearás tú, los pasos son los mismos, solo cambia el color y el AS.

    Dibuja un rectángulo de 130 de ancho por 25 de alto (el tamaño dependerá de ti) colócalo junto al borde izquierdo y que quede centrado entre los bordes superior e inferior. Conviértelo en botón, ponle como nombre de instancia rojo_btn. Dale doble clic para editarlo. Inserta un keyframe al estado sobre del botón.

    Selecciona el relleno y conviértelo a gráfico o si prefieres conviértelo a Movie Clip.

    Dale doble clic al gráfico (o MC) que creaste, selecciona el relleno y dale un degradado lineal de rojo (#FF0000) a gris (#424242), con la herramienta transformación de relleno acomoda el degradado para que el cuadro central quede junto al borde superior, tal y como hiciste anteriormente para el fondo (lo mismo debes hacer con el relleno del estado reposo del botón). Dale clic al candado para bloquear esta capa.

    Agrégale una nueva capa. En ésta dibuja un nuevo rectángulo del mismo ancho con un alto de 10, colócalo de manera que su borde inferior quede un poco debajo del centro del anterior. Selecciónalo y dale un relleno blanco con 20% de alfa. Para terminar el efecto sobre el botón, coloca un rectángulo blanco con alfa 15% del mismo ancho con una altura de 1 px sobre el relleno que ya tienes. Otro relleno blanco con alfa 7% sobre el anterior y un último con alfa 3%. Has lo mismo debajo del relleno central, uno de alfa15, alfa 7 y alfa 3.

    Con todo esto tendrás el efecto brillante del botón.

    No te olvides de darles nombre de instancia a los demás botones:

    verde_btn azul_btn amarillo_btn naranja_btn

    En la Figura 5 puedes ver como queda el gráfico del relleno del estado Sobre del botón. Capa 2 es la que contiene los efectos de brillo y Capa 1 es donde está el degradado rojo.

    Regresa a la línea de tiempo principal e inserta una tercer capa con nombre texto, aquí colocarás el texto de todos los botones. Una vez escrito el texto puedes separarlo (Ctrl. + cool y darle el efecto que desees.

    Inserta otra capa y ponle de nombre separadores. Aquí dibujarás una pequeña barra vertical que separará un botón de otro.

    Crea un rectángulo de 2.3 de ancho por 25 de alto. Usa el mismo degradado que el de la barra de la capa de fondo, sólo que acomoda el degradado en forma vertical conviértelo a gráfico y sitúalo a la derecha del primer botón

    Este es el separador que he agrandado para que se aprecie mejor.

    Para los demás botones solo tendrás que colocar otras instancias del mismo símbolo a la derecha. Bloquea esta capa e inserta otra, nómbrala: lineas.

    En esta última capa dibuja dos líneas horizontales de color #D4D0C8 el grosor varía según tu gusto, el tamaño de la línea es igual al ancho de la película, en nuestro caso 600 px. Una debe estar sobre el borde superior de los botones y la otra sobre el borde inferior. Selecciona las dos líneas y conviértelas a MC. Utiliza como nombre lineas. En la ventana de propiedades dale el nombre de instancia linea_mc.

    Dale doble clic al MC linea para editarlo. Selecciona el primer keyframe y en la ventana de propiedades ponle como nombre de instancia: sincambio.

    Suponiendo que quieres usar 5 botones, el primero de color rojo, el segundo verde, el tercero azul, el cuarto amarillo y otro naranja deberás usar entonces 6 keyframes. El primer keyframe para dejar el color de la línea como está, el segundo para darle a la línea el color rojo y así sucesivamente.

    Inserta un nuevo keyframe (KF a partir de aquí) y dale de nombre rojo, selecciona las dos líneas y ponle el color rojo. Inserta 4 KF más ponles nombre según el color de la línea (verde, azul, amarillo y naranja) y cambia de color las líneas.

    Como estás usando varios keyframes y para darle un aspecto “más limpio” a la línea de tiempo puedes insertar los demás KF un poco separados, pero si deseas puedes ponerlos uno junto al otro esto no afecta en nada es solo cuestión de aspecto.

    En esta imagen puedes apreciar el MC lineas, con el fotograma “rojo” seleccionado.

    El Código
    Si aún no lo has hecho, regresa a la línea de tiempo principal, inserta una nueva capa y ponle de nombre AS. En el primer fotograma de esta capa escribiremos todo el código, tanto el que permite el efecto de iluminación como el de los enlaces de los botones. Puedes también insertar el código en cada botón y ya no necesitarás darles nombre de instancia a cada botón.

    Selecciona el fotograma de la capa AS y abre el panel de acciones, escribe el siguiente código que he comentado para mayor claridad.

    Quote
    /*Primero le decimos a linea_mc que se detenga
    en su primer fotograma para que las líneas no
    cambien de color hasta que se pase el cursor
    sobre algún botón.*/
    _root.linea_mc.stop();
    //Comencemos con el botón rojo
    //Al poner el ratón sobre él
    rojo_btn.onRollOver = function() {
    _root.linea_mc.gotoAndStop("rojo");
    };
    //Al quitar el ratón vuelva al color por defecto
    rojo_btn.onRollOut = function() {
    _root.linea_mc.gotoAndStop("sincambio");
    };
    //por último al hacer click que vaya o haga
    //lo que queremos
    rojo_btn.onPress = function() {
    getURL("http://www.cristalab.com/foros/", "_blank");
    };
    //Botón Verde
    verde_btn.onRollOver = function() {
    _root.linea_mc.gotoAndStop("verde");
    };
    verde_btn.onRollOut = function() {
    _root.linea_mc.gotoAndStop("sincambio");
    };
    verde_btn.onPress = function() {
    //tu código aquí;
    };
    //Botón Azul
    azul_btn.onRollOver = function() {
    _root.linea_mc.gotoAndStop("azul");
    };
    azul_btn.onRollOut = function() {
    _root.linea_mc.gotoAndStop("sincambio");
    };
    azul_btn.onPress = function() {
    //tu código aquí;
    };
    //Botón Amarillo
    amarillo_btn.onRollOver = function() {
    _root.linea_mc.gotoAndStop("amarillo");
    };
    amarillo_btn.onRollOut = function() {
    _root.linea_mc.gotoAndStop("sincambio");
    };
    amarillo_btn.onPress = function() {
    //tu código aquí;
    };

    Al finalizar tendrás algo parecido a lo de la Figura 8

    Menú 2
    Crearemos un menú vertical, que cuando damos clic sobre una opción las otras opciones se deslizan dejando visibles las subopciones. Esto también lo puedes hacer más fácilmente, como aconseja Freddie, con el componente Acordion que viene en Flash MX 2004.

    Comencemos con un documento de flash nuevo (Ctrl. + N). Cambiamos el tamaño del escenario a 210 px de ancho por 400 px de alto.

    Este menú se compone de 3 botones principales (boton1, boton2, boton3) con 3 subopciones cada uno (sub1, sub2, sub3). Primero haremos los 6 botones.
    Para los botones principales, dibuja un rectángulo sin líneas de 200 por 50 conviértelo a botón y quítalo del escenario, quedará en la biblioteca, allí dale clic derecho al botón y elige duplicar. Ya tenemos los 3 botones principales. Ponles el texto que llevará cada botón.

    Dibuja otro rectángulo de 130 px de ancho por 40 px de alto y conviértelo en botón, dale los efectos que veas conveniente. Duplícalos en la biblioteca. Listo hasta aquí están los 6 botones que necesitamos.

    Para terminar con la parte de dibujo, haremos una especie de viñeta que estará sobre los botones y luego insertaremos una instancia de la viñeta debajo de los botones que se deslizará hacia abajo cuando hagamos clic sobre algún botón principal.

    Dibuja un rectángulo de 200 por 50 con las esquinas redondeadas en 10.

    Selecciona la mitad superior y elimínala te quedará un medio rectángulo de 200 por 25. Esta forma deberás colocarla sobre un rectángulo del mismo ancho y de largo que pase el borde inferior del escenario de color igual al fondo de tu película, esto es para que oculte los botones de subopciones cuando los coloques en el menú y solo se vean al presionar un botón. Ver Figura 10. Ponle los adornos que juzgues necesarios. Conviértela a gráfico con nombre vineta. Quítala del escenario. Tu viñeta inferior quedará parecida a la de la imagen de abajo:

    El siguiente paso es acomodar los botones y las viñetas dándole el aspecto que presentará el menú al cargarse la película.

    Arrastra la viñeta superior al escenario, algo debajo del borde superior y céntrala horizontalmente. Si solo creaste una viñeta para usarla arriba y abajo, deberás rotarla para que dé el aspecto deseado. Selecciona el objeto del escenario y conviértelo a MC con nombre principal y nombre de instancia principal_mc. Dale doble clic para editarlo.

    Para cada botón necesitarás usar una capa, puedes llamarlas boton1, boton2, boton3, vineta sup, vineta inf.

    Inserta el boton1 debajo de la viñeta dejando un pequeño espacio entre ellas. Luego el boton2, boton3 y la viñeta inferior. No olvides, cada botón y las viñetas en su propia capa. También debes darle a cada botón un nombre de instancia, boton1_btn, boton2_btn, boton3_btn

    Deberías tener algo así:

    Agrega 9 capas entre la primera capa de abajo y la segunda, cambiales el nombre por sub1, sub2, sub3…sub9. Inserta un keyframe (F6) en el fotograma 5 para cada capa excepto para la viñeta superior y el botón1, que bastará con insertar fotogramas sencillos (F5) pues éstos no tienen ninguna animación, por el momento no lo hagas para las capas sub4 a sub9. Oculta las capas donde están boton2, boton3 y la viñeta inferior, simplemente para que no te estorben al momento de acomodar los botones de las subopciones. En la capa sub1 arrastra una instancia del botón sub1, capa sub2 instancia de sub2 y capa sub3 instancia de sub3. Tendrás algo parecido a la Figura 12. Dales nombre de instancia, sub1_btn, sub2_btn, sub3_btn.


    Fíjate que sólo está visible el contenido de las capas de la viñeta superior, del boton1 y sus subopciones. También es buen momento para que consideres agrupar las capas en carpetas.

    Ahora haremos la animación de movimiento que se ejecutará cuando presionemos el botón Opción 1. Cuando esto ocurra, los botones 2 y 3 más la viñeta inferior se desplazan hacia abajo, al hacer nuevamente clic sobre este botón o sobre los otros, todo vuelve a su posición anterior o estado de reposo. Al presionar Opción 2, el botón tres y la viñeta se deslizan hacia abajo y regresan, con el botón 3 sólo la viñeta se desliza.

    Primero acomodaremos la línea de tiempo con los keyframes y las instancias de los botones, para luego realizar la animación. Iremos capa por capa.
    En la capa vineta inf inserta más KF en los fotogramas 15, 25, 26, 35, 45, 46, 55 y 65

    Capa boton 3 en: 15, 25, 26, 35 y 45. Un fotograma (F5) en el 65
    Capa boton 2 en: 15, y 25. Fotograma en el 65.
    Capa boton 1 un fotograma en el 65
    Capas sub1, sub2 y sub3 fotogramas (F5) en el 25.

    Hasta el momento tu línea de tiempo debería lucir más o menos como en la Figura 13

    Para terminar añadiremos los demás botones de subopciones. En las capas sub4, sub5 y sub6 agrega KF en el fotograma 26. De la biblioteca arrastra una instancia del botón sub1 a la capa sub 4, instancia de sub2 a sub 5, y por último una instancia de sub 3 a la capa sub 6. Acomódalos debajo del botón Opción 2. Ponles nombre de instancia sub12_btn; sub22_btn y sub32_btn. En estas tres capas inserta un fotograma (F5) en el fotograma 45.

    Ahora solo nos queda arrastrar instancias para las subopciones del botón 3, usa las capas sub7, sub8 y sub9 desde el fotograma 46 al 65. Figura 14

    La parte más sencilla es esta, crear las animaciones de movimiento. Coloca la cabeza lectora sobre el fotograma 15, selecciona los botones Opción 2, Opción 3 y la viñeta inferior; arrástralos hacia abajo (Shift + Flecha abajo) hasta dejar visibles los botones de subopciones. En la capa vineta inf selecciona cualquier fotograma entre el 5 y el 15, en la ventana de propiedades elige Animar: Movimiento. Luego has lo mismo en algún fotograma entre el 15 y el 25. También para las capas boton3 y boton2.

    Si por curiosidad pasas la cabeza lectora desde el fotograma 5 hasta el 25, verás como se ve la animación, mostrando las subopciones del botón1 y volviéndolas a ocultar.

    Continuemos. Coloca la cabeza lectora en el fotograma 35, selecciona el botón3 y la viñeta inferior, deslízalas hacia abajo hasta que se vean las subopciones. Crea una animación de movimiento entre los fotogramas 26 y 35 de las capas viñeta inf y boton3, otra entre sus fotogramas 35 y 45.
    Sólo resta hacer la animación para el botón 3. En el fotograma 55 arrastra la viñeta inferior hasta que se vean las subopciones, en esta capa vineta inf agrega una animación de movimiento entre los fotogramas 46 y 55 y otra entre los fotogramas 55 y 65. Al terminar tu línea de tiempo lucirá como en la Figura 15

    Si en el Menú eliges Control --- Rebobinar y luego Control --- Reproducir, verás la animación completa.

    Insertaremos una nueva capa encima de todas y le daremos el nombre de AS. En esta capa inserta KF en los fotogramas 1, 15, 25, 35, 45, 55 y 65. En el panel de acciones ponles a cada uno de ellos un Stop(); para que no se ejecute automáticamente.

    El efecto se basa principalmente, en que cuando se carga la película, el MC principal_mc tendrá la cabeza lectora en su fotograma 1, luego cambiará de posición a medida que presiones algún botón. Regresa a la escena principal, agrega una nueva capa y llámala AS. En ella insertarás uno de los dos grupos de código que a continuación te doy. La primer opción está hecha en base a sentencias If, Else, la segunda usando un segundo Movie Clip que servirá de apoyo para lograr un efecto mejorado, cuando ensayes las dos notarás la diferencia. No olvides que sólo debes tener una de las opciones a la vez.

    El Código
    Opción 1 Utilizando If, Else

    Quote
    /*Al cargarse la película, la cabeza lectora estará
    en el fotograma 1 de principal_mc.
    Cuando presionemos algún botón, ésta se moverá al
    fotograma que le indiquemos, ejecutará la animación y
    se detendrá en el siguiente fotograma de principal_mc
    donde encuentre la acción Stop(). Por esto es que necesitamos
    saber en dónde está la cabeza lectora cuando presionamos
    algún botón, pues de esto dependerá a donde la mandaremos*/
    _root.principal_mc.boton1_btn.onPress = function() {
    /*averiguamos en que fotograma está la cabeza
    lectora dentro de principal_mc */
    var fotoactual = _root.principal_mc._currentframe;
    /*preguntar si está en el 15, es decir si
    ya se ha presionado antes y están visibles
    sus subopciones. Si es así que corra la
    película desde allí */
    if (fotoactual == 15) {
    _root.principal_mc.play();
    //de lo contrario que las muestre
    } else {
    _root.principal_mc.gotoAndPlay(5);
    }
    };
    //fin función botón1
    _root.principal_mc.boton2_btn.onPress = function() {
    var fotoactual = _root.principal_mc._currentframe;
    /*preguntar si está en el 35, es decir si
    ya se ha presionado antes y están visibles
    sus subopciones */
    if (fotoactual == 35) {
    _root.principal_mc.play();
    //sino es así, que muestre las subopciones
    } else {
    _root.principal_mc.gotoAndPlay(26);
    }
    };
    //fin función botón2
    _root.principal_mc.boton3_btn.onPress = function() {
    var fotoactual = _root.principal_mc._currentframe;
    /*preguntar si está en el 55, es decir si
    ya se ha presionado antes y están visibles
    sus subopciones */
    if (fotoactual == 55) {
    _root.principal_mc.play();
    //sino es así, que muestre las subopciones
    } else {
    _root.principal_mc.gotoAndPlay(46);
    }
    };

    Tal vez te preguntes por qué usar el mismo nombre de variable en todos los botones ¿no causará que Flash devuelva error en algún lado?, la respuesta es no, porque al estar declarada dentro de una función, automáticamente deja de estar disponible una vez ha finalizado de ejecutarse toda la acción de esta función.

    Me olvidaba, debajo de ese código puedes escribir las acciones para las subopciones, puedes hacerlo por ejemplo así:

    Quote
    _root.principal_mc.sub1_btn.onPress = function () {
    getURL("http://www.cristalab.com","_blank");
    }

    Opción 2 Utilizando un MC de apoyo
    En la escena principal elimina la capa AS. Crea un nuevo MC de la siguiente manera: en el Menú elige Insertar --- Nuevo Símbolo (Ctrl + F8), elige Clip de Película, dale por nombre: apoyo. Una vez hecho esto inserta keyframes en el fotograma 1, 2, 10, 11, 20, 21, 30, 31. Abre el panel de acciones y escribe el siguiente código:

    Cuando termines regresa a la escena principal e inserta una instancia de este MC en algún lugar fuera del escenario, ponle nombre de instancia bapoyo_mc

    Ahora deberás cambiar las acciones en los fotogramas del MC principal_mc de este modo

    Tendrás que modificar los botones 1, 2 y 3. Por eso ve viendo la posibilidad de aprender a usar el componente acordeón de Flash MX 2004.

    Borra todos los nombres de instancia de los botones 1, 2 y 3 en cada keyframe. Ya no necesitarás usar nombres de instancia pues el código irá directo en cada botón. Una vez que hayas borrado todos los nombres de instancia:

  • Para el botón1 inserta KF en los fotogramas 1, 15 y 35
  • Para botón2 deberás tener KF en los fotogramas 1, 5, 15, 25, 35 y 55
  • El botón3 déjalo como está.

    El aspecto de tu línea de tiempo será algo como en la Figura 16

    Llegamos al final, nos queda colocar las acciones para los botones.




    Espero que no te hayas aburrido antes de finalizar este sencillo menú.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 13 | 6:23 PM
    Novedoso menú de navegación con CSS3

    Hay muchas formas de añadir navegación a tu sitio: Mediante pestañas, barras, menús, menús desplegables… En esta entrada explicaremos cómo crear un menú desplegable utilizando CSS3 y sus propiedades (Al ser CSS3 no será válido por los estándares).

    HTML
    Su estructura HTML sería así:

    Quote
    <div id="menubar">
    <ul id="navmenu">
    <li><a href="javascript:void()" target="_self">The site</a>
    <ul>
    <li class="start"><a href="#" target="_self">About</a></li>
    <li class="expand"><a href="#" target="_self">My account</a>
    <ul>
    <li class="start"><a href="#" target="_self">Profile</a></li>
    <li><a href="#" target="_self">Change password</a></li>
    <li><a href="#" target="_self">Change avatar</a></li>
    <li><a href="#" target="_self">My submissions</a></li>
    <li class="end"><a href="#" target="_self">My awards</a></li>
    </ul>
    </li>
    <li><a href="#" target="_self">Lorem</a></li>
    <li class="end"><a href="#" target="_self">Ipsum</a></li>
    </ul>
    </li>
    <li><a href="javascript:void()" target="_self">Articles</a></li>
    <li><a href="javascript:void()" target="_self">Interviews</a></li>
    <li><a href="javascript:void()" target="_self">Partners</a></li>
    </ul>
    </div>

    El menú hará un float en el top del documento, aunque los usuarios hagan scroll, el menú seguirá visualizándose. (Después mostraremos el ejemplo).

    CSS
    Ahora vamos a aplicar el código CSS para el primer nivel de expansión del menú. Se aplica la propiedad webkit box shadow para aplicar sombra al menú (Solo válido para Safari aunque probablemente será compatible en las versiones siguientes de los demás navegadores). La propiedad border-radius aplica bordes redondeados al menú, complementándose con la sombra. La última línea del código siguiente hará que el fondo de menubar top sea invisible:

    Quote
    ul#navmenu ul {
    margin: 0;
    border: 0 none;
    padding: 0;
    width: 250px;
    list-style: none;
    display: none;
    position: absolute;
    top: 25px;
    left: 0;
    -webkit-box-shadow: 10px 10px 10px #CCCCCC;
    -webkit-border-radius: 5px;
    }

    ul#navmenu ul li {
    float: none; /*For Gecko*/
    display: block !important;
    display: inline; /*For IE*/
    background-image:none;
    }

    El estilo para la barra principal del menú sería esta:

    Quote
    ul#navmenu a {
    padding: 0 10px;
    float: none !important; /*For Opera*/
    float: left; /*For IE*/
    display: block;
    color:#000000;
    line-height:25px;
    text-decoration: none;
    height: auto !important;
    height: 1%; /*For IE*/
    text-align:center;
    }

    ul#navmenu a:hover,
    ul#navmenu li:hover a,
    ul#navmenu li.iehover a {
    border-right-color: #CCC;
    border-bottom-color: #CCC;
    color: #FFFFFF;
    background-image:url('images/menubar_hover.jpg');
    }

    El primer menú que se expande tendrá la flecha colocada a la derecha (es decir, se puede expandir en más enlaces). Tendrá bordes redondeados en la parte de abajo, por lo tanto aplicaremos -moz-border-radius-bottomleft y -webkit-border-bottom-left-radius.

    Quote
    ul#navmenu li:hover li a,
    ul#navmenu li.iehover li a {
    float: none;
    line-height:25px;
    width:230px;
    text-align:left;
    color: #000000;
    background-image:none;
    background-color:#FFF;
    border-bottom:none;
    }

    /* 2nd Menu Hover Persistence */
    ul#navmenu li:hover li a:hover,
    ul#navmenu li:hover li:hover a,
    ul#navmenu li.iehover li a:hover,
    ul#navmenu li.iehover li.iehover a {
    color: #FFF;
    background-image:url('images/menu_ex_hover_bg.jpg');
    background-repeat:repeat-x;
    border-bottom:none;
    }

    ul#navmenu ul li
    {
    width:250px;
    padding:0px;
    background-color:#FFF;
    border: 1px solid #999999;
    border-top:none;
    border-bottom:none;
    }
    ul#navmenu ul li.start
    {
    background-color:#FFF;
    border: 1px solid #999999;
    border-top:none;
    border-bottom:none;
    padding-top:5px;
    }
    ul#navmenu ul li.end
    {
    -moz-border-radius-bottomleft:7px;
    -webkit-border-bottom-left-radius:7px;
    -moz-border-radius-bottomright:7px;
    -webkit-border-bottom-rightright-radius:7px;
    padding-bottom:5px;
    background-color:#FFF;
    border: 1px solid #999999;
    border-top:none;
    }

    El estilo del segundo nivel de expansión del menú cuenta con una nueva imagen de fondo cuando pasamos el ratón por encima. En .start, empezamos aplicando borde redondeado arriba (top) a la derecha, mientras que en .end, aplicamos borde redondeado abajo (bottom), en ambos lados, a la izquierda y a la derecha.

    Con esto ya habríamos terminado el diseño del menú, pero…

    Un poco de Javascript
    Sin javascript no podemos hacer que el menú funcione correctamente en IE:

    Quote
    navHover = function() {
    var lis = document.getElementById("navmenu").getElementsByTagName("LI");
    for (var i=0; i < lis.length; i++) {
    lis[i].onmouseover=function() {
    this.className+=" iehover";
    }
    lis[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" iehover\\b"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", navHover);

    Fixes en IE 6
    Desafortunadamente, IE 6 no interpreta el float arriba como nosotros quisiéramos, entonces el menú no nos acompaña cuando hacemos scroll. Para solucionar esto hay que aplicar un pequeño parche en javascript:

    Quote
    function move_box()
    {
    var offset = 0;
    var element = document.getElementById('menubar');

    element.style.top = (document.documentElement.scrollTop + offset) + 'px';
    }

    Debes editar el HTML de tu sitio e insertar el código expuesto anteriormente en el body, con sus correspondientes tags <script type”text/javascript”>el código</script>.

    Después debemos aplicar comentarios condicionales para definir el código anterior, además de modificar un poco el CSS, alterando la posición de fixed a absolute (recordamos, esto solo afectará a IE 6):

    Quote
    <!--[if lt IE 7]>
    <style type="text/css">
    #menubar {
    position: absolute;
    top: 0px;
    left: 0px;
    }
    </style>
    <script type="text/javascript">
    window.setInterval(move_box, 1);
    </script>
    <![endif]-->

    ¿Y las imágenes?
    En la entrada hemos incluido varios elementos gráficos e imágenes. Si deseáis incluirlas por defecto en vuestro menú, podéis hacerlo si descargáis el código fuente del menú al completo (las imágenes se encuentran en la carpeta “images”).

    Descargar el código fuente del menú en .zip.

    Finalmente os ofrecemos un ejemplo de su funcionamiento (podéis comprobar lo avanzado que es CSS3, sobre todo si usáis Safari, ya que veréis bordes redondeados y sombras sin usar ninguna imagen para dicho proceso):

    Ver el ejemplo.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 14 | 6:46 PM
    Crear un menú horizontal simple con CSS

    Ahora vamos a crear nuestro menú horizontal de forma simple con CSS. Empezemos:

    Usaremos listas para crear este menú horizontal. Consta de 8 enlaces (por defecto, podemos incluir cuantos queramos):

    Código HTML

    Quote
    <ul id=”button”>
    <li><a href=”#”>Home</a></li>
    <li><a href=”#”>About</a></li>
    <li><a href=”#”>Services</a></li>
    <li><a href=”#”>Clients</a></li>
    <li><a href=”#”>Products</a></li>
    <li><a href=”#”>F.A.Q</a></li>
    <li><a href=”#”>Help</a></li>
    <li><a href=”#”>Contact Us</a></li>
    </ul>

    Pero claro, este menú no tiene estilo (CSS). Sin estilo se muestra así:

    Código CSS
    Vamos aplicarle estilo pues. Solo usaremos un nombre de ID para aplicar CSS. Se llamará “button”:

    Quote
    #button {
    padding: 0;
    }

    El código anteriormente expuesto eliminará el padding que pueda haber por defecto en la lista de elementos.

    Como vamos a crear un menú horizontal, la lista deberá ser horizontal, así que diremos que se dispongan en línea (display: inline):

    Quote
    #button li {
    display: inline;
    }

    Nos quedará algo parecido a esto:

    Ahora viene lo divertido. Vamos a aplicar los colores, fuentes y tamaños del menú (a nuestro gusto, claro está):

    Quote
    #button li a {
    font-family: Arial;
    font-size:11px;
    text-decoration: none;
    float:left;
    padding: 10px;
    background-color: #2175bc;
    color: #fff;
    }

    Y el menú va quedando de esta manera:

    Vamos a aplicar un efecto :hover al mover el ratón encima de un elemento de la lista (menú). Nótese la diferencia de padding, margin y color de fondo que mostraremos:

    Quote
    #button li a:hover {
    background-color: #2586d7;
    margin-top:-2px;
    padding-bottom:12px;
    }

    El efecto sería este:

    Finalización y ejemplo

    Ya está listo. ¿Muy simple, verdad? Podemos ver un ejemplo del funcionamiento del menú.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 15 | 1:08 PM
    Diseñando un bonito menú vertical con CSS

    En este tutorial vamos a enseñaros como crear un elegante menú vertical con CSS. Este tutorial es muy recomendable para principiantes, al igual que el otro sobre crear un menú horizontal.

    En este tutorial veremos el efecto hover en los menús, lo que es muy bueno si deseas aprender más allá de crear un menú un poco simple. La imagen con la que ilustramos esta entrada corresponde con la previsualización del menú. Un menú sencillo a la vez que elegante creado mediante listas.

    Código CSS
    Como podemos observar, el código CSS simplemente es aplicar estilos a unas listas. Cada lista formará un item del menú, que luego definiremos por HTML:

    Quote
    .main_cont
    {
    float:left;
    width:220px;
    background-color:#4d7986;
    padding:10px;
    }

    .menu_top_bg
    {
    width:223px;
    background:url(../grfx/menu_top_bg.gif) repeat-x;
    height:22px;
    padding-top:8px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#FFFFFF;
    font-weight:bold;
    text-align:center;
    margin-bottom:1px;
    }

    .sub_menu ul
    {
    padding:0px;
    margin:0px;
    }

    .sub_menu ul li
    {
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#FFFFFF;
    <a title="line-height" href="http://www.cssblog.es/css-la-propiedad-line-height/">line-height</a>:32px;
    border-bottom:1px dotted #93bcc3;
    list-style-type:none;
    text-indent:8px;
    }

    .sub_menu ul li a
    {
    text-decoration:none;
    color:#FFFFFF;
    }

    .sub_menu ul li a.selected
    {
    background:url(../grfx/menu_selected.gif) no-repeat;
    float:left;
    width:242px;
    height:32px;
    }

    .sub_menu ul li a:hover
    {
    background:url(../grfx/menu_selected.gif) no-repeat;
    float:left;
    width:242px;
    height:32px;
    }

    Usaremos este código para llamar al código CSS en el documento:

    Quote
    <link href="css/left_menu.css" rel="stylesheet" type="text/css" />

    Código HTML
    Finalmente usamos el siguiente código HTML para el efecto final:

    Quote
    <div class="main_cont">
    <div class="menu_top_bg">Navegacion</div>
    <div class="sub_menu">
    <ul>
    <li><a href="#" class="selected">Tu texto 1</a></li>
    <li><a href="#">Tu texto 2</a></li>
    <li><a href="#">Tu texto 3</a></li>
    <li><a href="#">Tu texto 4</a></li>
    <li><a href="#">Tu texto 5</a></li>
    <li><a href="#">Tu texto 6</a></li>
    </ul>
    </div>
    </div>

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Menús (escribimos aquí sobre la cosa)
    Búscar: