BluePink BluePink
XHost
Oferim servicii de instalare, configurare si monitorizare servere linux (router, firewall, dns, web, email, baze de date, aplicatii, server de backup, domain controller, share de retea) de la 50 eur / instalare. Pentru detalii accesati site-ul BluePink.
Home
Formular mail intr-un document Flash
Mouse cursor preloader
Efectul blur pentru un text
Fulgi de zapada in Flash
Tutorial complet HTML

 

Fulgi de zapada in Flash
 
 
Zapada realistica in Flash

Deschide un document flash cu dimensiunea de 300x400, fondul albastru inchis (#000022) si deseneaza o mica minge alba. Eu am facut una de 10 cu 10px si i-am dat gradient catre exterior astfel incat sa se piarda in fundal. Converteste-l la Symbol, Movie Clip

Click dreapta pe Movie Clipul nou creat in Library si selecteaza “Linkage”, selecteaza si Export for Actionscript si introdu textul “snow” (cu tot cu ghilimele) in textfield

In linia 1 a radacinii timeline-ului introdu aceste 29 linii de cod:

 

width = 400; // pixeli

<!--[if !supportLineBreakNewLine]-->

<!--[endif]-->
height = 300; // pixeli

<!--[if !supportLineBreakNewLine]-->

<!--[endif]-->
max_snowsize = 6; // pixeli

<!--[if !supportLineBreakNewLine]-->

<!--[endif]-->
snowflakes = 75; // cantitatea
  
 
  

for (i=0;i<snowflakes;i++) {
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

        t = attachMovie("snow","snow"+i,i);
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

        t._alpha = 20+Math.random()*60;
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

        t._x = -(width/2)+Math.random()*(1.5*width);
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

        t._y = -(height/2)+Math.random()*(1.5*height);
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

        t._xscale = t._yscale = 50+Math.random()*(max_snowsize*10);
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

        t.k = 1+Math.random()*2;
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

        t.wind = -1.5+Math.random()*(1.4*3);
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

        t.onEnterFrame = mover;
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

}
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

function mover() {
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

        this._y += this.k;
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

        this._x += this.wind;
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

        if (this._y > height+10) {
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

               this._y = -20;
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

        }
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

        if (this._x > width+20) {
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

               this._x = -(width/2)+Math.random()*(1.5*width);
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

               this._y = -20;
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

        } else if (this._x < -20) {
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

               this._x = -(width/2)+Math.random()*(1.5*width);
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

               this._y = -20;        
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

        }
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

}

Testeaza animatia. Cred ca a iesit cum trebuia.

O sa detaliez putin randurile codului pentru a putea intelege cum functioneaza acest efect

Primele 4 linii sunt simple

width = 400; // pixeli

<!--[if !supportLineBreakNewLine]-->

<!--[endif]-->
height = 300; // pixels

<!--[if !supportLineBreakNewLine]-->

<!--[endif]-->
max_snowsize = 6; // pixeli

<!--[if !supportLineBreakNewLine]-->

<!--[endif]-->
snowflakes = 75; // cantitatea
  

Aceste setari seteaza limitele animatiei

Sa vedem randurile care sunt responsabile pentru producerea zapezii.

for (i=0;i<snowflakes;i++) {

<!--[if !supportLineBreakNewLine]-->

<!--[endif]-->
        t = attachMovie("snow","snow"+i,i);

<!--[if !supportLineBreakNewLine]-->

<!--[endif]-->
        t._alpha = 20+Math.random()*60;

<!--[if !supportLineBreakNewLine]-->

<!--[endif]-->
        t._x = -(width/2)+Math.random()*(1.5*width);

<!--[if !supportLineBreakNewLine]-->

<!--[endif]-->
        t._y = -(height/2)+Math.random()*(1.5*height);

<!--[if !supportLineBreakNewLine]-->

<!--[endif]-->
        t._xscale = t._yscale = 50+Math.random()*(max_snowsize*10);

<!--[if !supportLineBreakNewLine]-->

<!--[endif]-->
        t.k = 1+Math.random()*2;

<!--[if !supportLineBreakNewLine]-->

<!--[endif]-->
        t.wind = -1.5+Math.random()*(1.4*3);

<!--[if !supportLineBreakNewLine]-->

<!--[endif]-->
        t.onEnterFrame = mover;

<!--[if !supportLineBreakNewLine]-->

<!--[endif]-->
}
 
 

 
  

Loopul creaza o variabila temp numita ‘t’  pe care o atasam la fulgul de zapada creat. Aceasta varabila distribuie opacitate intre 20 si 80 la suta fiecarui fulg. Urmatoarele doua linii pozitioneaza fulgul intr-o pozitie intamplatoare (random). Pozitia x pune fulgul putin peste fiecare margine astfel incat cand cade o face in directia in care bate vantul. Apoi marimea fulgului. Observati linia: t._xscale = t._yscale Asta inseamna ca forma fulgului este un cerc perfect. Urmatoarele doua variabile: k este pentru viteza cu are cade fulgul. Loopurile care spun fulgului sa execute functia mover in fiecare frame. Acest loop se repeta in functie de cati fulgi s-au setat. In acest exemplu 75

 
  
function mover() {
  
        this._y += this.k;
  
        this._x += this.wind;
  
        if (this._y > height+10) {
  
               this._y = -20;
  
        }
  
        if (this._x > width+20) {
  
               this._x = -(width/2)+Math.random()*(1.5*width);
  
               this._y = -20;
  
        } else if (this._x < -20) {
  
               this._x = -(width/2)+Math.random()*(1.5*width);
  
               this._y = -20;         
  
        }
  
}
  

Aceasta este ultima portiune din cod si face ca fulgii nostrii sa cada

 
  
this._y += this.k;
  
this._x += this.wind;
 
  
Aceasta portiune aplica vantul si viteza de cadere pe axa x si y:
  

if (this._y > height+10) {
  
        this._y = -20;
  
}
  
if (this._x > width+20) {
  
        this._x = -(width/2)+Math.random()*(1.5*width);
  
        this._y = -20;
  
} else if (this._x < -20) {
  
        this._x = -(width/2)+Math.random()*(1.5*width);
  
        this._y = -20;         
  
}
  

Aceste 3 loopuri inlocuiesc zapada daca si-au terminat calatoria sau nu s-au comportat cum trebuie in drumul lor. Primul loop verifica daca fulgul a ajuns jos si daca trebuie sa il inlocuiasca cu altul care sa cada din nou. Celelalte doua, un if..else schimba zapada din susul ecranului cu o noua pozitie x daca fulgul iese din animatie

Am atasat animatia mai jos.