Menu
- Aktualności
- Mój startup Nowy odcinek
- Blogi ekspertów
- Projektowanie WWW
- Planowanie
- Hosting i domeny
- Organizacja i nawigacja
- Webdesign i grafika
- Warsztat - programy
- Tutoriale Photoshop
- Programowanie i tworzenie
- XHTML, HTML i CSS
- JavaScript, DOM i AJAX
- jQuery
- PHP i SQL
- Flash i ActionScript
- Dostępność i WAI
- Promowanie stron
- Pozycjonowanie
- Reklama i marketing
- Monitoring i statystyki
- Publicystyka
- Artykuły ogólne
- Społeczności
- Praca i zarabianie
- Wywiady
- Standardy sieciowe
- Zasoby
- Kursy
- Recenzje książek
- Linki
Dla webmastera
Trawa we Flashu - animacja
Marek_bf, 2011-01-25 23:50:51

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
Najlepiej oceniane wpisy
- Wejściówki na premierę Adobe CS5! (2.93)
- Konferencja IGF: Creating an opportunity for all (2.88)
- Nowy cennik home.pl – nowa rzeczywistość rynku hurtowego domen (2.88)
- Ulubiony.pl – reaktywacja (2.87)
- Mocne karty dla e-konsumenta (2.86)
- Flash na iPhone i BlackBerry (2.83)
- Pokolenie 50+ (2.83)
- Kryzys kryzysem, a AGD idzie jak woda (2.82)

