Comunidad de diseño web y desarrollo en internet online

Efecto de onda elástica con estela en Flash

El siguiente tutorial está creado en Flash 8 y usando AS2.

Nota: Para llevar a cabo con éxito este tutorial, es necesario tener conocimientos básicos de programación de ActionScript así como del uso de símbolos de flash, en este caso de botones y movie clips (incluyendo sus nombres de instancia).

Vamos a hacer un efecto de seguimiento elástico del mouse junto con un efecto de estela que va dejando mientras se mueve.

Antes que nada para hacer ésto utilicé unas medidas del escenario de 500x500 y establecí el frame rate en 30. Aaunque ustedes pueden cambiarlo como más les guste.

Primero vamos a crear el mc (Movie Clip) al cual destinaremos un efecto de seguimiento al mouse elástico.

En mi caso yo dibujé una pequeña cruz para poder ver el lugar donde se encuentra el mc, pero ustedes pueden poner lo que quieran, o simplemente crear un mc vacío (Para hacer ésto deben crear un nuevo símbolo (Insert -> New symbol o ctrl+F8 )).
Una vez creado el mc le asignamos el nombre de instancia cruz.

Clickeamos en el primer frame de la escena en el cual se encuentra el mc con el nombre de instancia cruz y abrimos el panel de acciones (F9).

En el panel de acciones del primer fotograma entonces ponemos:

// declaramos algunas variables
var velocidad:Number = .1;
var friccion:Number = .94;
var velx:Number = 0,vely:Number = 0;
var contador:Number = 0;

// inicializamos la ubicacion de la cruz en la ubicacion del mouse al empezar la pelicula
cruz._x = _xmouse;
cruz._y = _ymouse;

onEnterFrame = function(){
    // se buscan los valores para el movimiento de la cruz
    velx = ((_xmouse - cruz._x)*velocidad)+(velx*friccion);
    vely = ((_ymouse - cruz._y)*velocidad)+(vely*friccion);
    // con esto logramos hacer el movimiento de la cruz
    cruz._x += velx;
    cruz._y += vely;
}

Por supuesto, pueden ( y les aconsejo que lo hagan ) "jugar" con las variables fricción y velocidad y modificarlas a su antojo.

Muy bien, con ésto ya tenemos el movimiento de la cruz que sigue al mouse con un efecto elástico.

Ahora sigamos un poquito más, hagamos una línea que vaya del mouse hasta la cruz. Para ésto vamos a crear la función Linea la cual se encargara de ésto. Fuera del onEnterFrame ponemos ésto:

Linea = function(){
    this.createEmptyMovieClip("linea", 0);
    linea.lineStyle(1, 0xFFFF00, 100);
    linea.moveTo(_xmouse,_ymouse);
    linea.lineTo(cruz._x,cruz._y);
}

La funcion Linea creará un mc vacío que llamara linea y le asignara una profundidad ( Depth ) = 0. En este caso no nos intereza asignarle un nombre y una profundidad diferente cada vez porque lo que intentamos hacer es crear una línea del mouse a la cruz y que cambie todo el tiempo de lugar, esta función creará la línea, y en el caso de que ya existiera, reemplazarla por una nueva, con las coordenadas que nos interesan.

Ahora hace falta llamar la función y lo haremos de la siguiente manera:

Esto coloquenlo dentro del onEnterFrame:

        // se llama a la funcion Linea que dibuja la linea desde el mouse hasta la cruz
        Linea();

¡Y listo!

Nos quedaría hacer la estela, el rastro que deja la cruz.

Para ello creamos un nuevo símbolo (Insert -> New symbol o ctrl+F8 ) que llamaremos estelagraf en el cual vamos a hacer una línea que será nuestra estela, con un ancho y alto ( _xscale  e  _yscale ) de 100 y lo ubicamos en la posición _x=0, _y=0 como muestra el gráfico.

Colocamos al símbolo estelagraf en el primer frame de la escena y lo convertimos en símbolo nuevamente, pero esta vez va a ser del tipo Movie Clip y lo llamaremos estelamc. De la misma manera que hicimos con la cruz anteriormente, le vamos a poner el nombre de instancia que esta vez será estela.

Una vez dentro de estelamc, como antes, colocamos a estelagraf en la posición 0,0.
Luego creamos un keyFrame (fotograma clave) en el fotograma 50 (cuanto más, más lento se desvanecerá la estela).

En el último fotograma seleccionamos a estelagraf y le asignamos un color de transparencia de 0%.

Nos faltaría ahora crear una interpolación de movimiento (motion tween), para que vaya "desvaneciéndose" paulatinamente. Para ésto tendremos que seleccionar el primer frame, hacer boton derecho -> Crear interpolación de movimiento (Create Motion Tween) y flash se encargará de hacer las cuentas solo :) .

Ahora en el último fotograma, abrimos el panel de Acciones (F9) y colocamos lo siguiente:

this.removeMovieClip();

Con ésto podremos borrar a los mc's que fueron creados dinámicamente es decir que una vez que el mc llegue a este frame, el mc será borrado.

Si pudieron seguirme hasta acá sólo nos resta destinar unas pocas líneas de código al mc al cual hemos puesto como nombre de instancia "estela".

Volvemos a la escena principal y abrimos nuevamente el panel de Acciones del primer frame.

Dentro del onEnterFrame pongan:

        // se toman los valores de la posicion anterior de la cruz
        prevX = X;
        prevY = Y;

        //se asignan los valores que vamos a usar en la proxima vez
        X = cruz._x;
        Y = cruz._y;

        contador += 1;
        // se duplica "estela" y se la coloca en su lugar
        duplicateMovieClip(estela,"estela" + contador, contador);
        estela_mc = _root["estela" + contador];
        estela_mc._x = prevX;
        estela_mc._y = prevY;
        estela_mc._xscale = X - prevX;
        estela_mc._yscale = Y - prevY;

prevX y prevY sirven para poder guardar la posición anterior de la cruz y así saber donde crear la estela, es decir que en el momento que la estela va a ser creada irá desde las coordenadas de la cruz hasta las coordenadas anteriores de la cruz.
Luego se asignan las coordenadas y la escala de la estela para lograr este efecto.

Y eso es todo, facil y con pocas lineas de codigo :)

¿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

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate