Comunidad de diseño web y desarrollo en internet

Efecto de nieve en Flash

Debemos abrir un nuevo documento de Flash y cambiar el color blanco del fondo del escenario por uno oscuro que permita distinguir el efecto de nieve que se pretende realizar.

Crear un MovieClip, seleccionando en el menú: Insertar > Nuevo símbolo y nombrarlo SnowFlake

Dentro de dicho MovieClip dibujar un círculo blanco sin bordes, con la herramienta Óvalo, de apróximadamente 4 x 4 píxeles.

Seleccionar en la biblioteca el MovieClip creado(SnowFlake) con el botón derecho del mouse. En el menú hacer click a la opción Linkage y seleccionar la opción Exportar para ActionScript . Este MovieClip será el copo de nieve que posteriormente se programará.

Crear otro MovieClip cuyo nombre será Control, de igual forma que el anterior, y dejarlo en blanco. Arrastrarlo al escenario y ponerle por nombre de instancia control_mc .

Nota: Recuerde exportarlo también para ActionScript.

Crear un tercer MovieClip cuyo nombre será Ice, donde dibujará un rectángulo sin bordes y de color blanco con alpha 14% (también se exporta para ActionScript), este MovieClip es para realizar el efecto de que la nieve se acumula.

También se creó otro MovieClip llamado poster que contiene el dibujo de un cartel, cuyo nombre de instancia es rect_mc y en el borde superior de dicho cartel se colocó el MovieClip Ice, al que se le asignó el nombre de instancia Ice_mc.

Posteriormente, se procede a programar el evento onEnterFrame para que cada vez que entre se ejecute la función que crea los copos de nieve llamada, en este caso, createSnow .

control_mc.onEnterFrame = function() {
createSnow();
};

Posteriormente se programa la función createSnow:

function createSnow() {
/* Crea un copo de nieve a partir del patrón SnowFlake que está en la biblioteca */
i = _root.getNextHighestDepth();
tmp = _root.attachMovie("SnowFlake", "snowflake_mc"+i, i);
/* El copo de nieve cae desde una posición horizontal en [1,550] */
tmp._x = randRange(1, 550);
/* Inicialmente, se coloca el copo de nieve fuera del escenario */
tmp._y = -1;
/* Ahora se particulariza el copo de nieve estableciendo aleatoriamente su transparencia, * velocidad y tamaño */ tmp._alpha = randRange(50, 100);
tmp.speed = randRange(1, 10);
tmp._xscale = randRange(70, 110);
tmp._yscale = tmp._xscale;
/* Todo copo de nieve inicia su descenso inmediatamente después de creado */
tmp.moving = true;
/* moveSnow es responsable de la dinámica del copo de nieve */
tmp.onEnterFrame = moveSnow;
}

Ahora se programa la función moveSnow.

function moveSnow() {
/* Si el copo está en movimiento... */
if (this.moving) {
/* El copo desciende según su velocidad prefijada */
this._y += this.speed;
/* Para mayor realismo, el copo experimenta un desplazamiento lateral, oscilatorio */
this._x += Math.cos(this._y/10);
/* Si el copo colisiona con Ice_mc detenerlo. Como no se desea que el copo
permanezca detenido indefinidamente, se utilizará un contador (stopCounter)
para verificar que transcurra un tiempo prudente antes de remover el copo */

if (this.hitTest(_root.rect_mc.Ice_mc)) {
this.moving = false;
this.stopCounter = 0;
}
/* Finalmente, los copos que lleguen al suelo serán eliminados de inmediato */
if (this._y>327) {
removeMovieClip(this);
}
} else {
/* Entrar aquí implica que el copo está detenido por colisionar con Ice_mc. Por ende,
se incrementa el contador stopCounter, y si éste supera la cota superior
preestablecida, se procede a eliminar el copo */

this.stopCounter++;
if (this.stopCounter>500) {
this.onEnterFrame = null;
this.removeMovieClip();
}
}
}

Por último, randRange es una función auxiliar que devuelve un número aleatorio entre dos extremos, ambos inclusive.

function randRange(min:Number, max:Number):Number {
var randomNum:Number = Math.floor(Math.random()*(max-min+1))+min;
return randomNum;
}

Y como resultado tenemos

¿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