Mini Slide Navigation es un menú de navegación horizontal creado con CSS y Javascript que tiene la particularidad de que el indicador de posición se desliza.
Yo hice algo muy parecido para una versión de este blog, pero con un ligero efecto de easing en el deslizador con Flash. Dos alternativas con ventajas e inconvenientes en los dos casos. A continuación, muestro un tutorial sobre la creación del menú con Flash. Es conveniente haber leído anteriores tutoriales sobre Flash y XML que hay en el blog, o tener nociones sobre esta materia.
1.- Creamos un documento XML con el nombre "menu.xml", donde pondremos las opciones de menu.
<content> <page src="index.php" titulo="Principal"/> <page src="#" titulo="Portafolio"/> <page src="#" titulo="Servicios"/> <page src="#" titulo="Contacto"/> </content>
2.- Sobre una película en blanco, creamos un nuevo símbolo. Elegimos "clip
de película" y le asignamos un nombre, por ejemplo "item_mc".
3.- Dentro de
este clip de película, en una capa, creamos una caja de texto dinámico con
el nombre de instancia "etiqueta_txt".
4.- Dentro del mismo clip de película
y en otra capa creamos un botón -en mi ejemplo, invisible- con el nombre de
instancia "Rectangulo_btn".
5.- Volvemos a la escena principal y abrimos el panel de biblioteca (CTRL+L).
Seleccionamos el clip de película "item_mc", hacemos click con el botón derecho
sobre él y elegimos la opción "Vinculación...". Habilitamos la opción "Exportar
para Actionscript" y lo identificamos como "item_mc".
6.- Sobre el escenario creamos un rectángulo que hara las funciones de deslizador.
Lo convertimos en clip de película y le damos como nombre de instancia "Rastro_mc".
7.- Ahora, tan sólo nos queda asignar acciones. Sobre un fotograma:
var t=0
var espacio = 70 //Espacio entre los botones
menuXml = new XML();
menuXml.ignoreWhite = true;
menuXml.onLoad = function(success) {
if (success) {
menuItem = menuXml.firstChild.childNodes;
for (var i = 0; i<menuItem.length; i++) {
Nombre = menuItem[i].attributes.titulo;
Link = menuItem[i].attributes.src;
posicionar()
}
}
};
menuXml.load("menu.xml");
posicionar = function(){
if(t <= menuItem.length){
this.attachMovie("item_mc", "item_mc"+t, t);
this["item_mc"+t]._x = 10+(espacio*t);
this["item_mc"+t]._y = 15;
this["item_mc"+t].Enlace = Link;
this["item_mc"+t].etiqueta_txt.text = Nombre;
this["item_mc"+t].Rectangulo_btn.onRelease=function(){
getURL(this._parent.Enlace);
}
t++
}
}
8- Seleccionamos el deslizador "Rastro_mc" y le asignamos las acciones para el efecto de easing
onClipEvent (load) {
_x = 0;
speed = 5;
}
onClipEvent (enterFrame) {
endX = _root._xmouse;
_x += (endX-_x)/speed;
}