Kurs Flasha

#3

WstΩp
    Ostatnio przerobili╢my Morfing, ruch po linii prostej i parΩ innych efekt≤w przydatnych we Flash'u. Dzisiaj (mam nadziejΩ) zajmiemy siΩ ( tak jak obieca│em ) ruchem po torze, skryptami, oraz.... uwaga, uwaga... maskowanie warstw - czynno╢µ bardzo prosta i daj▒ca ╢wietne rezultaty. Najpierw mo┐e, ruch po torze, co wy na to? Czynno╢µ banalna, jednak trzeba posiadaµ czyst▒ myszkΩ ;) Potrzebna nam bΩdzie jaka taka dok│adno╢µ. Zaczynamy

Ruch po torze
    Ruch po torze to nic innego jak ruch, w kt≤rym nasz obiekt nie porusza siΩ po linii prostej. To siΩ przydaje... Masz otworzonego Flash'a ? To do roboty.

1. Na osobnej warstwie ( przypu╢µmy, ┐e to bΩdzie "Layer 1" ) stw≤rz jaki╢ symbol (opisywa│em to w cz. 2).
2. Klikamy na ikonkΩ "Show Instance" w prawej, dolnej czΩ╢ci aplikacji, a w nowo otwartym oknie wybieramy zak│adkΩ Frame, z kt≤rej po uprzednim zaznaczeniu aktualnej klatki, wybieramy (Twenning) - Motion.
3. NastΩpnie zaznaczasz klatkΩ gdzie╢ dalej (przypu╢µmy 50 klatek dalej) i z menu podrΩcznego wybierasz polecenie " Inser Keyframe".
4. Klikamy na nasz▒ warstwΩ (ten panel z nazw▒ lajera) i z podrΩcznego meni wybieramy "Add Motion Guide". W ten spos≤b tworzymy osobn▒ warstwΩ dla toru po kt≤rym bΩdzie porusza│ siΩ nasz symbol.
5. Na przyborniku narzΩdzi klikamy czarny kursor, poczym, nieco ni┐ej, wciskamy przycisk z magnesem. Jest to wyg│adzanie.
6. Z przybornika wybieramy o│≤wek. Osobi╢cie proponujΩ wybraµ z menu, kt≤re siΩ pojawi opcjΩ Smooth:
   DziΩki temu program Flash 5 nie bΩdzie nam "pomaga│" w rysowaniu. < Tylko troszkΩ. Je╢li jednak chcemy aby ca│kiem zlikwidowaµ ten efekt, u┐ywamy opcji Ink.
7. Na warstwie "Guide: Layer 1" (tej ostatnio utworzonej) rysujemy o│≤wkiem linie (tor) po kt≤rym bΩdzie siΩ porusza│ nasz symbol.
8. Na "Layer 1" naciskamy nasz symbol w pierwszej klatce i jego ╢rodek ustawiamy na pocz▒tku narysowanego toru ruchu.
9. Wciskamy ostatni▒ klatkΩ i robimy to samo, czyli jego ╢rodek ustawiamy na pocz▒tku narysowanego toru ruchu, poczym naciskamy na niego i ╢rodkiem symbolu przeje┐d┐amy (przeci▒gamy - za pomoc▒ myszki) po torze.

To wszystko, co do ruchu po torze. Teraz mo┐emy przej╢µ do nieco trudniejszego tematu - maskowaniu warstw.

Maskowanie warstw
    DziΩki temu efektowi mo┐emy stworzyµ, np. lornetkΩ itp. Tego typu efekty s▒ bardzo efektowne, choµ w▒tpiΩ aby akurat lornetka znalaz│a zastosowanie na WWW :) Mo┐e zamiast tego urz▒dzonka stworzymy co╢ prostszego, a daj▒cego wyobra┐enie o maskowaniu warstw. Efekty tego typu mo┐na │atwo znale╝µ na wielu witrynach. Z pewno╢ci▒ kiedy╢ musieli╢cie to widzieµ w sieci. Je╢li nie - stw≤rzcie sami taki efekt. Do maskowania warstw, u┐ywamy maski i warstwy maskowanej. Mask▒ mo┐e byµ dowolny symbol, natomiast warstw▒ maskowan▒ dowolny obrazek, rysunek, czy co nam tam wpadnie do g│owy ;) Oki, do roboty:

1. Utw≤rz dwie warstwy: "Layer 1" i "Layer 2".
2. Na "Layer 1" narysuj co╢ lub wstaw gotow▒ grafikΩ. (File > Import). Mo┐esz tak┐e zrobiµ ca│▒ animacjΩ. Obecna warstwa "Layer 1" bΩdzie u nas, t▒, kt≤ra zostanie ukazywana. "Layer 2" natomiast bΩdzie mask▒.
3. Warstwa "Layer 1" nie bΩdzie nam ju┐ potrzebna, a mo┐liwe, ┐e bΩdzie nam przeszkadzaµ - dlatego postanowi│em j▒ ukryµ. W tym celu, przy warstwie "Layer 1" klikamy na kropkΩ znajduj▒c▒ siΩ pod okiem - powinna siΩ przekre╢liµ. 
4. "Layer 2" przeci▒gamy na g≤rΩ (o ile tam nie jest) i rysujemy na nim np. ko│o (dowoln▒ figurΩ), poczym konwertujemy j▒ na symbol ( zaznaczamy obiekt > Insert > Convert To Symbol > OK ).
5. Je╢li chcemy aby nasza maska siΩ porusza│a, mo┐emy po prostu zastosowaµ dla niej ruch po torze czy dowolnie inny efekt. Ja jednak poka┐e przyk│ad z wykorzystaniem ruchu po linii prostej. WiΩc... Na "Layer 2" zaznaczamy nasz symbol i ustawiamy w okienku "Show Instance" na zak│adce Frame Twenning na Motion. Zaznaczamy klatkΩ gdzie╢ dalej, klikamy prawym przyciskiem i z menu podrΩcznego wybieramy "Insert Keyframe". Poczym ustawiamy nasz symbol (maskΩ) na nowej pozycji.
6. Klikamy na g≤rn▒ warstwΩ ("Layer 2") po lewej - tam gdzie jej nazwa. Z menu podrΩcznego wybieramy opcjΩ "Mask"
7. Gotowe, mo┐ecie przetestowaµ animacjΩ. (Ctrl+ENTER) 

 

Pisanie Skrypt≤w
    Aby napisaµ prosty skrypt, mo┐emy byµ zupe│nie zieloni z tematyki programistycznej. Jednak powa┐niejsze scrypty bΩd▒ wymaga│y od nas jakich takich umiejΩtno╢ci. Powiem na pocz▒tek, ┐e wiele przyk│ad≤w u┐ycia tego typu udogodnie± mamy opisanych w dokumentacji - w help'ie. Mo┐emy tam znale╝µ informacjΩ na temat tworzenia skryptu, kt≤ry po najechaniu myszk▒ na okre╢lony obszar zwraca│by warto╢µ True (Prawda). S▒ tak┐e dostΩpne inne ciekawe, jak np. zmiana koloru poprzez skrypt. W Help'ie znajdziecie tak┐e lekcje i sample, kt≤re mog▒ wam pom≤c w nauce Flash'a ( Help > Lessons; Help > Samples). Jak widaµ pomoc do Flash'a jest baaardzo rozbudowana - i dobrze, amatorzy te┐ musz▒ z czego╢ ┐yµ ;) Jednak nie o pomocy mia│a byµ tutaj mowa. Przypu╢µmy, ┐e robimy jak▒╢ animacjΩ i chcemy by siΩ ona nie powtarza│a, ale zatrzymywa│a na ko±cowej klatce. U┐yjemy do tego celu szalenie prostego skryptu. Macromedia Flash 5 oferuje nam pomocny edytor skrypt≤w za pomoc▒ kt≤rego mo┐emy │atwo napisaµ potrzebny skrypt...

 

1. ...otwieramy go za pomoc▒ podrΩcznego menu, kt≤re wy╢wietlamy klikaj▒c na klatkΩ w kt≤rej potrzebujemy umie╢ciµ skrypt, a nastΩpnie wybieraj▒c polecenie Action.
2. W lewym oknie klikamy na "Basic Actions", poczym wybieramy "Stop". W prawym okienku powinna wy╢wietliµ siΩ linijka " Stop O; " . Je╢li tak siΩ sta│o - zamykamy edytor i uruchamiamy animacjΩ.

OKi, ale co w wypadku troszkΩ trudniejszych skrypt≤w? Action Script we Flash'u jest bardzo zbli┐ony do Java Script, wiΩc je┐eli kto╢ zna JS, z pewno╢ci▒ po przeczytaniu Help'a i wgl▒dniΩciu w budowΩ Sampli zrozumie jego sk│adniΩ. Poka┐Ω jeszcze zastosowanie nieco trudniejszego skryptu. Ot≤┐, je╢li chcieliby╢my aby nasz film powtarza│ siΩ tylko okre╢lon▒ ilo╢µ razy, co zrobiµ? Napisaµ skrypt, kt≤ry po ka┐dej powt≤rce do zmiennej x dodaje 1. Je╢li warto╢µ zmiennej x osi▒gnie np. 5 (razy) - zatrzymaj animacjΩ. Skrypt przedstawia siΩ nastΩpuj▒co:

var x;
if (x==5) {
stop ();
} else {
gotoAndPlay (1);
var x=x+1;
}

Proste? Jasne! Mo┐ecie nieco pokombinowaµ i pobawiµ siΩ z tego typu rzeczami i zaprezentowaµ efekty na WWW - w ko±cu od czego jest Flash ??? Czasami animacje wychodz▒ bardzo ciekawie...

Zako±czenie
    My╢lΩ, ┐e nie jednemu z Was Flash przypad│ do gustu. Dodam tylko, ┐e animacjΩ mo┐na wzbogacaµ tak┐e d╝wiΩkami (File > Import). Przyda Wam siΩ tak┐e okienko Biblioteki Symboli (umieszczaj▒ siΩ tam tak┐e zaimportowane media). Wywo│ujemy je klikaj▒c w prawym dolnym rogu Flasha na ikonkΩ Show Library i po prostu przeci▒gamy elementy wprost do okna roboczego.
My╢lΩ, ┐e pocieszaj▒c▒ rzecz▒ bΩdzie my╢l, ┐e wasze animacjΩ, po umieszczeniu w sieci (je╢li nie bΩd▒ rozmiar≤w rzΩdu 1 MB :) nie powinny │adowaµ siΩ zbyt d│ugo. DziejΩ siΩ tak dlatego, ┐e (po pierwsze) Flash to grafika wektorowa, (po drugie) przegl▒darka pobieraj▒c filmy wy╢wietla je nie czekaj▒c na koniec pobierania. Ma to swoje dobre i z│e strony. W filmach czy prostych animacjach (bez u┐ycia skrypt≤w) szybkie │adowanie jest bardzo wygodne gdy┐ nie trzeba wiele czekaµ by ujrzeµ pierwsze jego wyniki. Jednak gdy mamy do czynienia z prezentacj▒ wykonan▒ we Flashu, klikaj▒c na odno╢nik prowadz▒cy do jeszcze nie za│adowanego elementu ujrzymy tylko pustkΩ lub niekt≤re niedoko±czone (jakby) elementy.
Fnx, wszystkim za wsp≤lnie spΩdzony czas.