Spiderman 3

La funzione della Pioggia

Per prima cosa, assegniamo un nome istanza al nostro clip con l'animazione della goccia che cade: lo selezioniamo con un click e, nel pannello delle proprietà, inseriamo il nome istanza: pioggia.

Quindi aggiungiamo un altro layer alla timeline, al di sopra di tutti gli altri, e lo battezziamo "action". In questo frame, infatti, andremo a scrivere tutto il codice per far funzionare il nostro filmato. Il codice è bene metterlo sempre sul primo frame della timeline principale, in modo tale che sia la prima cosa che il player leggerà; perché su un layer dedicato? Semplicemente per il motivo già accennato dell'ordine: se dovremo, un domani, rimettere mano a questo filmato, non dovremo cercare codice sparso per tutto il progetto.

Una volta creato il nuovo layer, clicchiamo sul primo frame dello stesso e premiamo F9 per aprire il pannello di Actionscript. Scriveremo una funzione il cui compito sarà quello di duplicare "n" volte il movieclip della goccia che cade.

//
function particelle () { 
	intensita = 250;	// num. max clip presenti 
	numclip = 1;	// contatore clip
	pioggia.onEnterFrame = function () { 
		quanto = 1+Math.ceil(Math.random()*5);
		var part:MovieClip;
		for (i=1; i<=quanto; i++) {
			numclip++;
			newclip = "particel_"+numclip;
			part = pioggia.duplicateMovieClip(newclip, numclip);
		}
		if (numclip>=intensita) {
			numclip = 1;	// se superato n.max clip resetto
		}
	}
}
//
particelle();	// invoco la funzione appena creata...

			

Breve commento al codice:
Per non stressare la CPU imposto una variabile che contiene il n. massimo di clip che potranno essere attivi sullo stage nello stesso istante (intensita) poi eseguo una funzione onEnterFrame che, ad ogni ciclo (il frame rate, per l'appunto), mi spara da 1 a 6 duplicati del clip della goccia che cade. Alla fine controllo sempre di non aver superato il limite massimo precedentemente stabilito.
Dopo aver scritto questo codice, faccio prova filmato e cosa vedo?
Sembra che non duplichi nulla, in realtà la duplicazione avviene ma, siccome i duplicati assumono le stesse proprietà del clip originario, sono disposti uno sopra all'altro facendo sembrare che ce ne sia uno solo.
Devo quindi aggiungere il codice per variare il posizionamento dalla clip duplicata. Per la coordinata orizzontale (_x) devo considerare un range che consenta di coprire tutto lo stage, ed essendo la traiettoria diagonale devo partire molto più a sinistra del bordo sinistro. Per la coordinata verticale (_y) mi basta una variazione di 40 pixels. Vediamo:

function particelle () { 
	intensita = 250;	// num. max clip presenti 
	numclip = 1;	// contatore clip
	startx = pioggia._x-250;	// inizio a 250px a sinistra dell'origine
	starty = pioggia._y;	
	pioggia.onEnterFrame = function () { 
		quanto = 1+Math.ceil(Math.random()*5);
		var part:MovieClip;
		for (i=1; i<=quanto; i++) {
			numclip++;
			newclip = "particel_"+numclip;
			part = pioggia.duplicateMovieClip(newclip, numclip);
			part._x = startx+Math.random()*(Stage.width+250);
			part._y = starty-Math.random()*40; // variazione di 40 px in verticale
		}
		if (numclip>=intensita) {
			numclip = 1;	// se superato n.max clip resetto
		}
	}
}
			

Facciamo la "prova filmato" e vediamo che va decisamente meglio...
Però non ci siamo ancora. Le gocce sono troppo uguali, e si vede chiaramente che sono tutte sopra all'immagine di SPiderman. Per dare un senso di "profondità" alla scena, possiamo agire sull'_alpha, rendendo più o meno trasparente il clip della goccia, e sulle dimensioni. In questo modo:

		...
		for (i=1; i<=quanto; i++) {
			numclip++;
			newclip = "particel_"+numclip;
			part = pioggia.duplicateMovieClip(newclip, numclip);
			part._x = startx+Math.random()*(Stage.width+250);
			part._y = starty-Math.random()*40; // variazione di 40 px in verticale
			part._alpha = 40+Math.random()*50;
			part._xscale = part._yscale = 50+Math.random()*120;
		}
		if (numclip>=intensita) {
		...
			

Sì, adesso ci siamo veramente!
Volendo, possiamo aggiungere un poco di "rotazione" ai clip duplicati, affinché non siano tutti perfettamente paralleli, ma attenzione! Solo pochi gradi, altrimenti incasiniamo tutto.

		...
			part = pioggia.duplicateMovieClip(newclip, numclip);
			part._x = startx+Math.random()*(Stage.width+250);
			part._y = starty-Math.random()*40; // variazione di 40 px in verticale
			part._alpha = 40+Math.random()*50;
			part._xscale = part._yscale = 50+Math.random()*120;
			part._rotation = -4+Math.random()*8;
		}
		...
			

E con questo abbiamo completato l'effetto pioggia.
Ci rimangono da creare gli effetti dei lampi ed il fading iniziale.

segue...