Trawa we Flashu - animacja

Marek_bf, 2011-01-25 23:50:51

Trawa we Flashu - animacja
Do jednej z prac potrzebna była mi animacja kołyszącej się trawy.

Postawiłem trzy założenia dotyczące tej animacji.

  • Miała mieć niewielką „wagę”
  • Trawa miała sprawiać wrażenie losowej animacji
  • Animacja miała być w miarę zoptymalizowana

Otworzyłem nowy dokument [ctrl + n], utworzyłem nowy obiekt MovieClip [ctrl + f8] Nazwałem go LodygaMc, zaznaczyłem Export for ActionScript, co pozwoli mi na dynamiczne dodawanie tego symbolu na scenę.

 

Za pomocą narzędzia Pen Tool [p] narysowałem kształt przypominający źdźbło trawy. Obie jego połowy pokolorowałem na różne odcienie zieleni, aby nie zlewały się ze sobą gdy będą w grupie.I na przestrzeni 90 klatek zrobiłem zapętloną animacje odchylania tego źdźbła w prawą i lewą stronę.

Teraz pozostało mi zaprogramować:
1. Pojawianie się określonej ilości źdźbeł trawy (gęstość)
2. Ustawić je losowo w wybranej przestrzeni poziomej.
3. Nadać im losowe różnice w rozmiarze.
4. Nadać im losowy obrót o 180 stopni względem osi Y.
5. Wystartować animację każdego źdźbła od losowej klatki.

W tym celu otworzyłem edytor skryptów Flasha [f9].

Ustalam trzy początkowe stałe:
 

const GESTOSC_TRAWY:uint = 10;
const POCZATEK_TRAWY:uint = 0;
const KONIEC_TRAWY:uint = 550;
const PODSTAWA_TRAWY:uint = 400;

var ilosc_lodyg:uint = uint((KONIEC_TRAWY - POCZATEK_TRAWY)*( GESTOSC_TRAWY/100));
 I zmienną do przechowywania referencji nowego obiektu:

var nowaLodyga:MovieClip;


Oraz zmienną określającą na podstawie początku końca i gęstości ilość łodyg które ma mieć trawnik:

Tworzę teraz kilka funkcji:

 

// dodawanie obiektów na scenę
function addMovieClip(targetMc:MovieClip, linkageObject:DisplayObject):MovieClip {
 return MovieClip(targetMc.addChild(linkageObject));
}
// przejście do losowej klatki obiektu 
function gotoRandomFrame(targetMc:MovieClip, typ:String = "Play"):void {
 try {
 targetMc["gotoAnd" + typ](Math.ceil(Math.random() * targetMc.totalFrames));
 } catch (e:TypeError) {
 trace("Niepoprawny argument funkcji: " + typ);
 }
}
// funkcja inicjująca parametry obiektu po naniesieniu go na scenę
function init(targetMc:MovieClip):void {
 // losowe rozmieszczenie pomiędzy POCZATEK_TRAWY a POCZATEK_TRAWY
 targetMc.x = POCZATEK_TRAWY + uint(Math.random() * (KONIEC_TRAWY - POCZATEK_TRAWY));
 // polożenie Y
 targetMc.y = PODSTAWA_TRAWY;
 // losowa wielkość X w losowum zakresie od 50 do 100%
 targetMc.scaleX = 0.5 + Math.random() / 2;
 // losowa wielkość Y w losowum zakresie od 50 do 100%
 targetMc.scaleY = 0.5 + Math.random() / 2;
 // 50% szansa na obrót o 180 stopni w osi Y
 Math.random() > 0.5 ? targetMc.scaleX *= -1:null;
 // start mc od losowej klatki
 gotoRandomFrame(targetMc);

}



Wywołuję iterację (określoną w zmiennej ilosc_lodyg) i puszczam koło (trawę) w ruch, za pomocą szeregu wywołań funkcji:

 

for (var i:uint = 0; i < ilosc_lodyg; i++) {
 nowaLodyga = addMovieClip(this, new LodygaMc());
 init(nowaLodyga);
}


I gotowe.
Wiem mógłbym wywołać funkcje bez dodatkowej zmiennej:
 

for (var i:uint = 0; i < ilosc_lodyg; i++) {
 init(addMovieClip(this, new LodygaMc()));
}



Ale dla mnie taki zapis jest nieczytelny.

Szybkość wahań trawy i kąt jej ugięcia można ustawić na osi czasu obiektu LodygaMc znajdującego się w bibliotece.

Wynik:

 

Pliki do pobrania webinside.pl/userfiles/trawa_20110125.rar
 
www.BannerFlash.pl

Ocena 2.41/5 (48.19%) (432 głosów)

Komentarze:


  • Dodał: Jacek Pluta data: 2011-01-26
    Bardzo fajny materiał, dzięki!


Dodaj komentarz:


Temat:
Twój nick:
Komentarz:
 

Prosimy o kulturę wypowiedzi. Komentarze zawierające niecenzuralne zwroty, bądź obrażające inne osoby będą usuwane. Kod HTML w wypowiedziach jest niedozwolony. Wydawca nie odpowiada za treść komentarzy.