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:

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:

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.

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... ;)

4 commenti a:
“Creare un fiocco di neve in Flash”

  1. Giovedì 06 Dicembre, 2007 alle 14:48
    Dieg0 ha detto:

    Check my site: http://www.Dieg0.com.ar
    Regards,
    Diego

  2. Giovedì 06 Dicembre, 2007 alle 15:17
    Giovambattista Fazioli ha detto:

    @Diego0: Thanks for links ;)
    Sul sito di Diego troviamo uno script Javascript che simula anch’esso la caduta di fiocchi di neve. Il vantaggio di usare Javascript è quello di poter posizionare i fiocchi sopra alla nostra pagina, cosa che con Flash - se da un lato è possibiloe grazie alla trasparenza - ne impedisce poi di fatto la selezione.

  3. Domenica 09 Dicembre, 2007 alle 19:26
    Chris ha detto:

    Ciao Giova son venuto a curiosare vedendoti in mybloglog sul mio blogghetto. Sono proprio ignorante in merito a flash e dintorni,non sapevo fosse OOP action script. Chi lo sa quando riuscirò a darci un’occhiata,la cosa mi attira :-) Ciao ciao

  4. Domenica 09 Dicembre, 2007 alle 19:36
    Giovambattista Fazioli ha detto:

    @Chris: grazie per la visita! Ho visto che ti stai comentando nella programmazione OO con C++! Ottima scelta. Per affrontare bene i concetti OO bisogna sicuramente conoscere bene sia il C che il C++. Actionscript non è così “puro” come il C++, anche se ad ogni versione si avvicina sempre di più alle vere e “strette” metodologie di sviluppo OO. Comunque se riesci a lavorare con Flash, anche in Actionscript 2.0, potrai sicuramente trovare molte cose illuminanti.

Lascia un commento

Puoi utilizzare i seguenti TAG XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>