Cristalab

Estás en: Cristalab > Tutoriales > Menu con efecto de easing en Flash

Menu con efecto de easing en Flash

Por: JOHNMARTIN + Otros tutoriales de JOHNMARTIN + 6 de Marzo del 2004

Autor
avatar
JOHNMARTIN
clabLevel: 1283
4 Tutoriales
2 Ejemplos

La innovación y creatividad en la web ha venido en gran medida gracias a Flash y su altisima capacidad de "experimentar", entre ellas, los nuecos conceptos de navegación, eso si, siempre manteniendo la usabilidad; este es un ejemplo de ello, un menu de navegación con efecto de easing (Desaceleración) que es implementado gracias a ActionScript.

Lo que haremos será:

Teoría

  1. Crear un clip bajo una mascara, que de acuerdo al botón que se presione, el clip se moverá a determinado punto.
    Sintetizando, tenemos que crear un clip, una mascara, y los botones (para nuestro caso, 3 son suficientes)

Practica

Para trabajar el mismo fla que dejo para la descarga, haremos lo siguiente:

  1. Ajustar el tamaño de nuestra película a 300 X 400 px
  2. Crear un movie clip de tamaño 300 X 50, en la posición x=0, y=100 con nombre de instancia "clip_mc"
  3. A este clip "clip_mc", crearle una mascara de tamaño 100 X 50 en posición x=100, y=100
  4. Crear tres botones con nombre de instancia "a_btn", "b_btn" y "c_btn", en cualquier posición.
  5. Si alguno de los puntos anteriores no es claro, revisar el fla de descarga.

Codigo ActionScript

Al "clip_mc" pongámosle este código: 
/*Cargamos una variable cualquiera "x" con valor 0, que será la que modificaremos con los botones,
	 y claro, el clip lo cargaremos en la posición "_x" con valor 0*/
onClipEvent(load){
	x=0;
	_x=0;
}

/*ahora , cíclicamente, se estará calculando un incremento en la posición "_x" 
del clip, de acuerdo al resultado de la ecuación "(x-_x)*0.3", que cambiara notablemente cuando
cambiamos el valor de "x", al presionar los botones. Recordemos que esto se ejecuta constantemente, 
por el evento "enterFrame" es decir que siempre estará disponible para cualquier cambio en sus
variables iniciales, que le darán el efecto de movimiento*/
onClipEvent(enterFrame){
	_x+=(x-_x)*0.3;
}
En el frame pongamos este otro código: 
//al presionar "a_btn", se cambia el valor de "x" asignado a "clip_mc" a 100
a_btn.onRelease = function() {
	clip_mc.x=100;
}

//al presionar "b_btn", se cambia el valor de "x" asignado a "clip_mc" a 0.
b_btn.onRelease = function() {
	clip_mc.x=0;
}

//al presionar "c_btn", se cambia el valor de "x" asignado a "clip_mc" a -100.
c_btn.onRelease = function() {
	clip_mc.x=-100;
}

Probemos nuestra película con CONTROL+ENTER y si no funciona revisemos el fla de descarga.
En el ejemplo que dejo para que revisen, solo dejo una acción a realizar, y es que en un campo de texto, se vea algo relacionado con el botón que se presione, así que de ustedes depende que esto sea útil o no !

Saludos.

JOHNMARTIN
johnmartin@cristalab.com

Información adicional

Ejemplo del tutorial
Archivos del tutorial
Si tienes alguna pregunta de este tutorial; puedes hacerla aqui en los foros

Tutoriales relacionados