Por si no sabes que es mouse trailer, son unas figuritas que "siguen"
al puntero del mouse.
Lógica: poner un movieclip pegado
al puntero del mouse (generalmente el nombre termina en cero ej:
trail0,clip0 etc); tomando en cuenta la posición x,y de este movieclip(que
viene siendo la posición del puntero),con una función hacemos que
los otros movieclips lo sigan en cadena;
ejemplo: clip0>se pega al mouse> clip1 sigue a clip0, clip2 sigue
a clip1 etc.
Para suavizar el movimiento se usa una función de velocidad en
la que se toman en cuenta los siguientes aspectos: dónde está la
movieclip,donde está la movieclip anterior y donde tengo que ponerla
entonces.
Esta función toma estos datos, hace los cálculos y mueve el movieclip;
en este tutorial se usará la función de tensión/aceleración basada
en la de yugo nakamura de mono*crafts.
a=aceleración.
b=tensión(rebote/bouncing)
k=espaciado entre las movieclips
v=velocidad (vx velocidad en x,vy velocidad en y)
v=(v+(posicion_clip_anterior+k) - posicion_clip_actual)/a)/b
en el swf aquí abajo se puede ver el ejemplo en "cámara lenta"
Demostración
del MouseTrailer en cámara lenta.
Paso1. Para poder mover algo en flash este
tiene que tener como behavior: movieclip,
como en este caso nos intereza demostrar la función de mouse
trailer y no que tan bonito dibujemos, las movieclips que van a
seguir al mouse serán simples y comunes círculos (
talvez pintados con gradiente para que no se vean tan feas). Hagamos
la movieclip entonces: Insert>new simbol ( o Ctrl+ F8), le pones
nombre (ball en mi caso )movieclip como behavior, una vez en el
escenario hacemos nuestra movieclip, luego nos regresamos al escenario
principal ( main timeline), abrimos la librería (CTRL+L)
y ponemos cinco instancias del símbolo ball l escenario principal,
asignándole nombre a cada instancia que vallamos colocando(clip1,clip2,clip3...){figura
1.}
escenario
principal con las cinco instancias del símbolo(movieclip)ball
Paso2. Ahora ocupamos hacer al actor principal
clip0, este es el que se le va a pegar al puntero del mouse, va
ha hacer los cálculos, y dará las indicaciones de
moviento a los otros movieclips; como ocupamos que sea invible lo
que hacemos es un símbolo vacío (sin gráficos
).
Creamos un nuevo símbolo movieclip como behavior, le ponemos
nombre (clip0 en mi caso), nos regresamos al escenario principal
y ponemos una instancia de clip0 en el escenario, como nombre de
instancia clip0
Creando
clip0
Instancia
de Clip0 en el escenario principal
Paso3. Ahora bien ya tenemos a los actores, solo falta el
libreto (las acciones), tomaremos ventaja de una de las nuevas características
de flash5 como lo es la posibilidad de asignarle acciones a los
movieclips, en este caso ocuparemos dos tipos, ambas asignándoselas
a clip0. La primera cuando se carge el movieclip, aquí incializaremos
las variables de aceleracion, tension, kenring y número de
movies esta última con el fin de que si se ocupan más
movieclips sólo tengamos que cambiar un número y listo,
aparte de lo anterior también les asignaremos a todas una
velocidad inicial de cero en "x" y "y";luego
de haber hecho esto le decimos que empieze ha hacerce drag ella
misma con "drag mouse lockcenter".
Selecciona el movieclip clip0, botón derecho, clip en acciones
y pon lo siguiente:
onClipEvent (load) { //n es el número de movieclips
n = 5; //a es de aceleración
a = 5; //b es de rebote, tensión o
bouncing
b = 1.66; //k es espacio entre las movieclips
k = 18; //asigna velocidad inicial x,y en cero
for(i=n; i>=0; i--){
_root["clip"+i].vx=
0;
_root["clip"+i].vy=
0;
} //empieza a hacer drag.
this.startDrag(true);
}
Paso 4. Si alguna vez has abierto algun script y te ha salido
algo como
set ("/trail" add i add ":vx")=(eval("/trail"
add i add ":vx")+(eval("/trail" add (i-1) add ":x_value")+k-eval("/trail"
add i add ":x_value"))*1/a)/b);
y te has quedado en cero,... te explico como entenderlo y como
cambiarlo usando comodines.
Para interpretarlo tienes que pensar que "i" tiene un
valor y empiezas a evaluar el script cambiando i por el valor que
le pusimos o evaluando i cuando sea el caso ( ej: i-1=0, cuando
i vale 1).
" i " tiene valor de "1"
set ("/trail" add i
add ":vx")
// lo cambiamos por: set(/trail1:vx);... y toooodo esto
(eval("/trail" add i add ":vx")+(eval("/trail"
add (i-1) add ":x_value")+k-eval("/trail" add i add ":x_value"))*1/a)/b);
así nos quedaría facilísimo entenderlo; ahora
bien volviendo al script del mousetrailer, en el loop
entran en juego dos actores principales: el movie actual y el movie
anterior; por lo que sin comodines se vería así.
tomando en cuenta que el movieclip actual es _root["clip"+1]
y que el movieclip anterior sería entonces _root["clip"+(i-1)];
porqué entonces no le decimos a flash que vamos a usar comodines,
estos comodines serían dos variables {cómo más
variables?..., si tranquilo estas son de las buenas :)}, que tendrian
el valor de la movieactual y la movie anterior, asi que:
si tenemos que la movieclip actual es _root["clip"+i] digámosle a flash que newclip=_root["clip"+i]
ysi tenemos que la movieclip anterior es _root["clip"+(i-1)] digámosle a flash que
oldclip=_root["clip"+(i-1)]
al tratar le leerlo sería algo como: velocidad (vx) del
clip actual= velocidad del clip actual+ (el producto de la posición
x del clip anterior+ es espaciado (k) - la posición x del
clip actual)todo esto por el inverso de la acelarción (1/a)entre
el bouncing(b)
bueno a lo que vinimos,selecciona en el escenario a clip0, botón
derecho y esto en acciones en el evento enterframe para que se quede
haciendo loop y haciendo los cálculos.
onClipEvent (enterFrame) {
for(i=1; i<=n; i++) {
//newclip= clip actual
newclip = _root["clip"+i];
//oldclip = clip anterior
oldclip = _root["clip"+(i-1)];
//calcula velocidad en x
newclip.vx = (newclip.vx + ((oldclip._x
+ k) - newclip._x)*1/a)/b;
//calcula velociad en y
newclip.vy = (newclip.vy + (oldclip._y -
newclip._y)*1/a)/b;
//le suma la velocidad x a la posición actual x
newclip._x += newclip.vx; //le suma la velocidad y a la posición actual
y
newclip._y += newclip.vy;
}
}
