Creare un fiocco di neve in Flash

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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:

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.

1
2
3
4
5
6
7
8
9
10
11
12
// 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… ;)

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

  1. 06 dic, 2007 Dieg0:

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

    RispondiQuota
  2. 06 dic, 2007 Giovambattista Fazioli:

    @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.

    RispondiQuota
  3. 09 dic, 2007 Chris:

    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

    RispondiQuota
  4. 09 dic, 2007 Giovambattista Fazioli:

    @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.

    RispondiQuota
  5. 27 ott, 2008 Widget natalizi: neve che cade in Flash | Undolog.com:

    [...] Aggiornamento: servizio non disponibile – Vedi Creare un fiocco di neve in Flash [...]

  6. 24 dic, 2008 Claudio:

    «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.

    RispondiQuota
  7. 28 dic, 2008 Giovambattista Fazioli:

    @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 CNeve viene 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.

    RispondiQuota

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre> // blocco generico
					<code></code> // blocco generico
					[cc_actionscript][/cc_actionscript] // Actionscript
					[cc_actionscript3][/cc_actionscript3] // Actionscript 3
					[cc_css][/cc_css] // CSS Style Sheet
					[cc_html][/cc_html] // HTML
					[cc_js][/cc_js] // Javascript
					[cc_objc][/cc_objc] // Objective-C
					[cc_php][/cc_objc] // PHP
					[cc_sql][/cc_sql] // SQL


Stop SOPA