Comunidad de diseño web y desarrollo en internet

Menu en Flash con slider

En este tutorial crearemos un menu de botones que posea una pequeña barra en su parte inferior (uds. podran colocar donde quieran), la cual se moverá al boton al cual le den enfoque...Mejor veanlo:

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 Pelicula (metodo es identico al de la creación del primer botón pero con la diferencia que este es un Clip de Pelicula). 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:

//--->este evento actua 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 moviemiento.
// += ------> hay que entenderlo como "a esto que tengo, sumale esto"
//para entender mejor esto usen "trace()" dentro de los parentesis coloquen alguna variable

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

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

En el segundo:

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

En el tercero:

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

Y en el cuarto:

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

y ya esta!!! tienes tu Menu con Slider.... cualquier pregunta hazla en los foros

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate