Creare un fiocco di neve in Flash

Giovedì 6 Dicembre, 2007

Alcuni lettori mi hanno chiesto come è stato creato il fiocco di neve, così realistico, del Widget natalizio. Chi ha scaricato il sorgente probabilmente già lo sa... comunque è stato davvero semplice. Prima di tutto ho selezionato lo Strumento Pennello in Flash ed ho disegnato un punto.

Fiocco di neve Fiocco di neve

Ho trasformato questo in un simbolo ed ho applicato due effetti nella giusta sequenza: smussatura e sfocatura:

Fiocco di neve Fiocco di neve

Il risultato è stato: Fiocco di neve

A questo MovieClip (simbolo) ho associato una semplice classe CNeve, che crea di fatto l'intelligenza del fiocco stesso:

PLAIN TEXT
Actionscript:
  1. class CNeve extends MovieClip {
  2.     private var _interval;
  3.     private var _maxy:Number;
  4.     //
  5.     function CNeve() {
  6.         _interval = setInterval(this, "_move", 25);
  7.         _maxy = Math.round((Stage.height+256)/2)+_getRndRange(-20, -7);
  8.     }
  9.     //
  10.     private function _getRndRange(min:Number, max:Number):Number {
  11.         var randomNum:Number = Math.floor(Math.random()*(max-min+1))+min;
  12.         return randomNum;
  13.     }
  14.     //
  15.     private function _move() {
  16.         _y += _getRndRange(1, 5);
  17.         _x += ((_getRndRange(-50, 50))>0) ? 1 : -1;
  18.         _rotation += _getRndRange(1, 5);
  19.         if (_y>_maxy) {
  20.             clearInterval(_interval);
  21.         }
  22.         updateAfterEvent();
  23.  
  24.     }
  25. }

Il metodo _move() contiene l'intelligenza del fiocco, ovvero la funzione di caduta, estremamente semplice. Variando la funzione randomica _x += ((_getRndRange(-50, 50))>0) ? 1 : -1;, ad esempio inserendo un _getRndRange(-550, 50), si può aggiungere un effetto effetto vento, cioè i fiocchi cadono con una pendenza particolare. In particolare si possono mandare i fiocchi a destra e a sinistra usando un codice di questo tipo:

PLAIN TEXT
Actionscript:
  1. _x += ((_getRndRange( _getRndRange(-350, -50), _getRndRange(50, 350) ))>0) ? 1 : -1;

La rotazione (_rotation += _getRndRange(1, 5);), poi, conferisce un ulteriore dettaglio al fiocco stesso.
Quando creo un fiocco (vedi funzione creaFiocco() più sotto) ho aggiunto anche un alpha=90 e uno scale randomico, per avere fiocchi di neve di diverse dimensioni.

PLAIN TEXT
Actionscript:
  1. // crea fiocco
  2. function creaFiocco() {
  3.     var s = randRange(20, 100);
  4.     var x = randRange(-Math.floor((Stage.width - 320) / 2), Math.round((Stage.width + 320) / 2));
  5.     var y = -Math.floor(((Stage.height - 256) / 2)) - 10;
  6.     c_mc.attachMovie("neve","neve_" + index,index,{_x:x, _y:y, _xscale:s, _yscale:s, _alpha:90});
  7.     index++;
  8.     if (index> 1000) {
  9.         index = 1;
  10.         c_mc = createEmptyMovieClip("c_mc", 2);
  11.     }
  12. }

E questo è tutto... ;) Dimenticavo... Auguri a tutti e Buone feste... ;)

Post correlati

Tags: , , , , ,
Pubblicato in ActionScript, Flash, Grafica & Design, Internet, Sviluppo, Tutorials | 4 commenti »