-
Nov12
Menu con efecto de easing en Flash
Filed under: Flash;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á:
1. Teoría
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)
2. Practica
Para trabajar el mismo fla que dejo para la descarga, haremos lo siguiente:
Ajustar el tamaño de nuestra película a 300 X 400 px
Crear un movie clip de tamaño 300 X 50, en la posición x=0, y=100 con nombre de instancia «clip_mc»
A este clip «clip_mc», crearle una mascara de tamaño 100 X 50 en posición x=100, y=100
Crear tres botones con nombre de instancia «a_btn», «b_btn» y «c_btn», en cualquier posición.
Si alguno de los puntos anteriores no es claro, revisar el fla de descarga.
3. 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
y si no funciona revisemos el fla de descarga.
Comentarios recientes