kadazuro.com
 TutorialesMouse Trailer ( Flash5 )
 
por: kadazuro
imprimir este documento
 

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

//por esto otro: (/trail1:vx + ( /trail0:x_value +k ) - trail1: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í.

for(i=1; i<=n; i++) {
  _root["clip"+i].vx = (_root["clip"+i].vx + ((_root["clip"+(i-1)]._x + k) - _root["clip"+i]._x)*1/a)/b;
  _root["clip"+i].vy = (_root["clip"+i].vy + (_root["clip"+(i-1)]._y - _root["clip"+i]._y)*1/a)/b;
  _root["clip"+i]._x += _root["clip"+i].vx;
  _root["clip"+i]._y += _root["clip"+i].vy;
}

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)]

por lo que en el script cambiaría de

  _root["clip"+i].vx = (_root["clip"+i].vx + ((_root["clip"+(i-1)]._x + k) - _root["clip"+i]._x)*1/a)/b;

a ser algo más agradable para la vista, y de hecho menos confuso creo yo

  newclip.vx=(newclip.vx+((oldclip._x+k)-newclip._x)*1/a)/b

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

espero esto sirva de ayuda.

 
regresar
Movieclip: Clip de película
Loop: cliclo, bucle
 

Historial:

  • nov14,2000 se arreglan erroes de ortografía, y lectura del script en el pto 4.
  • nov 10,2000 se publica este documento.