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.