Lumisadeanimaatio Flashilla

Ylläolevan lumisateen luominen on huomattavasti helpompaa kuin aluksi voisi luulla. Elementtejä on oikeastaan vain yksi, tasoja pari ja skriptiäkin löytyy vain muutama rivi. Yksinkertaiset asiat ovat parasta elämässä, misi ne eivät sitten olisi parasta Flash-animoinnissakin.

Vaihe 1

Aloitetaan tekemällä sopivan kokoinen näyttämö – tässä tapauksessa vaikka oletusarvoinen 550x400 toimii aivan hyvin. Taustaväriksi voidaan laittaa esim. musta – taustaväri toki voi olla jonkin muun värinen kuin musta, mutta valkoinen se ei ainakaan pysty olemaan – ja ruutunopeudeksi 25.

Vaihe 2

Luodaan lumihiutale. Yksinkertaisimmillaan lumihiutale voi olla esim. Oval Toolilla piirretty pieni ympyrä – kunhan vain muistat sitä piirtäessäsi laittaa reunuksen (Stroke) värittömäksi. Ei asiasta suurta haittaa ole, lopullinen hiutale on kuitenkin nyt luodusta elementistä tehdyn symbolin instanssi.

Kun olet tehnyt hiutaleesi, tee siitäsitten symboli (Modify > Convert to symbol... tai F8). Nimeä se vaikka "Lumi" ja tee siitä Movie Clip. Jos se on Movie Clip, voit animoida sen esim. pyörimään, jos olet taiteillut oikean hiutaleen.

Vaihe 3

Kun olet nyt luonut symbolin, sinulla on näyttämöllä sen instanssi (muistathan että näyttämölle tuotu symboli on instanssi), nimeä se vaikka Hiutale.

Vaihe 4

Nyt lisätään vain hieman skriptiä ja homma on valmis. Skriptin lisäämisessä tulee olla tarkka – oikeat palikat on laitettava oikeisiin kohtiin, muuten homma ei toimi. Avaa Actions-ikkuna (Windows > Actions tai alt+F9) ja avautuneessa ikkunassa huolehdi että aktivoit Layer1: Frame1. Tähän lisää seuraava skripti:

for (k=0; k<50; k++) {
duplicateMovieClip(this.Hiutale, "Hiutale"+k, k);
}

Seuraavaksi aktivoi lumihiutale ja lisää sen action-ikkunaan:

onClipEvent (load) {
movieWidth = 400;
movieHeight = 300;

i = 1+Math.random()*2;
k = -Math.PI+Math.random()*Math.PI;

this._xscale = this._yscale=50+Math.random()*100;
this._alpha = 75+Math.random()*100;
this._x = -10+Math.random()*movieWidth;
this._y = -10+Math.random()*movieHeight;
}
onClipEvent (enterFrame) {
rad += (k/180)*Math.PI;
this._x -= Math.cos(rad);
this._y += i;
if (this._y>=movieHeight) {
this._y = -5;
}
if ((this._x>=movieWidth) || (this._x<=0)) {
this._x = -10+Math.random()*movieWidth;
this._y = -5;
}
}

Vaihe 5

Tallenna työ ja julkaise esikatselu. Jos esikatseluikkunassa sataa lunta, homma on valmis.