Forum Tibia.pl - Jak robic patykowate flashe.

Widzac mode na robienie flashy z udzialem patykowatych ludzikow na owym podforum, chialbym sie przysluzyc, bo widze, ze wiekszosc tych animacji poziomu nie trzyma. (nie zebym ja byl lepszy, ale staram sie pomoc ;))

Macie tu przed soba krotki kurs, w ktorym przedstawie podstawowe aspekty tworzenia animacji w programie Macromedia Flash (Tutaj 2004, ale z innymi problemu nie bedzie).
~~Flash~~
1. Przygotowanie
1.1. Wchodzimy na strone flashzafree.com i w wyszukiwarke wpisujemy "Flash MX" + Trial albo cos w tym stylu. To zaprowadzi nas prosto do downloadu darmowej, trzydziestodniowej wersji tego genialnego programu.
1.2. Obsluga - nie bede sie rozpisywal, wszystko jest dosc intuicyjne, a rzeczy mniej intuicyjne poznacie w trakcie tego pseudo-kursu.

2. Motion Tweening
Zmieniamy rozmiary naszej animacji na 300px x 200px (mozemy to zmienic klikajac na pusta przestrzen na scenie, otwierajac zakladke Properties, i klikajac przycisk po prawej od napisu Size) wiecej nam narazie nie potrzeba.
Zobaczmy co mamy u gory. Panel podpisany Timeline. Nasza listwa czasowa. Na niej beda wszystkie ramki naszej animacji. Nasza animacja bedzie skladala sie z 12 warstw i dwoch folderow. Dlaczego? Bo tak ;-). Oczywiscie sa rowniez inne powody, ale o tym dowiedecie sie za chwile.
Tak wiec 12 razy klikamy na przycisk z karteczka i plusikiem, potem dwa razy na przycisk z folderem i plusikiem. Gdy nazwiemy (klikajac dwa razy [powoli] na nazwe layera) odpowiednio wszystkie layery i podporzadkujemy (przeciagajac, Drag'n'Drop) je pod odpowiednie foldery, nasza listwa powinna wygladac mniej wiecej tak:
http://img301.imageshack.us/img301/4944/flash355xv.jpg
Struktura ma wygladac tak:
Timeline
|-Enemy
||-Head
||-LeftHand
||-RightHand
||-Body
||-LeftLeg
||-RightLeg
|-Hero
||-Head
||-LeftHand
||-RightHand
||-Body
||-LeftLeg
||-RightLeg
(Im wiecej warstw i wyroznionych czesci ciala, tym animacja bedzie ladniejsza, ale bedzie wymagala wiecej pracy, to jest najprostszy schemat)
No wlasnie, co teraz.
Teraz, narysujemy dwoch glownych bohaterow. Good guy'a i Bad guy'a.
U mnie wyglada to tak:
http://img333.imageshack.us/img333/8866/flash221cz.jpg
Jak widac zabardzo sie nie postaralem, no ale to nie wazne. Wazne jest, by kazda czesc ciala byla w odpowiadajacej jej warstwie! (lewa noga [kreska] wroga, ma byc w warstwie LeftLeg w folderze Enemy i tak dalej).
Mamy juz podstawy.
Teraz warto zapisac swoj projekt wybierajac kolejno z menu glownego File=>SaveAs.
Dalej bedzie juz z gorki.
Klikamy kolejno na kazdej ramce [takie czarne kolka w prostokatach obok warstw na Timeline] prawy przyciskiem myszy i wybieramy pozycje z menu kontekstowego Create Motion Tween. Prostokacik zmienil kolor ;P
Teraz, w jednej z warstw zaznaczamy sobie klatke np. nr 10 i wciskamy klawisz F6 (skrot od Add Keyframe). Powstanie seria klatek ze strzaleczka. Co to oznacza? Pokaze na przykladzie. Zrob to samo z innymi warstwami (jezeli wybrales ramke nr 10 w jednej warstwie, wybierz ta sama w innych!). Niech to wyglada mniej wiecej tak:
http://img300.imageshack.us/img300/2816/flash066rn.jpg
Ok, teraz wybierz ramke nr 10 w dowolnej warstwie, zaznacz (kliknij u gory i przeciagnij w dol, wiadomo chyba o co chodzi?) wszystkie stawy i konczyny Good Guy'a (Albo Bad Guy'a, obojetne) i teraz przeciagnij je na drugi koniec sceny (mozesz rowniez uzyc Shift + Strzalki, albo samych Strzalek). Kliknij enter i zobacz co sie stalo. Program samoczynnie uzupelnil posrednie (2-9) ramki. Na tym wlasnie polega technologia Motion Tween (jest jeszcze Shape Tween, ale to bardziej skomplikowane, i omowie to moze kiedy indziej).
Tworzac Motion Tween, zamieniamy jednoczesnie wszystkie obiekty z warstwy w obiekt graficzny (Tween), co sprawia, ze ogranicza nam sie mozliwosci modyfikacji (Dlatego zrobilismy rozne warstwy dla roznych czesci ciala). Dopuszczalne zmiany to wszystko co mozemy zrobic za pomoca narzedzia Free Transform Tool (przeciaganie, rozciaganie, obracanie i inne), oraz to, co mozemy zrobic w panelu Properties (zmiana koloru, rozjasnienia, przezroczystosci itp.).
Gdy juz dluzej poeksperymentujemy z Motion Tweenami, zauwazymy, ze nie zawsze wszystko idzie po naszej mysli. Trudno, takie zycie ;).
Mozemy jednak to naprawic. Jak? Klikamy w miejscu na strzalce Tweenu, w ktorym nam cos nie pasuje i poprostu modyfikujemy ja [ramke] (program sam utworzy tam ramke kluczowa [Keyframe]). I tak do skutku ;)
Dodaje link do krotkiego flasha pokazujacego jak wyglada prosta animacja oparta na tweenach (jak masz wprawe, 3 do 5min roboty, jak wprawy nie masz, zejdzie Ci 6).
http://img68.imageshack.us/my.php?image=tutorial6vp.swf

3. Frame-By-Frame
Jezeli zdecydujecie sie animowac klatka po klatce, zejdzie wam dluzej, ale jesli dobrze to zrobicie, animacja bedzie bardziej naturalna niz w przypadku korzystania z Tweenow
Przede wszystkim, wstawmy sobie kilkadziesiat (kilkaset) pustych ramek [F7], tym razem wystarczy nam jeden layer. (Opcjonalnie dwa, o tym pozniej)
Zaznaczmy opcje Onion Skin, pomoze nam to w rysowaniu (rysowaniu, nie kopiowaniu!) kolejnych klatek.
http://img264.imageshack.us/img264/8...ionskin6vb.jpg
Ow wklesly kwadracik wlacza nam Onion Skin, obok niego znajduja sie inne opcje [Outlines - wyswiatlaj tylko kontury] i [Edit Multiply Frames].
W praktyce, skorka cebuli wyglada tak:
http://img313.imageshack.us/img313/1...onsjin28hd.jpg
To najwyrazniejsze to ramka aktualna, to troche mniej wyrazne, to ramka poprzednia, a to najmniej wyrazne, to ramka bardziej poprzednia ;)

Aby jeszcze bardziej ulatwic sobie prace, mozemy zrobic mala hybryde, i wszystkie elementy ktorych ksztaltu zmieniac nie zamierzamy (glowa, kij trzymany przez bohatera itp., itd.), rozdzielic do osobnych warstw, a potem zrobic z nich Motion Tween. Dzieki temu, przez caly proces robienia animacji nie bedziemy musieli sie przejmowac np. glowa, ot, co 20 klatek bedziemy troche zmieniac jej polozenie.

4. Maskowanie
Czym jest maska? Jest to specjalnego rodzaju warstwa, ktora wplywa na wyswietlanie warstwy podrzednej. Jak wplywa? Ano, wyswietlane jest tylko to, co sprecyzowano w warstwie maskujacej.
Wyprobujmy to na przykladzie:
Stworzmy drugi layer, jeden nazwijmy Maska, a drugi tak jak chcemy (wazne zeby lajer nazwany maska byl nad tym drugim!). P-klik na maske, i z menu kontekstowego wybierzmy Properties. Wyswietli nam sie okienko z wlasciwosciami. Zaznaczmy pole Mask i kliknijmy OK.
http://img89.imageshack.us/img89/6465/mask13sq.jpg
Teraz zauwazymy mala zmiane w strukturze warstw. I nie mozemy rysowac! Ale tym nie nalezy sie przejmowac, obok nazw warstw sa takie 2 ikonki, kłudka i oko, po kliknieciu na nie mozemy zmienic opcje edycji warstw. Kludka blokuje warstwe, a przekreslone oko wylacza wyswietlanie danego layeru. Narysujmy cos w warstwie maskowanej (tej pod maska). Na przyklad domek.
Teraz przeniesmy sie do warstwy maskujacej i w miejscu gdzie stoi domek narysujmy cos tworczego. Nie bojcie sie, nie bedzie tego widac na filmie. U mnie wyglada to tak:
http://img87.imageshack.us/img87/7042/mask27vy.jpg
No dobra, mamy prosty przyklad, ale co z tego, jakies bazgroly. Sprawdzmy jak to bedzie wygladalo po uruchomieniu filmu. Nacisnijmy [CTRL] + [ENTER].
I co? Widzimy cos takiego:
http://img89.imageshack.us/img89/3849/mask31pf.jpg
Moral z tego taki, ze z warstwy maskowanej, wyswietlany jest tylko ten fragment, ktory sprecyzujemy w warstwie maskujacej.
Dodatkowo, warstwe maskujaca i maskowana mozemy animowac z uzyciem Tweenow i wszystkich innych mozliwosc flasha! Gdy polaczymy rozne funkcje, czesto wychodza nam naprawde ciekawe kombinacje.
Pod tym linkiem mozecie ogladnac bardziej zaawansowany przyklad, mojego autorstwa z reszta:

http://img320.imageshack.us/my.php?image=xray1km.swf

Maska + Motion Tweening i nakrywanie sie warstw (im warstwa wyzej polozona na timeline, tym bardziej bedzie ona na wierzchu na filmie (czyt. bedzie nakrywala warstwy poprzednie[nizsze]))
Tym razem do animacji dodalem buttony wspomagajace ogladanie, bedziecie mogli sie lepiej przyjzec.

5. Zapisywanie
Gdy juz zakonczymy nasza animacje, klikamy Save, a potem Publish Settings (rowniez w menu File).
Tu mamy wszystkie mozliwosci zapisywania naszej animacji. GIF, JPEG, PNG moga zostac zapisane, gdy w filmie nie ma Action Scriptu. Inaczej dzialac nie beda. Swf to najbardziej uniwersalny zapis, gdyz mozemy go umiescic wszedzie (na stronie www na przyklad) i moze on zawierac wszystko. Drugim po nim jest EXE, ale o umieszczenie go na stronie jest trudniej (nieufnosc internautow). Chociaz do odtworzenia tego nie wymagany jest Flash Player. Wasz wybor, pozatym, gdy juz wybierzecie, otworza wam sie nowe zakladki, w ktorych bedziecie mogli pozmieniac inne ciekawe opcje zapisu (ktorych tu nie opisze, sporo ich, a mi sie nie chce ;-P).
Plik zostanie zapisany w miejscu, gdzie zapisaliscie projekt.

~~ActionScript~~
1. Wstep
Action Script, to narzedzie najtrudniejsze do opanowania jesli chodzi o flash, ale zarazem dajace najwieksze mozliwosci. Ze zrozumieniem podstaw nie bedziesz mial najmniejszych problemow jezeli chociaz pobieznie znasz jakikolwiek jezyk skryptowy. Jezeli nie znasz zadnego, nie przejmuj sie, postaram sie wytlumaczyc to tak zeby bylo zrozumiale dla wszystkich.

2. Podstawy
Jak zapewne zauwazyliscie, pod zakladka properties na dole programu, mamy tez taka z napisem Actions (jesli nie mamy wcisnijmy [F9]). To wlasnie tam wpisujemy caly kod. Akcje moga tyczyc sie roznych elementow. Np. ramek - akcja zachodzi zawsze wtedy, gdy w filmie odtworzona zostaje ramka do ktorej przypisany jest skrypt.
Pokazmy to na przykladzie. Zrob jakas szybka animacje fbf (frame-by-frame), wystarczy ze 30 ramek. Gdy juz animacja bedzie gotowa, dodaj nowy layer, i nazwij go Actions. W nowym layerze, na samym koncu, dodaj ramke kluczowa (keyframe, F6). Kliknij w pusta przestrzen w ostatniej ramki z layeru Actions (tak zeby na zakladce Actions pojawil sie mniej wiecej taki napis: Actions - Frame) i otworz zakladke Actions ([F9]). Wlacz Expert Mode (taka ikonka, mam nadzieje ze znajdziesz, zdjecia nie zamieszcze bo sie limit konczy ;p) - to najlepszy tryb gdy wiesz co chcesz pisac. A teraz wpisz taki kod:

Kod:

stop();

.
Ah, od tego kodowania juz was pewnie palce bola, wiec zrobie mala przerwe na wyjasnienie o co chodzi (Ci co potrafia wywolywac funkcje w innych jezykach moga pominac ten akapit ;>)
Otoz wlasnie napisalismy nasz pierwszy kod (no, moze nie pierwszy jak przedtem eksperymentowaliscie z AS). Co on robi? Wywoluje pewna funkcje. Czlon "stop" mowi programowi o nazwie funkcji. Te nawiasy "( )" wcale nie sa czescia nazwy funkcji. Miedzy nimi wpisujemy parametry. Gdy funkcja parametrow nie ma, albo nie chcemy ich ustawiac (nie zawsze sa wymagane) zostawiamy je poprostu puste. Srednik ";" tlumaczac prostymi slowami konczy wywolywanie funkcji. Spowinnismy stawiac rowniez na koncu innych rzeczy (ustanawianie wartosci zmiennych itp.), ale o tym nieco pozniej.
Teraz, gdy film dojdzie do ramki ostatniej, wszystko sie zatrzyma :)
W takim razie stworzmy trzecia warstwe o dowolnej nazwie, dodajmy na koncu keyframe (ten sam numer ramki co przy koncu animacji i akcji stop();), a w kayframie narysujmy sobie przycisk. Strzalke w prawo na tle kola. Zaznaczmy to i wcisnijmy [F8], zaznaczmy opcje Button i w polu tekstowym wpiszmy nazwe przycisku (np. playButton). Edytujmy go (kliknijmy na niego 2x). Zmienily sie nam troche ramki. Pierwsza odpowiada za button w stanie naturalnym, druga, za button po najechaniu nan myszka, trzecia po kliknieciu, a czwarta okresla aktywny obszar przycisku. Narazie sie w tym niebawmy, poprostu wszedzie wstawmy to co w ramce pierwszej (keyframe, [F6] ;]).
Wrocmy do sceny glownej (taka strzalka w lewo pod Timeline), i wpisujemy skrypt przycisku (zaznaczamy przycisk i otwieramy zakladke Actions):

Kod:

on (release) {

 play();

}

play(); dziala antagonistycznie do funkcji stop(); jak zapewne inteligentniejsza czesc "czytaczy" sie domyslila ;>
Ale co tu robi ta poprzednia czesc?
Ano, to okresla nam okolicznosci w jakich zachodzi wykonanie skryptu. W tym wypadku bedzie to zwolnienie przycisku (nacisniecie i puszczenie przycisku myszka). Nawiasy klamrowe "{ }" natomiast definiuja nam, ktora czesc kodu podlega temu zdazeniu. Innymi slowy, jezeli chcemy zeby cos wydarzylo sie po zwolnieniu przycisku, to wpisujemy:

Kod:

on (release) {

Tutaj wpisujemy skrypt(y) ktor(y/e) ma byc wykonywan(y/e) po zwolnieniu przycisku.

}

No, na wstep wystarczy, nie opisalem jeszcze coprawda jak sprawia sie przedstawia w przypadku MovieClip'ow, ale o tym bedzie pozniej, teraz mi sie nie chce ;)

3. Kontrola filmu
Teraz podam i opisze kilka funkcji przydatnych do kontrolowania animacji.

play();
Wznawia odtwarzanie.
stop();
Zatrzymuje odtwarzanie.
gotoAndPlay("Scena", ramka);
Przenosi Cie do ramki ramka (numer ramki, w przypadku gdy w cudzyslowiu, etykieta ramki) w scenie Scena (wartosc opcjonalna) i rozpoczyna odtwarzanie.
gotoAndStop();
Tak samo jak w przypadku gotoAndPlay(), tyle ze tu przenosi i zatrzymuje animacje.
nextFrame();
Przenosi Cie do nastepnej ramki.
prevFrame();
Przenosi Cie do poprzedniej ramki.
nextScene();
Przenosi Cie do nastepnej sceny.
prevScene();
Przenosi Cie do poprzedniej sceny.

UWAGA!!!
Jezeli chcesz, by skrypty odnosily sie do konkretnego obiektu, musisz wpisac jego sciezke! W skrocie wyglada to tak:

Kod:

_root.instancename.funkcja();

_root oznacza "korzen" filmu (bazowa listwa czasowa, glowna warstwa, nazwijcie to sobie jak chcecie, tego nie zmieniamy), instancename to wartosc InstanceName MovieClipa (ustawiamy ja w zakladce properties), i tu wpisujemy nazwe naszego klipa do ktorego sie odnosimy, a funkcja() to funkcja...

4. Gry!11!one1!oneraz!
Wlasciwie powinienem opisac i bardziej przyblizyc problem zmiennych, petli i instrukcji warunkowych, ale jak znam zycie, sucha wiedza do lba nikomu nie wejdzie. Dlatego najlepiej bedzie sie tego nauczyc na przykladzie robienia jakiejs prostej gry. Podkreslam jeszcze, ze IMO robienie gier we flashu jest niepomiernie upierdliwe i niewygodne, wiec jezeli ktos chce robic lepsze gry to niech zasuwa po kurs c++. Oczywiscie to wszystko zalezy od przyzwyczajen, i komus moze sie lepiej pisac w tym niz w innych jezykach, no ale...

Zacznijmy.
Kazda gra ma bohatera. Bo czym by byla gra bez bohatera? Nasza nie bedzie miala bohatera ;P No dobra, to bedzie taki pseudo bohater.
Narysujcie sobie jakis statek kosmiczny, i skonwertujcie go do MovieClipa ([F8]). Fajnie.
Teraz, w akcjach owego MovieClipa bedziemy musieli napisac skrypt umozliwiajacy poruszanie sie. Skorzystamy tu z pewnego elementu zawartego w przykladzie na dole strony, a mianowicie z wlasciwosci _x i _y.
Bedzie to wygladac mniej wiecej tak:

Kod:

onClipEvent(load){

speed = 5;

}

onClipEvent(enterFrame){

if(Key.isDown(Key.LEFT)){

 _x -= speed;

}

}

Oczywiscie to nie wszystko, to tylko dla strzalki w lewo, ale najpierw wytlumacze o co chodzi. Pierwsza linijka, to cos jak on (release), tyle ze akcja wywolywana jest gdy zaladuje sie movieclip. Druga linijka kodu, to wlasnie nadanie zmiennej wartosci. Speed to nazwa zmiennej, "=" to znak nadania, a 5 to wartosc liczbowa (wartosci tekstowe musza byc zawarte w cudzyslowiu " ").
Dalej wdzimy jeszcze jedno onClipEvent. To wywolywane bedzie za kazdym razem gdy film bedzie w ramce, w ktorej jest ten MovieClip (a ze w tej ramce damy znak stop(), i film bedzie ciagle w niej, akcja bedzie odpalala sie caly czas).
if - to jest wlasnie instrukcja warunkowa. Jezeli warunek w nawiasie "( )" zostanie spelniony, wtedy wykonany zostanie skrypt w nawiasie klamrowym "{ }".
W tym przypadku, warunkiem jest nacisniecie klawisza LEFT (program rozpoznaje go jako lewa strzalke), a skryptem jest odjecie od pozycji _x MovieClipa wartosci zmiennej speed (w tym przypadku 5), czyli na chlopski rozum, przesuniecie MovieClipa o 10 pixeli w lewo.
Analogicznie bedzie z innymi przyciskami, tyle ze w przypadku gory i dolu zamiast x wstawiamy y, i gdy zamiast odjac chcemy dodac, zamiast minus wstawiamy plus.
Oto nazwy innych przyciskow, ktore moga sie przydac:

Key.BACKSPACE
Key.CAPSLOCK
Key.CONTROL
Key.DELETEKEY
Key.DOWN
Key.END
Key.ENTER
Key.ESCAPE
Key.HOME
Key.INSERT
Key.LEFT
Key.PGDN
Key.PGUP
Key.RIGHT
Key.SHIFT
Key.SPACE
Key.TAB
Key.UP

Juz zrobiliscie? Dziala? Jak nie, to porownajcie to z moim kodem:

Kod:

onClipEvent(load){

speed = 5;

}

onClipEvent(enterFrame){

if(Key.isDown(Key.LEFT)){

 _x -= speed;

}

if(Key.isDown(Key.RIGHT)){

 _x += speed;

}

if(Key.isDown(Key.UP)){

 _y -= speed;

}

if(Key.isDown(Key.DOWN)){

 _y += speed;

}

}

Jezeli dalej cos nie dziala, zapytajcie poprostu w poscie albo na priva, odpowiem w miare mozliwosci.
Dalsza czesc kursu bedzie jutro, albo jak znajde czas, narazie sami kombinujcie jak zrobic gre. Na pocieszenie daje wam minigierke-przyklad, zrobilem sobie wczoraj z nudow. Gra innego typu niz tu opisuje, ale to nic ;)
Link: Szuter!

W tym flashu bedzie regularnie aktualizowana seria przykladow wykorzystania AS, przyklad narazie tylko jeden bo nie mialem pomyslu na cos sensownego.
Link: http://img523.imageshack.us/my.php?image=as7xk.swf