Por: Sisco + Otros tutoriales de Sisco + 1 de Septiembre del 2004
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:
La película tiene un tamaño de 600 X 300; consta de la escena EscenaMenú 2 fotogramas y 3 capas:
También existe la escena EscenaRoja, que la forman 2 capas y un fotograma:
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.
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.
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;
}
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);
}
Ahora sólo te toca a tí programar los otros mc y crear las escenas. Y puedes:
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)
Ejemplo del tutorial
Archivos del tutorial
Si tienes alguna pregunta de este tutorial; puedes hacerla aqui en los foros
