Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00152 010457 11038698 na godz. na dobę w sumie
101 praktycznych skryptów na stronę WWW - książka
101 praktycznych skryptów na stronę WWW - książka
Autor: Liczba stron: 196
Wydawca: Helion Język publikacji: polski
ISBN: 83-7197-879-0 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> tworzenie stron www
Porównaj ceny (książka, ebook, audiobook).
Aby stworzyć atrakcyjną stronę WWW, nie wystarcza już znajomość języka HTML. Witryny wzbogacone przyciągającymi uwagę użytkownika animacjami i elementami interaktywnymi to w Internecie codzienność. Umieszczenie na stronie tych elementów często przerasta umiejętności początkującego webmastera.

'101 praktycznych skryptów na stronę WWW' to książka prezentująca gotowe do wykorzystania, praktyczne skrypty napisane w języku JavaScript, które sprawią, że strona 'ożyje' i stanie się bardziej atrakcyjna dla odbiorcy.

Dodaj do swojej strony skrypty obsługujące:

Książka przeznaczona jest zarówno dla osób początkujących, jak i średnio zaawansowanych (znających podstawy HTML-a, JavaScriptu czy DHTML-a). Każdy skrypt jest przedstawiony w postaci gotowej do uruchomienia. Wystarczy zatem wkleić go do swojej witryny, zupełnie nie przejmując się technicznymi aspektami jego działania, aby osiągnąć zamierzony efekt. Dla osób bardziej zaawansowanych zaprezentowane w książce pomysły mogą być inspiracją do tworzenia własnych projektów.
Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

IDZ DO IDZ DO PRZYK£ADOWY ROZDZIA£ PRZYK£ADOWY ROZDZIA£ SPIS TREĎCI SPIS TREĎCI KATALOG KSI¥¯EK KATALOG KSI¥¯EK KATALOG ONLINE KATALOG ONLINE ZAMÓW DRUKOWANY KATALOG ZAMÓW DRUKOWANY KATALOG TWÓJ KOSZYK TWÓJ KOSZYK DODAJ DO KOSZYKA DODAJ DO KOSZYKA CENNIK I INFORMACJE CENNIK I INFORMACJE ZAMÓW INFORMACJE ZAMÓW INFORMACJE O NOWOĎCIACH O NOWOĎCIACH ZAMÓW CENNIK ZAMÓW CENNIK CZYTELNIA CZYTELNIA FRAGMENTY KSI¥¯EK ONLINE FRAGMENTY KSI¥¯EK ONLINE Wydawnictwo Helion ul. Chopina 6 44-100 Gliwice tel. (32)230-98-63 e-mail: helion@helion.pl 101 praktycznych skryptów na stronie WWW Autor: Marcin Lis ISBN: 83-7197-879-0 Format: B5, stron: 196 Aby stworzyæ atrakcyjn¹ stronê WWW, nie wystarcza ju¿ znajomoġæ jêzyka HTML. Witryny wzbogacone przyci¹gaj¹cymi uwagê u¿ytkownika animacjami i elementami interaktywnymi to w Internecie codziennoġæ. Umieszczenie na stronie tych elementów czêsto przerasta umiejêtnoġci pocz¹tkuj¹cego webmastera. „101 praktycznych skryptów na stronê WWW” to ksi¹¿ka prezentuj¹ca gotowe do wykorzystania, praktyczne skrypty napisane w jêzyku JavaScript, które sprawi¹, ¿e strona o¿yje i stanie siê bardziej atrakcyjna dla odbiorcy. Dodaj do swojej strony skrypty obs³uguj¹ce: • Formularze • Odnoġniki • P³ywaj¹ce napisy • Efekty t³a • Animacje warstw Ksi¹¿ka przeznaczona jest zarówno dla osób pocz¹tkuj¹cych, jak i ġrednio zaawansowanych (znaj¹cych podstawy HTML-a, JavaScriptu czy DHTML-a). Ka¿dy skrypt jest przedstawiony w postaci gotowej do uruchomienia. Wystarczy zatem wkleiæ go do swojej witryny, zupe³nie nie przejmuj¹c siê technicznymi aspektami jego dzia³ania, aby osi¹gn¹æ zamierzony efekt. Dla osób bardziej zaawansowanych zaprezentowane w ksi¹¿ce pomys³y mog¹ byæ inspiracj¹ do tworzenia w³asnych projektów. Spis treści Wstęp ...................................................z............................................ 7 Rozdział 1. Proste zdarzenia i obsługa myszy...................................................z..... 9 Skrypt 1. Zdarzenie onLoad. Powitanie użytkownika [E][N][O]..................................10 Skrypt 2. Zdarzenie onUnload. Pożegnanie użytkownika [E][N][O]............................11 Skrypt 3. Powitanie i pożegnanie korzystające z podanego imienia [E][N][O] ............11 Skrypt 4. Okno dialogowe wyświetlane po najechaniu myszą na tekst [E][N6][O] .....13 Skrypt 5. Zamykanie okna przeglądarki [E][N][O] ...................................................Z....14 Skrypt 6. Zamykanie okna przeglądarki potwierdzane przez użytkownika [E][N][O] .15 Skrypt 7. Zmiana napisu na pasku stanu [E][N][O]...................................................Z....17 Skrypt 8. Zmiana kursora myszy na „celownik” [E][N6]..............................................18 Skrypt 9. Wybór kształtu kursora z listy [E]...................................................Z...............19 Skrypt 10. Blokowanie funkcji prawego przycisku myszy [E] .......................................22 Skrypt 11. Blokada prawego przycisku myszy rozróżniająca typ przeglądarki [E][N]...24 Skrypt 12. Blokada lewego przycisku myszy [E] ...................................................Z.........26 Rozdział 2. Skrypty związane z formularzami...................................................z.... 29 Skrypt 13. Sprawdzenie ilości formularzy w dokumencie [E][N][O] ..............................30 Skrypt 14. Sprawdzenie czy użytkownik podał wymagane dane [E][N][O] ....................31 Skrypt 15. Nadanie niewypełnionym polom zadanej wartości [E][N][O]........................35 Skrypt 16. Kalkulator wykonujący podstawowe działania arytmetyczne [E][N6][O] .....37 Skrypt 17. Przeszukiwanie tekstu [E][N][O] ...................................................Z.................42 Skrypt 18. Przycisk zmieniający kolor po najechaniu nań kursorem myszy [E][N6] ......44 Skrypt 19. Przycisk samoczynnie zmieniający kolor [E][N6] ..........................................47 Skrypt 20. Jednoczesna zmiana koloru przycisku i tekstu na przycisku [E][N6] .............49 Skrypt 21. Automatyczne przenoszenie kursora między elementami formularza [E][N][O] ...................................................Z..................50 Skrypt 22. Zablokowanie możliwości wpisywania liter w formularzu [E].......................52 Skrypt 23. Pole tekstowe automatycznie zmieniajace swoją wielkość [E].......................53 Rozdział 3. Okna i czas ...................................................z.................................. 55 Skrypt 24. Otworzenie nowego, pustego okna przeglądarki [E][N] .................................56 Skrypt 25. Otworzenie nowego okna, o zadanych rozmiarach i zawartości [E][N] .........58 Skrypt 26. Wyświetlenie ostrzeżenia o niewłaściwej rozdzielczości ekranu [E][N][O] ..60 Skrypt 27. Zmiana koloru paska przewijania [E]...................................................Z...........61 Skrypt 28. Odmierzanie czasu [E][N][O] ...................................................Z......................63 Skrypt 29. Odmierzanie czasu z możliwością zatrzymania zegara [E][N][O] .................65 Skrypt 30. Przewijanie treści strony [E][O] ...................................................Z...................65 Skrypt 31. Pływający ekran [E][N4][O] ...................................................Z........................68 Skrypt 32. Uciekający ekran [E][O]...................................................Z...............................69 4 101 praktycznych skryptów na stronie WWW Skrypt 33. Zegar cyfrowy [E][N][O] ...................................................Z.............................69 Skrypt 34. Wyświetlenie aktualnej daty i czasu [E][N][O] ..............................................72 Skrypt 35. Wyświetlenie aktualnej daty i czasu na przycisku [E][N][O] .........................74 Skrypt 36. Wyświetlenie aktualnej daty i czasu na pasku stanu [E][N][O]......................75 Skrypt 37. Wyświetlenie bieżącego dnia tygodnia [E][N][O] ..........................................76 Skrypt 38. Wyświetlenie wartości związanych z datą i czasem [E][N][O] ......................78 Skrypt 39. Zegar podający czas w formacie binarnym [E][N][O]....................................81 Rozdział 4. Odnośniki ...................................................z..................................... 83 Skrypt 40. Automatyczne załadowanie strony [E][N][O].................................................83 Skrypt 41. Automatyczne załadowanie strony bez użycia JavaScriptu [E][N][O] ...........84 Skrypt 42. Przyciski będące jednocześnie odnośnikami [E][N][O]..................................85 Skrypt 43. Odnośniki na liście rozwijanej [E][N][O] ...................................................Z....86 Skrypt 44. Odnośniki na liście rozwijanej z bezpośrednią zmianą strony [E][N][O].......88 Skrypt 45. Odsyłacze z dodatkowymi opisami [E][N][O]................................................88 Skrypt 46. Odnośniki na liście rozwijanej otwierane w nowym oknie [E][N] .................90 Skrypt 47. Odnośniki na liście rozwijanej z możliwością wyboru okna [E][N]...............92 Skrypt 48. Uniemożliwienie wczytania strony do ramki [E][N][O].................................93 Skrypt 49. Dodawanie odsyłacza do zakładki „Ulubione” [E] .........................................94 Skrypt 50. Ustawianie wybranej strony jako startowej [E]...............................................95 Skrypt 51. Akapit tekstowy udający odnośnik [E][N6][O]...............................................96 Skrypt 52. Dodatkowe wyróżnienie odnośnika [E] ...................................................Z.......97 Rozdział 5. Pływające napisy ...................................................z........................ 101 Skrypt 53. Napis przesuwający się w poziomie w lewo [E][N][O] ................................101 Skrypt 54. Napis przesuwający się w poziomie w lewo uwzględniający wielkość okna tekstowego [E][N6][O]...............................................102 Skrypt 55. Pływający tekst odbijający się od lewej i prawej strony [E][O]....................104 Skrypt 56. Zamiana tekstu przez losowe wstawianie znaków [E][N][O] .......................105 Skrypt 57. Zamiana tekstów poprzez wymianę znaków od prawej strony [E][N][O]....107 Skrypt 58. Zamiana tekstów poprzez wymianę znaków od lewej strony [E][N][O] ......108 Skrypt 59. Symulacja pisania na klawiaturze [E][N][O] ................................................109 Skrypt 60. Tekst rozwijany w prawą stronę i zwijany w lewo [E][N][O] ......................111 Skrypt 61. Tekst rozwijany w prawą stronę i zwijany w prawo [E][N][O] ....................112 Skrypt 62. Pływający tekst na pasku stanu [E][N][O] ...................................................Z.113 Skrypt 63. Pływająca data na pasku stanu [E][N][O] ...................................................Z..114 Skrypt 64. Pływająca data i czas na pasku stanu [E][N][O] ...........................................116 Skrypt 65. Pływająca data i czas na pasku stanu II [E][N][O]........................................117 Skrypt 66. Data i czas na pasku stanu pływająca w obie strony [E][N][O]....................119 Skrypt 67. Pływający tekst na pasku tytułu okna przeglądarki [E][N6][O]....................120 Skrypt 68. Zegarek w tytule okna [E][N6][O] ...................................................Z.............122 Rozdział 6. Efekty tła ...................................................z................................... 125 Skrypt 69. Tło zmieniające się po najechaniu na obrazek [E][N6].................................125 Skrypt 70. Tło zmieniające się po najechaniu na obrazek II [E][N6] .............................127 Skrypt 71. Wybór koloru tła z listy rozwijanej [E][N] ...................................................Z128 Skrypt 72. Tło zmieniające cyklicznie kolor [E][N] ...................................................Z....129 Skrypt 73. Tło zmieniające kolor losowo [E][N]...................................................Z.........130 Skrypt 74. Tło zmieniające kolor losowo II [E][N] ...................................................Z.....131 Skrypt 75. Zmiana koloru tła w komórce tabeli [E][N6] ................................................132 Skrypt 76. Wybór koloru tła przy użyciu myszy [E][N6]...............................................134 Skrypt 77. Wybór koloru tła przy użyciu myszy II [E][N6] ...........................................136 Skrypt 78. Pływające tło [E][N6]...................................................Z.................................139 Skrypt 79. Tło przesuwające się w poziomie [E][N6] ...................................................Z.140 Skrypt 80. Tło z cyklicznie zmieniających się obrazów [E][N6] ...................................141 Spis treści 5 Skrypt 81. Tło z losowo zmieniających się obrazów [E][N6] ........................................142 Skrypt 82. Rozjaśnianie tła [E][N]...................................................Z...............................143 Skrypt 83. Ściemnianie tła [E][N]...................................................Z................................144 Skrypt 84. Pulsowanie tła [E][N] ...................................................Z.................................144 Rozdział 7. Animacje warstw ...................................................z........................ 147 Skrypt 85. Uciekający obrazek [E][N6][O] ...................................................Z.................147 Skrypt 86. Pływająca warstwa [E][N4][O] ...................................................Z..................151 Skrypt 87. Pulsujący tekst [E][N6][O]...................................................Z.........................152 Skrypt 88. Tekst płynnie zmieniający kolor [E][N6]...................................................Z...153 Skrypt 89. Efekt kurtyny [E][O] ...................................................Z..................................156 Skrypt 90. Wygenerowane dynamicznie tło [E][N4]...................................................Z...158 Skrypt 91. Kurtyna z dynamicznie generowanymi warstwami [E][N4][O] ...................161 Skrypt 92. Obrazek odbijający się od boków ekranu [E][O] ..........................................164 Skrypt 93. Skalowanie obrazka [E][N6] ...................................................Z......................165 Skrypt 94. Pulsujący obrazek [E][N6] ...................................................Z.........................167 Skrypt 95. Spadające warstwy [E][O]...................................................Z..........................168 Skrypt 96. Spadające warstwy generowane dynamicznie [E][O] ...................................171 Skrypt 97. Płatki śniegu przemieszczające się w dwóch kierunkach [E][O] ..................173 Skrypt 98. Realistycznie padający śnieg [E][O] ...................................................Z..........175 Skrypt 99. Odbijająca się piłka [E][O]...................................................Z.........................177 Skrypt 100. Piłka poruszająca się po sinusoidzie [E][N6][O] ........................................180 Skrypt 101. Pływające warstwy [E][N][O] ...................................................Z..................181 Zakończenie ...................................................z............................... 185 Skrypt 102. Pływająca sinusoida [E][N][O] ...................................................Z................185 Skorowidz...................................................z................................... 189 Rozdział 7. Animacje warstw Skrypt 85. [E][N6][O] Uciekający obrazek. Na ekranie wyświetlany jest obrazek zapisany w pliku image1.gif (rysunek 7.1). Bę- dzie zmieniał miejsce położenia po najechaniu na niego myszą. W funkcji KPKV ustawiamy położenie warstwy w zależności od rozdzielczości ekranu. Służy nam tutaj do tego obiekt UETGGP i jego właściwości JGKIJV i YKFVJ odzwierciedlające odpowied- nio wysokość i szerokość ekranu. Rysunek 7.1. Widoczny obrazek będzie „uciekał” przed wskaźnikiem myszy 148 101 praktycznych skryptów na stronie WWW Obrazek znajdujący się na warstwie możemy przygotować za pomocą dowolnego edytora graficznego, np. Paint Shop Pro (rysunek 7.2). Zapisujemy go w formacie IKH, pamiętając jednak o ustawieniu koloru tła jako przezroczystego (rysunek 7.3). Kiedy użytkownik najedzie myszą na warstwę, wykonana zostanie funkcja QXGT , która do- kona przesunięcia warstwy. Kierunek przesunięcia jest losowany. Korzystamy tutaj z obiektu /CVJ, który udostępnia nam różne stałe (tabela 7.1) i funkcje matematyczne (tabela 7.2). Rysunek 7.2. Program Paint Shop Pro pozwoli na przygotowanie grafiki używanej w skrypcie Rysunek 7.3. Kolor tła ustawiamy jako przezroczysty Nas interesują następujące funkcje: 4CPFQO , która zwraca losową liczbę z przedziału 0 – 1 oraz 4QWPF , która zwraca argument zaokrąglony do najbliższej liczby całko- witej. Ponieważ potrzebujemy losową wartość całkowitą z przedziału 0 – 7, obu funkcji używamy w sposób następujący: FKTGEVKQP/CVJTQWPF /CVJTCPFQO      Zmiennej tej używamy następnie jako parametru w instrukcji warunkowej UYK VEJECUG. Rozdział 7. ♦ Animacje warstw 149 Tabela 7.1. Stałe matematyczne dostępne w JavaScripcie Nazwa stałej Znaczenie Przybliżona wartość .0 .0 .0 .0 2+ 5346A 5346 stała Eulera (e) logarytm naturalny z 2 logarytm naturalny z 10 logarytm o podstawie 2 z e logarytm o podstawie 10 z e liczba Pi pierwiastek kwadratowy z 1/2 pierwiastek kwadratowy z 2 2,718 0,693 2,302 1,442 0,434 3,14159 0,707 1,414 Tabela 7.2. Funkcje matematyczne dostępne w JavaScripcie Nazwa metody Znaczenie CDU CEQU CUKP CVCP EGKN EQU GZR (NQQT NQI OCZ OKP RQY TCPFQO 4QWPF UKP USTV VCP Skrypt 85 Zwraca wartość bezwzględną argumentu. Zwraca arcus cosinus argumentu. Zwraca arcus sinus argumentu. Zwraca tangens sinus argumentu. Zwraca najmniejszą liczbę całkowitą większą bądź równą argumentowri. Zwraca cosinus argumentu. Zwraca e do potęgi równej argumentowi. Zwraca największą liczbę całkowitą mniejszą bądź równą argumentowri. Zwraca logarytm dziesiętny argumentu. Zwraca większy z podanych dwóch argumentów. Zwraca mniejszy z podanych dwóch argumentów. Zwraca wartość będącą argumentem pierwszym podniesionym dro potęgi równej argumentowi drugiemu. Zwraca wartość pseudolosową z zakresu 0 – 1. Zwraca wartość argumentu zaokrągloną do najbliższej liczby carłkowitej. Zwraca sinus argumentu. Zwraca pierwiastek kwadratowy argumentu. Zwraca tangens argumentu. *6/. * # OGVCJVVRGSWKX QPVGPV6[RGEQPVGPVVGZVJVONEJCTUGVKUQ 5MT[RVRQEJQFKMUKæľMKRTCMV[EP[EJUMT[RVÎY CWVQT/CTEKP.KUGOCKNUETKRVU OCTEKPNKUEQO * # 5 4+26.#0)7#) ,CXC5ETKRVV[RGVGZVLCXCUETKRV 7MT[EKGRTGFRTGINæFCTMCOKPKGQDUđWIWLæE[OK,CXC5ETKRVW HWPEVKQPKPKV ] 150 101 praktycznych skryptów na stronie WWW UGNGEVQTFQEWOGPVIGV NGOGPV$[+F YCTUVYC UV[NG UGNGEVQTVQRUETGGPJGKIJV UGNGEVQTNGHVUETGGPYKFVJ _ HWPEVKQPQXGT ] VQR8CNRCTUG+PV UGNGEVQTVQR  NGHV8CNRCTUG+PV UGNGEVQTNGHV  KH KU0C0 VQR8CN VQR8CNUETGGPJGKIJV KH KU0C0 NGHV8CN NGHV8CNUETGGPYKFVJ FKTGEVKQP/CVJTQWPF /CVJTCPFQO      UYKVEJ FKTGEVKQP ] ECUG]NGHV8CN#FFVQR8CN#FFDTGCM_ ECUG]NGHV8CN#FFVQR8CN#FFDTGCM_ ECUG]NGHV8CN#FFVQR8CN#FFDTGCM_ ECUG]NGHV8CN#FFVQR8CN#FFDTGCM_ ECUG]NGHV8CN#FFVQR8CN#FFDTGCM_ ECUG]NGHV8CN#FFVQR8CN#FFDTGCM_ ECUG]NGHV8CN#FFVQR8CN#FFDTGCM_ ECUG]NGHV8CN#FFVQR8CN#FFDTGCM_ _ PGY6QR8CNVQR8CN VQR8CN#FF PGY.GHV8CNNGHV8CN NGHV8CN#FF KH PGY6QR8CN PGY6QR8CNUETGGPJGKIJV KH PGY6QR8CN UETGGPJGKIJV PGY6QR8CN KH PGY.GHV8CN PGY.GHV8CNUETGGPYKFVJ KH PGY.GHV8CN UETGGPYKFVJ PGY.GHV8CN UGNGEVQTVQRPGY6QR8CN UGNGEVQTNGHVPGY.GHV8CN _ -QPKGEMQFW,CXC5ETKRV 5 4+26 $1 ;QP.QCFKPKV   +8+ YCTUVYC 56;. XKUKDKNKV[XKUKDNG EQNQTTGFRQUKVKQPCDUQNWVG VQRNGHV QP/QWUG1XGTQXGT  +/)54 KOCIGZIKH  +8 2 6WVCLVGMUVUVTQP[ 2 $1 ; *6/. Rozdział 7. ♦ Animacje warstw 151 Skrypt 86. [E][N4][O] Pływająca warstwa (rysunek 7.4). Rysunek 7.4. Po wczytaniu skryptu warstwa zaczyna płynąć po ekranie W poprzednim skrypcie warstwa skakała po ekranie, jeśli najechaliśmy na nią kurso- rem myszy. Tym razem sprawmy, aby w miarę płynnie sama przesuwała się po ekra- nie. Przesunięcie w poziomie osiągamy, modyfikując parameytr NGHV warstwy. Skrypt 86 *6/. * # OGVCJVVRGSWKX QPVGPV6[RGEQPVGPVVGZVJVONEJCTUGVKUQ 5MT[RVRQEJQFKMUKæľMKRTCMV[EP[EJUMT[RVÎY CWVQT/CTEKP.KUGOCKNUETKRVU OCTEKPNKUEQO * # 5 4+26.#0)7#) ,CXC5ETKRVV[RGVGZVLCXCUETKRV 7MT[EKGRTGFRTGINæFCTMCOKPKGQDUđWIWLæE[OK,CXC5ETKRVW XCTURGGF XCTXX XCTYKFVJ XCTNC[GT9KFVJ HWPEVKQPKPKV ] KH FQEWOGPVNC[GTU ] UGNGEVQTFQEWOGPVNC[GTU= YCTUVYC ? YKFVJUETGGPYKFVJ _ GNUGKH FQEWOGPVCNN ] UGNGEVQTFQEWOGPVCNN= YCTUVYC ?UV[NG YKFVJRCTUG+PV FQEWOGPVDQF[ENKGPV9KFVJ  _ 152 101 praktycznych skryptów na stronie WWW EQWPV _ HWPEVKQPRTGUWP ] KH EQWPVYKFVJNC[GT9KFVJ ] EQWPV  _ GNUG] EQWPV XXXX _ UGNGEVQTNGHVRCTUG+PV UGNGEVQTNGHV  XX UGV6KOGQWV RTGUWP URGGF  _ -QPKGEMQFW,CXC5ETKRV 5 4+26 $1 ;QP.QCFKPKV RTGUWP   +8+ YCTUVYC UV[NGXKUKDKNKV[XKUKDNGDCEMITQWPFEQNQTTGF RQUKVKQPCDUQNWVGVQR NGHVYKFVJJGKIJV NC[GTDCEMITQWPFEQNQTTGF YCTUVYC  +8 $1 ; *6/. Warstwa „pływa” w poziomie w prawo i w lewo. Ilość pikseli, o którą ma nastąpić przesunięcie w pojedynczym kroku, definiujemy, ustalając wartość zmiennej XX. Doko- nywane jest to w funkcji KPKV . Możemy za jej pomocą dodatkowo regulować pręd- kość przesuwu. Trzeba jednak pamiętać, że wpływa to w znacznym stopniu na płynność ruchu. Tzn. im większa wartość zmiennej XX, tym warstwa będzie bardziej „skakać”. Lepiej jednak korzystać z parametru funkcji UGV6KOGQWV , który określa, co jaki czas nastąpi kolejne wywołanie funkcji RTGUWP . Skrypt 87. [E][N6][O] Pulsujący tekst. Pulsowanie tekstu, a dokładniej jego ściemnianie i rozjaśnianie uzyskujemy w bardzo prosty sposób. Definiujemy warstwę, na której będzie znajdował się napis, a następ- nie cyklicznie zmieniamy atrybut jej stylu o nazwie EQNQT. Stosujemy zatem kon- strukcję: FQEWOGPVCNNPCYCAYCTUVY[UV[NGEQNQTMQNQT Samą definicję koloru konstruujemy z poszczególnych składowych R, G, B, podobnie jak w skryptach 82 – 84, gdzie zmienialiśmy barwę tła. Rozdział 7. ♦ Animacje warstw 153 Skrypt 87 *6/. * # OGVCJVVRGSWKX QPVGPV6[RGEQPVGPVVGZVJVONEJCTUGVKUQ 5MT[RVRQEJQFKMUKæľMKRTCMV[EP[EJUMT[RVÎY CWVQT/CTEKP.KUGOCKNUETKRVU OCTEKPNKUEQO 5 4+26.#0)7#) ,CXC5ETKRVV[RGVGZVLCXCUETKRV 7MT[EKGRTGFRTGINæFCTMCOKPKGQDUđWIWLæE[OK,CXC5ETKRVW XCTURGGF XCT  XCTK HWPEVKQPVGZV JCPIG ] XCTEQNQT  !    VQ5VTKPI   VQ5VTKPI   EQNQT EQNQT EQNQT EQNQT   EQNQT FQEWOGPVIGV NGOGPV$[+F VGZV UV[NGEQNQTEQNQT   K KH  ^^  KK UGV6KOGQWV VGZV JCPIG URGGF  _ -QPKGEMQFW,CXC5ETKRV 5 4+26 * # $1 ;QP.QCF VGZV JCPIG  +8+ VGZV UV[NGXKUKDKNKV[XKUKDNG YKFVJ JGKIVJ VGZV#NKIPEGPVGT RQUKVKQPTGNCVKXG VQR NGHV * 9KVCO[PCPCUGLUVTQPKG*  +8 $1 ; *6/. Skrypt 88 [E][N6] Tekst płynnie zmieniający kolor. Skrypt ten jest rozwinięciem pomysłu ze skryptu 87. Skoro możemy ściemniać i roz- jaśniać napis, moglibyśmy spowodować, żeby płynnie zmieniał on swoją barwę. Nie będziemy tu jednak generować każdego koloru w funkcji VGZV JCPIG , jak poprzednio, przygotujemy za to tablicę barw. Będą odpowiedzialne za to dwie funkcje: OCMG6C DNG i RTGRCTG QNQTU . Skrypt 88 *6/. * # OGVCJVVRGSWKX QPVGPV6[RGEQPVGPVVGZVJVONEJCTUGVKUQ 154 101 praktycznych skryptów na stronie WWW 5MT[RVRQEJQFKMUKæľMKRTCMV[EP[EJUMT[RVÎY CWVQT/CTEKP.KUGOCKNUETKRVU OCTEKPNKUEQO 5 4+26.#0)7#) ,CXC5ETKRVV[RGVGZVLCXCUETKRV 7MT[EKGRTGFRTGINæFCTMCOKPKGQDUđWIWLæE[OK,CXC5ETKRVW XCTURGGF XCTUVGR XCTKPFGZ XCTEQNQT6CDNGPGY#TTC[  XCTE4PGY#TTC[  XCTE)PGY#TTC[  XCTE$PGY#TTC[  HWPEVKQPRTGRCTG QNQTU 4()($(46)6$6RQU ] KH 4(46 ] HQT KKK ] E4=K?46 _ _ GNUG] KH 4(46 ] HQT K4(K46K ] E4=K?K _ _ GNUG] Z HQT K4(K 46K ] E4=Z ?K _ _ _ KH )()6 ] HQT KKK ] E)=K?)6 _ _ GNUG] KH )()6 ] HQT K)(K)6K ] E)=K?K _ _ GNUG] Z HQT K)(K )6K ] E)=Z ?K _ _ _ KH $($6 ] HQT KKK ] E$=K?$6 _ _ GNUG] KH $($6 ] HQT K$(K$6K ] E$=K?K Rozdział 7. ♦ Animacje warstw 155 _ _ GNUG] Z HQT K$(K $6K ] E$=Z ?K _ _ _ HQT KKK ] EQNQT E4=K? !   E4=K?VQ5VTKPI  E4=K?VQ5VTKPI   EQNQT  E)=K? !   E)=K?VQ5VTKPI  E)=K?VQ5VTKPI   EQNQT  E$=K? !   E$=K?VQ5VTKPI  E$=K?VQ5VTKPI   EQNQT   EQNQT EQNQT6CDNG=RQU  K?EQNQT _ _ HWPEVKQPOCMG6CDNG ] RTGRCTG QNQTU   RTGRCTG QNQTU   RTGRCTG QNQTU   RTGRCTG QNQTU   RTGRCTG QNQTU   RTGRCTG QNQTU   RTGRCTG QNQTU   _ HWPEVKQPVGZV JCPIG ] FQEWOGPVIGV NGOGPV$[+F VGZV UV[NGEQNQTEQNQT6CDNG=KPFGZ? KPFGZ UVGR KH KPFGZ EQNQT6CDNGNGPIVJ^^KPFGZ UVGRUVGR UGV6KOGQWV VGZV JCPIG URGGF  _ -QPKGEMQFW,CXC5ETKRV 5 4+26 * # $1 ;QP.QCF OCMG6CDNG VGZV JCPIG  +8+ VGZV UV[NGXKUKDKNKV[XKUKDNG YKFVJ JGKIVJ VGZV#NKIPEGPVGT RQUKVKQPTGNCVKXG VQR NGHV * 9KVCO[PCPCUGLUVTQPKG*  +8 $1 ; *6/. Ustalenie przejść pomiędzy kolorami jest sprawą indywidualną. W powyższym przy- padku zachodzą następujące zmiany barw: biały- żółty- zielony- seledynowy- niebieski- fioletowy- czerowny- biały. Odpowiednie składowe R, G, B i kody kolo- rów przedstawione są w tabeli 7.3. 156 101 praktycznych skryptów na stronie WWW Tabela 7.3. Przejścia kolorów dla skryptu 87 Lp. R G 0 1 2 3 4 5 6 255– 255 255– 255 255– 0 0– 0 0– 0 0– 255 255– 255 255– 255 255– 255 255– 0 0– 0 0– 0 255– 255 0– 255 B 255– 0 0– 0 0– 255 255– 255 255– 255 255– 0 0– 255 #RRGGBB (((((( (((( (((( (( (( (((( (((( (( (( (((( (((( (( (( (((((( Tabelę tę należy czytać następująco. W iteracji (kolumna lp.) 0 składowa R zmienia się od 255 do 255, czyli ma wartość stałą. Podobnie składowa G cały czas jest równa 255. Składowa B zmienia się od 255 do 0. Ostatecznie prowadzi to do płynnego przejścia od koloru o kodzie (((((( (biały) do koloru o kodzie (((( (żółty). Kolejne iteracje (1 – 6) definiują kolejne zmiany składowych R, G i B. Generacją przejść tonalnych zajmuje się funkcja RTGRCTG QNQTU 4()($(46)6 $6RQU . Jej parametry określają kierunek zmian poszczególnych składowych koloru. Parametry z literą F (od ang. from) określają, od jakiej wartości ma się rozpocząć ite- racja, parametry z literą T (od ang. to), na jakiej wartości ma się zakończyć. Parametr RQU określa numer kolejnej iteracji, a tym samym miejscey w wynikowej tabeli kolorów. Parametry kolejnych wywołań funkcji RTGRCTG QNQTU odczytujemy bezpośrednio z tabeli 7.3. Zatem zerową iterację określa wywołanie:y RTGRCTG QNQTU   iterację pierwszą wywołanie: RTGRCTG QNQTU   itd. Skrypt 89. [E][O] Efekt kurtyny. Przykład ten umożliwi nam uzyskanie efektu rozsuwającej się kurtyny odkrywającej zawartość strony WWW (rysunek 7.5). Wykorzystamy do tego dwie warstwy, które będą przesuwały się od środka na boki. W celu ustalenia wielkości warstw użyjemy znanych już nam właściwości JGKIJV i YKFVJ obiektu UETGGP. Odpowiednich przypi- sań dokonamy w wywoływanej przy załadowaniu dokumentu funkcji KPKV . Sama animacja będzie wykonywana w funkcji RTGUWP . Rozdział 7. ♦ Animacje warstw 157 Rysunek 7.5. Złożona z warstw kurtyna odsłania elementy strony WWW Skrypt 89 *6/. * # OGVCJVVRGSWKX QPVGPV6[RGEQPVGPVVGZVJVONEJCTUGVKUQ 5MT[RVRQEJQFKMUKæľMKRTCMV[EP[EJUMT[RVÎY CWVQT/CTEKP.KUGOCKNUETKRVU OCTEKPNKUEQO * # 56;. YCTUVYC] XKUKDKNKV[XKUKDNG DCEMITQWPFEQNQTTGF RQUKVKQPCDUQNWVG VQR NGHV YKFVJ JGKIJV NC[GTDCEMITQWPFEQNQTTGF _ YCTUVYC] XKUKDKNKV[XKUKDNG DCEMITQWPFEQNQTTGF RQUKVKQPCDUQNWVG VQR NGHV YKFVJ JGKIJV NC[GTDCEMITQWPFEQNQTTGF _ 56;. 5 4+26.#0)7#) ,CXC5ETKRVV[RGVGZVLCXCUETKRV 7MT[EKGRTGFRTGINæFCTMCOKPKGQDUđWIWLæE[OK,CXC5ETKRVW HWPEVKQPKPKV ] KH FQEWOGPVCNN ] FQEWOGPVCNN= YCTUVYC ?UV[NGJGKIJVUETGGPJGKIJV FQEWOGPVCNN= YCTUVYC ?UV[NGYKFVJUETGGPYKFVJ 158 101 praktycznych skryptów na stronie WWW FQEWOGPVCNN= YCTUVYC ?UV[NGNGHV FQEWOGPVCNN= YCTUVYC ?UV[NGJGKIJVUETGGPJGKIJV FQEWOGPVCNN= YCTUVYC ?UV[NGYKFVJUETGGPYKFVJ FQEWOGPVCNN= YCTUVYC ?UV[NGNGHVUETGGPYKFVJ _ EQWPV UETGGPYKFVJ  _ HWPEVKQPRTGUWP ] KH FQEWOGPVCNN ] ZRCTUG+PV FQEWOGPVCNN= YCTUVYC ?UV[NGNGHV  JRCTUG+PV FQEWOGPVCNN= YCTUVYC ?UV[NGYKFVJ  JRCTUG+PV FQEWOGPVCNN= YCTUVYC ?UV[NGYKFVJ  FQEWOGPVCNN= YCTUVYC ?UV[NGNGHVZ  FQEWOGPVCNN= YCTUVYC ?UV[NGYKFVJJ FQEWOGPVCNN= YCTUVYC ?UV[NGYKFVJJ _ _ HWPEVKQPUVCTV ] KH EQWPV  ] RTGUWP  UGV6KOGQWV UVCTV   EQWPV _ _ -QPKGEMQFW,CXC5ETKRV 5 4+26 $1 ;QP.QCFKPKV  *CNKIPEGPVGT  +8KFYCTUVYCUV[NG  +8  +8KFYCTUVYCUV[NG  +8  +8UV[NGRQUKVKQPCDUQNWVG #*4 (LCXCUETKRVUVCTV  5VCTV#  +8 * 2 6WVCLVGMUVUVTQP[ 2 $1 ; *6/. Skrypt 90. [E][N4] Wygenerowane dynamicznie tło. Skrypt ten będzie generował wielokolorowe tło. Utworzymy w tym celu dużą ilość warstw, z których każda kolejna będzie ma nieco zmieniony kolor. Następnie wy- świetliliśmy je wszystkie na ekranie (rysunek 7.6). Kolor (w postaci liczbowej) dla warstwy możemy zdefiniować na cztery sposoby: Rozdział 7. ♦ Animacje warstw 159 Rysunek 7.6. Wygenerowane za pomocą warstw wielokolorowe tło UV[NGEQNQTHH UV[NGEQNQTHHHH UV[NGEQNQTTID   UV[NGEQNQTTID   Najwygodniejsze w tym przypadku było podanie wartości składowych RGB w postaci trzech liczb dziesiętnych z zakresu 0 – 255. Zbudujemy więc na początek tablicę ko- lorów, manipulując kolorem czerwonym i niebieskim w naystępujący sposób: EQNQT6CDNGPGY#TTC[  HQT KK K ] EQNQT6CDNG=K?TID  K   K    EQNQT6CDNG=K ?TID   K   K   _ Tak stworzoną tablicę wykorzystamy do wygenerowania odpowiedniej ilości warstw, za co odpowiedzialna będzie funkcja IGPGTWL . Jako parametry przyjmie ona szero- kość i wysokość okna, przy czym dla uproszczenia wykorzystamy wyłącznie para- metr dotyczący szerokości: HWPEVKQPIGPGTWL YJ ] UVT56;. V[RG VGZVEUU  HQT KK K ] UVT YCTUVYC K ]RQUKVKQPCDUQNWVG UVT YKFVJ Y JGKIJVNGHV UVT VQR K DCEMITQWPFEQNQT EQNQT6CDNG=K? UVT NC[GTDCEMITQWPFEQNQT EQNQT6CDNG=K? UVT ENKRTGEV  Y  _ _ UVTUVT 56;.  FQEWOGPVYTKVG UVT  _ 160 101 praktycznych skryptów na stronie WWW W ten sposób stworzymy zestaw stylów osadzonych, których z kolei użyjemy przy generacji warstw ze znacznikiem +8. Odpowiedzialny będzie za to następujący frag- ment kodu: HQT KK K ] UVT +8KF YCTUVYC K   +8  FQEWOGPVYTKVG UVT  _ Skrypt 90 *6/. * # OGVCJVVRGSWKX QPVGPV6[RGEQPVGPVVGZVJVONEJCTUGVKUQ 5MT[RVRQEJQFKMUKæľMKRTCMV[EP[EJUMT[RVÎY CWVQT/CTEKP.KUGOCKNUETKRVU OCTEKPNKUEQO * # 5 4+26.#0)7#) ,CXC5ETKRVV[RGVGZVLCXCUETKRV 7MT[EKGRTGFRTGINæFCTMCOKPKGQDUđWIWLæE[OK,CXC5ETKRVW EQNQT6CDNGPGY#TTC[  HQT KKK ] EQNQT6CDNG=K?TID  K   K    EQNQT6CDNG=K ?TID   K   K   _ HWPEVKQPIGPGTWL YJ ] UVT56;. V[RG VGZVEUU  HQT KK K ] UVT YCTUVYC K ]RQUKVKQPCDUQNWVG UVT YKFVJ Y JGKIJVNGHV UVT VQR K DCEMITQWPFEQNQT EQNQT6CDNG=K? UVT NC[GTDCEMITQWPFEQNQT EQNQT6CDNG=K? UVT ENKRTGEV  Y  _ _ UVTUVT 56;.  FQEWOGPVYTKVG UVT  UVT _ -QPKGEMQFW,CXC5ETKRV 5 4+26 $1 ;EQNQTYJKVG ZZZ 5 4+26.#0)7#) ,CXC5ETKRVV[RGVGZVLCXCUETKRV KH FQEWOGPVCNN ] IGPGTWL FQEWOGPVDQF[UETQNN9KFVJFQEWOGPVDQF[UETQNN*GKIJV  _ GNUGKH FQEWOGPVNC[GTU ] IGPGTWL YKPFQYKPPGT9KFVJYKPFQYKPPGT*GKIJV  _ HQT KK K ] UVT +8KF YCTUVYC K   +8  FQEWOGPVYTKVG UVT  _ -QPKGEMQFW,CXC5ETKRV 5 4+26 $1 ; *6/. Rozdział 7. ♦ Animacje warstw 161 Warto zauważyć, że trzy literki xxx, znalazły się za znacznikiem $1 ; nieprzypad- kowo. Nie będą one widoczne, jako że zostaną przykryte przez warstwy. Są one jednak niezbędne dla prawidłowej interpretacji skryptu przez Internet Explorera w wersjach poniżej 6. Jeżeli bowiem plik HTML nie zawiera żadnej wyświetlanej treści w sekcji BODY (np. użytych przez nas znaków „x”), przeglądarki te generują warstwy o nie- prawidłowej szerokości. Łatwo możemy się o tym przekonać, usuwając wspomniany fragment kodu. Efekt będzie mniej więcej taki jak na ryysunku 7.7. Rysunek 7.7. Usunięcie fragmentu kodu powoduje błędne działanie skryptu Przykład ten należy też traktować jako pokaz możliwości dynamicznego generowania warstw. Stosowanie go w praktyce napotka na spore problemy ze względu na wolne działanie i duże zużycie zasobów systemowych. Trzeba pamiętać, że wygenerowali- śmy 512 warstw. Skrypt 91. [E][N4][O] Kurtyna z dynamicznie generowanymi warstwami. Poprzedni skrypt pokazał nam, jak generować warstwy z poziomu JavaScript, może- my wiedzę tą wykorzystać do zmodyfikowania naszego przykładu z rozsuwającą się kurtyną (skrypt 89). Za wygenerowanie odpowiedniego stylu będzie teraz odpowie- dzialny następujący kod: KH FQEWOGPVNC[GTU ] UVT56;. V[RG VGZVEUU  UVT YCTUVYC]XKUKDKNKV[XKUKDNGDCEMITQWPFEQNQTTGF UVT RQUKVKQPCDUQNWVGVQRNGHVYKFVJJGKIJV UVT NC[GTDCEMITQWPFEQNQTTGFENKRTGEV  UVT UETGGPYKFVJ  UVT UETGGPJGKIJV  _ UVT YCTUVYC]XKUKDKNKV[XKUKDNGDCEMITQWPFEQNQTTGF 162 101 praktycznych skryptów na stronie WWW UVT RQUKVKQPCDUQNWVGVQRNGHV UETGGPYKFVJ  UVT YKFVJJGKIJV UVT NC[GTDCEMITQWPFEQNQTTGFENKRTGEV  UVT UETGGPYKFVJ  UVT UETGGPJGKIJV  _ UVT 56;.  FQEWOGPVYTKVG UVT  _ Wystarczy teraz wprawić tak wygenerowane warstwy w ruch. Dokonujemy tego w sposób analogiczny jak w skrypcie 89, manipulując parametrami NGHV oraz YKFVJ warstw. W przypadku przeglądarki Netscape używamy metoydy QHHUGV w postaci: FQEWOGPVNC[GTU=PCYCAYCTUVY[?QHHUGV QHHUGV*QHHUGV8  gdzie offsetH to przesunięcie warstwy w poziomie (w pikselach), a offsetV przesunię- cie w pionie. Skrypt 91 *6/. * # OGVCJVVRGSWKX QPVGPV6[RGEQPVGPVVGZVJVONEJCTUGVKUQ 5MT[RVRQEJQFKMUKæľMKRTCMV[EP[EJUMT[RVÎY CWVQT/CTEKP.KUGOCKNUETKRVU OCTEKPNKUEQO * # 56;. YCTUVYC] XKUKDKNKV[XKUKDNG DCEMITQWPFEQNQTTGF RQUKVKQPCDUQNWVG VQR NGHV YKFVJ JGKIJV NC[GTDCEMITQWPFEQNQTTGF _ YCTUVYC] XKUKDKNKV[XKUKDNG DCEMITQWPFEQNQTTGF RQUKVKQPCDUQNWVG VQR NGHV YKFVJ JGKIJV NC[GTDCEMITQWPFEQNQTTGF _ 56;. 5 4+26.#0)7#) ,CXC5ETKRVV[RGVGZVLCXCUETKRV 7MT[EKGRTGFRTGINæFCTMCOKPKGQDUđWIWLæE[OK,CXC5ETKRVW KH FQEWOGPVNC[GTU ] UVT56;. V[RG VGZVEUU  UVT YCTUVYC]XKUKDKNKV[XKUKDNGDCEMITQWPFEQNQTTGF UVT RQUKVKQPCDUQNWVGVQRNGHVYKFVJJGKIJV UVT NC[GTDCEMITQWPFEQNQTTGFENKRTGEV  UVT UETGGPYKFVJ  UVT UETGGPJGKIJV  _ Rozdział 7. ♦ Animacje warstw 163 UVT YCTUVYC]XKUKDKNKV[XKUKDNGDCEMITQWPFEQNQTTGF UVT RQUKVKQPCDUQNWVGVQRNGHV UETGGPYKFVJ  UVT YKFVJJGKIJV UVT NC[GTDCEMITQWPFEQNQTTGFENKRTGEV  UVT UETGGPYKFVJ  UVT UETGGPJGKIJV  _ UVT 56;.  FQEWOGPVYTKVG UVT  _ HWPEVKQPKPKV ] KH FQEWOGPVCNN ] FQEWOGPVCNN= YCTUVYC ?UV[NGJGKIJVUETGGPJGKIJV FQEWOGPVCNN= YCTUVYC ?UV[NGYKFVJUETGGPYKFVJ FQEWOGPVCNN= YCTUVYC ?UV[NGNGHV FQEWOGPVCNN= YCTUVYC ?UV[NGJGKIJVUETGGPJGKIJV FQEWOGPVCNN= YCTUVYC ?UV[NGYKFVJUETGGPYKFVJ FQEWOGPVCNN= YCTUVYC ?UV[NGNGHVUETGGPYKFVJ _ EQWPV UETGGPYKFVJ  _ HWPEVKQPRTGUWP ] KH FQEWOGPVCNN ] ZRCTUG+PV FQEWOGPVCNN= YCTUVYC ?UV[NGNGHV  JRCTUG+PV FQEWOGPVCNN= YCTUVYC ?UV[NGYKFVJ  JRCTUG+PV FQEWOGPVCNN= YCTUVYC ?UV[NGYKFVJ  FQEWOGPVCNN= YCTUVYC ?UV[NGNGHVZ  FQEWOGPVCNN= YCTUVYC ?UV[NGYKFVJJ FQEWOGPVCNN= YCTUVYC ?UV[NGYKFVJJ _ GNUGKH FQEWOGPVNC[GTU ] FQEWOGPVNC[GTU= YCTUVYC ?QHHUGV   FQEWOGPVNC[GTU= YCTUVYC ?QHHUGV   _ _ HWPEVKQPUVCTV ] KH EQWPV  ] RTGUWP  UGV6KOGQWV UVCTV   EQWPV _ _ -QPKGEMQFW,CXC5ETKRV 5 4+26 $1 ;QP.QCFKPKV  *CNKIPEGPVGT  +8KFYCTUVYCUV[NG  +8  +8KFYCTUVYCUV[NG  +8  +8UV[NGRQUKVKQPCDUQNWVG #*4 (LCXCUETKRVUVCTV  5VCTV#  +8 * 2 6WVCLVGMUVUVTQP[ 2 $1 ; *6/. 164 101 praktycznych skryptów na stronie WWW Skrypt 92. [E][O] Obrazek odbijający się od boków ekranu (rysunek 7.8). Rysunek 7.8. Widoczny obrazek będzie „pływał” po ekranie, odbijając się od jego boków Efekt obrazka pływającego po ekranie i odbijającego się od jego boków osiągniemy, manipulując parametrami NGHV oraz VQR obiektu UV[NG odpowiedniej warstwy. Nie- zbędne jest również oczywiście wykrywanie kolizji z brzegami okna przeglądarki. Funkcje te realizuje kod w skrypcie 92. Skrypt 92 *6/. * # OGVCJVVRGSWKX QPVGPV6[RGEQPVGPVVGZVJVONEJCTUGVKUQ 5MT[RVRQEJQFKMUKæľMKRTCMV[EP[EJUMT[RVÎY CWVQT/CTEKP.KUGOCKNUETKRVU OCTEKPNKUEQO * # 5 4+26.#0)7#) ,CXC5ETKRVV[RGVGZVLCXCUETKRV 7MT[EKGRTGFRTGINæFCTMCOKPKGQDUđWIWLæE[OK,CXC5ETKRVW XCTURGGF XCTUVGR: XCTUVGR; XCT[2QUZ2QU HWPEVKQPUETQNN ] XCTUETGGP9KFVJFQEWOGPVDQF[ENKGPV9KFVJ XCTUETGGP*GKIJVFQEWOGPVDQF[ENKGPV*GKIJV XCTNC[GT9KFVJYCTUVYCQHHUGV9KFVJ XCTNC[GT*GKIJVYCTUVYCQHHUGV*GKIJV Z2QUZ2QU UVGR: [2QU[2QU UVGR; YCTUVYCUV[NGNGHVZ2QU YCTUVYCUV[NGVQR[2QU Rozdział 7. ♦ Animacje warstw 165 KH Z2QU UETGGP9KFVJNC[GT9KFVJ ^^ Z2QU ] UVGR:UVGR: _ KH [2QU UETGGP*GKIJVNC[GT*GKIJV ^^ [2QU ] UVGR;UVGR; _ UGV6KOGQWV UETQNN URGGF  _ -QPKGEMQFW,CXC5ETKRV 5 4+26 $1 ;QP.QCFUETQNN   +8+ YCTUVYCUV[NGRQUKVKQPCDUQNWVG +/)54 KOCIGLRI  +8 $1 ; *6/. Skrypt ten działa w sposób następujący. Tworzymy warstwę o nazwie YCTUVYC i umiesz- czamy na niej obrazek image1.jpg. Oczywiście plik o takiej nazwie musi znajdować się w podanej lokalizacji. Warstwę tę przesuwamy w funkcji UETQNN w taki sposób, by po osiągnięciu końców ekranu odbijała się od nich jak piłka. Osiągamy to, mani- pulując zmiennymi Z5VGR i [5VGR. Jeżeli bieżąca pozycja xanimowanej warstwy jest mniejsza od 1, zmienna Z5VGR musi być dodatnia, jeżeli natomiast pozycja ta jest więk- sza lub równa szerokości ekranu, Z5VGR musi przyjąć wartość ujemną. Ze zmienną [5VGR postępujemy analogicznie. Oczywiście, aby efekt był prawidłowy, w oblicze- niach należy uwzględnić szerokość i wysokość warstwy. Szerokość warstwy uzysku- jemy dzięki linii: XCTNC[GT9KFVJYCTUVYCQHHUGV9KFVJ a wysokość: XCTNC[GT*GKIJVYCTUVYCQHHUGV*GKIJV Skrypt 93. [E][N6] Skalowanie obrazka. Manipulując właściwościami YKFVJ i JGKIJV umieszczonego na warstwie obiektu ob- razka definiowanego znacznikiem +/) , możemy osiągnąć ciekawy efekt jego prze- skalowania. Może on np. płynnie powiększać się od zera, aż do osiągnięcia swoich pełnych wymiarów (rysunek 7.9). Skrypt 93 *6/. * # OGVCJVVRGSWKX QPVGPV6[RGEQPVGPVVGZVJVONEJCTUGVKUQ 5MT[RVRQEJQFKMUKæľMKRTCMV[EP[EJUMT[RVÎY CWVQT/CTEKP.KUGOCKNUETKRVU OCTEKPNKUEQO 5 4+26.#0)7#) ,CXC5ETKRVV[RGVGZVLCXCUETKRV 101 praktycznych skryptów na stronie WWW 166 Rysunek 7.9. Obrazek jest skalowany do zadanych wymiarów 7MT[EKGRTGFRTGINæFCTMCOKPKGQDUđWIWLæE[OK,CXC5ETKRVW XCTURGGF XCTUKG: XCTUKG; XCTUVGR: XCTUVGR; XCTUVGRU XCTKOI1DL HWPEVKQPWUVCY ] KOI1DLFQEWOGPVIGV NGOGPV$[+F QDTCGM+F  UVGR:/CVJEGKN UKG:UVGRU  UVGR;/CVJEGKN UKG;UVGRU  _ HWPEVKQPTGUKG ] EWTTGPV9KOI1DLYKFVJ EWTTGPV*KOI1DLJGKIJV KH EWTTGPV9UKG:  EWTTGPV*UKG; ] KOI1DLYKFVJEWTTGPV9 UVGR: KOI1DLJGKIJVEWTTGPV* UVGR; UGV6KOGQWV TGUKG URGGF  _ _ -QPKGEMQFW,CXC5ETKRV 5 4+26 * # $1 ;QP.QCF WUVCY TGUKG  *#.+)0EGPVGT 6TGħèUVTQP[*  +8+ KOI.C[GT#.+)0EGPVGT +/)54 KOCIGIKH 0#/ QDTCGM + QDTCGM+F * +)*6 9+ 6*  +8 $1 ; *6/. Rozdział 7. ♦ Animacje warstw 167 Ilość kroków, w których obrazek zostanie powiększony do swojej oryginalnej wielkości, definiowany jest poprzez zmienną UVGRU. Określa ona tym samym jakość i, częściowo, szybkość całej animacji. Drugim parametrem wpływającym na prędkość dokonywa- nych zmian jest znana nam dobrze zmienna URGGF odpowiadająca za czas, który ma upłynąć pomiędzy kolejnymi wywołaniami funkcji TGUKG . W każdym wywołaniu funkcji TGUKG zwiększamy wysokość obrazka o wielkość UVGR:, natomiast szerokość o wielkość UVGR;. Parametry UVGR: i UVGR; wyliczamy w funkcji WUVCY na podstawie zdefiniowanej wcześniej w zmiennej UVGRU ilości kroków oraz wielkości obrazka. Służą do tego wzory: UVGR:/CVJEGKN UKG:UVGRU  UVGR;/CVJEGKN UKG;UVGRU  Skrypt 94. [E][N6] Pulsujący obrazek. Skrypt ten jest modyfikacją skryptu 93. Powoduje on, że zdefiniowany na warstwie obrazek cyklicznie zwiększa i zmniejsza swoje rozmiary. Efekt ten osiągamy poprzez zmianę znaku wartości UVGR: i UVGR; w przypadku, gdy wielkość obrazu jest mniejsza od zera lub większa od wielkości oryginalnej. Skrypt 94 *6/. * # OGVCJVVRGSWKX QPVGPV6[RGEQPVGPVVGZVJVONEJCTUGVKUQ 5MT[RVRQEJQFKMUKæľMKRTCMV[EP[EJUMT[RVÎY CWVQT/CTEKP.KUGOCKNUETKRVU OCTEKPNKUEQO 5 4+26.#0)7#) ,CXC5ETKRVV[RGVGZVLCXCUETKRV 7MT[EKGRTGFRTGINæFCTMCOKPKGQDUđWIWLæE[OK,CXC5ETKRVW XCTURGGF XCTUKG: XCTUKG; XCTUVGR: XCTUVGR; XCTUVGRU XCTKOI1DL HWPEVKQPWUVCY ] KOI1DLFQEWOGPVIGV NGOGPV$[+F QDTCGM+F  UVGR:/CVJEGKN UKG:UVGRU  UVGR;/CVJEGKN UKG;UVGRU  _ HWPEVKQPTGUKG ] EWTTGPV9KOI1DLYKFVJ EWTTGPV*KOI1DLJGKIJV KH  EWTTGPV9 UKG: ^^ EWTTGPV* UKG; ^^  EWTTGPV9 ^^ EWTTGPV* 168 101 praktycznych skryptów na stronie WWW  ] UVGR:UVGR: UVGR;UVGR; _ KOI1DLYKFVJEWTTGPV9 UVGR: KOI1DLJGKIJVEWTTGPV* UVGR; UGV6KOGQWV TGUKG URGGF  _ -QPKGEMQFW,CXC5ETKRV 5 4+26 * # $1 ;QP.QCF WUVCY TGUKG  *#.+)0EGPVGT 6TGħèUVTQP[*  +8+ KOI.C[GT#.+)0EGPVGT +/)54 KOCIGIKH 0#/ QDTCGM + QDTCGM+F * +)*6 9+ 6*  +8 $1 ; *6/. Skrypt 95. [E][O] Spadające warstwy. Skrypt ten pozwala na uzyskanie efektu padającego śniegu (rysunek 7.10), deszczu czy też spadania innego typu obiektów. W czasie walentynek, na niektórych stronach spotyka się na przykład spadające serca. W najprostszym przypadku zadanie to jest dosyć łatwe w realizacji. Definiujemy na stronie odpowiednią ilość warstw zawierają- cych obrazki o zadanym motywie, a następnie wprawiamy yje w ruch. Rysunek 7.10. Padający na stronie „śnieg” Rozdział 7. ♦ Animacje warstw 169 Należy tylko pamiętać, aby każda „spadała” z właściwą sobie, różną od innych pręd- kością. Uzyskujemy to dzięki losowaniu dla każdej warstwy ilości pikseli, o jaką ma się przemieścić w pojedynczym ruchu. Podobnie, losowana powinna być współrzędna xpołożenia początkowego. Skrypt 95 *6/. * # OGVCJVVRGSWKX QPVGPV6[RGEQPVGPVVGZVJVONEJCTUGVKUQ 5MT[RVRQEJQFKMUKæľMKRTCMV[EP[EJUMT[RVÎY CWVQT/CTEKP.KUGOCKNUETKRVU OCTEKPNKUEQO 5 4+26.#0)7#) ,CXC5ETKRVV[RGVGZVLCXCUETKRV 7MT[EKGRTGFRTGINæFCTMCOKPKGQDUđWIWLæE[OK,CXC5ETKRVW XCTURGGF6CDNGPGY#TTC[  XCTURGGF XCTURGGF.GXGNU HWPEVKQPWUVCY ] HQT KKK ] KH FQEWOGPVCNN ] XCTRQU:/CVJEGKN /CVJTCPFQO   FQEWOGPVDQF[ENKGPV9KFVJ  FQEWOGPVCNN= GN  K?UV[NGNGHVRQU: _ URGGF6CDNG=K?/CVJEGKN /CVJTCPFQO  URGGF.GXGNU  _ _ HWPEVKQPUVCTV ] HQT KKK ] KH FQEWOGPVCNN ] ZRCTUG+PV FQEWOGPVCNN= GN  K?UV[NGVQR  Z URGGF6CDNG=K? KH Z FQEWOGPVDQF[ENKGPV*GKIJV ] Z XCTRQU:/CVJEGKN /CVJTCPFQO   FQEWOGPVDQF[ åENKGPV9KFVJ  FQEWOGPVCNN= GN  K?UV[NGNGHVRQU: URGGF6CDNG=K?/CVJEGKN /CVJTCPFQO  URGGF.GXGNU  _ FQEWOGPVCNN= GN  K?UV[NGVQRZ _ _ UGV6KOGQWV UVCTV URGGF  _ -QPKGEMQFW,CXC5ETKRV 5 4+26 * # $1 ;QP.QCFWUVCY UVCTV   +8+ GN UV[NGXKUKDKNKV[XKUKDNG YKFVJRZ JGKIVJRZ RQUKVKQPCDUQNWVG VQR NGHV +/)54  UPQYIKH  +8 170 101 praktycznych skryptów na stronie WWW  +8+ GN UV[NGXKUKDKNKV[XKUKDNG YKFVJRZ JGKIVJRZ RQUKVKQPCDUQNWVG VQR NGHV +/)54  UPQYIKH  +8  +8+ GN UV[NGXKUKDKNKV[XKUKDNG YKFVJRZ JGKIVJRZ RQUKVKQPCDUQNWVG VQR NGHV +/)54  UPQYIKH  +8  +8+ GN UV[NGXKUKDKNKV[XKUKDNG YKFVJRZ JGKIVJRZ RQUKVKQPCDUQNWVG VQR NGHV +/)54  UPQYIKH  +8  +8+ GN UV[NGXKUKDKNKV[XKUKDNG YKFVJRZ JGKIVJRZ RQUKVKQPCDUQNWVG VQR NGHV +/)54  UPQYIKH  +8  +8+ GN UV[NGXKUKDKNKV[XKUKDNG YKFVJRZ JGKIVJRZ RQUKVKQPCDUQNWVG VQR NGHV +/)54  UPQYIKH  +8  +8+ GN UV[NGXKUKDKNKV[XKUKDNG YKFVJRZ JGKIVJRZ RQUKVKQPCDUQNWVG VQR NGHV +/)54  UPQYIKH  +8  +8+ GN UV[NGXKUKDKNKV[XKUKDNG YKFVJRZ Rozdział 7. ♦ Animacje warstw 171 JGKIVJRZ RQUKVKQPCDUQNWVG VQR NGHV +/)54  UPQYIKH  +8  +8+ GN UV[NGXKUKDKNKV[XKUKDNG YKFVJRZ JGKIVJRZ RQUKVKQPCDUQNWVG VQR NGHV +/)54  UPQYIKH  +8  +8+ GN UV[NGXKUKDKNKV[XKUKDNG YKFVJRZ JGKIVJRZ RQUKVKQPCDUQNWVG VQR NGHV +/)54  UPQYIKH  +8 *CNKIPEGPVGT 6TGħèUVTQP[* $1 ; *6/. Funkcja WUVCY odpowiada za zainicjowanie niezbędnych tablic i zmiennych. Doko- nujemy tu losowania prędkości oraz pozycji xdla każdej warstwy. Ilość poziomów prędkości określana jest zmienną URGGF.GXGNU. Za losowanie odpowiada więc prosta konstrukcja: /CVJEGKN /CVJTCPFQO  URGGF.GXGNU  W podobny sposób losujemy pozycję warstwy na ekranie. Uwzględniamy tu jednak wielkość ekranu i szerokość warstw. Odpowiada za to ykonstrukcja: XCTRQU:/CVJEGKN /CVJTCPFQO   FQEWOGPVDQF[ENKGPV9KFVJ N9KFVJ  Przemieszczanie warstw jest realizowane w wywoływanej cyklicznie funkcji UVCTV . Modyfikujemy właściwość VQR każdej warstwy, stosując przypisanie: FQEWOGPVCNN= GN  K?UV[NGVQRZ Skrypt 96. [E][O] Spadające warstwy generowane dynamicznie. Skrypt ten jest modyfikacją skryptu 95. Realizuje on takyi sam efekt, jednak tym razem warstwy generowane są dynamicznie. Dzięki temu kod skryptu jest krótszy, pozbawia nas to jednak możliwości wpływania na wygląd każdej warstwy z osobna. W tym 172 101 praktycznych skryptów na stronie WWW przykładzie wszystkie one będą identyczne. Którą z wersji wybrać? Zależy to oczy- wiście od konkretnego zastosowania. Jeśli chcemy, aby każda z warstw miała swoje własne właściwości, wybierzemy kod ze skryptu 95, jeśli wszystkie mają być takie same, kod ze skryptu 96. Skrypt 96 *6/. * # OGVCJVVRGSWKX QPVGPV6[RGEQPVGPVVGZVJVONEJCTUGVKUQ 5MT[RVRQEJQFKMUKæľMKRTCMV[EP[EJUMT[RVÎY CWVQT/CTEKP.KUGOCKNUETKRVU OCTEKPNKUEQO 5 4+26.#0)7#) ,CXC5ETKRVV[RGVGZVLCXCUETKRV 7MT[EKGRTGFRTGINæFCTMCOKPKGQDUđWIWLæE[OK,CXC5ETKRVW XCTURGGF6CDNGPGY#TTC[  XCTURGGF XCTURGGF.GXGNU XCTNC[GTU QWPV HWPEVKQPWUVCY ] HQT KKNC[GTU QWPVK ] KH FQEWOGPVCNN ] FQEWOGPVCNN= GN  K?UV[NGNGHV/CVJEGKN /CVJTCPFQO  å FQEWOGPVDQF[ENKGPV9KFVJ  _ URGGF6CDNG=K?/CVJEGKN /CVJTCPFQO  URGGF.GXGNU  _ _ HWPEVKQPUVCTV ] HQT KKNC[GTU QWPVK ] KH FQEWOGPVCNN ] ZRCTUG+PV FQEWOGPVCNN= GN  K?UV[NGVQR  Z URGGF6CDNG=K? KH Z FQEWOGPVDQF[ENKGPV*GKIJV ] Z FQEWOGPVCNN= GN  K?UV[NGNGHV/CVJEGKN /CVJTCPFQO å  FQEWOGPVDQF[ENKGPV9KFVJ  URGGF6CDNG=K?/CVJEGKN /CVJTCPFQO  URGGF.GXGNU  _ FQEWOGPVCNN= GN  K?UV[NGVQRZ _ _ UGV6KOGQWV UVCTV  URGGF  _ -QPKGEMQFW,CXC5ETKRV 5 4+26 * # $1 ;QP.QCF WUVCY UVCTV  5 4+26.#0)7#) ,CXC5ETKRVV[RGVGZVLCXCUETKRV 7MT[EKGRTGFRTGINæFCTMCOKPKGQDUđWIWLæE[OK,CXC5ETKRVW HQT KKNC[GTU QWPVK ] UVT  +8+ GN  K    UVT  UV[NGXKUKDKNKV[XKUKDNG  UVT  YKFVJRZ  UVT  JGKIVJRZ  UVT  RQUKVKQPCDUQNWVG  UVT  VQR  Rozdział 7. ♦ Animacje warstw 173 UVT  NGHV  UVT  +/)54 UPQYIKH  UVT   +8  FQEWOGPVYTKVG UVT  _ FQEWOGPVYTKVG *CNKIPEGPVGT 6TGħèUVTQP[*  -QPKGEMQFW,CXC5ETKRV 5 4+26 *CNKIPEGPVGT 6TGħèUVTQP[* $1 ; *6/. Skrypt 97. [E][O] Płatki śniegu przemieszczające się w dwóch kierunkach. Skrypt 95 pokazał nam, w jaki sposób wygenerować „spadające” z ekranu warstwy. Jako obrazów użyliśmy wtedy płatków śniegu. Jednak śnieg z reguły przemieszcza się również w kierunku poziomym. Aby więc efekt był bardziej realistyczny, powin- niśmy dodać przemieszczanie warstw w poziomie. Nie jest to oczywiście skomplikowana modyfikacja. Użyjemy dwóch tablic do okre- ślania prędkości warstw. Tablicy URGGF6CDNG; dla przemieszczeń w pionie oraz URG GF6CDNG: dla przemieszczeń w poziomie. W przypadku przemieszczania po osi x mu- simy dodatkowo wylosować kierunek ruchu każdej warstwy. Inaczej wszystkie płatki będą się poruszały tylko w jednym kierunku, co da barydzo nienaturalny efekt. Ostatecznie do losowania użyjemy następującego kodu: URGGF6CDNG;=K?/CVJEGKN /CVJTCPFQO  URGGF.GXGNU;  XCTFKT /CVJTCPFQO  ! URGGF6CDNG:=K?FKT /CVJEGKN /CVJTCPFQO  URGGF.GXGNU:  Oczywiście kod ten należy umieścić w pętli HQT, gdzie zmienną sterująca jest K. Pozostało nam jeszcze podjąć decyzję, co zrobić w przypadku, kiedy dana warstwa osiągnie prawy bądź lewy brzeg ekranu. Najciekawiej będzie, jeśli w takiej sytuacji odbije się ona od tego brzegu i zacznie przesuwać się w przeciwnym kierunku. Efekt ten osiągniemy, zmieniając znak odpowiedniej wartości w tablicy URGGF6CDNG:, czyli pisząc: URGGF6CDNG:=K?URGGF6CDNG:=K? Skrypt 97 *6/. * # OGVCJVVRGSWKX QPVGPV6[RGEQPVGPVVGZVJVONEJCTUGVKUQ 5MT[RVRQEJQFKMUKæľMKRTCMV[EP[EJUMT[RVÎY CWVQT/CTEKP.KUGOCKNUETKRVU OCTEKPNKUEQO 5 4+26.#0)7#) ,CXC5ETKRVV[RGVGZVLCXCUETKRV 174 101 praktycznych skryptów na stronie WWW 7MT[EKGRTGFRTGINæFCTMCOKPKGQDUđWIWLæE[OK,CXC5ETKRVW XCTURGGF6CDNG;PGY#TTC[  XCTURGGF6CDNG:PGY#TTC[  XCTURGGF XCTURGGF.GXGNU; XCTURGGF.GXGNU: XCTNC[GTU QWPV HWPEVKQPWUVCY ] HQT KKNC[GTU QWPVK ] KH FQEWOGPVCNN ] FQEWOGPVCNN= GN  K?UV[NGNGHV/CVJEGKN /CVJTCPFQO  å FQEWOGPVDQF[ENKGPV9KFVJ  _ URGGF6CDNG;=K?/CVJEGKN /CVJTCPFQO  URGGF.GXGNU;  XCTFKT /CVJTCPFQO  ! URGGF6CDNG:=K?FKT /CVJEGKN /CVJTCPFQO  URGGF.GXGNU:  _ _ HWPEVKQPUVCTV ] HQT KKNC[GTU QWPVK ] KH FQEWOGPVCNN ] ZRCTUG+PV FQEWOGPVCNN= GN  K?UV[NGNGHV  Z URGGF6CDNG:=K? KH Z FQEWOGPVDQF[ENKGPV9KFVJ ^^ Z ] URGGF6CDNG:=K?URGGF6CDNG:=K? _ FQEWOGPVCNN= GN  K?UV[NGNGHVZ [RCTUG+PV FQEWOGPVCNN= GN  K?UV[NGVQR  [ URGGF6CDNG;=K? KH [ FQEWOGPVDQF[ENKGPV*GKIJV ] [ FQEWOGPVCNN= GN  K?UV[NGNGHV/CVJEGKN /CVJTCPFQO å  FQEWOGPVDQF[ENKGPV9KFVJ  URGGF6CDNG;=K?/CVJEGKN /CVJTCPFQO  URGGF.GXGNU;  XCTFKT /CVJTCPFQO  ! URGGF6CDNG:=K?FKT /CVJEGKN /CVJTCPFQO  åURGGF.GXGNU:  _ FQEWOGPVCNN= GN  K?UV[NGVQR[ _ _ UGV6KOGQWV UVCTV  URGGF  _ -QPKGEMQFW,CXC5ETKRV 5 4+26 * # $1 ;QP.QCF WUVCY UVCTV  5 4+26.#0)7#) ,CXC5ETKRVV[RGVGZVLCXCUETKRV 7MT[EKGRTGFRTGINæFCTMCOKPKGQDUđWIWLæE[OK,CXC5ETKRVW HQT KKNC[GTU QWPVK ] UVT  +8+ GN  K    UVT  UV[NGXKUKDKNKV[XKUKDNG  UVT  YKFVJRZ  UVT  JGKIVJRZ  UVT  RQUKVKQPCDUQNWVG  UVT  VQR  Rozdział 7. ♦ Animacje warstw 175 UVT  NGHV  UVT  +/)54 UPQYIKH  UVT   +8  FQEWOGPVYTKVG UVT  _ -QPKGEMQFW,CXC5ETKRV 5 4+26 *CNKIPEGPVGT 6TGħèUVTQP[* $1 ; *6/. Skrypt 98. [E][O] Realistycznie padający śnieg. Skrypt ten generuje najbardziej realistycznie padający śnieg z dotychczas zaprezen- towanych. Otrzymamy płatki bardzo płynnie poruszające się po ekranie i „samodziel- nie” zmieniające kierunek ruchu. Osiągniemy to dzięki skorzystaniu z funkcji sinus. Zatem procedury realizujące ruch w pionie, tak jak we wszystkich poprzednich przy- kładach, pozostają bez zmian. Kolejne fazy ruchu w poziomie będą wyliczane ze wzoru: PGY:UKP D  UOQQVJ  CORNKVWFG  UVCTV: gdzie D jest parametrem oznaczającym przesunięcie danego płatka na sinusoidzie, natomiast UOQQVJ odpowiada za płynność ruchu. Dokładniej określa, ile faz ruchu zmie- ścić ma się w przedziale od 0 do Π. Wartość CRONKVWFG wyznacza rozciągnięcie sinu- soidy w poziomie, czyli to, jak bardzo dany płatek ma się odchylać w prawo i w lewo. 5VCTV: to pozycja początkowa danej warstwy. Wzór ten po przełożeniu na kod powinien wyglądać następyująco: VCD$=K? /CVJ2+UOQQVJ=K? ZRCTUG+PV /CVJUKP VCD$=K?  CORNKVWFG=K?  RQU:=K? Zamiast parametrów występują tutaj tablice, jako że w każdym kroku generujemy po- zycje oddzielnie dla każdej warstwy. W funkcji WUVCY będziemy wypełniać wszystkie tablice wartościami początkowymi w sposób następujący (oczywiście instrukcje te należy umieścić w pętli HQT): RQU:=K?/CVJEGKN /CVJTCPFQO   FQEWOGPVDQF[ENKGPV9KFVJ  URGGF6CDNG;=K?/CVJEGKN /CVJTCPFQO  URGGF.GXGNU;  CORNKVWFG=K?/CVJEGKN /CVJTCPFQO     UOQQVJ=K?/CVJEGKN /CVJTCPFQO     VCD$=K?/CVJTCPFQO   Kod ten nie musi być aż tak bardzo sparametryzowany w konkretnej realizacji, jednak dzięki temu każdy może uzyskać najlepsze według niego ustawienia opisujące ruch płatków. Wystarczy manipulować podanymi parametrami. Najlepiej po prostu poeks- perymentować i dobrać je według własnego uznania. 176 Skrypt 98 101 praktycznych skryptów na stronie WWW *6/. * # OGVCJVVRGSWKX QPVGPV6[RGEQPVGPVVGZVJVONEJCTUGVKUQ 5MT[RVRQEJQFKMUKæľMKRTCMV[EP[EJUMT[RVÎY CWVQT/CTEKP.KUGOCKNUETKRVU OCTEKPNKUEQO 5 4+26.#0)7#) ,CXC5ETKRVV[RGVGZVLCXCUETKRV 7MT[EKGRTGFRTGINæFCTMCOKPKGQDUđWIWLæE[OK,CXC5ETKRVW XCTURGGF6CDNG;PGY#TTC[  XCTRQU:PGY#TTC[  XCTUOQQVJPGY#TTC[  XCTCORNKVWFGPGY#TTC[  XCTVCD$PGY#TTC[  XCTURGGF XCTURGGF.GXGNU; XCTNC[GTU QWPV HWPEVKQPWUVCY ] HQT KKNC[GTU QWPVK ] KH FQEWOGPVCNN ] RQU:=K?/CVJEGKN /CVJTCPFQO   FQEWOGPVDQF[ENKGPV9KFVJ  _ URGGF6CDNG;=K?/CVJEGKN /CVJTCPFQO  URGGF.GXGNU;  CORNKVWFG=K?/CVJEGKN /CVJTCPFQO     UOQQVJ=K?/CVJEGKN /CVJTCPFQO     VCD$=K?/CVJTCPFQO   _ _ XCTD HWPEVKQPUVCTV ] HQT KKNC[GTU QWPVK ] KH FQEWOGPVCNN ] [RCTUG+PV FQEWOGPVCNN= GN  K?UV[NGVQR  [ URGGF6CDNG;=K? VCD$=K? /CVJ2+UOQQVJ=K? ZRCTUG+PV /CVJUKP VCD$=K?  CORNKVWFG=K?  RQU:=K? KH Z FQEWOGPVDQF[ENKGPV9KFVJ ] ZFQEWOGPVDQF[ENKGPV9KFVJ _ FQEWOGPVCNN= GN  K?UV[NGNGHVZ KH [ FQEWOGPVDQF[ENKGPV*GKIJV ] [ RQU:=K?/CVJEGKN /CVJTCPFQO  å FQEWOGPVDQF[ENKGPV9KFVJ  URGGF6CDNG;=K?/CVJEGKN /CVJTCPFQO  URGGF.GXGNU;  CORNKVWFG=K?/CVJEGKN /CVJTCPFQO     UOQQVJ=K?/CVJEGKN /CVJTCPFQO     _ FQEWOGPVCNN= GN  K?UV[NGVQR[ _ _ UGV6KOGQWV UVCTV URGGF  _ -QPKGEMQFW,CXC5ETKRV 5 4+26 * # Rozdział 7. ♦ Animacje warstw 177 $1 ;QP.QCF WUVCY UVCTV  5 4+26.#0)7#) ,CXC5ETKRVV[RGVGZVLCXCUETKRV 7MT[EKGRTGFRTGINæFCTMCOKPKGQDUđWIWLæE[OK,CXC5ETKRVW HQT KKNC[GTU QWPVK ] UVT  +8+ GN  K    UVT  UV[NGXKUKDKNKV[XKUKDNG  UVT  YKFVJRZ  UVT  JGKIVJRZ  UVT  RQUKVKQPCDUQNWVG  UVT  VQR  UVT  NGHV  UVT  +/)54 UPQYIKH  UVT   +8  FQEWOGPVYTKVG UVT  _ FQEWOGPVYTKVG *CNKIPEGPVGT 6TGħèUVTQP[*  -QPKGEMQFW,CXC5ETKRV 5 4+26 *CNKIPEGPVGT 6TGħèUVTQP[* $1 ; *6/. Skrypt 99. [E][O] Odbijająca się piłka. Skrypt ten pozwala uzyskać efekt odbijającej się od dolnej krawędzi okna przeglądar- ki piłki. Piłka ta będzie oczywiście obrazkiem umieszczonym na oddzielnej warstwie (rysunek 7.11), którą będziemy odpowiednio przesuwać ypo ekranie. Rysunek 7.11. Piłka będzie odbijać się od dolnej krawędzi okna przeglądarki Aby efekt wyglądał realistycznie, musimy zasymulować ruch jednostajnie przyspieszo- ny, kiedy obiekt spada, oraz jednostajnie opóźniony, kiedy wznosi się po odbiciu. Nie 178 101 praktycznych skryptów na stronie WWW będziemy stosować jednak żadnych skomplikowanych wzorów fizycznych. Zamiast tego będziemy zwiększać (lub zmniejszać) ilość pikseli, o jaką ma się przemieścić warstwa w każdej fazie ruchu. Za ten efekt odpowiadać bęydzie zmienna URGGF5VGR. Musimy także pamiętać, że po każdym kolejnym odbiciu piłka nie może osiągać tej wysokości, od której zaczynał się ruch. Inaczej odbijałaby się w nieskończoność od obu brzegów ekranu. Kolejnym zadaniem jest więc regulacja wysokości, na jaką ma wracać animowana warstwa. Dokonujemy tego, przypisując odpowiednią wartość zmiennej KVGT. Konkretny wzór wygląda tu następująco: PQYCAY[UQMQħèY[UQMQħè Y[UQMQħèKVGT Kierunek ruchu kontrolowany jest przez zmienną FKTGEVKQP, która może przyjmować dwie wartości — WR dla ruchu w górę i FQYP dla ruchu w dół. Nasza piłka porusza się również w poziomie. Ruch ten generowany jest przez cy- kliczne zwiększanie parametru NGHV warstwy zawierającej obraz. Skrypt 99 *6/. * # OGVCJVVRGSWKX QPVGPV6[RGEQPVGPVVGZVJVONEJCTUGVKUQ 5MT[RVRQEJQFKMUKæľMKRTCMV[EP[EJUMT[RVÎY CWVQT/CTEKP.KUGOCKNUETKRVU OCTEKPNKUEQO 5 4+26.#0)7#) ,CXC5ETKRVV[RGVGZVLCXCUETKRV 7MT[EKGRTGFRTGINæFCTMCOKPKGQDUđWIWLæE[OK,CXC5ETKRVW XCTURGGF XCTURGGF5VGR XCTNVQR XCTDQVVQO XCTFKTGEVKQP FQYP  XCTKF XCTKVGT HWPEVKQPWUVCY ] KH FQEWOGPVCNN ] FQEWOGPVCNN= DCNN ?UV[NGNGHV NVQR DQVVQOFQEWOGPVDQF[ENKGPV*GKIJV _ _ [ Z HWPEVKQPUVCTV ] ZRCTUG+PV FQEWOGPVCNN= DCNN ?UV[NGNGHV  FQEWOGPVCNN= DCNN ?UV[NGNGHV Z [RCTUG+PV FQEWOGPVCNN= DCNN ?UV[NGVQR  KH [DQVVQOFKTGEVKQP FQYP ] [ URGGF5VGR  KH [ DQVVQO ] FQEWOGPVCNN= DCNN ?UV[NGVQRDQVVQO _ GNUG] FQEWOGPVCNN= DCNN ?UV[NGVQR[ _ Rozdział 7. ♦ Animacje warstw 179 KFUGV6KOGQWV UVCTV URGGF  TGVWTP _ GNUGKH [ DQVVQOFKTGEVKQP FQYP ] FKTGEVKQP WR  NVQRNVQR /CVJEGKN DQVVQ
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

101 praktycznych skryptów na stronę WWW
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: