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 quedo 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.

Vista previa de las capas y la linea de tiempo de la escena "EscenaMenú"

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ú.

Vista previa de las capas y la linea de tiempo de la escena "EscenaRoja"

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:

//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

//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;
}

//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;
}

//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:

//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;
}

/*
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);

-¿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

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

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

2.- Quitar el siguiente script

if (xposMouse<(xMitadEscena)-30)...

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

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%.

//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);
}

//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. Ir a tomar un café y hacer una partidita las cartas.
   2. Comprarte un buen libro de mates.
   3. Salir de Flash y borrar este archivo.
   4. Maldecir al autor por no habérselo currado un poco más.
   5. Agradecer al autor, y responder el tema en el foro, aportando el comentario que quieras.
2. 
   
   1. Completar los scripts de todos los botones.
   2. Completar la escena(s) poniendo cosas como fotos, audio, etc.
   3. Poner el menú en tu página y disfrutar de lo way que ha quedado.
   4. Seguir la zaga, creando otro capitulo del mismo estilo.
   5. No se me ocurre otro punto.

Puedes dejar un mensaje en el foro si tienes alguna pregunta; no olvides revisar los archivos que vienen adjuntos a este tutorial (Arriba, al lado de la información del autor)

¿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