Crear una animación de copos de nieve en Flash

22 de noviembre de 2012
Valoración del artículo:
En este artículo veremos como crear una animación de copos de nieve cayendo sobre una fotografía o como se acumulan estos copos sobre algún elemento de la imagen.
Atención: Contenido exclusivo de DesarrolloMultimedia.es. No reproducir. Copyright.

Este tutorial lo vamos a dividir en dos partes, la primera será crear la animación e implantarla sobre una fotografía y la segunda, implantarla sobre un elemento de la composición, para que pare la caída de la nieve y se valla acumulando.



Bueno, pues lo primero que tendremos que hacer, será abrir un nuevo documento con el tamaño que tenga nuestra fotografía con la herramienta Flash, (nosotros hemos hecho uno de 550x400 píxeles en nuestro ejemplo), para ello, Menú/Archivo/Nuevo.



A continuación importamos la fotografía al escenario y llamamos a la capa "Foto" para no liarnos, para ello Menú/Archivo/Importar/Importar a escenario.



Una vez tenemos nuetro fondo en el escenario, para a crear los copos de nieve, para ello insertamos un clip de película que llamaremos SnowFlake, para ello Menú/Insertar/Nuevo Símbolo y en la ventana emergente, "crear nuevo simbolo", seleccionamos Clip de película y ponemos el nombre antes mencionado, finalmente presionamos aceptar.



Una vez creado, dentro de este clip de película dibujamos un circulo blanco con la ayuda de la herramienta óvalo y sin bordes, de un tamaño de de unos 4x4 píxeles, para realizar esto podemos dibujar el círculo al tamaño que sea con la tecla de función shift presionada, (para hacer el círculo proporcional), y seguidamente cambiamos las medidas en la ventana de propiedades.



Por último, vamos a la biblioteca, (Ctrl+L, en caso de no visualizarla), seleccionamos el clip con el bottón derecho del ratón y pinchamos en la opción vinculación, saldrá la ventana de propiedades de la vinculación donde deberemos de marcar, exportar para actionscript y exportar en primer fotograma.



Ahora insertaremos una nueva capa, (que nosotros hemos llamado Código, crearemos un nuevo clip de película vacio, con el nombre de Control, lo tiraremos dentro de la escena y por último pondremos control_mc como nombre de instancia.



El paso final será situarnos en el primer frame de la capa Código y añadir el siguiente código:

//////////////////////////////////////////////////////////////////
function randRange(min:Number, max:Number):Number {
var randomNum:Number = Math.floor(Math.random() * (max - min + 1)) + min;
return randomNum;
}
//////////////////////////////////////////////////////////////////
function moveSnow() {
if (this.moving) {
this._y += this.speed;
this._x += Math.cos(this._y / 10);

if (this.hitTest(_root.rect_mc.Ice_mc)) {
this.moving = false;
this.stopCounter = 0;
}

if (this._y > 400){
removeMovieClip(this);

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

//////////////////////////////////////////////////////////////////
function createSnow(){
i = _root.getNextHighestDepth();
tmp = _root.attachMovie("SnowFlake","snowflake_mc" +i,i);
tmp._x = randRange(1,550);
tmp._y = -1;
tmp._alpha = randRange(50, 100);
tmp.speed = randRange(1,10);
tmp._xscale = randRange(70,110);
tmp._yscale = tmp._xscale;
tmp.moving = true;
tmp.onEnterFrame = moveSnow;
}
//////////////////////////////////////////////////////////////////
control_mc.onEnterFrame = function() {
createSnow();
}
//////////////////////////////////////////////////////////////////



A continuación os dejamos un ejemplo de como debería de haber quedado la animación flash:



Pincha aquí para descargar los archivos fuente del ejercicio.

Para realizar la segunda parte, es decir que la caída de la nieve se valla acumulando en un objeto de nuestra composición, tendremos que empezar como en la parte uno, por ejemplo, sobre una escena de fondo negro, creamos los clips de película Snowflake y Control, tiramos este último sobre la escena, sin olvidar poner el nombre de la estancia control_mc, tal y como hicimos anteriormente.

También creamos una nueva capa en la escena principal y pegamos el código en el primer frame, como hicimos anteriormente.



Creamos un nuevo Clip, (Menú/Insertar/Nuevo simbolo), que llamaremos Cartel dentro pondremos el objeto que vaya en el fondo, seguidamente metemos el clip dentro de la escena y le ponemos el nombre de la instancia rect_mc.



Por último crearemos un nuevo clip que llamaremos "ice" y dentro dibujamos la línea donde queramos que la nieve se acumule, posteriormente metemos el clip dentro del clip cartel y le ponemos el nombre de la instancia Ice_mc.



A continuación os dejamos un ejemplo de como debería de haber quedado la segunda animación flash:



Pincha aquí para descargar los archivos fuente del ejercicio.

Comentarios sin revisar
Entre los comentarios no revisados puede haber algunos
interesantes que se hayan enviado recientemente.


Se han encontrado 4 comentarios sin revisar




El autor
Guía
Categorías

Donaciones
Si piensas que te hemos ayudado y merecemos tu apoyo económico...