Creare un fiocco di neve in Flash
Giovedì 6 Dicembre, 2007Alcuni 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.
 |
 |
Ho trasformato questo in un simbolo ed ho applicato due effetti nella giusta sequenza: smussatura e sfocatura:
 |
 |
Il risultato è stato: 
A questo MovieClip (simbolo) ho associato una semplice classe CNeve, che crea di fatto l'intelligenza del fiocco stesso:
-
class CNeve extends MovieClip {
-
private var _interval;
-
private var _maxy:Number;
-
//
-
function CNeve() {
-
_interval = setInterval(this, "_move", 25);
-
_maxy = Math.round((Stage.height+256)/2)+_getRndRange(-20, -7);
-
}
-
//
-
private function _getRndRange(min:Number, max:Number):Number {
-
var randomNum:Number = Math.floor(Math.random()*(max-min+1))+min;
-
return randomNum;
-
}
-
//
-
private function _move() {
-
_y += _getRndRange(1, 5);
-
_x += ((_getRndRange(-50, 50))>0) ? 1 : -1;
-
_rotation += _getRndRange(1, 5);
-
if (_y>_maxy) {
-
clearInterval(_interval);
-
}
-
updateAfterEvent();
-
-
}
-
}
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:
-
_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.
-
// crea fiocco
-
function creaFiocco() {
-
var s = randRange(20, 100);
-
var x = randRange(-Math.floor((Stage.width - 320) / 2), Math.round((Stage.width + 320) / 2));
-
var y = -Math.floor(((Stage.height - 256) / 2)) - 10;
-
c_mc.attachMovie("neve","neve_" + index,index,{_x:x, _y:y, _xscale:s, _yscale:s, _alpha:90});
-
index++;
-
if (index> 1000) {
-
index = 1;
-
c_mc = createEmptyMovieClip("c_mc", 2);
-
}
-
}
E questo è tutto... 
Dimenticavo... Auguri a tutti e Buone feste...
corretto 
Dieg0 ha detto:
Check my site: http://www.Dieg0.com.ar
Regards,
Diego
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.
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
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.
Widget natalizi: neve che cade in Flash | Undolog.com ha detto:
[...] Aggiornamento: servizio non disponibile - Vedi Creare un fiocco di neve in Flash [...]
Claudio ha detto:
«A questo MovieClip (simbolo) ho associato una semplice classe CNeve, che crea di fatto l’intelligenza del…»
Hai iniziato in modo semplice e con illustrazioni chiarissime, poi hai saltato un tot di informazioni essenziali per un utente “standard”: come si crea la classe
CNeve? Ho visto come si associa al simbolo, ma mi manca tutto il resto. Mi arrangerò diversamente, ma é un peccato.Giovambattista Fazioli ha detto:
@Claudio: cosa non ti è chiaro esattamente? A volte può sembrare che salti qualche dettaglio, tuttavia considera che da un lato alcune “basi” le devo dare per scontato, altrimenti dovrei scrivere un manuale ad ogni post, e dall’altro puoi trovare molti chiarimenti in precedenti post che trovi sempre qui, seguendo ad esempio la categoria ActionScript 3.0 o Flash. Comunque la classe
CNeveviene associata ad un MovieClip vuoto presente nella libreria tramite la finestra proprietà. Per dettagli vedi ad esempio Actionscript 3.0: tutto con l’operatore new. Se altri dubbi scrivimi pure, sarò felice di risponderti in modo puntale.