Flash – ogień i woda
Jakub Wawro 19.09.2006
Język ActionScript zaimplementowany w programie Macromedia Flash najczęściej używany jest do zadań, które działają na stworzonych już wcześniej obiektach graficznych itp. Jednak przy jego pomocy można również niejedno "namalować" i uzyskać całkiem ciekawe efekty. Przykładem niech będzie przedstawiony w tym artykule efekt ognia. Postaram się również wyjaśnić, jak uzyskać efekt odbijania się przedmiotu w wodzie. Jest on bardzo podobny do uzyskiwanego przy pomocy języka Java. Jednak Flash jest tak potężnym narzędziem, że można w nim uzyskać ten efekt nie używając ani linii kodu.
Woda
Pierwszą rzeczą, której potrzebujemy, jest odpowiedni obrazek. Powinien on wyglądać podobnie jak ten na rysunku 1.
Bardzo łatwo coś podobnego utworzyć w jednym z prostych programów graficznych. Wystarczy górny obrazek odbić w pionie, po czym zmienić kontrast i jasność dolnego obrazka.
Gdy już mamy odpowiedni obrazek, należy otworzyć Flasha i wybrać z menu opcję File a Import a Import to Stage (Ctrl – R). W okienku które się pojawi wybieramy odpowiedni plik i naciskamy OK.
Aby obrazek znajdował się dokładnie na środku animacji, należy wybrać z menu opcje Modify a Align a Horizontal Center, Centem następnie Vertical Center. O ile opcja To Stage nie jest zaznaczona, należy ją uaktywnić przed powyższymi operacjami.
Zaznaczamy teraz obrazek i naciskamy klawisz F8. Jako nazwę wpisujemy tlo, a opcję Behavior zmieniamy na Graphic. Dla porządku możemy również zmienić nazwę obecnej warstwy z Layer 1 na background.
Sposób na uzyskanie efektu falowania wody jest dość prosty. Utworzymy obiekt typu Movie Clip, którego tłem będzie również ten obrazek. Jednak większość tła będzie zamaskowana. Odsłonimy tylko mały prostokąt, który będzie poruszał się z góry na dół. Następnie nałożymy ten klip na prawdziwe tło z małym przesunięciem, dzięki czemu uzyskamy powyżej wspomniany efekt.
A więc do dzieła. Nowy Symbol tworzymy naciskając kombinację klawiszy Ctrl - F8. Nazywamy go fala, natomiast Behavior ustawiamy na Movie Clip.
Teraz z biblioteki (Ctrl – L) przeciągamy na animację symbol tlo. Ponownie ustawiamy go na środku animacji przy użyciu opcji z menu Modify a Align.
Teraz przy pomocy klawisza F6 utwórz kluczowe ujęcia w klatkach numer 5, 15 oraz 20. Aby fale pojawiały się oraz znikały delikatnie, dodamy efekt ich pojawiania się oraz zanikania. W tym celu zaznacz pierwszą klatkę, a w niej obrazek. Następnie w zakładce Properties (Ctrl – F3) z menu Color wybierz opcję Alpha i ustaw ją na 0 (rys. 2).
Podobnie postępujemy z kolejnymi klatkami kluczowymi. W ujęciach numer 5 i 15 parametr Alpha ustawiamy na 100, natomiast w klatce numer 20 ponownie zero.
 Jednak w tej sytuacji obrazek nagle pojawia się w piątej ramce i równie gwałtownie znika w piętnastej. Aby temu zaradzić, wybierz pierwszą klatkę animacji i na ponownie przejdź na panel Properties. Tam z menu Tweed wybierz Motion Tweed. To samo zrób zaznaczywszy wcześniej piętnastą ramkę animacji. Teraz rysunek powinien pojawiać się i zanikać delikatnie. Pora teraz na maskowanie. Do tego celu potrzebna nam będzie kolejna warstwa. Powinna ona znajdować się nad warstwą Layer 1. Teraz wybierz narzędzie Rectangle Tool (R) oraz ustaw kolor ramki na przeźroczysty (rys. 3).
Upewnij się, że masz zaznaczoną pierwszą klatkę drugiej warstwy i narysuj czarny prostokąt podobnie jak na rysunku 4.
Teraz ustaw klawiszem F6 jako kluczową dwudziestą ramkę warstwy Layer 2. Nie odznaczaj jej i przesuń prostokąt w dół tak jak na rysunku 5.
Ponownie teraz zaznacz pierwszą ramkę Layer 2. Teraz z menu Tweed wybierz opcję Shape Tween. Dzięki niej prostokąt powinien płynnie przesuwać się z góry na dół. Kliknij prawym klawiszem myszy na warstwę numer dwa i z dostępnego menu wybierz opcję Mask.
Powracamy teraz do właściwej animacji.
Tworzymy dwie nowe warstwy i nazywamy je odpowiednio fala1 i fala2. Utwórz na nich kluczowe klatki odpowiednio w ujęciach 10 i 15. Zwykłe klatki utwórz klawiszem F5 odpowiednio w 30 i 35 ramce animacji. Następnie zaznacz warstwę fala1 i z biblioteki przeciągnij na nią klip fala. Umieść go tak jak na rysunku 6 (minimalnie poniżej linii symetrii). Analogicznie postępujemy z warstwą fala2. Ewentualnie można dodać jeszcze kilka warstw i umieścić na nich kolejne "fale" oraz poeksperymentować z nierównymi czasami pomiędzy pojawianiem się poszczególnych "fal".
Gotowy efekt (4 fale) wygląda następująco:
Ogień
Efekt ognia można uzyskać prościej niż się wydaje. Na początek również potrzebujemy odpowiedni obiekt graficzny. Chodzi mianowicie o utworzenie odpowiedniego, gradientowego koła podobnego do tego na rysunku 7.
Teraz zamieniamy je w obiekt graficzny klawiszem F8. Jako nazwę wpisujemy kolo, a jako typ wybieramy Graphic. W ten sposób powstały symbol ponownie zamieniamy w symbol, z tym, że teraz jako nazwę wpisujemy kolo2, natomiast jako Behavior wybieramy Movie Clip.
Na panelu Properties (Ctrl – F3) jako Instance name wpisujemy ogien.
Teraz klikamy dwa razy lewym klawiszem myszy na naszym symbolu i tym samym przechodzimy w tryb jego edycji. Utwórz kluczową ramkę klawiszem F6 w ujęciu numer 30. Nie odznaczaj trzydziestego ujęcia i przesuń "kulkę" do góry. Dodatkowo wybierz z menu Color na panelu Properties opcję Advanced. Naciśnij znajdujący się obok przycisk Settings i tak pozmieniaj parametry, aby uzyskać czerwonawy kolor. Dodatkowo parametr Alpha ustaw na wartość -200. Aby płomień był u góry węższy, wybierz z menu opcję Modify a Transform a Scale i dość znacznie zmniejsz koło. Teraz ponownie wybierz pierwszą ramkę animacji i z menu dostępnego pod prawym przyciskiem myszy wybierz opcję Motion Tween. Możesz wrócić już do głównej animacji.
W trzecim ujęciu warstwy numer jeden utwórz pustą klatkę. Następnie stwórz nową warstwę i utwórz puste klatki w ujęciach 1,2 oraz 3. Ta warstwa będzie służyła tylko i wyłącznie do umieszczenia kodu ActionScript.
Zaznacz pierwsze ujęcie warstwy Layer 2, naciśnij F9, aby otworzyć panel Actions i wpisz poniższy kod:
i = 0;
pozycja = getProperty("ogien", _x);
Kod do umieszczenia w ramce numer 2 to:
if (i<35) {
duplicateMovieClip("ogien", "ogien" add i, i);
setProperty("ogien" add i, _x, random(5) + pozycja);
i = i + 1;
}
Po zaznaczeniu ujęcia numer trzy, wpisz:
gotoAndPlay(2);
Jak widać kod jest dosyć prosty. W pierwszym ujęciu zerujemy zmienną i oraz pobieramy współrzędną x naszego symbolu. Następnie odtwarzana jest ciągle ramka numer dwa. Dzieje się tak ponieważ w trzecim ujęciu znajduje się funkcja gotoAndPlay(2).
W drugim ujęciu tworzone jest 35 kopii obiektu ogień, przy czym za każdym razem losowana jest pozycja na osi x obiektu. Ma to na celu wprowadzenie lekkiego migotania płomienia. I to już cały kod. Efekt finalny znajduje się poniżej:
Jakub Wawro (j.wawro@onet.pl)
|
