Spis TREŚCI ROZDZIAŁ 1 NIEZBADANY ŚWIAT FLASHA ...........................................................1-12 GŁĘBIA, ROZMACH I ZROZUMIENIE.....................................................................................1-12 Podział książki...............................................................................................................1-13 Preludium ..................................................................................................................1-13 Tworzenie zawartości................................................................................................1-13 ActionScript ..............................................................................................................1-13 Dynamiczna zawartość..............................................................................................1-13 Konteksty ..................................................................................................................1-13 Układ książki .................................................................................................................1-13 A teraz utworzymy film ........................................................................................1-13 ZAWARTOŚĆ PŁYTY CD-ROM...........................................................................................1-14 CZĘŚĆ 1. PRELUDIUM....................................................................................................1-15 ROZDZIAŁ 1. ZASADY PROJEKTOWANIA WITRYNY INTERNETOWEJ ........1-15 UŻYTECZNOŚĆ ...................................................................................................................1-16 Użyteczność Flasha .......................................................................................................1-16 Najczęstsze problemy użyteczności witryn internetowych wykonanych we Flashu ......1-17 Adresy witryn internetowych poświęconych użyteczności ............................................1-18 ROLA PROJEKTANTA WITRYN INTERNETOWYCH .................................................................1-18 Definiowanie wiadomości .............................................................................................1-19 Edycja manuskryptu..................................................................................................1-20 Definiowanie publiczności ............................................................................................1-21 Wybór prędkości połączenia .....................................................................................1-21 ROZWIĄZANIE PROBLEMU ..................................................................................................1-22 Projekt konstrukcyjny....................................................................................................1-23 Rozmiar plików, wstępne ładowanie, strumieniowanie i akcja loadMovie...................1-24 Prototyp funkcjonalności...............................................................................................1-26 Rozpocznij od kartki i pióra ......................................................................................1-26 Narysuj prosty schemat blokowy ..............................................................................1-27 Oszacuj rozmiar pliku ...............................................................................................1-27 Rozważ współdzielenie plików.................................................................................1-27 Struktura katalogów ..................................................................................................1-27 Zorganizuj nawigację witryny i łącza .......................................................................1-27 Szczegółowo przetestuj i popraw..............................................................................1-27 UŻYTECZNOŚĆ I DOŚWIADCZENIE UŻYTKOWNIKA ..............................................................1-28 Wybór i formatowanie tekstu.........................................................................................1-29 Spójność: narzędzie użyteczności..................................................................................1-30 WIDOCZNE ELEMENTY PROJEKTU .......................................................................................1-32 Twórczość przez ograniczenie.......................................................................................1-32 Projektowanie na żywo .........................................................................................1-33 Rozdział 1-1
Szkicowanie, miniaturki i bazgroły ...............................................................................1-34 Szkicowanie ...................................................................................................................1-34 KOMPOZYCJA .....................................................................................................................1-35 Elementy kompozycji .....................................................................................................1-36 Pole obrazka ..............................................................................................................1-36 Linie ..........................................................................................................................1-36 Pola i obszary ............................................................................................................1-36 Kształty, napięcie i kontrast ......................................................................................1-37 Dynamika ..................................................................................................................1-37 Równowaga...............................................................................................................1-37 Harmonia...................................................................................................................1-37 Kolory........................................................................................................................1-37 Kierunek czytania..........................................................................................................1-38 Szkic kompozycyjny .......................................................................................................1-38 SCHEMATY KOLORÓW ........................................................................................................1-39 Kolor lub barwa.........................................................................................................1-39 Wartość i jasność.......................................................................................................1-39 Intensywność czyli nasycenie ...................................................................................1-39 Kontrast kolorów.......................................................................................................1-40 Kontrast jasne/ciemne ...............................................................................................1-40 Kontrast zimne/ciepłe................................................................................................1-40 Kontrast dopełniający................................................................................................1-40 Kontrast jakości.........................................................................................................1-41 Kontrast ilościowy.....................................................................................................1-41 Wybór schematu kolorów ..............................................................................................1-41 Przykłady kolorów.........................................................................................................1-43 Chaseace.com............................................................................................................1-43 Helpfish.com .............................................................................................................1-43 Petergrafik.dk ............................................................................................................1-44 SPÓJNOŚĆ PO RAZ DRUGI ....................................................................................................1-44 PROFIL GRAFICZNY.............................................................................................................1-45 Kolory........................................................................................................................1-45 Czcionki ....................................................................................................................1-46 Logo ..........................................................................................................................1-46 Style...........................................................................................................................1-46 Wymiary....................................................................................................................1-46 Rozmieszczenie.........................................................................................................1-46 Za i przeciw...............................................................................................................1-46 ULEPSZANIE PROJEKTÓW ...................................................................................................1-46 Metoda drastyczna.....................................................................................................1-46 PROJEKTOWANIE WITRYNY INTERNETOWEJ TITOONIA.COM — STUDIUM ...........................1-48 Przegląd witryny ...........................................................................................................1-48 Wiadomość ....................................................................................................................1-48 Docelowa publiczność...................................................................................................1-49 Projekt strukturalny.......................................................................................................1-51 Nagłówki i schematy blokowe ..................................................................................1-51 Strategia plików.........................................................................................................1-52 Struktura katalogów ......................................................................................................1-52 Tworzenie prototypu......................................................................................................1-53 Szkicowanie ...................................................................................................................1-53
Rozdział 1-2
Kompozycja ...................................................................................................................1-54 Kolor..............................................................................................................................1-54 Czcionki.........................................................................................................................1-55 TWORZENIE ZAWARTOŚCI WITRYNY TITOONIA ..................................................................1-56 Profil graficzny..............................................................................................................1-59 ZAKOŃCZENIE ....................................................................................................................1-59 ROZDZIAŁ 2 SPRYTNE KLIPY .....................................................................................2-60 Tworzenie prostego sprytnego klipu .....................................................................2-60 WSZECHSTRONNOŚĆ SPRYTNYCH KLIPÓW..........................................................................2-63 Tworzenie uniwersalnego dźwiękowego sprytnego klipu ....................................2-63 Tworzenie spersonalizowanych interfejsów użytkownika dla sprytnych klipów.2-66 Rozszerzenie możliwości sprytnego klipu ............................................................2-74 CZĘŚĆ 2. TWORZENIE ZAWARTOŚCI.......................................................................2-77 ROZDZIAŁ 3 FLASH I ZEWNĘTRZNE APLIKACJE 3D ..........................................3-77 PODSTAWY TEORETYCZNE 3D............................................................................................3-78 Perspektywa liniowa i rzut ortogonalny........................................................................3-78 TWORZENIE ZAWARTOŚCI 3D WE FLASHU .........................................................................3-81 Ręczne śledzenie we Flashu ..........................................................................................3-81 Ręczne śledzenie we Flashu..................................................................................3-81 Automatyczne śledzenie obiektów........................................................................3-86 Ogólne wskazówki dotyczące stosowania polecenia Trace Bitmap..............................3-88 Color Threshold.........................................................................................................3-88 Minimum Area ..........................................................................................................3-88 Curve Fit....................................................................................................................3-89 Corner Threshold.......................................................................................................3-89 TWORZENIE 3D W INNYCH APLIKACJACH ...........................................................................3-89 Swift 3D .........................................................................................................................3-90 Modelowanie w programie Swift 3D ....................................................................3-90 Rendering w programie Swift 3D..................................................................................3-96 3D Studio Max...............................................................................................................3-99 Vecta 3D......................................................................................................................3-100 Pluginy programów Illustrate! 5.0 i Vecta 3D-Max ...................................................3-102 Amorphium Pro ...........................................................................................................3-102 Poser............................................................................................................................3-105 KTÓRY PRODUKT WYBRAĆ? .............................................................................................3-105 INTERAKTYWNOŚĆ ...........................................................................................................3-106 Prawdziwy trzeci wymiar ............................................................................................3-106 Optymalizacja zawartości 3D na potrzeby Sieci.........................................................3-106 Ograniczony rendering ruchu..................................................................................3-108 Zmniejszanie powierzchni.......................................................................................3-108 Ponownie nakładanie gradientu we Flashu .........................................................3-108 Renderowanie części ujęć .......................................................................................3-111 DARMOWE MODELE W SIECI .............................................................................................3-111 ZAKOŃCZENIE ..................................................................................................................3-111 ROZDZIAŁ 4 ANIMACJA KRESKÓWEK WE FLASHU .........................................4-112 POCZĄTKI .........................................................................................................................4-113 Planowanie animacji...................................................................................................4-114
Rozdział 1-3
Interaktywna zawartość...............................................................................................4-115 PODSTAWY ANIMACJI .......................................................................................................4-116 Przenikanie ujęć — Onion Skinning............................................................................4-117 ANIMACJA WE FLASHU.....................................................................................................4-118 Projektowanie postaci .................................................................................................4-118 Rozczłonkowanie animacji .................................................................................4-119 Skacząca piłka .............................................................................................................4-120 Skaczący człowiek .......................................................................................................4-121 Cykle ruchu .................................................................................................................4-122 Tworzenie cyklu chodzenia.................................................................................4-123 Inne cykle ruchu ......................................................................................................4-127 OPTYMALIZACJA ..............................................................................................................4-128 ZAKOŃCZENIE ..................................................................................................................4-130 ROZDZIAŁ 5 WIDEO WE FLASHU ............................................................................5-131 WYBÓR WŁAŚCIWEGO KLIPU ............................................................................................5-132 Obróbka klipu w programie After Effects...........................................................5-133 Zastosowanie programów QuickTime Pro i Photoshop .............................................5-139 Tworzenie wektorowego wideo we Flashu.........................................................5-143 Color Threshold.......................................................................................................5-144 Minimum Area ........................................................................................................5-144 Curve Fit..................................................................................................................5-145 Corner Threshold.....................................................................................................5-145 Optymalizacja..............................................................................................................5-147 Optymalizacja klipu filmowego we Flashu.........................................................5-147 Zmiana kolorów wideo ................................................................................................5-149 Skalowanie filmu .........................................................................................................5-150 ZAKOŃCZENIE ..................................................................................................................5-150 ROZDZIAŁ 6 DŹWIĘK WE FLASHU..........................................................................6-152 TWORZENIE STOŁU MIKSERSKIEGO...................................................................................6-153 Tworzenie i importowanie dźwięków ..........................................................................6-153 Importowanie i obróbka dźwięku........................................................................6-155 Nadawanie dźwiękom ich nazw łącznikowych...................................................6-157 Tworzenie suwaków nagłośnienia ......................................................................6-158 Tworzenie pokręteł..............................................................................................6-165 Obiekt koloru we Flashu 5 ..........................................................................................6-169 Dodawanie koloru do stołu mikserskiego ...........................................................6-169 KONTROLOWANIE DŹWIĘKU POŚREDNIO ..........................................................................6-171 Przypisywanie dźwięków do kursora myszy ......................................................6-171 Rozszerzanie przykładu ...............................................................................................6-173 Dźwięki do wersji demonstracyjnej gry..............................................................6-173 ZAKOŃCZENIE ..................................................................................................................6-178 ROZDZIAŁ 7 EFEKTY PRZEZROCZYSTOŚCI........................................................7-179 Tworzenie kolażu w Photoshopie .......................................................................7-179 Importowanie plików w formacie PNG ..............................................................7-184 AKTUALIZACJA ORYGINALNYCH OBRAZKÓW ...................................................................7-186 Animacja map bitowych z kolorem ....................................................................7-186 OPTYMALIZACJA ROZMIARU PLIKU ANIMACJI ..................................................................7-189 Optymalizacja jakości obrazka............................................................................7-190 Rozdział 1-4
ZAWANSOWANA ANIMACJA MAP BITOWYCH ....................................................................7-191 Przekształcanie map bitowych w klipy filmowe.................................................7-191 ROZDZIAŁ 8 MASKOWANIE I EFEKTY TEKSTOWE ..........................................8-194 WARSTWY ........................................................................................................................8-194 PODSTAWY MASKOWANIA ................................................................................................8-195 Prosta maska........................................................................................................8-195 ANIMOWANIE MASEK .......................................................................................................8-197 Zamaskowany tekst......................................................................................................8-198 Maskowane animowane chmury.........................................................................8-198 Efekt reflektora............................................................................................................8-200 Tworzenie reflektora ...........................................................................................8-201 Bardziej przekonywujący reflektor .....................................................................8-202 Efekt koła kolorów.......................................................................................................8-203 Wypełnienie tekstu o zmieniających się kolorach ..............................................8-203 MASKI I ACTIONSCRIPT....................................................................................................8-206 Efekty powielenia: efekt bąbelków .....................................................................8-206 EFEKTY TEKSTOWE ..........................................................................................................8-212 Proste efekty tekstowe .................................................................................................8-212 Odbity tekst .........................................................................................................8-212 Rozmyty tekst......................................................................................................8-213 Efekt konturu.......................................................................................................8-214 Bardziej złożone efekty tekstowe .................................................................................8-216 Tekst warstwowy.................................................................................................8-216 Dynamiczny tekst z kodem ActionScript............................................................8-218 Maskowanie skryptowego tekstu ........................................................................8-225 ZAKOŃCZENIE ..................................................................................................................8-228 ROZDZIAŁ 9 PRZYCISKI I MENU..............................................................................9-229 PRZYCISKI ........................................................................................................................9-229 Tworzenie przycisków z podpowiedziami....................................................................9-229 Dodawanie podpowiedzi do przycisków.............................................................9-230 Przyciski w klipach filmowych ....................................................................................9-231 Tworzenie przycisku do przeciągania .................................................................9-232 Zastępowanie zachowania przycisku ..........................................................................9-233 Tworzenie „lepkiego” przycisku.........................................................................9-233 Przeciągane klipy filmowe i cele upuszczenia....................................................9-235 MENU ...............................................................................................................................9-237 Proste menu.................................................................................................................9-238 Tworzenie prostego menu ...................................................................................9-238 Pływające menu...........................................................................................................9-240 Tworzenie pływającego menu.............................................................................9-240 Horyzontalne hierarchiczne menu ..............................................................................9-242 Pionowe hierarchiczne menu ......................................................................................9-244 ZAKOŃCZENIE ..................................................................................................................9-248 CZĘŚĆ 3. ACTIONSCRIPT............................................................................................9-249 ROZDZIAŁ 10 PODSTAWY PROGRAMOWANIA W ŚRODOWISKU ACTIONSCRIPT ............................................................................................................10-249 NAJWAŻNIEJSZE ZAGADNIENIA PROGRAMOWANIA .........................................................10-250
Rozdział 1-5
Zmienne .....................................................................................................................10-250 Rodzaje zmiennych ....................................................................................................10-251 Rodzaje danych .........................................................................................................10-252 Liczba ....................................................................................................................10-252 Ciąg .......................................................................................................................10-253 Zmienne boole’owskie ..........................................................................................10-253 Obiekty i klipy filmowe ........................................................................................10-254 Stałe i literały ........................................................................................................10-255 Operatory...............................................................................................................10-255 STRUKTURY PROGRAMOWANIA W JĘZYKU ACTIONSCRIPT .............................................10-255 Wyrażenia..................................................................................................................10-256 Instrukcje...................................................................................................................10-256 Bloki ..........................................................................................................................10-256 PRZEPŁYW STEROWANIA ................................................................................................10-256 Konstrukcje rozgałęzień ............................................................................................10-257 Konstrukcje pętli .......................................................................................................10-257 Pętla While ............................................................................................................10-257 Pętla For ................................................................................................................10-258 Pętla Do...While ....................................................................................................10-258 FUNKCJE.........................................................................................................................10-259 OBIEKTY ........................................................................................................................10-260 PRZYKŁADY: ZMIENNE I STEROWANIE PRZEPŁYWEM .....................................................10-261 Prosta animacja skaczącej piłki.........................................................................10-262 PRZYKŁADY: FUNKCJE ...................................................................................................10-266 Generowanie fraktala ........................................................................................10-266 PRZYKŁADY: OBIEKTY ...................................................................................................10-270 Tworzenie śladu myszy.....................................................................................10-270 ZAKOŃCZENIE ................................................................................................................10-274 ROZDZIAŁ 11 INTEGRACJA ŚRODOWISKA PROGRAMOWANIA ACTIONSCRIPT ............................................................................................................11-275 LISTWY CZASOWE, KLIPY FILMOWE I OBIEKTY ...............................................................11-275 GŁÓWNA LISTWA CZASOWA ...........................................................................................11-275 Unikanie blokowania listwy czasowej.......................................................................11-276 Tworzenie pętli ekranu ładującego ...................................................................11-277 PRACA Z KLIPAMI FILMOWYMI .......................................................................................11-280 Praca z kilkoma listwami czasowymi ........................................................................11-280 Praca z osadzonymi klipami filmowymi ....................................................................11-281 Rysunki, klipy filmowe i przyciski .............................................................................11-282 KIEDY WYKONYWANY JEST KOD? ..................................................................................11-283 Wielokolorowe kule bilardowe z jednego symbolu ...................................................11-284 Zestaw kul .........................................................................................................11-284 KLIPY FILMOWE JAKO OBIEKTY — ROZWIJANE MENU ....................................................11-291 Pole tekstowe.............................................................................................................11-291 Pole listy....................................................................................................................11-292 Tworzenie obszaru wyświetlania tekstu............................................................11-293 Tworzenie przycisków strzałek.........................................................................11-295 Tworzenie paska przewijania ............................................................................11-297 Tworzenie pola listy ..........................................................................................11-302 Łączenie wszystkich elementów .......................................................................11-305
Rozdział 1-6
ZAKOŃCZENIE ................................................................................................................11-307 ROZDZIAŁ 12 EFEKTY WIZUALNE Z ZASTOSOWANIEM JĘZYKA ACTIONSCRIPT ............................................................................................................12-308 TABLICE .........................................................................................................................12-308 EFEKTY WIZUALNE .........................................................................................................12-309 Ścigacz myszy ............................................................................................................12-309 Tworzenie ścigacza myszy................................................................................12-309 Efekt cząsteczki: ogień ..............................................................................................12-313 Ogień .................................................................................................................12-314 Przechwytywanie klawisza ........................................................................................12-319 Ruch klawisza strzałki.......................................................................................12-320 Więcej o kodach klawiszowych ............................................................................12-321 Wpisywanie tekstu w czasie rzeczywistym ......................................................12-322 Manipulacja linią ......................................................................................................12-330 Węzły i linie ......................................................................................................12-331 Wykres liniowy .................................................................................................12-336 ZAKOŃCZENIE ................................................................................................................12-342 ROZDZIAŁ 13 PROSTE PROCEDURY STOSOWANE W GRACH .....................13-343 Odbijająca się piłka ...........................................................................................13-343 Dodawanie losowości........................................................................................13-345 Tworzenie interaktywności ...............................................................................13-347 Powielanie piłki.................................................................................................13-348 Prosta gra w pingponga............................................................................................13-349 Tworzenie gry ...................................................................................................13-349 Tworzenie wirtualnego zwierzaka ....................................................................13-354 Odległość i połączenia ......................................................................................13-359 Więcej połączeń ................................................................................................13-362 CO POWINIENEM ZROBIĆ TERAZ?....................................................................................13-363 Elementy typowej gry ................................................................................................13-364 Gracz .....................................................................................................................13-364 Wrogowie ..............................................................................................................13-364 Poziomy.................................................................................................................13-364 Obiekty i zagrożenia..............................................................................................13-365 Opowieść...............................................................................................................13-365 ROZDZIAŁ 14 PROGRAMOWANIE GIER ..............................................................14-366 KOSMICZNA GRA ............................................................................................................14-366 Kodowanie sceny startowej...............................................................................14-369 Kodowanie sceny gry ........................................................................................14-369 Kodowanie klipów filmowych ..........................................................................14-372 MODYFIKACJA GRY ........................................................................................................14-385 ROZDZIAŁ 15 FLASH I TRZECI WYMIAR ............................................................15-387 CO JEST MOŻLIWE, A CO PRAKTYCZNE ...........................................................................15-387 WSZYSTKO O OKRĘGACH ...............................................................................................15-389 Sinus i kosinus ...........................................................................................................15-390 Ruch po okręgu..........................................................................................................15-392 OŚ Z ...............................................................................................................................15-394 Obrót wokół osi Y......................................................................................................15-395 Rozdział 1-7
Prawdziwa perspektywa............................................................................................15-396 Obrót wokół osi X......................................................................................................15-398 Przemieszczanie kilku punktów .................................................................................15-398 Obrót wokół osi Z .................................................................................................15-399 Obrót wokół osi Y .................................................................................................15-401 Obrót wokół osi X .................................................................................................15-403 Obiekt trójwymiarowy ...............................................................................................15-403 ZAKOŃCZENIE ................................................................................................................15-409 ROZDZIAŁ 16 OBIEKTOWE GRY FLASHA...........................................................16-410 TRASA ............................................................................................................................16-410 OGRANICZENIA FLASHA JAKO ŚRODOWISKA GIER ..........................................................16-411 TWORZENIE GIER MIMO OGRANICZEŃ.............................................................................16-412 SZABLON GRY FLASHA ...................................................................................................16-413 Duszki gameSprite.....................................................................................................16-414 Świat gier...................................................................................................................16-415 Ścieżki ...................................................................................................................16-415 Poziomy.................................................................................................................16-416 Limity ....................................................................................................................16-416 Stałe fizyczne ........................................................................................................16-416 Funkcje ..................................................................................................................16-417 Status duszka GameSprite.....................................................................................16-417 Kolejny poziom? ...................................................................................................16-418 Klipy filmowe zachowania ........................................................................................16-418 Wygląd i działanie gry...............................................................................................16-420 NA POCZĄTKU... .............................................................................................................16-423 Dynamika obrotów ....................................................................................................16-424 Limity ....................................................................................................................16-425 Stałe fizyczne ........................................................................................................16-425 Funkcje ..................................................................................................................16-425 Inne........................................................................................................................16-425 Film .......................................................................................................................16-425 Statek kosmiczny...................................................................................................16-426 Manewrowanie ......................................................................................................16-427 Spotkanie z wrogiem..................................................................................................16-430 Łączenie w całość......................................................................................................16-432 Savior02.fla ...........................................................................................................16-432 Savior03.fla ...............................................................................................................16-435 Obcy ......................................................................................................................16-436 Zestrzelenie ...........................................................................................................16-439 Matematyczny klip filmowy .................................................................................16-440 Savior.fla ...................................................................................................................16-440 Wybuchy ...............................................................................................................16-441 Tworzenie hałasu...................................................................................................16-442 ZAKOŃCZENIE ................................................................................................................16-443 CZĘŚĆ 4. DYNAMICZNA ZAWARTOŚĆ .................................................................16-444 ROZDZIAŁ 17 DYNAMICZNA ZAWARTOŚĆ UZYSKIWANA Z PLIKÓW TEKSTOWYCH..............................................................................................................17-444 DYNAMICZNA ZAWARTOŚĆ UZYSKIWANA Z PLIKÓW TEKSTOWYCH ...............................17-445
Rozdział 1-8
Ładowanie danych tekstowych do Flasha.................................................................17-445 Tworzenie klipu filmowego do przechowywania dynamicznego tekstu ..........17-446 Umieszczanie dynamicznego tekstu..................................................................17-450 Tworzenie przewijalnego tekstu........................................................................17-453 Przewijanie tekstu .............................................................................................17-456 BANER OGŁOSZENIOWY Z MOŻLIWOŚCIĄ AKTUALIZACJI ................................................17-457 Tworzenie ogłoszenia z możliwością aktualizacji ............................................17-458 ZAKOŃCZENIE ................................................................................................................17-465 ROZDZIAŁ 18 DYNAMICZNE APLIKACJE INTERNETOWE............................18-466 INTERFEJS.......................................................................................................................18-467 Projektowanie architektury .......................................................................................18-467 Planowanie z wyprzedzeniem....................................................................................18-469 KOMUNIKACJA SILNIK/INTERFEJS ...................................................................................18-470 KOSZYK SKLEPOWY FLASHA ..........................................................................................18-473 Architektura pliku FLA..............................................................................................18-475 Standardowe klony ....................................................................................................18-479 Dane z pliku tekstowego............................................................................................18-480 Dlaczego film został zaprojektowany w ten właśnie sposób .....................................18-480 KOD ...............................................................................................................................18-481 Główne funkcje..........................................................................................................18-481 Kod paska przewijania ..............................................................................................18-487 Kod programu ładującego ........................................................................................18-489 „Uwielbiam, gdy udaje mi się zrealizować plan”.....................................................18-490 TECHNIKI ROZWIĄZYWANIA PROBLEMÓW ......................................................................18-490 ZAKOŃCZENIE ................................................................................................................18-492 ROZDZIAŁ 19 FLASH I PHP.......................................................................................19-493 ZASADY STOSOWANIA PHP Z FLASHEM .........................................................................19-493 Połączenia klient-serwer WWW ................................................................................19-494 Program obsługi PHP oparty na CGI.......................................................................19-494 Komunikacja pomiędzy Flashem i PHP....................................................................19-495 NARZĘDZIA ....................................................................................................................19-499 Serwer WWW Apache................................................................................................19-499 PHP4: Preprocesor Hipertekstu ...............................................................................19-501 Twoja pierwsza strona w języku PHP .......................................................................19-502 Dokumentacja PHP4.................................................................................................19-504 CO MOŻNA ZROBIĆ Z PHP I FLASHEM ............................................................................19-504 Zagadnienia związane z wydajnością PHP...............................................................19-504 FLASH I PHP W AKCJI .....................................................................................................19-505 Wpisywanie tekstu do pliku po stronie serwera................................................19-505 ZAKOŃCZENIE ................................................................................................................19-512 ROZDZIAŁ 20 FLASH I XML .....................................................................................20-514 SAME FAKTY ..................................................................................................................20-514 CZEMU W OGÓLE SIĘ PRZEJMOWAĆ? ..............................................................................20-515 NATURA BESTII ..............................................................................................................20-516 PODSTAWOWA SKŁADNIA JĘZYKA XML ........................................................................20-517 ZASTOSOWANIE JĘZYKA XML W ŚRODOWISKU PROGRAMOWANIA ACTIONSCRIPT FLASHA 5 .......................................................................................................................................20-518 Obiekt XML ...............................................................................................................20-519 Rozdział 1-9
Podstawowe właściwości ......................................................................................20-519 Właściwości węzłów .............................................................................................20-520 Obróbka dokumentów XML ......................................................................................20-522 Testowanie kodu XML...............................................................................................20-524 Testowanie kodu ...............................................................................................20-524 ŁADOWANIE DOKUMENTU XML ....................................................................................20-527 Ładowanie zewnętrznego dokumentu XML .....................................................20-528 UZYSKIWANIE DOSTĘPU DO BAZY DANYCH Z ZASTOSOWANIEM JĘZYKA XML ..............20-532 Tworzenie bazy danych.....................................................................................20-532 Udostępnianie bazy danych...............................................................................20-534 Pisanie kodu ASP ......................................................................................................20-535 Generowanie języka XML z zastosowaniem ASP............................................20-539 Współdziałanie Flasha i ASP ............................................................................20-540 Ulepszanie kodu ASP ................................................................................................20-541 Ulepszanie kodu ASP........................................................................................20-541 Dodawanie funkcjonalności przeszukiwania ............................................................20-543 Funkcjonalność wyszukiwania..........................................................................20-543 ZAKOŃCZENIE ................................................................................................................20-546 ROZDZIAŁ 21 POŁĄCZENIE FLASHA I HTML ....................................................21-547 WPROWADZENIE DO JĘZYKA HTML I FLASHA ..............................................................21-548 Osadzanie pełnego okna............................................................................................21-550 Proporcje filmu i okna...............................................................................................21-552 OSADZANIE PROCENTOWE I O STAŁYM ROZMIARZE ........................................................21-556 OSADZANIE W RAMKACH ...............................................................................................21-557 WYSKAKUJĄCE OKIENKA ...............................................................................................21-559 JEDEN FILM KONTRA KILKA FILMÓW ..............................................................................21-561 Jeden film ..................................................................................................................21-561 Kilka filmów ..............................................................................................................21-561 Filmy stosowe............................................................................................................21-562 WYKRYWANIE FLASHA I WITRYNY INTERNETOWE FLASHA ...........................................21-563 Flash jako obrazek wbudowany ................................................................................21-564 Nagłówki Flasha .......................................................................................................21-565 Zastosowanie ram dla nagłówków Flasha ................................................................21-565 Strony Flasha ze stronami HTML .............................................................................21-568 ZAKOŃCZENIE ................................................................................................................21-569 ROZDZIAŁ 22 WSTĘPNE ŁADOWANIE I STRUMIENIOWANIE......................22-571 CO TO JEST STRUMIENIOWANIE?.....................................................................................22-571 CO TO JEST WSTĘPNE ŁADOWANIE? ................................................................................22-573 EKRANY ŁADUJĄCE, TAKTYKA RÓŻNORODNOŚCI I REAKCJE UŻYTKOWNIKA..................22-573 WSTĘP DO KONSTRUKCJI ................................................................................................22-574 Testowanie strumieniowanych filmów i Bandwidth Profiler Flasha ........................22-575 Modyfikacja kolejności ładowania............................................................................22-576 Generowanie raportów o rozmiarze .........................................................................22-577 DEMONSTRACJA STRUMIENIOWANIA ANIMACJI I DŹWIĘKU ............................................22-579 Analiza filmu .............................................................................................................22-580 Strumieniowe animacje wektorowe we Flashu.....................................................22-581 Strumieniowanie dźwięku we Flashu....................................................................22-582 PODSTAWOWA TECHNIKA WSTĘPNEGO ŁADOWANIA ......................................................22-582 PRZYBLIŻONY PASEK WSTĘPNEGO ŁADOWANIA .............................................................22-584 Rozdział 1-10
Analiza filmu .............................................................................................................22-586 Końcowe przemyślenia..............................................................................................22-590 BARDZIEJ PRECYZYJNY PASEK WSTĘPNEGO ŁADOWANIA ...............................................22-590 Analiza filmu .............................................................................................................22-591 Końcowe przemyślenia..............................................................................................22-594 MODULARNA WITRYNA INTERNETOWA FLASHA ............................................................22-594 Analiza filmu .............................................................................................................22-595 KONSTRUKCJA: CLOUDICITY.SWF ..................................................................................22-598 Końcowe przemyślenia..............................................................................................22-600 ZAKOŃCZENIE ................................................................................................................22-600 ROZDZIAŁ 23 OPTYMALIZACJA FLASHA DLA WYSZUKIWAREK..............23-602 TYPY WYSZUKIWAREK ...................................................................................................23-602 PAJĄKI WWW ...............................................................................................................23-603 PLANOWANIE WITRYNY PRZYJAZNEJ WYSZUKIWARCE ...................................................23-603 Strony wejściowe .......................................................................................................23-604 Obsługa standardowych witryn HTML .....................................................................23-604 Witryny internetowe z ramkami.................................................................................23-604 Witryny internetowe Flasha/Multimedialne..............................................................23-605 WYBÓR SŁÓW KLUCZOWYCH I DOCELOWEGO NATĘŻENIA RUCHU W SIECI .....................23-605 INNE ROZWAŻANIA ZWIĄZANE Z PROCESEM WYBORU SŁÓW KLUCZOWYCH ...................23-606 GDY JUŻ WYBRAŁEŚ SŁOWA KLUCZOWE ........................................................................23-607 ZNACZNIKI I KOD CHARAKTERYSTYCZNY DLA INNYCH WYSZUKIWAREK ......23-608 Co to jest znacznik ? ..................................................................................23-608 Znaczniki i słowa kluczowe ......................................................................23-609 Komentarze HTML....................................................................................................23-610 Ukryte pola wejściowe ..............................................................................................23-611 Znaczniki obrazków...................................................................................................23-611 Nazwy plików, adresy internetowe i łącza ................................................................23-612 WYKLUCZANIE STRON Z WYSZUKIWAREK ......................................................................23-613 Plik robots.txt ............................................................................................................23-613 Roboty i znacznik ......................................................................................23-615 MONITOROWANIE RUCHU W SIECI I LISTINGI ..................................................................23-615 ZGŁASZANIE STRON DO WYSZUKIWAREK .......................................................................23-617 Szczegóły dotyczące poszczególnych wyszukiwarek .................................................23-617 Yahoo ....................................................................................................................23-617 AltaVista................................................................................................................23-619 Google ...................................................................................................................23-620 Dmoz.org — The Open Directory Project ............................................................23-622 Inktomi ..................................................................................................................23-622 GoTo.com..............................................................................................................23-623 ĆWICZENIE .....................................................................................................................23-623 ZAKOŃCZENIE ................................................................................................................23-627
Rozdział 1-11
Rozdział 1 Niezbadany świat Flasha Chociaż sam program mieści się w niewielkim pudełku, możliwości Flasha są ogromne. Pojawił się on na scenie internetowej kilka lat temu, aby teraz wyłonić się jako poważne narzędzie do tworzenia atrakcyjnych wizualnie witryn internetowych o wysokiej jakości. Lecz to jeszcze nie wszystko: implementacja skryptu ActionScript w piątej wersji Flasha przekształciła program w prawdziwe środowisko programistyczne, umożliwiające realizacje w pełni interaktywnych projektów, od interfejsu użytkownika do wewnętrznego przechowywania danych. W niniejszej książce przedstawiliśmy pełen zakres możliwości Flasha, a celem autorów jest pomoc czytelnikowi w wybraniu kolejnych zastosowań tej potężnej aplikacji. Wszystkie osoby, które przyczyniły się do powstania tej książki są z zawodu programistami i w codziennej pracy stawiają czoło tym samym problemom, co ty: „Jak powinienem to zrobić? Jak mogę to zrobić? Jakie mam możliwości do wyboru? W jaki sposób ta technologia rozwinie się w przyszłości? Jak mogę zapewnić, że witryna, nad którą pracuję, będzie odwiedzana przez maksymalną liczbę internautów? Jakie są wymagania moich klientów i jak mogę im sprostać?”. Współtwórcy tej książki stali na linii ognia, walcząc z klientami, technologią i kodem, a w tej książce dzielą z tobą zdobytą w ten sposób wiedzę. Pragniemy pomóc ci w przedarciu się do poważnych zastosowań Flasha.
Głębia, rozmach i zrozumienie Jeśli brałeś udział kiedyś w jeden z tych wielkich konferencji poświęconych programowi Flash, wiesz dobrze, że są to miejsca, w których przedstawia się mnóstwo przeróżnych pomysłów, a użytkownicy Flasha o różnorodnych zdolnościach zaspokajają swój wektorowy głód niezliczonymi mówcami. Sesje konferencyjne różnią się stopniem trudności, od cięższych do bardziej zrozumiałych, lecz przy odrobinie szczęścia z każdej z nich wyniesiesz coś interesującego dla siebie — nową technikę, czy spojrzenie na dane zagadnienie z nowej perspektywy. Tego właśnie staraliśmy się dokonać w tej książce: udostępnić ci kolekcję nowych narzędzi i nowych pomysłów, o których możesz rozmyślać, z którymi się zaznajomisz i będziesz mógł zastosować we własnej pracy. Zakładamy, że podstawy pracy z Flashem są ci już znane i że nie potrzebujesz pomocy i wskazówek na każdym kroku. Skoncentrowaliśmy się na przedstawieniu materiału o wyższym stopniu zaawansowania technicznego i na wyjaśnieniu omawianych zagadnień w taki sposób, abyś mógł je w pełni zrozumieć, zapoznać się z nimi i dodać do własnego przybornika. Jeśliby istniała jakaś mantra sumująca zawartość tej książki, brzmiałaby ona następująco: „głębiej, poważniej i w pełni zrozumiale”. Rozdział 1-12
Podział książki Materiał zawarty w książce podzieliliśmy na kilka sekcji. Dzięki temu możesz czytać ten podręcznik na różne sposoby: po kolei, lub też wybiórczo, wybierając interesujące cię zagadnienia. Poniżej omówiliśmy poszczególne sekcje książki. Preludium W tym rozdziale zawarliśmy podstawy tworzenia projektu witryny i projektów graficznych, którymi powinieneś się kierować podczas tworzenia witryny internetowej. Tworzenie zawartości Te rozdziały poświęcone są różnorodnym technikom służącym do osadzanie bogatszej zawartości wykonanej we Flashu, takiej jak dźwięk, wideo, animacji i efekty trójwymiarowe, w filmach. ActionScript Jest to obszerna sekcja, w której skupiliśmy się na teoretycznych i praktycznych zagadnieniach związanych z językiem programowania ActionScript: omówiliśmy jego strukturę, efektywne metody użycia, jak również szczegółowo zanalizowane przykłady zastosowania. Mimo poważnego stopnia zaawansowania, na pewno uznasz techniki ActionScript dostępnymi dla ciebie, od tworzenia pętli do obiektowego Flasha. Dynamiczna zawartość Sekcja ta zawiera informacje o możliwościach Flasha daleko wybiegających w przyszłość, czyli o dynamicznym umieszczaniu zawartości w przeglądarce z oddzielnych źródeł danych w odpowiedzi na interakcję użytkownika. Konteksty W tej sekcji kończącej książkę skoncentrowaliśmy się na omówieniu ogólnych zagadnień, o jakich należy pamiętać podczas umieszczania ukończonej witryny w Internecie. Znajdziesz to informacje o osadzaniu filmów Flasha w stronach HTML, zasadach strumieniowania i o optymalizacji witryny internetowej dla wyszukiwarek.
Układ książki Po pierwsze zakładamy, że w oknach Frame / Object Actions pracujesz w trybie Expert. Ponadto stosujemy własne konwencje nazywania symboli i zmiennych — nie uważamy, że kod Flasha jest podległy bardziej „formalnym” ograniczeniom ustalonych konwencji. Założenie takie zgodne jest również z zasadą zastosowaną w tej książce, zgodnie, z którą przedstawiamy możliwości i pozwalamy ci na dokonanie własnych wyborów. Zachowaliśmy również preferencje autorów odnośnie platform PC/Mac. Staraliśmy się, aby poniższa książka była jak najbardziej zrozumiała i jasna, dlatego też zastosowaliśmy jedynie kilka stylów, aby uniknąć zamieszania. Oto one. • Ćwiczenia są poprzedzane następującym nagłówkiem... A teraz utworzymy film
...a poszczególne kroki do wykonania są ponumerowane w następujący sposób: 1. Najpierw zrób to 2. Następnie zrób to 3. Następnie zrób to itd.
Rozdział 1-13
•
Do zapisu skryptu ActionScript, którego należy wpisać w okno Actions, zastosowaliśmy poniższy styl: Mover.startDrag(true); Mouse.hide(); stop ();
•
Gdy napisana linijka kodu ActionScript nie mieści się na stronie zaznaczany jej kontynuację w kolejnym wierszu symbolem strzałki: if (letters[i].x_pos==letters[i]._x && → letters[i].y_pos==letters[i]._y){
Te linie należy zapisać jako jedną ciągłą instrukcję. • •
Podczas omawiania języka ActionScript w tekście, instrukcje w nim stosowane, jak na przykład stop również oznaczamy stylem kodu programu. Podczas dodawania nowego kodu do istniejącego bloku podświetlamy go: Mover.startDrag(true); variable1 = 35; Mouse.hide(); stop ();
•
Komentarze do kodu zaznaczmy kursywą: Jeśli (niebo jest niebieskie) słońca nie ma Czyli (jest pochmurnie)
• •
W tekście nazwy symboli i klonów zaznaczamy następującym stylem: instance1, symbol1. Bardzo istotne zagadnienia zapisujemy jak poniżej: Jest to zagadnienie kluczowe, o którym powinieneś naprawdę bardzo dokładnie przeczytać.
• • • •
Nazwy plików wyglądają właśnie tak. Adresy internetowe zaznaczmy w następujący sposób: www.friendsofed.com. Nowe, lub istotne wyrażenia zaznaczane są takim stylem. Odniesienia do kolorowych obrazków umieszczonych na płycie CD-ROM wyglądają tak: TO JEST ODNIESIENIE DO KOLOROWEGO OBRAZKA
Zawartość płyty CD-ROM Na płycie CD-ROM dołączonej do książki znajdziesz następujące pozycje: • Pliki w formacie FLA (i w razie potrzeby SWF) zawierające omówione przez nas ćwiczenia, włącznie z dodatkowymi plikami tekstowymi i obrazkami. • Kolorowe obrazki z wybranych rozdziałów. • Wersje próbne kluczowych pakietów, takich jak Flash 5, Dreamweaver 4, Freehand 9, Swift 3D, Swish i Poser.
Rozdział 1-14
Część 1. Preludium
Rozdział 1. Zasady projektowania witryny internetowej Techniczna znajomość Flasha stanowi jeden z elementów przybornika projektanta, lecz, jeśli masz zamiar tworzyć profesjonalne witryny niezbędne również będą zdolności projektanckie. W tym rozdziale omówimy uniwersalne podstawy projektowania witryn internetowych i przedstawimy techniki ich tworzenia. Bez względu na to, czy jesteś nowym użytkownikiem Flasha, czy też bardziej zaawansowanym, mamy nadzieje, że znajdziesz w tej części wiele interesujących dla ciebie wskazówek, które pomogą ci ulepszyć twoje twórcze procesy i tworzyć bardziej interesujące witryny internetowe. Powodem zlecenia przez firmę lub indywidualnego klienta zaprojektowania witryny internetowej jest zazwyczaj potrzeba ogłoszenia danej informacji pewnej określonej grupie ludzi, bądź też całemu światu. Dlatego też głównym zadaniem projektanta witryny internetowej jest upewnienie się, że tworzona witryna internetowa będzie się nadawać do przekazania wiadomości podanych przez klienta. W tym rozdziale skupimy się na przedstawieniu procesu planowania witryny przez projektanta pod tym właśnie kątem, a także postaramy się przekazać kilka praktycznych rad związanych z procesem tworzenia przyjaznych użytkownikowi, czyli udanych projektów profesjonalnych witryn internetowych. Wszyscy pragną, aby ich witryny internetowe przykuwały uwagę. Witryny takie powinno się dać łatwo znaleźć, osoba je odwiedzająca nie powinna mieć problemów ze zrozumieniem informacji na nich zawartej, z łatwością powinna je przeglądać i wielokrotnie do niej powracać. Mimo, że nie powinno to stanowić głównej motywacji projektanta witryny internetowej należy pamiętać, że powodem tworzenia witryn internetowych jest zamiar przekształcenia użytkowników w klientów, a jeszcze lepiej w szczęśliwych klientów. Jeśli dana witryna jest trudna w obsłudze, bez względu na jej niezwykle atrakcyjny wygląd, użytkownik nie będzie wstanie zrozumieć informacji, po jaką odwiedził tą witrynę, znudzi się lub zirytuje i w efekcie zbyt wcześnie, bezpowrotnie ją opuści. W tym rozdziale omówimy proces przekazywania informacji grupie ludzi i sposoby zapewnienia atrakcyjności i użyteczności witryny. Rozpoczniemy od omówienia teoretycznych i praktycznych zagadnień związanych z projektowaniem witryn internetowych, a następnie przejdziemy do przedstawienia metod zastosowanych przeze mnie do wykonania prawdziwych projektów. Naszą dyskusję rozpoczniemy od użyteczności witryn internetowych.
Rozdział 1-15
Użyteczność Użyteczność jest skomplikowanym zagadnieniem wymagającym rozległych badań, aby go opanować i zastosować. Nie będziemy się teraz zajmować tym tematem zbyt szczegółowo, lecz skupimy się na omówieniu roli, jaką zagadnienie to odgrywa w tworzeniu witryny internetowej i zastanowimy się, dlaczego projektanci powinni dokładnie zastanowić się, w jaki sposób użytkownik zareaguje na stworzoną przez nich witrynę. Pamiętając o tych zagadnieniach będziesz mógł ulepszyć swoje projekty witryn i zwiększyć ich użyteczność bez poświęcania wszystkich nowych technik i zabawek Flasha, jakich się nauczyłeś i które chcesz zastosować w swojej pracy. Użyteczność jest to nauka o tworzeniu sprawnie działających, zrozumiałych i, cóż, użytecznych witryn internetowych. Opiera się ona na badaniach ścisłej interakcji pomiędzy człowiekiem i komputerem a także testach przeprowadzonych na użytkownikach i wywiadach. Badania użyteczności bazują zazwyczaj na założeniu, że Sieć jest kolekcją witryn zawierających duże ilości informacji tekstowej, których celem jest przekształcenie osób je odwiedzających w klientów, a następnie w stałych klientów. Badania użyteczności uwidoczniły wiele kwestii, które mogą zwiększyć lub zmniejszyć poziom użyteczności danej witryny.
Użyteczność Flasha Świat projektów na potrzeby Internetu brał ostatnio udział w gorącej debacie o przyszłej formie witryn internetowych: po jednej stronie stanęli guru użyteczności, którzy zaprzysięgli oddanie językowi HTML i usilnie wierzą w potęgę businessowego Internetu opartego w głównej mierze na informacjach tekstowych. Po drugiej stronie zaś stanęła niezliczona liczba postmodernistycznych projektantów, którzy zaprzysięgli oddanie najnowszej technologii z wizją o wiele swobodniejszego Internetu kierowanego potrzebą ekspresji. Są to oczywiście dwie skrajności, a w rzeczywistości zadaniem projektanta witryn internetowych, jeśli chce pozostać na czele swojej dziedziny i jednocześnie zarabiać na życie jest wyszukanie nadającej się do wykorzystania pozycji gdzieś pomiędzy. Niektórzy projektanci witryn internetowych nie chcą nawet słyszeć o użyteczności, wierząc, że artystyczna swoboda wyrazu zawsze powinna być oceniana ponad użytecznością. Niektórzy nawet mówią o „faszyzmie użyteczności”, który, według jego przeciwników, jest ograniczającym, tłamszącym kreatywność jarzmem, do noszenia, którego zmuszani są obecni projektanci, podczas gdy wielu projektantów uważa, że poruszanie zagadnienia użyteczności jest niewłaściwe podczas pracy z Flashem wierząc, że z jakiegoś powodu zwykłych zasad projektowania nie stosuje się. Nie uważam, aby użyteczność musiała stać w opozycji do innowacyjnego projektowania. Te dwie perspektywy nie muszą stanowić biegunowych przeciwieństw, a jedynie dwie strony tej samej monety. Zadaniem projektanta jest przekazanie informacji, a dzięki użyteczności informacja to może zostać łatwo udostępniona. Każdy projektant posługuje się językiem wizualnym. Aby odbiorca mógł projektanta zrozumieć należy opracować projekt w obrębie ogólnej wiedzy, która umożliwi zrozumienie języka wizualnego przez odbiorcę. Lecz zanim użytkownicy zrozumieją wybrany przez projektanta język wizualny, należy najpierw pewnie przemieszczać się po witrynie napisanej w tym języku. Jeśli informacja przedstawiona jest na wydrukowanej broszurce czytelnik może uzyskać do niej dostęp tylko w jeden sposób — czytając strona po stronie, przechodząc do interesujących go sekcji korzystając z indeksu i spisu treści. W przypadku witryny internetowej jednak, użytkownik musi wydedukować, w jaki sposób została ona skonstruowana i w którym miejscu znajduje się interesująca go informacja. Jeśli projektant w łatwy do odgadnięcia Rozdział 1-16
sposób nie wskazał tego, użytkownik nie zbyt długo zagości na tej witrynie, bez względu jak atrakcyjna by ona nie była. Stopień, w jakim wytłumaczysz użytkownikowi jak poruszać się po wykonanej przez ciebie witrynie internetowej i jak odnaleźć informację, będzie oczywiście zależeć od rodzaju publiczności, dla której przeznaczona jest witryna. Jeśli witryna internetowa bazuje na doświadczeniu użytkownika, nie będziesz musiał prowadzić osób oglądających za rękę tak dokładnie, jak na przykład w witrynie sklepu internetowego przeznaczonej dla nowych lub niedoświadczonych użytkowników komputera. Kluczem do projektu jest równowaga. Środowisko potrzebuje grupy artystów awangardowych, którzy przyczynią się do rozwoju mentalnych, wizualnych i filozoficznych zagadnień. Potrzebujemy przekraczający granice projekty stworzone przez projektantów gotowych do poszerzania granic projektowania, lecz należy starać się, aby tego typu innowacje mogły zostać praktycznie zastosowane. Projektanci włączający użyteczność do swoich witryn internetowych nie zamiast innowacji, lecz jako dodatek do niej, będą czerpać najwięcej korzyści z tej rozwijającej się technologii.
Najczęstsze problemy użyteczności witryn internetowych wykonanych we Flashu Poniżej zamieściliśmy streszczenie najczęstszej krytyki użyteczności projektów witryn internetowych, które nie odnoszą się wyłącznie do witryn wykonanych we Flashu. Streszczenie to zostało oparte na badaniach ulubionego przez wszystkich krytyka Flasha, Jakoba Nielsena. • Zastosowanie najnowszej technologii Mimo, że pluginy Flasha są obecnie dołączane do przeglądarek internetowych konieczność pobierania i instalowania wtyczek przez wciąż wielu użytkowników oznacza, że decyzja zastosowania technologii Flasha stawia sama zagadnienie użyteczności pod znakiem zapytania. Ponieważ program ten jest w dużej mierze technologią pluginową, nie można uznać Flasha za rozwiązanie standardowe. Ogólnie mówiąc, tego typu rozwiązanie niestandardowe wywierają wpływ na użyteczność gdyż wymagają od początkującego użytkownika przyswojenia sobie nowej metody interakcji z stosunkowo dobrze znanym i skądinąd standardowym medium. • Ciągle odtwarzane animacje Stosuj animacje z uwagą, gdyż mogą one zmonopolizować uwagę i skupienie. Na przykład, umieszczenie wielokrotnie odtwarzanej animacji obok istotnej informacji tekstowej uniemożliwi użytkownikowi skoncentrowanie się na interesującej go informacji. • Zmiana zachowania przycisku Back Przycisk Back w przeglądarkach jest jednym z najczęściej stosowanych elementów w nawigacji. Poprzez zmianę sposobu jego funkcjonowania, stosując przekierowania, okienka wyskakujące czy pełnoekranowe okna, znacznie ograniczysz autonomię użytkownika, co może go znacznie sfrustrować. • Otwieranie pełnoekranowych okien Uruchamianie witryny w pełnoekranowym oknie jest czystym samolubstwem. W ten sposób zabierasz pasek nawigacji użytkownika, listę Ulubionych, pasek adresowy, okna znajdujące się pod spodem i pulpit. Narzucasz użytkownikowi swoją witrynę i zmuszasz go do oglądania jej jako środka wszechświata. Chociaż nowość tego efektu może być na początku miła, zastosowanie to zwykle kończy się podirytowaniem użytkownika, który czuje się zagubiony przy każdorazowym odwiedzeniu takiej witryny. Rozdział 1-17
•
•
•
Przydługi czas ładowania Jest to jeden z głównych powodów przyczyniających się do złej reputacji Flasha pod względem użyteczności — długie programy ładowania wstępnego i długi czas oczekiwania na odpowiedź. Projektowanie filmów we Flashu z optymalizacją czasu pobierania i czasu odpowiedzi jest, zatem niezwykle istotnym elementem projektu. Brak wspomagania nawigacji Użytkownicy muszą wiedzieć, w którym miejscu znajdują się w witrynie, a także w jaki sposób mogą powrócić do poprzedniego miejsca i dokąd powinni się kierować. Chociaż teoretycznie te zagadnienia wydają się oczywiste, w praktyce wielokroć są one pomijane. Reklamy w witrynach internetowych Większość użytkowników nie chce reklam, lecz faktyczną zawartość witryny. Poprzez tworzenie elementów wyglądających jak reklamy zapewniasz w ten sposób, że użytkownicy na pewno na nie nie spojrzą.
Zagadnienia przedstawione powyżej powinny być skierowane do ciebie, projektanta, w początkowym stadium tworzenia witryn. Poprzez zastanowienie się nad odbiorem witryny przez użytkownika wystarczająco wcześnie w procesie projektowania możesz uczynić swoją witrynę wykonaną we Flashu o wiele bardziej praktyczną i efektywną. Poniżej zamieściliśmy adresy zawierające więcej informacji na temat użyteczności, włącznie z kilkoma bardziej barwnymi opiniami na temat zastosowania Flasha niż te przytoczone powyżej.
Witryna internetowa Jakoba Nielsena: www.useit.com zawierająca: o Top Ten Mistakes In Web Design (10 głównych błędów w projektowaniu witryn internetowych): www.useit.com/alertbox/9605.html o Top Ten New Mistakes In Web Design (10 głównych nowych błędów w projektowaniu witryn internetowych): www.useit.com/alertbox/990530.html Witryna poświęcona użyteczności Usable Web: www.usableweb.com Dack.com — Flash to zło: www.dack.com/web/flash_evil.html
Rola projektanta witryn internetowych Projektant witryn internetowych zatrudniany jest do ustanowienia kanału komunikacyjnego pomiędzy klientem i użytkownikiem. Komunikacja ta dokonywana jest przez tekst, obrazki i grafikę. Projektant witryn internetowych jest dla klienta prawie tym samym, co agencja matrymonialna. Zna wszystkie najlepsze cechy klienta i jego ofertę i usiłuje dopasować je do kilku chętnych w celu ustanowienia długotrwałego i owocnego związku pomiędzy witryną internetową i użytkownikiem. Projektant musi maksymalnie ułatwić tym dwóm stronom spotkanie i komunikację przez Internet, a stopień łatwości, z jakim użytkownik może tego dokonać doprowadzić może do utworzenia lub zerwania związku. Jeśli użytkownikowi nie spodoba się wykonana przez projektanta witryna, możliwe że z jednego z powodów wymienionych powyżej, opuszcza ją i prawdopodobnie nigdy na nią nie wróci. Aby odnieść sukces w pracy projektanta witryn internetowych, witryny wykonane przez ciebie muszą dawać użytkownikowi dobre samopoczucie i, przede wszystkim, kontroli. Gdy
Rozdział 1-18
ludzie są zadowoleni stają się otwarci na nowe doświadczenia i nowe informacje, co z kolej sprowadza się i znacznie ułatwia najważniejsze zadanie projektanta, czyli przekazywanie informacji. Kolory, dźwięki i „nastrój” witryny może wzbudzić w użytkowniku pozytywne odczucia, lecz te elementy same nie wystarczą. Sposób funkcjonowania witryny i łatwość obsługiwania jej w dużym stopniu wpływa na samopoczucie użytkownika: gdy użytkownik wchodzi na pięknie zaprojektowaną witrynę, lecz nie może rozgryźć sposobu obsługi paska nawigacji, internauta nie będzie się czuć zbyt dobrze. Zirytuje się albo na witrynę albo na jej twórcę, a może dojść nawet do tego, że zacznie się sam obwiniać o brak wystarczających umiejętności w obsłudze komputera, które uniemożliwiają mu sprawną obsługę danej witryny. Jeśli użytkownik czuje się w podobny sposób, nie wróży to nic dobrego ani projektantowi witryny, ani jemu klientowi. Użytkownicy odwiedzający zaprojektowaną przez ciebie witrynę powinni wierzyć w swoje umiejętności w obsłudze komputera i w zakupiony przez nich system komputerowy, który może pobrać twoją profesjonalną witrynę w sekundę. Jeśli umożliwisz użytkownikowi czuć się właśnie w taki sposób, będzie on również zadowolony z pracy projektanta, czyli ciebie, i zawartości witryny.
Definiowanie wiadomości W celu przekazania informacji zamieszczonej w witrynie internetowej musisz dokładnie zapoznać się z jej treścią. Aby witryna internetowa nadawała się do użytku przez internautę i była dla niego zrozumiała, należy poznać cel tworzenia danej witryny. Jeśli nie jesteś pewien, co dana witryna ma przekazywać, istnieją niewielkie szanse, że będzie to wiedział ktoś inny. Poniżej zamieściliśmy kilka wskazówek, które pomogą ci w zdefiniowaniu wiadomości, jaką twój klient chce umieścić w witrynie internetowej. „Wiadomość”, którą twój klient chce przekazać nie jest po prostu informacją zapisaną, jak na przykład motto firmy czy hasło kampanii reklamowej. „Wiadomość” w tym kontekście oznacza coś bardziej abstrakcyjnego: zdefiniowanie jej, z perspektywy projektanta, oznacza określenie nastroju i atmosfery, jaką powinien odczuwać użytkownik oglądając tworzoną przez ciebie witrynę, aby wzmocnić informację, jaką masz przekazać. Projekt powinien wywrzeć takie wrażenie na użytkowniku, które odpowiadałoby stanowisku, jakie chce przyjąć twój klient. Na przykład, w witrynie uznanej firmy bankowej powinieneś stworzyć wrażenie odpowiedzialnego, godnego zaufania i dobrze prosperującego przedsiębiorstwa. Projekt powinien odzwierciedlać zarówno reprezentowaną przez niego firmę jak i publiczność, do której skierowana jest wiadomość w nim zamieszczona. Typowym celem witryn internetowej jest, na przykład, zwiększenie obrotów sprzedaży danego produktu. Poprzez otworzenie witryny internetowej klient ma nadzieję na otwarcie kolejnego kanału sprzedaży, pragnie użyć witryny internetowej jako narzędzia marketingowego lub skierować wizerunek firmy w pewnym określonym kierunku. Typowe wiadomości, jakie twój klient w takim przypadku będzie chciał przekazać mogą być następujące: „Ten produkt jest produktem najwyższej jakości szanowanej firmy”, lub „Ta firma wie, jak należy nawiązać kontakt z młodszym pokoleniem”. Nie są to odpowiednie wiadomości, na których należałoby oprzeć projekt, lecz nadają się na początek. Nie można wykonać zadowalającego projektu opierając się jedynie na przesłaniu „Kup to!”. Powinieneś bardziej zagłębić się w informacje podane przez klienta i odnieść się również do uczuć użytkownika. Przeciętny zleceniodawca zazwyczaj jest mniej więcej świadomy, w jakim celu potrzebujesz witryny internetowej i prawdopodobnie chciałby na niej zamieścić wiele istotnych informacji dla swoich klientów. Określenie profilu firmy, opis jakości jej produktów, nazwa firmowa, solidność struktury organizacyjnej — są to wiadomości, którymi zleceniodawca pragnie podzielić się ze swoimi potencjalnymi klientami. Dla projektanta, poprawne zdefiniowanie Rozdział 1-19
wiadomości w dużej mierze zależy od jego własnej interpretacji materiału udostępnionego przez zleceniodawcę. Poniższe wskazówki powinny ci pomóc w określeniu wiadomości. • Porozmawiaj ze swoim zleceniodawcą o zagadnieniach dla niego istotnych. Im więcej dowiesz się o swoim kliencie i jego projekcie, tym łatwiej będzie ci połączyć te informacje z zagadnieniami i pojęciami nie związanymi bezpośrednio z produktem. • Burza mózgów — jest to metoda kreatywnego myślenia stosowana przez projektantów do sformułowania właściwych pojęć. Po prostu zapisuj jak najwięcej krótkich zdań, jakie przyjdą ci do głowy, do opisania twojego klienta i jego misji; zapisz również słowa kojarzące się tobie z twoim zleceniodawcą, jego produktem i projektem witryny. Następnie, połącz różne nastroje z zanotowanymi wyrazami i spróbuj wyobrazić sobie odpowiednią atmosferę witryny. Wykonaj to kilkakrotnie, aby ulepszyć listę słów i skompletować ich kolekcję przygotowaną dla danego projektu. • Postaraj się maksymalnie uprościć wiadomość. Im więcej uda ci się usunąć niepotrzebnych informacji, tym głębiej dotrzesz do istoty zamierzeń swego klienta i tym bardziej zbliżysz się do punktu, w którym możesz rozpocząć przekazywanie wiadomości twojego zleceniodawcy. • Jeśli nie bardzo odpowiada ci pomysł z „nastrojem” i „atmosferą”, zastosuj inną metodę. Zamiast wyczuć właściwy sposób projektowania, po prostu dokonaj wyboru. Wybierz wiadomość. Usuń wszystkie niepotrzebne elementy i śmiało zdefiniuj wiadomość. Zdecyduj się, jakie informacje chcesz przekazać i na nich się skoncentruj. Oczywiście, wybrana przez ciebie wiadomość powinna w dużej mierze pokrywać się z wymaganiami twojego klienta. W najlepszym przypadku twoje badania powinny zakończyć się sformułowaniem pojedynczego zdania lub wyrażenia, które, według ciebie, najlepiej opisuje nastrój, atmosferę, misję, produkt i klienta. Jest to zdefiniowana wiadomość. Edycja manuskryptu Projektanci nie zawsze muszą być autorami tekstu umieszczanego na stronie klienta: zazwyczaj ich zadaniem jest przekazanie dostarczonego przez zleceniodawcę manuskryptu. Jednakże, w niektórych przypadkach będziesz zmuszony zmodyfikować zawartość manuskryptu przedłożonego przez klienta. Materiał tekstowy przygotowany dla witryny internetowej, uznany za niezwykle istotny przez zleceniodawcę, może okazać się zupełnie nieważnym dla użytkownika. Typowym przykładem takiej sytuacji jest wewnętrzna organizacja firmy zleceniodawcy, z którą twój klient ma do czynienia każdego dnia: szereg poleceń, różnorodne jednostki firmy i nazwiska asystentów mogą być niezwykle interesujące dla zleceniodawcy, lecz zwykle nie wzbudzają zainteresowania internauty. Poprzez usunięcie materiału, który nie jest w 100 procentach istotny dla celu tworzenia witryny internetowej i który będzie uznany za nieinteresujący przez użytkownika możesz spowodować niewielkie przesunięcie uwagi od głównej wiadomości przeznaczonej do umieszczenia w witrynie internetowej. Poszerzenie zawartości o dodatkowe zagadnienia zwiększa ilość informacji, przez którą użytkownik będzie musiał przebrnąć i posegregować, lecz jeśli wybory dokonane przez użytkownika doprowadzą go zbytecznych wiadomości, prawdopodobnie nie zostanie on w witrynie na tyle długo, aby dostać się do najważniejszych informacji. Jeśli jednak zostanie, jego droga do najistotniejszej wiadomości zostanie niepotrzebnie wydłużona, a jej wartość może zostać pomniejszona przez niepotrzebną zawartość, przez którą użytkownik musiał przebrnąć. Podczas omawiania i końcowego
Rozdział 1-20
formułowania zawartości witryny internetowej ze zleceniodawcą powinieneś być świadomy tego typu problemów.
Definiowanie publiczności Definiowanie docelowej publiczności jest istotną częścią tworzenia witryny internetowej, zarówno pod względem użyteczności, jak i graficznego projektu witryny. Ponieważ celem witryny internetowej jest przekazanie informacji grupie ludzi, należy określić rodzaj grupy ludzi, do której witryna będzie skierowana. Podobnie jak w innych rodzajach komunikacji, witryna internetowa stosuje określony język. Zanim zabierzesz się za cokolwiek innego, powinieneś dowiedzieć się, do kogo mówisz. Jeśli nie znasz potencjalnej publiczności witryny, najprawdopodobniej stworzysz witrynę w języku, który jest dla danej grupy odbiorców niezrozumiały, lub, z którym grupa ta się nie identyfikuje. Wyobraź sobie, że jesteś handlarzem przeprowadzającym prezentację produktu na rynku. Może wokół ciebie tłoczy się dziesięć osób w trakcie prezentacji. Rozmowa z każdą z osób z osobna i bycie z nią w kontakcie wzrokowym jest fizycznie niemożliwe, dlatego też musisz wybrać jedną lub dwie osoby, do których zwracasz się w szczególności. Jeśli trafisz na najbardziej otwartą osobę w tłumie, prawdopodobnie szybko sprzedasz swój produkt. Dlatego też musisz wybrać tego, kto jest najbardziej chętny do zakupu twojego produktu. Zawężenie publiczności przyczynia się do zwiększenia siły twojej wiadomości. Im dokładniej określisz użytkownika, tym wiadomość będzie bardziej dla niego odpowiednia. Innymi słowy, nie powinieneś zgadywać, kto stanowi twoją docelową publiczność, lecz ją wybrać. Po wybraniu głównej grupy docelowej, możesz zabrać się za lepsze poznanie jej członków. Przy odrobinie szczęścia może okazać się, że twój klient dostarczy ci wyniki tego typu badań. Poniżej zamieściliśmy przykładowe pytania odnośnie publiczności, jakie powinieneś skierować do siebie samego i swojego zleceniodawcy: • Do kogo zamierzam sprzedać dany produkt? • W jakim wieku są potencjalni klienci? • Jakie są ich zainteresowania? • Gdzie wydają pieniądze? • Jakie są ich przyzwyczajenia? • Jakie są ich minimalne wymagania? • Jakie są ich standardy jakości? • Co będzie dla nich stanowiło nowość? • Co ich przyciąga? • Od jak dawna korzystają z Internetu? • Czy próbowali już pobierać i instalować pluginy? • Z jakich platform komputerowych korzystają? • Jakiej używają przeglądarki? Pamiętaj, że jest duże prawdopodobieństwo, że ani ty, ani twój klient nie będziecie w stanie podać dokładnej odpowiedzi na te pytania, a nawet jeśli stosunkowo poprawnie zdefiniujecie grupę odbiorców, to i tak znajdzie się ktoś, kto nie będzie odpowiadał twoim przypuszczeniom. Lecz zadawanie tego typu pytań znacznie przybliży cię do docelowej publiczności. Wybór prędkości połączenia Aby upewnić się, że razem z twoim zleceniodawcą zużywacie energię i budżet na właściwy rodzaj witryny internetowej należy również określić docelową grupę pod kątem prędkości Rozdział 1-21
połączenia, jaką dysponuje. W ten sposób będziecie mogli się upewnić, że nie tworzycie witryny internetowej dla stałego łącza skierowanej do odbiorców dysponujących jedynie modemami. Prędkość połączenia stanowi jedno z głównych ograniczeń przy projektowaniu witryny internetowej. Prędkość połączenia stosowana przez twoją publiczność może zmieniać się od 14,4k dla modemów do szybszego w przypadku łączy stałych. I w tym przypadku w żaden sposób nie jesteś w stanie bezbłędnie przewidzieć, z jakiego połączenia korzysta twoja publiczność docelowa, lecz możesz zadać kilka ogólnych pytań o odbiorcach, a uzyskane na nie odpowiedzi dadzą ci kilka istotnych wskazówek. • Czy twoja publiczność składa się z młodych, bogatych i nowoczesnych ludzi? • Czy są oni starsi i nie przywykli do korzystania z Internetu? • Czy twoją publiczność stanowią uczniowie łączący się z Internetem zazwyczaj poprzez sieć szkolną? • Jaka jest średnia przepustowość dla danego regionu/kraju? Nieudane określenie prawdopodobnej przepustowości twojej publiczności może doprowadzić do szybkiej śmierci twojej witryny internetowej. Użytkownicy korzystający z połączeń modemowych nie będą wykazywać się zbytnią tolerancją dla witryn dla stałego łącza i dopóki koszty zakupu tego łącza nie zostaną wystarczająco obniżone liczba jej użytkowników będzie znacznie mniejsza od liczby użytkowników łączących się z Internetem za pomocą modemu. Do określenia idealnej przepustowości zawsze bież pod uwagę połączenia najwolniejsze, gdyż dzięki temu możesz być pewien, że internauci korzystający z połączeń modemowych nie będą przygnębieni prędkością ich połączenia i nie zrażą się do twojej witryny z powodu trudnego do niej dostępu z powodu braku stałego łącza. Natomiast użytkownicy szybszych łączy będą zadowoleni z szybkiego dostępu do witryny. W ten sposób uszczęśliwisz wszystkich odbiorców. Dopóki stałe łącza nie staną się rozwiązaniem standardowym, tworzenie witryn internetowych sprawnie działających wyłącznie przy tego typu połączeniu znacznie zmniejsza liczbę jej potencjalnych użytkowników. Z drugiej strony, użytkownicy stałych łączy będą wymagali zawartości witryny na poziomie stałego łącza. W takim przypadku rozwiązaniem jest zastosowanie sztuczek Flasha sprawiających wrażenie, że możliwości stałego łącza zostały w pełni wykorzystane na danej witrynie. Na przykład, jedną ze sztuczek jest zastosowanie akcji loadMovie, dzięki której pobierana jest tylko zawartość wybrana przez użytkownika, a nie wszystko jednocześnie. Inną alternatywą jest przygotowanie różnych wersji dla użytkowników w zależności od prędkości połączenia, jakim dysponują.
Rozwiązanie problemu Po zdefiniowaniu wiadomości o docelowej publiczności czas najwyższy na zastanowienie się nad realizacją wyzwania, przed którym stanęliśmy. Sposób realizacji zadania postawionego nam przez klienta powinien się znaleźć po określeniu wiadomości i zdefiniowaniu docelowej publiczności. Te dwa elementy powinny wpłynąć na wszystkie techniczne i twórcze decyzji powzięte w trakcie procesu projektowania. Po określeniu poziomu zaawansowania technicznego publiczności, pamiętaj, aby nie wybierać od razu utworzenia witryny internetowej w całości we Flashu. Czasami lepszym wyborem może okazać się język HTML, a w innym przypadku połączenie Flasha, HTML i innych technologii.
Rozdział 1-22
Projekt konstrukcyjny W przypadku witryn internetowych za zwyczaj dysponujesz sporą ilością informacji, które należy udostępnić użytkownikowi w najbardziej efektywny i ujmujący sposób. Z tego powodu projekt konstrukcyjny jest niezwykle istotny. Właściwa struktura witryny ułatwia odnalezienie i dotarcie do znajdujących się na niej poszczególnych zagadnień. Odpowiednie zdefiniowanie wiadomości przewodniej witryny w znacznym stopniu ułatwi ci przejrzyste skonstruowanie witryny i poprawne rozmieszczenie informacji. Projekt konstrukcyjny nie powinien ograniczać się jedynie do zarządzania dużą ilością informacji w witrynie, lecz także przyczynia się on do zwiększenia użyteczności witryny. Zaprojektowanie logicznej i przezroczystej struktury witryny będzie bardzo korzystne dla jej użytkowników: będzie im łatwiej poruszać się po witrynie, uzyskać dostęp do interesujących ich informacji, a ponadto znacznie wzbogacą swoje doświadczenia. W celu zorganizowania informacji w taki sposób, aby odzwierciedlała przewodnią wiadomość witryny, należy rozpatrzyć konstrukcję z uwzględnieniem stopnia ważności, popularności, kontekstu i zainteresowania. Wyobraź sobie nowicjuszy poruszających się po twojej witrynie internetowej. Pod jakimi nagłówkami będą szukać interesujących go informacji? Co będzie dla nich logiczne? Przy dokonywaniu każdej strukturalnej zmiany zastanów się, czy nowicjusz ją intuicyjnie zrozumie. Jeśli nie, pewna część publiczności zostanie odsunięta od witryny. Poniżej przedstawione pytania pomogą ci w strukturalnym zorganizowaniu zawartości twojej witryny internetowej: • Jakie zagadnienia są najistotniejsze dla klienta? Poukładaj zawartości według stopnia ważności dla klienta. Porozmawiaj z twoim zleceniodawcą, przejrzyjcie razem materiał i określcie poziom ważności każdego zagadnienia. Najważniejsze tematy oczywiście wymagają pierwszeństwa w witrynie. Powiązane ze sobą tematy powinny być połączone razem, aby uwidocznić użytkownikowi szerszy kontekst i związki pomiędzy poszczególnymi kwestiami. • Jakie zagadnienia będą, według ciebie, zyskają największą popularność wśród użytkowników? Jest faktem, że większość użytkowników chce dotrzeć do najbardziej popularnych zagadnień. Postaraj się określić, które tematy wzbudzą największe zainteresowanie wśród twojej docelowej publiczności. Jeśli dana publiczność składa się z dzieci, prawdopodobnie bardziej będą one zainteresowane graniem w gry niż czytaniem o profilu firmy. Popularna zawartość będzie, siłą rzeczy, najczęściej odwiedzana i dlatego też należy dostęp do niej uczynić jak najłatwiejszym. Zauważ, że opnie twojego klienta i twoje własne na temat tego, co zleceniodawca chce uwypuklić, co ty uważasz za popularne i co zainteresuje użytkowników mogą się znacznie różnić. Część pracy projektanta polega właśnie na przezwyciężeniu tego typu napięć. • Skoncentruj się na najważniejszej wiadomości Nie nakładaj na wszystkie tematy jednakowego nacisku. Pamiętaj, że jeśli wszystko zostanie podkreślone, w efekcie nic nie jest podkreślone. Poprzez zwiększenie uwagi kładzionej na dane zagadnienie automatycznie zmniejszasz uwagę przykładaną do innych tematów. Zarówno ty jak i twój zleceniodawca powinniście zaakceptować, że jednocześnie wyłącznie jeden element może zostać uwypuklony. Prawdziwa sztuka akcentowania polega na wyborze właściwego zagadnienia do podkreślenia. Na przykład, najbardziej przyciągającym uwagę elementem w witrynie nie musi być „najważniejsza” informacja, lecz najbardziej popularna, podkreślona w celu przyciągnięcia użytkownika i zachęcenia go do pozostania w witrynie wystarczająco długo, aby zostać zaintrygowanym najistotniejszą wiadomością. Rozdział 1-23
Na sposób skonstruowania witryny mogą wywrzeć również wpływ różne zagadnienia techniczne, które powinny zostać omówione ze zleceniodawcą. Czasami będziesz zmuszony koloryzować, aby klient w pełni zrozumiał ich znaczenie i ich wpływ na strukturę witryny. Jednakże, tego typu techniczne kwestie nie powinny wpłynąć na komunikatywną strukturę witryny: nie mają one żadnego znaczenia dla użytkowników, w związku z tym powinny pozostać dla nich niewidoczne. Odbiorcy powinni interesować się jedynie przesłaniem witryny i jej zawartością. Poniżej zamieściliśmy listę technicznych zagadnień godnych rozważenia. • W jaki sposób witryna będzie aktualizowana? Przyszła aktualizacja ukończonej witryny jest istotnym elementem procesu jej konstruowania. Kto będzie odpowiedzialny za aktualizację i jakie będą jego kwalifikacje? Podczas sortowania informacji przeznaczonych do umieszczenia w witrynie powinieneś rozróżniać stałe informacje od dynamicznych, które będą zmieniać się od czasu do czasu. • Czy użytkownicy będą mogli dodawać do niej zawartość? Witryny zawierające elementy typu tablice ogłoszeń, chat rooms i współdzielone pliki, gdzie użytkownicy posiadają duży stopień interakcji wymagają zastosowania specjalnych struktur. • Czy wielkość witryny wymaga zastosowania bazy danych? Czy projekt witryny jest na tyle obszerny, że będzie wymagać zastosowania bazy danych? Duże, regularnie aktualizowane witryny internetowe zawierające znaczną ilość informacji są zazwyczaj najefektywniej obsługiwane za pomocą bazy danych. • Czy do konstrukcji witryny należy stosować program Generator? Witryny wykonane we Flashu z dynamiczną zawartością mogą wymagać zastosowania takich aplikacji jak Macromedia Generator, Swift Generator czy innych programów tej klasy do generowania treści przedstawianych za pomocą technologii Flash.
Rozmiar plików, wstępne ładowanie, strumieniowanie i akcja loadMovie Pierwsze dziesięć sekund po wejściu zwiedzającego na twoją witrynę możesz utrwalić lub zniszczyć wasz przyszły związek. Jeśli witryna nie funkcjonuje, lub nie odpowiada oczekiwaniom użytkownika, straciłeś potencjalnego klienta. W trakcie tych dziesięciu sekund powinno wydarzyć się coś interesującego. Po zdefiniowaniu twojej publiczności powinieneś dokładnie wiedzieć, jakimi łączami dysponuje i co ją powinni zainteresować. Format pliku SWF charakteryzuje się istotną cechą: jest strumieniowy. Strumieniowanie oznacza, że plik we wspomnianym formacie zostaje odtworzony zanim zostanie w pełni pobrany, co pozwala na przekroczenie przez projektanta rozmiaru pliku, jaki prawdopodobnie zostanie pobrany przez użytkownika zanim znudzi się czekając na załadowanie witryny. Dzięki temu procesowi ładowanie całej witryny może wyjść z użycia. Poprzez uważne tworzenie filmów we Flashu możesz wykonać płynnie działającą i szybko ładującą się witrynę internetową, nawet, gdy zawiera pliki o dużych rozmiarach, a użytkownicy korzystają głównie z połączeń modemowych. Wynika z tego, że głównym zagadnieniem do rozważenia nie powinien być rozmiar pliku, lecz efektywne strumieniowanie i wybór odpowiedniej prędkości połączenia. W celu zoptymalizowania strumieniowania pliku Flasha należy zapoznać się ze sposobem ładowania plików w formacie SWF.
Rozdział 1-24
Wybierając polecenie File|Publish Settings możesz wybrać metodę pobierania pliku poprzez zmianę kolejności ładowania (Load Order) filmu Flasha. Z dołu do góry (Bottom up) jest domyślnym ustawieniem; alternatywą do niego, jak można się domyśleć, jest ustawienie z góry na dół (Top down).
Kolejność pobierania (Load Order) określa, które warstwy eksportowanego pliku SWF (górne czy dolne) będą pobierane najpierw. Po wybraniu kolejności ładowania warstw, Flash rozpoczyna pobieranie zawartości każdego ujęcia tak szybko, na ile pozwala na to prędkość połączenia. Poprzez dodanie programu wstępnego ładowania do pierwszych dwóch ujęć na każdej warstwie... Rysunek 18b ... odtwarzanie zatrzymuje się na określony czas, gdy ładowanie jest kontynuowane. Zapoznanie się ze sposobem pobierania pliku SWF umożliwia odpowiednie rozmieszczenie zawartości filmu Flasha, aby polepszyć proces ładowania, co w efekcie powoduje polepszenie doświadczenia użytkownika z oglądaną witryną. Poprzez wprowadzenie elementów witryny z prędkością jednego ujęcia jednorazowo i rozmieszenie różnych elementów na oddzielnych warstwach, wstępne ładowanie może okazać się zbyteczne. Jak długo rozmiar poszczególnych elementów jest stosunkowo niewielki, a kolejność wyświetlania określona w miły dla oka i odpowiedni dla zawartości sposób, użytkownik będzie odczuwać, że coś się dzieje, nawet wówczas, gdy witryna jeszcze się ładuje. Polecenie Bandwith Profiler programu Flash jest bardzo użytecznym narzędziem do optymalizacji procesu ładowania witryny internetowej, gdyż umożliwia on symulację strumieniowania pliku SWF i testowania procesu ładowania. Rysunek 19 Aby zapewnić szybkie ładowanie witryny internetowej wykonanej we Flashu najlepiej podzielić całość na kilka mniejszych niezależnych filmów. Połączenie polecenia loadMovie z efektywnym strumieniowaniem oddzielnych filmów zoptymalizuje funkcjonowanie witryny internetowej. Więcej technicznych informacji na temat strumieniowania i wstępnego ładowania znajdziesz w rozdziale
Rozdział 1-25
„Wstępne ładowanie i strumieniowanie/PREOLADING AND STREAMING”
Nie będziesz w stanie dokładnie przewidzieć, które sekcje witryny dany użytkownik uzna za interesujące, a na które w ogóle nie zwróci uwagi. Zastosowanie polecenia loadMovie daje użytkownikom poczucie kontroli dzięki możliwości decydowania, kiedy użyć ich cenne połączenie do pobrania więcej informacji. Z drugiej jednak strony, wymuszone wstępne ładowanie całej witryny internetowej daje użytkownikowi do wyboru tylko dwie opcje: albo przeczeka długi czas ładowania w nadziei, że zainteresuje go zawartość witryny, lub opuści przedwcześnie witrynę aby uniknąć niepotrzebnego trwonienia czasu. Prawdopodobnie jedynie projektant po fachu, również pracujący we Flashu, który wykaże zawodowe zainteresowanie projektem twojej witryny, lub użytkownik dysponujący bardzo szybkim połączeniem wytrzymają długi czas wstępnego ładowania. Inni zaś bez rzucenia oka na twoje dzieło będą kontynuować surfowanie w innym miejscu. Po wybraniu strategii ładowania możesz przejść do następnego etapu projektowania, czyli do wykonania prototypu witryny.
Prototyp funkcjonalności Prototyp jest to strukturalny szkielet witryny. Nie obejmuje on żadnej zawartości (poza nagłówkami), ani grafiki. Jest to reprezentacja strukturalnej i nawigacyjnej funkcjonalności w najczystszej formie. Poniżej przedstawiłem prototyp zastosowany przeze mnie do projektowania witryny Titoonia, omówionej w dalszej części tego rozdziału. Rysunek 20
brak
Włączenie prototypu jako stałej części do procesu tworzenia witryny internetowej daje wiele korzyści. Zastosowanie poprawnie wykonanego prototypu oszczędza wiele czasu i pomaga w zauważeniu błędów przed uruchomieniem samej witryny. Ponadto dzięki prototypowi możesz przetestować wewnętrzną, jak również skierowaną do użytkownika użyteczność zaprojektowanej przez ciebie struktury, jak również sprawność interfejsu. Podczas tworzenia prototypu zastanów się nad pytaniami, jakie mogą się nasunąć użytkownikowi podczas przeglądania danej witryny. Na przykład: • Jak mogę się dowiedzieć, gdzie się znajduję w witrynie? • Gdzie mam iść teraz? • Jak mogę wrócić do miejsca, w którym byłem przed chwilą? Posłuż się prototypem jak własnym narzędziem, przedziwną hybrydą asystenta laboratoryjnego i szczura doświadczalnego. Zastosuj prototyp do budowania, testowania i ulepszania modeli, które pomogą ci rozwiązać problemy związane ze strukturą i nawigacją po witrynie, lub po prostu do uzyskania przeglądu informacji, którą musisz przetworzyć i przekazać użytkownikowi. Poniżej przedstawiliśmy zalecaną organizację procesu tworzenia witryny internetowej. Rozpocznij od kartki i pióra Nie zasiadaj od razu do komputera: o wiele lepiej sformułować pomysły najpierw na papierze. Utwórz listę nagłówków głównych tematów i podtematów witryny.
Rozdział 1-26
Narysuj prosty schemat blokowy Na papierze, lub, jeśli wolisz, za pomocą programu do tworzenia schematów, takiego jak Microsoft Visio, przeanalizuj wszystkie tematy, strony, i przejścia. Wyobraź sobie, że po raz pierwszy korzystasz ze swojej ukończonej witryny. Na ten etap powinny się składać zarówno procesy myślowe, jak i notatki zapisywane na papierze lub ekranie monitora: obmyślasz właśnie architekturę i klimat witryny. Oszacuj rozmiar pliku Pomyśl o zawartości, która powinna być widoczna domyślnie, a także o sekcjach, które użytkownik mógłby dopiero wybierać do oglądania. Jeśli rozmiar pliku zbytnio się rozrośnie, podziel sekcję na kilka plików w formacie SWF, które będziesz mógł załadować w razie potrzeby. Rozważ współdzielenie plików Zastanów się, które pliki mogą i powinny być dzielone między kilkoma stronami, a także zrób notatki o metodach, które można do tego celu zastosować. Użycie wspólnych bibliotek we Flashu 5, gdzie kilka plików korzysta z tych samych elementów pomoże ci w uporaniu się z tą kwestią, jak również z kontrolowaniem rozmiaru pliku. Na tym etapie, po ustaleniu kategorii tematycznych i wykonaniu schematu blokowego, możesz rozpocząć pracę na komputerze. Struktura katalogów Utwórz witrynę szkieletową, która posłuży jako lokalny katalog administratora ukończonej witryny. Utwórz fikcyjne pliki HTML i FLA nazwane zgodnie ze witrynami i filmami Flasha przedstawionymi na schemacie blokowym. Następnie utwórz podkatalogi i podsekcje, obrazki, materiał wideo, elementy do obrania i tak dalej. We wszystkich tych katalogach utwórz również puste pliki HTML i FLA w razie potrzeby. Kontynuuj, aż wykonasz fikcyjne wersje wszystkich plików, jakie będą zawarte w ukończonej witrynie (oprócz obrazków, plików wideo i tak dalej). W ten sposób utworzyłeś kompletny model ukończonej witryny. Na tym etapie nie zawiera on żadnej prawdziwej zawartości witryny, lecz dysponujesz już środkami to symulowania możliwych ścieżek i przejść po twojej witrynie. Zorganizuj nawigację witryny i łącza Otwórz puste pliki HTML i FLA i utwórz w nich wewnętrzną nawigacyjną strukturę witryny za pomocą hiperłączy. Wykonaj jeden, i tylko jeden, prosty przycisk we Flashu i użyj go w filmach. Wykonaj wszystkie główne łącza, jakie będą potrzebne w ukończonej witrynie — w razie potrzeby możesz do tego celu utworzyć kolejny schemat blokowy, który pomoże ci do poprawnego określenia nawigacji po witrynie i pomoże użytkownikom w przemieszczaniu się pomiędzy właściwymi sekcjami witryny. Szczegółowo przetestuj i popraw Zastosuj swój prototyp do przetestowania funkcjonalności nawigacji witryny, struktury katalogów, a także pobierania i rozładowania filmów. Dokonaj poprawek, zoptymalizuj działanie witryny i poeksperymentuj. Jeśli będzie to możliwe, dołącz testowanie wykonane przez użytkowników wybranych z docelowej publiczności. Pomoże ci to w naprawieniu błędów w witrynie, dzięki czemu nie będziesz musiał się z nich tłumaczyć. Dzięki zastosowaniu tych technik unikniesz wielu problemów zanim zaczniesz tworzyć zawartość samej witryny. Ponadto zyskasz również solidną strukturę nawigacyjną i wiele spostrzeżeń na temat kształtu i funkcjonalności witryny. Przejdźmy teraz do omówienia efektywnego prezentowania wizualnej informacji na pojedynczej stronie zapisanej w języku HTML lub w filmie Flasha. Rozdział 1-27
Użyteczność i doświadczenie użytkownika Podczas prezentowania informacji w formie tekstowej odbiorcy muszą być w stanie przeczytać ją w tej samej formie — na wydruku, w języku Braile’a, na ekranie monitora — aby informacja ta stała się użyteczna. W taki sam sposób użytkownicy muszą rozumieć, czyli „odczytać”, obrazki. Sztukę tworzenia dostępnych i użytecznych informacji graficznych nazwano użytecznością graficzną. Podczas tworzenia witryny internetowej należy zapewnić, że elementy graficzne na niej umieszczone przyczynią się do przekazania wiadomości zamieszczonych w witrynie. Animatorzy pracujący w złotym wieku Studio Disneya intensywnie pracowali nad terminem „czytelność”. Musieli rysować postaci, których czyny były łatwe o zinterpretowania, czyli odczytania, przez publiczność, ponieważ jeśli widzowie nie byli w stanie odczytać, co postać robiła w danej scenie, znaczenie historyjki mogło im wówczas łatwo umknąć i widzowie straciliby zainteresowanie filmem. Od tej pory twórcy kreskówek z całego świata staja w szranki z tym zagadnieniem pamiętając, że „czytelność” może przyczynić się do utrwalenia lub zniszczenia sceny, czyli całego filmu. Ten termin można również odnieść do omawianej przez nas dziedziny graficznej komunikacji. Gdy animatorzy rozplanowują scenę i szkicują rozmieszczenie w niej postaci, wiele czasu poświęcają na wyszukanie właściwych póz postaci. Określona poza musi wyrażać dokładnie to, co animator chce przekazać publiczności. Poza musi łatwo i jednoznacznie przekazywać jedną pojedynczą wiadomość — wrażenie lub uczucie takie jak złość, wyrzuty sumienia, zakłopotanie, szczęście, czy zwątpienie. Oprócz pozy, ruch postaci może pomóc widzowi w odczytaniu jej nastroju i dodatkowo zaakcentować przewodnią wiadomość sceny. Jednakże, jeśli początkowa poza nie przekazuje przynajmniej części wiadomości sceny, wówczas bez względu na płynność ruchu, scena nie będzie już czytelna dla publiczności, a wiadomość nie zostanie efektywnie przekazana widzom. Animatorzy sprawdzają stopień czytelności pozy poprzez oglądanie jej w formie czarnego konturu, tak jak zamieszczonego poniżej przyjaznego robota z witryny Titoonic. Jeśli gesty postaci są wystarczająco czytelne nawet wówczas, gdy widoczny jest tylko jej kontur, sygnał przez nią przekazywany nabierze na sile po dodaniu szczegółów wyglądu postaci. Rysunek brak Nawet, jeśli wyraz twarzy postaci jest niewidoczny, wiemy, że macha ręką w naszą stronę. Gest machania jest powszechnie rozpoznawalny jako pozytywne powitanie. Ciało robota jest zrelaksowane, a jego sylwetka nie wyraża w żaden sposób najmniejszego stopnia agresji. Teraz możemy dodać szczegóły. Rysunek brak Wyraz twarzy i szczegóły postaci podkreślają wiadomość, jaką odczytaliśmy z czarnych konturów robota. Postać się uśmiecha, a jej oczy maja przyjazny i zrelaksowany wyraz. Poza ma za zadanie podkreślić istotny element sceny i wskazywać na przewodnią wiadomość sceny bez zniekształcania jej. Jeśli widzowie muszą się zastanowić nad zinterpretowaniem pozy, poza nie spełniła swojego zadania, a wiadomość nie została przekazana. Dobrze przygotowana poza skupiona jest na wiadomości, którą publiczność jest w stanie natychmiast
Rozdział 1-28
odczytać. Poza nie powinna funkcjonować na poziomie świadomości, lecz być instynktownie zrozumiała. To pojęcie można również zastosować do obrazków i filmów. Element graficzny w witrynie internetowej także musi być czytelny: musi wyraźnie wskazywać, czy zawiera w sobie informację, a jeśli tak, to czy informacja ta jest ważna bądź nie dla publiczności. W tym kontekście należy w witrynie internetowej rozróżnić elementy graficzne wyłącznie stylistyczne od elementów graficznych zawierających informację. Elementy stylistyczne są to obszary graficzne o dowolnym stylu, w których możesz wyrazić swą artystyczną naturę, a także utworzyć nastrój i atmosferę witryny. Obszary te nie powinny zawierać żadnych informacji, lecz jedynie uczucia i nastroje. Do elementów stylistycznych można zaliczyć, na przykład, obrazki drugoplanowe, ozdoby, dekoracyjne paski, natomiast przykładami elementów graficznych zawierających informację będą zdjęcia produktów, diagramy informacyjne, wyjaśnienia w formie graficznej, nagłówki tematyczne, przyciski, czy paski nawigacji. Takie elementy powinny zawierać ograniczoną ilość jasno sformułowanej i określonej informacji. Obszary informacyjne nie powinny być „zaśmiecane” artystycznymi elementami. Jeśli obrazek zawierający informację wyglądem przypomina element stylistyczny, użytkownik może go błędnie zinterpretować i w efekcie nie odebrać informacji. Gdy element informacyjny wygląda jak dekoracja, zostanie tak właśnie zinterpretowany i użytkownik zignoruje informację w nim zawartą. Z drugiej strony, gdy element stylistyczny swoim wyglądem kojarzy się z obrazkiem zawierającym informację lub posiadającym jakąś praktyczną funkcję, użytkownik popadnie w zakłopotanie. Jeśli element dekoracyjny będzie wyglądem przypominać, na przykład, przycisk, użytkownik będzie próbować na niego kliknąć i dojdzie do wniosku, że przycisk ten nie działa, gdy nie przeniesie go w inne miejsce. Dlatego też elementy graficzne w witrynie powinny wyraźnie sygnalizować swoje zastosowanie. Przeznaczenie wszystkich elementów powinno być natychmiast dostrzeżone przez użytkownika po ich wyglądzie na ekranie. Cechy charakterystyczne, w jakie wyposażyłeś każdy element, takie jak kształt, umieszczenie, kolor i tak dalej, powinny natychmiast ujawnić użytkownikowi przeznaczenie obiektu.
Wybór i formatowanie tekstu Sposób wykonania i rozmieszczenia tekstu również wpływa na użyteczność witryny. Jeśli tekst nie będzie łatwy do odczytania, wiadomość w nim zawarta nie dotrze do użytkownika. Jednym ze sposobów na utrudnienie komunikacji jest zastosowanie skomplikowanych czcionek: Rysunek brak Podczas prezentowania informacji przeznaczonej do odczytania przez użytkowników, zawsze należy wybierać czytelne czcionki. Pamiętaj, że użytkownik będzie czytać tekst wyświetlony na ekranie monitora, a dopóki rozdzielczość monitorów komputerowych będzie mniejsza od rozdzielczości papieru, czytanie z ekranu będzie średnio przyjemnym zadaniem. Ogólnie, w projekcie tekstu nie powinno się stosować więcej niż dwóch czcionek: Rysunek brak Jeśli tekst zapisany jest z wykorzystaniem kilku czcionek, witryna wygląda niespójnie i, chyba że projekt jest perfekcyjnie wykonany, sprawia wrażenie amatorskiej. Wyjątkiem od tej Rozdział 1-29
reguły byłoby ograniczone zastosowanie dodatkowej czcionki do przedstawienia określonego rodzaju informacji, na przykład kodu źródłowego. Dopóki tekst jest łatwy do odczytania, do nagłówków możesz wybrać bardziej dekoracyjną czcionkę od tej zastosowanej w głównym tekście. Ogólnie mówiąc czcionka użyta dla głównego tekstu powinna być tak prosta i czytelna, jak to tylko możliwe. Unikaj czcionek szeryfowych, dekoracyjnych i kursyw. Czcionki szeryfowe i kursywa są na ekranie monitora mało czytelne. Poniżej zamieściliśmy kilka wskazówek, które pomogą ci przy formatowaniu tekstu. Uważnie stosuj justowanie tekstu. Oprócz nagłówków i wtrąceń, główny tekst powinien być wyrównany do lewej lub justowany. Nigdy nie stosuj wyśrodkowanie dla długich fragmentów tekstu i unikaj tekstu wyrównanego do prawej strony, ponieważ taki układ utrudnia użytkownikowi przejście do następnego wiersza podczas czytania. Rysunek brak Zauważ, że zarówno wyrównanie do lewej, jak i justyfikacja mogą spowodować problemy. We fragmencie tekstu wyrównanym do lewej, który został przedstawiony na rysunku powyżej, pierwszy linia wygląda, jakby została przycięta. Podobny błąd widać na rysunku obok przedstawiającym wyjustowany fragment tekstu, w którym odstępy pomiędzy wyrazami w jednym wierszu są zbyt duże. Można łatwo przezwyciężyć takie problemy poprzez dopasowanie odstępów pomiędzy znakami w czcionce zastosowanej w problematycznej linijce (tracking) lub poprzez podzielenie długiego wyrazu do następnej linijki. Staraj się nie tworzyć zbyt szerokich pól tekstowych: Rysunek brak Takie rozmieszczenie powoduje, że użytkownik jest zmuszony do przesuwania wzroku przez dłuższy czas do odczytania tekstu. Wydłużony ruch wymaga większej koncentracji i utrudnia użytkownikowi przechodzenie do kolejnej linijki tekstu. Ponadto szybko męczy oczy, co powoduje, że czytelnikowi trudniej jest przyswoić treść. Jeśli musisz umieścić tekst w większym polu, najlepiej podzielić go na dwie kolumny. Nie przysłaniaj istotnego tekstu, którego czytelnik ma przyswoić. Poprzez zastosowanie kolorów tła zbliżonych do koloru tekstu lub drażliwie kontrastujących z nim zmniejszasz czytelność tekstu: Rysunek KONTRAST TESKT/TŁO
brak
Dla przypomnienia: taka etykietka obrazkowa stanowi odniesienie do kolorowych obrazków umieszczonych na płycie CD-ROM dołączonej do książki. Pamiętaj, że na ekranie monitora czasami trudno przeczytać nawet wyraźny tekst. Zazwyczaj o wiele bardziej czytelny jest ciemny tekst na białym tle, niż jasny tekst na ciemnym tle.
Spójność: narzędzie użyteczności Interfejsy użytkownika typu Windows czy Macintosh oparte są na standardowych rozwiązaniach. Oznacza to, że, na przykład, jeden przycisk w jednej części systemu Rozdział 1-30
operacyjnego (SO) stanowi „klon” innych przycisków w pozostałym obszarze SO. Użytkownik rozpozna i zrozumie działanie przycisków w całym SO, ponieważ ich wygląd i funkcjonowanie są zbliżone. Spójność jest jednoczącą zasadą, na której oparte są standardy graficznego interfejsu użytkownika (GIU). Przeciętny internauta obeznany jest ze standardami interfejsu, na jakich bazują systemy operacyjne dostępne na jego komputerze, a także na jakich są oparte programy i znane mu witryny internetowe. Aplikacje przeznaczone dla danego SO zazwyczaj wykorzystują te same standardy GIU. Wszystkie przyciski i ikony, na jakie można kliknąć są zaprojektowane w sposób odpowiadający standardowemu formatowi rozpoznawalnemu i dzięki temu łatwo zrozumiałemu przez użytkowników. Dzięki zastosowaniu standardów GIU użytkownicy nie muszą uczyć się nowych sposobów interakcji przy każdorazowym użyciu nowego programu czy odwiedzeniu witryny internetowej. Wiesz dobrze, jak to jest, jeśli jesteś użytkownikiem peceta i nagle masz do czynienia z interfejsem Macintosha (lub odwrotnie) — prawie słyszysz trybiki w twoim mózgu, gdy próbujesz dopasować się do nowego systemu, przesunąć mysz w odpowiednie miejsce i wcisnąć właściwe przyciski. Podczas projektowania elementów interfejsu użytkownika takich jak paski przewijania, przyciski i okna, ustanawiasz w ten sposób łańcuch metafor. Przycisk w interfejsie nie jest prawdziwym przyciskiem, lecz po prostu jego graficzną reprezentacją. Lecz podświadomie wiesz, że po wciśnięciu przycisku na pewno coś się stanie. Dobra metafora powinna być zbudowana na zaznajomieniu. Aby metafory zastosowane w interfejsie użytkownika działały, użytkownik musi wiedzieć, do czego się one odnoszą, czyli muszą nawiązywać do czegoś, z czym użytkownik jest zaznajomiony. Powszechna metafora przycisku działa dlatego, że wszyscy rozumiemy funkcjonowanie obiektów z naszego otoczenia, które zawierają podobne przyciski. Przycisk graficzny zachowujący się jak prawdziwy przycisk po wciśnięciu go zwiększa efekt utworzony poprzez naśladowanie wyglądu prawdziwego przycisku. Na przykład, metaforę pokrętła głośności można oprzeć na prawdziwym pokrętle głośności w domowej wieży stereo. Reprezentacja Flasha pokrętła głośności będzie wyglądać i działać podobnie do fizycznego obiektu, którego większość ludzi zna i w taki sposób powstanie dobrze ustanowiona metafora interfejsu nawet zanim użytkownik odwiedzi witrynę internetową. Jednakże, sposób zastosowania metafory pokrętła głośności będzie się różnić od sposobu użycia prawdziwego pokrętła — użytkownik nie może chwycić wyświetlonego na stronie pokrętła i przekręcić go. Zastosowanie metafory powinno być intuicyjne i wykonalne — i to właśnie sprawia zazwyczaj najwięcej problemów. Oczywiście niektórych aspektów interakcji z komputerem nie można oprzeć na prawdziwych obiektach. Do rozwijanych menu, pasków przewijania i samego sposobu wybierania informacji wskaźnikiem myszy przywykliśmy dzięki ich ciągłemu zastosowaniu w wielu aplikacjach. Ponieważ elementy te zawsze były reprezentowane w prawie identyczny sposób, ludzie przyzwyczaili się do stosowania ich podobnie jak do użycia pokrętła głośności w wieży stereo. Ustanowienie metafory oznacza zapoznanie użytkownika z elementem interfejsu i przyzwyczajenie go do stosowania tego elementu. Użytkownik, zanim przyzwyczai się do sposobu jego działania, będzie musiał kilkakrotnie użyć nowy element interfejsu. Podczas tworzenia metafor interfejsu użytkownika należy odnieść się do wiedzy, jaką użytkownik już dysponuje. Po ustanowieniu metafory interfejsu, użytkownik będzie pewien, że wszystko już ma pod kontrolą — będzie już wiedział, co się stanie po wciśnięciu danego przycisku, jak również jak może powrócić do miejsca, w którym zaczął. Przy każdorazowym wprowadzeniu i próbie ustanowienia nowej metafory interfejsu opóźniasz użycie witryny internetowej przez użytkownika: użytkownik musi zatrzymać się na chwilę, aby zorientować się, w jaki sposób nowy element działa. Na pewno nie chcesz zmuszać użytkowników do spędzania czasu na nauce korzystania z twojej witryny internetowej, podobnie jak sami użytkownicy, którzy wolą
Rozdział 1-31
wykorzystać ten czas na zwiedzenie tysiąca innych witryn, zamiast twojej. Jeśli użytkownik w ciągu około 10 sekund nie zorientuje się, jak należy korzystać z twojej witryny, zniecierpliwi się i prędko przejdzie na inną witrynę, z którą obsługą już się zaznajomił. Podczas projektowania i tworzenia prototypu witryny internetowej zastanów się nad różnymi rodzajami interakcji użytkownika, jakich będziesz potrzebować w witrynie. Liczbę zastosowanych metafor zredukuj do absolutnego minimum, abyś nie musiał uczyć użytkownika obsługi nowych elementów interfejsu. Jeśli dodasz niezwykle skomplikowany element łączący w sobie kilka funkcji, to chociaż będzie on wyglądać niezwykle pomysłowo i sprytnie zwiększy on tylko ilość drugorzędnych informacji, które będzie musiał przyswoić użytkownik zanim przejdzie do prawdziwej zawartości witryny. Stosuj elementy interfejsu w ogólnie przyjęty sposób. Jeśli używasz odmian głównych interfejsów użytkownika opartych na ogólnie przyjętych standardach, jak na przykład Windows czy Macintosh, pamiętaj, aby używać je poprawnie. Gdy ty, jako projektant witryny internetowej, stosujesz różne wersje powszechnie znanych elementów interfejsu powinieneś je używać w taki sam sposób, w jaki stosowane są w ich „czystej”, oryginalnej formie. Znaczne odchylenia od tej formy albo przypominają wprowadzenie nowego elementu interfejsu, lub powodują niewłaściwe zastosowanie standardowego elementu, co wywrze znaczny wpływ na doświadczenie użytkownika. Przy projektowaniu testu wielokrotnego wyboru prawdopodobnie zastosujesz przyciski opcji lub pola wyboru. Elementy te są znane zarówno z interfejsu systemu Windows jak i Macintosh i posiadają podobną (lecz nie identyczną) funkcję i znaczenie. Przyciski opcji umożliwiają użytkownikowi wybór tylko jednej z podanych możliwości: po dokonaniu wyboru przez użytkownika wciśnięty zostaje tylko jeden, wybrany przycisk, natomiast pola wyboru umożliwiają użytkownikowi wybór z listy kilku opcji jednocześnie. Jak widać, przyciski opcji i pola wyboru różnią się od siebie działaniem i złe zastosowanie tych elementów zniszczyłoby ustanowione standardy myląc użytkownika i psując użyteczność testu.
Widoczne elementy projektu Po omówieniu elementów związanych z użyteczną witryny internetowej i z osoba użytkownika w tej części rozdziału skoncentrujemy się na innych aspektach procesu tworzenia witryny. Chociaż nie będziemy się tak często odnosić do zagadnienia użyteczności, jak do tej pory, nie należy o nim zapominać i, jako projektant witryn internetowych, powinieneś pamiętać, że zawsze przekazujesz zdefiniowaną wiadomość twojej witryny każdej osobie, która ją ogłada. W tej części przedstawię kilka moich własnych opinii o procesie projektowania i omówię zagadnienia uznane przeze mnie za kamień węgielny tego procesu. Metody zamieszczone w tej części rozdziału oparte są na moim własnym doświadczeniu jako projektanta witryn internetowych, a także na różnorodnych teoretycznych źródłach, dlatego też przedstawiają one niejednorodne podejście do procesu projektowania. Mogę jedynie wskazać, które metody mnie najbardziej odpowiadają i liczyć, że przekazane ci rady okażą się użyteczne i zachęcą się do tworzenia twoich własnych procesów twórczych, z których funkcjonowania będziesz zadowolony.
Twórczość przez ograniczenie Bez względu na medium, na jakim pracuje, zadaniem projektanta jest wyprodukowanie jak najbardziej twórczego rezultatu, mimo ograniczeń danego programu, czy też ograniczeń czasowych. Rozdział 1-32
Pomyśl o zabawie dzieci — garstka dzieciaków bawi się w „żołnierzy” w parku. Może spotkały się zaraz po szkole i żadne z nich nie wzięło ze sobą zabawkowych pistoletów, lecz to przecież żaden problem. Niektóre używają patyka, inne strzelają tylko palcami. Tak na dobrą sprawę, jest to całkiem twórcze. Te dzieciaki maksymalnie wykorzystują sytuację przy pomocy jedynie, w najlepszym przypadku, patyka jako zewnętrznego narzędzia. Aby powstała struktura gry musiały ustalić pewne zasady, jak na przykład: „gdy cię trafią, nie ruszaj się i policz do dziesięciu”, lub „ci tutaj są dobrzy, a tamci źli”, albo „to drzewo będzie naszą bazą”. Wiedzą, że jeśli ktoś będzie oszukiwać, to cała gra straci na autentyczności i, po złamaniu ustalonych reguł, nie będzie już zabawna. Pamiętasz, jak fatalnie się czułeś jako dzieciak, gdy ktoś popsuł grę? W świecie, w którym napinamy teraz nasze twórcze mięśnie, czyli w Sieci, istnieje scenariusz, w którym wszystko intelektualnie jest dopuszczalne, lecz wiele rzeczy jest technicznie zakazanych. Takie kwestie jak prędkość połączenia, moc przetwarzania, rozmiar ekranu, umiejętności użytkownika i klienci stanowią ograniczenia, w obrębie których projektant witryn internetowych zmuszony jest pracować, gdy stara się w twórczy sposób przedstawić i przekazać swoją wiadomość. Jednakże, zamiast postrzegać tego typu ograniczenia jako przeszkody ograniczające naszą pracę, jako projektanci powinniśmy traktować je raczej jak granice, które prowadzą i rzucają wyzwanie naszym twórczym umysłom. Jeśli grupa szkolnych dzieciaków potrafi stworzyć całą wirtualną rzeczywistość przy pomocy kilku patyków my, profesjonalni projektanci, powinniśmy być w większym stopniu zdolni do przezwyciężenia ograniczeń narzuconych nam przez Sieć. Wierzę, że ograniczenia te w rzeczywistości wspomagają postęp i rozwój procesu tworzenia. Wykwalifikowany projektant może uznać ograniczenia za irytujące i hamujące rozwój, lecz nowicjuszowi często trudno jest wymyślić cokolwiek interesującego, gdy klient pozostawia mu absolutnie wolną rękę i nie stawia żadnych warunków. Projektowanie polega z natury na rozwiązywaniu problemów — jak już wspomnieliśmy, zadaniem projektanta jest przekazania widzowi wiadomości klienta. Granice narzucone ci przez medium, w którym pracujesz i otrzymane przez ciebie wytyczne pomogą ci w sformułowaniu pomysłów i w wykonaniu poprawnie skonstruowanego projektu odpowiadającego wymogom zleceniodawcy. Aby przyzwyczaić cię do pracy w obrębie tego typu granic wypróbuj poniższe ćwiczenie. Projektowanie na żywo
Przygotuj dla siebie kilka ćwiczeń z zakresu komunikacji graficznej, w których masz przekazać bardzo prostą wiadomość postępując zgodnie z zestawem zasad. Na przykład, w witrynie projektu mają zostać przedstawione i skontrastowane ze sobą słowa „construction” i „deconstruction” (ang. konstrukcja i dekonstrukcja). Ja narzuciłem sobie takie ograniczenie, że mogę wykorzystać tylko jedną czcionkę i trzy kolory: czarny, biały i czerwony: Rysunek CONSTRUCTION/DECONSTRU brak CTION Pracuj szybko i na każdy projekt przeznacz maksymalnie pół godziny. Pamiętaj, że są to ćwiczenia i rezultaty nie muszą być w pełni dopracowanymi profesjonalnymi rozwiązaniami. Poniżej zamieściłem ogólne reguły, jakich przestrzegam w tego typu ćwiczeniu. 1. Zdefiniuj wiadomość Wybierz bardzo prostą wiadomość, powiedzmy jedno powiedzenie lub jedno słowo, jak na przykład „Aby wiosna była zawsze”, lub „Pokój”. Nieważne, co wybierzesz, lecz pamiętaj: im bardziej subtelna jest wiadomość, tym trudniejsze będzie zadanie. Możesz rozpocząć od wyboru takich słów jak „zimno”, „ciepło”, „miłość” czy
Rozdział 1-33
2.
3.
4.
5.
„gniew”, następnie zapisz nastroje, kolory, uczucia, ludzie i tak dalej, wszystkie rzeczy jakie kojarzysz z wybranym słowem. Nie rozważaj docelowej publiczności W tym ćwiczeniu nie musisz zastanawiać się, do kogo skierowana jest wiadomość, ponieważ ty jesteś publicznością docelową. Wystarczy abyś przekazał wiadomość w najbardziej dla ciebie przekonywujący sposób. Ty ustanawiasz reguły Zapisz prosty zestaw reguł, jak na przykład: zastosuj jedną czcionkę, dwa kolory i wyłącznie kółka”, lub „zastosuj ukośne linie, kwadraty, szarości i tylko dwa kolory: czerwony i fioletowy”. Postaraj się spisać kilka zestawów reguł dla tej samej wiadomości. Twórz Rozpocznij tworzenie projektu za pomocą zwykle stosowanych przez ciebie technik i zwyczajów twórczych. Postępuj zgodnie z zapisanymi przez ciebie zasadami i staraj się być jak najbardziej innowacyjny bez przekraczania przygotowanych dla siebie granic. Za każdym razem, gdy zmuszony jesteś dokonać jakiegoś wyboru poszukaj odpowiedzi w zestawie reguł. Pracuj jak najszybciej: nie należy zastanawiać się nad danym problemem zbyt długo, gdyż w zawodzie nie będziesz mógł sobie pozwolić na taki luksus. Oceniaj Szybko wykonaj kilka projektów i oceń je, zwracaj uwagę na dobrze i źle wykonane elementy. Nie poprawiaj błędów, lecz rozpocznij pracę nad nowym projektem, pamiętając o popełnionych przez ciebie pomyłkach.
Szkicowanie, miniaturki i bazgroły Prawie każdy „prawdziwy” artysta wykonuje szkice przed przystąpieniem do tworzenia ostatecznej wersji obrazu. Niekoniecznie trzeba być świetnym artystą, aby czerpać korzyści z prostych technik szkicowania. Nie mów, że nie potrafisz rysować, gdyż nawet jeśli tak jest naprawdę, nie przeszkadza ci to w zastosowaniu tej techniki. Szkicowanie zawsze powinno stanowić pierwszą część graficznej linii produkcyjnej i proces ten powinien być jak najbardziej swobodny i otwarty. Szkicowanie jest cudownie nieograniczonym i nieformalnym procesem: wszystko jest dozwolone i nie ma rzeczy „technicznie niemożliwych”. Kluczem do szkicowania jest wyciągnięcie na światło dzienne twórczych pomysłów ukrytych w różnych zakamarkach umysłu. Nieważne, że to, co rysujesz nie przypomina niczego konkretnego, nie musi to być „wytworne” dzieło sztuki i nie musi być sensowne. Ważne jest to, aby szkicowanie pobudzało twoje soki twórcze. Nie ograniczaj się do przestrzegania praw fizyki, konwencji czy ustalonych graficznych standardów. Rozpocznij z pełnym rozmachem, a dopiero później narzuć pewne ograniczenia i spróbuj zrealizować swoje bazgroły. Wszystko, czego dowiedziałeś się o projekcie powinno posłużyć ci jako dyskretne źródło inspiracji, a nie źródło „obawy o sukces”. Po zakończeniu wstępnego szkicowania możesz powrócić do zastanawiania się nad celami, terminami i oczekiwaniami. W początkowej fazie procesu szkicowania nie powinieneś zastanawiać się, że masz zaprojektować witrynę internetowej. Ostateczny cel może być niewidoczny, a nawet zapomniany. Im bardziej wyrwiesz się poza ograniczenia i terminy, tym swobodniejszy i lepszy będzie efekt twojego szkicowania.
Szkicowanie Efektywny proces szkicowania składa się z kilku etapów, które powinny być przestrzegane cierpliwie i dokładnie. Poświęć każdej fazie wystarczająco dużo czasu i uwagi. Rozdział 1-34
1. Inspiracja Zapoznaj się z materiałem dostarczonym przez zleceniodawcę, przejrzyj notatki instruktażowe, odwiedź witryny internetowe podobnych klientów, a także istniejącą witrynę twojego klienta (jeśli taka jest). Warto również spędzić stosunkowo dużo czasu na oglądaniu witryn internetowych, które nie mają nic wspólnego z projektem. Zapisz rzeczy, jakie cię inspirują. 2. Rozgrzewka Jeśli twój komputer jest włączony, to go wyłącz. Wiesz pewnie jak to jest, gdy w trakcie rozmowy przez telefon nagle zauważasz, że bazgrzesz w najlepsze po papierze. Weź coś do pisania, czystą kartkę papieru i zacznij rysować, aby wkroczyć w ten stan umysłu, jak podczas rozmowy telefonicznej. Możesz rysować nie konkretne bazgroły po całej kartce. Nie staraj się za mocno myśleć. Schowaj racjonalną część mózgu w szufladzie i zajmij się rysowaniem szczegółów i większym obrazkiem. Rysunek brak
3. Szkicuj Wykonaj graficzne „notatki” wszystkich pomysłów, jakie przyjdą ci do głowy. Szczegóły elementów nawigacyjnych, tła, przejścia lub kształty niekoniecznie musza działać — wszystkie te elementy powinny znaleźć się na papierze w przypadkowej kolejności. Nie martwe się zbytnio ogólnym układem witryny — spędź więcej czasu na rysowaniu poszczególnych elementów i ich szczegółów, a także na sposobie ich łączenia. 4. Oceń Gdy już zgromadziłeś kilka różnych szkiców przejrzyj je po kolei, oceń i zapamiętaj najlepsze pomysły. Czerwonym piskiem lub markerem zaznacz elementy szkicu, które ci się podobają najbardziej, które uważasz za użyteczne czy inspirujące. Nie wyrzucaj żadnego ze szkiców, lecz przechowuj je wszystkie w teczce projektu. Podpisz się na każdym z nich, włącznie z podaniem daty i nazwy projektu. 5. Popraw Po wybraniu kluczowych rysunków i szczegółów ponownie je przeanalizuj, przemyśl, w razie potrzeby wykonaj kilka technicznych szkiców lub zrób notatki o sposobie zastosowania tych pomysłów we Flashu czy w języku HTML. Kontynuuj aż powstanie stosunkowo jasno obrazek początków witryny. 6. Powtórz kroki od 3 do 5 Powtórz ten proces tyle razy, ile będzie to według ciebie potrzebne do wydobycia z niego nowych pomysłów. Jeśli już nic nowego nie przyjdzie ci do głowy, nie myśl dalej, gdyż i tak zainwestowałeś tutaj wystarczająco dużo czasu i przygotuj się do rozpracowania pomysłów, które nie pasują do otrzymanych przez ciebie instrukcji czy po prostu nie będzie można ich zastosować. Gdy już wszystko wyciągniesz z tego procesu, co tylko będzie możliwe, zastanów się, który pomysł wykorzystasz w projekcie witryny.
Kompozycja Sposób skomponowania obrazka w znacznym stopniu przyczynia się do efektywnego przekazania jego wiadomości. Poprawna kompozycja poprowadzi oko widza po wcześniej
Rozdział 1-35
określonej ścieżce. Każdy obrazek lub grafika, jaką widzimy wokół nas zawiera wbudowana kompozycję, która stanowi jej podstawową ekspresję. Poniżej wszystkich warstw koloru, techniki i wyrazu, obrazek w dużej mierze opiera się na własnej kompozycji. Kompozycję można traktować jak sposób na wykonanie interesującego i przyciągającego uwagę pola obrazka, a także jako metodę na podkreślenie istotnych elementów. Dobra kompozycja kładzie nacisk na przekazywaną wiadomość i kieruje uwagę widza na najbardziej odpowiednie części obrazka. Wybrana przez ciebie kompozycja wywrze wpływ na nastrój witryny, dlatego też musi być odpowiednia dla docelowej publiczności. Na przykład, witryna z grami dla dzieci będzie skomponowana w bardziej dynamicznym i gęstszym stylu niż dla ekskluzywnego sklepu. We Flashu miejscem przeznaczonym do kompozycji obrazka jest scena. Format, czyli aspekt wybrany przez ciebie wpływa z góry znaczną część kompozycji. Skoncentrujmy się teraz na elementach, które powinieneś wziąć pod uwagę podczas komponowania zawartości sceny, filmu Flasha i całej witryny internetowej.
Elementy kompozycji Kompozycja całego pola obrazka składa się z elementów kompozycyjnych. Elementy te i ich zastosowanie tworzy podstawy pola obrazka. Poniżej opisaliśmy kilka ważnych elementów — z wszystkimi powinieneś poeksperymentować w twoim zaufanym szkicowniku. Pole obrazka Rysunek brak Pole obrazka jest to obszar, którego w całości możesz zapełnić grafiką. W terminologii Flasha jest to scena, a w przypadku czystej strony HTML będzie to całe okno przeglądarki. Linie Rysunek brak Wszystkie obrazki zawierają dużą liczbę linii, widocznych (czyli narysowanych i przetworzonych) lub niewidocznych (na przykład sugerowanych obszarami koloru czy pustą przestrzenią). Linie te przecinają pole obrazka prowadząc oko widza i narzucając bądź napięcie i konflikt, bądź równowagę i harmonię. Linie kompozycji stanowią zarówno granice pomiędzy różnymi polami, jak i wskaźniki, lub „autostrady dla oka” wzdłuż których oko widza ma podróżować. Pola i obszary Rysunek brak Obrazek pokryty jest kolorowymi lub zacienionymi polami i obszarami. Rozmieszczenie i kształt tych pól tworzy tło, czyli dolną warstwę obrazka. Pusty obszar wokół tych pól nosi nazwę przestrzeni negatywnej i jest równie istotna jak same pola, dlatego też powinna być wzięta pod uwagę w procesie projektowania.
Rozdział 1-36
Kształty, napięcie i kontrast Rysunek brak Obrazek często obejmuje różne rodzaje kontrastów, które wszystkie wpływają na ogólny klimat kompozycji. Różnice pomiędzy prostymi i krzywymi liniami, kwadratowymi i kolistymi kształtami, jasnymi i ciemnymi obszarami i różnorodnymi sekcjami kolorystycznymi tworzą kontrasty, za pomocą których obrazek można wzbogacić uczuciami. Na środkowym obrazku powyżej za pomocą kontrastu opisany został rozmiar, napięcie, kierunek i konflikt. Duży statek wydaje się przerażający dzięki kontrastowi rozmiaru pomiędzy nim i mniejszą łódeczką. Napięcie jest blisko związane z kontrastem i zwiększa organiczny i dramatyczny klimat kompozycji. Napięcie wzrasta w polu pomiędzy dwoma kontrastującymi obiektami, wzdłuż krzywej linii, lub wówczas, gdy dwa silnie kontrastujące ze sobą kolory umieszczone są w sposób sugerujący konflikt. Dynamika Rysunek brak Dodając dynamikę do kompozycji stwarzasz wrażenie ruchu, prędkości i kierunku. Wrażenia te tworzy się głównie za pomocą linii, a ich styl określa rodzaj dynamiki. Gładkie wirujące linie tworzą wrażenie delikatnej płynności, podczas gdy proste, czasami zbiegające się linie dają wrażenie agresywnego, bezpośredniego ruchu. Równowaga Rysunek brak Dzięki równowadze wykonasz poprawną kompozycję. Równowaga wywodzi się z symetrii, lecz nie powinna być rozumiana wyłącznie jako symetria. Równowaga związana jest z równym rozmieszczaniem wizualnego ciężaru na obrazku. Duże ciężkie pole po jednej stronie obrazka powinno zostać zrównoważone może niewielkim jasnym elementem po drugiej. Harmonia Rysunek brak Zamiast napięcia i dynamiki możesz dodać do swojej kompozycji harmonię. Wrażenie takie tworzy się poprzez zastosowanie gładkich płynnych linii i przestrzennego układu. Pomyśl o błękitnych przestworzach z polami poniżej, lub kolistej polany w lesie w słoneczny dzień. Unikaj agresywnych kontrastów koloru czy rozmiaru, jak również szybkiego ruchu. Kolory Rysunek KOLOR W KOMPOZYCJI Rozdział 1-37
brak
Kolory mogą akcentować lub zminimalizować wszystkie elementy kompozycyjne powyżej opisane. Wybór koloru możesz przyczynić się do utworzenia napięcia lub harmonii, równowagi lub agresji. Zastosowanie ciepłych lub zimnych kolorów, na przykład, możesz mniej lub bardziej uwydatnić poszczególne części obrazka w kompozycji. Na powyższym rysunku kolor został zastosowany jako narzędzie kompozycje w celu dodania kontrastu pomiędzy dużym obszarem nieba i małym latawcem. Czerwony kolor latawca nadaje obrazkowi również równowagę, gdyż działa jak przeciwwaga dla obszaru niebieskiego. Duże obszary zielonego i niebieskiego u góry i dołu obrazka nadają kompozycji wrażenie spokoju. W bardziej szczegółowy sposób zajmiemy się kolorami w dalszej części książki.
Kierunek czytania Moje postrzeganie kompozycji oparte jest na sposobie czytania tekstu i obrazków. Zostałem wychowany w kulturze, w której tekst czyta się od lewej do prawej strony. W innych kulturach przyjęte są inne zasady czytania, na przykład od prawej do lewej, czy od góry do dołu i dlatego też przedstawiciele tych kultur mają inny sposób odczytywania obrazków. Chociaż może to ciebie dotyczyć bardzo rzadko, warto o tym pamiętać podczas projektowania, ponieważ możesz zastosować te kulturowe zwyczaje do osiągnięcia różnych efektów. Historyjki typu komiks w gazecie nie miałby sensu, gdy czytane od tyłu, a nawet czytając od tyłu proste kompozycje można zmienić ich atmosferę. Czytając od lewej do prawej obrazek ten ma dla mnie takie znaczenie: Mężczyzna płynie > Duży kształt > Duży rekin! Rysunek brak Jeśli odwrócę obrazek... Rysunek brak ...i przeczytam go ponownie zrozumiem go w taki sposób: Oko > Rekin > Mały gość próbujący się ratować! Na tym obrazku dwie wersje nie różnią się zbytnio między sobą, lecz należy pamiętać o takiej różnicy i brać ją na poważnie.
Szkic kompozycyjny Przydatną techniką do tworzenia lepszych kompozycji jest szkic kompozycyjny. Różnice pomiędzy szkicem kompozycyjnym i ogólnym procesem szkicowania omówionym powyżej polega na tym, że gdy szkicowanie koncentruje się na poszczególnych obrazkach projektu, szkic kompozycyjny kładzie nacisk na ogólny wygląd obrazka i sposób połączenia poszczególnych elementów. Pracując na stosunkowo dużym arkuszu papieru z markerem lub miękkim, grubym ołówkiem naszkicuj kilka układów witryny obejmujących wszystkie elementy, jakie musisz umieścić w kompozycji. Rysunek brak Rozdział 1-38
Podobnie jak w opisanym wcześniej procesie szkicowania postaraj się uwolnić wszystkie myśli związane z poszczególnymi elementami w witrynie, nad którą pracujesz. Spróbuj tym razem skoncentrować się na przekazaniu nastroju — wyobraź sobie emocjonalną zawartość wiadomości. Na przykład, jeśli pracujesz nad wprowadzeniem do witryny poświęconej horrorom, zastanów się, co oznacza horror: może jest to chaos, dramat, napięcie i konflikt. Spróbuj wyobrazić sobie obrazki zawierające te elementy, a następnie zastosuj je w kompozycji. Na tym etapie powinieneś już wybrać definitywnie format witryny. Podobnie jak podczas procesu szkicowania, pracuj szybko: w ciągu 30 minut wykonaj dużo niewielkich szkiców, poświęcając na każdy z nich maksymalnie 10 sekund. Nie staraj się za bardzo analizować, tylko pomyśl o rozmieszczeniu oddzielnych elementów obrazka, takich jak pasek nawigacji czy poszczególne przyciski, postara się potraktować obrazek jako całość. W ten sposób wszystkie części obrazka rozpracujesz jako całość zamiast kończyć poszczególne sekcje, a następnie modyfikować je, aby pomieściły jeszcze inne elementy. Przejrzyj szkice i wybierz te, które będziesz chciał wykorzystać. Następnie ponownie je przeanalizuj i stopniowo twój układ będzie przekształcał się w nadającą się do wykorzystania kompozycję.
Schematy kolorów Do opisywania i omawiania kolorów stosujemy wiele subiektywnych terminów, gdyż, mimo istnienia teorii koloru zastosowanie kolorów wciąż jest niezwykle subiektywnym zagadnieniem. Każdy człowiek postrzega kolory inaczej i, w zależności od tego, jak są one zastosowane w projekcie, kombinacje kolorów mogą wyglądać na krzykliwe, bądź czyste i przejrzyste. Bardzo często zastosowanie danego koloru jest po prostu kwestią gustu. Jednakże, wybrane przez ciebie elementy we wcześniejszych etapach projektowania wywrą silny wpływ na kolory, jakie zastosujesz w końcowym projekcie. Zdefiniowana wiadomość i docelowa publiczność określa nastrój i klimat witryny, lecz dobrane prze ciebie kolory również wpłyną na klimat witryny i wywołane prze nią odczucia. Schemat kolorów musi zostać dopasowany do kompozycji. I w tym przypadku pomyśl o swojej docelowej publiczności, zdefiniowanej wiadomości i wybranej kompozycji. Dynamiczna czy zrelaksowana? Młoda czy starsza? Chłopcy czy dziewczęta? Postępuj zgodnie i czerp inspirację z decyzji dokonanych przez ciebie w poprzednich etapach procesu. Trzema najważniejszymi właściwościami kolorów są: Kolor lub barwa Nazwa koloru, czyli definiująca go własność. Wartość i jasność Wartość jasności, czyli zawartość jasności w kolorze. Intensywność czyli nasycenie Stopień czystości koloru w stosunku do „maksimum” koloru. Podczas planowania schematu kolorów dla witryny powinieneś wziąć pod uwagę kilka zasad. Omówimy je poniżej, rozpoczynając od kontrastu koloru.
Rozdział 1-39
Kontrast kolorów Poprzez inteligentne skontrastowanie kolorów możesz uzyskać niezwykle efektywne rezultaty. Gdy zwyczajnie umieszczamy różne kolory obok siebie, kontrast powstaje jako wynik różnych barw danego koloru. Rysunek KONTRAST KOLORÓW
brak
Kontrast jasne/ciemne Przy zastosowaniu tej samej barwy, czyli tego samego koloru, lecz zmienimy jasność poszczególnych sekcji powstanie w ten sposób kontrast jasne/ciemne. Rysunek KONTRAST JASNE/CIEMNE
brak
Artyści wykorzystujący techniki tradycyjne stosują ten rodzaj kontrastu w drzeworycie, a także rysunkach węglem i ołówkiem. Kontrast zimne/ciepłe Jesteśmy uwarunkowani do kojarzenia kolorów z różnymi temperaturami i możemy stosować kontrast ciepłych i zimnych kolorów do uzyskania ciekawych efektów. Rysunek KONTRAST brak TEMPERATURY Kontrast temperatury związany jest z intuicyjną wiedzą, jaką mamy o kurkach w kranie — po odkręceniu tego poleci zimna woda, a po odkręceniu tego sparzysz się. Czerwonopomarańczowy jest najcieplejszym kolorem, a niebiesko-zielony najzimniejszym. Zastosowanie koloru w pokoju, na przykład, może wpłynąć na psychiczne postrzeganie fizycznego odczuwania temperatury. Zauważ, że kolory na tej próbce charakteryzują się jednakową jasnością — jedynie zmienia się ich barwa. Kontrast dopełniający Kolory dopełniające są dokładnymi przeciwnościami i gdy stosowane razem tworzą zdecydowany kontrast. Rysunek brak KONTRAST KOLORÓW DOPEŁNIAJĄCY CH Wymieszane, kolory dopełniające łączą się tworząc neutralny kolor szaro-czarny. Zastosowanie kolorów dopełniających tworzy dramatyczne efekty i dodaje obrazkowi przejrzystość i równowagę. Poniżej wymieniliśmy pary kolorów dopełniających: • żółty i fioletowy, • żółtopomarańczowy i fioletowo-niebieski,
Rozdział 1-40
• • • •
pomarańczowy i niebieski, czerwono-pomarańczowy i niebiesko-zielony, czerwony i zielony, czerwono-fioletowy i żółto-zielony.
Kontrast jakości Poprzez zastosowanie tej samej barwy, lecz różnych poziomów nasycanie może powstać delikatny kontrast. Nasycenie oznacza intensywność koloru, 100% stanowi maksymalną barwę, a 0% szarość. Rysunek KONTRAST JAKOŚCI
brak
Kontrast ilościowy Dwa czynnik wpływają na działanie koloru: jasność koloru i obszar, jaki pokrywa kolor. Kontrast ilościowy jest harmonijną zależnością pomiędzy jasnością dwóch kolorów i rozmiarem obszaru przez nie pokrytego. Porównanie kolorów do neutralnej szarości ułatwi nam zrozumienie pojęcia jasności koloru. Żółty: 9, pomarańczowy: 8, czerwony: 6, fioletowy: 3, niebieski: 4 i zielony: 6. Rysunek KONTRAST ILOŚCIOWY
brak
Harmonijny obszar: stosunek rozmiaru pomiędzy żółtym i fioletowym na powyższym rysunku jest ¼: ¾, podczas gdy stosunek pomiędzy czerwonym i zielonym wynosi ½: ½.
Wybór schematu kolorów Określenie schematu kolorów zbliżone jest do przełożenia zdefiniowanej wiadomości na rodzaj „kolorowej melodii”. Wiadomość należy odzwierciedlić w kolorach witryny, a nastrój wiadomości powinien być podkreślony w wyborze kolorów — chociaż czasami wybór ten będzie ograniczony wymogami zleceniodawcy. Prawdopodobnie zostaniesz poinformowany o tym ograniczeniu przed rozpoczęciem pracy nad projektem i najlepiej potraktować to jako kolejną regułę, wokół której masz rozwinąć swoja kreatywność. Ogólnie mówiąc, w sprawie kolorów lepiej zawierzyć swojej intuicji. Jeśli tylko zaznajomiony jesteś z podstawami zastosowania kolorów i strukturą, o czy rozmawialiśmy przed chwilą, powinieneś dać sobie radę z wyborem efektywnego schematu kolorów. Oczywiście, my przedstawiliśmy tylko szkic, gdyż dostępnych jest wiele innych teorii i zagadnień praktycznych do omówienia na zajęciach plastycznych, a także wiele książek o teorii kolorów. Twoja intuicja wie o kolorach o wiele więcej, niż się spodziewasz. Twój intuicyjny mózg bezustannie interpretuje kolor na poziomie podświadomości i wie, na przykład, że czarne i żółte paski na tułowiu osy oznaczają niebezpieczeństwo w formie bólu. Mój sposób pracy z kolorami oparty jest w dużej mierze na intuicyjnym procesie, będącym wynikiem mojego wyszkolenia w projektowaniu i praktyki, praktyki i jeszcze raz praktyki: rzadko zastanawiam się, jakich kolorów użyję, bądź czy będą się one nadawać. Staram się nie myśleć zbyt intensywnie, lecz koncentruję się na patrzeniu. Staram się subiektywnie widzieć i zauważyć to, co działa poprawnie i to, co nie działa. Ta zdolność może dopełnić racjonalną analizę i planowanie kolorów. Rozdział 1-41
Jedną z najważniejszych rzeczy, jakich należy unikać i najpowszechniejszym błędem jest zastosowanie zbyt dużej liczby kolorów. Użycie wielu kolorów w jednym projekcie zawsze jest niezwykle trudnym zadaniem. Pamiętaj, że każdy kolor wysyła do mózgu użytkownika psychologiczną wiadomość: wiadomości te są nieświadomie przetwarzane na nastrój i odczucia, i jeśli w jednej chwili mózg otrzyma zbyt dużą liczbę różnych wiadomości użytkownik zdezorientuje się, nawet jeśli nie będzie wiedział dlaczego. Podobne problemy powstają, gdy próbujesz użyć kilka kontrastów opisanych wcześniej w jednym projekcie — i w tym przypadku wysyłasz zbyt wiele wiadomości do użytkownika i witryna utraci przejrzystość. Flash jest świetnym narzędziem do samego procesu doboru kolorów. Ja selekcję kolorów dla danej witryny zazwyczaj wykonuję we Flashu z wykorzystaniem tabletu graficznego, jak na przykład Wacom PenPartner. Poprzez rysowanie bezmyślnie we Flashu różnymi kolorami staram się zawęzić poszukiwany przeze mnie wygląd. I w tym przypadku staram się nie myśleć o tym zbyt intensywnie, lecz próbuje analizować moja reakcję na kolory i uczucia, jakie we mnie wzbudzają. Porównuję te wrażenia ze zdefiniowaną wiadomością, jaką mam do przekazania i docelową publicznością. Gdy już znajdę dobór kolorów, jaki chcę zastosować wykonuję z zastosowaniem ich „szkic ilościowy” we Flashu szkicując ilość każdego koloru, jaka powinna zostać zastosowana w projekcie: Rysunek SZKIC KOLORÓW WE FLASHU
brak
Ten szkic zawiera kilka wskazówek zastosowania kolorów, które wykorzystam podczas projektowania poszczególnych elementów witryny. Po pewnym czasie pracy z kolorami prawdopodobnie zdarza sobie sprawę, że posiadasz osobisty zestaw preferencji kolorystycznych. Nieświadomie komponujesz ulubioną paletę kolorów, którą regularnie stosujesz. Paleta ta nie tworzy się jako wynik intelektualnego procesu, lecz jako efekt ciągłej intuicyjnej pracy z kolorami. Jest to nieświadomie przyswojona rzecz i stosujesz ją zupełnie nieświadomie. Osobista paleta zawiera twoje ulubione kolory a także, te, które, według ciebie, świetnie się sprawdzają. Jesteś pewien tej palety i w pewien sposób wyraża ona część twojego osobistego stylu. Potencjalny problem polega tutaj na tym, że nie tylko jesteś pewny swojej palety, lecz również trudno ci oderwać od niej swoją kolorystyczną uwagę. Innymi słowy, osobista paleta może wkrótce stać się ograniczeniem w twoim twórczym rozwoju. Czasami warto poszukać nowych kolorów, aby odświeżyć twój zestaw narzędziowy kolorów. Czerp inspirację z otaczających cię obiektów: przyglądaj się drzewom, płytom chodnikowym, polom kukurydzy, samochodom, koszom na śmieci, skórze, hot dogom i wszystkiemu, na co rzucisz okiem i świadomie analizuj zawarte w nich kolory. Na przykład, patrząc na drzewo w letni dzień prawdopodobnie spodziewasz się, że liście będą zielone, lecz dopiero, gdy się dokładnie przyjrzysz, zobaczysz, że liście nie tylko składają się z odcieni zieleni, lecz również zawierając kolor żółty, pomarańczowy, niebieskawo-fioletowy i wiele pośrednich. Następnym razem, gdy utkwisz w korku przyjrzyj się dokładnie samochodowi stojącemu przed tobą i zwróć uwagę, jak promienie światła odbijają się od krzywych, katów, szkła i opon samochodu. Tego typu czynności są świetną metodą na zwiększenie twojej świadomości twoich własnych preferencji kolorystycznych. Im więcej wiesz o grupie kolorów składającej się na zieleń liści drzew, w tym większym stopniu polepszysz swoja wiedzę o odnawianiu i polepszaniu swojej osobistej palety. Mimo, że, jak już wspomniałem, wybór kolorów powinien być intuicyjnym procesem, odnowienie osobistej palety wymaga interwencji
Rozdział 1-42
intelektu. Musisz zdecydować się odnowić swoją paletę i musisz zdecydować się zastosować nowy kolor po raz pierwszy. Rozejrzyj się — świat jest pełen inspiracji!
Przykłady kolorów Skoro pokazałem ci już jak ja dobieram kolory, przedstawię ci teraz kilka projektów, w których je zastosowałem. Chaseace.com Rysunek WWW.CHASEACE. COM
brak
Jest to promocyjna witryna gry akcji na peceta w stylu retro-przygodowym. Gra jest szybko, wybuchowa, dlatego też witryna musi sygnalizować podobne odczucia, że słowami takimi jak: „akcja”, „agresja”, i „niebezpieczeństwo” wyłaniającymi się w początkowym etapie burzy mózgów. Moim pierwszorzędnym źródłem inspiracji były znaki ostrzegawcze i osy. Znaki ostrzegawcze sygnalizują niebezpieczeństwo w sposób zbliżony do sygnalizacji agresji przez osę. Dlatego też zastosowałem kolory czarny i żółty, a także czerwony i niebieski, z niewielkim dodatkiem zielonego, aby zrównoważyć kompozycję i z białymi polami, aby zwiększyć czytelność tekstu. Wszystkie te kolory są jasne i nie zamaskowane; kolorem dominującym jest żółty, a najrzadziej zastosowanym niebieski. W efekcie powstała bardzo „krzykliwa” witryna nie posiadająca określonego punktu centralnego. W niektórych okolicznościach zastosowanie kolorów sygnalizacyjnych w tle może doprowadzić do przesunięcia nacisku z aktualnej zawartości, co może spowodować dezorientację użytkownika, który nie będzie wiedział, co się właściwie dzieje. Jednakże w moim przypadku czułem, że nie ma to zbyt wielkiego znaczenia. Publiczności docelowa przywykła już do odwiedzania ciemnych undergroundowych witryn z grami z zupełnie czarnym tłem i mrugającym tekstem, więc ta witryna przyciągnie ich uwagę. Helpfish.com Rysunek WWW.HELPFISH. COM
brak
Helpfish.com jest kolejną witryną promującą, tym razem animowany film długometrażowy o nazwie „Help! I'm a Fish” (ang. Ratunku! Jestem rybą). Twórcy filmu włożyli wiele wysiłku we wstępne projekty i układ, które miały zdefiniować wygląd filmu i pokreślić jakość artystyczną i estetykę przedsięwzięcia. Wiadomością, jaką witryna ta miała przekazywać, była interpretacja wytwornego stylu filmu. Z powodu wizualnej prostoty filmu i tematu świata podwodnego wybrałem schemat kolorów oparty na niebieskim i jasnofioletowym. Kolory niebieskie zastosowałem w ich czystej formie, lecz dzięki zmianie nasycenia, o czym mówiłem wcześniej, utworzyłem różne intensywności ładnie ze sobą kontrastujące. Zastosowałem trzy różne tony fioletowego, każdy z inna jasnością tworząc w ten sposób kontrast jasny / ciemny. Małe kropeczki zielonej, pomarańczowej i czerwonawej barwy dodałem następnie, aby projekt nie wyglądał płasko i również w celu zrównoważenia niebieskiego i fioletowego. Uważam, że udało mi się wyrazić
Rozdział 1-43
estetyczna prostotę i właściwy dobór kolorów pokreślił zawartość witryny. A jaka jest twoja opinia? Petergrafik.dk Rysunek WWW.PETERGRAFI K.DK
brak
Petergrafik.dk jest moją osobistą witryną internetową, i, jak pewnie zauważyłeś, jest cała brązowa. W tworzeniu tej witryny w zasadzie to nie postępowałem zgodnie z moimi radami. Nie byłem pewien, co do zawartości czy wiadomości witryny — miała ona służyć po prostu jako ofertówka, o zupełnie innym wyglądzie i interesującej zawartości. Widoczny jest gładki kontrast kolorów od jasnobrązowego do czarnego z niewielkimi ilościami innych kolorów, takich jak żółty zastosowany na logo Chase Ace 2 i odrobina zielonego i pomarańczowego, natomiast tekst jest w kolorze białym, aby zwiększyć jego czytelność. Jestem zadowolony z końcowego efektu. Jest to zdecydowanie indywidualna witryna — nie widziałem jeszcze podobnej, która by w równym stopniu oparta była na kolorze brązowym. Witryna ta zdobyła kilka nagród i została pozytywnie oceniona w kilku magazynach. Muszę przyznać, że mimo wszystko zawiera ona wiele defektów użyteczności i dlatego też nie powinna być traktowana jako model dla omawianych wcześniej zagadnień. Pewnego dnia, gdy znajdę trochę czasu, ponaprawiam to wszystko...
Spójność po raz drugi Spójność zdefiniowaliśmy poprzednio jako czynnik zwiększający użyteczność. Jednakże, spójność może również przyczynić się do projektowania witryn. Zagadnienie to można uznać za kamień węgielny dobrego projektu i jeśli tylko jest spójność jest surowo przestrzegana, może z przyzwoitego projektu stworzyć dobry, następnie nawet go ulepszyć. Spójność jest jednoczącą zasadą projektu. Jednym z powodów, dla których umieściłem na początku rozdziału ćwiczenie z komunikacji graficznej była chęć pokazania metod pracy z zasadą spójności. W ćwiczeniu opisałem jak można pobudzić twórcze soki poprzez wybór prostej wiadomości i kilku nieskomplikowanych reguł, a następnie przestrzegać ich w trakcie tworzenia projektu. Aby uniknąć niespójnych projektów powinieneś przygotować dla siebie zestaw reguł projektowania, podobnych o tych opisanych we wspomnianym ćwiczeniu, lecz dostosowanych do twojego stylu i zwyczajów. Reguły stanowią podstawę spójności, a baza dla tych reguł skonstruowana jest na pomysłach, a jakich rozmawialiśmy w tym rozdziale. Definiowanie wiadomości, określenie publiczności docelowej, zastanowienie się nad użytecznością i prawidłowe zastosowanie kontrastów kolorystycznych są zagadnieniami, z którymi będziesz miał do czynienia w każdym projekcie. Dla wszystkich tych elementów powinieneś znaleźć pełne rozwiązania, a także powinieneś wykazać się precyzyjnym okiem w wyszukiwaniu szczegółów, aby zauważyć i poprawić wszystkie nawet najdrobniejsze odchylenia od twojego planu. Właśnie ta odrobina uwagi powoduje różnice w twoim projekcie, a zestaw reguł i technik wykorzystywanych przez ciebie pomoże ci w zachowaniu wyższego poziomu pracy. Na początku sprawdzenie i poprawienie każdego choćby najmniejszego szczegółu może być dla ciebie trudne, lecz po pewnym czasie nie zakończysz pracy nad projektem dopóki nie upewnisz się, że każdy jego element został sprawdzony. Poprzez trenowanie i przyzwyczajanie oka do wychwytywania szczegółów, w każdym projekcie będziesz dążyć do perfekcji. Rozdział 1-44
Spójność wiąże się z formą „obiektowego” myślenia, a myślenie w kategoriach obiektów ułatwia zastosowanie spójności w projektach. Oznacza to ograniczenie skoncentrowania się na pojedynczym elemencie, nad którym pracujesz, lecz myślenie ogólne o typie obiektu: „Do czego służą tego typu obiekty?”, „Jakie właściwości powinny mieć?”. Jeśli, zamiast zastanawiania się nad „tym fragmentem tekstu w górnym rogu tamtej strony” postarasz się pomyśleć o „obiekcie tekstowym”, łatwiej ci będzie zapamiętać i zastosować reguły zdefiniowane dla obiektu tekstu we wcześniejszej części rozdziału. Podobnie, poprzez myślenie o „obiekcie łącza” zamiast o „drugim łączu od góry” będziesz wiedział, co zrobić z każdym łączem na dowolnej stronie: wszystkie obiekty łącza, jakie wykonałeś do tej pory podsuną ci odpowiedź. Architektura Flasha nawet zachęca zastosowanie tego sposobu myślenia i projektowania: poprzez zaprojektowanie jednego przycisku i następnie wielokrotne użycie kopii tego obiektu możesz być pewien, że wygląd przycisku zachowa spójność w całej witrynie. Wygląd, nastrój i użyteczność witryny w dużej mierze zależy od kolorów, czcionek elementów interfejsu, wyglądu przycisków i łączy, a także rozmieszczenia różnych elementów. Jeśli na każdej stronie sposób postępowania z tymi elementami uwidacznia brak spójności, witryna straci swoją wyrazistość i użytkownik nie będzie w stanie odczytać wiadomość na stronie zawartej. Coś tak prostego jak umieszczenie łączy nawigacyjnych w tym samym miejscu na każdej stronie, na przykład, oznacza, że użytkownik zawsze będzie wiedział, gdzie należy ich szukać. Jeśli narzędzia do nawigacji umieszczone są w różnych miejscach w zależności od strony, użytkownik będzie musiał ich szukać za każdym razem, gdy chce przejść do następnej strony. Podobnie, zmiana rozmieszczenia nagłówka lub logo na stronach utrudni odszukanie tych elementów, podczas gdy zastosowanie jednego koloru tła na jednej stronie i innego na następnej może spowodować, że użytkownik pomyśli, że opuścił już zwiedzaną przez niego witrynę i przeszedł do następnej. Spójność sygnalizuje profesjonalizm i odpowiedzialność. Daje poczucie jedności pomiędzy różnymi częściami projektu i łączy je, dzięki czemu użytkownik zauważa powiązania pomiędzy nimi. Niespójność wywiera na użytkowniku dokładnie odwrotne wrażenie. W najgorszym przypadku oznacza zmianę wiadomości, publiczności docelowej i użyteczności witryny po każdym wybraniu nowej sekcji.
Profil graficzny Aby zapewnić spójność projektów i ułatwić sobie pracę możesz wykonać profil graficzny, czyli podręcznik projektowania, lub książkę z regułami, dla każdego projektu. W trakcie procesu przygotowawczego zdobędziesz wiele informacji o charakterze, wyglądzie twojego projektu i zawartej w nim wiadomości. Wiedza ta powinna być uporządkowana w taki sposób, abyś ty i twój klient mogli korzystać z niej w dalszej części procesu, a także w przyszłości. Jeśli nawykniesz do przygotowywania profilu graficznego na początku każdego procesu projektowania, w trakcie pracy będziesz mógł do niego dodawać elementy i uwagi. Profil graficzny zawiera pisemną i wizualną informację o graficznych regułach i elementach zastosowanych w danym projekcie. Dokument powinien być utworzony w taki sposób, aby inne osoby włącznie z tobą mogły go zrozumieć. Powinien on zawierać następujące pozycje: Kolory Kompletna lista zastosowanych kolorów, włącznie z próbkami kolorów, a także wartościami składowych kolorów RGB i Hex. Notuj sposób zastosowania kolorów, na przykład: „tło”, „ramy”, „cień”, „ozdoby”, i tak dalej.
Rozdział 1-45
Czcionki Lista wszystkich zastosowanych czcionek, włącznie z nazwą, nazwą pliku i platformą, próbką czcionki i informacją o rozmiarze, odstępach, kerningu i odległościach pomiędzy wierszami. Dołącz również uwagi odnośnie zastosowania, na przykład: „nagłówek”, „podnagłówek”, „zwykły”, i tak dalej. Logo Wszystkie zastosowane loga powinieneś zamieścić w dokumencie w ich końcowej formie. Zamieść uwagi o zastosowaniu logo, a także o kolorach użytych w logo. Podaj również nazwy plików zastosowanych logo i zachowaj oryginalny plik. Style Zapisz specjalne zastosowania stylów, czy specjalnie podejście do wyglądu projektu. Dołącz konkluzje odnośnie docelowej publiczności, opisz specjalne formaty obrazków i kompozycję, czy wskazówki o układzie zastosowane w projekcie. Wymiary Umieść wszystkie istne wymiary układu czy kompozycji, podobnie jak rozmiar filmów, obrazków, szerokość marginesów i inne istotne miary. Rozmieszczenie Obszary zablokowane w układzie strony również powinny stanowić część profilu. Przykładem mogą być specyficzne marginesy do umieszczenia logo. Zastosuj szkice kompozycyjne do zdefiniowania obszarów zablokowanych. Za i przeciw Dodaj przykłady wyjaśniające, co należy robić, a czego nie należy. Upewnij się, że „właściwe” rozwiązania są wyraźnie oddzielone od „niewłaściwych”. Profil graficzny warto wykonać we Flashu lub w formacie HTML, gdyż dzięki temu będziesz miał zachowane wskazówki w formacie, którego zastosujesz w projekcie, a poza tym będziesz mógł umieścić je w Internecie dla klienta lub kolegów.
Ulepszanie projektów Aby przejść od przeciętnego projektanta do dobrego projektanta, musisz dążyć do polepszania projektów. W tym celu warto szukać twórczego rozwoju i nowych wyzwań. Inspiracja i potrzeba parcia naprzód są elementami, uwydatniającymi różnicę. Prostą metodą do ulepszania projektów jest metoda drastyczna. Metoda drastyczna Komputery wykazują tendencję do wykładania się, co pewien czas, a gdy tak się dzieje ich użytkownicy często tracą znaczna część ich pracy i są zmuszeni do odtworzenia jej. Jeśli goni cię termin, sytuacja taka może być wielce irytująca, lecz może również przynieść korzyści twojemu procesowi twórczemu: czasami, gdy jesteś zmuszony do odtworzenia projektu od samego początku w bardzo krótkim przedziale czasu jest prawie pewne, że nowy projekt będzie lepszy od utraconego. Poprzez szybka pracę nad danym zagadnieniem, z którym jesteś już zaznajomiony, twoja nieświadoma część przejmie większą część procesu. Wykonywana przez ciebie praca stanie się wówczas jakby „pracą podrzędną”, w której nie zastanawiasz się zbytnio, co robisz. Świadoma, czyli logiczna część twojego mózgu będzie zajęta
Rozdział 1-46
przejmowaniem się bliskością ostatecznego terminu, frustracją spowodowaną utratą dnia pracy i wyzywaniem na administratora za to, co się stało. Twórcza część twojego mózgu, wspomagana zastrzykiem adrenaliny, będzie miała wolną rękę do wykonania całej roboty w spokoju. To naprawdę wspaniałe uczucie — naturalny odlot. Zawsze powinieneś być gotowy na usuniecie twojej najlepszej pracy i rozpoczęcie od początku. Trudno to zaakceptować i na pewno sytuacja taka może być bardzo frustrująca, lecz niemniej jednak, każdy projektant powinien nauczyć się, jak należy postąpić w takiej sytuacji. Wyrzucenie pracy nie oznacza usuniecie jej na stałe, lecz po prostu odłożenie jej na bok i rozpoczęcie od początku. Gdy stosujesz tą metodą, pamiętaj o zapisywaniu wykonanej pracy. Zachowanie wszystkich wykonanych przez ciebie projektów jest naprawdę dobrym pomysłem. Po każdorazowym ukończeniu projektu czy wykonaniu kilku szkiców oznacza je datą i nazwą projektu i zbieraj wszystko — bazgroły, szkice, układy i tak dalej, w katalogu pracy. Poprzez kolekcjonowanie i zachowywanie starych projektów tworzysz źródło odniesień, do którego możesz powrócić, gdy będziesz miał do wykonania podobny projekt do tych, z którymi miałeś do czynienia w przeszłości. Co więcej, będziesz mógł użyć tego źródła do śledzenia twojego rozwoju twórczego i udowodnienia sobie, że wykonana przez ciebie praca ewoluowała w czasie. Analizowanie starej pracy umożliwia zauważenie błędów, jakie pominąłeś w trakcie jej tworzenia i zwiększa szanse na zauważenie ich w przyszłości. Przeglądanie twoich dotychczasowych osiągnięć może również przyczynić się do odzyskania wiary w swoje możliwości, gdy brakuje ci energii, pewności siebie i czasu. Spróbuj kontrolować sposób, w jaki postrzegasz rzeczy, abyś mógł w pełni analizować je, zamiast na nie szybko zerkać. Poprzez patrzenie i analizowanie w bardziej świadomy sposób uzyskać dostęp do nowego świata graficznej wiedzy. Trenuj swoje oczy w wyszukiwaniu szczegółów, gdyż to one właśnie sprawiają różnicę. Drobne zmiany mogą znacznie polepszyć lub pogorszyć wizualną jakość projektu. Jeśli wykonałeś dobry, spójny projekt, ważne jest abyś był w stanie dostrzec drobne odchylenia od konwencji spójności, jakie sobie ustaliłeś. Szukaj inspiracji. Słuchaj ludzi, przyglądaj się ludziom, obserwuj ich pracę i naśladuj wszystko, co się da. Tak, zgadza się — naśladuj. Dzieci uczą się komunikacji poprzez naśladowanie, dlaczego więc ty nie mógłbyś? Poprzez naśladowanie nauczysz się nowych technik, które przyswoisz i dodasz do swojego repertuaru. Pamiętaj, jednak, że pomiędzy inspiracją, a kradzieżą istnieje niezwykle cienka granica. Ogólnie mówiąc nie powinieneś naśladować pracy innych ludzi spoza twojego domu. Nigdy nie udawaj, że wymyśliłeś projekt, którego w rzeczywistości nie wymyśliłeś. Jeśli tak zrobisz, w nocy przyjdą do ciebie potwory z szafy i schwytają cię, lub, powracając do rzeczywistego świata, dostaniesz pozew do sądu. Szukaj pomysłów w twoim otoczeniu. Czasami trudno pamiętać, że poza komputerem i Siecią istnieje jeszcze jakiś świat, który na dodatek jest inspirujący. Następnym razem, gdy wybierzesz się na poszukiwanie inspiracji spróbuj pójść na spacer oglądając buty innych osób, co również może stanowić źródło inspiracji. Następnego dnia na spacerze skoncentruj się na czymś innym, gromadząc w ten sposób wiele inspiracji z samego spacerowania. Nie wymuszaj pomysłów, lecz pozwól im przyjść do ciebie. Jednym z najbardziej wzbogacających i inspirujących doświadczeń jest pozwolenie sobie na bycie sobą i zrobienie czegoś niezwykłego. Bycie oryginalnym nie jest znowu takie trudne. Oryginalność czasami bardziej zależy od odwagi nić od zdolności. Podobnie jak kopiowanie jest dobre do praktyki i inspiracji, oryginalność jest dobrym sposobem na życie. Jeśli pozwolisz sobie na wymyślenie czegoś oryginalnego, da ci to wiele satysfakcji. Tworzenie oryginalnej pracy zapewni ci nieśmiertelność. Gdy wykonasz projekt, jakiego jeszcze nigdy nie było, natychmiast stanie się on najbardziej rozpoznawalną witryną w całej Sieci, a jego sława będzie wzrastać wraz z liczbą projektantów, którzy będą cię naśladować.
Rozdział 1-47
Sugestie i wskazówki, jakie ci przedstawiliśmy w tym rozdziale pomogą ci w zrozumieniu procesu i wykonywania projektu, a twoje umiejętności będą się poszerzać wraz ze wzrostem twego doświadczenia. Łącząc tą wiedzę z techniczna ekspertyzą, jaką znajdziesz w dalszej części tej książki, a dodatkowo z odrobiną kreatywnej inspiracji, oryginalny pomysł będzie czekać na ciebie tuż za rogiem — nieśmiertelność jest tuż tuż! Na zakończenie rozdziału i podsumowania omówionych zagadnień przedstawię ci techniki zastosowane przeze mnie do wykonania witryny Titoonia.com.
Projektowanie witryny internetowej Titoonia.com — studium Do zilustrowania zagadnień teoretycznych i technik omówionych w tym rozdziale wykorzystam proces tworzenia witryny www.titoonia.com. Wszystkie graficzne materiały z tego kreatywnego procesu, włącznie z końcowym efektem można pobrać z witryny www.titoonia.com lub www.friendsofed.com.
Przegląd witryny Titoonia jest domową rozrywkową i reprezentacyjną witryną wykonaną dla firmy Titoonic (www.titoonic.dk). W witrynie tej przede wszystkim wypróbowuje się wiele pomysłów wygenerowanych w Titoonic. Chcemy witrynę, którą możemy kontrolować i na której możemy przedstawić rzeczy, jakie lubimy robić. Główną zawartością witryny będą różnego rodzaju gry przez nas zaprogramowane, jak również, z czasem, inne znacznie zaawansowane eksperymenty związane z grami i rozrywką. Po drugie, witryna powinna być w pełni funkcjonalnym, na pełną skalę, projektem reprezentującym naszym umiejętności. Powinna być czymś, co chcielibyśmy pokazać naszym potencjalnym klientom z zamiarem zrobienia na nich dobrego wrażenia i przedstawienia im potencjału tego medium. Po trzecie, pragniemy wykorzystać potencjał tworzenia witryn we Flashu i witryn rozrywkowych z silnym poczuciem wspólnoty. Chcemy łatwą w obsłudze, elastyczną i dobrze działającą witrynę internetową wykonaną we Flashu 5. Ponieważ nasz budżet jest ograniczony, chcemy aby witrynę można było łatwo aktualizować i poszerzać, gdy tylko będziemy gotowi, aby dodać nową zawartość. Witryna powinna charakteryzować się łatwością utrzymania i nie powinna być zależna od często aktualizowanego materiału. Powinna działać jako całość nawet wówczas, gdy dostępna jest ograniczona ilość zawartości. Jednocześnie powinno się ja łatwo poszerzać włącznie z dodawaniem nowych witryn z pewnych kategorii, czy z dodawaniem pełnych nowych kategorii. Ponieważ witryna ta ma być naszą wizytówką, jej funkcjonalność i struktura powinny być jak najlepszej jakości. Skoro witryna ta jest również obszarem eksperymentalnym, będziemy musieli spodziewać się kilku usterek w działaniu w pewnych częściach zawartości. Witryna ogólnie powinna dobrze działać przy każdej prędkości połączenia i na każdym sprzęcie, lecz wymagania będą większe.
Wiadomość Ponieważ witryna ma być naszą wizytówką, a zatem bezpośrednim odzwierciedleniem naszej firmy i naszej pracy chcemy, oczywiście, aby wiadomość w niej przekazana była przynosząca satysfakcję i pozytywna. Ludzie nie powinni po wejściu na naszą witrynę dostawać wrażenia,
Rozdział 1-48
że jesteśmy niemili i niekompetentni. Chcemy wywrzeć na zwiedzających wrażenie, które oddaje sposób postrzegania przez nas naszej firmy, naszej pracy i naszych wartości. Dla tej witryny należy zdefiniować kilka pod-wiadomości: zawartość witryny ma koncentrować się wokół zabawy i rozrywki, natomiast różnorodne przeznaczenie witryny wymaga również umieszczenia kilku zagadnień biznesowych. W celu zapisania tych całkowicie odmiennych wiadomości utworzyłem listę, w dowolnej kolejności kilku słów, które kojarzą się z wyobrażonym przeze mnie nastrojem, przeznaczeniem i zawartością witryny: • • • • • • • • • • • • •
Tą listę słów należy następnie uściślić w coś bardziej użytecznego. Tego rodzaju lista może okazać się sama niezwykle praktyczna, dlatego też warto ja zachować jako część twojego przewodnika projektowego, czy książki reguł. Następnie należy wybrać jedno zdanie (lub jedno słowo), które obejmuje, lub w jakiś sposób łączy najważniejsze, jeśli nie wszystkie, słowa z listy. Ten proces zazwyczaj zachodzi w czasie przerwy na kawę, gdy jedziesz rowerem, pod prysznicem itp. Nie powinien być to zbyt intelektualny proces, kiedy to koncentrujesz się na dokładnych słowach czy zdaniach. Jest to raczej swobodny proces, w którym słowo czy zdanie formuje się w twoich myślach, gdy najmniej się tego spodziewasz. Napełniasz zwój umysł surowym materiałem i pozwalasz, aby podświadomie dokonał się proces przefiltrowania odpadów i odkrycia niespodziewanej złotej bryłki prawdy i elegancji. Ostateczna wiadomość wybrana przeze mnie brzmi: „jak miło tu być”. W pewien sposób obejmuje ona słowa z listy, cele i zawartość mojej wizji projektu. Zdanie „jak miło tu być” będzie dzwonić mi w uszach w trakcie procesu twórczego i będzie na pierwszym miejscu gdy będę szukać odpowiedź na problemy, które pojawią się w czasie projektowania. „Jak miło tu być” — nie trzeba wymyślać niczego bardziej skomplikowanego...
Docelowa publiczność Skoro główną cecha charakterystyczna tej witryny jest wieloaspektowość, docelowa publiczność również powinna być zróżnicowana. Pamiętając o tym, że strona ta ma funkcjonować jako wizytówka, obszar eksperymentalny i jednocześnie odpowiadać użytkownikom, można do niej przypisać przynajmniej trzy rodzaje docelowej publiczności: • • •
Potencjalni klienci Nawiedzeni gracze i projektanci-maniacy pracujący w domu (czyli moi koledzy i ja) Aktualni gracze (każdy, kto chce)
Rozdział 1-49
Aby wiadomość nie wprowadzała w błąd, zdecydowaliśmy się skoncentrować tylko na jednej grupie publiczności. Jeśli będziemy usiłować skomunikować się bezpośrednio i w równym stopniu z trzema grupami ludzi poprzez ten sam kanał możemy być pewni, że wiadomość będzie niewyraźna i wszyscy widzowie z wszystkich rodzajów publiczności odniosą wrażenie, że nie została skierowana do nich. Dlatego też musimy się skoncentrować na jednym zagadnieniu... Grupa „faktycznych graczy” (kimkolwiek oni są) jest bez wątpienia największą z trzech wybranych grup publiczności. Liczba „potencjalnych klientów” jest, spójrzmy prawdzie w oczy, poważnie ograniczona, a nawiedzonych graczy domowych w ogóle nie warto w tym przypadku brać pod uwagę, gdyż oni powinni być zainteresowani wyłącznie dostarczaniem zawartości do witryny. Nawet teraz jest jasne, że „faktyczni gracze” nie są zawężoną definicją publiczności docelowej, jakiej szukamy, w żadnym stopniu. Musimy jeszcze bardziej ja sprecyzować i właśnie w tym miejscu należy dokonać właściwych decyzji. Ludzie lubiący grać w Internecie, w tym przypadku w niewielkie gry napisane we Flashu można zaliczyć do każdej grupy wiekowej i zawodowej, od uczniów szkół podstawowych do młodych pracowników biurowych. Grupa ta może składać się z kobiet i mężczyzn, lecz prawdopodobnie mężczyźni będą stanowić większość. Zauważ, że w innych przypadkach musielibyśmy dokładniej zająć się szczegółami i demografią docelowej publiczności. Jeśli mielibyśmy do promocji jakiś produkt, a witryna miałaby odnieść sukces internetowy z wysokimi zyskami i wielkim budżetem marketingowym, definicja publiczności docelowej przedstawiona poniżej nie byłaby wystarczająca. Potrzebowalibyśmy statystyki, badania demograficzne i analizy przeprowadzone na o wiele większą skalę. Ostatecznie zdecydowaliśmy się zdefiniować publiczność docelową w następujący sposób: • Nowoczesna, raczej młodociana publiczność, z wielkim apetytem na rozrywkę w czasie przerwy na kawę. Prawdopodobnie internetowi „koczownicy” — surfują po stosunkowo ograniczonej liczbie miejsc jakie znają, czasami wpadają na witrynę, o jakiej kiedyś słyszeli, lub im polecono. • Znaczna część publiczności ma skłonność do wysyłania maili z zabawnymi lub interesującymi klipami, obrazkami i grami do przyjaciół i znajomych. Prawdopodobnie w dużej mierze zależą od załączników do poczty elektronicznej, gdy znajdują i postanawiają odwiedzić nowe witryny. • Przeciętny przedstawiciel tej grupy jest w wieku pomiędzy 20 i 35 lat. Zauważalna jest nieznaczna przewaga mężczyzn. Odbiorcy zaznajomieni są z Siecią i spędzającą w niej wiele czasu, zarówno w biurze jak i w wolnym czasie. Większość posiada w pracy stał łącza LAN lub xDSL, a niektórzy dysponują podobnymi rozwiązaniami w domu. Jeśli chodzi o sprzęt, nie powinniśmy się spodziewać żadnego arcydzieła, lecz stosunkowo nowoczesnych maszyn biurowych. • Typowy internauta z tej grupy będzie posiadał stosunkowo nowa przeglądarkę, lub prawdopodobnie nie aktualizuje jej po każdym ukazaniu się nowej wersji. W większość przypadków będą dysponować plug-inem Flasha, lecz znaczna część publiczności będzie musiała jeszcze aktualizować najnowszy odtwarzacz Flasha. Większość internautów będzie miała już wcześniejsze doświadczenie z instalowaniem odtwarzacza Flasha. Na tym etapie spróbowałem rozwiązać zadanie od ręki. Należy dokonać przeglądu tego, za co zamierzasz się zabrać, a także poszukać pomysłów i inspiracji. W tym przypadku znamy od początku technologie, jakich będziemy używać, więc nie musimy się nad tym tutaj Rozdział 1-50
zastanawiać. Przyda się natomiast tematyczne podejście, jak również pomysł jednoczący cały projekt. Gdy postanowiliśmy zaprojektować witrynę wizytówkowo-rozrywkową, na której moglibyśmy przedstawić nasza pracę, chcieliśmy wyszukać dla niej nazwy zbliżonej z do nazwy naszej firmy, Titoonic, lecz nieco się od niej jednak różniącej. W jakiś sposób powstała nazwa Titoonia i przy niej pozostaliśmy. Teraz inspiruję się tą nazwą. Dla mnie brzmi ona jak nazwa małej, dziewiczej utopijnego wyspiarskiego królestwa gdzieś na Pacyfiku: słoneczne plaże i palmy, i dziewczęta w spódniczkach z trawy z kwiatowi wpiętymi we włosy. Przeglądając różne książki znajduję również inspirację spoglądając na plakat propagandowy z powojennych dynamicznych lat 50. połączony z niejasną definicją japońskiej pop kultury. Obydwa style charakteryzują się czystymi, pełnymi napięcia liniami; płaskie, stosunkowo jasne kolory, i silny ikonograficzny sposób komunikacji. Z takimi inspiracjami kontynuuję pracę.
Projekt strukturalny Jak już wspomniałem wcześniej chcemy zaprojektować łatwą w obsłudze, elastyczną i dobrze działającą stronę. Nawet, jeśli nasza publiczność dysponuje stosunkowo szybkimi połączeniami nadal musimy sprostać ograniczeniom sprzętowym. Jest dla nas niezwykle istotnym, aby strona działała dobrze i płynnie na prawie każdym sprzęcie i przy każdej prędkości połączenia. Akceptujemy fakt, że niektóra zawartość na pod-stronach będzie wymagała większej mocy czy prędkości, lecz główna struktura strony powinna funkcjonować płynnie. Następnym etapem, więc będzie przygotowanie jej struktury. W tym celu zastosowałem kilka technik twórczych do wykonania listy głównych sekcji strony i opisu zależności między nimi. Nagłówki i schematy blokowe Titoonia.com będzie stosunkowo prostą i małą stroną z jedynie kilkoma głównymi sekcjami i maksymalnie pięcioma pod-sekcjami na każdą jedną główną sekcję. Wykonałem kilka notatek na papierze, zapisując nazwy sekcji i pod-sekcji oraz ich zawartość. Zrobiłem to cztery czy pięć razy, aż udało mi się utworzyć logiczną w mojej opinii strukturę strony: Rysunek 49
brak
Następnie wykonałem schemat blokowy, na którym zaznaczyłem najważniejsze strony i sekcje. W tym przypadku wziąłem pod uwagę, że same gry zostaną dodane później, dlatego też po prostu zamiast szczegółowo opisu różnych gier dodałem „obszary zablokowane”. Rysunek 50
brak
Ponieważ jestem projektantem a nie programistą nie umieściłem skryptów ani innych elementów tego typu na schemacie, lecz tylko strony, które muszę zaprojektować. Schemat blokowy wykonałem ręcznie, ponieważ nie chciałem być rozpraszany praca programu do tworzenia schematów blokowych, który skoncentrowałby moje wysiłki na ładnym wyglądzie schematów zamiast na ich zawartości — nie potrzebuję dopracowanego, gotowego do wydruku schematu, dlatego też nie mam zamiaru tracić czasu i energii na tworzenie takiego.
Rozdział 1-51
Strategia plików Poprzez podzielenie zawartości różnych stron na kilka oddzielnych plików filmowych mogę bez problemu ponownie zastosować najczęściej stosowane elementy sceny, takie jak projekt nawigacji i tła. Oznacza to również, że nie będę obciążać użytkowników o ograniczonej prędkości połączeń z elementami do pobrania, które ich nie interesują. Jednym z najważniejszych narzędzi umożliwiających wykonanie szybkiej strony internetowej we Flashu jest akcja loadMovie, dzięki której można do strony dodać optymalizację strumieniowa. Na przykład, loadMovie również służy do wprowadzenia na stronę bardziej skomplikowanych dźwięków czy muzyki — wystarczy umieścić muzykę w oddzielnym filmie Flasha pobieranym na życzenie i już mamy nad nim większą kontrolę i unikamy wstrzymywania czasu ładowania głównego filmu Flasha. Współdzielone pliki zostaną umieszczone w katalogu administratora, aby ułatwić do nich dostęp z wszystkich części strony. Na różnych podstronach dodam polecenia loadMovie, które spowodują pobranie elementu czy filmu nawigacyjnego. Dzięki temu użytkownik będzie musiał załadować zawartość filmu nawigacji tylko raz — przy każdym następnym razie będzie ona pobierana z pamięci podręcznej. Oprócz tego typu współdzielenia filmów, gdzie ponownie stosujemy ten sam film nawigacji na całej stronie, „współdzielone biblioteki” dostępne we Flashu 5 umożliwiają ponownie użycie poszczególnych symboli w filmach. Na tej stronie zastosowałem bardzo niewielką liczbę symboli wykorzystywanych wielokrotnie, dlatego też zrezygnowałem z użycia tej opcji.
Struktura katalogów Aby uniknąć najpowszechniejszych zagadnień użyteczności związanych zazwyczaj z tworzeniem strony we Flashu i aby zoptymalizować ogólne działanie strony wybrałem strukturę, w której każdy element zawartości jest umieszczony oddzielnie na swojej własnej stronie HTML. Każda strona HTML jest następnie umieszczona w katalogu w zależności od jej zawartości. Na przykład, jeśli chcesz uzyskać dostęp do gry w ping ponga, adresem jej będzie www.titoonia.com/games/pong/. Sama gra zostanie umieszczona w dokumencie HTML o nazwie default.htm w katalogu pong. Wykonałem wstępną strukturę katalogów zgodnie z podjętą przeze mnie decyzją — najlepiej przygotować strukturę plików zanim zabierzesz się za szczegółową zawartość strony, aby dostęp do plików był łatwy, a pliki bez problemu dało się zlokalizować. Rysunek brak Tworzenie struktury katalogów jest bardzo łatwym sposobem na uzyskanie dobrego przeglądu strony. Można prawie powiedzieć, że tworzenie struktury katalogów jest pewnym rodzajem „pre-prototypu”. Rodzaj struktury przedstawionej tutaj, ze stroną i / lub katalogiem dla każdego elementu zawartości umożliwia użytkownikowi zastosowanie przycisku Back w przeglądarce tak, jak na „zwyczajnych” stronach internetowych. Oznacza to również, że użytkownik będzie mógł dodać zakładkę określonej strony, aby ułatwić sobie do niej powrót. Ponadto, adres internetowy zawsze będzie wskazywał użytkownikowi, w którym miejscu się właśnie znajduje. Wadą tego typu struktury jest niemożliwość wykonywania „miękkich przejść” pomiędzy sekcjami czy stronami.
Rozdział 1-52
Aby przetestować naszkicowaną przeze mnie strukturę i wymyślić, w jaki sposób można skonstruować stronę we Flashu wykonałem na szybko prototyp.
Tworzenie prototypu Wykonanie prototypu ma na celu naśladowanie działania ukończonej strony bez konieczności dbania o dobry wygląd. Jest to model roboczy umożliwiający przetestowanie podstawowej funkcjonalności strony. Podczas konstruowania prototypu upewniłem się, aby po wciśnięciu przycisków nawigacji ładowane są równe filmy na właściwe miejsce i zawierają one pewien rodzaj informacji o rodzaju ich zawartości włącznie z, na przykład linijką z ich nazwą. I już — nie marnuj więcej czasu na szczegóły na tym etapie projektowania. Poniższy rysunek przedstawia prototyp tytułowej strony witryny, z zaznaczonym interfejsem i przyciskiem Menu. Rysunek brak PROTOTYP WITRYNY INTERNETOWEJ TITOONIA Na etapie tworzenia prototypu definiuję również pliki w formatach FLA i HTML, gdyż muszę przetestować funkcjonalność akcji loadMovie i struktury katalogów. W trakcie procesu projektowania zazwyczaj wykonuję kilka prototypów, aby przetestować różne rozwiązania. Rysunek brak Poprzez utworzenie całej struktury plików przed rozpoczęciem szczegółowego procesu projektowania natkniesz się i rozwiążesz wiele strukturalnych problemów, które wpłyną na decyzje podejmowane w trakcie projektowania, dzięki czemu unikniesz dokonywania poprawek później. Po wykonaniu prototypu upewnisz się, czy pomysły struktury działają, czy też nie. Następnie po zakończeniu pracy nad głównymi częściami projektu graficznego możesz skopiować i wkleić elementy graficzne bezpośrednio do odpowiednich plików prototypu. Nie będziesz musiał tworzyć nowej struktury plików — wystarczy umieścić obrazki i filmy w predefiniowanej i przetestowanej strukturze strony. Po dopracowaniu struktury plików możesz przejść do projektowania zawartości i tworzenia strony.
Szkicowanie Na tym etapie procesu projektowania skompletowałem wiele luźnych, bardziej lub niej użytecznych pomysłów dla projektu. Wykonałem kilka szkiców, gdzie będę dodawać wszystkie elementy, jakie tylko przyjdą mi do głowy. Czasami wykonują wiele szkiców, czasami tylko jeden. Czasami są one niezwykle szczegółowe, a w innych przypadkach ograniczone tylko do jednej czy dwóch linii, które pomagają mi w zapamiętaniu, czy wyobrażeniu sobie pomysłu. Dla projektu strony Titoonia wykonałem dwa schematyczne szkice przedstawione poniżej: Rysunek Rozdział 1-53
brak Po drodze zdarzały mi się mniejsze szkice wykonane na kopertach, chusteczkach lub z tyłu książki adresowej. Niektóre z nich, na przykład, testowały układ, podczas gdy inne użyłem do rozwiązania kilku technicznych zagadnień. I w tym przypadku należy myśleć o stronie i starać się wyobrazić sobie problemy, które możesz napotkać podczas korzystania ze strony. Poprzez szkicowanie na tym samym kawałku papieru przez kilka dni w trakcie procesu tworzenia skumulujesz w jednym miejscu wiele źródeł inspiracji. Pod koniec procesu przejrzyj szkice i zachowaj wszystkie te, która uważasz za użyteczne czy interesujące.
Kompozycja Chcę przyjazną, spokojną i odrobinę dynamiczną kompozycję wspierającą wiadomość i nastrój strony. Wykonałem wiele szkiców kompozycyjnych pamiętając ciągle o wiadomości i docelowej publiczności. Przedstawione poniżej rysunki stanowią wybór szkiców wykonanych przeze mnie i zastosowanych lub potraktowanych jako kandydaci. Rysunek brak Wiele szkiców powstało w formie rozgrzewki, lecz nie zostały użyte, a niektóre poszły do śmieci. Bez względu na to, jak nieuporządkowane i dziwne się one wydają, szkice te zawierają rozwiązania na większość problemów związanych z układem i projektem, na jakie natknąłem się na tej stronie. Poprzez przeglądanie tych szkiców w dalszej części procesu tworzenia, służą mi one jako źródła inspiracji. Podobnie jak „normalne” szkice, zawsze zachowuję moje szkice kompozycyjne jako przyszłe odniesienia.
Kolor Ponieważ nasza wiadomość brzmi „jak miło tu być”, a docelowa publiczność jest stosunkowo młoda, doszedłem do wniosku, że można wykorzystać kilka świeżych, ciepłych i lekko zakręconych kolorów z natury. Kolory nie powinny wyglądać zbyt dziecinnie, ani zbyt „staro”, nie powinny być również ponure, czy smutne. Schemat kolorów powinien odzwierciedlać słowa z listy wykonanej podczas definiowania wiadomości i powinien przyciągnąć docelową publiczność. Rozpocząłem we Flashu od wykonania wielu kropek z mniej lub bardziej przypadkowo wybranymi kolorami. Inni projektanci mogą to zrobić w Photoshopie, a tak w zasadzie wszystko zależy od osobistych preferencji. Wszystkie kolory wywołują „kolorystyczny nastrój” opisany powyżej, lecz wiele z nich zostanie usuniętych po ponownym przeglądnięciu ich. Rysunek PRÓBNY SCHEMAT KOLORÓW
brak
Każdy kolor powinien być jak najściślej związany z wiadomością, publicznością i innymi parametrami, jakie wyszukałem. Kolory, które za bardzo „odstają” zostaną usunięte. Warto uważać, aby nie pozostało zbyt wielu kolorów. Ja pozostawiam raczej kilka dobrze zrównoważonych kolorów niż wiele na pół wyważonych. Rozdział 1-54
We Flashu wykonałem prostą rysowankę, na której wypróbowałem kilka wybranych przeze mnie kolorów. Początki są zazwyczaj trudne, lecz po pewnym czasie rysowania, zastępowania i dopasowywania uda ci się odpowiednio dobrać kolory, które zastosujesz w projekcie. Rysunek SZKIC KOLORÓW
brak
Szkic kolorystyczny nie tylko stanowi obszar eksperymentowania, na którym znajduję kolory przeznaczone do projektu, lecz również jest to sposób na odnalezienie właściwej równowagi kolorów do zastosowania, jak i związków pomiędzy nimi. Stosunki ilościowe w szkicu kolorystycznym będą mniej więcej takie same, jak na ukończonej stronie. Poprzez określenie ilości poszczególnych kolorów uczę się również o sposobie działania i nie działania wybranego przeze mnie schematu kolorów. Gdybym zamiast koloru jasnego piasku zastosował jako tło zieleń odbiór strony zostałby zupełnie zmieniony, w coś o wiele bardziej mokrego i ciemnego — zbliżonego bardziej do marsjańskiej gumy do żucia niż rajskiej wyspy na Południowym Pacyfiku. Ze szkicu kolorów rozmieściłem wybrane kolory na kolorze tła. W ten sposób powstał schemat kolorów i paleta dla projektowanej strony. Rysunek SCHEMAT KOLORÓW WITRYNY
brak
Poprzez rozmieszczenie kolorów według ich wartości w kropkach o jednakowym rozmiarze uzyskałem lepszy przegląd całościowego charakteru i temperatury ogólnego schematu kolorów. Jeśli schemat ten działa tutaj poprawnie i wysyła właściwe sygnały, powinien być odpowiedni również dla strony. W końcu wybrałem zielenie dla trawy, kolory niebieskie dla wody, odcienie pomarańczowe dla piasku i różowy do skontrastowania i „dodania pikanterii”. Biały i czarny nie są uważane za prawdziwe „kolory”, dlatego też nie stanowią one części tej selekcji. Mimo, że biały i czarny w większości palet są ustawieniami domyślnymi i tak nie zamierzam ich używać. No dobrze. Przygotowałem już strukturę i kolory. Teraz czas na wybór czcionek, jakie zastosuję do przekazania wiadomości na stronie.
Czcionki Chcę wybrać dwie główne czcionki — jedna dla nagłówków i jedna dla głównego tekstu. Nagłówki powinny odzwierciedlać główne źródło mojej tematycznej inspiracji i płynnie łączyć się z moim mentalnym odczuciem tej strony, schematem kolorów i wykonanymi do tej pory szkicami. Czcionka wybrana dla głównego tekstu powinna być przede wszystkim łatwa do odczytania (czyli powinna być to czcionka bezszeryfowa), a także nie powinna sygnalizować czy podkreślać czegoś graficznie nie związanego z tematem — innymi słowy, musi to być prosta, prawie neutralna czcionka. Po spędzeniu czasu na testowaniu, przeglądaniu i poszukiwaniu dla nagłówków wybrałem darmową czcionkę firmy Ray Larabie (www.larabiefonts.com) o nazwie Deftone Stylus. Czcionka ta charakteryzuje się kilkoma cechami, które mi odpowiadają: jest dekoracyjna, lecz stosunkowo prosta i wyraźna i niezbyt trudna do odczytania. Łączy ona pewne właściwości Rozdział 1-55
stylu lat 50. z bardzo nowoczesnym, lecz jednocześnie klasycznym wyglądem. Linie są odrobinę „futurystyczne”, co kojarzy się nieco z japońską pop kulturą, która również mnie interesuje. No i jest darmowa.... Dla głównego tekstu wybrałem proste, klasyczne rozwiązanie, czyli standardową czcionkę Verdana, która według mnie łączy prostotę, czytelność i świetnie prezentuje się na ekranie. Jest ona szersza i bardziej otwarta od, powiedzmy czcionki Arial czy Helvetica, i chociaż jest odrobinę prostsza i mniej wytworna niż wspomniane czcionki ma przyjazny wygląd, który mi odpowiada. Rysunek brak Deftone Stylus is nice for headings — Deftone Stylus dobrze nadaje się na nagłówki Verdana is a simple readable standard font — Verdana jest prostą czytelną standardową czcionką Po podjęciu ogólnych decyzji projektanckich mogę już teraz przejść do bardziej szczegółowego projektowania zawartości.
Tworzenie zawartości witryny Titoonia Po zdefiniowaniu wiadomości, docelowej publiczności, zbudowaniu odpowiedniej struktury, wykonaniu różnorodnych szkiców, wspomagających kompozycji, dobrego schematu kolorów i dokonaniu wyboru czcionek możemy zabrać się już za tworzenie strony we Flashu. Wszystko, czego dokonaliśmy do tej pory, należy teraz przenieść do projektu strony i dopracować. W tym przypadku wykonałem wszystkie elementy graficzne bezpośrednio we Flashu. Narzędziem linii i przy pomocy ciągnięcia i rozciągania narysowałem elementy, rozpoczynając od utworzenia nagłówka i logo. Będą to najbardziej znaczące graficzne elementy. Rysunek WIZYTÓWKA 1
brak
Następnie utworzyłem i dodałem logotyp — nagłówek u góry strony. Rysunek WIZYTÓWKA 2
brak
Nie jestem jednak w pełni zadowolony z wyglądu tych elementów, gdyż dobrze się one prezentują oddzielnie, lecz po umieszczeniu logotypu na tle nie bardzo do siebie pasują. Tło za bardzo różni się od logotypu i linie tła idą w złym kierunku w stosunku do kierunku czytania. Nie chcę rozpocząć „czytania” obrazka od dołu, gdzie zaczyna się dolna linia tła... Aby ulepszyć czytanie i ciężar rozmieszczenie obrazka odbiłem tło, a logotyp pozostawiłem na jego miejscu. Rysunek WIZYTÓWKA 3
brak
Rozdział 1-56
W ten sposób logo zostanie odczytane jako pierwsze. Linie tła będą prowadzić oko w kierunku wyspy i w dół w stronę zawartości (w idealnym świecie, wiecie jak to jest...). Teraz cały obrazek nabrał lepszego wyglądu i stał się bardziej dynamiczny. Nagle, z jakiegoś powodu, straciłem pewność, co do doboru koloru tła, dlatego też postanowiłem wypróbować inny kolor z kilkoma dodatkowymi elementami na ekranie — filmami funkcjonującymi jak okna z zawartością, które ma zamiar zastosować na ukończonej stronie. Rysunek WIZYTÓWKA 4
brak
Często zdarza mi się robić takie podwójne sprawdzanie i testowanie alternatywnych wyborów na pewnym etapie projektowania. Testowanie innych opcji jest zawsze dobrym sposobem na sprawdzenie pomysłu i projektu. Dosyć często pierwszy wybór jest najtrafniejszy, lecz nie bój się wypróbować alternatyw, jeśli potrzebujesz upewnić się w swoich decyzjach. Przeglądając wykonane wcześniej przeze mnie szkice na pewno rozpoznasz „okna”, czyli tła pól tekstowych, z którymi teraz zaczynam eksperymentować. Zdałem sobie jednak sprawę, że nie pasują one tutaj i zrezygnowałem z modela „okien”. Poniższy rysunek przedstawia wymyślony przeze mnie nowy model pola z tekstem / zawartością. Rysunek WIZYTÓWKA 5
brak
Tutaj ponownie użyłem kształt linii tła do połączenia układu w jedną całość. Co ważniejsze, dodałem dolne wersję linii nagłówka. Służą one do „zamknięcia” strony i zwiększenia wrażenia jedności. Linie u dołu kończą również delikatny obrotowy ruch linii i oka widza. Zauważ, że linie u dołu ekranu są zagięte do góry, aby echo linie u góry, skierowane w dół. Niestety ten układ również się nie nadaje, gdyż dwa duże pola tekstowe / zawartości nie harmonizują ani z sobą, ani z kompozycyjna całością. Linie z dużego pola po prawej nie prowadzą w przekonywujący sposób do małego pola po lewej. Wracamy do tabletu graficznego... Następnie ze świeżą inspiracją zaczerpniętą ze szkiców kompozycyjnych wykonanych wcześniej spróbowałem podkreślić kompozycję i zwiększyć wrażenie lekkości i miękkości poprzez połączenie linii z dwóch oddzielnych pól w jedna, tworzą tym samym bardziej płynny ruch oka. Rysunek WIZYTÓWKA 6
brak
Zauważyłem, że różowe kontury wokół pól tekstowych/zawartości zabierają zbyt dużo uwagi w porównaniu z tym, co będzie znajdowało się na polach. Należy, więc wypróbować inne rozwiązanie... Rysunek WIZYTÓWKA 7 Zauważ zmianę aspektu — film jest teraz wyższy. Poprzednio zdałem sobie sprawę, że cały układ wydawał się przygnieciony i w jakiś sposób pozbawiony proporcji. Poprzez wydłużenie pola obrazka dodałem więcej przestrzeni do pomieszczenia zawartości strony, a także skierowałem się w stronę większego współczynnika kształtu obrazu monitora komputera.
Rozdział 1-57
Dodatkowo pola tekstowe / zawartości otrzymały delikatny efekt padającego cienia w celu oddzielenia ich w delikatny sposób od koloru tła. Efekt cienia stwarza również wrażenie jasności i ciepła. Wykonałem „pełnoekranową” wersję pól tekstowych/zawartości do sprawdzenia, czy pomysł z polami będzie działać na większej skali. Rysunek WIZYTÓWKA 8
brak
Będąc w zasadzie zadowolonym z wyglądu elementów drugoplanowych spróbowałem dodać tekst, aby sprawdzić, czy mój wybór czcionek jest właściwy dla tego układu. Rysunek WIZYTÓWKA 9
brak
Aby skontrastować obrazki wyspy i dominujące linie układu, a także zredukować efekt skosu czcionki z kursywą postanowiłem odrobinę przechylić nagłówek. W ten sposób zbliżę również wygląd strony do stylu plakatowego z lat 50., który mnie zainspirował. Ponieważ nie spodobał mi się zbytnio efekt pozostawionych samych podnagłówków na tle pola tekstowego dodałem niewielką kropkę, aby je, aby nią oddzielić. Wykonałem również kilka projektów elementów interfejsu — pole wejściowe i przycisk, aby przetestować jak prezentują się różne elementy razem. Ponieważ elementy tła są dosyć krzykliwe, interfejs powinien mieć raczej dyskretny wygląd. Rysunek WIZYTÓWKA 10 brak Przy pomocy projektu prostego wejściowego pola tekstowego i zwykłego przycisku dałem sobie radę z wszystkimi pytaniami twórczymi, które będą się nasuwać przy umieszczaniu pozostałych elementów interfejsu — zastosowałem te ogólne obiekty na całej stronie, aby uzyskać spójność projektu. Skończone! Teraz dysponuję już wystarczającą liczbą elementów graficznych, a projekt jest na tyle kompletny, że może już służyć jako wzór dla pozostałych etapów procesu twórczego. Teraz „wystarczy tylko” dodać zawartość, aż strona wypełni się po brzegi. W trakcie pracy nad projektem mogę jeszcze powrócić do wykonanego już materiału i ogólnych obiektów aby znaleźć w nich rozwiązania dla problemów projektu strony i filmów, które mogą pojawić się w trakcie pracy. Rzadko kiedy zagłębiam się w szczegóły podczas ogólnego procesu projektowania. Nie zastanawiam się nad każdym aspektem strony aby sprawdzić i różnych typów elementów interfejsu i pól tekstowych będę potrzebować. Poprzez utworzenie pojedynczej, dobrze przemyślanej strony z umieszczonymi w niej głównymi elementami projektu uzyskam klucz do reszty projektu strony. Teraz mam już na miejscu podstawowe tematy, a pozostałe elementy witryny będą wersjami tych podstawowych, spójnych tematów. Abym ja i moi współpracownicy mógł swobodnie wydobyć przewodnią informację z wykonanych do tej pory elementów, pozostaje jeszcze jedna rzecz do wykonania — utworzenie graficznego profilu, czyli „przewodnika po stylach”.
Rozdział 1-58
Profil graficzny W miarę, jak poszczególne aspekty projektu stają się coraz wyrazistsze lepiej zdefiniowane dodaję do graficznego profilu opisy i definicje. Profil graficzny posłuży jako przewodnik po stylach, gdy ja wraz z moimi kolegami będziemy kontynuować pracę nad podsekcjami i stronami strony Titoonia. Za każdym razem, gdy staję podczas projektowania przed wyzwaniem graficznym czy twórczym odpowiedzi szukam w profilu graficznym. Aby zachować spójność i zapewnić zachowanie wiadomości i atmosfery strony wszystko, co tworzę w tym projekcie w przyszłości będzie musiało być zgodne z zasadami, które ustanowiłem poprzez wykonanie wstępnego projektu i zgromadzenie wskazówek projektanckich. Na przykład, jeśli nie jestem pewny, jakie kolory powinienem zastosować dla pewnego rodzaju zawartości spoglądam na profil graficzny i stosuję kilka kolorów, jakie w nim zdefiniowałem, lub kolory do nich zbliżone. A jeśli potrzebuję nowy projekt przycisku biorę pod uwagę wcześniej wykonane przeze mnie przyciski dla tego projektu, podobnie jak w przypadku linii, kompozycji, podziału strony i pól, czcionek, i tak dalej. Warto wspomnieć, że profil graficzny nie jest na tym etapie skończony. Prawdopodobnie nigdy nie będzie kompletny dopóki projekt jest żywy i ciągle rozwijany: część pomysłu z graficznym profilem polega na tym, że zmienia się on i rozszerza w trakcie pracy. Po każdym dopracowaniu elementu projektu lub wprowadzeniu nowego, profil również powinien zostać poszerzony. Gdybyśmy zajęli się promowaniem strony, lub zaczęli sprzedawać nowe produkty, profil graficzny i w tym przypadku posłużyłby nam jako przewodnik po stylach. Po utworzeniu nowego materiału powinien on również zostać dodany do przewodnika. Definicje wiadomości i publiczności docelowej, lista sów kluczowych, szkice i szkice kompozycyjne powinny stanowić część profilu graficznego. Poprzez kolekcjonowanie całego materiału przygotowuję źródło inspiracji i rozwiązań dla mnie i dla osób pracujących nad daną stroną. Poniżej przedstawiliśmy kilka stron z profilu graficznego Titoonia.com. Rysunek PROFIL GRAFICZNY 1
brak
Rysunek PROFIL GRAFICZNY 2
brak
Zakończenie Jak powiedzieliśmy już na początku celem tego rozdziału było wprowadzenie cię w uniwersalny zestaw zasad i technik twórczego projektu, które są szeroko stosowane w projektowaniu na potrzeby Sieci, a zwłaszcza w tworzeniu stron we Flashu. Będąc świadomym teoretycznych i praktycznych zagadnień związanych z projektowaniem stron internetowych możesz dokładniej zgłębić każdy aspekt, dostosować techniki do twoich potrzeb i zastosować je we własnej pracy.
Rozdział 1-59
Rozdział 2 Sprytne klipy Sprytne klipy są jedną z najlepszych nowych cech Flasha 5. Umożliwiają one zmianę ustawień skryptu ActionScript w obrębie klipu filmowego bez konieczności zagłębiania się w kod. Oznacza to, że programista może napisać skomplikowany kod ActionScript do kontrolowania filmu, a następnie przesłać go projektantowi, który może zmodyfikować działanie filmu bez konieczności zmiany kodu. Na przykład, załóżmy, że przygotowujesz klip filmowy, w którym obrazek zanika poprzez zastosowanie parametru przeźroczystości. Wykonujesz to z zastosowaniem zmiennej maxFade, która zawiera wartość dla maksymalnego zakresu parametru przeźroczystości 0 – 100. Normalnie, w celu zmodyfikowania zmiennej maxFade musielibyśmy przejść do kodu, odnaleźć tą zmienną i wówczas dopiero ją zmienić. Jeśli jednak przekształcimy klip filmowy w sprytny klip, i przypiszemy sprytnemu klipowi parametr będący zmienną maxFade, wówczas będziemy mogli zmodyfikować wartość zmiennej maxFade w przyjaznym użytkownikowi oknie dialogowym, bez babrania się w kodzie. Poprawne zastosowanie sprytnych klipów oszczędzi ci wiele cennego czasu, a możliwość zastosowań tej nowej cechy Flasha może ograniczyć jedynie twoja wyobraźnia. Tworzenie prostego sprytnego klipu
Abyś mógł zasmakować możliwości sprytnych klipów utworzysz przycisk, który po wciśnięciu będzie prowadzić do nowego adresu internetowego. Sztuczka polega na tym, aby adres ten został zdefiniowany jako parametr w sprytnym klipie. Aby zmodyfikować adres internetowy wystarczy wywołać panel Clip Parameters i wprowadzić nowy adres, bez konieczności otwierania przycisku, otwierania dla niego kodu ActionScript i wówczas dopiero zmodyfikowania adresu. Dobrze zaprojektowane sprytne klipy zmniejszają konieczność poprawiania kodu ActionScript, dzięki czemu zmniejszają się również szanse przypadkowego rozbicia kodu podczas modyfikowania go. 1. W nowym filmie narzędziem prostokąta (Rectangle) narysuj na scenie prostokąt o kształcie przycisku. Przekształć go w symbol przycisku i nadaj mu sensowną nazwę, na przykład button (ang. przycisk):
2. Następnie przekształć powstały przycisk w symbol klipu filmowego (ja nazwałem go po prostu button clip, ang. klip przycisku). Ten właśnie klip filmowy stanie się Rozdział 2-60
sprytnym klipem. Otwórz klip filmowy i zaznacz w nim symbol przycisku. Następnie otwórz panel Action i upewnij się, że znajdujesz się w trybie Expert zanim wpiszesz następujący fragment kodu: on (release) { getURL (url, target); }1
Jak widać w kodzie tym nie podaliśmy określonego adresu internetowego, ani adresu docelowego dla akcji getURL, lecz podaliśmy nazwy dwóch zmiennych o nazwie url i target. Zmiennym tym przypiszemy właściwe wartości w panelu Clip Parameters. 3. W bibliotece kliknij prawym klawiszem myszy na button clip (czyli na symbol klipu filmowego, którego mogłeś nazwać zupełnie inaczej) i z menu kontekstowego wybierz polecenie Define Clip Parameters.
W ten sposób zostanie wywołane okno dialogowe Define Clip Parameters, w którym zdefiniujemy zmienne dla sprytnego klipu, które z kolei zostaną przekazane do klipu filmowego. Kliknij na ikonie ze znakiem + znajdującej się po lewej stronie u góry okna dialogowego i dodaj pierwszy parametr:
4. Teraz zdefiniujemy go. Dwukrotnie kliknij na pozycję varName w kolumnie Name i wprowadź nazwę dla pierwszej zmiennej parametru, która w tym przypadku jest url:
Jeśli chcesz przypisać dla tego parametru wartość, którą wszystkie kopie w sprytnym klipie będą używać jako wartość domyślnej, możesz tego dokonać poprzez dwukrotne kliknięcie na 1
Przyp. Red. Kiedy pracujemy nad klipem filmowym użycie akcji „on (release)” jest nie możliwe, gdyż ta jest przypisana tylko akcjom związanych z przyciskami ang. „button”. Dlatego też należy użyć akcji „onClipEvent (mouseDown)”.
Rozdział 2-61
pozycji Value. Jeśli pozostawisz to pole puste, każdej nowej kopii w tym klipie również przypisane będzie to puste pole. Ja wpisałem adres przyjaciół z witryny ED. Pamiętaj, że wszystkie adresy internetowej stosowane we Flashu muszą podawać adres bezwzględny, czyli poprzedzony przedrostkiem http://:
Na razie w kolumnie Type pozostaw pozycję Default bez zmian. Dysponujesz jeszcze tutaj innymi opcjami: • Array dla dynamicznych list, • List dla statycznych predefiniowanych list, • Object dla powiązanych elementów z pojedynczymi nazwami i wartościami. 5. Kliknij ponownie na ikonie z symbolem + aby dodać drugi parametr, czyli zmienną target. Dwukrotnie kliknij na pozycji varName i wpisz target. Możesz również dodać domyślną wartość jak na przykład _self, które spowoduje otwarcie strony w bieżącym ujęciu bieżącego okna przeglądarki:
U dołu okna dialogowego znajduje się pole wyboru o nazwie Lock in instance/Lock in (Windows/Mac), które cały czas powinno być zaznaczone. Dzięki temu inni użytkownicy nie będą mogli zmieniać nazw parametrów wewnątrz sprytnego klipu. 6. Kliknij OK aby zakończyć definiowanie parametrów dla sprytnego klipu. Zauważ, że klip filmowy w bibliotece oznaczony jest nową ikoną wskazującą jego nowy status. Nowa ikona jest połączeniem klipu filmowego i skryptu, która to we Flashu oznacza sprytny klip. Jednakże w programie element ten nadal oznaczany jest nazwą klipu filmowego:
Sprytny klip jest już gotowy do zastosowania. Przed użyciem sprytnego klipu należy usunąć oryginalny klip filmowy ze sceny, ponieważ nowe parametry zdefiniowane dla sprytnego klipu nie zostaną zastosowane dla kopii, które już znajdują się na scenie.
7. Usuń klip filmowy ze sceny i przeciągnij nową kopię sprytnego klipu na główną scenę. Aby ustawić parametry dla klipu kliknij prawym klawiszem myszy na nim i przejdź do panelu Clip Parameters (Panels|Clip Parameters):
Rozdział 2-62
8. Dwukrotnie kliknij na polu Value dla zmiennej url i podaj adres innej strony internetowej. Możesz pozostawić wartość zmiennej target bez zmian, lub podać inną (jak na przykład _blank). Po dokonaniu tych modyfikacji zamknij okno dialogowe. Właśnie określiłeś parametry dla przycisku, czyli adres internetowy i cel dla tego adresu. Teraz wystarczy zastosować polecenie Control|Test Movie aby zobaczyć, czy wszystko poprawnie działa. Po wciśnięciu przycisku podany adres internetowy powinien został załadowany w oknie przeglądarki.
Wszechstronność sprytnych klipów Wielką zaletą wykonanego właśnie przez ciebie sprytnego klipu (a raczej wszystkich klipów tego typu) jest możliwość stosowania wielu jego kopii w filmie, z innymi ustawieniami dla każdego z osobna. Umieść jeszcze kilka przycisków sprytnego klipu na scenie, przypisz każdemu z nich inny adres internetowy i następnie przetestuj film. Teraz dysponujesz klipem filmowym, którego możesz zdefiniować na różne sposoby. Jak myślisz, ile czasu w ten sposób zaoszczędzisz? Oczywiście tworzenie sprytnego klipu umożliwiającego zmianę adresu internetowego nie jest znowu taką sensacją. Mimo wszystko modyfikacja polecenie getURL w bardziej konwencjonalny sposób nie wymaga znowu wielkiego wysiłku. Dlatego też przyjrzyjmy się teraz zastosowaniu sprytnego klipu, które naprawdę zaoszczędzi ci wiele czasu. Tworzenie uniwersalnego dźwiękowego sprytnego klipu
Ja zazwyczaj przypisuję dźwięk we Flashu dynamicznie z biblioteki, gdyż dzięki temu mogę indywidualnie kontrolować dźwięk. Jednakże, za każdym razem, gdy chcę dodać nowy muszę przebrnąć przez serię pięciu operacji: • utworzyć pusty klip filmowy dla dźwięku, który zostanie mu przypisany, • utworzyć nowy obiekt dźwiękowy, • przypisać dźwięki do nowego obiektu, • ustawić głośność, • określić, czy dźwięk ma być czy nie odtwarzany natychmiast. Według wszystkich moich znajomych moim głównym zajęciem jest upraszczanie sobie życia, więc na pewno się już zorientowałeś, że konieczność powtarzania wielokrotnie tych pięciu operacji nie bardzo mi odpowiada. Dlatego też potrzebuję sposób na przeciągnięcie i upuszczenie klipu filmowego, określenie dla niego kilku parametrów i nic więcej. Krótko mówiąc, potrzebuję sprytnego klipu dla dźwięku. 1. Otwórz nowy film i utwórz w nim nowy symbol klipu filmowego o nazwie soundObject. Dwukrotnie kliknij na pierwszym ujęciu, aby uzyskać dostęp do panelu Rozdział 2-63
Frame Actions, w którym dodasz kod. Upewnij się, że pracujesz w trybie Expert i wpisz poniższy wiersz kodu: s = new Sound(_parent[this._name]);
s oznacza nazwę nowego obiektu dźwiękowego. Do zdefiniowania s podajemy nazwę klipu filmowego, aby można go było niezależnie kontrolować. Zazwyczaj wystarczy wpisać nazwę klipu, lecz w tym przypadku nie wiemy, jak ten klip będzie się nazywać. Nie stanowi to jednak żadnego problemu, ponieważ możemy uzyskać nazwę klipu dynamicznie poprzez zastosowanie instrukcji parent[this._name]. 2. W następnym wierszu przypisujemy dźwięk do obiektu dźwięku: s.attachSound(chosenSound);
Zmienna chosenSound zostanie zdefiniowana później przez sprytny klip. 3. Następnie określamy głośność: s.setVolume(initVolume);
4. Na koniec chcemy, aby użytkownik mógł odtworzyć od razu dźwięk, jeśli tego będzie chciał. W tym celu stosujemy niewielkie instrukcja warunkowa: Jeśli parametr autoStart jest prawdziwy, Wówczas dźwięk zostanie natychmiast odtworzony; Jeśli parametr ten jest fałszywy, Dźwięk nic nie robi. W języku ActionScript będzie to brzmieć następująco: if (autoStart == "true") { s.start(0, loopAmount); }
Zauważ, że zastosowaliśmy również zmienną loopAmount. W sprytnym klipie będziesz mógł określić czy dźwięk będzie odtwarzany wielokrotnie, czy nie, i jak wiele razy. 5. Po kodzie definiującym dźwięki po prostu dodajemy akcję stop, aby klip nie był odtwarzany ciągle. Panel Frame Actions powinien wyglądać tak:
Po zdefiniowaniu klipu filmowego i przygotowaniu go do przekształcenia w sprytny klip, zajmiemy się dźwiękami. 6. Z powrotem na głównej scenie, wybierz polecenie File|Import aby uzyskać dostęp do okna dialogowego Import i wybrać kilka dźwięków z dysku twardego. Ja wybrałem Herbie Hancock i Rund DMC, lecz twój wybór może być inny:
Rozdział 2-64
7. W bibliotece odnajdź pierwszy dźwięk, kliknij na nim prawym klawiszem myszy i z wywołanego menu wybierz pozycję Linkage:
8. Aby dynamicznie przypisać dźwięk z biblioteki należy go eksportować i nadać mu identyfikator. Ja nazwałem moją pętlę Herbie Hancock herbie:
9. Powtórz tą procedurę dla każdego importowanego dźwięku, nadając każdemu z nich oddzielną nazwę. 10. Po odpowiednim zdefiniowaniu dźwięków możemy określić parametry dla sprytnego klipu. Kliknij prawym klawiszem myszy na klipie filmowym soundObject w bibliotece i zastosuj polecenie Define Clip Parameters aby utworzyć dwie zmienne, chosenSound i loopAmount z domyślnymi typami i wartościami. 11. Dla pozostałych dwóch parametrów zastosujemy nowy typ: listę (List). Aby zobaczyć sposób jego działania dodaj nowy parametr za pomocą ikony z symbolem + i nazwij go autoStart. Następnie w kolumnie Type dwukrotnie kliknij na pozycji Default i z menu wybierz typ List. Dzięki temu będzie można ograniczyć wartości, które można przypisać danemu parametrowi tylko do wybranych przez ciebie. Zauważ, że wówczas pozycja umieszczone w kolumnie Value zmienia się z defaultValue na (List[]). 12. Wiemy, że zmienna autoStart powinna mieć tylko dwa możliwe ustawienia: true lub false. Dwukrotnie kliknij na polu w kolumnie Value aby uzyskać dostęp do okna dialogowego Values. Możesz w nim wpisać wartości, z których użytkownik będzie mógł wybrać jedną. Podobnie jak w oknie dialogowym Clip Parameters za pomocą ikony z symbolem + dodaj wartości i nazwij je odpowiednio true i false. Po dokonaniu tych zmian kliknij OK:
Rozdział 2-65
Domyślna liczba odnosi się do elementu menu, który powinien pokazywać się domyślnie po otwarciu parametrów klipu. Wszystkie elementy menu rozpoczynają się od 0, dlatego też w tym przypadku „domyślne” ustawienie w menu będzie „prawdziwe”.
13. Na koniec dodaj czwarty parametr o nazwie initVolume i przypisz do niego typ List. Wprowadź kilka wartości dla ustawień głośności poprzez powtórzenie poprzedniego kroku. Ja wybrałem 0, 25, 50, 75 i 100, z których użytkownik będzie mógł wybrać tylko jedną. Nie będzie miał również możliwości wpisać innej wartości oprócz podanych. 14. Teraz wystarczy przeciągnąć kopię symbolu sprytnego klipu o nazwie soundObject na scenę. Podobnie jak w poprzednim ćwiczeniu możemy w oknie dialogowym Clip Parameters przypisać parametrom wybrane wartości, więc rozpocznijmy od wprowadzenia nazwy dla pętli dźwiękowej w polu chosenSound. Pamiętaj, że jest to nazwa łącznikowa, a nie nazwa dźwięku z biblioteki.
15. Zdefiniuj odpowiednio pozostałe parametry. Zauważysz, że dla parametrów określonych poprzednio jako typ List otwarte zostanie okno z listą, z której będziesz mógł wybierać wartości tylko na niej umieszczone. Teraz przetestuj film. Jeśli zmiennej autoStart przypisałeś wartość true, a zmiennej initVolume wartości innej niż 0, powinieneś usłyszeć pętlę dźwiękową. 16. Dla dalszego wprawiania się przeciągnij kolejny sprytny klip soundObject na scenę, przypisz mu inny dźwięk i wówczas ponownie przetestuj. Teraz powinieneś słyszeć dwa dźwięki. Utworzyliśmy sprytny klip umożliwiający przypisywanie dźwięków do filmów szybko i łatwo bez zagłębiania się w kod. Po pewnym czasie będziesz mógł skompletować bibliotekę sprytnych klipów gotowych do zastosowania w dowolnym projekcie. Zapisz obiekt na dysku twardym pod nazwą soundobj.fla. Tworzenie spersonalizowanych interfejsów użytkownika dla sprytnych klipów
W poprzednim ćwiczeniu zobaczyliśmy, w jaki sposób można określić głośność korzystając z rozwijanego menu. Chociaż metoda ta jest lepsza od wpisywania początkowej głośności do kodu, nie jest to mimo wszystko najlepsza konstrukcja interfejsu. Co będzie, jeśli użytkownik wolałby głośność inną od tych zdefiniowanych przez nas w menu? Potrzebujemy miłego, przyjaznego suwaka głośności, którego można nastawić na dowolna głośność pomiędzy 0 i 100. Oczywiście nie możemy wykonać takiego suwaka w oknie dialogowym Define Clip Parameters, lecz możemy stworzyć taki we Flashu i zastosować jako interfejs dla naszych parametrów. Rozdział 2-66
1. Utwórz nowy film Flasha o rozmiarze 250×150 pikseli, dla tła wybierz kolor jasnoszary. Możesz oczywiście wybrać zupełnie inny kolor, lecz szary jest standardowym kolorem interfejsu. Tło powinno wyglądać w następujący sposób:
2. Nadaj początkowej warstwie filmu slider back i narzędziem prostokąta narysuj wąski prostokąt o zaokrąglonych kątach. To będzie „szczelina” dla suwaka. Wysokość tego prostokąta powinna wynosić 100 pikseli. 3. Utwórz nową warstwę o nazwie slider i narysuj na niej przycisk w kształcie suwaka. Ja zastosowałem prostokąt o zaokrąglonych kątach o rozmiarach 30×13 pikseli. Korzystając z panelu Align umieść suwak na środku szczeliny:
4. Przekształć ten nowy utworzony kształt w symbol przycisk o nazwie slider button, a następnie w symbol klipu filmowego o nazwie slider. Otwórz panel Object Actions w obrębie klipu filmowego dla symbolu przycisku i wprowadź poniższy kod ActionScript: on (press) { startDrag ("", false, left, top, right, bottom); dragging = true; } on (release, releaseOutside) { stopDrag (); dragging = false; }
Ten fragment kodu umożliwia przeciągnięcie przycisku w dół i w górę. Zauważ, jednak, że nie podaliśmy szczegółowo zdefiniowanych ograniczeń dla prostokąta, kiedy rozpoczynamy przeciągać — stosujemy po prostu zmienne, które zostaną określone po uruchomieniu filmu. Dzięki temu możemy umieścić suwak w dowolnym miejscu na scenie i zawsze będzie on działać poprawnie. Przypisaliśmy również zmiennej dragging wartość true, jeśli przycisk jest przeciągany i wartość false jeśli nie jest:
Rozdział 2-67
5. Teraz powróć do głównej listwy czasowej, upewnij się, że została wybrana gałka suwaka i przejdź do panelu Object Actions. Musimy ustawić kilka zmiennych na moment, gdy film zostanie po raz pierwszy zainicjowany (czyli gdy się ładuje). Wpisz poniższy kod: onClipEvent (load) { top = _y-50; bottom = _y+50; left = _x; right = _x; }
Zmienne top, bottom, left i right stosowane są do akcji przeciągania. Ograniczają one gałkę suwaka w taki sposób, że może się ona poruszać jedynie w górę lub w dół o 15 pikseli w obu kierunkach od swojej pozycji startowej. Dlatego właśnie umieściliśmy gałkę suwaka na środku szczeliny, której długość wynosi 100 pikseli. Jeśli teraz obejrzysz film na podglądzie powinieneś mógł przeciągnąć suwak w dół i w górę. 6. Na koniec dodamy pole tekstowe pod suwakiem na głównej scenie, zdefiniowane jako Dynamic Text i nazwane initVolume:
Przygotowaliśmy już nasz suwak, lecz na nic się on nam nie przyda, dopóki nie będziemy potrafili przekazać wybraną wartość do sprytnego klipu. 7. Utwórz nową warstwę o nazwie exchange (ang. wymiana) i upewnij się, że nic innego nie jest wybrane. Teraz utwórz nowy symbol filmowy i nazwie xch. Warto podkreślić, że klip, który przekazuje informacje pomiędzy sprytnym klipem wchodzącym w skład interfejsu użytkownika a serwerem musi nosić nazwę xch — w taki sposób zaprogramowany jest Flash i dlatego żadna inna nazwa nie będzie działać.
8. Z biblioteki upuść nowy klip filmowy na scenę w dowolne miejsce. Następnie, co najważniejsze, nazwij ten klip xch w panelu Instance. Ta nazwa kopii jest istotna, ponieważ będzie ona funkcjonować jako pośrednik pomiędzy filmem Flasha i sprytnym klipem:
9. Teraz musimy zdefiniować suwak w taki sposób, aby przekazywał odpowiednią informację do sprytnego klipu. Wybierz gałkę suwaka i ponownie skieruj się do Rozdział 2-68
panelu Object Actions, gdzie dodasz poniższy kod po poprzednich akcjach onClipEvent (load): onClipEvent (enterFrame) { if (dragging == true) { _root.initVolume = int(100+(top-_y)); _root.xch.initVolume = _root.initVolume; }
Zdarzenie enterFrame wykonuje pętlę w czasie gdy, klip filmowy również wykonuje pętlę, dlatego też powyżej zdefiniowane akcje działają stale. Wiersz if jest instrukcją warunkową, która zapytuje, czy zmiennej draging przypisana jest wartość true. Jeśli tak, oznacza to, że suwak jest przeciągany i wówczas Flash wykonuje poniższe operacje: • przypisuje polu tekstowemu initVolume wartość pozycji suwaka. Proste wyrażenie rozpracowuje pozycję gałki suwaka; • określa parametr initVolume sprytnego klipu za pomocą klipu filmowego xch jako pośrednika. W tym przypadku przypisaliśmy mu wartość pola tekstowego initVolume, którą dopiero co określiliśmy gałką suwaka.
Teraz tak ustawiliśmy film Flasha, aby przekazywał wartość z przyjaznego użytkownikowi suwaka do odpowiedniego parametru. Zanim zastosujemy ten film jako interfejs, dodamy jeszcze inne parametry. 10. Utwórz nową warstwę o nazwie input i umieść na niej dwa pola Input Text ze zmiennymi o nazwach chosenSound i loopAmount. Obok tych pól tekstowych możesz również wstawić nazwy, aby inni ludzie wiedzieli, do czego one służą, gdy będą musieli je zastosować:
11. Musimy również dodać pole wyboru dla funkcji „auto-start”. Utwórz kolejną etykietę tekstową na scenie o nazwie Auto Start i obok niej narysuj kwadrat o rozmiarze pola wyboru. Przekształć go w symbol przycisku o nazwie checkbox. Następnie przekształć przycisk w symbol klipu filmowego o nazwie checkbox clip.
Rozdział 2-69
12. Dwukrotnie kliknij na nowym klipie, aby edytować symbol i nazwij pierwszą warstwę button. Następnie dwukrotnie kliknij na pierwszym ujęciu aby wywołać panel Frame Actions i wpisz poniższy kod ActionScript: stop (); _root.xch.autoStart = "true";
Druga linijka w tym kodzie przekazuje sprytnemu klipowi (przez klip filmowy xch), że dla funkcji autoStart przypisana została wartość true. 13. Utwórz nową warstwę o nazwie check. Dodaj prosty rysunek X nad polem wyboru, który będzie widoczny w pierwszym ujęciu warstwy:
14. Na tej samej warstwie w ujęciu 5 wstaw puste ujęcie kluczowe. Następnie, z powrotem na warstwie button, wstaw w ujęciu 5 ujęcie kluczowe, dwukrotnie na nim kliknij i w wywołanym panelu Frame Actions wpisz poniższy kod: stop (); _root.xch.autoStart = "false";
Zamierzamy wywołać ujęcia kluczowe na warstwie button z innego fragmentu kodu, dlatego też musimy dodać do nich etykiety. W panelu Frame dla pierwszego ujęcia dodaj etykietę true, a dla piątego etykietę false:
15. Przesuń wskaźnik odtwarzania do ujęcia 1, zaznacz przycisk check box i wywołaj panel Object Actions. Wpisz w nim poniższy kod: on (release) { gotoAndStop ("false"); }
Rozdział 2-70
16. Wykonaj to samo dla przycisku w ujęcie 5, lecz teraz przypisz mu wartość true, zamiast false. Umieściliśmy już wszystkie elementy interfejsu na miejscu, lecz musimy wykonać jeszcze jedną operację:
17. Na głównej scenie zaznacz gałkę suwaka i wywołaj panel Object Actions. Po linijce onClipEvent (load) { wprowadź poniższy kod: _root.oldchosenSound = _root.chosenSound; _root.oldloopAmount = _root.loopAmount;
18. Do fragmentu enterFrame onClipEvent wprowadź podświetlony kod ActionScript: onClipEvent (enterFrame) { if (_root.oldchosenSound != _root.chosenSound( { _root.xch.chosenSound = _root.chosenSound; _root.oldchosenSound = _root.chosenSound; } if (dragging == true) { _root.initVolume = int(100+(top-_y)); _root.xch.initVolume = _root.initVolume; } }
Ten kod ma formę instrukcji warunkowej, która sprawdza, czy zmienna oldchosenSound, która zostaje zdefiniowana po rozpoczęciu odtwarzania filmu, nie równa się (!=) bieżącej wartości w polu chosenSound. Oznacza to innymi słowy, że użytkownik wpisał coś nowego. Jeśli została ona zmieniona wówczas parametrowi chosenSound zostaje przypisana wymagana wartość poprzez klip filmowy xch. Na koniec przypisujemy zmiennej oldchosenSound tą nową wartość. Dlaczego nie przesyłamy ciągle wartości do klipu filmowego xch bez sprawdzania, czy wartość została zmieniona? Nie robimy tego, ponieważ jeśli komunikacja z klipem xch będzie nadal kontynuowana w takie pętli, znacznie zwolni ona działanie spersonalizowanego interfejsu. W tym przypadku oznaczałoby to, że suwak nie będzie płynnie działać. Aby uniknąć takiej sytuacji komunikujemy się z klipem xch tylko wówczas, gdy wiemy, że coś się zmieniło. Na koniec musimy dodać podobny warunek dla zmiennej loopAmount. Po ostatnim wprowadzonym przez ciebie fragmencie kodu ActionScript dodaj poniższy kod: onClipEvent (enterFrame) { if (_root.oldchosenSound != _root.chosenSound) { _root.xch.chosenSound = _root.chosenSound; _root.oldchosenSound = _root.chosenSound; } if _root.oldloopAmount != _root.loopAmount) { _root.xch.loopAmount = _root.loopAmount; _root.oldloopAmount = _root.loopAmount; } if (dragging == true) { _root.initVolume = int(100+(top-_y)); _root.xch.initVolume = _root.initVolume; }
Rozdział 2-71
}
19. Teraz wystarczy tylko eksportować klip. Eksportuj go w pliku soundui.swf do tego samego foldera co soundobj.fla wykonany przez ciebie wcześniej podczas testowania sprytnego klipu soundObject. 20. Aby zastosować twój nowy spersonalizowany interfejs najpierw należy otworzyć plik soundobj.fla. Następnie kliknij prawym klawiszem myszy na sprytnym klipie soundObject w bibliotece i z menu kontekstowego zastosuj polecenie Define Clip Parameters. Kliknij na ikonie foldera przy pozycji Link to custom UI, odnajdź plik ze spersonalizowanym interfejsem w formacie SWF, którego właśnie utworzyłeś i wciśnij przycisk Open. Teraz kliknij OK aby zamknąć okno Define Clip Parameters:
21. Teraz albo przeciągnij kopię sprytnego klipu soundObject na scenę, lub zastosuj jedną z istniejących. Kliknij na niej prawym klawiszem myszy i z menu kontekstowego wybierz polecenie Panels|Clip Parameters. Po wyświetleniu się panelu Clip Parameters w miejscu domyślnego okna dialogowego pojawi się twój spersonalizowany interfejs. Zmodyfikuj odpowiednio parametry i obejrzyj w podglądzie film. Powinieneś usłyszeć wybrany przez ciebie dźwięk o głośności wyregulowanej suwakiem:
22. Po obejrzeniu filmu w podglądzie powróć do edytora, cofnij zaznaczenie sprytnego klipu i ponownie go wybierz. Jeśli powrócisz do panelu Clip Parameters zauważysz, że dokonane przez ciebie zmiany nie zostały przedstawionej w spersonalizowanym interfejsie. Stało się tak ponieważ po każdorazowym wybraniu go film ze spersonalizowanym interfejsem użytkownika ładuje się w jego początkowym stanie. Twoje parametry nadal są wybrane, lecz nie zostały one przesłane z powrotem do spersonalizowanego interfejsu. Na szczęście możemy to naprawić. 23. Powróć do pliku soundui.fla. Najpierw będziemy musieli przypisać nazwy kopii do suwaka i pole wyboru na scenie. Nadaj suwakowi nazwę initVolumeSlider, a polu wyboru checkbox. Następnie utwórz nową warstwę o nazwie feedback i dodaj drugie ujęcie do wszystkich warstw. Drugie ujęcie jest bardzo ważne, ponieważ bez niego nie będzie działać żaden kod:
Rozdział 2-72
24. Utwórz ujęcie kluczowe w drugim ujęciu warstwy feedback. Dwukrotnie na nim kliknij, aby wywołać panel Frame Actions. Teraz wystarczy zastosować klip xch do przywrócenia parametrów zdefiniowanych w sprytnym klipie. Aby zdefiniować pole tekstowe initVolume wpisz poniższy kod: _root.initVolume = _root.xch.initVolume;
25. Teraz przypiszemy innej zmiennej wartość xch.initVolume: theinitVolume = _root.xch.initVolume;
26. Musimy również przesunąć suwak na właściwe miejsce poprzez odsunięcie klipu filmowego slider knob na osi y: if (_root.initVolume >=50) { initVolumeSlider._y = initVolumeSlider._y-(theinitVolume-50); } if (_root.initVolume < 50) { initVolumeSlider._y = initVolumeSlider._y+(50 theinitVolume); }
27. Określiliśmy już wartość dla suwaka, więc teraz należy zdefiniować wartości dla zmiennych chosenSound i loopAmount: _root.chosenSound = _root.xch.chosenSound; _root.loopAmount = _root.xch.loopAmount;
28. Na koniec należy przypisać polu wyboru odpowiedni stan, w zależności od tego, czy zmiennej autoStart przypisana jest wartość true czy false. Dokonamy tego poprzez kontrolowanie klipu filmowego checkbox wpisując poniższy kod po poprzedniej sekcji: if (_root.xch.autoStart == "true") { _root.checkbox.gotoAndStop ("true"); } if (_root.xch.autoStart == "false") { _root.checkbox.gotoAndStop("false"); {
Ponadto dodaj akcję stop do ostatniej linijki, aby film nie był odtwarzany ciągle. Twój kod ActionScript powinien wyglądać tak:
Rozdział 2-73
29. Teraz wystarczy eksportować ukończony plik ze spersonalizowanym interfejsem użytkownika pod taką samą nazwą jak poprzednio, zastępując poprzednią wersję. Powróć do pliku źródłowego obiektu dźwiękowego i wypróbuj go. Teraz spersonalizowany interfejs zawsze przedstawia bieżące ustawienia parametrów:
W ten sposób wykonaliśmy prosty i przyjazny projektantowi interfejs. Łatwe, prawda? Lecz możesz zrobić o wiele więcej. Ponieważ jest to tylko film Flasha osadzony wewnątrz panelu spełniającego rolę interfejsu, możesz zrobić wszystko to, co jest możliwe do wykonania w normalnym filmie. Pamiętaj tylko, że przeznaczeniem sprytnego klipu jest ułatwianie i zwiększanie funkcjonalności rzeczy, więc chociaż możesz udziwnić wszystkie panele, nie zdobędziesz przez to względów osób, które będą musiały ich codziennie używać. Można natomiast dodać więcej interesujących efektów i zwiększyć ich funkcjonalność. Rozszerzenie możliwości sprytnego klipu
Ponieważ możesz wykonać własne interfejsy użytkownika możesz dodać niestandardowe obiekty sterujące, takie jak suwak, dlaczego zaprzestawać na tym etapie? Możesz jeszcze bardziej rozbudować suwak: dlaczego by nie dodać pętli, która będzie uruchamiana przy każdym przesunięciu suwaka odzwierciedlając bieżącą głośność i w ten sposób umożliwiając użytkownikowi odsłuchanie muzyki i ułatwiając mu regulację głośności wedle jego życzenia. 1. Powróć do pliku soundui.fla i importuj nową pętlę dźwiękową. Najlepiej, aby to był jednostajny ton aby użytkownik mógł usłyszeć szybko i łatwo różnicę głośności. Jednakże możesz wybrać zupełnie inny dźwięk. 2. Otwórz bibliotekę i zlokalizuj świeżo importowany dźwięk, kliknij na nim prawym klawiszem myszy i z menu kontekstowego wybierz pozycję Linkage. Po wywołaniu okna dialogowego zaznacz opcję Export this symbol i nadaj mu identyfikator loop (ang. pętla):
Rozdział 2-74
3. Na głównej listwie czasowej dodaj nową warstwę o nazwie actions. Następnie wywołaj panel Frame Actions dla pierwszego ujęcia na tej warstwie. 4. Teraz musimy dodać dźwięk. W tym celu inicjujemy nowy obiekt dźwiękowy i przypisujemy nasz dźwięk do niego w taki sam sposób jak robiliśmy to poprzednio w pliku soundobj.fla: s = new Sound(); s.attachSound("loop");
Nazwę w nawiasie określiliśmy w oknie dialogowym Linkage. 5. Na koniec dodamy wiersz kodu aby ustawić początkową głośność na 0: s.setVolume(0);
6. Teraz musimy zastosować bieżącą pozycję suwaka aby wyregulować głośność dźwięku. Na warstwie suwaka wybierz gałkę suwaka i otwórz panel Object Actions. Zlokalizuj warunek if (dragging==true) i między klamrami dodaj podkreślony fragment kodu: if (dragging == true) { _root.s.setVolume(int(100+(top-_y))); _root.initVolume = int(100+(top-_y)); _root.xch.initVolume = _root.initVolume; }
Jest to ogólnie ten sam kod, jakiego zastosowaliśmy dla zmiennej initVolume, lecz tym razem określamy głośność obiektu dźwiękowego s, czyli naszego dźwięku loop. 7. Gdybyśmy przetestowali kod na tym etapie niczego nie usłyszelibyśmy, ponieważ nie określiliśmy uruchamiania odtwarzania dźwięku. Nie chcemy, aby dźwięk był odtwarzany ciągle, dlatego że byłoby to bardzo irytujące. Chcemy jedynie usłyszeć pętle dźwiękową gdy przesuniemy gałkę suwaka. W ten sposób po wyregulowaniu suwaka usłyszymy dźwięk o określonej głośności. 8. Dwukrotnie kliknij na klipie gałki suwaka, aby edytować ten symbol. Zaznacz w nim przycisk suwaka i przejdź do panelu Object Actions. 9. Wewnątrz funkcji obsługi zdarzenia on (press)dodaj podświetloną linijkę kodu ActionScript aby rozpocząć odtwarzanie dźwięku: on (press) { startDrag ("", false, left, top, right, bottom); dragging = true; _root.s.start(0, 999); }
W ten sposób nasza pętla dźwiękowa zostanie odtworzona zaraz po wciśnięciu suwaka. Liczba 999 oznacza, że dźwięk ma zostać odtworzony 999 razy, co prawie równa się nieskończoności, więc chyba już zgadniesz jak będzie wyglądać następny fragment kodu... 10. Zgadza się! Teraz zatrzymamy odtwarzanie dźwięku gdy suwak nie jest już wciśnięty. Do funkcji obsługi zdarzenia on (release, releaseOutside)dodaj poniższy podświetlony fragment kodu: Rozdział 2-75
W ten sposób odtwarzanie dźwięku zostanie zatrzymane po zwolnieniu suwaka. 11. Na koniec przetestuj film. Podczas przesuwania suwaka dźwięk powinien być coraz głośniejszy, a coraz cichszy przy przesuwaniu suwaka w dół. Dzięki temu natychmiast wiesz, jakie jest natężenie dźwięku w danej chwili. Teraz wystarczy tylko eksportować spersonalizowany interfejs użytkownika pod taką sama nazwą, jak poprzednio, i wówczas wypróbować obiekt dźwiękowy. Jak widzisz sprytne klipy są niezwykle użytecznie do przyspieszania i upraszczania przyziemnych zadań, upłynniania pracy i oszczędzania czasu. Prawdę mówiąc, całkiem wykonalne jest zbudowanie takiego sprytnego klipu, który potrafiłby stworzyć we Flashu całą witrynę internetową. Więc na co czekasz? Czas na udoskonalanie twoich sprytnych klipów!
Rozdział 2-76
Część 2. Tworzenie zawartości
Rozdział 3 Flash i zewnętrzne aplikacje 3D Od czasu debiutu na takich witrynach internetowych jak mano1 czy WackedUSA, trzeci wymiar przyciąga coraz więcej uwagi (obszerniejszą listę witryn internetowych znajdziesz na stronie Resources w katalogu tego rozdziału na płycie CD-ROM). Użytkownicy zaczynają zdawać sobie sprawę, że kadr Flasha naprawdę można ożywić poprzez zastosowanie tych elementów. 3D w ciągu kilku następnych lat stanie się centralnym elementem w Sieci i ty masz szansę ukształtować trzeci wymiar. Oprogramowanie do tworzenia 3D tradycyjnie rozwija się wokół tworzenia rastrowych obrazków renderowanych z bardzo dużą dokładnością dla uzyskania jakości fotograficznej. Efekty tworzone w tych programach są to głównie zdjęcia i animacje dla przemysłu rozrywkowego, ilustracje dla drukowanych publikacji, bądź też różnego rodzaju, jak na przykład inżynierskie, projekty. Jednakże, z powodu ograniczonych możliwości eksportowania dostępnych pakietów tworzenia zawartości, połączenie dwóch światów wektorowej animacji o niewielkim rozmiarze plików i obrazków trójwymiarowych, chociaż bardzo intrygujące, było po prostu niemożliwe. Do teraz. Jedynie rok temu tworzenie obiektów 3D we Flashu było niezwykle długotrwałą i pieczołowitą operacją, z niewieloma opcjami dostępnymi dla użytkownika. Można było wykonać obrazek w programie do tworzenia 3D, importować go do Flasha i wtedy, na warstwie wyżej, ręcznie śledzić kontury obrazka. Lecz jeśli chciałeś wykonać animację, trzeba było śledzić kilka serie obrazków, następnie usunąć mapy bitowe i ręcznie wypełnić odrysowane przez ciebie kształty. Oznaczało to godziny nudnej pracy potrzebne do wykonanej tyko animacji. Inna metoda polegała na przekształceniu obrazka mapy bitowej w obrazek wektorowy poleceniem Modify|Trace Bitmap, lub w jakiś inny sposób przekształcenia mapy bitowej w obrazek wektorowy. W efekcie powstawały dosyć znaczne liczby wektorów dające rozmiary plików przekraczające rozmiary oryginalnej mapy bitowej. Korzystając z tej techniki istnieje również niebezpieczeństwo utraty istotnych linii obiektu, zmniejszenia liczby szczegółów i definicji obrazka, a także zniszczenia animacji. Alternatywnym wyjściem było zastosowaniem programu takie jak na przykład Adobe Dimensions. Wówczas tworzysz modele trójwymiarowe w tej aplikacji i eksportujesz je do formatu AI (Adobe Illustrator), gotowe do importowania do Flasha. Mimo, że wszystkie te
Rozdział 3-77
wczesne metody sprawdzały się, zabierały jednak zbyt dużo czasu i w konsekwencji były niepraktyczne dla większych animacji. W rozdziale tym przedstawimy ci sposoby zastosowania obecnych programów 3D, takich jak Swift 3D, Illustrate! i Vecta 3D do tworzenia rodzimych obrazków wektorowych dla Flasha. Rozpocznijmy od omówienia teorii tworzenia trzeciego wymiaru.
Podstawy teoretyczne 3D Chociaż w tym rozdziale elementy wykonane we Flashu będziemy nazywać elementami „3D”, w rzeczywistości nie będą one trójwymiarowe. Ściśle mówiąc będzie to dwuwymiarowe rzutowanie trójwymiarowego obiektu z danego punktu widzenia w programie do tworzenia elementów 3D. Każde ujęcie kluczowe może implementować potrzebne zmiany do tworzenie iluzji ruchu trójwymiarowego, lecz w rzeczywistości podczas tworzenia obrazków 3D nie używamy niczego więcej prócz perspektywy linearnej. Jak już wspomnieliśmy, inne alternatywy do stosowania wspomnianych programów są niezwykle czasochłonne i niezbyt efektywne, lecz po zaznajomieniu się z zastosowaniem tych nowych narzędzie będziesz zdziwiony, jakie jest to łatwe i wówczas będziesz w większym stopniu przygotowany do tworzenia zawartości 3D we Flashu.
Perspektywa liniowa i rzut ortogonalny Zanim zajmiemy się głównymi systemami 3D omówmy płaszczyzny kadru. Na każdym kadrze znajdują się płaszczyzny X i Y. Biegną one odpowiednio „od lewej do prawej” i „od góry do dołu”. Istnieje również trzecia płaszczyzna znana jako płaszczyzna Z. Biegnie ona od „bliskiej przestrzeni” do „dalekiej przestrzeni”. Właśnie dodanie płaszczyzny Z umożliwia nadaje kompozycjom realistyczny trójwymiarowy wygląd:
Przy pomocy jedynie płaszczyzny X i Y możemy stworzyć złudzenie obecności płaszczyzny Z. Można tego dokonać za pomocą wielu metod takich jak skalowanie, nakładanie i kolorowanie w celu stworzenia złudzenia głębi. Jednakże większość elementów, które uważamy za trójwymiarowe, jest zdefiniowana poprzez zbiegające się linie równoległe i wzajemne przenikanie. Te dwa systemy tworzą perspektywę linearną. Chociaż istnieje wiele innych reguł i systemów dla rzutowania trójwymiarowej zawartości jako 2D, system perspektywy linearnej jest napędzającym je silnikiem. Perspektywa linearna w celu uzyskania złudzenia trzeciego wymiaru stosuje linię horyzontu i zanikający punkt (lub punkty) wzdłuż tej linii. W perspektywie linearnej można wyróżnić trzy główne systemy: perspektywę jedno-, dwu- i trzy-punktową. Podczas tworzenia nieruchomych obrazków możemy wykorzystać wszystkie trzy perspektywy w jednym obrazku, lecz nie jest to Rozdział 3-78
konieczne. Jednakże, podczas animowania serii obrazków stosujemy wszystkie trzy poprzez różne ruchy obiektów. Przyjrzyjmy się trzem głównym systemom stosowanym w linearnej perspektywie. •
Zastosowanie jedno-punktowej perspektywy, w której wszystkie narysowane linie zbiegają się w tym samym punkcie, powoduje, że przednie i tylne krawędzie obiektu są równoległe do płaszczyzny kadru:
•
Zastosowanie dwu-punktowej perspektywy umożliwia wykonanie obiektu wyglądającego, jakby został umieszczony pod kątem w stosunku do płaszczyzny kadru. Jedna pozioma krawędź wystaje na pierwszym planie, a wszystkie górne i dolne krawędzie oddalają się i zbiegają się w znikających punktach na horyzoncie umieszczonych po prawej i lewej stronie:
•
Trzy-punktowa perspektywa używana jest do sugerowania pozycji oglądania od góry lub poniżej narysowanego obiektu. Podczas gdy w dwu-punktowej perspektywie niektóre narysowane linie były równoległe, w tej metodzie wszystkie z linii ciągną się z jednego z zanikających punktów:
Rozdział 3-79
Metody te umożliwiają nam oglądanie obiektów w trójwymiarowej przestrzeni. Jednakże, podczas tworzenia obiektów musimy również określić ich dwuwymiarowe płaszczyzny, czego dokonujemy przy pomocy systemu o nazwie rzutowania ortogonalnego. Oznacza to, że patrzymy na obiekt z różnych stron, jakbyśmy byli zamknięci w sześcianie, i tworzymy naszą reprezentacje 3D z dwuwymiarowych widoków. Zatem, podczas gdy perspektywa linearna przedstawiała obiekt w trójwymiarowej przestrzeni, rzut ortogonalny akcentuje kontury obiektu w dwuwymiarowej formie, aby nadać obiektowi perspektywę i wrażenie trójwymiarowości. Poniższy rysunek przedstawia obrazek z programu 3D Studio Max ilustrujący górny, lewy i przedni widok płaszczyzny, włącznie z widokiem perspektywicznym skonstruowanym z trzech wspomnianych: ORTHOGRAPHIC PROJECTION (RZUT ORTOGONALNY)
To jest właśnie moment, w którym wiele osób czuje się zdezorientowane poprzez wielość widoków. Mamy nadzieję, że dzięki ćwiczeniom zamieszczonym w tym rozdziale przyzwyczaisz się do interfejsu i płaszczyzn ortogonalnych i zaczniesz się czuć w świecie 3D jak u siebie w domu. Należy pamiętać, że tworzymy zawartość przy pomocy zarówno ortogonalnej jak i linearnej perspektywy, lecz renderujemy ją do dwuwymiarowej perspektywy linearnej. Program do tworzenia elementów trójwymiarowych wykonuje obliczanie przekonywującego dwuwymiarowego rzutu opartego na trójwymiarowym opisie wykonanym przez nas przy pomocy płaszczyzn X, Y i Z.
Rozdział 3-80
Przejdźmy teraz do samego tworzenia elementów 3D dla Flasha.
Tworzenie zawartości 3D we Flashu W tej części rozdziału rozpoczniemy przegląd różnych technik dostępnych dla tworzenia elementów trójwymiarowych dla filmów Flasha. Omówimy również rozmiary plików i strukturę. Najpierw zajmiemy się śledzeniem ręcznym i śledzeniem map bitowych, następnie przyjrzymy się trzem programom do tworzenia elementów 3D: Swift 3D, Vecta 3D i Illustrate!.
Ręczne śledzenie we Flashu Ręczne śledzenie jest oryginalną metodą służącą do tworzenia trójwymiarowej zawartości Flasha. Niektóre witryny, takie jak mano1 i WackedUSA zachowały swoje stare witryny wykonane tą techniką, więc możesz porównać jakie były efekty zastosowania ręcznego śledzenia i porównać je z bardziej nowoczesnym zautomatyzowanym procesem, o którym będziemy rozmawiać w dalszej części rozdziału. Nadal uznaje się te witryny za kilka z najlepiej wykonanych w Sieci, częściowo z tego powodu, że przy ręcznym śledzeniu należy szczegółowo zaplanować witrynę, a nie na łapu capu wypompować produkt. Jednakże, technika ta jest odrobinę zbyt wolnym i bardzo pieczołowitym procesem. My zastosujemy technikę ręcznego śledzenia do utworzenia prostego sześcianu, a następnie bardziej skomplikowanego kształtu z zakrzywionymi krawędziami. Ręczne śledzenie we Flashu
Element potrzebny dla tego ćwiczenia, czyli sześcian, znajduje się w pliku ht_1.fla na płycie CD-ROM dołączonej do książki.
Zauważ, że cała animacja składa się tylko z 7 ujęć. Jak widać sekwencja obrazków map bitowych została już umieszczona na warstwie zawierającej animację, jaką chcemy śledzić, czyli na warstwie 1. Sekwencja ta przedstawia różne stadia obrotu sześcianu. Umieściliśmy również nową warstwę — warstwę 2 — nad obrazkami z pustym ujęciem kluczowym dla każdej mapy bitowej. Zastosujemy ujęcia te na warstwie 2, aby śledzić kształty z obrazków map bitowych na warstwie 1. W pliku FLA zauważysz, że rozpoczęliśmy już śledzenie konturów sześcianu w pierwszym ujęciu. Rozdział 3-81
Pamiętaj, że chcemy śledzić tylko te elementy, które zawierają ruchy potrzebne do skompletowania cyklu animacji, nic więcej — na przykład, nie potrzebujemy śledzić kolorów ani cieniowania z map bitowych. W ten sposób ty zaoszczędzisz czas, a powstałe pliki będą mniejsze. Wykonajmy tą operację krok po kroku. 1. Zanim rozpoczniesz upewnij się, że włączona jest opcja Snap to Objects (View|Snap To Objects), gdyż ułatwi ona łączenie przecinających się linii na krawędziach sześcianu. Teraz wybierz narzędzie pióra, aby rozpocząć śledzenie obiektu. Nie wybieraj żadnego koloru dla wypełnienia (No Color). Jeśli tego nie zrobisz po przecięciu się linii utworzony obszar zostanie wypełniony kolorem i uniemożliwi śledzenie. Moglibyśmy do wykonania śledzenia zastosować narzędzie linii (Line), prawdę mówiąc sposób ten wykorzystywano w przeszłości, lecz narzędziem pióra śledzenie jest szybsze i łatwiejsze. Podczas stosowania pióra we Flashu należy pamiętać o pewnej usterce. Narzędzie to doskonale łączy przecinające się linie, oprócz ostatniej, którą należy utworzyć do ukończenia sieci wyśledzonych krawędzi. Jeśli spróbujesz połączyć ze sobą dwie ostatnie przecinające się linie, Flash rozpocznie usuwanie węzłów, które już umieściłeś. Należy więc najpierw zaznaczyć punkt pomiędzy dwoma ostatnimi punktami, które mają być połączone, a oto jak:
2. Najpierw kliknij na ujęcie 1 w warstwie 2, aby podświetlić węzły, które już dla ciebie przygotowaliśmy. Następnie kliknij na węźle nieskończonej linii, aby go również zaznaczyć.
Teraz kliknij na rogu, z którym ma zostać połączony aby narysować linie pomiędzy nimi.
Rozdział 3-82
Na koniec z powrotem kliknij na środkowym węźle aby usunąć go.
Teraz, jeśli ukryjesz warstwę 1, przekonasz się, że powstał doskonale wyśledzony trójwymiarowy sześcian w ujęciu 1 warstwy 2:
3. Teraz już dasz sobie radę na pozostałych ujęciach i wyśledzisz pozostałe stadia obracającego się sześcianu. 4. Po wyśledzeniu wszystkich ujęć usuń warstwę tła (czyli warstwę 1) zawierającą obrazki map bitowych, dzięki czemu pozostanie tylko wyśledzona wersja. Teraz przetestuj film. Powinieneś zobaczyć obracający się twój pierwszy obiekt trójwymiarowy wykonany we Flashu. 5. Na koniec ubierzmy trochę ten sześcian. Możesz tego dokonać poprzez wypełnienie boków wyśledzonego sześcianu różnymi barwami lub tylko jedną, lecz o różnej intensywności, aby zilustrować ruch w przestrzeni i stworzyć wrażenie sposobu oświetlenia obiektu:
Rozdział 3-83
6. Otwórz plik ht_shaded.swf z płyty CD-ROM aby zobaczyć ukończone ćwiczenie. Możesz również zasugerować oświetlenie obiektu stosując wypełnienia gradientowe. Jest to odrobinę trudniejsze, lecz gdy odpowiednio zastosowane, zwiększa prawdziwość ruchu i wyglądu obiektu. Jednym sposobem jest stworzenie gradientu, którego zastosujesz do wypełnienia kąta. Następnie wybierz z przybornika narzędzie kroplomierza i zaznacz wypełnienie gradientowe. W ten sposób wypełnienie zostanie zablokowane, a bieżącym narzędziem stanie się narzędzie wypełnienia (Paint Bucket). Wypełnienie zachowa również swój aspekt, dzięki czemu wypełnienie dla różnych ujęć będzie łatwiej wyrównać. Dopóki będzie wybrana opcja lock środek gradientu pozostanie w tym samym miejscu w kadrze.
7. Otwórz plik ht_lit.swf z płyty CD-ROM aby zobaczyć ukończony przykład oświetlenia. Po utworzeniu prostego sześcianu zajmijmy się czymś bardziej skomplikowanym i wykonajmy obiekty z zakrzywionymi krawędziami. Otwórz plik cone.fla z płyty CD-ROM i przy pomocy przedstawionej powyżej techniki wyśledź stożek. Może się okazać, że pomoże ci dodanie punktów biegnących od szczytu do podstawy obiektu:
Rozdział 3-84
Jeśli dałeś sobie radę z wykonaniem tego ćwiczenia na pewno nabrałeś większego uznania dla sposobu, w jaki powstały trójwymiarowe witryny internetowe, a twój szacunek dla umiejętności i cierpliwości pionierów wysokiej jakości ręcznego śledzenia 3D prawdopodobnie przebił dach. Chociaż narzędzia Flasha zostały przez lata ulepszone i śledzenie obiektów w ten sposób jest możliwe, nadal nie jest to łatwe zadanie. Możesz rozważyć zastosowanie programu FreeHand czy innej aplikacji do rysowania w celu wykonania bardziej złożonego śledzenia, dzięki czemu będziesz miał dostęp do bardziej zaawansowanych narzędzi do rysowania, a następnie będziesz mógł wypełnić obiekty kolorem we Flashu. Do efektywnego wykonywania ręcznie wyśledzonych elementów będziesz potrzebować program do tworzenia elementów 3D, w którym przygotujesz podstawowe obrazki do śledzenia. Jeśli nie posiadasz takiego w dodatku Resources znajdziesz informacje o kilku darmowych programach, które można pobrać z Sieci. Jeśli nie chcesz nauczyć się obsługiwania programu do tworzenia elementów 3D istnieją alternatywne rozwiązania, jakie możesz wybrać do tworzenia obrazków przeznaczonych do ręcznego śledzenia możesz użyć fragmenty domowych filmów wideo, które następnie przekształcisz w serie obrazków, lub obrazki z aparatu cyfrowego, podobnie jak w animacji poklatkowej. Aby zapewnić stały kąt aparatu, umieść go na trójnogu, następnie umieść obiekt w wizjerze i wykonaj nim kilka obrotów potrzebnych do animacji. Podczas tworzenia animacji powinieneś importować obrazki do klipu filmowego lub grafiki, dzięki czemu będziesz mógł umieścić wyśledzone obiekty w dowolnym miejscu na scenie i z łatwością zeskalować animację:
Rozdział 3-85
Przejrzyj pliki w folderze Stop Motion dla tego rozdziału znajdującym się na płycie CDROM, aby przekonać się w jaki sposób zastosowaliśmy te obrazki we Flashu. Innym sposobem na tworzenie trójwymiarowej zawartości dla witryn internetowych jest automatyczne śledzenie obrazka mapy bitowej przy pomocy polecenia Trace Bitmap dostępnego we Flashu. Chociaż na pierwszy rzut oka opcja ta stanowi logiczny wybór, zastosowanie tego polecenia może spowodować stworzenie większych plików wymagających przeprowadzenia większych porządków nic ręcznie śledzone mapy bitowe, jakie poprzednio wykonałeś. Jednakże, polecenie to może się przydać do stosowania na obrazkach o bardziej skomplikowanych kształtach niż prosty sześcian, nad którym pracowaliśmy. Automatyczne śledzenie obiektów
Jedną ze sztuczek do tworzenia wyśledzonych map bitowych jest zastosowanie obrazków wykonanych w białym i czarnym kolorze, lub w płaskich, jednolitych kolorach, gdyż płaskie wypełnienia przyspieszą proces śledzenia i ograniczą rozrost ukończonego pliku. Śledzenie tworzy oddzielne wektory dla różnych obszarów kolorystycznych, dlatego też zastosowanie jednolitych płaskich kolorów ograniczy liczbę tworzonych obszarów i dzięki temu zaoszczędzisz czas na sprzątaniu obrazka po wyśledzeniu go. W tym ćwiczeniu ponownie posłużymy się sześcianem, lecz tym razem Flash wyśledzi go automatycznie. 1. Otwórz plik tb_1.fla z płyty CD-ROM, zaznacz mapę bitową w ujęciu 1 i zastosuj polecenie Modify|Trace Bitmap, pojawi się poniższe okno dialogowe:
Aby uzyskać wybrany przez ciebie efekt będzie musiał odpowiednio dopasować tolerancje. Ponieważ importowałeś obrazek o niewielkiej liczbie kolorów proces będzie trochę łatwiejszy dla twojego komputera. 2. Dla opcji Color Threshold wybierz wartość 5, a dla Minimum Area 10 pikseli; dla Curve Fit i Corner Threshold pozostaw ustawienie Normal. Kliknij OK.
Zauważ, że różne obszary kolorystyczne zostały podzielone na oddzielne wektory — jak widać dwa przednie boki obiektu zostały zidentyfikowane jako w tym samym kolorze i zostały przetworzone w jeden kształt wektorowy. Teraz możemy usunąć obszary, jakich nie chcemy zatrzymać, czyli kolor tła poza sześcianem. Wykonamy to w dosyć niezgrabny sposób jak na operację, która wydaje Rozdział 3-86
się tak prosta do przeprowadzenia, lecz gdy już będziesz stosować bardziej skomplikowane obrazki zrozumiesz, dlaczego robimy to właśnie w taki sposób — jest to o wiele prostsze, nić próbowanie zaznaczenia wszystkich wyśledzonych elementów złożonego tła. 3. Zaznacz dwa wektory, jakie chcemy zostawić, czyli górne i przednie boki sześcianu i wytnij je ze sceny:
4. Teraz wybierz to, co pozostało na scenie i usuń — nie wycinaj — włącznie z najmniejszymi elementami, jakie tylko możesz znaleźć. 5. Na koniec wklej dwa składniki sześcianu z powrotem na scenę przy pomocy polecenia Edit|Paste in Pace. W ten sposób zostanie sześcian na pustej scenie. Po powiększeniu obiektu zauważysz, że jego krawędzie są postrzępione:
Możesz to naprawić poprzez usunięcie zbędnych węzłów narzędziem Subselect:
Rozdział 3-87
Pamiętaj, że usuwanie węzłów w dużym projekcie może okazać się dosyć nudne, i w czasie tego procesu możesz zmienić kształt obiektu i wówczas będziesz zmuszony do dokonania poprawek, aby animacja nadal przebiegała płynnie. Trzeba się naprawdę poświęcić, aby przejść przez cały proces śledzenia wykonany we Flashu...
Ogólne wskazówki dotyczące stosowania polecenia Trace Bitmap Do śledzenia mapy bitowej należy zdefiniować kilka parametrów:
Parametry te mogą cię nieco zmylić, jeśli nie rozumiesz w pełni działania tego narzędzia. Poniżej zamieściliśmy opisy poszczególnych opcji wraz z przykładami powszechnie stosowanych ustawień. Color Threshold Wartość progowa koloru (Color Threshold) modyfikuje sposób śledzenia mapy bitowej. Pod wpływem tego parametru Flash porównuje różnice w wartościach składowych modelu RGB dla dwóch pikseli. Jeśli różnica jest mniejsza od ustawienia wartości progowej koloru, wówczas dwa porównane piksele traktowane są jako piksele w tym samym kolorze. Zmniejszenie wartości progowej powoduje zmniejszenie liczby kolorów w ukończony, czyli wyśledzonym obrazku wektorowym. Ja zazwyczaj zaczynam od małej wartości, na przykład 5, dlatego że zazwyczaj wybieram obrazki, z których chcę wyśledzić tylko krawędzie zamierzam wypełnić te obiekty ręcznie po wyśledzeniu ich aby zasugerować oświetlenie. Jeśli twój obiekt zawiera więcej szczegółów zwiększ odpowiednio wartość progową. Minimum Area Parametr Minimum Area służy do przypisywania koloru do obszaru pikseli. Można mu przypisać wartość od 1 do 1000, a im większy jest minimalny obszar, tym gładszy, lecz mniej szczegółowy będzie końcowy obrazek. Ponieważ zazwyczaj będziesz mieć do czynienia z krótkimi seriami ujęć z programu do tworzenia elementów 3D i będziesz używać jedynie kolory potrzebne do oddzielenia obszarów, określ parametr minimalnego obszaru na 10. Jeśli jednak masz duży obrazek z wieloma kolorami, jak na przykład zdjęcie, z jakiego chcesz Rozdział 3-88
wyśledzić budynek, zwiększ odrobinę tą wartość, dzięki czemu uzyskasz główne obszary / linie budynku lub innego obiektu. Curve Fit Parametr Curve Fit określa stopień gładkości konturów. Do wyboru masz następujące opcje: piksele (Pixels), bardzo ciasny (Very Tight), ciasny (Tight), normalny (Normal), gładki (Smooth) i bardzo gładki (Very Smooth), i nazwy naprawdę mówią same za siebie. Ja zazwyczaj pozostawiam opcję Normal lub stosuje Tight bądź Very Tight aby zachować proste linie. Jeśli na obrazku znajduje się wiele krzywych kształtów wypróbuj opcję Smooth i Very Smooth, lecz w większości przypadku najlepszym ustawieniem jest opcja Normal. Corner Threshold Parametr Corner Threshold zachowuje lub wygładza ostre krawędzie. I w tym przypadku nazwy opcji mówią same za siebie: normalny (Normal), wiele rogów (Many Corners), mało rogów (Few Corners) a najlepszym ustawieniem okazuje się być opcja Normal. Nie istnieje żaden złoty środek pomocny w stosowaniu tej techniki: najlepiej nauczyć się jej metodą prób i błędów zapamiętując, kiedy należy stosować dane ustawienia, poprzez doświadczenie i osobiste preferencje. Poniżej zamieściliśmy kilka wskazówek przedstawiających dwa powszechnie stosowanych ustawień, które uważam za bardzo praktyczne. Aby uzyskać obrazek wektorowy o wyglądzie jak najbardziej zbliżonym do oryginalnej mapy bitowej zastosuj poniższe wartości: • Color Threshold: 10 • Minimum Area: 1 piksel • Curve Fit: Pixels • Corner Threshold: Many Corners Lecz w efekcie stosując te ustawienia powstaje więcej węzłów, niż potrzebujesz, co oznacza więcej sprzątania. A oto ustawienia, z których ja najczęściej korzystam: • • • •
Color Threshold: 5 Minimum Area: 10 pikseli Curve Fit: Normal Corner Threshold: Normal
Będziesz musiał wypróbować różne ustawienia, aby uzyskać dokładnie to co chcesz, lecz propozycje przedstawione powyżej pomogą ci przynajmniej od czegoś zacząć. Tyle o tworzeniu zawartości 3D we Flashu. Teraz przejdziemy do omówienia aplikacji do tworzenia elementów trójwymiarowych, jakie możesz zastosować w połączeniu z Flashem.
Tworzenie 3D w innych aplikacjach Do tworzenia trójwymiarowej zawartości możesz wykorzystać kilka różnych aplikacji. Chociaż wszystkie te produkty mają kilka cech wspólnych i tworzą podobne efekty, charakteryzuję się one jednak innymi metodami funkcjonowania. W tej części rozdziału omówimy każdy z programów, abyś, z pomocą kilku ćwiczeń, mógł wybrać najbardziej odpowiadającą ci aplikację.
Rozdział 3-89
Swift 3D Swift 3D jest najprawdopodobniej najbardziej rozwiniętym środowiskiem z wszystkich niezależnych produktów i jako jedyna aplikacja tego typu dostępna jest zarówno w wersji na pecet, jak i Macintosha. Program ten jest przeznaczony do tworzenia modeli o stosunkowo dużym stopniu złożoności i jako jedyny z omawianych aplikacji umożliwia tworzenia animacji metoda przeciągnij i upuść. Jest to ponadto jedyna niezależna aplikacja korzystająca z pliku 3DS (jest to plik wyjściowy programu 3D Studio Max firmy Discreet) i renderująca jego ścieżki animacji, światła i materiały. Należy zwrócić uwagę na fakt, że program Swift 3D nie powstał z przeznaczeniem do modelowania obiektów 3D, lecz do tworzenia animacji metodą przeciągnij i upuść, jak również jako narzędzie do wykonywania prostego modelowania dla tych użytkowników, którzy nie dysponują innym programem do tego celu.
Na płycie CD-ROM dołączonej do książki znajdziesz wersję próbną programu Swift 3D zarówno w wersji na peceta, jak i Macintosha. Mimo, że jest to ograniczona wersja demonstracyjna będziesz mógł przekonać się o możliwościach i ograniczeniach tej aplikacji. Razem wykonamy ćwiczenie przedstawiające sposób wspólnego zastosowania programów Flash i Swift 3D do tworzenia prostego trójwymiarowego obrazka. Na płycie umieściliśmy również pliki w formacie FLA do przestudiowania kilku zastosowań elementów 3D i metod łączenia ich z interakcją. Modelowanie w programie Swift 3D
W połączeniu Flasha i Swift 3D wykonamy model zamku, aby umożliwić ci zaznajomienie się z interfejsem i możliwościami renderingu programu. Ćwiczenie to może ułatwi ci również podjęcie decyzji, czy warto bądź nie zakupić omawiana aplikację. 1. Otwórz plik castle.fla we Flashu. Na potrzeby tego ćwiczenia, korzystając z ortogonalnego widoku, rozmieściliśmy już elementy zamku, nadają poszczególnym kształtom, murom i podstawom wież, różne kolory: CASTLE COMPONENTS (ELEMENTY ZAMKU)
Jednakże, po importowaniu elementów do Swift 3D wszystkie są w kolorze szarym, dlatego też nie jest niezbędnym oddzielanie kształtów w taki sposób — jeśli tylko są to zarysy określonych kształtów, program będzie potrafił je rozdzielić. Wszystkie mury zostały umieszczone na swoich miejscach, podobnie jak wieże, rozmieszczone w taki sposób, jakbyśmy patrzyli na nie z góry. W drugim ujęciu pliku FLA umieściliśmy również efekt, jaki będziemy starali się uzyskać:
Rozdział 3-90
2. Eksportuj ujęcie 1 (czyli płaski, ortogonalny układ) z pliku FLA jako plik EPS z Flash przy pomocy polecenia File|Export Image. W wyświetlonym oknie dialogowym z listy wybierz format EPS 3.0. 3. Teraz otwórz Swift 3D, zastosuj polecenie File|New i utwórz pusty dokument Swift 3D. Zastosuj polecenie File|Import i przejdź do pliku w formacie EPS, którego eksportowałeś z Flasha i importuj go. Importowane obrazki zostają automatycznie przekształcone w obiekty 3D o głębokości 0.05. Poprzez dodanie głębi dwa dwuwymiarowe obrazki przekształcają się w obiekty trójwymiarowe:
4. Aby pomniejszyć obrazek kliknij prawym klawiszem myszy (lub w Macintoshu kliknij z wciśniętym klawiszem Ctrl) na pustym obszarze sceny i przeciągnij kursor myszy w dół od obrazka. Teraz obrazek powinien zostać pomniejszony im bardziej będzie oddalać się od niego kursor myszy. Aby z powrotem go powiększyć wystarczy przesunąć kursor myszy w przeciwnym kierunku. Nie należy klikać na poszczególnych obiektach, gdyż w ten sposób zaczniesz poruszać nie kamerą, lecz właśnie nimi. Wszystkie modele importowane do Swift 3D składające się z kilku obiektów są automatycznie grupowane. Jeśli chcesz zmodyfikować daną część grupy, najpierw musisz ją rozgrupować przy pomocy polecenia Arrange|Ungroup. Następnie usuń zaznaczenie grupy klikając na pustym obszarze sceny. Teraz już możesz zaznaczyć oddzielnie poszczególne części:
Rozdział 3-91
5. Chcemy dodać wieżom więcej głębi, czego możemy dokonać poprzez wytłoczenie ich. Termin wytłaczanie oznacza proces rozciągania lub zgniatania obiektu wzdłuż jednej osi w celu zmiany jego głębi. 6. Zaznacza zewnętrzny pierścień jednej z wież i przejdź do przybornika właściwości (Property Toolbox) znajdującego się po lewej stronie ekranu. Zaznacz Sizing i zmień głębię (Depth) z 0.05 na 0.4 i wciśnij przycisk Apply. Na scenie natychmiast powinna być widoczna zmiana w wyglądzie obrazka.
7. Teraz zaznacz wewnętrzny promień wieży i w taki sam sposób jak powyżej, zmień jego głębię na 0.3.
8. W ten sposób ukończyliśmy wieżę, więc możesz już teraz zgrupować razem wewnętrzny i zewnętrzny pierścień jako obiekt poprzez wybranie jednego elementu i z wciśniętym klawiszem Shift kliknięcie na drugim. Po zaznaczeniu obydwu zastosuj polecenie Arrange|Group, aby je połączyć. 9. Aby zakończyć wytłaczanie powtórz kroki 6-8 dla pozostałych trzech wież. 10. Wszystkie dobre zamki potrzebują mury utrzymane, no cóż, w pozycji pionowej. Ponieważ po importowaniu ich do Swift 3D zostały już one nieco wytłoczone, nie musimy zmieniać ich rozmiaru, a tylko je przesunąć. Wartość oglądać obiekty z kilku stron podczas przesuwania ich, a można tego dokonać przy pomocy funkcji drugorzędnej kamery (Secondary Camera). Aby ją włączyć wystarczy kliknąć na ikonie Show Secondary Camera (ta z symbolem dwóch kamer) na głównym pasku narzędziowym:
Rozdział 3-92
Teraz efekty wytłoczenia widoczne są bardziej wyraźnie. 11. Zauważ, że w lewym górnym rogu każdego okna znajdują się przyciski informujące cię, z jakiego widoku aktualnie korzystasz. Zostaw pierwszy widok bez zmian, lecz zmień drugi tak, aby zamek był widoczny od góry:
12. Teraz w pierwszym widoku zaznacza najwyżej położony mur. Będzie to tylnia ściana zamku. Zauważ, że jest ona teraz wyświetlona na manipulatorze kulkowym w dolnym lewym rogu:
13. Kliknij na ikonie Lock Vertical, znajdującej się pomiędzy dwoma pozostałymi ikonami ze strzałkami. Poprzez wybranie tej opcji będziesz mógł przesunąć ścianę tylko w pionie. Przeciągnij manipulator kulkowy aż umieścisz mur na krawędzi skierowany flankowaniem do ciebie:
Rozdział 3-93
Zobaczysz, że mur jest odwrócony do góry nogami w oknie widoku, lecz pamiętaj, że jest to ortogonalny widok modelu. Ponieważ używamy widok frontowy jako widok z góry na dół prawdziwy widok z góry jest równoważny staniu na głowie za zamkiem. 14. Teraz wykonaj to samo dla pozostałych murów zmieniając drugi widok na widok z prawej, z lewej strony j z dołu (odpowiednio Right, Left i Bottom) i odpowiednio obracając ściany. Na przednim murze zamku umieściliśmy most zwodzony. Możesz z nim robić co ci się spodoba, otworzyć, zamknąć lub po prostu usunąć. Obrazek na tym etapie powinien wyglądać mniej więcej tak:
15. Chociaż ściany już stoją, nadal między nimi a wieżami są duże przerwy. Zamek wymaga jeszcze pewnych poprawek. Teraz przeciągniemy wszystkie oddzielne obiekty razem, aby uformować kompletny zamek. Z widoku frontowego zaznacz wieżę i przeciągnij ją na róg po lewej stronie z przodu zamku:
16. Następnie wyrównaj wszystkie pozostałe mury i wieże względem pierwszej przesuniętej:
Rozdział 3-94
17. Teraz, gdy spojrzysz na drugi widok zobaczysz, że dolne części wież nie są wyrównane z dolnymi częściami murów. Umieść je poprawnie poprzez wybranie odpowiednich widoków i przeciągniecie tych elementów na miejsce:
18. Zastosuj polecenie Edit|Select All, a następnie przejdź do menu Arrange i zgrupuj wszystkie elementy zamku razem. 19. Teraz możemy już pokolorować model metodą przeciągnij i upuść dostępną u dołu po prawej stronie ekranu:
Każda z kul reprezentuje kolor i teksturę jaką można nanieść na obiekt. Masz do wyboru około tuzina różnych palet materiałów. Aby zastosować je wystarczy przeciągnąć wybrany przez ciebie kolor na obiekt:
Rozdział 3-95
Zauważ, że chociaż model jest zgrupowany, poszczególne jego elementy można kolorować oddzielnie. Po ukończeniu modelu należy go zrenderować jako plik w formacie SWF. Rendering można wytłumaczyć jako efektywne zrobienie zdjęcia obiektowi. Często jest to jednak proces niezwykle obarczający procesor, ponieważ komputer musi wziąć pod uwagę wszystko, co widać na każdym obrazku, a następnie obliczyć jak każdy piksel będzie wyglądać w zależności od jego pozycji, koloru i tekstury, a także pozycji, koloru i intensywności światła czy świateł oświetlających go.
Rendering w programie Swift 3D W programie Swift 3D dysponujesz kilkoma opcjami renderowania. Przejdźmy teraz do omówienia i ocenienia ich. Aby uzyskać dostęp do opcji renderowania zastosuj na pececie polecenie File|Export...
I takie samo na Macintoshu, a następnie wpisz nazwę pliku i wciśnij przycisk Save/OK.:
Na Macintoshu pamiętaj, aby zapisać plik i przeczytać dokumentację Electric Rain o ustawieniach pamięci przez renderowaniem konstrukcji.
W oknie dialogowym Export najpierw należy zdecydować czy chcesz zachować krawędzie obiektu, czy nie (pole wyboru Include Edges). W zależności od decyzji będziesz mógł lub nie widzieć siatkę, z jakiej skonstruowany jest obiekt. Wybór opcji Entire Mesh uwidoczni każdą linię w modelu, a opcja Outline pokaże bardziej przyjazny oglądającemu widok obrazka:
Rozdział 3-96
ENTIRE MESH (OPCJA ENTIRE MESH)
OUTLINE (OPCJA OUTLINE)
Możesz również zastosować kontury w połączeniu z wypełnieniem. Jest przydatne zwłaszcza wówczas, gdy eksportujesz obiekt jako płaskie wypełnienie, gdyż możliwość ta pozwala na zdefiniowanie modelu. Poniżej zamieściliśmy krótkie opisy wraz z przykładami opcji eksportowania wypełnienia. • Flat Fill. Po wybraniu tej opcji eksportowane zostaną tylko wypełnione obszary modelu bez oświetlenia ani innych efektów. Zazwyczaj jest to najszybszy i najmniejszy z trybów renderowania. Rysunki przedstawione poniżej ilustrują modele z i bez konturów, abyś wyraźnie mógł obejrzeć różnicę pomiędzy nimi:
•
Rozmiar pliku dla płaskiego wypełnionego modelu w formacie SWF po lewej stronie wynosi 3k, a rozmiar pliku wypełnionego modelu w formacie SWF z zachowanymi konturami wynosi 7k. Average Fill. Opcja ta jest zbliżona działaniem do poprzedniej, lecz częściowo zachowuje też oświetlenie, poprzez obliczenie średniego oświetlenia na każdej powierzchni, a następnie płaskie wypełnienie tej powierzchni w jednym średnim kolorze. W efekcie obiekt zyskuje więcej szczegółów, lecz nadal są one widoczne w płaskich kolorach.
Rozdział 3-97
•
•
Rozmiar tego pliku w formacie SWF wynosi 4k. Area Fill. Po wybraniu tej opcji obiekty w różnym kolorze zostaną wypełnione gradientem z zastosowaniem źródeł światła. Opcja ta nie jest jednak zbyt dopracowana, gdyż wyświetla ona tylko jedno odbite źródło świtała na każdej powierzchni. Wystarcza to dla najprostszych renderowanych obiektów, lecz nie jest odpowiedni dla uzyskania jak najlepszej jakości renderingu.
Rozmiar tego pliku w formacie SWF wynosi 9k. Mesh Fill. Po wybraniu tej opcji wszystkie wielokąty zostaną zastosowane do utworzenie renderowanej powierzchni. Ponadto w pełni oświetla obrazek z wszystkich dostępnych źródeł światła pokazując właściwie pokolorowane odbicia każdego światła na każdej powierzchni. Opcja ta daje rendering najwyższej jakości dla oświetlonych obiektów, lecz jak zawsze w takich przypadkach, tworzy również największe pliki:
Rozmiar tego pliku w formacie SWF wynosi 26k. Połączenie siatki i wypełnień będzie zależało od kilku czynników: • Gdzie chcesz opublikować obrazek: o Jeśli planujesz umieścić ukończony obrazek w Sieci, najlepiej nie wychodzić poza opcję Area Fill, gdyż rozmiar obrazka będzie zbyt duży i użytkownicy nie będą go mogli pobrać stosunkowo szybko. Najlepiej najpierw zrenderować obrazek z opcją Average Fill uzyskując w ten sposób stosunkową niską jakość i obejrzeć go, jak się prezentuje w pliku Flasha zanim zdecydujesz się na dalszy krok. Będziesz zdziwiony, gdy się przekonasz, że bardzo często niższej jakości obrazek wystarcza po wprowadzeniu go do kompletnej witryny internetowej. o Jeśli planujesz umieścić obrazek na płycie CD-ROM lub uruchamiać go z dysku twardego, wówczas bez obawy możesz zastosować opcję Mesh Fill dla każdego ujęcia. Jedynym ograniczeniem będzie wówczas dla ciebie ilość cierpliwości, jaką dysponujesz przy oczekiwaniu na zrenderowanie sceny. Przetworzenie w pełni oświetlonej animacji może trwać naprawdę bardzo długo. • Jak bardzo skomplikowany jest model: o Dla prostego modelu możesz zastosować lepszą jakość z jednoczesnym zachowaniem stosunkowo niewielkiego rozmiaru pliku. Ponadto, podczas pracy nad prostym modelem często będziesz się przekonywać, że uzyskasz obrazek o lepszej jakości stosując opcję Area Fill zamiast Mesh Fill. Niestety Rozdział 3-98
•
jedynym sposobem na sprawdzenie tego jest zrenderowanie obrazka z obydwiema opcjami i następnie wybranie bardziej odpowiadającej ci wersji. Jaki chcesz uzyskać efekt: o Oczywiście ostatecznie od ciebie zależy, jaki chcesz uzyskać efekt. Możesz potrzebować tylko cartoon shading uzyskiwanego poprzez zastosowanie opcji Flat Fill z Outlines i wówczas gorsza jakość obrazka powinna być dla ciebie w pełni satysfakcjonująca. Z drugiej jednak strony, czasami efekt, jakiego chcesz uzyskać można będzie wykonać jedynie z zastosowaniem opcji Mesh Fill dającej najwyższą jakość. W takim przypadku poeksperymentuj, a może pójdziesz na kompromis poprzez zmniejszenie jakości lub zawartości innej części witryny internetowej, aby zachować wygodny czas pobierania jej elementów.
W folderze tego rozdziału znajdującym się na płycie CD-ROM, o nazwie Swift 3D Castle Exports, znajdziesz przykłady zastosowania każdej z dostępnych opcji. Program Swift 3D posiada oczywiście o wiele więcej możliwości, o których tutaj nie wspomnieliśmy, a jedną z najbardziej oczywistych jest prawdopodobnie animacja. Do tworzenia animacji w omawianej aplikacji służy listwa czasowa i system ujęć kluczowych bardzo zbliżony do tego stosowanego we Flashu, który umożliwia szybką i łatwą animację trójwymiarowych modeli. Metody tworzenia animacji, a także wiele więcej informacji znajdziesz w dokumentacji do programu Swift 3D, znajdującej się w folderze, w którym zainstalowałeś wersję demonstracyjną tej aplikacji. Po eksportowaniu animacji do pliku w formacie SWF możesz z łatwością dołączyć plik do filmu Flasha albo poprzez zastosowanie polecenia loadMovie lub poprzez importowanie pliku SWF do Flasha jako serii ujęć kluczowych. Aby praca z nimi przebiegała bezproblemowo zalecam wklejenie wszystkich ujęć do klipu filmowego, co ułatwi ci kontrolę nad nimi. Podczas tworzenia tej książki goście z Electric Rain pracowali nad nową wersją programu Swift 3D i zdradzili nam kilka nowinek. Pamiętaj, że wszystko jest w trakcie projektowania i nie wiadomo jeszcze dokładnie, co ostatecznie będzie zawierać nowa edycja. Narzędzie do renderingu w programie Swift 3D, RAViX, przeszło znaczną modernizację. Nie tylko zwiększy się prędkość jego działania, lecz również zostanie wzbogacone o kilka nowych opcji, ulepszoną optymalizację rozmiaru plików i lepszą obsługę modeli o dużej liczbie kątów. V2 będzie importować najpopularniejsze formaty plików 3D włącznie z 3DS, DXF i LWO. Nowe właściwości zostaną również dodane do ulepszenia tworzenia obiektów trójwymiarowych w programie i do zwiększenia kontroli nad tymi obiektami. Oczywiście V2 będzie zawierać jeszcze wiele innych podniecających właściwości. Już nie mogę się doczekać pełnej wersji!
3D Studio Max Do tworzenia animowanych (i statycznych) obrazków trójwymiarowych możesz również w Swift 3D zastosować modele wykonane w 3D Studio Max w formacie 3DS. wersja próbna programu Swift 3D zamieszczona na płycie CD-ROM zawiera pojedynczy model do eksperymentowania — zostanie on automatycznie importowany po wybraniu opcji 3D Studio file w oknie dialogowym New File Wizard:
Rozdział 3-99
Modele w formacie 3DS zapisane w programie 3D Studio Max zachowają swoje kolory, oświetlenie i animację, co jest znaczna zaletą gdy wykonujesz skomplikowaną animację. Model dostarczony z programem Swift 3D nie jest jednak animowany. Przy pomocy tych samych technik, jak poprzednio, możesz z łatwością animować i następnie eksportować plik. Istnieje wiele witryn internetowych i różnych źródeł, z których można pobrać darmowe modele w formacie 3DS, co zaoszczędzi ci wiele czasu i pieniędzy przeznaczonych na projekty. Więcej informacji na temat tych źródeł zamieścimy w dalszej części rozdziału. Chociaż do programu Swift 3D możesz importować modele w formacie 3DS, nie są one niezbędne do tworzenia atrakcyjnych modeli dla twojej witryny. Mimo, że Swift 3D charakteryzuje się znacznymi ograniczeniami odnośnie tworzenia różnych typów modeli, lecz zrozumienie tych ograniczeń i planowanie z wyprzedzeniem da ci możliwość tworzenia dynamicznych interfejsów i wspomagających właściwości dla modeli, które możesz uzyskać z Sieci za darmo. Przyjrzyjmy się teraz kilku innym metodom modelowania obiektów trójwymiarowych, jakie można zastosować we Flashu. Omówimy również kilka programów, które świeżo pojawiły się na horyzoncie podczas drukowania tej książki. Zacznijmy od programu Vecta 3D.
Vecta 3D Program Vecta 3D jest porównywalny ze Swift 3D tylko pod tym względem, że również jest niezależną aplikacją, jednakże metody modelowania i interfejs jest zupełnie inny. Charakteryzuje się on kilkoma oryginalnymi właściwościami, takimi jak przycisk perspektywy i zdolność edycji środka modelu, lecz animacja ograniczona jest wyłącznie do obracania obiektu wokół jego środka. Ponadto ograniczone są również jego możliwości tworzenia modeli z plików AI, gdyż możesz jedynie importować pojedynczy plik i wytłoczyć go. Nie można podzielić pliku na oddzielne fragmenty ani importować innych plików w formacie AI do zbudowania bardziej złożonego modelu. W ten sposób znacznie ograniczona jest kreatywność w tworzeniu własnych modeli we Flashu, lecz mimo wszystko program ten nadaje się do tworzenia innych elementów, takich jak logo. Przyjrzyjmy się teraz interfejsowi programu Vecta 3D:
Rozdział 3-100
Większość kontrolerów Vecta 3D znajduje się na frontowym panelu i są one zgrupowane w zależności od ich przeznaczenia. Narzędzia do animacji znacznie różnią się od narzędzi tego typu dostępnych w innych programach pod tym względem, że rotację modelu czy kamery określa się za pomocą stopni kąta. Chociaż w Vecta 3D tworzenie animacji opiera się na dokładnych obliczeniach matematycznych, nie możesz przeciągnąć obiektu do następnego punktu czy rotacji dla animacji. Ta metoda matematyczna jest dosyć skomplikowana i nie tak przyjazna użytkownikowi jak animacja metodą przeciągnij i upuść, lecz umożliwia tworzenie niezwykle precyzyjnej animacji. Chociaż program został zaopatrzony również w zautomatyzowany sposób tworzenia animacji, jest on dosyć sztywny i trudny w obsłudze. W omawianej aplikacji można oświetlać modele, lecz jedynie z zastosowaniem jednego źródła światła, które może być tylko w jednym kolorze — białym. Jeśli chcesz obejrzeć przykład oświetlonego modelu wykonanego w programie Vecta 3D, zajrzyj do pliku vectalit.swf znajdującego się na płycie CD-ROM:
Rozdział 3-101
Prostym sposobem na utworzenie animacji w Vecta 3D jest przeniesienie ręcznie modelu o ułamek cala i wówczas zrenderowanie go do formatu Illustratora (AI). Następnie ponownie przesuwamy model powtarzając ten proces aż uzyskamy wszystkie ruchy potrzebne do wykonania animacji. Metoda taka ma swoje wady, jak i zalety: chociaż pomoże ci ona w kontrolowaniu liczby obrazków potrzebnych do utworzenia ruchu, dostępne kontrolery mogą utrudnić bezproblemowe poradzenie sobie z modelem. W czasie pisania tej książki nie było jeszcze wersji demonstracyjnej omawianej aplikacji, lecz jeśli uda ci się ją znaleźć, warto wypróbować ten program i zaznajomić się z jego interfejsem i metodami tworzenia animacji, aby móc porównać je z innymi aplikacjami. Vecta 3D daje proste rozwiązania: wykonany obrazek można eksportować do plików w formacie SWF i AI, a animacja renderuje się szybko i solidnie. Jednakże, jest ona ograniczona sposobem obsługiwania animacji. Można wprowadzić do tej aplikacji kilka modeli w formacie 3DS i zrenderować je w formie animacji, lub wykonać proste wytłoczone kształty z importowanych plików w formacie AI. Warto zwrócić uwagę na ten produkt, lecz na tym etapie nie jest on jeszcze w pełni rozwiniętym, ani tak dojrzałym jak Swift 3D.
Pluginy programów Illustrate! 5.0 i Vecta 3D-Max Dla programu 3D Studio Max dostępne są dwie wtyczki, dzięki którym można renderować obiekty do plików w formacie SWF: Vecta 3D-Max i Illustrate! 5.0. Ponadto, w trakcie druku tej książki pojawiła się na rynku również wtyczka 3Dmax firmy Erain. Dzięki pluginowi Vecta 3D-MAX można renderować pliki do takich samych formatów jak w programie Vecta 3D, lecz bez oświetlenia. W tej wersji nie ma żadnych problemów z widokami kamery, gdyż zawartość jest renderowana w środowisku 3D Studio Max. Z zastosowaniem wtyczki wykonanie dobrego modelu trójwymiarowego i eksportowanie go w formacie obsługiwanym przez Flasha staje się o wiele łatwiejsze. Illustrate! 5.0 pojawił się na rysunku w czasie pisania tej książki i na pierwszy rzut oka wygląda bardzo obiecująco, gdyż oferuje bogata kolekcję nowych i zaawansowanych właściwości. Można w nim tworzyć płaskie wypełnienia, cartoon shading, cel shaded i gradientowo oświetlone modele. Wtyczka ta umożliwia również tworzenie cieni i odbić, a wygląd ukończonych kompozycji jest o wiele bardziej realistyczny. Darmowa wersja próbna tego produktu dostępna jest w witrynie davidgould, lecz nie zapomnij, że do zastosowania jego musisz posiadać program 3D Studio Max. Więcej informacji o tym produkcie włącznie z przykładami znajdziesz pod adresem www.davidgould.com.
Amorphium Pro Jest to świetnie zapowiadający się nowy produkt, którego wersja beta była dostępna wówczas, gdy książka ta szła do druku. Na płycie CD-ROM zamieściliśmy próbną wersję tego programu. Jest to w pełni funkcjonalny pakiet, ale będzie w tle zapisywał znak wodny. Amorphium Pro charakteryzuje się środowiskiem do modelowania z prawdziwego zdarzenia, w którym możesz tworzyć złożone kształty i modele w bardzo krótkim czasie. Program ten zawiera tyle właściwości, że możemy tutaj opisać tylko najważniejsze z nich. Amorphium powstał trzy lata temu i początkowo był przeznaczony dla artystów nie specjalizujących się w środowisku trójwymiarowym. W aplikacji tej tworzono już efekty dla Rozdział 3-102
kilku głównych produkcji hollywoodzkich. Twórcy omawianego programu postanowili podejść do modelowania w taki sam sposób, jak artyści w rzeczywistym świecie, czyli pracując w glinie. Rozpoczynasz albo od parametrycznego kształtu (kula, sześcian, stożek, walec, torus, płaszczyzna lub tekst) wykonanego z wielokątów, czyli „cyfrowego wosku”. Wówczas możesz wymodelować ten kształt przy pomocy metod topienia, formując obiekt, lub stosując narzędzie Boolowskie do dodawania lub odejmowania materiału z modelu. Chociaż w programie zabrakło kilku właściwości stosowanych przez artystów specjalizujących się w modelach trójwymiarowych, można w nim świetnie modelować w nowym intuicyjnym środowisku. Uzyskane prace w formacie SWF nadają się do zastosowania w cartoon shaded work, a możliwość tworzenia cieni jest świetną zaletą programu, która na pewno zostanie doceniona przez użytkowników Flasha interesujących się trzecim wymiarem. Jedyny problem stanowią wypełnienia gradientowe i kontury, które mogą być zbyt „miękkie” w porównaniu do efektów uzyskanych w programie Swift 3D. Jednakże jest do solidny produkt, który znacznie przyczyni się do rozwoju rynku. W folderze Amorphium Pro Examples na płycie CD-ROM znajdziesz kilka przykładowych plików wykonanych w omawianej aplikacji. Przejdźmy teraz do omówienia głównych cech Amorphium Pro. Rozpocznijmy od interfejsu. Interfejs programu jest dosyć niekonwencjonalny i przyzwyczajenie się do niego wymaga pewnego czasu. Po lewej stronie znajduje się główny pasek menu, z którego wywołuje się podmenu, które z kolei na ekranie przybierają formę pływających pasków narzędziowych, takich jak te dwa przedstawione w górnej części poniższego rysunku:
Pozostałe części ekranu są bardziej znane. Składają się one z głównego obszaru roboczego, na którym możesz uzyskać kilka widoków modelu, i z listwy czasowej. Na listwie czasowej ustawiasz oświetlenie i animację, i podobnie jak w programie Swift 3D, jest to edytor obsługiwany metodą przeciągnij i upuść. Na listwie czasowej wymieniony jest każdy element, umożliwiając w ten sposób dodawanie ujęć kluczowych i animacji dla każdego obiektu na jego własnej listwie. Kolejną częścią interfejsu jest obszar narzędzi (Tools):
Rozdział 3-103
Jak widać, narzędzia są dosyć niekonwencjonalne. Zamiast zastosować normalne metody wytłaczania kształtujesz młotkiem parametryczny kształt lub formujesz go poprzez ugniatanie. Artysta specjalizujący się w tworzeniu modeli 3D przywykły do tradycyjnych metod pracy będzie potrzebować odrobiny czasu na przywyknięcie do tego pomysłu, lecz jest to świetny nowy sposób modelowania. Na rysunku przedstawiającym obszar narzędziowy widać kilka ustawień pędzla, które możesz dopasować dla różnych narzędzi na pasku narzędziowym. W pliku ball1.swf znajdziesz przykład efektu rozciągania zastosowanego na piłce w celu wyrażenia objętości i ruchu. Następnym interesującym nas elementem programu jest fabryka wosku (Wax Factory):
Jest to mój ulubiony obszar programu, gdyż pracując w nim czuję się, jak za dawnych dobrych czasów, gdy jako chłopiec bawiłem się ciepłym woskiem. Podobnie jak pozostałych obszarach interfejsu formujesz woskowy parametryczny kształt poprzez obcinanie go aż do uzyskania odpowiadającego ci kształtu. Metoda ta pozwala na uzyskanie wielu pięknych organicznych efektów. Przyjrzyj się przykładowi z pliku ice.swf przedstawiającemu topniejącą kostkę lodu, aby przekonać się o możliwościach tego programu. Sposób wykonania tego typu animacji jest następujący: najpierw przechodzisz do obszaru Composer, na listwie czasowej w miejscu, gdzie akcja ma się zakończyć wstawiać ujęcie kluczowe i wówczas po prostu topisz obszar, jaki ma zniknąć. I to wszystko — program wykona za ciebie cała resztę. Program zawiera jeszcze wiele innych ciekawostek, jak na przykład Paint Shop, w którym uważnie dodajesz kolory do poszczególnych części modelu. Amorphium Pro stanowi wielki krok naprzód w kierunku tworzenia modeli trójwymiarowych w formacie SWF. Jego środowisko jest pełne pomysłowych narzędzi i dodatków przydatnych do modelowania, a wykonany shaded cartoon jest mały i czysty z dobrym czasem renderowania. Program czasami może sprawiać problemy z renderowaniem modeli z gradientem czy konturami, lecz mamy nadzieję, że zostanie to wkrótce ulepszone. Innym problemem jest cena. 375 dolarów (Luty 2001) może być zbyt wygórowaną ceną dla użytkowników dopiero zaznajamiających się z trzecim wymiarem, lecz jeśli pragniesz tworzyć wspaniałe modele i uważasz, że nie będziesz się ograniczać jedynie do wykonywania kompozycji w formacie SWF możesz zainwestować w ten program.
Rozdział 3-104
Poser Firma Curious Labs dopiero co wkroczyła w świat SWF z programem Poser. Jest to aplikacja do modelowania postaci umożliwiająca tworzenie wielu różnorodnych form ludzkich i zwierzęcych. Program ten istnieje od kilku lat, lecz dopiero teraz został poszerzony o możliwość eksportowania do formatu SWF. W czasie oddania tej książki do druku ostateczna wersja programu jeszcze nie była gotowa, lecz na stronie firmy znajdziesz kilka przykładów kompozycji w formacie SWF wykonanych w programie Poser. Zawsze zwraca się uwagę na rozmiar pliku a duże animacje zawsze będą stanowić problem, lecz jeśli chcesz uzyskać doskonale wykonane postaci, możesz zakończyć swoje poszukiwania.
Interfejs Posera w łatwy sposób umożliwia animowanie i pozowanie ludzkich postaci dla sceny, czy kompozycji wykonanych w tym programie, lub eksportowanie ich jako modeli do innych programów. Obecnie narzędzie do eksportowania plików do formatu SWF stanowi dodatek do standardowego pakietu Poser 4. Cena detaliczna dodatku wynosi około 140 dolarów, a będzie on niezbędny dla użytkowników korzystających, lub chcących korzystać z Posera i Flasha.
Który produkt wybrać? Chociaż przy tworzeniu elementów trójwymiarowych dla Flasha należy rozpatrzyć kilka spraw, najważniejszą z nich jest chyba koszt. Mimo, że wtyczki dla takich programów jak 3D Studio Max czy Maya stanowią dobre rozwiązanie i są stosunkowo tanie, należy posiadać oryginalny program, a profesjonalne oprogramowanie do tworzenia modeli 3D nie należy do tanich. Dla projektanta, który nie ma dostępu do bardziej profesjonalnego oprogramowania do modelowania 3D oczywistym wyborem jest Swift 3D. Daje on możliwość tworzenia atrakcyjnej animacji w prostym w obsłudze środowisku. Jeśli od stosowania tego programu powstrzymują cię nienajlepsze metody tworzenia modelu, nie obawiaj się. Możesz poczekać na nową i ulepszoną wersję 2, lub pobrać z Sieci darmowy autoryzowany pakiet do modelowania 3D taki jak na przykład Strata 3D z witryny www.3d.com, lub Blender z witryny www.blender.nl. Pakiety te dziesięciokrotnie zwiększą twoje możliwości umożliwiając ci tworzenie precyzyjnych modeli 3D i eksportowanie ich do plików w
Rozdział 3-105
formacie 3DS gotowych do importowania do programu Swift 3D. Inną opcją jest wybranie pakietu typu Amorphium Pro, w którym będziesz mógł tworzyć modele w profesjonalnym środowisku i eksportować je do plików w formacie SWF. Jeśli posiadasz program 3D studio Max warto rozpatrzyć zakup Swift 3D lub Illustrate! 5.0. Obydwa te produkty mają zarówno zalety jak i wady. Illustrate umożliwi eksportowanie plików prosto z 3D Studio Max, dając ci zintegrowane zastosowanie i wiele świetnych właściwości. We Swift 3D będziesz animować pliki w formacie 3DS ze światłem i ścieżkami ruchu. Najlepszym wyjściem będzie wypróbowanie wersji demonstracyjnej programu Swift zamieszczonej na płycie CD-ROM i pobranie wersji próbnej aplikacji Illustrate!, dzięki czemu będziesz mógł podjąć właściwą decyzję.
Interaktywność Trzeci wymiar nie musi być przeznaczony wyłącznie do szybkich, ilustracyjnych animacji. Możesz go również zastosować do tworzenia gier i interfejsów korzystając z kilku technik opisanych do tej pory. Udostępniłem ci pliki źródłowe z mojej starej witryny internetowej, które możesz przejrzeć i przeanalizować. Chociaż w niewielkim stopniu zastosowałem kod ActionScript do utworzenia tej witryny, może ona stanowić dla ciebie przykład sposobu tworzenia struktury interfejsu w celu uzyskania jak najlepszej ekonomii plików. Mimo, że jest ona odrobinę większa, niż zamierzałem, zależało mi na dodaniu do niej miłych cieni, więc byłem przygotowany do zapłacenia za to ceny w rozmiarze pliku. Popieram ideę open source — dzięki temu możemy uczyć się od siebie nawzajem i ulepszać własne projekty. Mam nadzieję, że spodoba ci się plik, nosi on nawę interface.fla i znajduje się on w folderze Interactivity w katalogu tego rozdziału na płycie CD-ROM.
Prawdziwy trzeci wymiar Użytkownicy tworzą również efekty trójwymiarowe przy pomocy czystego kodu ActionScript lub kodu w połączeniu z obiektami w kipach filmowych. Chociaż większość tej pracy nadal jest we wczesnym eksperymentalnym stadium duża jej część wygląda bardzo obiecująco. Następnym rozdział w tej książce został napisany przez Andries Odendaal, gwiazdy w swojej dziedzinie. Jego witryna internetowa, www.wireframe.co.za i inne, takie jak www.digitalorganism.com ilustrują piękno prostego projektu i zastosowania trzeciego wymiaru w kodzie. Innym świetnym przykładem jest witryna www.andyfoulds.co.uk. Andy ma ciekawe przykłady menu trójwymiarowych utworzonych w kodzie, zwłaszcza menu typu „kliknij i obróć”, które wykonał z pomocą Chrisa Glaubitza u jego maszyny do tworzenia modeli trójwymiarowych. Maszynę tą można pobrać z witryny www.flashkit.com z sekcji Movies. Inni, jak na przykład Branden Hall z www.figleaf.com, pracują na maszynach do grafiki trójwymiarowej obsługujących cieniowanie i światła. Na płycie CD-ROM dołączonej do tej książki znajdziesz przykład możliwości, w pliku coma2_cons.swf. Panowie z www.coma2.com opracowali ten zestaw konstrukcyjny przedstawiający możliwości uzyskiwane w kodzie ActionScript we Flashu 5. Jeśli potrzebujesz określony kod skontaktuj się z jego twórcami, lecz są to świetne przykłady rozwoju tej techniki.
Optymalizacja zawartości 3D na potrzeby Sieci Chociaż tworzenie animacji trójwymiarowej z wykorzystaniem zautomatyzowanych metod jest możliwe, nie jest to zbyt wydajne dla potrzeb Sieci, z powodu znacznego rozmiaru plików przekraczających kilkaset kilobajtów, jeśli nie megabajtów. Zatem, w jaki sposób możemy przezwyciężyć problem rozmiaru plików i zaprojektować coś złożonego i
Rozdział 3-106
interesującego, a jednocześnie nadającego się do umieszczenia na witrynie internetowej? Przyjrzyjmy się dokładniej tworzeniu trójwymiarowych obrazków. Model umieszczony w programie do tworzenia trójwymiarowej zawartości jest niczym innym jak kolekcją wielokątów połączonych razem do utworzenia w rezultacie trójwymiarowego obiektu. Te małe kształty są powierzchniami, a im więcej powierzchni posiada dany obiekt tym większy jest rozmiar pliku. Poniżej przedstawiliśmy przykład obiektu składającego się z setek powierzchni, który, jak można się spodziewać, stworzy potężny plik podczas eksportowania go.
Jedną standardową techniką na zmniejszenie rozmiaru pliku jest zredukowanie kilku wielokątów na modelach przed przekształceniem ich w wektory. W ten sposób zmniejszona zostanie liczba powierzchni, pomniejszając jednocześnie rozmiar pliku, a także przyśpieszając znacznie czas renderowania. A drugiej jednak strony taki zabieg może pogorszyć wygląd obiektu, który stanie się poszarpany, a jego krawędzie nienaturalne:
Większość profesjonalnych programów, takich jak Maya czy 3D Studio Max, jak również kilka pakietów o mniejszych możliwościach, na przykład Strata 3D czy Carrara firmy MetaCreations umożliwiają zmniejszenie liczby kątów w modelu. Skąd jednak masz wiedzieć, kiedy należy przestać usuwać kąty? Nie dowiesz się tego patrząc po prostu na model w trybie projektowania — należy wykonać kilka renderingów testowych i aby przekonać się, jak model wówczas będzie wyglądać i czy możesz jeszcze ograniczyć liczbę kątów. Następnym etapem jest optymalizacja metody renderowania. Przyjrzeliśmy się już temu procesowi opisując różne ustawienia eksportowe w programie Swift 3D, więc nie będziemy się już tym zajmować. Istnieją jednakże jeszcze inne metody pomagające w zmniejszeniu rozmiaru plików SWF. A oto one.
Rozdział 3-107
Ograniczony rendering ruchu Można renderować jedynie ruchy niezbędne do tworzenia animacji. Następnie zastosujesz uzupełnianie ruchu we Flashu i symbole aby zmniejszyć rozmiar pliku. W tym celu musisz zidentyfikować ujęcia przeznaczone do eksportu, które są konieczne dla takich ruchów, jak na przykład obroty, a które bez problemu można wykonać poprzez animację automatyczną we Flashu. Otwórz przykład bell.swf z płyty CD-ROM. Zauważ, że helikopter w ciągu całej animacji obraca się tylko kilka razy.
Wielu użytkowników popełnia błąd renderując całą ścieżkę ruchu w programie do grafiki trójwymiarowej, gdyż jeśli model jest tylko zeskalowany i przemieszczany wzdłuż osi X lub Y w trakcie animacji można zastosować narzędzia Flasha. Jako przykład obejrzyj plik bell4.fla umieszczony na płycie CD-ROM. Zmniejszanie powierzchni Jeśli masz zrenderować model wymagający kilku źródeł światła możesz czasami wykonać to ręcznie, wybierając we Flashu różne obszary zrenderowanych powierzchni i wypełniając je odpowiednim gradientem. Jest to nieco czasochłonne, lecz może znacznie zmniejszyć rozmiar pliku. Przyjrzyjmy się temu procesowi i przekonajmy, się ile kilobajtów można dzięki niemu zaoszczędzić. Ponownie nakładanie gradientu we Flashu
Rozpoczniemy od zrenderowania z optymalizacją siatki obiektu puszki przedstawionego wcześniej:
Rozdział 3-108
Chociaż na tym etapie obrazek może wydawać się nieco schematyczny, gdy skończymy będzie wyglądał równie dobrze jak model zrenderowany z zachowaniem w całości siatki, lecz o znacznie mniejszym rozmiarze pliku. Rozmiar obiektu zrenderowanego z zachowaniem siatki wynosił 102KB, lecz pod koniec tego procesu uzyskamy plik prawie dziesięciokrotnie mniejszy. 1. Otwórz we Flashu plik opt.fla z płyty CD-ROM. Jak widać importowaliśmy model zrenderowany z zachowaniem całej siatki do pierwszego ujęcia. Teraz musimy utworzyć gradient, którym wypełnimy puszkę. 2. Kliknij na narzędziu kroplomierza i wybierz jeden z gradientu ze środkowej powierzchni puszki. W panelu Fill widoczny teraz będzie wybrany przez ciebie gradient.
Ponieważ potrzebny nam gradient składa się z pięciu, czy sześciu kolorów, a kroplomierz może zebrać jednocześnie tylko dwa, sami musimy dodać pozostałe kolory. W tym celu przejdź do panelu Fill i dodaj kilka nowych kolorów do gradientu. Możesz się upewnić, że dokonałeś prawidłowego wyboru poprzez ponowne wybranie kroplomierzem kolorów z obrazka.
Po przygotowaniu gradientu nie zapomnij go zapisać, dla przyszłych zastosowań.
Rozdział 3-109
3. Skoro już mamy odpowiedni kolor możemy zabrać się za usuwanie kątów ze środka puszki. Po usunięciu ich wypełnimy powierzchnię puszki gradientem.
4. Zastosuj wypełnienie na puszce w ujęciach 1 i 2. Czasami możesz natknąć się na kąt, którego wypełnienie nakłada się na inne kąty i przez to mogą pozostać przerwy. Na tym obiekcie mamy tego typu problem. Gdy przyjrzysz się ujęciu 3 zauważysz, że narysowaliśmy linię, aby oddzielić dwa zestawy kątów:
Możesz je albo usunąć teraz albo po prostu wypełnić obszar przygotowanym przez ciebie gradientem i dopracować to później. 5. W ujęciu 4 zauważysz, że wypełniliśmy duży obszar, lecz na obrazku znajdują się krawędzie, które nie pasują kolorystycznie do gradientu. Wystarczy zablokować wiaderko z wodą w przyborniku i wówczas, klikając na pozostałe zewnętrzne kąty wypełnić je gradientem, aby ujednolicić obszar:
Teraz usuń linię wykonaną do oddzielenia kątów i twój plik już jest zoptymalizowany. Jego rozmiar wynosi około 14 kB. Jak już wspomnieliśmy jest to znaczna redukcja oryginalnego pliku o rozmiarze 102 kB, przy jednoczesnej poprawie wyglądu obiektu. Rozdział 3-110
Możesz wypróbować tą technikę na innym pliku umieszczonym na płycie CD-ROM, o nazwie apg.fla. A teraz kolejna technika optymalizacji. Renderowanie części ujęć Nie renderuj całego pliku w każdym ujęciu, a jedynie potrzebne części. Na przykład, jeśli mamy model samochodu i chcemy, aby koła obracały się podczas jazdy po scenie, wystarczy zrenderować koła i utworzyć z nich klip filmowy. Wówczas możemy go przypisać do statycznego zrenderowanego obrazka o jednym ujęciu przedstawiającego samochód. W ten sposób zaoszczędzamy dużą ilość informacji, zmniejszając jednocześnie czas renderowania i rozmiar pliku. Jako przykład obejrzyj pliki car.fla i car.swf umieszczone na płycie CD-ROM i zajrzyj również do biblioteki, aby obejrzeć oddzielne części tworzące te pliki. Kluczem do udanego przygotowania plików przeznaczonych do Sieci jest kreatywność i eksperymentowanie. Pamiętaj o optymalizacji plików, poświęć czas na przygotowanie scenariusza obrazkowego projektów i zaplanuj zadania animacyjne, aby ułatwić płynne pobieranie plików. Znając twoja publiczność docelową i dostępne im prędkości połączeń będzie mógł określić ilość animacji zawierającej wiele ujęć kluczowych, na jaką możesz sobie pozwolić.
Darmowe modele w Sieci Być może, nie będziesz mieć ani czasu ani środków do tworzenia własnych modeli trójwymiarowych. Nie oznacza to jednak, że nie możesz projektować trójwymiarowej zawartości twoich witryn wykonanych we Flashu. Dostępnych jest wiele płyt CD zawierających kolekcje modelów trójwymiarowych, a także setki witryn internetowych dostarczających darmowe modele włącznie z samouczkami o sposobie tworzenia własnych. W Sieci znajdziesz nawet takie miejsca jak www.3Dafe.com i www.3d.com poświęcone w całości tworzeniu elementów trójwymiarowych. W witrynach takich jak www.flashkit.com i www.popedeflash.com, poświęconych programowi Flash, również znajdziesz darmowe modele i forum związane z zagadnieniami tworzenia grafiki trójwymiarowej we Flashu. Na stronie Resources na płycie CD-ROM zamieściliśmy listę świetnych witryn internetowych związanych z trzecim wymiarem. Jeśli masz jakiekolwiek pytania, lub chciałbyś otrzymywać miesięczny biuletyn o rozwiązaniach trójwymiarowych we Flashu, technikach i wiadomościach, napisz bezpośrednio do mnie na następujący adres poczty elektronicznej: [email protected].
Zakończenie Mamy nadzieję, że rozdział ten pomógł ci w zrozumieniu zagadnień związanych z tworzeniem zawartości trójwymiarowej we Flashu z wykorzystaniem metod ręcznego śledzenia, czy tworzenia modeli trójwymiarowych w innych programach. Jest to niezwykle interesująca i wciąż rozrastająca się dziedzina, a w miarę, jak coraz więcej pakietów obsługuje eksportowanie plików do formatów kompatybilnych z Flashem, będzie się ona stale wzbogacać. Odkrywanie świata trójwymiarowej Sieci (i innych platform) jest niezwykle fascynującym zajęciem i mamy nadzieję, że przyłączysz się do tych odkryć.
Rozdział 3-111
Rozdział 4 Animacja kreskówek we Flashu W minionej dekadzie miało miejsce kilka niezwykle pasjonujących odkryć technologicznych, które wywarły znaczny wpływ na sztukę i projektowanie. Wielu ilustratorów i artystów używa obecnie komputery zarówno jako narzędzia do tworzenia ich sztuki, jak i medium do wyświetlania jej. Ponadto łączność przez Internet stworzyła nowe możliwości dla artystów do prezentowania ich pracy. Animacja jest kolejnym medium, które poddało się wpływowi technologii. W przeszłości tworzenie animacji zdatnej do emitowania wymagało zakupu kosztownego sprzętu i było przywilejem jedynie niewielu osób, które uzyskały dostęp do tych maszyn. Jednakże w ciągu ostatnich kilku lat sztuka ta zyskała na popularności i dostępności dzięki narzędziom o stosunkowo niewygórowanej cenie, takim jak domowy komputer czy oprogramowanie typu Flash. Ta nowa technologia oferuje animatorowi środek umożliwiający w łatwy sposób tworzenie filmów i następnie rozprowadzanie ich w Internecie.
Z animacją na potrzeby Sieci związanych jest kilka unikalnych wyzwań. Pamiętając o ograniczeniach czasowych, które mogą być narzucone na widza, formą animacji najlepiej nadającą się do Sieci jest film krótkometrażowy. Ponadto, aby jak najszersza publiczności mogła obejrzeć animacje, należy pamiętać, że internauci łączą się z Internetem z różną prędkością. Głównym zadaniem zatem często jest wykonanie „przyjaznej modemowi” animacji poprzez ograniczenie wielkości jej plików korzystając z różnych technik optymalizacji. Kolejnym zagadnieniem jest efektywne zarządzanie pobieraniem plików. Jednakże, chociaż wyzwania te są ograniczające, mogą one również zainspirować kreatywne rozwiązania. Zajmiemy się tym w dalszej części tego rozdziału, natomiast teraz rozpoczniemy od rzeczy, którą powinni posiadać wszyscy dobrzy animatorzy, czyli inspirację.
Rozdział 4-112
Początki Istnieje wiele metod stymulujących twórczy proces, jednym z nich jest rysowanie, które w doskonały sposób pobudza soki umysłowe. Weź kartkę papieru i wypełnij ją liniami, kółkami, prostokątami, różnymi kształtami i wszystkim, co chcesz, bez zastanawiania się nad tym, co robisz. Chociaż jest to świetne ćwiczenie na rozluźnienie się, często pobudza ono wyobraźnię i tworzy niespodziewane pomysły na historyjki:
Innymi źródłami inspiracji są również muzyka i literatura. Otwórz książkę na dowolnej stronie, wybierz na chybił trafił linijkę, przeczytaj, a następnie spróbuj zilustrować ją lub dodać do zilustrowanego wątku. Do zademonstrowania tej techniki wykorzystałem pierwszą linijkę z 15 rozdziału książki Dirk Gently’s Holistic Detective Agency autorstwa Douglasa Adamsa: „Do jednego z mniej przyjemnych aspektów bycia martwym można zaliczyć wspinanie się po Drodze Gordona”.
Kolejną techniką jest zastosowanie „swobodnego stylu” poprzez rozpoczęcie pracy nad filmem od prostego pomysłu i kilku rysunków. Następnie zdajesz się na wyobraźnię, która prowadzi cię bez planowania żadnych początków ani zakończeń. Często najlepsze animacje powstają z najprostszych pomysłów, a sekwencja ujęć narysowanych bezpośrednio we Flashu Rozdział 4-113
może doprowadzić do ciekawej historii. Rysunki te to spontaniczne obrazki, wykonane bez zastanawiania się nad nimi i często bez żadnego związku pomiędzy nimi. Jest to metoda bardzo nie-liniowa, lecz często z niej korzystam w mojej pracy. Rysunki wykonane we Flashu bez przygotowanych wcześniej wstępnych szkiców nadają animacji charakter spontaniczności. Wówczas eksperymenty i wynikające z nim przypadki stają się integralną częścią procesu animacji, często prowadząc do interesujących efektów i technik nie opisanych w żadnym podręczniku do tworzenia animacji. Terry Gilliam bardzo zgrabnie to podsumował twierdzeniem, że jego podejściem do animacji „zawsze było szukanie z szeroko otwartymi oczami szczęśliwych przypadków lub błędów”. Najlepsze historie często biorą się z twoich własnych przeżyć, czy też z odrobinę wyolbrzymionych ich wersji. W przeciwieństwie do powszechnego przekonania, aby być dobrym animatorem nie wystarczy tylko rysować przez cały dzień. To, co rysujesz i piszesz odzwierciedla to, kim jesteś, co z kolei jest owocem twych przeżyć. Z tego względu warto zawsze mieć przy sobie notatnik i do zapisywania swoich pomysłów i doświadczeń, nawet jeśli z tych zapisków nie korzystasz — w przyszłości mogą ci się jednak one przydać. Jeszcze inna technika polega na zaprojektowaniu i zilustrowaniu prostego żartu panelowego:
Ten rodzaj krótkiego gagu świetnie nadaje się do krótkiej animacji we Flashu. Jego egzystencja jest króciutka i łatwo się domyśleć, o jakiej zawartości będą ujęcia pośrednie. Podsumowując, wokół ciebie i w tobie jest pełno różnych pomysłów czekających do animowania. Wystarczy być dobrym słuchaczem i obserwatorem. Chociaż na początku może to być ciężka praca wymagająca wysiłku, już wkrótce będziesz mieć więcej pomysłów nić czasu do animowania ich. Gdy już znajdziesz pomysł, należy przelać go na papier, lub na ekran monitora. Tradycyjnym sposobem wyrażania pomysłów animacyjnych jest zastosowanie scenariusza obrazkowego.
Planowanie animacji Scenariusz obrazkowy używany jest do planowania rozwoju filmu i składa się z kluczowych składników, czyli scen w filmie. Często pracuję z głównymi wyobrażeniami w głowie aby zachować spontaniczność rysunków, jak już wspomniałem wcześniej. Rzadko kiedy mam również ukończony scenariusz obrazkowy w momencie rozpoczęcia pracy nad animacją. Jednakże, w pracy zespołowej bardzo istotną pomocą jest przekazywanie pomysłów innym animatorom. Większość tradycyjnych animatorów nie jest zadowolonych z rysowania we Flashu i wolą pozostać z kartką papieru i ołówkiem. Wówczas skanują wykonane przez nich rysunki i importują je do Flasha. Chociaż czasami konieczna, taka metoda jest dosyć czasochłonna. Ja wolę rysować od razu we Flashu korzystając z narzędzi dostępnych w tym programie. Wart zaopatrzyć się w tablet graficzny, gdyż używanie myszy do rysowania często jest trudne.
Rozdział 4-114
Poniższy scenariusz obrazkowy składa się z głównych ujęć kluczowych dla krótkometrażowego filmu zatytułowanego Zemi One Morning (A Love Story), który został umieszczony na płycie CD-ROM dołączonej do książki. Obejrzyj film aby przekonać, się w jaki sposób wstępne szkice wpłynęły na ukończony film:
Oczywiście nie musimy się już ograniczać do liniowych animacji tego typu, gdyż we Flashu powstał zupełnie nowy wymiar: interaktywność.
Interaktywna zawartość Na prezentację historii bądź animacji składa się wiele różnorodnych elementów. Interaktywna narracja możesz rozwijać się na wiele sposobów w zależności od wkładu użytkownika. Z drugiej jednak strony nieinteraktywna opowieść będzie rozwijać się liniowo. Poniższy przykład przedstawia obydwa rodzaje animacji. Historyjkę można śledzić w nie-interaktywny sposób poprzez poziome przeglądanie jej lub interaktywnie, gdzie użytkownik może zrezygnować z poziomego oglądania i obejrzeć historyjkę w zupełnie inny sposób:
Rozdział 4-115
Mimo, że wszystkie narracje są do pewnego stopnia interaktywne, pod tym względem, że angażują czytelnika, który na własny sposób interpretuje historyjkę, animacja Flasha ma daje najbardziej oczywisty rodzaj interaktywności, gdzie użytkownik może bezpośrednio wpłynąć na opowieść używając myszy czy klawiatury. Historyjka opowiedziana w interaktywny sposób może rozwijać się w różnych kierunkach w zależności od wkładu widza na różnych etapach filmu. Skoro masz już pomysł, może nawet kilka szkiców, czas przetłumaczyć je na zrozumiały przez Flasha język. Jak zobaczymy, Flash zapożycza wiele technik z tradycyjnej animacji, lecz nadaje im własny skomputeryzowany charakter.
Podstawy animacji Wprowadzenie przezroczystego celuloidu do animacji umożliwiło ponowne zastosowanie określonych statycznych elementów takich jak tło rozciągające się na kilka scen. Warstwy zbliżone są pod tym względem do celuloidowych arkuszy i można je stosować przez Animatora we Flashu do uzyskania tego samego celu. Dodatkową ich zaletą jest redukcja rozmiaru pliku, która uzyskuje się poprzez umieszczenie statycznych i dynamicznych części obiektu na oddzielnych warstwach, a jedynie modyfikując dynamiczne części w kilku ujęciach. We Flashu możesz tworzyć tyle warstw ile zechcesz, bez zwiększania końcowego rozmiaru pliku. Inaczej jednak niż w przypadku tradycyjnych arkuszy celuloidowych Flash umożliwia umieszczanie na warstwach również dźwięków i akcji: Rozdział 4-116
Animację można przeprowadzić na dowolnej z warstw przy pomocy wielu różnych metod. W sekwencji tradycyjnej animacji zawartość zmienia się w każdym ujęciu. Proces ten znany jest pod nazwą animacja poklatkowa. Rozmiar pliku odpowiadający podobnej sekwencji we Flashu może być całkiem znaczny z powodu dużej liczby ujęć kluczowych wypełnionych poszczególnymi ujęciami animacji. Kolejną główną metodą stosowaną we Flashu do animacji jest automatyczna animacja ruchu (Motion Tweening). W efekcie uzyskuje się mniejsze rozmiary plików niż w animacji z zastosowaniem ujęć kluczowych, gdyż Flash przechowuje wówczas tylko wartości dla zdefiniowania różnic pomiędzy ujęciami, a nie całego ujęcia. Jednakże uzupełnianie ruchu dla kilku animacji jednocześnie w znaczny sposób obciąża procesor, dając w rezultacie nierówną prędkość animacji (prędkość odtwarzania) na różnych komputerach o zmiennej mocy procesora. Innym aspektem animacji, który wymaga szczegółowego rozplanowania jest zastosowanie warstw do podziału widocznych elementów w jednym ujęciu. Zazwyczaj elementy statyczne w kilku ujęciach, jak na przykład tło, umieszczane są na oddzielnych warstwach z tylko jednym ujęciem kluczowym trwającym przez kilka ujęć. Zasadę tę stosuje się również dla sekwencji dialogowej dla postaci, która przez kilka ujęć porusza tylko ustami. Usta poruszające się w każdym ujęciu powinny zostać umieszczone na jednej warstwie, a reszta ciała na innej. Pamiętaj, że dodawanie nowych warstw nie zwiększa rozmiaru pliku, a może pomóc w podziale historyjki na sceny. Dzięki temu nie będziesz musiał przewijać długiej listy warstw na taśmie czasowej. Dźwięki i akcje również można umieścić na oddzielnych warstwach dla uzyskania lepszej organizacji.
Przenikanie ujęć — Onion Skinning Kolejną sztuczką zapożyczoną do Flasha z tradycyjnej animacji jest przenikanie ujęć. Czasami trzeba obejrzeć kilka następujących po sobie rysunków jednocześnie. W tym celu w tradycyjnej animacji oświetla się powierzchnię pod papierem, na którym zostały wykonane rysunki. We Flashu podobny efekt uzyskuje się poprzez przeglądanie następujących po sobie ujęć kluczowych przy pomocy funkcji przenikania ujęć. Funkcja ta umożliwia obejrzenie zawartości wszystkich ujęć pomiędzy dwa znacznikami „skórek cebuli”, co jest niezwykle przydatne zwłaszcza podczas tworzenia animacji poklatkowej. Zawartość aktualnie „odtwarzanego” ujęcia wyświetlona jest kolorowo, a pozostałe ujęcia pomiędzy znacznikami stają się stopniowo przezroczyste im dalej znajdują się one od bieżącego ujęcia. Zatem z inspiracją i podstawowymi zagadnieniami teoretycznymi możemy wreszcie przejść do części praktycznej i przeanalizować kilka przydatnych technik animacji.
Rozdział 4-117
Animacja we Flashu W tej części rozdziału przedstawimy ci wskazówki odnośnie analizowania i stosowania zasad omówionych do tej pory w celu tworzenia krótki animowanych sekwencji, które następnie będzie można dołączyć do większego projektu. Na początku chcielibyśmy podkreślić, że są to tylko wskazówki a nie reguły — końcowym zamiarem jest utworzenie twojego własnego świata animowanego, w którym twoja wyobraźnia definiuje sposób funkcjonowania rzeczy. Istotnym elementem animacji jest tworzenie iluzji ruchu. Pozostałymi równie ważnymi składnikami są historyjka, rysunki i sposób połączenia tych elementów, aby powstała atrakcyjna animacja. Chociaż krytycy mogą nie uznawać animacji za reprezentatywną formę sztuki, w rzeczywistości istnieje wiele metod tworzenia animacji, z których każda jest równie interesująca. Animacji najlepiej nauczyć się można poprzez praktykę, a Flash oferuje dogodne warunki do ćwiczeń. Poniżej przedstawimy różne techniki animacji, które możesz zastosować po lub w trakcie tworzenia scenariusza obrazkowego.
Projektowanie postaci Historia opowiadana jest przez bohatera, więc projekt postaci bardzo ściśle związany jest z nastrojem i tematem opowieści, a często również z osobowością animatora. W przypadku Flasha i dystrybucji w Internecie, ograniczenia prędkości łączenia determinują stopień złożoności projektu postaci, więc często bohater we Flashu powstaje z prostych kształtów i kresek. Zalecamy częste stosowanie symboli. Zanim zabierzemy się za animowanie filmu, warto rozpocząć ćwiczenia od wykonania arkusza modelowego. Arkusze modelowe stosowane są do opisywania rozmiaru i dynamiki postaci ze wszystkich stron. W ten sposób zyskuje się spójność projektu opracowywanego przez kilku animatorów. Przy pomocy arkuszy modelowych możesz również wybrać elementy postaci, jakie można wielokrotnie zastosować w formie symboli.
Na przykład, na podstawie powyższego arkusza modelowego można zdecydować, że lewa ręka postaci zostanie przekształcona w symbol i odpowiednio obracana w zależności od pozycji, jaką bohater przyjmuje w danej chwili. Podczas projektowania postaci we Flashu należy pamiętać, które jej części będą animowane. Na przykład, jeśli bohater porusza tylko rękami najlepiej ponownie zastosować ciało i nogi,
Rozdział 4-118
które są statycznymi elementami przez kilka ujęć, a animować tylko rękę na oddzielnej warstwie. W poniższym ćwiczeniu wykonamy taką operację. Rozczłonkowanie animacji
1. Dziewczynka i pies zostali najpierw narysowani w ujęciu 1. Rysunek ten znajduje się w pliku girl_pats_dog.fla na płycie CD-ROM. Możesz go wykorzystać do tego ćwiczenia, lecz lepiej byłoby, abyś postarał się te postaci narysować sam.
2. Wstaw warstwę i umieść w niej trzy dodatkowe ujęcia kluczowe. Następnie rozciągnij pierwsze ujęcie kluczowe na warstwie 1 do ujęcia 4:
3. Narzędziem lassa zaznacz część ręki na prawo od grubej linii:
4. Wytnij i wklej specjalnie (Paste in Place) rękę do drugiego ujęcia kluczowego na warstwie 2. Teraz zablokuj warstwę 1, abyś przez przypadek nie zmodyfikował obrazka. 5. Narysuj rękę w dwóch innych pozycjach, oznaczonych tutaj 1 i 3, odpowiednio w ujęciach 1 i 3:
Rozdział 4-119
Do tego celu może przydać ci się zastosowanie funkcji przenikania ujęć (Onion Skinning). 6. Zaznacz rękę w ujęciu 2 i przekształć ją w symbol o nazwie mid-arm (ang. środkowa ręka), a następnie skopiuj i wklej klon tego symbolu do ujęcia 4. 7. Teraz obejrzyj animację odtwarzaną przez cztery ujęcia. Ten przykład ilustruje zastosowanie symboli do utworzenia prostej animacji ze statycznych rysunków postaci. W studiach animacji bardzo powszechną praktyką jest kompletowanie tego typu bibliotek postaci i ich ruchów, które następnie są ponownie wykorzystywane w wielu filmach. Jest to świetny sposób na uzyskanie zarówno spójności, jak i ekonomicznej produkcji. Jednakże, ja wolę ponownie rysować postaci i animowane sekwencje każdorazowo przy rozpoczęciu nowego filmu. Uważam, że wielokrotne stosowanie tych samych elementów stanowi przeszkodę na drodze naturalnej ewolucji postaci jak i rozwoju artysty. Za każdym razem, gdy rysuję cykl chodzenia, uczę się czegoś nowego. Teraz przyjrzymy się różnym przykładom animacji innych, niż ludzkie, postaci. Zajmiemy się również stosowaniem praw fizyki w ruchu bohaterów.
Skacząca piłka Animacja skaczącej piłki często stosowana jest do zademonstrowania ciężaru i ruchu jako elementów podległych prawom fizyki. Zasady te można odnieść do wszystkich animowanych postaci czy obiektów, jak już za chwilę to udowodnimy. Celem tego ćwiczenia jest przedstawienie wyolbrzymionego zgniatania, rozciągania, przyspieszenia i zwolnienia, jakim poddaje się piłka pod wpływem sił ciążenia. Ponadto wykonanie tego ćwiczenia we Flashu zademonstruje sposób zoptymalizowania animacji poprzez zastosowanie kopii symboli piłki. Chcemy uzyskać następujący efekt:
Należy zwrócić uwagę na przyspieszenie, zwolnienie i transformacje kształtu piłki podczas upadku, odbicia i wzbicia się w powietrze. Materiał, z jakiej wykonana jest piłka i prędkość poruszania się wpływa na wymienione deformacje. Narzędziem koła narysuj piłkę i przekształć ją w symbol graficzny. Postaraj się zastosować ten symbol w całej animacji, lecz w każdym ujęciu kluczowym odpowiednio zeskaluj go i obróć, aby dopasować go do naszego schematu. Poniżej przedstawiliśmy piłkę w 11 stanach. Rysunek ten znajduje się w pliku bouncing ball.fla.
Rozdział 4-120
Rysunki oznaczone cyframi 1, 2 i 3 reprezentują etap „zwolnienia” w szczytowym momencie cyklu piłki. Pomiędzy stanem 4 i 8 przyspieszenie spowodowane grawitacją znacznie się zwiększa i w efekcie zwiększa się odległość pokonywana w każdym przedziale czasowym. Ponadto obiekt rozciąga się, aby wyrazić ruch i elastyczność piłki. Rysunki 9, 10 i 11 reprezentują „zgniecenie”. Im bardziej elastyczna jest struktura piłki tym bardziej wyraźne jest ściśnięcie. Teraz można wykonać lustrzane odbicie obrazków, aby przedstawić piłkę ponownie docierającą do szczytowego etapu jej ruchu. Następnie piłka oddala się od wierzchołka cyklu i w wyniku sił ciążenia zaczyna traci na szybkości. W trakcie zwalniania obiekt powraca do swojego normalnego kształtu, a następnie cykl zostaje powtórzony. Aby zwiększyć realizm ruchu piłki, wysokość na jaką się ona wybija powinna być mniejsza niż wysokość, z jakiej spadła. Jeśli chcesz możesz poeksperymentować z różnym stopniem twardości obiektu. Im piłka jest mniej elastyczna, tym mniejsze będzie jej zgniecenie, dlatego też rysunki 9, 10 i 11, włącznie z ich lustrzanymi odbiciami można zastąpić niewiele zmodyfikowanymi kopiami symbolu piłki. W przypadku lżejszej piłki pod wpływem powietrza piłka może unosić się w górze przez dłuższy czas (stany 1, 2 i 3). Animację tę można również wykonać stosując funkcję uzupełniania ruchu we Flashu z użyciem właściwości Easing dla automatycznej animacji. Jednakże, korzystając z tej metody nie będziesz mógł w również dużym stopniu kontrolować ruchu obiektu, jak w przykładzie powyżej. Można oczywiście połączyć te dwie techniki poprzez wstawienie ujęć kluczowych w istotnym miejscach, powiedzmy, co drugie ujęcie, a Flash uzupełni ruch pomiędzy nimi.
Skaczący człowiek W poniższym przykładzie zastosowaliśmy jeden symbol i takie same zasady zgniecenia, oddalania się, przyspieszenia i zwolnienia jak w przykładzie z piłką, również do utworzenia bardzo prostej animacji. Przedstawia ona skaczącego człowieczka wzdłuż poziomej linii. Kopie symbolu modyfikowaliśmy w każdym ujęciu przy pomocy funkcji skalowania dostępnej we Flashu. Zmodyfikowane kształty klonów symbolu nieznacznie tylko zwiększają rozmiar pliku animacji. Rozmieściliśmy schemat poziomo, aby uwidocznić efekt, jaki chcemy uzyskać:
Rozdział 4-121
Tutaj przedstawiliśmy przykład bardziej organicznej, ręcznej metody do skakania ludzika. Rysunki te znajdziesz w pliku human spring.fla na płycie CD-ROM.
Zastosowaliśmy linie wyrażające ruch, aby zwiększyć wrażenie prędkości. Metoda, jaką wybierzesz, zależy od ograniczeń, jakie są ci narzucone i od efektu, jakiego chcesz uzyskać. Jednakże przede wszystkim należy starać się zachować spójność w całym filmie. Jeśli zamierzasz narysować postać ujęcie po ujęciu bez stosowania symboli (jak ja zazwyczaj to robię) wówczas zastosowanie automatycznej animacji tylko w jednej części filmu naruszy płynność animacji. Ja zazwyczaj ograniczam stosowanie uzupełnienia ruchu do ruchomego tekstu, elementów tła czy przekształceń obiektu w krótkim odstępnie czasu. Uzupełnianie ruchu wiąże się z bardziej efektywnym zastosowaniem dostępnych środków, lecz nie jest zbyt estetycznie eleganckim rozwiązaniem z powodu jego mechanicznego charakteru. Ponadto, do uzyskania odpowiedniego efektu często należy stosować uzupełnianie ruchu. Jedynym sposobem na wybranie odpowiadającej ci metody jest wypróbowanie obydwu. Po skokach ludzika czas zająć się bardziej naturalną, lecz odrobinę trudniejszą animacją.
Cykle ruchu W tej części zajmiemy się częściej spotykanym w rzeczywistości rodzajem ruchu postaci, czyli chodzeniem. Cykl chodzenia jest przykładem cyklu, który składa się z okresowo Rozdział 4-122
powtarzanego zestawu rysunków w celu utworzenia ciągłego ruchu. Analogicznym przykładem jest wahadło, którego ruch podąża po określonej trajektorii w czasie i następnie powtarzany jest w jednakowych cyklach. Podstawową jednostką tego cyklu jest pojedynczy krok jednej nogi. Warto we Flashu stosować cykle, gdyż podstawową jednostkę można zawrzeć w symbolu i wielokrotnie stosować go w innym symbolu czy symbolach z niewielkim wzrostem rozmiaru pliku. Przedstawimy cykl chodzenia poprzez wielokrotne użycie symboli. Poza nauką rysowania cyklu chodzenia, celem tego ćwiczenia jest analizowanie i rozumienie ruchu i jego najprostszych składowych. Pierwszy przykładowy cykl podzielony został na osiem etapów, a animacja składa się z czterech warstw.
Noga piechura znajdująca się najbliżej widza animowana jest na drugiej warstwie, a osiem symboli składających się na sekwencję animacji są stosowane na dolnej warstwie, która zawiera sekwencję animacji dla nogi znajdującej się dalej od widza. Ciało piechura umieszczone zostało na trzeciej warstwie, a jego ręką na pierwszej. Tworzenie cyklu chodzenia
Rysunki dla tego ćwiczenia znajdują się w pliku walk cycle.fla na płycie CD-ROM, lecz zachęcamy do narysowania własnych. 1. Najpierw narysuj postać o jedne nodze na warstwie 1 i rozbij rysunek na sekcje przy pomocy narzędzia lassa. Rysunek powinien się teraz składać z trzech części: ręki, nogi i pozostałej części ciała postaci włącznie z jej twarzą:
2. Następnie wytnij i wklej te trzy elementy na oddzielne warstwy o nazwach: arm (ang. ręka), leg closer (ang. bliższa noga) i body (ang. ciało). Przekształć każdy z tych rysunków w symbol i nazwij je body1, arm1 i leg1. Ewentualnie możesz rozpocząć od narysowania tych elementów od razu na oddzielnych warstwach. Ja jednak wolę pierwszy sposób, wszystko na jednej warstwie, lecz i w tym przypadku wypróbuj obydwie i wybierz bardziej ci odpowiadającą.
Rozdział 4-123
3. Teraz możesz wykonać rysunki nogi w ośmiu ruchach. Często najlepiej zdekonstruować poruszającą się postać do najprostszej formy, aby lepiej zrozumieć wykonywany przez nią ruch. Kroki można więc przedstawić przy pomocy schematycznego ludzika:
Zauważ, pięta porusza się po względnie eliptycznej trajektorii. Rozmieszczenie pięty na eliptycznej ścieżce nie jest jednak regularne. Możesz wypróbować różne pozycji na ścieżce i dodać nowe rysunki pomiędzy przedstawionymi tutaj aby zobaczyć, w jaki sposób zostanie przez zmodyfikowany ruch. W szczególności spróbuj umieścić dodatkowe pozycje pomiędzy pierwszym i ostatnim krokiem i zauważ różnicę. Poniżej, jako wskazówkę, narysowaliśmy wszystkie etapy składające się na cykl chodzenia.
4. Rysunki od 1 do 8 na warstwie leg closer zostały przekształcone w symbole, ponieważ zastosujemy je również dla drugiej nogi. Pierwsze cztery ujęcia na warstwie leg further są identyczne z ujęciami od 5 do 8 na warstwie leg closer, natomiast ostatnie cztery ujęcia są identyczne z ujęciami od 1 do 4 na warstwie leg closer. 5. Teraz musimy zmodyfikować kopie symbolu na warstwie leg further. Zgodnie z konwencją animacji przedmioty znajdujące się dalej są odrobinę ciemniejsze niż przedmioty umieszczone blisko. Aby powstał taki efekt zmniejsz jasność każdej kopii do odpowiedniej wartości (ja wybrałem -39%). Rozdział 4-124
6. Jeśli chcesz możesz przenieść klony na każdej warstwie, aż zostaną odpowiednio umieszczone. Aby nadać ciału idącej postaci bardziej dynamiczny wygląd możesz odrobinę zeskalować ciało (ja wybrałem 98%) i odrobinę pochylić na lewo od kopii w ujęciu 1. W ten sposób symulujesz kurczenie się postaci gdy podskakuje w dół i w górę. Do wykonania tego efektu możesz zastosować funkcję przenikania ujęć. 7. Na koniec utwórz automatyczną animację (Motion Tweening) pomiędzy ujęciami 1 i 4, a następnie odwróć ją pomiędzy ujęciami 5 i 8. Poniższy rysunek przedstawia kontury widoczne po zastosowaniu funkcji przenikania ujęć.
W tym przykładzie możesz użyć ręki jako części ciała — wówczas pozostaw ją w kieszeni postaci, lub dorysować rękę do ramienia i animować ją bujającą się w czasie cyklu. Możesz również popróbować zwiększyć stopień skomplikowania animacji. Na przykład przekształć włosy postaci w symbole i wykonaj automatyczną animację ruchu aby poruszały się one w trakcie chodzenia. Możesz również wykonać animację bardziej interesującą, dodając wykonany automatycznie ruch panoramiczny tła z poruszającymi się na nim obiektami. Nie przesadzaj jednak. W zależności od prędkości twojego procesora wraz ze wzrostem liczby automatycznie animowanych elementów cała animacja może być odtwarzana coraz wolniej. Jest to spowodowane tym, że uzupełnianie ruchu znacznie obciąża procesor. Osobowość postaci może znacznie wpłynąć na wygląd cyklu chodzenia. Na przykład, poniżej przedstawiliśmy dumny krok:
Zwróć uwagę na ruch ciała, który tutaj jest bardziej wyraźny. Po analizie obrazków zauważysz jednak, że głowa w większości ujęć zachowuje swój podstawowy kształt, za wyjątkiem ujęcia 2. Oznacza to, że można ją przekształcić w symbol i ponownie zastosować w kilku ujęciach. Prędkość poruszania się postaci również wpływa na charakter jej ruchu. Cykl biegu nie jest po prostu przyspieszonym cyklem chodzenia. Praca nóg w ty przypadku jest zupełnie inna:
Rozdział 4-125
Często, gdy rozmiar postaci idącej lub biegnącej jest niewielki, nie trzeba odpisywać jej kroków z taką precyzją. Poniżej przedstawiliśmy kolejną wersję cyklu chodzenia: chodzenie bokiem i zamiatanie. Przykład ten znajduje się w pliku w formacie FLA na płycie CD-ROM dołączonej do książki:
Zauważ, że bohater przesuwa się tylko o niewielką odległość, a jego lewa noga porusza się tylko w ujęciach 3 i 4. Jeśli jednak nie cierpisz rysowania cykli chodzenia, istnieje kilka sposobów, dzięki którym będziesz mógł tego uniknąć. Jedną z metod jest użycie płotu. W tym przypadku postać przechodzi przez scenę, lecz jej ciało schowane jest za płotem. Piechur składa się z dwóch ujęć kluczowych z tym samym symbolem przesuwanym pionowo do utworzenia podskakującego ruchu głowy. Poza zaoszczędzeniem ci konieczności rysowania cyklu chodzenia końcowy rozmiar pliku jest mniejszy, ponieważ zawiera mniej ujęć kluczowych.
Czasami proste uzupełnianie ruchu nie nadaje się do wyrażania szybkich ruchów. W takich przypadkach warto rozważyć zastosowanie linii wyrażających ruch lub prędkość. Można narysować takie linie na oddzielnej warstwie i skierować je wzdłuż trajektorii ruchu obiektu. Linie ruchu stają się coraz krótsze, aż do kompletnego zaniku. Przykład tego typu efektu można znaleźć w pliku w formacie FLA filmu Zemi One Morning.
Rozdział 4-126
Inne cykle ruchu Kolejny przykład ruchu cyklu zamieściliśmy w pliku Superduperman.fla. Z głównego menu wybierz polecenie Control i upewnij się, że zaznaczone jest pole wyboru Loop Playback. Wówczas wciśnij klawisz Enter/Return, aby obejrzeć animację. Ten plik Flasha zawiera cztero-ujęciową animację lecącego super-naiwniaka, która zawiera tylko dwa symbole. Całkowity rozmiar pliku wynosi tylko 2.2KB:
Ja zastosowałem zeskalowane symbole kopie symbolu chmury na trzech oddzielnych warstwach, aby stworzyć wrażenie ruchu. Następnie klony te umieściłem ujęcie po ujęciu wzdłuż sceny.
Dwie z animacji chmury znajdują się na warstwie tła, a trzecia na pierwszym planie. Postać została odrobinę przesunięta przez cztery ujęcia, aby uzyskać dynamiczny ruch. Ruch chmur od lewej do prawej na scenie tworzy efekt lotu postaci od prawej do lewej. I jedynie dwa symbole, czy raczej ich klony, zostały zastosowane do utworzenia cyklu na przestrzeni czterech, z których powstała animacji. Jako kolejny przykład wielokrotnie stosowanego symbolu, poniżej przedstawiliśmy ośmioujęciowy cykl tańca, do wykonania, którego zastosowaliśmy tylko trzy rysunki (a, b i c).
Rozdział 4-127
Apostrofy umieszczone przy literach oznaczają symbole, których zastosowaliśmy odbicia lustrzane do wykonania odwróconych obrazków. Mamy nadzieję, że zdobyłeś już pewną orientację w rodzajach cykli, jakie można wykonać i w metodach ekonomicznego stosowania symboli, które redukują rozmiar plików i zmniejszają ilość pracy, jaką musisz wykonać. Chociaż tutaj kończą się już możliwości tradycyjnej animacji, Flash pozwala na więcej, i umożliwia optymalizację ilości kresek w danym rysunku.
Optymalizacja Jeśli animacja Flasha będzie rozprowadzana na takich nośnikach jak płyty CD, czy dyskietki, optymalizacja nie jest tak ważnym elementem, jak w przypadku rozprowadzania animacji w Internecie. W drugim przypadku pliki powinny być jak najmniejsze, aby mogły dotrzeć do jak najszerszej publiczności, która z kolei ma dostęp do różnych prędkości połączeń modemowych. Prosty w pierwszej kolejności proces optymalizacji powinien obejmować przejrzenie filmu i sprawdzenie, czy symbole zostały zastosowane wszędzie tam, gdzie było to możliwe. Symbole te powinny zawierać całe obiekty lub ich części. Nieużyte symbole w pliku projektu (format FLA) nie zwiększają końcowego rozmiaru pliku filmu (SWF). Zwiększają jednak rozmiar pliku w formacie FLA. Jeśli stanowi to dla ciebie problem, po ukończeniu projektu z menu Library Options zastosuj polecenie Select Unused Items. Wówczas podświetlone zostaną nieużywane elementy, które będziesz mógł usunąć. Wówczas zapisz plik w formacie FLA pod inną nazwą stosując polecenie File|Save As. Rozmiar nowego pliku powinien być mniejszy od oryginalnego. Nie będzie to znaczna różnica w przypadku małych plików zawierających obrazki, lecz po dodaniu dźwięków do swoich kompozycji, usunięcie zapomnianego szczeknięcia psa może stanowić dużą różnicę w rozmiarze pliku w formacie FLA. Innym rodzajem optymalizacji jest wygładzanie linii składających się na symbol lub rysunek w filmie. Można tego dokonać poprzez zastosowanie polecenie Modify|Optimize Curves:
Rozdział 4-128
Przesunięcie suwaka Smoothing wpływa na gładkość linii i krzywych w zoptymalizowanej wersji. Poprzez zaznaczenie pola wyboru Use multiple passes, uzyskasz maksymalną optymalizację, lecz opcja ta może tak bardzo zmodyfikować rysunek, że nie będzie on już rozpoznawalny. Po dokonaniu optymalizacji rysunku Flasha wyświetla raport o wykonanej operacji i zyskanych oszczędnościach. W powyższym przykładzie uzyskaliśmy redukcję wynoszącą 49% — obrazek po lewej został zoptymalizowany do wersji po prawej. Jeśli nie podoba ci się rezultat, wciśnij przycisk OK i zastosuj polecenie Edit|Undo. Zauważ, że powyższe obrazki są identyczne, a jednak obrazek po prawej zawiera prawie o połowę mniej krzywych niż oryginał. Poprzez zoptymalizowanie wszystkich rysunków w tego typu animacji możesz znacznie zmniejszyć czas ich pobierania. Możliwe jest również zoptymalizowanie tylko części rysunku. W tym celu powiększ wybraną sekcję i zaznacz fragment narzędziem lassa, a następnie zoptymalizuj go. I w tym przypadku musisz najlepiej wypróbować wszystkie metody i wówczas wybrać najbardziej ci odpowiadającą. Zawartość wykonana we Flashu jest zaprojektowana do rozprowadzania po Internecie i dlatego też należy jak najlepiej zoptymalizować czas jej ładowania, aby witryna została pozytywnie odebrana przez użytkownika. Flash oferuje efektywne środki do symulacji funkcjonowania zawartości i wpływu na nią parametrów filmu — odpowiednim narzędziem jest Bandwidth Profiler. Polecenie to można zastosować do obejrzenia, w jaki sposób film jest podzielony pod kątem wymagań pamięciowych na jedno ujęcie, a poprzez zastosowanie różnych ustawień modemu możesz symulować czas ładowania dla wolniejszych prędkości połączeń. Dzięki tym testom zorientujesz się, które ujęcia będą sprawiały problemy podczas ładowania i powinny zostać jeszcze bardziej zoptymalizowane. Zauważysz, że często pliki dźwiękowe tworzą zapchane ujęcia. Odtwarzanie przed pobraniem odpowiedniej liczby ujęć możesz spowodować zatrzymanie animacji w celu nadążenia za ładowaniem. Popularną techniką stosowaną do obejścia tego problemu jest przygotowanie sekwencji ładowania, aby zająć czymś uwagę użytkownika podczas ładowania się animacji w tle. Podczas tworzenia sekwencji ładowania należy pamiętać o kilku rzeczach. Jest wskazane zastosowanie prostych kształtów, aby zminimalizować rozmiar pliku. Najlepiej również użyć symbole z głównego filmu, jeśli nie obciążają one zbytnio pamięci, co z kolei może spowodować długi czas oczekiwania na załadowanie się sekwencji ładowania. Kolejną dobrą wskazówką jest dołączenie pasku postępu, który informuje użytkownika ile jeszcze zostało czasu do zakończenia procesu
Rozdział 4-129
ładowania. Pętle dźwiękowe nie są zalecane dla sekwencji ładowania, gdyż mogą doprowadzić użytkownika do szewskiej pasji.
Zakończenie Animacja na potrzeby Sieci dopiero raczkuje. Tworzenie i optymalizacja animowanych filmów w celu rozprowadzania ich w Internecie, aby dotarły do jak najszerszej publiczności, jest jednym z obecnych największych wyzwań animacji Flasha. Jak już wcześniej wspomnieliśmy, animacje zawsze powinny być optymalizowane pod kątem mocy komputera użytkownika i dostępnych mu prędkości połączeń. Często ograniczenia te wpływają na zredukowanie polotnych elementów animacji i zastosowanie techniki minimalistycznej, lecz z drugiej strony ograniczenia te wymuszają na artyście poszukiwanie kreatywnych rozwiązań. Ponadto, ograniczenia wywierają istotny wpływ na estetykę i styl animacji w Internecie.
Rozdział 4-130
Rozdział 5 Wideo we Flashu Na przestrzeni kilku ostatnich lat Flash stał się poważnym i potężnym narzędziem do tworzenia zawartości Sieci i animacji. Jednakże, nadal nie można osadzić filmu w pliku Flasha ani eksportować go w formacie SWF dla Sieci, bądź jako samo odtwarzający się film. Można osadzić plik Flasha w filmie w formacie QuickTime, lecz nie da się tego wykonać w drugą stronę. Na szczęście można ten problem obejść: da się produkować animację wideo we Flashu i w tym rozdziale wyjaśnimy w jaki sposób się to odbywa. Na kolejnych stronach przedstawimy technikę służącą do przekształcania cyfrowego wideo w wektorową jego wersję, co otworzy ci nową dziedzinę animacji, a także zwiększy twoje umiejętności, które będziesz mógł dodać do swojej ofertówki Flasha. Wszyscy widzieliśmy witryny internetowe wykonane we Flashu, na których tekst pojawia się wirując po ekranie, pojawiając się i znikając. Chociaż pomysł taki jest w porządku, witrynę zawierającą coś odrobinę innego zawsze jest miło oglądać. Właśnie z tego powodu zdecydowałem się poeksperymentować z łączeniem z Flashem innych aplikacji z nadzieją na rozwinięcie mojej animacji. Chociaż jestem fanem Flasha, doceniam również siłę i kontrolę obrazków w programie After Effects firmy Adobe, dlatego też postanowiłem spróbować połączyć te dwie aplikacje licząc na to, że uda mi się stworzyć coś nie tylko niezwykle fajnego, lecz również przydatnego. Jestem doświadczonym użytkownikiem After Effects, lecz czuję, że program ten w połączeniu z Flashem zawiera potężny potencjał do tworzenia interesujących i innowacyjnych kompozycji, które podbiją Sieć. Na następnym stronach przedstawimy sposób przekształcania klipu wideo w serię czarnobiałych obrazków w programie After Effects, a także w Photoshopie. Jeśli nie posiadasz After Effects możesz pobrać wersje próbną tej aplikacji z witryny firmy Adobe www.adobe.com. Na płycie CD-ROM dołączonej do książki umieściliśmy łącze do strony z plikami do pobrania. Chociaż w wersji demonstracyjnej nie będziesz mógł zapisać wykonanej w After Effects pracy, na płycie CD-ROM znajdziesz wszystkie pliki w formacie PICT wykonane w tym programie i gotowe do importowania do Flasha. Po umieszczeniu ich we Flashu przekształcimy je w obrazki wektorowe, aby wykonać z nich wektorową animację wideo. Dlaczego? Ponieważ dobrze się prezentuje, jest świetnym estetycznym narzędziem i, z odrobiną wyobraźni, może być stosowane do tworzenia przeróżnych efektów. Poniższe dwa rysunki przedstawiają zastosowanie wektorowej animacji wideo we Flashu. Pierwszy z nich został wykonany z wygaszacza ekranu pewnej grupy muzycznej, a drugi stanowi część firmy produkującej wodę mineralną:
Rozdział 5-131
Pierwszym etapem w całym procesie jest wybór właściwego materiału filmowego.
Wybór właściwego klipu Istnieją (oczywiście!) ograniczenia zastosowania animacji wektorowej we Flashu, i końcowy efekt będzie zależał w dużej mierze od doboru oryginalnego materiału filmowego. Musisz być świadomy, że zamierzasz przekształcić materiał filmowy w serię biało-czarnych obrazków. Można zachować materiał filmowy w kolorze, lecz wymagałoby to o wiele bardziej skomplikowanego przetwarzania, a ty musiałbyś w pełni zrozumieć ten proces zanim zabrałbyś się za eksperymentowanie z nim. Zatem, na przykład, materiał filmowy przedstawiający człowieka ubranego w całości na czarno i biegnącego na białym tle łatwiej będzie można przekształcić, niż rozmyty i zniekształcony film zawierający wiele szczegółów i efektów świetlnych. Oczywiście pomiędzy tymi dwoma punktami ekstremalnymi znajdziesz wiele odpowiedniego materiału, a gdy już raz zastosujesz tą technikę we Flashu, instynktownie będziesz wiedział, jakie filmy dadzą najlepsze efekty. Więc, zgodnie z ogólną zasadą, im mniej szczegółów w filmie tym łatwiejsza będzie jego konwersja. Długość filmu i wybrana przez ciebie prędkość odtwarzania również powinny być wzięte pod uwagę. Elementy te są szczególnie ważne, gdy zamierzasz zastosować ukończone wideo w Sieci, gdzie rozmiar pliku zawsze jest wart rozważenia. Ponadto, pamiętaj również, że dynamiczna animacja wideo o bogatej zawartości zawsze w większym stopniu obciąża maszynę, na której jest ona odtwarzana i wówczas starsze, wolniejsze komputery mogą mieć problemy z płynnym jej odtworzeniem. Kolejnym ważnym czynnikiem jest to, że podobnie jak w tradycyjnej animacji, musisz w tym wypadku zastosować metodę poklatkową. Podczas gdy wiele animacji Flasha tworzonych jest z zastosowaniem ujęć kluczowych w połączeniu z uzupełnianiem ruchu, gdy stosujesz technikę poklatkową nie możesz zastosować uzupełniania ruchu, a ujęciem kluczowym będzie każde ujęcie.
Rozdział 5-132
Gdy przystąpisz do przekształcania obrazków wideo w obrazki wektorowe i zaczniesz je optymalizować, musisz pracować oddzielnie nad każdym ujęciem. Oznacza to, że powinieneś dokładnie określić długość filmu i ilość czasu, jaką możesz przeznaczyć na pracę nad nim. Na przykład, jeśli twój film trwa 1 minutę, a ty chcesz uzyskać bardzo płynną animację, należy zachować prędkość odtwarzania wynoszącą 25 fps, czyli taką, z jaką film został nagrany. W takim przypadku miałbyś do opracowania 60x25 ujęć, co daje w sumie 1500 ujęć kluczowych. Nie jest to niemożliwe, lecz na pewno trudne do realizacji. Im dłuższy jest wybrany przez ciebie film, tym więcej będziesz miał pracy, i prawdopodobnie tym większy uzyskasz końcowy rozmiar pliku. Pamiętając o tych wszystkich rozważaniach spróbujemy teraz przekształcić krótki fragment wideo z płyty CD-ROM w animację we Flashu. Otwórz plik ready made cable wideo.swf i uruchom go. To jest właśnie efekt, jakiego będziemy starali się uzyskać. Zauważ, że rozmiar całego pliku wynosi około 60 kilobajtów. Zajmijmy się teraz poszczególnymi etapami tworzenia tego typu filmu. Obróbka klipu w programie After Effects
Dla tego ćwiczenia będziesz potrzebować klip wideo, jaki chcesz umieścić we Flashu. Jeśli nie masz przygotowanego klipu, bądź wolisz dokładnie śledzić ćwiczenie, zastosuj klip wideo cable-bluebirds are blue.mov znajdujący się na płycie CD-ROM dołączonej do książki. Po wybraniu filmu przejdziemy teraz do programu After Effects. Technikę tę można zastosować też w innych programach, lecz ja wybrałem właśnie tą aplikację. Będziemy importować film, przekształcimy go w biało-czarne obrazki i następnie eksportujemy go, gotowego do zastosowania we Flashu, w formie serii oddzielnych plików obrazków. Wybrany przez ciebie format zależy od systemu, na jakim będziesz pracować. Ja stosuję pliki w formacie PICT na Macintoshu, lecz użytkownicy pecetów mogą wybrać pliki w formacie JPG lub TIF. 1. W programie After Effects utwórz nową kompozycję poleceniem Composition|New Composition (jeśli menu Composition pozostaje nieaktywne zastosuj najpierw polecenie File|New Project). Wówczas wyświetlone zostanie okno dialogowe Composition Settings:
W tym oknie dialogowym możesz określić rozmiar ujęcia (Frame Size) dla kompozycji. Wybierz rozmiar taki sam jak rozmiar twojego filmu, aby dopasować go do ujęcia. Ja wybrałem rozmiar ujęcia 320×240, dlatego też potrzebuję kompozycję również o rozmiarze 320×240. Przypisz prędkościodtwarzania (Frame Rate) wartość równą wartości oryginalnego klipu wideo, w moim przypadku jest to 24fps, a także wybierz długość trwania filmu (Duration). Ja zamierzam wykonać kompozycję Rozdział 5-133
trwającą 10 sekund. Możesz również nazwać kompozycję; ja nazwałem swoją Music Video (ang. wideo muzyczne). Po wprowadzeniu tych wszystkich parametrów wciśnij przycisk OK. Jeśli podczas dokonywania tych ustawień popełnisz błąd, zawsze możesz powrócić do tego okna dialogowego wybierając polecenie Composition|Composition Settings. Teraz należy importować klip wideo. 2. Zastosuj polecenie File|Import|Footage File. 3. Zlokalizuj wybrany przez ciebie klip, w naszym przypadku jest to plik cable-blue birds are blue.mov umieszczony na płycie CD-ROM, a wciśnij przycisk OK. Jeśli pojawi się okno dialogowe Interpret Footage, będzie to oznaczać, że należy określić sposób traktowania przez program kanału alfa. W tym przypadku powinien ignorować kanały, więc wciśnij przycisk Ignore i OK. Twój ekran powinien wyglądać mniej więcej tak:
Nie przejmuj się, że wszystko na ekranie wyświetlania wydaje się czarne oznacza to, że na razie importowaliśmy wideo, lecz jeszcze nie umieściliśmy w nim niczego widocznego. Sytuacja ta jest zbliżona do importowania czegoś do Flasha: importowany obiekt umieszczony zostaje w bibliotece, lecz nie jest widoczny, dopóki nie przeciągniesz go na scenę. W After Effects zamiast przeciągać obiekt na scenę po prostu przeciągasz go na listwę czasową. 4. W oknie projektu zaznacz importowany film i przeciągnij go na listwę czasową (czyli do okna Time Layout znajdującego się u dołu ekranu). Wskaźnik odtwarzania w oknie Time Layout powinien znajdować się na początku kompozycji, czyli w punkcie 00:00:00, aby wyrównać początek filmu z początkiem kompozycji. Ujęcie, na które wskazuje wskaźnik odtwarzania w momencie umieszczenia jakiegoś obiektu na listwie czasowej oznacza, w którym miejscu obiekt ten pojawi się w stosunku do całej kompozycji. Okno kompozycji nadal jest puste, lecz to dlatego, że film rozpoczyna się od pustego ekranu. Po dodaniu filmu do kompozycji widoczna jest jego nazwa w oknie Time Layout:
Teraz, jeśli chcesz, możesz odtworzyć cały film wciskając spację na klawiaturze, lub gruby przycisk Play na panelu Time Controls:
Rozdział 5-134
Jeśli okno Time Controls nie jest widoczne, zastosuj polecenie Window|Show Time Controls. Pamiętaj, że gdy w programie After Effects odtwarzany jest klip, każde ujęcie przetwarzane jest oddzielnie, co oznacza, że film nie jest odtwarzany z jego prawdziwą prędkością. W oknie Time Controls wyświetlana jest aktualna prędkość odtwarzania filmu. Po ukończeniu oglądania filmu wciśnij przycisk Rewind, aby powrócić na początek klipu. Film cable... jest trochę za duży, do przeniesienia go do Flasha, gdyż trwa aż trzy minuty. Obecnie film zawiera 4584 ujęć. Nawet, jeśli ograniczymy go do 12 ujęć na sekundę, nadal pozostaje nam 2292 ujęć. Z tego względu zastosujemy tylko niewielką część filmu w Flashu — 10 sekund powinno wystarczyć. Na szczęście w After Effects możesz zaznaczać poszczególne części klipu do zastosowania ich w kompozycji i odpowiednio wyregulować ich długość. 5. Dwukrotnie kliknij w oknie Composition i wówczas otwarte zostanie nowe okno, z nawą filmu na górnym pasku:
W tym oknie dialogowym możesz edytować materiał filmowy, którego umieściłeś w kompozycji. 6. Kliknij na pole bieżącego czasu (Current Time), wpisz 0:01:01:07 i wciśnij OK. W ten sposób wskaźnik odtwarzania przesunie się do tego punktu w klipie. 7. Teraz kliknij na polu Set In Point, aby określić wybrany przez nas punkt jako punkt początku zaznaczenia. Następnie ponownie kliknij na polu Current Time i wpisz 0:01:11:07, czyli punkt znajdujący się 10 sekund za punktem początkowym i kliknij na pole Set Out Point, aby określić go jako punkt końca zaznaczenia. Możesz sprawdzić długość zaznaczenia zerkając na pole Duration, oznaczone symbolem małego trójkąta, obok pól Set In i Set Out Point. 8. Na koniec zamknij okno dialogowe, aby zaznaczenie zostało zaakceptowane.
Rozdział 5-135
9. Teraz zajmiemy się przekształcaniem poszczególnych ujęć w biało-czarne obrazki. Najpierw wciśnij przycisk Rewind w oknie Time Controls, aby umieścić wskaźnik odtwarzania na początku klipu. Po upewnieniu się, że zaznaczyłeś klip w oknie Time Layout zastosuj polecenie Effects|Adjust|Threshold. Klip filmowy w oknie Composition natychmiast utraci swoje kolory i składać się będą na niego tylko sekcje blokowe białego i czarnego, bez żadnych odcieni szarości:
Wyświetlone zostanie również nowe okno o nazwie Effects Controls, przedstawiające bieżące ustawienia parametru Threshold:
W programie After Effects każda warstwa, na której zastosowano jakiś efekt posiada własne okno Effects Controls. Okno to umożliwia modyfikację wszystkich wartości dla aktualnie zaznaczonego efektu, w tym przypadku jest to poziom progowy (Threshold), aby uzyskać zamierzony przez ciebie efekt. Można wybrać różne poziomy progowe w różnych punktach kompozycji poprzez dodanie w nich ujęć kluczowych. Na razie jednak zastosujemy efekt na całej kompozycji. 10. Z aktywnym oknem Composition odtwórz film wciskając spację, lub przycisk odtwarzania w oknie Time Controls. Dzięki temu zobaczysz, jak mniej więcej będzie wyglądać ten film we Flashu. W oknie Effects Controls możesz teraz zmienić wartość parametru Threshold albo przesuwając suwak, albo klikając na bieżącej wartości w oknie i wprowadzając nową. Jeśli jesteś nowym użytkownikiem After Effects pamiętaj, że na każdy element interfejsu, który zawiera wielokropek można kliknąć, aby wyświetlić okno dialogowe, w którym reguluje się dane ustawienia.
Podczas wybierania wartości dla parametru Threshold warto zastanowić cię, co uważasz w danym filmie za jego zasadniczą część. Na przykład, jeśli film przedstawiałby postać spoglądającą na zegarek, wówczas najważniejszym elementem filmu byłby ujęcia tarczy i wskazówek zegarka. Upewnij się, że ujęcia te są czytelne Rozdział 5-136
przesuwając wskaźnik odtwarzania, aby widoczne one były w oknie Composition i wówczas wybierz odpowiedni poziom progowy. Następnie ponownie sprawdź cały film i upewnij się, że dobrze prezentuje się jako całość. Im mniejsza będzie wartość parametru Threshold tym więcej białego koloru będzie na obrazku i vice versa, na przykład:
Na tym etapie warto zapisać tę kompozycję w formacie QuickTime, abyś mógł warto zaobserwować zmiany. Zrenderuj go w niskiej jakości, aby zmniejszyć czas renderowania i ułatwić ci podjęcie decyzji o jego użyteczności. Do tego celu zastosuj polecenie Composition|Make Movie, lecz pamiętaj, że nie będziesz mógł zrenderować filmu w wersji demonstracyjnej programu. Pamiętaj również, że po przeniesieniu do Flasha film straci trochę na szczegółach, więc im lepszy zachowa teraz wygląd, tym lepszej będzie jakości w ukończonej wersji. Nawet, jeśli jesteś zadowolony z uzyskanych rezultatów warto poświęcić trochę czasu na wypróbowanie różnych poziomów progowych, gdyż bardzo niewielkie zmiany w ustawieniach znacznie wpływają na końcowy rezultat. Ja zadowoliłem się standardowym ustawieniem dla parametru Threshold o wartości 127 i taka wartość jest zachowana dla pliku umieszczonego na płycie CD-ROM. Ostatnim etapem pracy w programie After Effects będzie przygotowanie filmu do zastosowania we Flashu. Będziemy go eksportować do serii oddzielnych plików, z których, odtwarzając je jeden po drugim, stworzymy wrażenie filmu. Oczywiście końcowej wersji nadamy stylizowany wygląd przy pomocy funkcji Trace Bitmap dostępnej we Flashu. 11. Zastosuj polecenie Composition|Make Movie. W wyświetlonym oknie dialogowym nazwij film i wybierz miejsce zapisania go. Ponieważ będziemy jednocześnie produkować wiele plików najlepiej utworzyć dla nich nowy folder. Nazwij folder i film i wciśnij przycisk Save. Wówczas wyświetlone zostanie okno dialogowe Render Queue:
Rozdział 5-137
12. Z menu Render Settings wybierz pozycję Custom, a następnie przypisz parametrowi Quality opcję Best, a parametrowi Resolution: Fill. Teraz w polu Time Sampling zaznacz opcję Use this frame rate. Dzięki tej opcji będziesz mógł określić prędkość odtwarzania dla eksportowanego filmu:
Najlepiej wybrać taką prędkość odtwarzania, z jaką najlepiej pracuje ci się we Flashu. Jednakże, im więcej ujęć, tym więcej informacji zostaje umieszczonych w filmie, co z kolei zwiększa rozmiar liku. Pamiętając o tym postaraj się znaleźć pośrednie rozwiązanie pomiędzy płynną animacją i rozsądnym rozmiarem pliku. Mógłbym doradzić ci wybór prędkości odtwarzania wynoszącej 12 ujęć na sekundę, lecz zależy ona zarówno od preferencji użytkownika, jak i liczbie szczegółów w filmie. Właściwą prędkość odtwarzania można wybrać tylko na jeden sposób: zrozumienie całego procesu i praktyka. Mogę jedynie zasugerować, że dowolny wybór pomiędzy 8 i 12 ujęciami na sekundę powinien być trafny. Bardzo rzadko stosuje się prędkość odtwarzania przekraczającą 15 ujęć na sekundę — i zdecydowanie nie tylko z powodu nawału pracy, jaką masz wykonać we Flashu! Ja wybrałem prędkość odtwarzania 8 ujęć na sekundę, co dało w całości 80 ujęć do przetworzenia. 13. Po wybraniu prędkość odtwarzania wciśnij przycisk OK. Teraz ponownie w oknie dialogowym Render Queue z menu Output Module wybierz pozycję Custom. Z menu Format wybierz format pliku i wciśnij przycisk OK. Ja wybrałem format PICT, gdyż jest to najbardziej odpowiedni format dla Macintosha, natomiast formatem najlepszym dla peceta jest JPG:
Rozdział 5-138
14. Powróć do okna dialogowego Render Queue. Wciśnij przycisk Render, aby eksportować pliki do wybranego foldera. Pamiętaj, że w wersji demonstracyjnej programu After Effects nie będziesz mógł zrenderować filmu, ani go zapisać. Jednakże, pliki jakie być utworzył, znajdują się na płycie CD-ROM gotowe do importowania do Flasha. Jeśli nie masz zamiaru kupować programu After Effects uważasz zapewne, że przedstawiona tutaj technika jest zupełnie nieprzydatna. Wcale nie. Do przygotowania plików dla wideo Flasha możesz skorzystać również z programów QuickTime Pro i Photoshop. Przejdziemy teraz do omówienia tych metod. Jeśli posiadasz starszą wersję Photoshopa bez funkcji Actions będziesz musiał zastosować wartość progową na każde ujęcie oddzielnie, a nie na wszystkie jednocześnie, jak w poniższym ćwiczeniu. Jeśli zamiast programu QuickTime Pro masz tylko QuickTime, przechwytujesz na ekranie poszczególne ujęcia filmu i przenosisz je do Photoshopa — nie jest to idealne rozwiązanie, lecz możliwe do przejścia dla użytkowników o dużych pokładach cierpliwości.
Zastosowanie programów QuickTime Pro i Photoshop Pierwszą metodą jest eksportowanie filmu jako sekwencji obrazków z programu QuickTime Pro (w skrócie QuickTime), a następnie importowanie ich bezpośrednio do Flasha. Jest to bardzo prosty proces. 1. Najpierw utwórz nowy katalog dla wszystkich obrazków, które będziesz eksportować, a następnie otwórz film w programie QuickTime przy pomocy polecenia File|Open Movie. 2. Teraz zaznacz część filmu, jaką chcesz zastosować. W tym celu najpierw przesuń znacznik końca zaznaczenia (Selection End) do pozycji 01:11:
3. Przesuń znacznik początku zaznaczenia do pozycji 01:01:
Rozdział 5-139
4. Teraz musimy przyciąć wszystko oprócz wybranego zaznaczenia. W tym cele zastosujemy polecenie Trim z menu Edit. Na pececie wciskasz i przytrzymujesz klawisze Ctrl+Alt, a następnie przechodzisz do menu Edit, a na Macintoshu najpierw wciskasz klawisz Option i wówczas otwierasz menu Edit. 5. Jesteś już gotowy do eksportowanie pliku. Zastosuj polecenie File|Export, aby wyświetlić okno dialogowe Export i wpisz nazwę dla sekwencji obrazków, pod jaką zostanie ona zapisana. W programie QuickTime na koniec nazwy zostanie dodany numer, aby zachować pliki oddzielnie:
6. Z menu Export wybierz pozycję Movie to Image Sequence, a następnie wciśnij przycisk Options i z menu Format wybierz odpowiedni format. I w tym przypadku zalecam zastosowanie formatu JPG dla peceta i PICT dla Macintosha.
7. Teraz wpisz wybraną przez ciebie liczbę ujęć na sekundę — ja ponownie wybrałem 8 — i wciśnij OK, a następnie wciśnij przycisk Save, aby eksportować sekwencję obrazków. Może to potrwać trochę dłużej na wolniejszych komputerach, lecz nie powinno być to zbyt długo. Oczywiście, na tych obrazkach nie zastosowaliśmy efektu progowego, jak na obrazkach w programie After Effects, więc mimo, że wideo Flasha będzie charakteryzować się dużą liczbę szczegółów, będzie niestety zajmować dużo miejsca. Można ten problem obejść otwierając wszystkie eksportowane pliki w Photoshopie i w tym programie zastosować na nich wartość progową. Wówczas obrazki będą już gotowe do importowania do Flasha. Pomysł z dużą liczbą plików przygotowanych do otworzenia każdego odzienie, zastosowania na nim efektu i zapisania każdego z nich na pewno ci się nie uśmiecha. Ale nie martw się, gdyż wszystko możesz wykonać jednocześnie. W Photoshopie znajduje się okno akcji umożliwiające nagranie danego procesu, a następnie
Rozdział 5-140
zastosowanie go na dowolnej liczbie obrazków. Najpierw jednak należy pokazać Photoshopowi, co to jest za proces. Instrukcje w tym ćwiczeniu odnoszą się do programu Photoshop w wersji 5.5, lecz dołączyliśmy również informacje o różnicach dla wersji Photoshop 4.01.
8. W Photoshopie otwórz kilka ujęć z sekwencji i odnajdź charakteryzujące się dużą liczbę szczegółów, lub jakimś kluczowym momentem w sekwencji. Następnie zastosuj polecenie Image|Adjust|Threshold:
9. Zmień ustawienia dla parametru Threshold przesuwając suwak, albo wprowadzając odpowiednią wartość w pole, aby uzyskać jak najlepszy blokowy czarno-biały obrazek. Nie wciskaj OK — na razie wyszukujesz właściwe ustawienie. Zapamiętaj ustawienie dające najlepszy efekt i wciśnij przycisk Cancel. 10. Z wciąż otwartym obrazkiem zastosuj polecenie Window|Show Actions. Następnie, w oknie Actions kliknij na strzałce umieszczonej u góry po prawej stronie, wybierz pozycję New Set i nazwij ten nowy zestaw jako Set 1. Teraz ponownie kliknij na strzałce i wybierz pozycję New Action. W czwartej wersji Photoshopa nie ma opcji do utworzenia nowego zestawu, więc zajmij się od razu przygotowaniem nowej akcji. Nazwij ją Flash Effect.
Po wciśnięciu przycisku Record Photoshop nagra wszystkie akcje, jakie wówczas wykonasz, a przycisk nagrywania (Record) umieszczony u dołu okna Actions będzie na czerwono sygnalizować, że nagrywanie jest w trakcie. 11. Wciśnij przycisk Record i, jak poprzednio, zastosuj polecenie Image|Adjust|Threshold, wpisz poprzednio wybraną wartość i kliknij OK. Teraz wciśnij przycisk Stop na lewo od przycisku Record, aby zakończyć nagrywanie nowej akcji. Nowa akcja zostanie dodana do okna Actions, gotowa do zastosowania na dowolnym obrazku.
Rozdział 5-141
12. Zamknij obrazek, którego użyłeś do utworzenia akcji, lecz nie zapisuj w nim zmian. Zanim zastosujemy efekt na wszystkich plikach w formacie PICT warto najpierw wykonać ich kopie w oddzielnym folderze na wszelki wypadek, jakbyś nie był zadowolony z końcowego efektu.
13. Upewnij się, że w Photoshopie żadne pliki nie są otwarte i zastosuj polecenie File|Automate|Batch:
W czwartej wersji Photoshopa polecenie Batch znajduje się w oknie Actions w menu pod strzałką Option. 14. W oknie dialogowym Batch z menu Set wybierz pozycję Set1, a z menu Action pozycję Flash Effect. Następnie, w sekcji Source wciśnij przycisk Choose i odnajdź oryginalny folder zawierający sekwencję obrazków. Zaznacz go i wciśnij OK, po czym powróć do okna dialogowego Batch. Teraz z menu Destination wybierz pozycję Save and Close. Użytkownicy Photoshopa 4 mają do dyspozycji te same polecenia, oprócz menu Set:
Rozdział 5-142
Photoshop otworzy teraz każdy obrazek, zastosuje na nim efekt, zapisze zmiany i zamknie obrazek, wykonując wszystko za ciebie. Połóż nogi na stole i ciesz się filiżanką kawy. 15. Aby rozpocząć sekwencję automatyzacji kliknij OK. Teraz masz już serię plików gotowych do przeniesienia do Flasha. Jak już wspomnieliśmy, na płycie CD-ROM zamieściliśmy gotowe do importowania pliki. Może uważasz tą technikę, za nieco czasochłonną, lecz na pewno przekonasz się, że było warto, gdy dotrzemy do kolejnego etapu, czyli tworzenia wektorowego wideo we Flashu. Tworzenie wektorowego wideo we Flashu
1. W nowym filmie Flasha zastosuj polecenie File|Import i zlokalizuj folder zawierający sekwencję obrazków. Zaznacz pierwszy plik w sekwencji i wciśnij przycisk Import. Wówczas zostanie wyświetlone zapytanie, czy chcesz importować pozostałe obrazki z sekwencji:
Wciśnij przycisk Yes, aby ta wspaniała oszczędzająca czas funkcja została zastosowana, zanim Flash się rozmyśli. Po ukończeniu importowania wszystkie pliki w odpowiedniej kolejności powinny być widoczne na listwie czasowej, każdy w oddzielnym ujęciu. Jeśli zapisałeś obrazki nie w rodzimym formacie, Flash może cię spytać, czy chcesz importować je przez QuickTime’a. Jeśli zostanie wyświetlony tego typu komunikat, wciśnij przycisk Yes. 2. Przetestuj film, aby zobaczyć jak się prezentuje. Czy prędkość odtwarzania zastosowana w programie After Effects jest zbyt wolna, czy też dałbyś sobie radę bez problemu z mniejszą liczbą ujęć? Jeśli tak, powinieneś teraz wrócić do programu After Effects i zmienić prędkość odtwarzania przy ponownym eksportowaniu klipu wideo. Jeśli odpowiada ci wygląd filmu przejrzyj listwę czasową i postaraj się odnaleźć dwa identyczne obrazki. Kilka z początkowych obrazków twarzy strażnika powinny się nadać; obejrzyj ujęcia 12-14:
Czasami coś takiego się zdarza podczas używania plików w ten sposób, lecz oznacza to, że w takim momencie kamera skoncentrowała się na jednym miejscu i w efekcie wykonała kilka podobnych lub identycznych obrazków. 3. Jeśli znajdziesz kilka jednakowych obrazków usuń powtarzające się obrazki z listwy czasowej, lecz nie ze sceny; podświetl ujęcie, które chcesz usunąć na listwie czasowej i zastosuj polecenie Insert|Clear Keyframe. Wówczas wybrane ujęcie zostanie
Rozdział 5-143
usunięcie, chociaż obrazek zostanie zachowany w bibliotece. Wycinanie jednego czy dwóch obrazków z osiemdziesięciu może wydać się bezsensowne, lecz we Flashu nawet odjęcie pojedynczych obrazków może zmniejszyć rozmiar pliku i skrócić czas pobierania, co, jak wszyscy wiemy, jest istotnym zagadnieniem dla użytkownika Sieci. Teraz jesteśmy już gotowi do przekształcenia sekwencji plików map bitowych w pliki wektorowe poprzez zastosowanie polecenia Trace Bitmap. 4. Odtwórz ponownie film i odnajdź, jak to robiliśmy wcześniej, istotny moment, lub fragment zawierający dużą liczbę szczegółów. Zaznacz wybrany obrazek na scenie i zastosuj polecenie Modify|Trace Bitmap:
To jest właśnie kulminacyjny moment naszej pracy. Okno dialogowe Trace Bitmap powinno być już wyświetlone. Zawiera ono ustawienia dla parametrów Color Threshold, Minimum Area, Curve Fit i Corner Threshold. Te cztery ustawienia mogą drastycznie zmienić wygląd przyszłej wektorowej grafiki, więc zatrzymajmy się tutaj na chwilę, aby wytłumaczyć funkcję każdego z nich. Color Threshold Dla tego parametru podajesz wartość progową koloru od 0 do 500. Podczas porównywania dwóch pikseli, jeśli różnica w wartość składowych RGB jest mniejsza od wartość parametru Color Threshold, piksele te uznawane są za identyczne w kolorze. Oznacza to, że zwiększenie wartości progowej spowoduje zmniejszenie liczby kolorów. Podobnie jak w programie After Effects parametr ten nie jest istotny dla naszego ćwiczenia, więc możesz wybrać dowolnie wysoką wartość. Jeśli jednak pracujesz na nieprzygotowanych, wielokolorowych obrazkach wypróbuj różne ustawienia dla tego parametru, aby wybrać najodpowiedniejsze. Minimum Area Dla tego parametru podajesz wartość od 1 do 1000. Wartość ta określi liczbę sąsiadujących pikseli, rozważaną podczas przypisywania koloru do piksela, przez Flasha. Im mniejsza wartość tym mniejszy będzie obszar z przypisanym do niego tym samym kolorem i tym więcej szczegółów zachowa obrazek, lecz jednocześnie zwiększy się rozmiar jego pliku. Wybrana przez ciebie wartość dla tego parametru będzie zależeć od stylu, jakiego chcesz uzyskać dla filmu. Poniżej przedstawiliśmy dwa przykłady z różnymi wartościami dla parametru Minimum Area.
Rozdział 5-144
Curve Fit Opcja wybrana z menu dla tego parametru określi stopień gładkości konturów podczas śledzenia obrazka. Innym słowy, parametr ten określa liczbę punktów, z jakich będzie składać się krzywa:
Corner Threshold Ten parametr decyduje o kształcie ostrych krawędzi — czy mają one zostać zachowane, czy też wygładzone. To ustawienie prawdopodobnie nie wywrze znacznego wpływu na wyglądzie naszego filmu:
Kombinacja wybranych przez ciebie ustawień odegra istotną rolę w ukształtowaniu wyglądu wektorowych obrazków. Wypróbuj kilka ustawień i wybierz, te które uważasz za najwłaściwsze. W najlepszym przypadku każde ujęcie powinno być prostym obrazkiem blokowym z rozpoznawalną zawartością. Trudno polecić jakiekolwiek ustawienia, bez obejrzenia obrazka, dla jakiego mają one zostać dobrane. Jednakże, eksperymentacja oparta na wskazówkach przedstawionych powyżej powinna pomóc ci w uzyskaniu właściwych rezultatów, lecz również spróbuj zastosować te ustawienia do stylizacji filmu Flasha, gdyż uzyskasz w ten sposób
Rozdział 5-145
dziwne i interesujące efekty wizualne. Gdy już uzyskałeś zadowalający cię wygląd, należy go teraz zastosować na każdej z importowanych map bitowych. 5. Przejdź na początek sekwencji i stosując wybrane ustawienia wyśledź wszystkie mapy bitowe w filmie. Od razu ostrzegam, że jest to czasochłonne zajęcie, zwłaszcza na wolnych komputerach, lecz jak tylko wpadniesz w rytm, pójdzie gładko. W takich właśnie sytuacjach warto zastosować skróty klawiszowe — Alt+M, B na pececie, lub zdefiniuj własne skróty klawiszowe zarówno na peceta, jak i Macintosha (Edit|Keyboard Shortcuts). Gdy lepiej zaznajomisz się z omawianym procesem będziesz mógł stosować inne ustawienia dla polecenia Trace Bitmap dla bardziej szczegółowych lub ważniejszych ujęć, od tych które używasz dla prostszych ujęć, aby zmniejszyć rozmiar pliku lub po prostu utworzyć inny efekt. Nie można tutaj podać ani właściwej ani niepoprawnej odpowiedzi, jeśli tylko jesteś zadowolony z powstałego efektu. Jednakże, jeśli wykonujesz zlecenie klienta, on właśnie może zdecydować o wyglądzie filmu, jaki powinieneś uzyskać! 6. Eksportuj film Flasha i obejrzyj go kilkakrotnie. Zastanów się, czy jesteś zadowolony z powstałego efektu. Jaki jest rozmiar pliku? Czy film odtwarzany jest zbyt wolno, czy też zbyt szybko? Spróbuj zmienić prędkość odtwarzania i ponownie obejrzyj film. Zwiększenie prędkości odtwarzania upłynni animację, lecz jednocześnie skróci czas oglądania filmu, natomiast zmniejszenie liczby ujęć na sekundę zwolni odtwarzanie animacji i stanie się ona przez to mniej płynna. W ten sposób możesz uzyskać albo i nie styl filmu, jakiego chciałeś. Możesz zwolnić pewne fragmenty filmu, a przyspieszyć inne, łatwo to wykonać: aby przyspieszyć fragment filmu przejdź do tego momentu w filmie i usuń co drugie ujęcie w fragmencie, którego chcesz przyspieszyć. Zawsze po dokonaniu takich zmian odtwórz film, aby sprawdzić, czy odpowiada ci powstały efekt i wówczas albo usuń jeszcze kilka ujęć, albo dziękuj niebiosom za wystarczającą liczbę poziomów polecenia Undo we Flashu. Aby zwolnić część animacji podświetl ujęcie na listwie czasowej i zastosuj polecenie Insert|Frame. Wówczas zostanie dodane dodatkowe ujęcie do danego obrazka. Przejdź do ujęcia z kolejnym obrazkiem i wykonaj tą samą operację tyle razy ile będzie to konieczne dla uzyskania pożądanego efektu. Następnym etapem jest przekształcenie całej sekwencji pojedynczych ujęć w klip filmowy. Należy tego dokonać z kilku powodów: • Później łatwiej ci będzie pracować nad klipem filmowym w większości projektów, chyba że są one bardzo proste. • Łatwiej stosować takie efekty, jak zmianę kolorów czy parametr przeźroczystości, gdy wszystkie ujęcia umieszczone są w jednym miejscu. • Bardzo trudno byłoby zastosować jakikolwiek ruch w animacji (czyli wideo poruszającego się po ekranie podczas odtwarzania go). • Ponadto bardzo łatwo można zmienić rozmiar filmowi, co oczywiście możesz wykonać również teraz, gdy utworzyłeś już wektorowy klip filmowy animacji. Wcześniej, gdy składał się z map bitowych, nie dałoby się tego zrobić. 7. W tym celu najpierw podświetl wszystkie ujęcia na listwie czasowej, a następnie zastosuj polecenie Edit|Copy Frames, aby skopiować je. 8. Teraz podświetl pierwsze ujęcie w sekwencji na scenie, zgrupuj je i przekształć w klip filmowy. 9. Następnie dwukrotnie kliknij na nowym filmie, aby otworzyć go do edycji, zaznacz ujęcie 1 na listwie czasowej i wklej skopiowane ujęcia kluczowe do klipu filmowego przy pomocy polecenia Edit|Paste Frames: Rozdział 5-146
Możesz teraz usunąć wszystkie oryginalne ujęcia z listwy czasowej, a następnie po prosty przeciągnąć kopię klipu filmowego do pierwszego ujęcia. Film jest już prawie ukończony, lecz jeśli chciałbyś poświęcić jeszcze odrobinę jego jakości, możesz zastosować kilka sztuczek optymalizacji do zmniejszenia rozmiaru pliku filmu.
Optymalizacja Jeśli już kiedykolwiek przedtem optymalizowałeś obrazki we Flashu, wiesz dobrze, że uzyskane wyniki czasami różnią się od tych, jakich się spodziewałeś. Czasami są to zmiany na lepsze, z abstrakcyjnymi obrazkami pojawiającymi się wewnątrz tego, co kiedyś było twoim oryginalnym wideo, lecz częściej będzie to po prostu film o słabej jakości. Optymalizacja obrazka wektorowego we Flashu w dużej mierze składa się z wygładzania jego krzywych, im mniej krzywych zawartych jest na obrazku, tym mniej informacji jest przechowywanych w pliku na ten temat i tym mniejszy jest rozmiar pliku. Jeśli jednak przesadzisz z optymalizacją skończysz z bezsensownymi kształtami nie zawierającymi żadnej wizualnej informacji bez względu, jakby „artystycznie” wyglądały. Jak można, więc zoptymalizować serię wektorowych obrazków? Obawiam się, że jedynym rozwiązaniem jest praca nad każdym ujęciem na listwie czasowej oddzielnie. Nie jest to może najbardziej fascynująca praca z możliwych, lecz dzięki temu możesz znacznie zmniejszyć rozmiar pliku. Optymalizacja klipu filmowego we Flashu
1. Przejdź do swojego klipu filmowego we Flashu, zaznacz pierwsze ujęcie w sekwencji i zastosuj polecenie Modify|Optimize, aby uzyskać dostęp do okna dialogowego Optimize Curves.
2. Najlepiej pozostawić suwak na środku. Warto spróbować najpierw zastosować maksymalną optymalizację, ponieważ, jeśli spodoba ci się efekt, maksymalnie zmniejszysz rozmiar pliku, lecz może się również tak zdarzyć, że natychmiast po obejrzeniu efektu zastosujesz polecenie Undo. Dwa pola wyboru w sekcji Options również zazwyczaj pozostawia się zaznaczone. Na koniec, pamiętaj, że mimo zmniejszenia rozmiaru pliku obrazek nadal powinien być rozpoznawalny, gdyż inaczej cały film straci sens — przynajmniej w większości aplikacji. 3. Powtórz ten proces dla każdego ujęcia. Warto powiększyć każde ujęcie i sprawdzić, czy nie ma na obrazku żadnych kropek, bądź innych skaz, gdyż nie są one istotne dla całego obrazka, a przyczyniają się do zwiększenia rozmiaru pliku.
Rozdział 5-147
4. Jeśli zauważyłeś niepotrzebne informacje, jak na przykład białe tło we wszystkich ujęciach, wybierz narzędzie gumki, włącz opcję Faucet i kliknij na niepotrzebnych blokach koloru. Po zakończeniu optymalizacji animacji nie pozostaje ci już wiele sposobów na zmniejszenie rozmiaru pliku, oprócz usunięcia ujęć w celu skrócenia filmu. Ten sposób donosi się tylko do animacji wykonanej z wideo, jaką właśnie tworzysz, chociaż, podobnie jak inne elementy filmu Flasha (jak inne obrazki, czcionki i różne rodzaje animacji) zawsze można opuścić, lub zmienić, aby zmniejszyć rozmiar pliku. Poniżej zamieściliśmy listę ogólnych wskazówek dotyczących zmniejszania rozmiaru plików we Flashu w celu zmaksymalizowania działania filmu: • Unikaj zbyt częstego używania specjalnych typów linii, jak na przykład linie przerywane, wykropkowane, poszarpane i tak dalej. Jednolite linie są mniejsze. • Wszystkie linie wykonane narzędziem ołówka wymagają mniej pamięci niż linie wykonane pędzlem. • Używaj symboli, animowanych lub statycznych, dla każdego elementu pojawiającego się w filmie częściej niż jeden raz. • Grupuj elementy tak często, jak to tylko możliwe. • Stosuj warstwy do oddzielenia elementów zmieniających się w trakcie animacji, a także umieszczaj na oddzielnych warstwach elementy statyczne. • Kiedykolwiek możesz stosuj automatyczne animacje, gdyż zajmują one mniej miejsca niż animacje wykonane z ujęć. • Jeśli stosujesz w animacji dźwięk, użyj go z kompresją MP3, gdyż jest to najmniejszy obecnie format dźwiękowy. • Uważnie używaj osadzonych czcionek, gdyż zwiększają one rozmiar pliku, a także ogranicz liczbę zastosowanych czcionek. • Staraj się unikać animowania map bitowych. Obrazki map bitowych najlepiej stosować jako tło czy elementy statyczne. • Ogranicz obszar zmiany w każdym ujęciu kluczowym — akcja powinna rozgrywać się na jak najmniejszym obszarze. • W panelach Mixer i Swatches dopasuj paletę kolorów filmu do palety przeglądarki. Wypełnienie obszaru kolorem gradientu wymaga około 50 bajtów więcej, niż wypełnienie jednolitym kolorem, dlatego też ograniczy zastosowanie gradientów.
Rozdział 5-148
Na koniec przyjrzyjmy się modyfikacji kolorów w wektorowym klipie filmowym.
Zmiana kolorów wideo Na kilku poprzednich stronach często przypominaliśmy, że pracujemy nad biało-czarnym wideo. Nie jest to wymóg niezbędny dla całego procesu, lecz poznawanie omawianego procesu warto rozpocząć od jak najprostszych przykładów. Jeśli chcesz dodać kolor, postępuj tak, jakbyś dodawał go do normalnego obrazka w panelu Effect:
W tym panelu możesz ustawić opcje koloru i przezroczystości dla animacji. Pamiętaj, że dokonane przez ciebie zmiany wpłyną na cała animację, a nie tylko na pierwsze ujecie widoczne na scenie. Jednakże, podczas edycji filmu zostanie on wyświetlony w swojej oryginalnej formie ukazując wszystkie ujęcia kluczowe tak, jak je zostawiłeś. Najprostszym sposobem na dodanie koloru do wideo jest zastosowanie menu Advanced:
Jeśli weźmiemy biało-czarne wideo za punkt odniesienia, wartości procentowe będą kontrolować kolor białych części obrazka — zmiany dokonane na scenie będziesz mógł zobaczyć dopiero po odtworzeniu filmu — a wartości dodatnie (+) wpłyną na czarne obszary; ich modyfikacje będziesz mógł zobaczyć zaraz po dokonaniu zmian. Jeśli usunąłeś białe obszary z filmu, będziesz musiał wybrać kolor tła aby je zmienić. Możesz również uzyskać interesujące efekty poprzez zmianę koloru samych obrazków w klipie filmowym. Jeśli znajduje się w nim moment kluczowy lub jakiś szczególny fragment rozgrywający się w kilku ujęciach, spróbuj zmienić kolor po prostu używając wiaderka z farbą. Możesz nawet wypróbować zmianę koloru w co drugim ujęciu. Nie przesadzaj jednak, gdyż uzyskany w ten sposób efekt może być okropny. Możesz także wcale nie stosować wartości progowej w programie After Effects, lecz efekt Posterize, a nawet spróbuj zabarwić film efektem Threshold. W programie After Effects możliwe są wszystkie rodzaje efektów, i jeśli połączysz je z wynikami uzyskanymi dzięki zastosowaniu polecenia Trace Bitmap we Flashu, będziesz mieć do dyspozycji cały zakres przedziwnych efektów. Po pewnym czasie stosowania programu After Effects możesz również zauważyć, że im częściej w nim pracujesz tym łatwiejszy staje się on w obsłudze i tym więcej efektów możesz utworzyć, co znacznie podniesie poziom twojej pracy we Flashu.
Rozdział 5-149
Po przeniesieniu wideo do Flasha i przekształceniu go w wektory oprócz zmiany kolorów możesz zastosować na nim o wiele więcej czynności. Prawdopodobnie najbardziej oczywistą operacją jest możliwość zmiany rozmiaru wideo.
Skalowanie filmu Och, ta moc Flasha. Jest to główna zaleta tego procesu. Teraz masz przed sobą w pełni skalowane wideo bez utraty jakości, właśnie dzięki temu, że składa się w całości z wektorowych obrazków. Możesz teraz zeskalować film, aby go dopasować do sceny lub zmniejszyć go i umieścić w rogu, co wygląda równie dobrze:
Spróbuj automatycznie animować rozmiar filmu, rozjaśnić go, lub zmniejszyć kanał alfa i zastosować go jako subtelny, lecz imponujący obrazek w tle. Możesz również miotać filmem po scenie, tak jakbyś zrobił z każdym innym obrazkiem, lecz taka operacja wymaga już wytrzymałego komputera.
Zakończenie W tym rozdziale przedstawiliśmy zaledwie podstawy animacji wideo we Flashu. Pamiętaj, że eksperymenty stanowią istotny element pracy, a dzięki różnym ustawieniom we Flashu i programie After Effects mogą powstać naprawdę świetne rezultaty. Wymyśl nowe sposoby zastosowania tworzonych przez ciebie animacji, a jeśli posiadasz kamerę wideo zastanów się, co chciałbyś obejrzeć we Flashu, a czego jeszcze nikt nie widział. Mamy nadzieję, że odkryjesz wiele sposobów na stosowanie tego typu animacji wideo, od tworzenia prostego obrazka do ładowania do części metody nawigacyjnej, czy do całego wygaszacza ekranu. Poniżej przedstawiliśmy kilka innych przykładów animacji wideo we Flashu, które znajdziesz na płycie CD-ROM w folderze Examples of Other Work:
Rozdział 5-150
Ponieważ Flash zyskuje na popularności, możliwości wideo w tym programie na pewno będą poszerzane, podobnie jak będzie zwiększana elastyczność programu i integracja z innym aplikacjami. Jak najbardziej miej swoją wizję, lecz nie obawiaj się zmienić jej wraz z rozwojem technologii i zwiększaniem jej możliwości.
Rozdział 5-151
Rozdział 6 Dźwięk we Flashu Kilka lat temu, gdy Flash zaistniał w Sieci, a witryny internetowe, do których został włączony zaczęły przyciągać uwagę, jednym z elementów, który jeszcze bardziej wyróżniał je z tłumu, był dźwięk. Efekty audio i muzyka była już stosowana na witrynach internetowych, lecz nigdy elementy te nie były używane efektywnie, zwłaszcza pod względem prezentacji czy funkcjonowania. Lecz teraz z Flashem, nie musisz już osadzać ścieżki dźwiękowej na stronie i pobierać plik w formacie WAV zanim załadują się obrazki. Przeszłością jest również dwusekundowe opóźnienie podczas pobierania i odtwarzania dźwięku typu rollover, ponieważ twórca witryny nie wystarczająco dobrze radzi sobie z językiem JavaScript. Dzięki Flashowi dźwięk odtwarzany jest natychmiast po efekcie typu rollover, czy kliknięciu kursorem myszy, ponieważ dźwięk osadzony jest bezpośrednio w filmie Flasha — stanowi jego integralną część. Oprócz postępu, jak Flash wprowadził do dźwięku w Sieci, zanim pojawił się Flash 5 ciągle istniały pewne ograniczenia zastosowania dźwięku w filmach. Mogłeś importować dźwięk i zamienić go na postać strumieniową, lub odtworzyć w odpowiedź na zdarzenie. Mogłeś również panoramować dźwięk z jednej strony na drugą, odtwarzać go tylko z jednego głośnika, wzmacniać i zmniejszać jego głośność... o ile z wyprzedzeniem określiłeś sposób działania danego efektu — nie istniała żadna możliwość interakcji. Przez pewien czas możliwości takie wystarczyły, ale na dłuższą metę były one ograniczające i projektanci we Flashu zmuszeni byli do stosowania tych samych technik na każdej witrynie. Lecz teraz, we Flashu 5 wprowadzono znaczne ulepszenia w sposobie obsługi dźwięku w tym programie. Przede wszystkim, dźwięk od tej pory traktowany jest we Flashu jak obiekt, posiadający wbudowane właściwości, którymi możemy manipulować oraz je śledzić. Krótko mówiąc, obecnie w znacznym stopniu możemy kontrolować, kiedy i gdzie stosujemy klipy dźwiękowe w naszych filmach, gdyż teraz są one nadzorowane przez ActionScript. Oznacza to, że można interaktywnie pobierać i kontrolować dźwięki, w zależności od wkładu użytkownika, a ponadto nie trzeba już wpisywać do kodu filmu każdego zachowania when you roll it out; teraz użytkownik kontroluje, co się dziele z dźwiękami w oparciu o ich wpływ na odtwarzanie filmu w przeglądarce. W tym rozdziale skoncentrujemy się na nowej właściwości Flasha 5, czyli obiekcie dźwiękowym, i przyjrzymy się sposobom stosowania go w połączeniu z obrazkami w celu dodania dynamiki do filmów Flasha. Następnie przejdziemy do bardziej zaawansowanych i nie bezpośrednich zastosować obiektu dźwiękowego do tworzenia efektów w bardziej „trójwymiarowym” stylu, jak na przykład modyfikacja dźwięku „im bardziej oddala się” od użytkownika. Pierwszym przykładem, jakiego tutaj omówimy, będzie mikser muzyczny. Rozpoczniemy od zdefiniowania podstawowych kontrolerów dźwięku, a następnie przypiszemy im obrazki, aby wykonać bardziej dynamiczną kompozycję. Ponieważ do wykonania miksera będziemy potrzebować kilka specyficznych aspektów obiektu dźwiękowego Flasha 5, opis działania tej funkcji jest dosyć prosty.
Rozdział 6-152
Tworzenie stołu mikserskiego W tym ćwiczeniu wykonamy prosty stół mikserski składający się ze sześciu ścieżek, sześciu pokręteł (po jednym dla każdej ścieżki), kontrolera nagłośnienia dla każdej ścieżki i głównego kontrolera nagłośnienia:
Chcemy również przypisać dźwiękom kilka klipów filmowych, które również utworzymy. Rozpocznijmy od przygotowania pliku. Ponieważ najpierw będziemy potrzebować dźwięki (w celu określenia sposobu manipulowania kontrolerami), zaczniemy właśnie od nich.
Tworzenie i importowanie dźwięków Dla tego ćwiczenia przygotowaliśmy dźwięki syntezatora, gitary i perkusji, lecz jeśli nie jesteś uzdolniony muzycznie, możesz pobrać darmowe pętle dźwiękowe z wielu witryn internetowych, jak na przykład: • http://www.sonicspot.com — łącza do pobierania plików darmowych i shareware’owych, • http://www.flashkit.com — z wolnymi od praw autorskich muzycznymi pętlami, • http://www.angrycoffee.com — ze świetnymi informacjami i samouczkami o zastosowaniu dźwięku w Sieci. Jakkolwiek je zdobyłeś, załóżmy, że masz już muzykę — nawet proste dźwięki wystarczą dla tego ćwiczenia. Teraz trzeba przygotować ścieżki dla miksera, co oznacza sześć różnych zestawów dźwięków. Mamy ścieżkę perkusji, basu, klawiszy, melodii z syntezatora, gitary i ksylofonu, które edytowaliśmy w programie do edycji audio. Dźwięki zastosowane w tym ćwiczeniu znajdują się na płycie CD-ROM w pliku mixer_exercise.fla. Możesz przeciągnąć je z biblioteki pliku do własnej.
Jeśli będziesz potrzebować zsynchronizowanych kilka ścieżek, warto nagrać wszystkie ścieżki w programie do obsługi wielu ścieżek. Dzięki temu będziesz mógł usłyszeć piosenkę jako całość, a także odsłuchać każdą ścieżkę z osobna. Pod adresem http://www.sonicspot.com znajdziesz darmowe edytory audio i programy wielościeżkowe. Poniżej przedstawiliśmy przykład dźwięku wyświetlonego w formie wykresu w programie do edycji audio:
Rozdział 6-153
Gdy przyjrzysz się dolnej lewej części okna zauważysz informację 16 Bits / 44.100 kHz. Jest to ekwiwalent częstotliwości próbkowania jakości płyty CD. Z okna tego dowiadujesz się również, że dźwięk zapisany jest w systemie stereo, gdyż wyświetlone są dwa wykresy fali. Jeśli to tylko możliwe, najlepiej rozpoczynać prace z dźwiękiem o najwyższej jakości. Dźwięk taki pochłania dużo pamięci i miejsca na dysku, lecz im więcej informacji umieszczonej jest na początku w pliku dźwiękowym, tym lepsza kompresja dźwięku zostanie wykonana we Flashu podczas eksportowania go z filmem. Największe kreski widoczne na rysunku to najgłośniejsze części dźwięku, a najmniejsze oznaczają cichsze obszary. Patrząc na dźwięk możesz wiele o nim powiedzieć, a także czy nadaje się do zastosowania we Flashu. Na przykład, możesz stwierdzić, że zastosowanie tego dźwięku w filmie Flasha możesz sprawić problem, gdyż głośne części są odrobinę zbyt głośne. Widać to po tym, że największe kreski dosłownie stykają się z górną i dolną ramą okna, co ogranicza możliwy zakres dynamiki. Po skompresowaniu tych części pętli całkiem możliwe, że w efekcie usłyszysz szum. Tero typu zakłócenia słyszalne są na przykład wówczas, gdy telewizor odkręcony jest za bardzo i dźwięk staje się zniekształcony. Ponadto, publiczność docelowa najprawdopodobniej będzie korzystać z normalnych głośników komputerowych, a te biedne małe maszyny nie są w stanie wytrzymać zbyt głośnych dźwięków. Aby tego uniknąć musimy zmniejszyć głośność klipu dźwiękowego, a można tego dokonać w większości programów do edycji dźwięków. Proste przygotowania tego typu mogą później znacznie wpłynąć na jakość dźwięku na ukończonej witrynie internetowej. Po nagraniu surowych wersji każdej ścieżki, w edytorze audio wykonaliśmy z nich pętle, aby dźwięki te były odtwarzane płynnie i ciągle, przygotowane do umieszczenia ich we Flashu. Dla tego ćwiczenia uznaliśmy, że najlepiej będzie rozpocząć od przygotowania pętli perkusji jako pierwszej. Jeśli przygotowałeś rytm wybijany przez perkusję w programie do tworzenia perkusji, zapewne masz już gotową perfekcyjną pętlę — to świetne rozwiązanie, gdyż teraz wystarczy przyciąć pozostałe pliki dźwiękowe do takiej samej długości i sekwencja perkusji i w ten sposób zostaną już zsynchronizowane. Jeśli jednak nagrałeś perkusję w inny sposób, twoje zadanie wymaga innego sprytniejszego rozwiązania. Najpierw będziesz musiał przygotować płynną pętlę rytmu, a następnie edytować pozostałe ścieżki do tej samej długości co rytm perkusji. Możesz przetestować pętle przenosząc je z powrotem do programu do obsługi ścieżek i sprawdzając, czy synchronizują ze sobą. Przygotowanie dźwięków o tej samej długości jest bardzo istotne. Po przeniesieniu ich do Flasha będziemy przygotowywali dźwięk do ciągłego odtwarzania około 1000 razy, więc jeśliby miedzy nimi była różnica 1 sekundy w długości, cały cykl brzmiałby dosyć fatalnie.
Jesteśmy już gotowi do przejścia do Flasha i wykonania reszty przygotować. Teraz rozpoczniemy budowę miksera.
Rozdział 6-154
Importowanie i obróbka dźwięku
1. Rozpocznij nowy film i importuj pętle dźwięków do biblioteki (pamiętaj, że jeśli chcesz możesz zastosować dźwięki z pliku mixer_exercise.fla). 2. Po importowaniu dźwięków utwórz w bibliotece nowy folder o nazwie Sounds i umieść je w nim wszystkie. Tworzenie odpowiednio nazwanych folderów w bibliotece jest dobrym ćwiczeniem, gdyż pomaga w zorganizowaniu różnych elementów filmu. Wówczas podczas importowania obiektów od razu możesz umieścić je w odpowiednich folderach i zachować porządek, przynajmniej powierzchniowy. To jest tak, jak mówiła twoja mama: „jak się ubierzesz, posprzątaj pokój — tak będzie lepiej dla twojej duszy”. Podobnie rzecz się ma z Flashem. 3. Dwukrotnie kliknij na pliku dźwiękowym w bibliotece, aby uzyskać dostęp do okna dialogowego Sound Properties, gdzie znajdziesz kilka opcji; jedną z nich jest metoda kompresji, jaka zostanie zastosowana podczas eksportowania filmu. W menu koło parametru Compression w przedstawionym tutaj oknie dialogowym widoczna jest pozycja Default.
W tym rybie, który jest we Flashu stawieniem domyślnym dla wszystkich plików dźwiękowych do niego importowanych, Flash kompresuje audio z prędkością określoną w oknie dialogowym Publish Settings:
Aby zmienić opcje kompresji wciśnij przycisk Set, co spowoduje wyświetlenie poniższego okna dialogowego:
Rozdział 6-155
Teraz wybierz z menu Compression jedną z dostępnych pozycji: ADPCM, MP3 lub Raw. W naszym ćwiczeniu zastosujemy kompresję MP3. Zauważ, że w oknie dialogowym Publish Settings znajdują się dwa przycisk Set — jeden dla strumieniowania dźwięku, którego odtwarzanie rozpocznie się wówczas, jak tylko Flash będzie miał wystarczającą liczbę „ujęć, dla których warto” zacząć odtwarzanie dźwięku, a drugi dla zdarzenia dźwiękowego, które jest zależne od całkowitego pobrania dźwięku przed rozpoczęciem odtwarzania. W rozdziale Preloading i Streaming znajdziesz więcej informacji o kontrolowaniu dźwięku podczas procesu strumieniowania.
Powróćmy do okna dialogowego Sound Properties. Możesz w nim przygotować ustawienia dla poszczególnych plików — i tutaj ponownie wybierzemy kompresję MP3. Gwoli przypomnienia — kompresja MP3 pozwala na znacznie zmniejszenie rozmiaru pliku audio w zależności od wybranych ustawień. Ponieważ większość użytkowników będzie oglądać twój film na komputerze i słuchać dźwięków przez głośniki multimedialne, nie trzeba koniecznie zachować jakości płyty CD. Przekonaliśmy się, że ustawienia Bit Rate: 32kbs lub 48kbs i Quality: Medium daje w efekcie najlepszą jakość dźwięku i najkrótszy czas pobierania. Jeśli używasz dźwięk w pliku, który przeznaczony jest na płytę CD-ROM czy inne prezentacje multimedialna, możesz wybrać ustawienie dające lepszą jakość dźwięku.
Aby przekonać się, w jaki sposób zmiana ustawień wpływa na rozmiar pliku wciśnij przycisk Test umieszczony po prawej stronie okna dialogowego — wówczas u dołu ekranu pojawi się informacja o ile zmniejszył się rozmiar oryginalnego pliku:
Rozdział 6-156
Po przeniesieniu dźwięków do Flasha i zoptymalizowaniu prędkości kompresji oraz ich jakości teraz przekształcimy je w obiekty dźwiękowe. Do zastosowania nowej właściwości Flasha 5, obiektu dźwiękowego, musimy nadać każdej pętli dźwiękowej nazwę łącznikową. Nadawanie dźwiękom ich nazw łącznikowych
Ten proces zbliżony jest do nadawania nazwy klonu klipowi filmowemu. Dzięki temu będziemy mogli zmieniać głośność dźwięku, panoramować i łączyć go z innymi obiektami w filmie, podobnie jak łączymy kilka zdarzeń, powiedzmy kliknięcie myszą, z tymi obiektami w środowisku ActionScript. 1. Kliknij prawym klawiszem myszy na dźwięku w bibliotece i z menu wybierz pozycję Linkage. Wówczas wyświetlone zostanie okno dialogowe Symbol Linkage Properties. 2. W oknie dialogowym zaznacz opcję Export this symbol, dzięki czemu będziemy mogli przypisać dźwiękowi identyfikator. Ten identyfikator właśnie możemy zastosować w języku ActionScript aby odnieść się do dźwięku przechowywanego w bibliotece. W ten sposób możemy zastosować dźwięk w filmie, nawet jeśli on sam nie pojawi się w żadnym miejscu na listwie czasowej ani na scenie. Zauważ, że nazwa identyfikatora nie musi być taka sama, jak nazwa klipu dźwiękowego w bibliotece, lecz musisz zapamiętać, że nazwa zastosowana w ActionScript jest identyfikatorem, a nie nazwą pliku dźwiękowego wyświetlaną w bibliotece (jeśli skopiowałeś nasze dźwięki z płyty CD-ROM, powinny one posiadać już nazwy łącznikowej) 3. Nazwij pierwszy dźwięk loop1, drugi loop2 i tak dalej, aż nadasz nazwy wszystkim dźwiękom w bibliotece. Mamy teraz sześć dźwięków nazwanych od loop1 do loop6:
Następnie rozwiń okno biblioteki i zajrzyj do kolumny Linkage. Zauważysz, że dla każdego eksportowanego dźwięku o nazwie loop we wspominanej kolumnie znajduje się wpis Export.
Rozdział 6-157
W ten sposób każdy dźwięk jest już dostępny dla filmu przez ActionScript. Następny etap jest odrobinę bardziej skomplikowany. W głównym filmie musimy utworzyć suwaki głośności, które będą kontrolować głośność każdej pętli dźwiękowej. Tworzenie suwaków nagłośnienia
W ukończonym filmie umieścimy główny kontroler głośności i sześć odrębnych kontrolerów (po jednym dla każdej ścieżki):
Będą one wyglądać jak tradycyjny stół mikserski: poprzez ustawienie głównego poziomu głośności w mikserze uniemożliwimy poszczególnym ścieżkom przekroczenie tego poziomu. Dla zaoszczędzenia czasu zastosujemy metodę obiektową do utworzenia klipu suwaka głośności. Oznacza to, że wystarczy tylko wykonać jeden klip i już będziemy mogli przeciągnąć na scenę dowolną liczbę suwaków, a wszystkie one będą funkcjonować niezależnie od siebie bez konieczności modyfikacji ich wyglądu. Musimy jedynie nadać każdemu suwakowi inną nazwę klonu. 1. Utwórz nowy symbol klipu filmowego i nazwij go slider. W obrębie tego symbolu utwórz trzy nowe warstwy i nadaj im nazwy Code, Pan i Slider, od góry do dołu:
Rozdział 6-158
2. Na warstwie Slider narysuj prostokąt o rozmiarach 20×120 pikseli i umieść go w punkcie 0,–10 przy pomocy lewej górnej punktury:
To będzie obrazek tła dla suwaka. 3. Teraz przekształć szary prostokąt w symbol graficzny o nazwie slider_back. Następnie wejdź do symbolu i utwórz w nim nową warstwę, a na tej warstwie narysuj linię o długości 100 pikseli i wyśrodkuj ją nad obrazkiem slider:
To jest szczelina, po którym będzie poruszać się gałka suwaka. Nieźle. 4. Powróć teraz do klipu slider i narysuj prostokąt o wymiarach 15×10 pikseli, który będzie gałką suwaka. Przekształć ten mały prostokąt w klip filmowy o nazwie vlm_slider. Następnie wejdź do nowego klipu filmowego vlm_slider i przekształć prostokąt w symbol graficzny o nazwie slider_graphic. Teraz mamy już symbol graficzny wewnątrz klipu vlm_slider, który z kolei umieszczony jest w klipie slider:
Rozdział 6-159
5. Otwórz klip filmowy vlm_slider i umieść lewą górną punkturę obrazka w pozycji 0,– 5.
6. Wewnątrz klipu slider umieść nowy klip vlm_slider u dołu rowka:
7. Następnie utwórz nowy symbol przycisku o nazwie invis_button. W stanie Hit przycisku wstaw ujęcie kluczowe, narysuj w nim prostokąt o wymiarach 15×10 pikseli i umieść go z punkturą w punkcie środkowym, 0,0. Efektem tej operacji jest utworzenie przezroczystego przycisku. Przezroczyste przyciski są niezwykle użytecznie w sytuacjach, gdy chcesz zastosować elementy graficzne z funkcjonalnością przycisku. Można je umieszczać nad wszelkimi elementami, przekształcając je w przycisk bez konieczności tworzenia takowego i w ten sposób redukując rozmiar pliku i zaoszczędzając na czasie. 8. Przejdź do symbolu vlm_slider i utwórz nową warstwę o nazwie Button. Przeciągnij kopię symbolu przycisku invis_button z biblioteki i wyrównaj go z górną częścią istniejącego obrazka:
Rozdział 6-160
Teraz czas na skrypt. Ten kod umożliwia przeciągnięcie obiektu vlm_slider w górę i w dół wzdłuż prostokącie tła slider_back. 9. Otwórz okno Object Action dla przycisku invis_button i wpisz poniższy kod ActionScript: on (press) { startDrag ("", false, 2.5, 100, 2.5, → _root.slider_master1.vlm_master1._y); } on (release, releaseOutside, dragOut) { stopDrag (); }
Wartość 2.5 dla właściwości Left i Right oznacza pozycję X obiektu vlm_slider w klipie filmowym slider. Poprzez przypisanie właściwościom tym takiej samej wartości zakazaliśmy ruchy w prawo i w lewo suwaka i przywiązaliśmy go do jednej osi — pionowej. Zauważ również, że zamiast podać absolutną wartość dla limitu Bottom, podaliśmy właściwość _y głównego suwaka głośności –slider_master1 (jest to nazwany klon klipu slider, którego wkrótce umieścimy na scenie). Dlatego to robimy, aby, gdy już umieścimy główny suwak na scenie, nie będziemy mogli przeciągać pojedynczych suwaków głośności wyżej, niż jest ustawiony główny suwak. Ponieważ jednak nie mamy jeszcze głównego suwaka, Flash wprowadzi domyślną wartość 0. Na szczęście właśnie tego chcemy, gdyż dzięki temu możemy przetestować suwak. 10. Przeciągnij kopię klipu slider z biblioteki na główną scenę i uruchom film. Powinno dać się przeciągnąć suwak głośności w górę i w dół w obrębie tła suwaka. Fajne, prawda? 11. Powróć do klipu slider i nadaj obiektowi vlm_slider nazwę klonu vlm_slider1:
Rozdział 6-161
Po utworzeniu prostego suwaka i przygotowaniu go do komunikacji z głównym suwakiem głośności przejdźmy do wykonania go. 12. Utwórz nowy klip filmowy o nazwie slider_master i przeciągnij kopię obiektu slider_back na scenę. Ponownie umieść lewą górną punkturę w punkcie 0,–10. 13. Przeciągnij kopię obiektu slider_graphic i przycisku invis_button z biblioteki na scenę. Zaznacz jednocześnie slider_graphic i invis_button i przekształć je w klip filmowy o nazwie vlm_master. Z tej kombinacji powstanie nasz główny kontroler głośności. 14. W klipie vlm_master zaznacz ponownie przycisk i obrazek i umieść lewą górną punkturę w punkcie 0,–5.
15. Ponownie z klipie slider_master umieść świeżo przygotowany klip vlm_master nad przyciskiem rowka i nazwij tą kopię vlm_master1. Teraz musimy dodać kod do przezroczystego przycisku w głównym suwaku głośności, abyśmy mogli go przesuwać w dół i w górę. 16. Otwórz klip vlm_master i wywołaj okno dialogowe Object Actions dla przycisku znajdującego się w klipie. Wpisz poniższy kod: on (press) { startDrag ("", false, 2.5, 100, 2.5, 0); } on (release, releaseOutside, dragOut) { stopDrag (); }
Teraz przetestujemy suwaki. 17. Przeciągnij kopię klipu slider_master na głównej scenę i nazwij ją slider_master1. Możesz również zastosować na głównym suwaku przekształcenie lub zmienić zabarwienie (tint), aby łatwo było go odróżnić od normalnego suwaka. Wówczas przetestuj film:
Rozdział 6-162
Powinieneś zauważyć, że jeśli ustawiłeś gałkę głównego suwaka w połowie, normalny suwak nie może zostać przesunięty dalej, niż do połowy. Jest jednak mały problem: możesz ustawić głośność na głównym suwaku cichszą niż na normalnym, a po kliknięciu na normalny suwak nagle wskakuje on na taki sam poziom jak główny suwak. Zobaczymy, jak możemy to naprawić. 18. Powróć do pliku w formacie FLA i otwórz w bibliotece klip vlm_slider. 19. Utwórz nową warstwę i nazwij ją Code. Następnie w ujęciu 2 tej warstwy wstaw ujęcie kluczowe. Na pozostałych dwóch warstwach również wstaw ujęcia aby wyrównać je z warstwą Code. Otwórz okno Frame Actions dla ujęcia 1 warstwy Code i wpisz poniższy kod ActionScript: if (this._y<_root.slider_master1.vlm_master1._y); { this,_y = _root.slider_master1.vlm_master1._y); }
Przy pomocy tego kodu sprawdzamy, czy suwak vlm_slider (this) jest umieszczony wyżej niż główny suwak. Jeśli tak, suwak vlm_slider ustawiamy jest na ten sam poziom, co suwak główny. Kod wygląda dosyć dziwnie, ponieważ dosłownie brzmi on: „jeśli this posiada n właściwość _y niż główny suwak...”, gdy w zasadzie mamy na myśli wyższą. Jest tak dlatego, że Flash oznacza górną część sceny wartością 0, więc im wyżej zmierzasz do góry sceny, tym mniejsza jest wartość Y. Na początku jest to odrobinę mylące, lecz szybko się do tego przyzwyczaisz... Kolejnym zadaniem do wykonania jest utworzenie pętli, aby suwak ciągle sprawdzał swoją pozycję. Bez problemu damy sobie z tym radę: 20. Otwórz okno Actions dla ujęcia 2 warstwy Code i wpisz: gotoAndPlay (1);
Jeśli teraz przetestujesz film, normalnego suwaka nie będzie już można umieścić wyżej od głównego. Teraz jesteśmy już gotowi na cel naszego ćwiczenia, czyli przypisanie dźwięku do suwaka głośności. 21. Nadaj klipowi filmowemu slider, który znajduje się już na scenie, nazwę klonu 1. Nazwa ta może się wydać dziwna na początku, lecz za chwilę dowiesz się, dlaczego wybraliśmy właśnie taką. 22. Otwórz oryginalny klip filmowy slider w bibliotece i wpisz w ujęcie 1 warstwy Code poniższy kod ActionScript: slidername = String(this._name);
Rozdział 6-163
mysound = ("loop"+slidername); s = new Sound(this); s.attachSound(mysound); s.setVolume(0); s.start(0, 1000);
Wyjaśnijmy ten kod. Najpierw definiujemy zmienna o nazwie slidername, zawierającą nazwę bieżącego klipu filmowego — będziemy stosować tą zmienną później po dodaniu do filmu tego samego koloru. Następnie tworzymy inną zmienną o nazwie mysound, która łączy wyraz „loop” (pętla) z nazwą klonu, w którym znajduje się ten kod, czyli w tym przypadku „1”. Zatem, dla danego klonu suwaka slider znajdującego się na scenie w danym momencie, zmienna mysound przybiera wartość loop1, która, jak pamiętasz, jest nazwą łącznikową pierwszego dźwięku w bibliotece. Teraz już wiesz, dlaczego nadaliśmy kopii suwaka slider taką dziwną nazwę klonu. W trzecim wierszu tworzymy nowy obiekt dźwiękowy i przypisujemy go do bieżącego klipu filmowego. Wówczas pętla loop1 zostaje przypisana do klipu filmowego i odtworzony po raz pierwszy z tysiąca. Pierwsza liczba w wierszu s.start oznacza moment (podany w sekundach), w którym ma zostać odtworzony dźwięk. Pozostawiliśmy tutaj wartość 0, ponieważ chcemy, aby dźwięk został odtworzony zaraz na początku. Głośności również przypisaliśmy wartość 0, aby dźwięk nie „kliknął” zanim nie przejdziemy do następnego ujęcia, w którym przypiszemy go do pozycji suwaka. Piękno tej operacji polega na tym, że klip slider, którego przeciągamy na główną scenę sam przypisze się automatycznie do dźwięku odpowiadającemu jego nazwie klonu. Fantastyczne. Chcemy, aby głośność była aktualizowana regularnie, lecz dźwięk powinien być zainicjowany tylko raz. Możemy uzyskać taki efekt określając głośność w ujęciu 2, a następnie ciągle odtwarzając to ujęcie. 23. W warstwie Code utwórz dwa nowe ujęcia kluczowe i w ujęciu 2 wpisz poniższy kod: s.setVolume (100-this.vlm_slider1._y);
24. Następnie w ujęciu 3 dodaj poniższą linijkę: gotoAndPlay (2);
Te dwa fragmenty kodu po prostu określając głośność w zależności od pozycji suwaka głośności i stale aktualizują ją poprzez ciągłe odtwarzanie od ujęcia 2. 25. Na koniec dodaj ujęcie kluczowe w ujęciu 3 w każdej z dwóch warstw, aby ich zawartość była widoczna w całym filmie. Teraz jesteśmy już przygotowani na najpoważniejszy test. 26. Odtwórz film. Jeśli wszystko poszło zgodnie z planem powinno udać ci się zmienić głośność pierwszego dźwięku poprzez przeciągnięcie jego suwaka głośności w górę i w dół, a jego poziom będzie ograniczony pozycją głównego suwaka głośności. Kolejnym etapem jest utworzenie pokrętła i w podobny sposób przypisanie go do dźwięku, abyśmy mogli kontrolować zarówno głośność jak i pozycję dźwięków. Zaczniemy od kolejnych porządków wiosennych... 27. Utwórz w bibliotece nowy folder o nazwie Sliders i przeciągnij do niego wszystko oprócz przycisku invis_button (i foldera Sounds). Teraz przystąpimy do utworzenia pokrętła umożliwiającego przenoszenie pętli dźwiękowych z jednego głośnika do drugiego.
Rozdział 6-164
Tworzenie pokręteł
Pokrętło składa się z trzech części: rysunku pokrętła, linii wskazującej kierunek kręcenia i przycisku uruchamiającego odpowiedź po poruszeniu pokrętła. 1. Utwórz nowy klip filmowy o nazwie dial_body i narysuj kółko o rozmiarze 20x20 pikseli w środku klipu filmowego.
2. Utwórz nowy symbol graficzny o nazwie dial_line i na środku sceny narysuj linię pionową o długości 10 pikseli. 3. Przejdź do klipu dial_body i przeciągnij na scenę kopię symbolu dial_line. Wyśrodkuj go na klipie dial_body jak na rysunku:
To jest główny obrazek dla pokrętła. Teraz utworzymy przycisk. 4. Utwórz nowy klip filmowy o nazwie dial_drag i przeciągnij kopię naszego przycisku invis_button na środek sceny. 5. W panelu Info zmień rozmiar przycisku invis_button do rozmiaru 20x20 pikseli, zachowując jego dotychczasową pozycję na środku sceny.
6. Następnie otwórz okno Object Actions dla przycisku i wpisz poniższy kod akcji przeciągania: on (press) { startDrag ("", false, -10, 0, 10, 0); } on (release, releaseOutside, dragOut) { stopDrag (); }
Przygotowaliśmy w ten sposób przycisk do przeciągnięcia o 10 pikseli w lewo lub w prawo, lecz nie będzie go można przeciągnąć powyżej lub poniżej jego punktu początkowego. 7. W klipie dial_drag dodaj nową warstwę o nazwie Code. Na tej warstwie przeprowadzimy kilka sztuczek matematycznych w celu obrócenia pokrętła w
Rozdział 6-165
zależności od kierunku, w który skierujemy przycisk. W pierwszym ujęciu warstwy Code wpisz poniższy kod: _parent.dial_body1._rotation = _parent.dial_drag1._x*9;
Jest to łatwa sztuczka służąca do kontrolowania pokręteł, aby sobie ułatwić życie. Powyższy kod przypisuje obrót pokrętła do pozycji przycisku. Nasze pokrętło jest w rzeczywistości wskaźnikiem kierunku pokazującym, do którego głośnika przenosimy dźwięk i z jaką wartością. Oznacza to, że pokrętło powinno się obracać maksymalnie o 90 stopni, gdyż wówczas wartość ta będzie przedstawiać 100% przeniesienie dźwięku w tym kierunku.
Możemy przesunąć przycisk o maksymalnie 10 pikseli w każdą stronę, więc aby uzyskać obrót musimy pomnożyć tą wartość o 6. Oznacza to, że przeciągając przycisk możemy obrócić pokrętłem od 90 stopni do –90 od jego oryginalnej pozycji. Oczywiście możesz wyregulować pokrętło w taki sposób, aby obracało się o więcej lub mniej niż 90 stopni poprzez zmianę mnożnika. 8. Wstaw kolejne ujęcie kluczowe w ujęcie 2 w warstwie Code i wprowadź poniższy kod: gotAndPlay (1);
W ten sposób tworzymy pętle, aby ciągle sprawdzała i aktualizowała pozycję pokrętła. W drugiej warstwie również wstaw ujęcie, aby dopasować ją do warstwy Code. 9. Teraz musimy połączyć te dwa elementy pokrętła, aby przekonać się, czy będzie ono działać. Utwórz nowy klip filmowy o nazwie pan_dial; umieść w nim dwie warstwy o nazwach Button i Graphic. 10. Przeciągnij kopię obiektu dial_drag na środek sceny na warstwę Button i nazwij ją dial_drag1. Na warstwę Graphic przeciągnij z biblioteki kopię klipu dial_body i umieść ją na środku sceny pod przyciskiem. Nazwij ją dial_body1.
Rozdział 6-166
11. Teraz powróć do klipu filmowego slider w bibliotece i przeciągnij kopię obiektu pan_dial na warstwę Pan. Nazwij tą kopię pan_dial1.
Od połączenia pokrętła z dźwiękiem dzieli nas tylko jedna linijka kodu ActionScript. Więc zamiast testować pokrętło dodajmy ten wiersz i wówczas będziemy mogli zobaczyć i usłyszeć wszystko w akcji. 12. Wywołaj okno Frame Actions dla drugiego ujęcia w warstwie Code w klipie slider i wpisz poniższą linijkę pod istniejącą instrukcją setVolume: s.setPan (this.pan_dial1.dial_drag1._x*10);
Ta linia ustawia wartość panoramiczność dźwięku równą dziesięciokrotności pozycji przycisku, tworząc w ten sposób zakres wartości od –100 do 100. Ustawienie takie idealnie dopasowane jest do instrukcji setPan, której przypisaliśmy wartości od – 100 (wszystkie dźwięki w lewym głośniku) do 100 (wszystkie dźwięki w prawym głośniku). 13. Pozostaje nam jeszcze przetestowanie filmu. Powinieneś usłyszeć dźwięk przechodzący od lewego do prawego głośnika podczas kręcenia pokrętłem w lewo lub w prawo. Pewnie zastanawiasz się, co się dzieje z pozostałymi pięcioma dźwiękami w bibliotece. Na niewiele się zda stół mikserski, jeśli będzie mógł z niego odtworzyć tylko jeden dźwięk. Zatem, jak obiecaliśmy, nasz zorientowany obiektowo suwak dźwiękowy powinien być idiotoodporny, więc powinniśmy dać sobie radę również z pozostałymi dźwiękami. 14. Przeciągnij pozostałe 5 kopii klipu slider na główną scenę i zastosuj na nim odpowiednie nazwy klonów od 2 do 6: Rozdział 6-167
Tyle jeśli chodzi o funkcjonalność suwaków, lecz możesz również poprawić ich wygląd estetyczny na przykład je wyrównując. 15. Zaznacz wszystkie suwaki na scenie i obróć je o 90 stopni w prawo, a następnie w panelu Align rozmieść je jak wolisz. Po obrocie ich okaże się, że wszystkie suwaki skierowane są w złą stronę. Przejdź do klipu filmowego slider, zaznacza pokrętło i obróć je o 90 stopni w lewo. Teraz, po powrocie do głównej sceny wszystko powinno być już w porządku.
Jeśli teraz odtworzysz film zauważysz, że każdy suwak z odpowiadającym mu pokrętłem kontrolują poszczególne dźwięki. Powinieneś również móc ograniczyć z zmniejszyć ogólna głośność wszystkich dźwięków poprzez użycie głównego suwaka głośności. Pamiętasz, jak wspominaliśmy o dołączeniu obrazków do kontrolerów dźwięku? Wykonajmy to z wykorzystanie obiektu koloru Flasha.
Rozdział 6-168
Obiekt koloru we Flashu 5 Teraz się trochę zabawimy, łącząc suwaki, pokrętła i kilka wizualnych kolorowych elementów na ekranie. Na płycie CD-ROM znajdziesz plik musicmixer.fla ilustrujący dowiązanie pokręteł do wartości parametru przeźroczystości klipów filmowych. COLOR MIXER (KOLOROWY MIKSER)
Chociaż w czwartej wersji Flasha były przeprowadzanie eksperymenty z kolorowymi suwakami, lecz uzyskane efekty były fałszowane poprzez zastosowanie różnych poziomów koloru i użycie parametru przeźroczystości na różnych warstwach. Flash 4 nie był raczej przystosowany do przeprowadzania zmian kolorów, lecz jak zwykle, ktoś wymyślił sposób na obejście tej niedogodności... We Flashu 5 zmiana kolorów nie zależy od magii, co od pomysłowości. Obiekt koloru dostępny w tej wersji umożliwia pełną kontrolę nad ustawieniami dla składowych koloru RGB i kanałem alfa dla danego klipu filmowego. Skoro funkcja ta została już umieszczona we Flashu i nie trzeba jej już wymyślać, możemy założyć, że każdy będzie z niej korzystać. Nie zrozum nas źle — to naprawdę świetna funkcja — lecz można ją jeszcze udoskonalić poprzez stosowanie jej w bardzie subtelny sposób. W poniższym ćwiczeniu postaramy się zmienić kolor tylko jednego elementu obrazka, i zachować go na drugim miejscu w stosunku do dźwięków. Postanowiliśmy więc uzależnić kolor tła stołu mikserskiego od rozmieszczenia suwaków. Dodawanie koloru do stołu mikserskiego
1. Utwórz nową warstwę na głównej listwie czasowej, nazwij ją Background i przenieś ją na dół stosu warstw.
2. Na warstwie Background narysuj biały prostokąt bez konturu i w panelu Align dopasuj go do wysokości i szerokości sceny. Teraz przekształć prostokąt w klip filmowy o nazwie background i nadaj mu nazwę klonu bg_color. 3. Przejdź do nowego klipu filmowego i utwórz kolejną warstwę o nazwie Code, a następnie umieść na niej dwa ujęcia kluczowe, aby w całości składała się ona z trzech ujęć. Dla ujęcia 1 otwórz okno Frame Actions i wpisz poniższy kod ActionScript: c = new Color(this);
Rozdział 6-169
mycolor = new Array();
W tym fragmencie kodu zdefiniowaliśmy dwa nowe obiekty. Pierwszy, c, jest obiektem koloru, którego przypisaliśmy do bieżącego klipu filmowego (background). Drugi, mycolor, jest obiektem tablicy. W nim będziemy przechowywać wartości dla pozycji suwaka głośności, które z kolei wpłyną na wyświetlanie kolorów. Zainicjowaliśmy ją jako pustą tablicę, lecz wypełnimy ją w następnym ujęciu. 4. Aby na jakimkolwiek obiekcie zastosować transformację koloru musimy najpierw przygotować ogólny obiekt i zasiedlić go wartościami składników koloru. W tym celu dodaj poniższy kod w drugim ujecie w tej samej warstwie Code. bg_color_new = { ra: mycolor[0], rb: mycolor[1], ga: mycolor[2], gb: mycolor[3], ba: mycolor[4], bb: mycolor[5], aa: _root.slider_master1.vlm_master1._y+100, ab: _root.slider_master1.vlm_master1._y*5 };
W tym fragmencie bg_color_new stanowi obiekt ogólny, w którym będziemy przechowywać wartości, natomiast ra, rb i tak dalej są składnikami obiektu koloru. Pierwsze litery (r, g, b, lub a) oznaczają składowe czerwoną (red), zieloną (green) , niebieską (blue) i alfa klipu filmowego. Druga litera (a lub b) reprezentuje albo mnożnik procentowy (a) albo wartość przesunięcia (b), która zostanie przypisana kolorowi. Sześć wartości koloru określa się poprzez pozycję głównego suwaka. Do wartości procentowej kanału alfa dodaliśmy 100, aby wartość jego nie spadała poniżej 0. Pomnożyliśmy również przesunięcie o 0,5, aby wartość jego nie wzrosła za bardzo. 5. Teraz przeprowadzimy na tle transformację. Poniżej wprowadzonego przed chwilą kodu dodaj następująca linijkę: c.setTransform(bg_color_new);
Ten fragment powoduje wypełnienie metody setTransform wartościami z obiektu bg_color_new. 6. Ostatni fragment kodu przeznaczony dla obiektu background zostanie umieszczony w ujęciu 3: gotoAndPlay (2);
Ten kod powoduje ciągłe odtwarzanie instrukcji setTransform, aby aktualizować kolor klipu filmowego. Na koniec upewnij się, że warstwa 1 ma taką samą liczbę ujęć jak warstwa Code. 7. Teraz przejdziemy do klipu filmowego slider i wpiszemy kod, który prześle pozycję obiektu vlm_slider do tablicy koloru. Ta nowa linijka kodu zostanie umieszczona w ujęciu 2 warstwy Code klipu slider, po dwóch już istniejących: s.setVolume(100-this.vlm_slider1._y); s.setPan (this.pan_dial1.dial_drag1._x*10);
Na razie zmienna slidername zawiera wartości od 1 do 6, lecz tablice we Flashu rozpoczynają się od wartości 0. Aby w prosty sposób ustanowić odnośniki pomiędzy każdą wartością w tablicy odejmujemy 1 od zmiennej slidername, dzięki czemu zawierać będzie wówczas wartości od 0 do 5, w pełnej synchronizacji z tablicą. 8. Teraz możemy odtworzyć film. Podczas przesuwania dowolnego suwaka głośności kolor tła stołu mikserskiego powinien się zmieniać. Na razie efekt jest dosyć surowy, lecz zależy nam na ustaleniu zasad. Plik musicmixer.fla z płyty CD-ROM dołączonej do książki przedstawia bardziej subtelny efekt, na którym kolory zależne są zarówno od zmiany ustawienia suwaków jak i pokręteł. Jako następne zadanie w naszym ćwiczeniu ze stołem mikserskim, którym do tej pory się zajmowaliśmy, możesz na przykład lepiej połączyć suwaki z tłem. Jesteś już gotowy od spojrzenia na dźwięk w inny sposób. Zamiast tworzyć film wyłącznie do odtwarzania dźwięku przyjrzymy się, w jaki sposób można wcielić dźwięk do projektu. Dźwięk nie jest wyłącznie dodatkową właściwością dodawana do filmu Flasha, lecz integralną częścią nowego świata Sieci i bez niego filmy są odrobinę... nieme. Teraz zajmiemy się sposobami kontroli dźwięku w f filmie bez zastosowania czegoś tak oczywistego, czy też ręcznego jak suwak głośności.
Kontrolowanie dźwięku pośrednio Zaczniemy od przypisywania kontrolerów dźwięku do kursora myszy, dzięki czemu przesuwając kursor w lewo lub w prawo możemy w ten sposób przenieść dźwięk z jednego głośnika w drugi, a przesuwając kursor w dół lub w górę możemy zmniejszyć lub zwiększyć głośność. Przypisywanie dźwięków do kursora myszy
Aby uzyskać taki efekt potrzebujemy kilka gotowych klipów dźwiękowych. Moglibyśmy zastosować jedną z pętli, jaką użyliśmy na stole mikserskim, lecz dla urozmaicenia ja wybrałem coś innego. Mam trzy-sekundową pętle, którą utworzyłem jakiś czas temu dla pewnego projektu, a który świetnie nadaje się na potrzeby tego ćwiczenia. Dźwięk ten znajdziesz w pliku mousesound.fla na płycie CD-ROM dołączonej do książki. 1. Utwórz nowy film i importuj dźwięk do biblioteki. 2. Kliknij prawym klawiszem myszy na dźwięku w bibliotece, wybierz z menu pozycję Linkage i nadaj dźwiękowi identyfikator loop:
Rozdział 6-171
Jeśli zastanawiasz się nad zastosowaniem ostatniej opcji, Import this symbol from URL, używa się jej wówczas, gdy korzystasz z udostępnianych bibliotek i musisz pobrać bibliotekę z danego adresu internetowego. 3. Wstaw dwa ujęcia kluczowe na głównej listwie czasowej i otwórz okno Frame Actions dla ujęcia 1. 4. Najpierw należy wprowadzić znany nam już kod ActionScript w celu utworzenia nowego obiektu dźwiękowego i przypisania mu naszego dźwięku: loud = new Sound(); loud.attachSound("loop"); loud.setVolume(50); loud.start(0, 1000);
W tym fragmencie kodu przypisaliśmy naszą pętlę dźwiękową do nowego obiektu dźwiękowego o nazwie loud. 5. Poniżej wpiszemy następne dwie linijki: xStage = 550; yStage = 400;
Te dwie zmienne zawierają informacje o wysokości i szerokości sceny i jeśli zdarzy się, że zmienimy je później, nie będziemy musieli przeglądać całego kodu w poszukiwaniu liczby 550 — można ją zmienić tutaj, w pierwszym ujęciu. Następne ujęcie będzie zawierać większość kodu, lecz za nim go zapiszemy warto zastanowić się dokładnie, co mamy w zasadzie zamiar zrobić. Gdy przesuwamy kursor myszy w górę, chcemy, aby dźwięk stawał się coraz głośniejszy, osiągając 100% u góry ekranu. Natomiast im bliżej dolnej części ekranu tym dźwięk ma być cichszy, aż u samego dołu osiągnie 0%. Możemy zapisać te zależności w równaniu: WysokoscSceny − WysokoscMyszy Glosnosc = × 100 WysokoscSceny Pamiętaj o wartości 0, która we Flashu jest punktem odniesienia od lewej górnej części ekranu, a nie od dolnej lewej, jak w matematyce — dlatego powyższe równanie jest odrobinę bardziej skomplikowane niż mogłeś się spodziewać. Jeśli chodzi o przenoszenie dźwięków, chcemy aby przeniesienie całkowite do głośnika prawego osiągnęło swoją maksymalną wartość 100% na prawej krawędzi sceny, a do lewego na lewej krawędzi. Gdy kursor myszy znajduje się w środku sceny przesunięcie powinno być równe 0. Pamiętaj, że zakres przesunięcia mierzony jest od –100 (po lewej) do 100 (po prawej), z wartością 0 oznaczającą stan równowagi. Można to zapisać jako „podziel pozycję myszy na dwa przez szerokość sceny, następnie wynik pomnóż przez 100, aby uzyskać wartość procentową i na koniec odejmij 100 aby uzyskać wartość w zakresie od –100 do 100. Równanie będzie wyglądać tak: 2 × SzerokoscMyszy Przesuniecie = × 100 − 100 SzerokoscSceny
Zapewne się ucieszysz, nie będziemy się już zajmować równaniami. Teraz jesteśmy gotowi już na ActionScript. 6. Wywołaj okno Actions dla ujęcia 2 i wpisz poniższy kod: Rozdział 6-172
Teraz wystarczy przeprowadzić aktualizację dźwięku podczas przesuwania kursora. Wykonamy to w zwykły sposób, poprzez utworzenie pętli pomiędzy ujęciami 2 i 3. 7. Umieść ten wiersz w ujęciu 3: gotoAndPlay (2);
8. Na tym etapie wiem, że chciałbyś przetestować film, lecz najpierw lepiej importować obrazek lub narysować pudełko dopasowane rozmiarem do sceny. Dzięki temu będziesz wiedzieć, kiedy kursor myszy dosięgnie krawędzi sceny, co umożliwi ci sprawdzenie, czy wartości dla głośności i przesunięcia dźwięku są poprawne. 9. Na koniec opublikujmy film, obejrzyjmy jego podgląd w przeglądarce i posłuchajmy co się dzieje, gdy przesuwamy kursor myszy po scenie.
Rozszerzanie przykładu Udowodniliśmy, że możemy kontrolować właściwości dźwięku przy pomocy myszy, lecz to nie wszystko. Przy pomocy tych samych zasad i stosowania ich w innych projektach, możesz utworzysz rewelacyjne efekty ulepszające twoje witryny internetowe i gry. Na przykład, wyobraźmy sobie, że piszemy grę we Flashu „Najeźdźcy z Kosmosu”. Rakiety wystrzeliwane z naszego statku u dołu ekranu mogą stawać się coraz głośniejsze, a ich dźwięk powoli przechodzić z głośnika do głośnika im bardziej zbliżają się do środka ekranu, a odgłos laserów może stawać się coraz cichszy w trakcie oddalania się od krawędzi ekranu, na jakiej się pojawiły. Ponadto, w trójwymiarowym interfejsie możemy przypisać dźwięk jednemu bokowi sześcianu, przez co wraz z obrotem sześcianu dalej od użytkownika dźwięk również się oddala. Takie akcje można zastosować na dowolnych obiektach i przygotować w ten sposób większe sprzężenie zwrotne dla użytkownika, a także zwiększyć przyjemność, jaką będzie odczuwać podczas używania wyrobu Flasha. Jako kolejny przykład manipulowania dźwiękiem w kodzie ActionScript przyjrzymy się sposobowi zastosowania dźwięku w prostej grze. Zaczniemy od klasycznej gdy Najeźdźcy z Kosmosu. Wybraliśmy tą grę z dwóch powodów — statek posłuży nam jako świetny punkt centralny dla naszego ćwiczenia — a po drugie, zasady tej gry są dosyć intuicyjne. Dźwięki do wersji demonstracyjnej gry
Niestety, chociaż bardzo byśmy tego chcieli, nie będziemy tutaj odtwarzać całej gry, gdyż nie o tym jest ten rozdział. Jednak po zakończeniu czytania tej książki, powinieneś dać już sobie radę z przeniesieniem swych projektów na kolejny poziom — przejrzyj rozdział Shama Bhangala w poszukiwaniu kilku pomysłów programowania gier. Na płycie CD-ROM umieściliśmy plik GameSound.fla dołączony do tej wersji demonstracyjnej. 1. Przede wszystkim, aby odtworzyć klimat starych gier przygodowych, ustaw rozmiar filmu 300x400 pikseli. Następnie umieść w ujęciu 3 na listwie czasowej ujęcie kluczowe i utwórz nową warstwę o nazwie Code z trzema ujęciami kluczowymi. 2. Będziemy potrzebować statek kosmiczny, promień lasera i gwiazdy. Pierwsze dwa elementy możemy wykonać we Flashu, a ostatni wykonamy w Photoshopie. Jeśli nie posiadasz tej aplikacji, możesz w ćwiczeniu zastosować obrazek użyty przez nas, który znajduje się na płycie CD-ROM w pliku starfield.gif, lub po prostu pozostawić niebo czarne. 3. Nadaj warstwie 1 nazwę Background i utwórz dwie inne warstwy o nazwach Laser i Ship.
Rozdział 6-173
4. Jeśli zdecydowałeś się na nasz obrazek gwiazd, importuj go do biblioteki i następnie przeciągnij na warstwę Background. Zmień rozmiar obrazka, aby go odpasować do rozmiarów sceny. Najlepiej zablokować teraz warstwę Background, aby niechcący na niej nie kliknąć. 5. Na warstwie Ship narysuj statek kosmiczny i przekształć go w klip filmowy o nazwie ship. 6. Na warstwie Laser narysuj laser (wystarczy pionowa czerwona linia) i przekształć go w klip filmowy o nazwie laser. Poniżej przedstawiliśmy ukończony obrazek statku kosmicznego i lasera.
7. Umieść klip ship u dołu na środku sceny i umieść tuż nad nim klip laser, lecz pewnym oddaleniu od lewej strony sceny. Nadaj tym dwom klipom filmowym odpowiednio nazwy klonów ship i laser.
Dlatego w ten sposób umieściliśmy laser abyśmy mogli zastosować instrukcję duplicateMovie do utworzenia w razie potrzeby większej liczby promieni lasera. Po wywołaniu tej instrukcji powstanie dokładna kopia klipu filmowego lasera i będziemy ją mogli umieścić w dowolnym miejscu na scenie. Chcemy, aby lasery wychodziły w linii prostej od frontu statku kosmicznego, więc poprzez umieszczenie lasera tam gdzie znajduje się on obecnie możemy wywołać nowy laser w poziomej pozycji wobec klipu ship i w pionowej wobec klipu laser. Jest to prosty sposób na zapewnienie, że wszystkie lasery pojawią się we właściwym miejscu. Musimy jeszcze utworzyć ostatnią warstwę dla obszaru uderzenia, z której będą wystrzeliwane lasery. 8. Wstaw nową warstwę nad warstwą Ship i nadaj jej nazwę Hit Box. 9. Czas na naszego starego przyjaciela, czyli niewidzialny przycisk. Na warstwie Hit Box utwórz nowy symbol przycisku o nawie invis_button. W stanie Hit wstaw ujęcie kluczowe i narysuj prostokąt na środku sceny. Jego rozmiary są nieistotne, gdyż i tak je za chwilę zmienimy. 10. Powróć na główną scenę i przeciągnij kopię przycisku invis_button na warstwę Hit Box. Zeskaluj i umieść przycisk w taki sposób, aby pokrywał całą szerokość sceny i wysokość statku kosmicznego.
Rozdział 6-174
Dlatego tak zrobiliśmy, aby mysz w celu wystrzelenia lasera musiała się znajdować przynajmniej nad obszarem poruszania się statku. Nie dopasowaliśmy jednak rozmiaru przycisku do rozmiaru statku, ponieważ będziemy do niego dodawać bezwład, i wówczas takie rozwiązanie nie byłby zbyt praktyczne. Wszystko stanie się dla ciebie o wiele jaśniejsze, gdy zobaczysz grę w akcji. Oczywiście nie powinniśmy zapominać o celu tego ćwiczenia, czyli dźwiękach. W plikach w formacie FLA na płycie CD-ROM znajdziesz dźwięki dla lasera i silnika, lecz zachęcamy do eksperymentowania — statek kosmiczny może równie dobrze strzelać ryczącymi osłami, co będzie niezwykle interesujące. 11. W celu zastosowania dźwięków wystarczy otworzyć plik GameSound.fla i przeciągnąć dźwięki do biblioteki. Po importowaniu dźwięków nadaj im nazwy łącznikowe engine i laser. Zanim zabierzemy się za wpisywanie kodu powtórzmy nasze cele: • Statek kosmiczny ma się poruszać po scenie podczas przesuwania myszy. • Może poruszać się jedynie w prawo lub w lewo, lecz po kliknięciu na obszar blisko statku statek wystrzeli lasery. • Wystrzelony będzie pojedynczy promień lasera, który będzie się poruszał w górę ekranu ze stałą prędkością. • Podczas przenoszenia statku w prawo i w lego odgłos silnika powinien być przenoszony pomiędzy głośnikami. • Po wystrzeleniu lasera jego odgłos powinien cichnąć, stwarzając wrażenie oddalania się od statku (wiem, że dźwięk nie podróżuje w próżni, lecz jest to tylko gra, a nie rzeczywistość...). Pamiętając o tych zasadach spróbujmy zastosować je w filmie. 12. W pierwszym ujęciu warstwy Code zainicjujemy dźwięki i zmienne. Otwórz to ujęcie i wpisz poniższy kod ActionScript: speed = 15; n = 1; xStage = 300; yStage = 400; engine_noise = new Sound(ship); engine_noise.attachSound("engine"); engine_noise.setVolume(50); engine_noise.start(0, 1000); laser_noise = new Sound(laser); laser_noise.attachSound("laser"); laser_noise.setVolume(0); laser_noise.start(0, 1000);
W tym fragmencie zmienna speed reprezentuje prędkość lasera. To prawda, zgodnie z definicją lasery poruszają się z prędkością światła, lecz nie mamy czasu na obliczanie ile by to było przy 12 ujęciach na sekundę (no dobrze, ciekawskich możemy poinformować, że prawdopodobnie wartość zmiennej speed wynosiłaby około 71065954416, lecz nie wierzcie nam na słowo). Zmienna n oznacza licznik, którego zastosujemy po rozpoczęciu strzelania laserami jak nawiedzeni, bo wówczas przyda nam się odrobina kontroli nad nimi. Po każdorazowym kliknięciu myszą w Rozdział 6-175
obszarze wystrzału, do zmiennej n dodamy 1, i nowa wartość n będzie stosowana w nowej nazwie lasera. Zdefiniowaliśmy również rozmiar sceny. Dwa następne akapity kodu inicjują dwa dźwięki przy pomocy dobrze nam znanej notacji obiektu dźwiękowego i przypisują dźwięki odpowiednim klipom filmowym. Zauważ, że dwie ostatnie linijki w kodzie każdego z dźwięków odnoszą się do głośności każdego z nich i ustawiają odtwarzanie pętli dźwięku przez 1000 razy. Dźwiękowi engine_noise przypisaliśmy głośność 50, ponieważ warkot można w najlepszym przypadku uznać za monotonny odgłos i w większym stopniu jest dźwiękiem z otoczenia, niż czystą muzyką. Wstępna wartość głośności dla dźwięku laser_noise wynosi 0, ponieważ nie chcemy aby dźwięk ten został odtwarzany aż nie wystrzelimy lasera. 13. Następnie wpisz główny kod ActionScript w ujęcie 2 warstwy Code: // sprawdzamy bezwład statku i limit xPos = ship._x; xMousepos = int(_xmouse); xVal = xPos + xMousepos; newxPos = (xVal/2); if (newxPos < 0) { newxPos = 0; } if (newxPos > xStage) { newxPos = xStage; } ship._x = newxPos;
Pierwsza część kodu sprawdza, aby statek nie znalazł się poza krawędziami sceny. Definiuje również bezwład statku, dzięki czemu statek zatrzyma się stopniowo zamiast nagle zahamować pod kursorem myszy. W tym celu wprowadziliśmy następującą linijkę: newxPos = (xVal/2);
Oznacza ona, że jeśli odległość od statku do myszy wynosi 16 pikseli, statek przesunie się najpierw o 8, potem o 4, następnie o 2 i tak dalej. W powyższym kodzie umieściliśmy również dwie struktury if aby zapewnić, że statek zawsze pozostanie na ekranie. 14. Kolejny fragment kodu odnosi się przesuwania nowo utworzonego lasera w górę ekranu. Wstaw ten fragment za istniejącym kodem w ujęciu 2: // dla wszystkich aktualnie odpalanych laserów i = 1; while (i <=n) { // weźmy pozycję Y tego lasera – prędkość = nowa pozycja Y newLaserY = getProperty("laser"+i, _y) – speed; // jeśli laser nie osiągnął szczytu // przesuwamy ten laser, określamy jego głosność zgodnie z pozycją Y if (newLaserY > 0) { setProperty ("laser"+i, _y, newLaserY); laser_noise.setVolume(newLaserY/(yStage/100)); } else { // jeśli laser jest poza górną częścią ekranu, usuwamy removeMovieClip ("laser"+i); } i++; }
W tym fragmencie kodu sprawdzamy, czy laser ma dodatnią wartość dla osi Y, co oznacza wówczas, że znajduje się on ciągle na scenie. Zmienna n zawiera informacje i liczbie laserów na ekranie i cyklicznie przemieszcza się pomiędzy aktywnymi laserami i wywołuje instrukcje setProperty do
Rozdział 6-176
zdefiniowania nowej pozycji promienia lasera. Procedury do samego tworzenia promienia laserowego zostaną przyłączone do niewidocznego przycisku nad statkiem. Jeśli laser posiada wartość osi Y ujemną, oznaczającą, że nie znajduje się on na ekranie, wówczas zostaje usunięty przy pomocy instrukcji else. 15. Z efektem przenoszenia między głośnikami odgłosu silnika uporamy się w jednej linijce. Dodaj ją na koniec skryptu w ujęciu 2: engine_noise.setPan((((newxPos*2)/xStage)*100)-100);
Tak jest o wiele prościej: bierzemy pozycję statku kosmicznego (newxPos), mnożymy ją przez dwa, a następnie dzielimy przez szerokość sceny. Wówczas mnożymy wynik przez 100 i odejmujemy 100, aby uzyskać wartość z zakresu od –100 do 100, gdzie 0 oznacza martwy środek przesunięcia dźwięku. 16. Większość kodu mamy już za sobą. trzecie ujęcie kluczowe jest o wiele łatwiejsze, gdyż składa się na nie tylko pętla powodująca ciągłą aktualizację sceny. Dodaj tą akcję goto w ujęciu 3: gotoAndPlay (2);
Jeśli przetestujemy film na tym etapie, powinniśmy zobaczyć gwiezdne pole ze statkiem kosmicznym u dołu ekranu. Statek powinien płynnie przesuwać się z lewej do prawej, lecz nie wychodzić poza krawędzie ekranu. Odgłos silnik statku również powinien przechodzić z jednego głośnik a w drugi wraz z przesuwaniem się statku. Gdy przestaniemy poruszać myszą, statek powinien stopniowo zwolnić, a nie nagle zatrzymać się. Zauważ, że gdy strzelamy nie pojawiają się żadne lasery. Dzieje się tak dlatego, że nie przygotowaliśmy jeszcze kodu dla przezroczystego przycisku. Więc najwyższy czas, aby się za to zabrać. Ostatnim elementem naszej układanki jest wystrzeliwanie laserów po kliknięciu przyciskiem myszy w obszarze wystrzału. 17. Zaznacz klon przycisku invis_button na scenie aby wywołać okno dialogowe Object Actions. Teraz wpisz poniższy kod ActionScript: on (release) { n++; // tworzymy nowy klip lasera duplicateMovieClip ("laser", "laser"+n, n); // wskazujemy, gdzie się będzie znajdować setProperty ("laser" + n, _x, getProperty("ship", _x)); }
Ten fragment kodu oznacza, że po zwolnieniu przycisku myszy wartość n, czyli zdefiniowania przez nas wcześniej zmienna licznika, wzrasta o 1. Wówczas klip filmowy laser zostaje skopiowany pod nazwą klonu lasern (gdzie n jest naszą wartością kumulacyjną) i umieszczony na poziomie n. Gdy wywołujemy instrukcję setProperty z klonem lasern kopia ta pojawi się dokładnie nad klipem filmowym ship, bez względu gdzie się on będzie znajdować. Operacja ta przeprowadzona zostanie poprzez ustawienie wartości _x lasera na wartość _x statku. Innymi słowy wystrzelimy pocisk z frontu statku za każdym kliknięciem przyciskiem myszy. Podczas testowania filmu zauważ jak głośność lasera zanika wraz z oddalaniem się go od statku, a odgłos silnika przechodzi pomiędzy głośnikami podczas przesuwania się statku po ekranie. Brzmienia dokładnie takie jak w starych maszynach Williams Defender! Czuć nostalgią...
Rozdział 6-177
Teraz wystarczy tylko umieścić kilka statków nieprzyjaciela, dodać jeszcze trochę kodu, tablicę wyników, oczywiście jeszcze inne dźwięki i już będziesz miał gotową grę Najeźdźcy z Kosmosu. Jak już wspomnieliśmy, przejrzyj rozdział autorstwa Bhangala i zastanów się, gdzie chciałbyś przejść.
Zakończenie W tym rozdziale staraliśmy się skoncentrować na zastosowaniu kodu ActionScript do tworzenia efektów dźwiękowych, a także wyjaśnić go na tyle dokładnie, abyś mógł w pełni zrozumieć ten proces i zastosować go we własnych projektach. Wierzymy, że Sieć szybko rozwija się w kierunku bogatej zawartości multimedialnej, a we Flashu 5 naprawdę w pełni kontrolujemy elementy multimedialne. Oczywiście każdy stół mikserski jest tak dobry, jak muzyka, którą miksuje, a gra jest na tyle dobra na ile da się z w nią zagrać — żadne narzędzie, jakkolwiek wszechstronne i potężne by ono nie było, nie stworzy tych rzeczy za ciebie. Wywodzą się one z talentu, doświadczenia, ciężkiej pracy i praktyki. Interesującym jest wyobrażenie sobie krzywej nauki dla twórczych artystów grafiki cyfrowej. Gdy malujesz, nietrudno jest załapać jak stosuje się farby i pędzel, a wówczas nadchodzi czas na twórcze myślenie i długą odkrywczą podróż. Podczas pracy na komputerze jest inaczej: masz do dyspozycji samouczki, aktualizacje, wtyczki, platformy, przeglądarki, języki, wersje... i tak dalej. Starając się pamiętać o tych wszystkich rzeczach łatwo zapomnieć o najważniejszej, czyli tworzeniu. Aby przełamać narzędzia, najpierw musisz je poznać, wówczas dopiero możesz je zastosować do wykonywania rzeczy, do jakich wcale nie zostały przeznaczone. W sumie to dzięki temu doszliśmy do obecnego etapu rozwoju Sieci. Teraz wszyscy inni podchwytują, modemy stają się coraz szybsze, stałe łącze jest tuż tuż, a komputery wystarczająco szybkie do przekazywania informacji. Teraz w naszych rękach leży dalszy rozwój możliwości i poczucie odpowiedzialności za nasze prace. Zakładamy, że większość czytelników tej książki to ludzie podobni do nas, zajmujący się projektowaniem na potrzeby Sieci i multimediów, zobowiązani do współpracy z klientem, którzy płacą za projekt i do tworzenia projektów i interfejsów poprawnie działających i realizujących założenia projektu. Warto jednak pamiętać, że jesteśmy zarówno studentami uczącymi się nowych narzędzi i sposobów komunikacji z ich użyciem, jak i nauczycielami. Do nas należy prowadzenie klienta i widza, a także zaskakiwanie i przyciąganie ich zainteresowania. Musisz pamiętać, że oni nie znają tego, co chcą zobaczyć, lecz tylko to, co już wdzieli. To, co się zobaczą za chwilę, zależy od nas.
Rozdział 6-178
Rozdział 7 Efekty przezroczystości W tym rozdziale zajmiemy się stosunkowo słabo udokumentowaną sztuczką umożliwiającą tworzenie wielowarstwowych projektów i animacji we Flashu. Pierwszą część rozdziału poświęcimy pracy w Photoshopie, w którym wykonamy kolaż przy pomocy parametru przezroczystości Alpha plików w formacie PNG. Następnie z minimalnym wysiłkiem skopiujemy projekt do Flasha i utworzymy z niego animację. Flash został okrzyknięty mistrzem animacji wektorowej w Sieci, lecz w tym rozdziale pokażemy, że może być z powodzeniem stosowany również z mapami bitowymi. Obrazki bitmapowe składają się z malutkich różnorodnie pokolorowanych kwadracików noszących nazwę pikseli, podczas gdy wektory złożone są z płaskich linii i krzywych. Chociaż animacje wektorowe charakteryzują się bardzo małymi rozmiarami plików nie uzyskują takiej głębi i tekstury jak mapy bitowe (zwane również obrazkami rastrowymi). W tym rozdziale zobaczysz jak można zastosować obrazki rastrowe w animacji z jednoczesnym zachowaniem małego rozmiaru pliku. Ponieważ Flash obsługuje również warstwową strukturę obrazków podobną jak Photoshop, projektanci mogą stosować tą aplikację do uzyskiwania takiego samego stylu kolażów jak tradycyjnie tworzyli. Jednakże we Flashu nadal istnieją pewne ograniczenia w stosowaniu obrazków rastrowych: skalowanie filmu bez pogorszenia jakości obrazka rastrowego jest trudne, a animacje rastrowe mogą wpłynąć na wydajność procesora. Jednakże, zalety przeważają nad niedogodnościami. Jeśli poprawnie zastosowane, obrazki rastrowe mogą dodać wyróżniającą się teksturę i bogactwo do twoich projektów, a oto jak moża to zrobić: Tworzenie kolażu w Photoshopie
W pierwszym etapie tego ćwiczenia wykonamy kolaż obrazków w Photoshopie poprzez uczynienie obszarów każdego obrazka przezroczystymi. Każdy obrazek zostanie umieszczony na oddzielnej warstwie i po ukończeniu kolażu zapiszemy każdą warstwę jako oddzielny plik, gotowy do importowania do Flasha. Importowanie poszczególnych plików do Photoshopa wykonaliśmy już za ciebie. 1. Otwórz plik collage01.psd, a zobaczysz, że wszystkie składniki naszego kolażu zostały importowane do tego pliku: obrazek zegara, zdjęcie krajobrazu wykonane w Irlandii i zdjęcie kobiety. Otwórz panel Layers przy pomocy polecenia Window|Show Layers i zauważ, że każdy obrazek został umieszczony na odpowiedni nazwanej warstwie.
Rozdział 7-179
Zalecamy nadawać warstwom łatwe do odszyfrowania w przyszłości nazwy. Jeśli pracujesz z innymi projektantami warto przyzwyczaić się do odpowiedniego nazywania warstw, gdyż dzięki temu inni projektanci po otwarciu pliku Photoshopa będą mogli zrozumieć strukturę warstw wykonaną przez ciebie.
Rozpoczniemy od usunięcia tła z warstwy woman. Można tego dokonać na kilka sposobów, jak na przykład przy pomocy narzędzia magicznej różdżki (Magic Wand) czy menu Color Range znajdującego się pod opcją Select, lecz w tym ćwiczeniu zastosujemy narzędzie gumki (Eraser). 2. Wybierz narzędzie gumki i dwukrotnie na nim kliknij, aby wyświetlić panel Options. Wybierz tryb Paintbrush (równie efektywny będzie tryb Airbush) i upewnij się, że wszystkie pozostałe opcje w tym panelu zachowały swoje domyślne ustawienia. W tym celu kliknij na strzałce w górnym prawym rogu panelu i zastosuj polecenie Reset Tool:
3. Otwórz panel Brushes przy pomocy polecenie Window|Show Brushes i zaznacz pędzel z liczbą 100 umieszczoną pod nim. Wartość ta oznacza, że średnica pędzla wynosi 100 pikseli. Upewnij się, że warstwa woman jest zaznaczona i wygumuj tło wokół niej. Zastosuj różne rozmiary pędzli, aby utworzyć różne stopnie rozproszenia wokół obrazka; im bardziej zróżnicowane wykonasz krawędzie, tym bardziej interesujący będzie kolaż. Jeśli wymażesz zbyt dużo obrazka, zastosuj polecenie Edit|Undo lub Window|Show History. Wywołanym oknie dialogowym wyświetlone zostaną wszystkie niedawne zmiany wprowadzone w pliku i będziesz mógł cofnąć kilka kroków:
Rozdział 7-180
4. Teraz ukryj wszystkie warstwy oprócz warstwy ireland klikając na ikonie oka przy nazwach pozostałych warstw. Przy pomocy tych samych technik opisanych powyżej wymaż obydwa końce fotografii narzędziem gumki. Tym razem, jednak, zastosuj większy pędzel o średnicy 300 pikseli. Pamiętaj, aby usunąć rogi zdjęcia, aby obrazek równo zanikał. Jest to ważne, gdyż zwracanie uwagi na szczegóły dodaje głębi kolażom. Teraz włącz z powrotem warstwę woman klikając w miejscu ikony z symbolem oka. Twój kolaż zaczyna nabierać kształtów:
5. Włącz warstwę clock i przesuń ją na górę stosu warstw klikając i przeciągając ją na początek listy w panelu Layers. Przy pomocy tych samych technik rozprosz krawędzie zegara, aż zniknie z obrazka brązowe drewno. W ten sposób powstanie bardzo abstrakcyjny obrazek, dzięki któremu kolaż stanie się bardziej interesujący. Teraz kliknij ikonę tworzenia nowej warstwy (Create new layer): znajduje się ona w środku pomiędzy innymi ikonami u dołu panelu Layers i przedstawia symbol strony z zawiniętym rogiem. Dwukrotnie kliknij na nowej warstwie, aby wywołać okno Options i zmień jej nazwę na horizontal lines:
Rozdział 7-181
Create new layer — ikona tworzenia nowej warstwy 6. Na tej warstwie narzędziem linii narysuj linie u góry i u dołu zdjęcia irlandzkiego krajobrazu. Aby wybrać grubość dwukrotnie kliknij na narzędziu linii aby otworzyć jego panel Options. W pole Line Field wpisz 1. Teraz narysuj linie z wciśniętym klawiszem Shift, aby zachować ich poziomy kierunek. Rozprosz krawędzie linii narzędziem gumki:
7. Na koniec zmniejsz rozmiar warstw woman i clock. Zaznacz po jednej warstwie z osobna i zastosuj polecenie Layer|Transform|Scale. Z wciśniętym klawiszem Shift w celu zachowania proporcji obrazka przeciągnij kwadratowe ramki wyświetlone wokół obrazka — podobnie jak podczas używania narzędzia Scale we Flashu — aż obrazek przybierze odpowiedni rozmiar. Rozmieść obrazki tworząc dobrze wyważoną kompozycję, z zachowaniem warstwy woman nad pozostałymi — w tym celu przeciągnij ją na początek listy w panelu Layers:
Rozdział 7-182
Skoro już mamy kolaż musimy przygotować poszczególne obrazki do importowania do Flasha. Aby w jak największym stopniu ułatwić pracę z nimi we Flashu zapiszemy je w formacie gotowym do zastosowania w Sieci, który zoptymalizuje rozmiar plików obrazków. Na tym etapie warto zapisać plik Photoshopa w oddzielnym folderze. Nie chcesz przecież przypadkowo nadpisać pliku, niszcząc w ten sposób kompozycję, która mogła stanowić kilkugodzinną pracę projektancką. Z doświadczenia wiem, jak bardzo druzgocące to może być.
8. Zapisz plik pod nazwą collage.psd. Zastosuj polecenie Image|Duplicate, aby utworzyć kopię pliku collage i wówczas usuń wszystkie warstwy oprócz warstwy woman zaznaczając warstwę do usunięcia i klikając na ikonie z symbolem śmietniczki znajdującej się u dołu panelu Layers. 9. Kliknij i wciśnij narzędzie ramki selekcji (Marquee) i kliknij na ikonę narzędzia wycinania Crop znajdującą się umieszczoną na samym końcu wyświetlonego menu:
Kliknij i przeciągnij ramkę wokół obrazka kobiety, blisko krawędzi i dwukrotnie kliknij wewnątrz, aby wyciąć obrazek. Zapisz go jako nowy plik o nazwie woman.psd. 10. Powróć do oryginalnego pliku collage i powtórz powyższe kroki dla pozostałych trzech warstw. Po ukończeniu tych operacji powinieneś mieć cztery pliki o nazwach Rozdział 7-183
clock.psd, horizontal_lines.psd, ireland.psd i woman.psd. Zapisz te pliki w folderze o nazwie roughs. W nim właśnie będziemy przechowywać wszystkie pliki wykonane w trakcie przygotować do utworzenia filmu Flasha. Dobra organizacja plików i właściwe ich nazywanie jest bardzo ważne, gdyż w projektach tego typu zawsze będziesz mieć wiele pików, trudnych do rozróżnienia przy zajrzeniu do projektu po pewnym czasie.
11. Dla pliku woman.psd zastosuj polecenie File|Save For Web. Z menu Settings wybierz pozycję PNG-24 i zaznacz pole wyboru Transparency. Wówczas białe tło zniknie ukazując domyślne w Photoshopie tło w szachownicę.
Oznacza to, że tło będzie przezroczyste po eksportowaniu go do formatu PNG. Teraz wciśnij przycisk OK, aby zapisać plik do foldera roughs pod nazwą woman.png. Powtórz te kroki dla pozostałych plików Photoshopa. Pod koniec tego procesu w folderze roughs powinny znajdować się cztery dodatkowe pliki o nazwach clock.png, horizontal_lines.png, ireland.png i woman.png. W ten sposób zakończyliśmy pracę w Photoshopie — jesteśmy gotowi do importowania plików do Flasha. Importowanie plików w formacie PNG
1. Utwórz nowy film Flasha ze sceną o rozmiarze 700x400 pikseli (w tym celu zastosuj polecenie Modify|Movie). Zapisz ten plik pod nazwą collage.fla. Zamierzamy umieścić cały kod ActionScript kontrolujący film na jednej warstwie i zachować ją jako górną warstwę w filmie. Poprzez zastosowanie górnej warstwy jako warstwy z kodem ActionScript w każdym filmie zapewniasz łatwy dostęp do skryptów do późniejszej edycji. 2. Zmień nazwę warstwy na actions. Teraz przygotujemy ustawienia publikacji dla filmu. 3. Zastosuj polecenie File|Publish Settings. W wyświetlonym panelu kliknij na zakładkę Flash i ustaw suwak JPEG Quality na 30. Poprzez wybranie niskiej wartości zapewniamy, że wszystkie pliki będą eksportowanie w małych plikach. Jeśli nie podoba ci się jakość obrazka, zawsze możesz zwiększyć ją i ponownie zapisać plik. 4. Zaznacz następujące pola wyboru: Generate size report i Protect from import:
Rozdział 7-184
Poprzez zaznaczenie pola wyboru Generate size report utworzony zostanie plik tekstowy, który nam później pomoże w zmniejszeniu rozmiaru pliku filmu. Pole wyboru Protect from import zapobiega ukradzeniu twojej pracy przez innych projektantów (uwaga: ta funkcja nie jest doskonała i każdy plik może zostać złamany. Prawdę mówiąc, dostępnych jest kilka darmowych narzędzi do złamania chronionych plików Flasha, które umożliwiają zdobycie obrazków źródłowych. Lecz ta funkcja powstrzyma zwykłego użytkownika przed ukradzeniem plików źródłowych). 5. Zastosuj polecenie File|Import i importuj cztery pliki w formacie PNG jakie zapisałeś wcześniej w folderze roughs. Gdy wyświetlone zostanie okno dialogowe Fireworks PNG Import Settings pozostaw wszystkie domyślne ustawienia bez zmian i wciśnij przycisk OK. Wówczas wszystkie obrazki zostaną umieszczone od razu na scenie. 6. Zaznacz obrazek woman i zastosuj polecenie Insert|Convert to Symbol. Przekształć go w symbol graficzny o nazwie womansymbol. Powtórz tą operację dla pozostałych trzech obrazków, nadając im nazwy clocksymbol, irelandsymbol i linessymbol. Po przekształceniu obrazka w symbol Flash automatycznie wyśrodkuje obrazek wewnątrz nowego symbolu. Takie rozmieszczenie pomoże nam później, gdy zaczniemy pracę nad kopią symbolu na scenie. Flash wówczas potraktuje środek obrazka jako środek symbolu podczas przeprowadzania takich operacji jak skalowanie, czy obracanie klonu. 7. Zaznacz wszystkie symbole i usuń je ze sceny. W bibliotece zobaczysz, że znajdują się tam nadal oryginalne obrazki w formacie PNG wraz z nowymi symbolami. Rozszerzenie pliku PNG będzie widoczne na końcu nazwy mapy bitowej w zależności od indywidualnych ustawień twojego komputera:
Rozdział 7-185
Podczas pracy nad filmem z dużą liczbą symboli i importowanych obrazków warto zachować dobrą organizację biblioteki tworzą foldery do grupowania w nich poszczególnych obiektów. 8. Utwórz w bibliotece nowy folder klikając na ikonie z symbolem pomarańczowego foldera znajdującej się w lewym dolnym rogu panelu Library. Nazwij ten folder bitmaps — po utworzeniu nowego foldera natychmiast podświetlone zostanie pole Name, w którym będzie mógł wówczas wpisać nową nazwę. 9. Teraz zaznacz każdą mapę bitową (czyli pliki z ikoną zielonego drzewa obok ich nazw) i przeciągnij je wszystkie do nowego foldera bitmap, po jednej z osobna. Wówczas folder otworzy się ukazując jego zawartość. Dwukrotnie kliknij na folderze, aby go zamknąć.
Aktualizacja oryginalnych obrazków Teraz, gdy już jesteś w połowie projektu i chcesz dodać coś do jednego z obrazków bitmapowych, na przykład do ireland.png, można go aktualizować w bardzo prosty sposób. Z powrotem w Photoshopie otwórz plik ireland.png z foldera roughs, wprowadź w nim wszystkie zmiany, jak na przykład modyfikacja rozmiaru czy koloru i zastosuj polecenie File|Save for Web. Zapisz plik jako przezroczysty plik w formacie PNG nadpisując stary plik ireland.png. Przejdź do Flasha i otwórz folder bitmaps w bibliotece. Dwukrotnie kliknij na mapie bitowej ireland i po prostu zastosuj polecenie Update, aby aktualizować obrazek. Możesz aktualizować pliki map bitowych podczas tworzenia projektu, a poprzez aktualizowanie plików map bitowych można nawet zmienić wygląd ukończonej animacji. Animacja map bitowych z kolorem
Skoro nasze obrazki znajdują się już we Flashu gotowe do użycia możemy powielić kolaż wykonany w Photoshopie i przystąpić do animacji. Oprócz dodania ruchu zastosujemy również menu Advanced z panelu Effect, aby uwidocznić elementy kolażu na kilka interesujących sposobów. 1. Utwórz na listwie czasowej cztery nowe warstwy i nadaj im następujące nazwy: clock, lines, ireland i woman. Rozmieść je zgodnie z poniższym rysunkiem, a następnie przeciągnij każdy z przygotowanych symboli na odpowiednią warstwę:
Rozdział 7-186
Jeśli zamiast symbole przeciągniesz na scenę mapy bitowe, animacja nie będzie działać. We Flashu nie można nanosić fizycznych zmian ani animować oryginalnych map bitowych, a jedynie symbole, w których mapy bitowe są osadzone. 2. Pracując na warstwie lines przeciągnij symbol linessymbol do góry sceny. Otwórz panel Align (Windows|Panels|Align) i z wybraną opcją To Stage wyśrodkuj symbol w poziomie w środku sceny:
3. Teraz rozmieść pozostałe elementy w taki sam sposób, jak w projekcie w Photoshopie. Jako wzór możesz otworzyć oryginalny plik. 4. Przystępujemy do utworzenie sekwencji animacji wprowadzającej. Na listwie czasowej dla wszystkich warstw wstaw ujęcia kluczowe w ujęciu 70, a następnie przesuń wskaźnik odtwarzania do ujęcia 1. Teraz kliknij i przeciągnij pierwsze ujęcie kluczowe na warstwie lines do ujęcia 10, co spowoduje zniknięcie symbolu linessymbol z pierwszych 9 ujęć. Następnie przeciągnij pierwsze ujęcie kluczowe na warstwie clock do ujęcia 20, a pierwsze ujęcie kluczowe na warstwie woman do ujęcia 30. Twoja listwa czasowa powinna wyglądać jak ta przedstawiona poniżej:
5. Na warstwie ireland wstaw ujęcia kluczowe w ujęciu 10 i 20. Pracując nad obrazkiem w ujęciu 1 otwórz panel Effect (Window|Panels|Effect) i z menu zaznacz pozycję Alpha. Parametrowi przeźroczystości przypisz wartość 0, co spowoduje zniknięcie obrazka ze sceny. Teraz zaznacz ujęcie kluczowe w ujęciu 10 i z menu w panelu Rozdział 7-187
Effects wybierz pozycję Advanced. Wówczas wyświetlonych zostanie kilka opcji. Dla parametru przeźroczystości (Aplha) wybierz wartość 30%, a dla składowej czerwonej (Red) -28%. Wówczas obrazek powinien nabrać niebieskiej barwy:
6. Aby animować obrazek utwórz uzupełnianie ruchu pomiędzy ujęciami 1 i 10, a także 10 i 20. Wciśnij klawisz Enter, aby przetestować animację. Twoja animacja powinna już teraz nabierać kształtów: symbol irelandsymbol powinien przechodzić z koloru białego w niebieski, a następnie do swojego oryginalnego koloru. Uformujmy resztę animacji. 7. Na warstwie lines wstaw ujęcie kluczowe w ujęciu 20, w ujęciu 10 zaznacz symbol linessymbol i przesuń go na lewo. Wciśnięcie klawisza Shift w trakcie przeciągania pomaga w zachowaniu kierunku poziomego lub pionowego przeciągania i umożliwia przesuniecie linii w prostej linii. Jest to bardzo ważne, ponieważ zamierzamy animować linie i powinny one przesuwać się w poziomie. W panelu Effect wybierz dla parametry przezroczystości symbolu linessymbol 0%. Teraz uzupełnij ruch pomiędzy dwoma ujęciami kluczowymi. Podczas testowania linie zanikną na ekranie od lewej strony. 8. Zaznacz warstwę clock i wstaw ujęcia kluczowe w ujęciu 30 i 40. Zaznacz ujęcie kluczowe w ujęciu 20 i wybierz dla parametru przeźroczystości symbolu clocksymbol wartość 0%. W ujęciu kluczowym 30 w menu Advanced wpisz wartości przedstawione na poniższym rysunku:
Rozdział 7-188
Możesz również wypróbować inne wartości, lecz pamiętaj aby zastosować niską wartość parametru przeźroczystości Alpha, aby obrazek nadal zanikał powoli. Poprzez eksperymentowanie z zaawansowanymi parametrami koloru i łączenie ich z różnymi poziomami przezroczystości możesz uzyskać wiele interesujących efektów: obrazków zanikających ze środka na zewnątrz, lub od krawędzi do środka. Uzupełnij ruch pomiędzy ujęciami 20 i 30, a także 30 i 40. Teraz podczas sceny zwróć uwagę na sposób pojawiania się i zanikania zegara. 9. Zaznacz warstwę woman i wstaw ujęcia kluczowe w ujęciach 40 i 50. Wybierz wartość parametru przezroczystości dla symbolu womansymbol wynoszącą 0% w ujęciu 30, a w ujęciu 40 zastosuj poniższe ustawienia z menu Avanced, pozostawiając pozostałe parametry bez zmian: Green = 78% Blue = -100% Alpha = 74% W ujęciu 50 ponownie przejdź do menu Advanced i w kolumnie Alpha umieszczonej po prawej stronie menu wpisz wartość -255. Na koniec uzupełnij ruch pomiędzy wszystkimi ujęciami kluczowymi na warstwie woman. Twoja listwa czasowa powinna wyglądać jak na poniższym rysunku:
10. Aby animacja zatrzymała się po ukończeniu kolażu w ujęciu 70 w warstwie actions2 dodaj akcję stop. Teraz przetestuj film i obejrzyj ukończoną animację.
Optymalizacja rozmiaru pliku animacji Podczas przygotowywania animacji do publikacji należy wybrać rozmiar pliku dla każdego składnika kolażu, określając równowagę pomiędzy jakością obrazka i zajmowanym przez niego obszarem. Możesz obejrzeć rozmiar składników poprzez przetestowanie filmu i otwarcie okna Output (Window|Output) podczas oglądania animacji:
2
Przyp. Red. W pliku collage.fla na płycie cd warstwa „actions” nazywa się „scripts”.
Rozdział 7-189
Wcześniej przypisaliśmy wszystkim obrazkom map bitowych domyślną jakość o wartości 30, lecz co się stanie, jeśli, na przykład, nie spodoba ci się w twoim kolażu jakość obrazka przedstawiającego kobietę. Możesz wówczas zwiększyć jakość w następujący sposób: Optymalizacja jakości obrazka
1. Dwukrotnie kliknij na mapie bitowej woman.png w panelu Library. Wówczas wyświetlone zostanie okno dialogowe Bitmap Properties. Cofnij zaznaczenie pola wyboru Use document default quality i w wywołanym polu Quality wpisz wartość 40.
Chociaż na podstawie komunikatów wyświetlanych we Flashu możesz pomyśleć, że redukujesz jakość obrazka z 50, w rzeczywistości zwiększasz ją z domyślnego ustawienia o wartości 30. Ta zmiana nie wpłynie na wygląd pliku podczas edycji, a tylko opublikowaną wersję. Po zwiększeniu rozmiaru pliku jednego elementu animacji musisz zmniejszyć jakość mniej istotnej części projektu. W tym ćwiczeniu można zmniejszyć jakość obrazka zegara, gdyż umieszczony jest on w tle i pogorszenie jakości może nadać mu nawet bardziej starszy wygląd. 2. Dwukrotnie kliknij na pliku clock.png w bibliotece i ustaw jego jakość (Quality) na 15, przywracając równowagę po wcześniejszym zwiększeniu rozmiaru pliku. Teraz opublikuj film i przeglądnij go w przeglądarce. 3. Podczas odtwarzania filmu zastosuj polecenie File|Open i, z tego samego katalogu, w którym umieszczony jest Flash, otwórz plik tekstowy collage Report.txt. Przeglądając ten plik znajdziesz w nim dokładny zapis rozmiaru pliku wszystkich elementów znajdujących się w bibliotece. Plik ten może pomóc ci w zmniejszeniu całościowego pliku filmu poprzez znalezienie tych elementów biblioteki, których rozmiary plików wymagają zmniejszenia.
Rozdział 7-190
Zanim zamkniemy tą część rozdziału, na zakończenie przedstawimy jeszcze kilka końcowych myśli o animacji map bitowych we Flashu przy pomocy omówionej tutaj techniki. Podczas zmiany wartości kolorów map bitowych pamięta, że im większa jest mapa bitowa, tym bardziej przeciążony jest procesor do wykonania wybranego efektu. Nie wszyscy dysponują najnowszymi komputerami multimedialnymi, więc podczas tworzenia animacji obejrzyj ja na innych komputerach z mniejszą ilością pamięci i wolniejszym zestawem układów, niż twój. Warto abyś ty, lub twój klient określił minimalne wymagania sprzętowe dla filmu Flasha, aby zapewnić sukces dla twojego projektu. Jeśli twój film odtwarzany jest zbyt wolno na komputerze testującym, spróbuj zastosować poniższe poprawki: • zmniejsz przestrzeń pomiędzy ujęciami kluczowymi i zmniejsz prędkość odtwarzania filmu; • zmniejsz wysokość i szerokość oryginalnych map bitowych, a następnie aktualizuj wersje, które importujesz do Flasha; • unikaj uzupełniania ruchu dla zbyt wielu obiektów na scenie jednocześnie; • osadź film Flasha w pliku HTML podając wielkość w pikselach, a nie w procentach, aby nie można było filmu zeskalować do większego rozmiaru.
Zawansowana animacja map bitowych We Flashu można wykonać bardzo złożoną animację przy stosunkowo niewielkim nakładzie pracy. Na przykład, poprzez powielenie pętli prostej animacji możesz wykonać animacje sprawiające wrażenie złożonych. W tej ostatniej części rozdziału zajmiemy się właśnie tą techniką. Przekształcanie map bitowych w klipy filmowe
1. Utwórz nowy film we Flashu, nazwij go animation.fla i importuj do niego plik clock.png z foldera roughs. Teraz przekształć mapę bitową w symbol graficzny, podobnie jak w poprzednim ćwiczeniu, i nazwij go clocksymbol. 2. Utwórz nowy symbol klipu filmowego o nawie clockmovie. Przeciągnij symbol clocksymbol z biblioteki do pierwszego ujęcia w klipie filmowym i wyśrodkuj go przy pomocy panelu Info. W ujęciu 15 wstaw ujecie kluczowe i z zaznaczonym tym ujęciem wywołaj panel Effect. Przejdź do menu Advanced i w prawej kolumnie parametru przeźroczystości Alpha wpisz wartość -255. Uzupełnij ruch pomiędzy dwoma ujęciami kluczowymi.
Rozdział 7-191
Podczas odtwarzania tej animacji zegar powinien zaniknąć od krawędzi do środka, a następnie do białego koloru. 3. Utwórz drugi symbol klipu filmowego i nazwij go clockmovie2. Wewnątrz tego klipu filmowego utwórz dwie nowe warstwy, a następnie wszystkim trzem warstwom klipu filmowego nadaj długość 45 ujęć. Umieść pierwszy klip filmowy, clockmovie, w ujęciu 1 w warstwie 1 i wyśrodkuj go. 4. Na warstwie 2 utwórz ujęcie kluczowe w ujęciu 10 i umieść kolejną kopię klipu filmowego clockmovie w środku. Obróć ten klon na bok przy pomocy polecenia Modify|Transform|Scale and Rotate wpisując w pole Rotate wartość 90. 5. Na warstwie 3 w ujęciu 20 wstaw ujęcie kluczowe i przeciągnij kolejny klon klipu filmowego clockmovie na środek ujęcia. Obróć tą kopię o 60 stopni. Ostateczna wersja listwy czasowej dla tego klipu filmowego wygląda następująco:
6. Przeciągnij kopię ukończonego klipu filmowego clockmovie2 na główną scenę i wyśrodkuj ją przy pomocy panelu Info. Nadaj domyślnej warstwie długość 30 ujęć, a następnie utwórz drugą warstwę. Na warstwie 2 wstaw ujęcie kluczowe w ujęciu 15 i w tym ujęciu wyśrodkuj kolejny klon klipu filmowego clockmovie2. Obróć go o 90 stopni, a w panelu Effect dla parametru przeźroczystości Alpha podaj wartość 50%:
Rozdział 7-192
7. Teraz opublikuj film i obejrzyj go w przeglądarce. W tym ćwiczeniu zastosowaliśmy mapy bitowe do utworzenia interesującego i rzadko spotykanego efektu wizualnego. Zaczynając od prostego zaniknięcia, nakładając warstwy tego samego obiektu powstał dosyć złożony i najwyraźniej przypadkowy efekt. Mechanizm zegara wygląda, jakby eksplodował ze środka ekranu, a następnie zanikał. Tą technikę można stosować z powodzeniem zwłaszcza do tworzenia takich efektów jak eksplozje czy krople deszczu. Możesz nawet uzyskać wzory sprawiające wrażenie fraktali. Mamy nadzieję, że udało nam się udowodnić w tym rozdziale, że animacja map bitowych we Flashu dodaj głębi do twoich projektów. Poprzez połączenie animacji wektorowej z bogatą kompozycją rastrową otworzysz nowe drzwi twojej twórczości i eksperymentów. We Flashu zaawansowane opcje koloru i parametr przeźroczystości można stosować do tworzenia wielu różnorodnych animacji, zawierających rozpuszczające się elementy, łączenia i zmiany koloru. Główną rzeczą do zapamiętania podczas odkrywania tych nowych technik, oczywiście, jest kontrolowanie rozmiaru pliku. Wielu użytkowników rezygnuje z zastosowania efektów map bitowych właśnie ze względu na duże rozmiary plików i długi czas pobierania, lecz jeśli będziesz w stanie kontrolować ilość pochłanianej przez pliki pamięci, będzie mógł tworzyć użyteczną i wyróżniającą się animację dla twojej witryny internetowej.
Rozdział 7-193
Rozdział 8 Maskowanie i efekty tekstowe Zawartość witryny wykonana we Flashu charakteryzuje się odświeżającym ruchem, głębią i bogatymi efektami wizualnymi. Możliwość dodawania animacji przystosowanej do różnych prędkości połączeń do statycznej strony internetowej jest elementem przyciągającym użytkowników do stosowania Flasha jako narzędzia, a techniki pozwalające na maksymalizację wizualnego wyglądu filmów są różnorodne. W tym rozdziale zajmiemy się zastosowaniem masek i tekstu we Flashu w celu uzyskania różnorodnych animowanych efektów. Celem tego rozdziału nie jest umożliwienie ci kopiowania określonej zawartości przedstawionej w ćwiczeniach, lecz wzbogacenie twojego zestawu narzędzi o nowe techniki, dzięki czemu będziesz mógł korzystać z własnej inspiracji i tworzyć własne efekty. Rozpocznijmy od paru słów o warstwach we Flashu.
Warstwy We Flashu możesz utworzyć tyle warstw ile chcesz, nazwać je jak chcesz i rozmieścić je jak wolisz. Prawdę mówiąc, z punktu widzenia programisty, warstwy we Flashu jako składniki filmu są doskonale niewidoczne: oznacza to, że nie można zastosować nazwy warstwy, ani żadnej zmiennej warstwy ani właściwości, aby odnieść się do klipu filmowego znajdującego się na danej warstwie. Nie możesz również zmienić kolejności warstw w biegu. To może zdezorientować nowicjuszy Flasha, zwłaszcza jeśli wcześniej stosowali program Director. W aplikacji tej na warstwie możesz umieścić tylko jeden „obiekt” i możesz odnosić się do tych obiektów stosując w tym celu nazwę warstwy. We Flashu warstwy funkcjonują podobnie jak w aplikacjach graficznych typu Illustrator. Na jednej warstwie możesz umieścić dowolną liczbę elementów i nie jesteś ograniczony tylko do jednego „obiektu”. Warstwy we Flashu nie zostały zaprojektowane z myślą o manipulacji programowej, lecz w celu ułatwienia organizacji twojej pracy. Tworzenie dużego filmu Flasha lub bardzo skomplikowanego efektu może spowodować bałagan. Zastosowanie odpowiednio nazwanych warstw do organizacji pracy ułatwi ci życie w trakcie tworzenia filmu. Podczas pracy nad nowym filmem stosuję własny schemat tworzenia warstw: najpierw tworzę warstwę tła (Background), aby umieścić na niej wszystkie obrazki drugoplanowe. Górne dwie warstwy w większych filmach zawsze przeznaczone są na etykiety, stąd ich nazwa — Labels (ang. etykiety), a na końcu warstwę Actions przeznaczoną na kod ActionScript. Wiele projektantów tworzących we Flashu przyzna, że podzielenie zawartości w ten sposób znacznie ułatwia pracę i poprawianie filmu. Uważne stosowanie warstw jest niezbędnym elementem do utworzenia skomplikowanych efektów maskowania, dlatego też pierwszą część rozdziału poświęcimy zastosowaniem warstw w połączeniu z maskami.
Rozdział 8-194
Podstawy maskowania Maska jest to specjalna warstwa we Flashu tworząca „dziurę”, przez którą widoczne są jedna lub więcej zgrupowanych warstw umieszczonych poniżej maski. Warstwy maski i warstwy zgrupowane pod nimi można obsługiwać tak samo jak każdą inną warstwę, w taki sensie, że możesz umieścić na nich dowolną zawartość i manipulować nią przy pomocy uzupełniania ruchu, lub stosując kod ActionScript. Maskowanie jest dosyć proste: jeśli na warstwie maski znajduje się jakaś zawartość, zawartość warstw znajdujących się pod warstwą maski będzie widoczna jak tylko znajdzie się pod zawartością warstwy maski:
Na tym rysunku warstwa maski jest pusta, oprócz wypełnionego prostokąta w środku, a na warstwie zamaskowanej umieściliśmy kółko. Gdy kółko znajduje się pod prostokątem, staje się ono widoczne. Zawartość narysowana na warstwie maski otwiera okno na warstwę poniżej. Błędne jest przekonanie, że ustawienia koloru lub parametru przezroczystości obiektów na warstwie maski mają wpływ na stopień zamaskowania zawartości poniżej — to nie jest prawda! Maskowanie we Flashu działa zgodnie z zasadą „wszystko albo nic”. Nawet zupełnie przezroczyste wypełnienie umieszczone na warstwie maski ukaże warstwy umieszczone poniżej. W celu upewnienia się, że podstawowa wiedza wszystkich czytelników o maskach jest na tym samym poziomie, szybko powtórzymy sposób tworzenia standardowej maski, zanim przejdziemy do utworzenia bardziej interesujących efektów maski. Prosta maska
1. Utwórz we Flashu mowy film z dwoma warstwami. Górna warstwę nazwij mask, a dolną masked (ang. maska, zamaskowana).
Rozdział 8-195
2. Na warstwie Mask narysuj prostokąt, a na warstwie Masked kółko. Wyśrodkuj je mniej więcej tak:
Zanim nie ukończymy pracy nad filmem nic na warstwie Mask nie będzie widoczne, więc nie obawiaj się zastosować jasne kolory, aby uwidocznić zawartość maskującą. Nawet zachęcamy do zastosowania wyróżniającego się, jasnego koloru na warstwach maski, gdyż ułatwi ci to odróżnienie różnych rodzajów zawartości podczas przeglądania filmów w przyszłości. 3. Zaznacz warstwę Mask i przekształć ją w maskę stosując w tym celu polecenie Modify|Layer, aby uzyskać dostęp do okna dialogowego Layer Properties, w którym zaznaczysz opcję Mask:
4. Możesz również kliknąć prawym przyciskiem myszy na nazwie warstwy (dla Macintosha Ctrl+kliknięcie) i z menu wybrać pozycję Mask. 5. Teraz w oknie dialogowym Layer Properties zmień ustawienia dla warstwy Masked wybierając opcję Masked:
Ikony na liście warstw powinny się zmienić, aby wskazać, że warstwy przekształciły się teraz odpowiednio w warstwę maski i warstwę zamaskowaną.
Rozdział 8-196
Nadal jednak na obrazkach nie będzie widać różnicy. Dzieje się tak, ponieważ efektu maskowania nie można obejrzeć w środowisku projektowania we Flashu zanim nie zablokujesz wszystkich warstw zastosowanych do tego efektu. Aby obejrzeć prosty efekt maski zablokuj obydwie warstwy...
...lub przetestuj film. Jak widać, kwadrat w oknie maski działa jak okno na kółko poniżej: na obszarze „szyby” okna widzimy zawartość warstwy umieszczonej pod spodem, lecz reszta warstwy Masked pozostaje ukryta. Tyle, jeśli chodzi o prostą maskę. Przyjrzyjmy się teraz bardziej interesującym animowanym efektom maski.
Animowanie masek Jednym z najprostszych sposób na wykorzystanie w większym stopniu efektu maski jest użycie animowanej maski. Jak już powiedzieliśmy, warstwa maski jest podobna do normalnej maski, co oznacza, że posiada listwę czasową, na której możesz umieszczać ujęcia kluczowe, uzupełnianie ruchu i nawet kod ActionScript. Uzupełnienia ruchu w szczególności mogą pomóc w tworzeniu interesujących efektów maskowania, jak się o tym zaraz przekonamy...
Rozdział 8-197
Zamaskowany tekst Wyobraź sobie, że chcesz zaprojektować duży napis składający się z liter wypełnionych obrazkiem. Bardzo łatwo można by było zastosować maskę zawierającą tekst nad zamaskowaną warstwą zawierającą obrazek, powiedzmy kilka wektorowych chmur:
Skoro już na zamaskowanej warstwie znajdują się chmury, możesz je animować, aby płynęły za warstwą maski. Powstaje w ten sposób o wiele bardziej interesujący efekt, którego prawdopodobnie nie dałoby się uzyskać bez zastosowania masek. Maskowane animowane chmury
1. W nowym filmie umieść trzy warstwy o nazwach clouds, mask i outline:
2. Na warstwie maski napisz jakiś duży tekst dużą czcionką. Gdy już zadowolony będziesz z wyglądu tekstu, rozbij go:
3. Zaznacz tekst i skopiuj go, a następnie wklej specjalnie (Paste in Place) na warstwie outline. Skoro zamierzamy animować unoszące się (i widoczne) chmury za tekstem, litery nie powinny być wypełnione. Jednakże, chcemy również aby tekst był czytelny, dlatego też kontury tekstu powinny być widoczne cały czas. Aby usatysfakcjonować obydwa cele, przekształcimy wklejony tekst w kontury i umieścimy je na górze maski by lepiej definiowały tekst.
Rozdział 8-198
4. Z zaznaczonym tekstem na warstwie outline zastosuj polecenie Modify|Shape|Soften fill edges i w oknie dialogowym Soften Edges w polu Distance wpisz wartość odległości wynoszącą około 10 pikseli i zaznacz opcję Expand:
W ten sposób powstanie widoczny kontur: 5. Teraz przejdź do każdej litery z osobna i zaznacz jej wewnętrzne wypełnienie. W panelu Mixer zmniejsz wartość kanału alfa do około 10% (zapewne chcesz ukryć warstwę mask aby dobrze widzieć zmiany). 6. W ten sposób z liter powinien pozostać kontur o wyraźnych krawędziach i delikatne wypełnienie. Jeśli wolisz możesz po prostu usunąć wypełnienia. Jeśli zastosowałeś polecenie Soften fill edges i parametr przeźroczystości o wartości 10% twój obrazek powinien wyglądać mniej więcej jak poniższy:
A teraz chmury... 7. Na warstwie clouds zastosuj narzędzia do rysowania do wykonania prostej ręczne narysowanej chmurki. Gdy już wykonasz rysunek cloud, zgrupuj go. Utwórz tyle chmur ile chcesz umieszczając każdą z nich na oddzielnej warstwie i zapewniając, że każda warstwa cloud znajduje się pod warstwą maski:
Rozdział 8-199
8. Zastosuj warstwy chmur i uzupełnianie ruchu do przygotowania animacji chmur pływających za obszarem tekstu. Poeksperymentuj, aby uzyskać animację płynną i ciągłą. Nie zapomnij, aby upewnić się, że warstwa maski tekstu i warstwa konturu są na tyle rozciągnięte na listwie czasowej aby pokryć całą animację. 9. Przekształć warstwę maski w maskę, a wszystkie warstwy chmur w warstwy zamaskowane (opcja Masked). Zablokuj warstwę Mask i wszystkie zamaskowane warstwy chmur:
Podczas odtwarzania filmu powinieneś zobaczyć chmury przepływające przez twój tekst:
Efekt reflektora Popularnym efektem tworzonym przy pomocy automatycznie animowanej warstwy maski jest efekt reflektora. W tym efekcie warstwa tła zostaje zamaskowana przez warstwę zawierającą mały obrazek koła. Kółko jest wówczas animowane przy pomocy prostego uzupełniania ruchu, aby poruszało się w przód i w tył, jak reflektor. W połączeniu z czarnym tłem powstaje
Rozdział 8-200
w ten sposób złudzenie „światła” oświecającego inną zawartość. Niestety nie można połączyć efektu maskowania z warstwą ścieżki ruchu, dlatego też zastosowanie ścieżki ruchu w celu pokierowania ruchem reflektora jest niemożliwe — trzeba zastosować uzupełnianie ruchu. Tworzenie reflektora
1. W nowym filmie koniecznie z czarnym tłem utwórz jakąś zawartość na pierwszej warstwie. Jak widać na poniższym rysunku, ja zastosowałem tekst:
They’ve got me covered! — nakryli mnie! 2. Utwórz nową warstwę pod warstwą z zawartością content (moją nazwałem spotlight — reflektor) i narysuj kółko. Zgrupuj je abyś mógł na nim zastosować uzupełnianie ruchu:
3. Animuj kółko poruszające się w poprzek ekranu poprzez dodanie ujęcia kluczowe w ujęcie 30 i zastosowanie uzupełniania ruchu. Na warstwie content dodaj ujęcia aby jej długość równała się długości uzupełnienia ruchu:
4. Przekształć warstwę spotlight w maskę, a warstwę content w zamaskowaną warstwę (opcja Masked). Jeśli przesuniesz wskaźnik odtwarzania wzdłuż listwy czasowej lub
Rozdział 8-201
odtworzysz film, zobaczysz kółko odsłaniające umieszczony poniżej tekst podczas przesuwania się po ekranie.
5. Ten reflektor nie wygląda jednak zbyt realistycznie, lecz już wiesz o co chodzi. Za chwilę utworzymy lepszy. Bardziej przekonywujący reflektor
Problem z maskami jest taki, że nie da się zmienić stopnia ich przeźroczystości — albo są włączone, albo nie. A byłoby tak pięknie, gdybyśmy mogli na przykład nadać krawędzi kółka bardziej delikatny wygląd dla naszego efektu reflektora, gdyż na razie są one dosyć ostre. Nie ma na to żadnego rozwiązania, poza siedzeniem i marzeniem, aby Flash 6 dysponował możliwościami maskowania dostępnymi w Photoshopie. Jedną prostą metodą byłoby umieszczenie szarego tła pod warstwą content i przekształcić tą warstwę również w warstwę zamaskowaną:
Podczas odtwarzania filmu uzyskasz lepszy efekt, gdyż wówczas tło będzie wyglądać, jakby również było „podświetlone” tak samo jak tekst:
We Flashu często można łączyć różne efekty w celu realizacji twoich zamiarów projektanckich. Na przykład, aby dodać miększą krawędź do reflektora możesz wykorzystać utworzony już efekt i utworzyć dodatkową warstwę aby zmiękczyć krawędź kółka. Na tej Rozdział 8-202
warstwie należy umieścić drugie kółko, które będziemy mogli animować na górze warstwy maski — coś w rodzaju konturu tekstu w efekcie z chmurami z poprzedniego ćwiczenia. Drugie kółko można wypełnić gradientem radialnym przechodzącym z koloru tła na zewnątrz do przezroczystości w środku, podając odpowiednią wartość dla parametru przezroczystości, dla stonowania efektu:
Zastosuj cień na animacji maski, a otrzymasz efekt miękkich krawędzi. Możesz poeksperymentować z kolorowymi gradientami również w poszukiwaniu efektu „psychodelicznego gangsterskiego kina z lat 30.” efektu. Możesz zastosować w tym kontekście gradient radialny Flasha i efekt będzie zadowalający, lecz jeśli jesteś w stanie zgodzić się na zwiększenie rozmiaru pliku w zamian za bardziej „naturalnie” wyglądający efekt, zachęcam przejście do Photoshopa i utworzenia obrazka „miękkiego kółka” w formacie mapy bitowej. W Photoshopie (lub twoim ulubionym programie do tworzenia obrazków) narysuj kółko o takim samym rozmiarze jako maska kółka i wypełnij je gradientem składającym się z koloru tła filmu na zewnątrz i zupełnie przezroczystego środka. Podczas tworzenia przezroczystej części naturalną tendencją jest zastosowanie gradientu przechodzącego z koloru czarnego w biały i przekształcenie obszaru białego w przezroczysty. Jednakże w efekcie pozostanie białe halo w środku, więc należy wybrać jako kolor przezroczysty taki sam kolor jak kolor tła w filmie Flasha — innymi słowy, należy zastosować gradient przechodzący z czarnego koloru w czarny. Eksportuj kółko gradientowe do pliku w formacie PNG24 z nietkniętą przezroczystością. Importuj obrazek do Flasha, umieść go na oddzielnej warstwie i animuj go w synchronizacji z oryginalnym kółkiem reflektora. Możesz zwiększyć jego rozmiar o jeden lub dwa procent, aby w pełni pokryć krawędzie, lecz powinieneś już uzyskać całkiem realistycznie wyglądający reflektor.
Efekt koła kolorów Zarówno jak jednolite lub gradientowe wypełnienia, dla prostego kształtu możesz również zastosować jako wypełnienie złożoną animację. Przykładowym zastosowanie tej techniki jest efekt „zmiany kolorów”, którym możesz wypełnić tekst — za chwilę zajmiemy się właśnie tą metodą. Wypełnienie tekstu o zmieniających się kolorach
1. Utwórz warstwę tekstową w nowym filmie i wpisz jakiś tekst bardzo dużą czcionką:
Rozdział 8-203
Color wheel — koło kolorów 2. Dodaj nową warstwę i narysuj kółko o średnicy dwukrotnie większej od bloku tekstowego:
4. ...i nadaj kolorom różne stopnie przezroczystości przy pomocy paneli Mixer i Fill — kliknij na poszczególne plamki farby w gradiencie i zmień ich poziom przezroczystości (warto najpierw zapisać gradient aby uniknąć nadpisania domyślnych gradientów Flasha): MULTICOLOR, VARIABLE TRANSPARENCY GRADIENT (WIELOKOLORO WY GRADIENT O ZMIENNEJ PRZEZROCZYST OŚCI) 5. Teraz tak umieść kółko aby jego prawa połowa całkowicie pokryła blok tekstowy:
Rozdział 8-204
6. Zgrupuj kółko aby można było zastosować na nim uzupełnianie ruchu. Na warstwie kółka dodaj ujęcie kluczowe w ujęciu 50 i utwórz uzupełnianie ruchu, wprowadzający w panelu Frame wartość 1 dla kierunku uzupełniania ruchu zgodnego z ruchem wskazówek zegara (nie zapomnij nadać długość warstwie taką samą, jaka ma warstwa kółka).
7. W ujęciu 50 otwórz okno dialogowe Frame Actions i dodaj instrukcję gotoAndPlay (1). 8. Teraz utwórz podobne animowane kółko na drugiej warstwie, lecz tym razem umieść punkt środkowy kółka po przeciwnej stronie tekstu i ustaw dla niego uzupełnianie ruchu w kierunku przeciwnym do ruchu wskazówek zegara:
Rozdział 8-205
TWO MULTICOLOR, ROTATING GRADIENTS (DWA WIELOKOLORO WE OBRACAJACE SIĘ GRADIENTY)
Przy pomocy tej techniki kolory kółek złożą się na kolor tekstu, który będzie się bezustannie zmieniać. 9. Przekształć warstwę tekstu w maskę, a pozostałe dwie warstwy w warstwy zamaskowane:
10. Odtwórz film i przyjrzy się uzyskanemu efektowi. COLOR WHEEL IN MOTION (KOŁO KOLORÓW W RUCHU) Delikatność efektu zależy od różnicy w kolorach i wybranego stopnia przezroczystości, a także prędkości animacji. Wypróbuj ten efekt z zastosowaniem innych kolorów, lub wzorów — dwa wzory paskowe świetnie razem wyglądają.
Maski i ActionScript Do tej pory wszystkie elementy umieszczaliśmy za maskami, a animowane obiekty za maskami tworzą naprawdę świetne efekty. Lecz może to również oznaczać wiele pracy. Na przykład nasz efekt z chmurami wyglądał całkiem nieźle, lecz jeśli chcesz, aby ruch chmur był naprawdę naturalny i nie powtarzający się, musiałbyś spędzić wiele czasu na dopracowaniu animacji. Na szczęście dla nas, można kontrolować obiekty na zamaskowanych warstwach przy pomocy kodu ActionScript — i tym właśnie się teraz zajmiemy. Efekty powielenia: efekt bąbelków
W tym ćwiczeniu chcemy utworzyć tekst z bąbelkami wznoszącymi się w tle, aby powstał efekt podobny do patrzenia w akwarium. Przygotowaliśmy tekst w taki sam sposób jak dla
Rozdział 8-206
filmu z chmurami, z konturem i warstwami maski. Jednakże, zamiast zastosowania warstwy z automatycznie animowanymi chmurami, utworzymy klip filmowy zawierający wznoszące się bąbelki w przypadkowej kolejności. 1. Rozpocznij od przygotowania maski tekstu i warstw konturów, tak jak w filmie z chmurami, umieszczając tekst mniej więcej na środku sceny. Zastosowanie niebieskich barw nada obrazkowi bardzo wodny wygląd:
Teraz wykonamy klip filmowy, który będzie generować bąbelki. 2. Utwórz nowy klip filmowy o nazwie bubble. 3. W klipie filmowym narysuj bąbelek. Możesz przejść do Photoshopa, aby narysować realistyczny bąbelek, lub, jeśli wolisz wygląd z kreskówek, narysuj kółko we Flashu. Ja narysowałem niebieski bąbelek o białym konturze i konwencjonalnymi kreskami podświetlenia:
4. Utwórz kolejny klip filmowy i nazwij go manyBubbles. Umieść w nim warstwę o nazwie actions i wstaw w niej trzy ujęcia kluczowe. W pierwszym ujęciu kluczowym umieścimy skrypt inicjujący, w drugim kod do tworzenia bąbelków, a w trzecim pętle do drugiego ujęcia kluczowego, aby bąbelki były widoczne przez cały czas. W pierwszym ujęciu kluczowym musimy zatem zdefiniować kilka zmiennych, które umożliwią zadziałanie bąbelków. Wpisz poniższy kod: ba=new Array(); howmany=0; counter=20; rate=4.0;
Najpierw potrzebujemy tablicę, w której będziemy przechowywać reprezentację wszystkich bąbelków. Jeśli nadal nie zaznajomiłeś się z terminem tablica, wyobraź ją sobie jako listę. Zawiera ona określoną liczbę pozycji, do których możesz uzyskać Rozdział 8-207
dostęp podając nazwę listy z następującą po niej liczbą danej pozycji podaną w kwadratowych nawiasach. Zatem do dziesiątej pozycji listy testArray uzyskasz dostęp poprzez instrukcję testarray[10]. Instrukcja ba=new Array tworzy nową tablice o nazwie ba. Na szczęście dla nas, Flash 5 posiada wbudowany obiekt Array, na którym możemy oprzeć nasze tablice. Instrukcja ba=new Array() oznacza, że Flash zastosuje swój ogólny obiekt Array jako szablonu do utworzenia podanej instrukcji i tablicy o nazwie ba. Zatem tablica ba automatycznie uzyska wszystkie cechy charakterystyczne tablicy, jakie potrzebujemy. Tablicy tej powinny towarzyszyć dwa liczniki: pierwszy, o nazwie howmany, będzie rejestrować liczbę bąbelków i jako wartość wstępną przypisaliśmy my 0; drugiego, zmienną o nazwie counter, zastosujemy do rozmieszczenia bąbelków — przypisaliśmy mu stosunkowo dużą wartość wstępną. W naszym ćwiczeniu wartość 20 dla tej zmiennej jest zupełnie wystarczająca, lecz możesz zmienić ją, po zakończeniu pracy nad filmem. Ponadto zdefiniowaliśmy również zmienną o nazwie rate, która będzie odpowiadać za prędkość generowania bąbelków. 5. Upewnij się, że wpisałeś podany skrypt w pierwszym ujęciu kluczowym na warstwie actions w klipie filmowym manybubbles:
6. W następnym ujęciu kluczowym na warstwie actions w ujęciu 2 dodaj skrypt tworzący bąbelki. Przyznaję, skrypt może wyglądać dosyć paskudnie dla niewtajemniczonych. Poniżej przedstawiliśmy go w całości (możesz sprawdzić go również w pliku Bubbles.fla): if (counter>=20) { howmany++; duplicateMovieClip (bubble, “bubble”+howmany, howmany); ba[howmany] = this[“bubble”+howmany]; ba[howmany]._x = random(600)-300; ba[howmany]._y = 100; ba[howmany].rate = random(3)+1; ba[howmany]._xscale = random(90)+10; ba[howmany]._yscale = ba[howmany]._xscale; counter = 0; } else { counter++; } for (i=0; i
Rozdział 8-208
Jest trochę przydługawy, więc zajmiemy się teraz wyjaśnieniem jego działania. Jak już wspomnieliśmy, nie powinieneś powielać tych ćwiczeń w swoich projektach, lecz dzięki nim dostrzeżesz nowe możliwości i techniki, jakie możesz zastosować. Skrypt podzielony jest na dwie główne sekcje. Pierwsza część (pętla if ... else) tworzy nowe bąbelki, a drugi segment animuje istniejące już bąbelki. Najpierw należy określić liczbę bąbelków, jak powinna być wytwarzana. Do tego celu potrzebujemy zmienną counter definiowaną w pierwszym ujęciu. Zamierzamy zwiększyć jej wartość przy każdym kolejnym odtworzeniu pętli, a nowy bąbelek będzie generowany wówczas, gdy wartość zmiennej counter osiągnie liczbę 20 — w innym przypadku generowalibyśmy myjnie samochodową pełną bąbelków. Oczywiście możesz mienić wartość zmiennej counter, aby produkować więcej lub mniej bąbelków. Zatem w skrypcie podajemy najpierw warunek if(counter>=20). Jeśli ten warunek jest zrealizowany przechodzimy prze pętlę if. Jeśli wartość zmiennej counter nadal jest mniejsza niż 20, omijamy pętlę i przechodzimy do instrukcji else, która zwiększa zmienną counter o 1: } else { counter++; }
Wewnątrz samej pętli if tworzymy nowy bąbelek — przy pomocy polecenia duplicateMovie clip i inicjalizujemy go: howmany++; duplicateMovieClip (bubble, “bubble”+howmany, howmany); ba[howmany] = this[“bubble”+howmany];
Jak widać zaczynamy od zwiększenia zmiennej howmany. Jak pamiętasz, zmiennej tej przypisaliśmy wstępną wartość wynoszącą 0, więc skoro teraz chcemy wygenerować pierwszy bąbelek, należy zwiększyć jej wartość o 1. Następna linijka zawiera polecenie powielenia bąbelka. Ogólna składnią jest duplicateMovie clip (klip filmowy, nowa nazwa, poziom). W tym filmie powielamy klip filmowy bubble i nadajemy mu nową nazwę. Zatem wraz z komendą duplicateMovie zdefiniowaliśmy trzy parametry: • • •
Klip filmowy = bubble Nowa nazwa = stała “bubble”, połączona z bieżącą wartością zmiennej howmany Poziom = bieżąca wartość zmiennej howmany W trzeciej linijce... ba[howmany] = this[“bubble”+howmany];
...po prostu umieszczamy klip filmowy w tablicy abyśmy mogli się do niego później odnieść.
Rozdział 8-209
Kolejnym etapem jest inicjacja nowo utworzonego bąbelka na ekranie. W tym celu należy określić jego rozmiar, pozycję na osi X i Y i prędkość poruszania się go: ba[howmany]._x = random(600)-300; ba[howmany]._y = 100; ba[howmany].rate = random(3)+1; ba[howmany]._xscale = random(90)+10; ba[howmany]._yscale = ba[howmany]._xscale;
Zauważ, że uzyskujemy dostęp do bąbelka poprzez jego wpis w tablicy ba. Zdefiniowaliśmy pozycję X w zakresie pomiędzy -300 i 300, a pozycji Y przypisaliśmy wartość 100. Zmiennej rate przypisaliśmy dowolną wartość z zakresu 10-100. Dzięki temu bąbelki będą pokazywać się w różnych miejscach, w różnym rozmiarze i będą poruszać się z różną prędkością w porównaniu z „ściśle osadzonymi w kodzie” chmurami animowanymi w poprzednim ćwiczeniu. Ostatnim etapem w instrukcji if jest wyzerowanie licznika (zmienna counter). Następnie zastosowaliśmy instrukcję else, która zwiększa wartość zmiennej counter jeśli nie tworzymy nowego bąbelka w czasie pętli przez instrukcję if. Druga część tego skryptu porusza każdym bąbelkiem po ekranie. W tym celu zastosowaliśmy pętlę for aby przejść kolejno pomiędzy bąbelkami i przenieść je w górę o określoną liczbę pikseli w oparciu o wartość ich zmiennej rate. Jeśli będziemy tworzyć nowe bąbelki bez usuwania starych spowodujemy zwolnienie animacji i w końcu zużycie pamięci. Aby tego uniknąć usuniemy każdym bąbelek gdy przeniesie się już ponad tekst. Przyjrzyj się przedstawionej poniżej pętli for: for (i=0; i
Jak widać, po prostu odtwarzamy pętlę dla każdej kopii bąbelka ponownie przy pomocy tablicy i wartości zmiennej howmany do generowania zmiennej sterującą pętlą, i. Sprawdzamy, czy pozycja y jest mniejsza niż -100, jeśli tak, usuwamy bąbelek. Jeśli nie, zwiększamy jego pozycję. Twój tekst może się różnić od mojego, więc jeśli podczas testowania filmu bąbelki nie dochodzą do góry tekstu zanim wybuchają, należy zwiększyć tą wartość. Możesz także przekształcić tekst w klip filmowy i zakodować pozycję i rozmiar klipu do obliczenia punktu wybuchu bąbelków. 7. Nadal na warstwie actions w klipie filmowy manyBubbles dodaj w trzecim ujęciu akcję gotoAndPlay(2). W ten sposób powstanie pętla powracająca do skryptu w ujęciu 2. Już prawie koniec. 8. W klipie filmowy manyBubbles utwórz nową warstwę. Przeciągnij kopię klipu filmowego bubble przygotowaną wcześniej z biblioteki na nową warstwę i umieść ją na krawędzi ekranu:
Rozdział 8-210
9. Nadaj tej kopii klipu filmowego bubble nazwę klonu bubble. Jest to bardzo ważne, gdyż do tej nazwy właśnie odnosi się powyższy skrypt, więc jeśli ominiesz ten krok bąbelek tylko będzie siedzieć w tym miejscu i nic nie robić!
10. Utwórz nową warstwę o nazwie masked. Przeciągnij na nią kopię klipu filmowego manyBubbles i umieść ją na lewo od głównej sceny:
11. Przetestuj film i powinieneś zobaczyć kilka uroczych bąbelków unoszących się na ekranie:
12. Ostatnim etapem jest przekształcenie tekstu w maskę, odtworzenie filmu i obejrzenie bąbelków pojawiających się za tekstem:
Rozdział 8-211
Zaletą tego efektu jest to, że możesz ponownie zastosować znaczną część kodu w dowolnej chwili do powielenia obiektu lub grupy obiektów i przenoszenia ich na ekranie, czy to będą bąbelki, chmury, ptaki, czy cokolwiek innego.
Efekty tekstowe Zapewne zauważyłeś, że większość efektów przedstawionych do tej pory bazuje na tekście. Jest to spowodowane tym, że w profesjonalnej pracy częściej będziesz potrzebować interesujące przejście tekstu niż efekt piorunu. W tej części rozdziału skoncentrujemy się wyłącznie na tekście.
Proste efekty tekstowe Pierwszym rodzajem efektu tekstowego, jakim zajmiemy się w tej części jest efekt traktujący kompletną linijkę tekstu jak pojedynczy obiekt. Jest to prawdopodobnie najmniej wszechstronna kategoria efektów tekstowych, ponieważ to, co możesz zrobić z jednym blokiem tekstu, ogranicza się do efektów obejmujących rysowanie na ekranie i wbudowane we Flashu narzędzia do transformacji i uzupełniania ruchu. Później przedstawimy bardzie złożone efekty uzyskane poprzez rozbicie tekstu na poszczególne litery. Zacznijmy od naszego prostego efektu tekstowego. Odbity tekst
Ten efekt odbitego tekstu imituje efekt obracającego się znaku wywieszanego często przed stacjami benzynowymi czy sklepami. Znaki te na każdej ze stron zapisane miały inną informację i gdy wiał wiatr znak się obracał, pobrzękując, a ty byłeś zachwycony widząc co chwila inną informację. I wówczas mógł przetoczyć się przez zakurzoną drogę krzak, a Ry Cooder uderzył w struny gitary. We Flashu możemy zastosować kilka bardzo prostych transformacji przekrzywiania aby nadać tekstowi „dwu i pół wymiarowy” wygląd:
Obejrzyj plik FlippingText.fla z płyty CD-ROM, aby zobaczyć efekt w akcji. Rozdział 8-212
A oto jak się go tworzy. 1. Rozpocznij od utworzenia dwóch klipów filmowych w nowym filmie, z których każdy będzie zawierać pojedyncze statyczne pole tekstowe. W każde pole wpisz wyraz dużą czcionką. 2. Na głównej listwie filmu utwórz oddzielną warstwę dla każdego klipu filmowego wyrazu. Do wykonania tego efektu zastosujemy poziome przekrzywienie. Film rozpoczyna się wyświetleniem pierwszego wyrazu, który przekrzywia się aż stanie się zupełnie niewidoczny — wyobraź sobie prostokątny tekst przekształcający się i spłaszczający aż do linii. Gdy już pierwszy wyraz stanie się niewidoczny drugi wyraz przekrzywia się z linii do prostokątnego tekstu. 3. Na pierwszej warstwie w ujęciu 10 wstaw ujęcie kluczowe i przeciągnij klip filmowy dla wyrazu, który ma pojawić się jako drugi, z biblioteki na scenę. W ujęciach 24 i 36 również umieść ujęcia kluczowe. 4. W ujęciu 10 zaznacz tekst i w panelu Transform ustaw poziome przekrzywienie (Horizontal Skew) na -90. W drugim ujęciu kluczowym ustaw poziome przekrzywienie na 0, a w trzecim na 90. 5. Na drugiej warstwie przeciągnij klip filmowy wyrazu, które ma pokazać się jako pierwsze z biblioteki na scenę w ujęciu 1, a następnie wstaw ujęcia kluczowe w ujecie 12, 34 i 48. W razie potrzeby zastosuj panel Info, aby upewnić się, że obydwa wyrazy są wyrównane. Ja umieściłem moje wyrazy na środku sceny. 6. W ujęciach kluczowych 12, 34 i 48 ustaw poziome przekrzywienie odpowiednio na 90, -90 i 0. 7. Teraz przekształć dwa główne przejścia na każdej warstwie w automatyczną animację — powinna ona zostać zastosowana w pomiędzy ujęciami 10 i 24 oraz 24 i 36 na pierwszej warstwie i pomiędzy ujęciami 1 i 12 oraz 34 i 48 na drugiej warstwie. Odtwórz film i zobaczysz dwa wyrazy odbite. Możesz spróbować wprowadzić do tego efektu kilka zmian. Efekt jest szczególnie interesujący gdy dla każdego klipu filmowego zastosujesz ten sam wyraz, lecz w różnych kolorach. Wówczas, po zastosowaniu wartości przekrzywienia 180 i -180 na drugim wyrazie stworzysz wrażenie, jakby został on odwrócony do góry nogami, ulepszając pomysł ze starym znakiem z informacjami po obu stronach... A teraz kolejny przykład — rozmyty tekst. Rozmyty tekst
Na kilka sposobów można utworzyć obiekty, które będą tracić i odzyskiwać swoją ostrość, co w efekcie może dać czarujących efektów. Najprostszą metoda jak na razie jest utworzenie kopii tekstu i zastosowanie opcji z menu polecenia Softer Fill Edges do rozmycia jej. Wówczas kopia ta zanika, aby stworzyć wrażenie rozmycia, lub pojawia się aby stworzyć wrażenie odzyskiwania ostrości. Spróbujmy utworzyć taki efekt. 1. W nowy filmie napisz jakiś tekst na pierwszej warstwie — cokolwiek od jednego wyrazu do krótkiego zdania. Następnie rozbij tekst i dwukrotnie skopiuj warstwę. 2. Dodaj puste ujęcie na dolnej warstwie w pobliżu ujęcia 30, a następnie zablokuj i ukryj warstwę, abyś mógł łatwiej zmodyfikować dwie górne warstwy. 3. Rozpocznij od środkowej warstwy. Możesz ukryć górną warstwę, abyś przypadkowo niczego na niej nie zaznaczył. Zaznacz wszystko na środkowej warstwie i zmodyfikuj przy pomocy (znanego ci już) polecenie zmiękczania krawędzi (Soften Fill Edges) — możesz wybrać dowolną odległość pikseli. Im zastosujesz większą (czyli im większą liczbę wpiszesz w pole Distance) tym bardziej rozmazany będzie tekst. 4. Po ustawieniu stopnia rozmycia tekstu przekształć go w klip filmowy i w panelu Effects dla parametru przezroczystości Alpha wybierz wartość 100. W ujęciu 15 Rozdział 8-213
wstaw ujęcie kluczowe i ustaw przezroczystość na 0. Następnie zastosuj uzupełnianie ruchu pomiędzy tymi dwoma ujęciami kluczowymi, aby rozmyty tekst przekształcił się (w połączeniu z pozostałymi warstwami) w normalny tekst. 5. Teraz możesz ukryć tą warstwę i odkryć górną. Na niej zastosuj ponownie polecenie zmiękczania krawędzi na tekście, tym razem z odległością pikseli (Distance) wynoszącą mniej nić 5. Ta część jest odrobinę skomplikowana, gdyż potrzebujemy tutaj tylko kontur liter. Podczas gdy zmiękczone krawędzie sprawiają wrażenie, jakby rozmywały kształt, w rzeczywistości powielają one kilkakrotnie obiekt na każdej kolejnej warstwie zwiększając przezroczystość i skalę. 6. Po zastosowaniu polecenie zmiękczania krawędzi kliknij na tło a następnie na środek jednej z liter (jeśli litery są małe, powiększ je). Powinieneś zaznaczyć środkowe wypełnienie i usunąć go pozostawiając nietknięte krawędzie. W ten sposób usuń środek wszystkich liter. Po ukończeniu obrazka składającego się z samych konturów zaznacz go i przekształć w klip filmowy — i w tym ukryj pozostałe warstwy aby wyraźniej widzieć obrazek na warstwie bieżącej. 7. Dodaj ujęcie kluczowe w tej samej (górnej) warstwie w ujęciu 30. W palecie Transform wyreguluj skalę konturu w ostatnim ujęciu — ja wybrałem rozmiar 200x200. Pomiędzy ujęciem 1 i 30 zastosuj uzupełnianie ruchu i już wszystko gotowe (zamiast ostatniego ujęcia możesz również zeskalować pierwsze). Przetestuj film i obejrzyj rezultaty twojej ciężkiej pracy — ten efekt możesz prezentować się naprawdę świetnie, zwłaszcza gdy umieściłeś obok siebie kilka wyrazów i tak ustawiłeś animację, aby następujące po sobie wyrazy znikały.
Wypróbujmy teraz kolejny prosty efekt tekstowy — efekt konturu. Efekt konturu
W tym ćwiczeniu ponownie zastosujemy polecenie zmiękczania krawędzi. 1. Zacznij jak zawsze poprzez utworzenie warstwy z jakimś tekstem. Efekt, jakiego tutaj wykonamy, jest dosyć gęsty, więc jeden lub dwa duże wyrazy powinny wystarczyć. Rozbij tekst, skopiuj go i zablokuj warstwę z tekstem. Teraz utwórz nową warstwę i wklej skopiowany tekst specjalnie (Paste In Place). 2. Z zaznaczonym tekstem na nowej warstwie zmiękcz jego krawędzie. Musisz w tym celu przypisać parametrowi Steps przynajmniej wartość 2, a parametrowi Distance wartość 2 pikseli. Możesz poeksperymentować również z innymi ustawieniami — wszystko zależy od tego, jak bardzo rozmazany ma być kontur. Teraz powinieneś w sumie pięć warstw, z których na czterech umieszczony jest konturowy tekst.
Rozdział 8-214
3. Teraz wstaw ujęcia kluczowe (i przesuwaj domyślne ujęcie kluczowe) na każdej warstwie z konturowym tekstem tak, aby pierwszy kontur był widoczny pomiędzy ujęciami 1 i 10, drugi pomiędzy 5 i 15, trzeci pomiędzy 10 i 20, a czwarty pomiędzy 15 i 25:
4. Następnie zmień rozmiar każdego klipu filmowego z konturowych warstw do 100% na początku ich 10-ujeciowego życia i do 125% pod jego koniec. Teraz zastosuj uzupełnienie ruchu na każdym z czterech przejść, aby wszystkie kontury stopniowo powiększały się do 125%. Następnie wszystkim końcowym kopiom klipów filmowych przypisz parametr Alfa o wartości 0. 5. Dodaj ujęcia do oryginalnej warstwy tekstowej aby wydłużyć ją do 25 ujęć. Jeśli przetestujesz na ty etapie film, będzie wyglądać dobrze, lecz powinien trwać odrobinę dłużej. Zamiast powielania ujęć zastosujmy skrypt. 6. Utwórz nową warstwę o nazwie actions dla skryptu i, w ujęciu 1, zdefiniuj zmienną o nazwie counter i przypisz jej początkową wartość wynoszącą 0:
Na razie ujęcia 10 i 15 wyglądają mniej więcej tak samo. Wstawimy pętlę, aby ciągle odtwarzała te ujęcia określoną liczbę razy, a następnie przejdziemy do ukończenia animacji.
Rozdział 8-215
7. Na warstwie actions w ujęciu 25 (które jest ostatnim ujęciem w animacji) dodaj akcję stop. Teraz w ujęciu 15 dodaj poniższy skrypt: if(counter<=5){ counter++; gotoAndPlay (10); } else{ gotoAndPlay (16); }
Jak widać zastosowaliśmy prostą akcję if...else do wygenerowania odpowiedniej wartości w zmiennej counter, jaką zdefiniowaliśmy wcześniej. Po pięciokrotnym odtworzeniu jej skrypt przechodzi do ujęcia 16, po którym nie ma już żadnych instrukcji pętli, więc dochodzi do akcji stop w ujęciu 25. 8. Przetestuj film i powinieneś zobaczyć tekst, który najpierw pulsuje a potem przestaje — świetny efekt do przyciągnięcia uwagi widza, który zatrzymuje się nim stanie się irytujący, czy niepotrzebny. Efekt ten jest zwłaszcza atrakcyjny gdy odtwarzany przy dużej prędkości odtwarzania. Możesz, na przykład, zapisać ten element jako klip filmowy i umieścić go w stanie Over przycisku. Oczywiście możesz zmienić liczbę pętli określoną w pierwszej linijce kodu aby dopracować długość trwania efektu.
Bardziej złożone efekty tekstowe Zajmowaliśmy się do tej pory efektami stosowanymi na całych wyrazach i linijkach tekstu. Jednakże prawdziwa zabawa zaczyna się wtedy, gdy rozbijasz te bloki tekstu na poszczególne warstwy i każdą literę umieszczasz na oddzielnej warstwie. Zanim zaczniesz się martwić ile to będzie wymagało pracy, wypróbuj kilka poniższych ćwiczeń, aby przekonać się ile możliwości dają ci opisane w nich techniki. Tekst warstwowy
1. Otwórz nowy film i na pierwszej warstwie wpisz tekst. Możesz zostawić lub nie tą warstwę w ukończonym efekcie, lecz bardzo ważne jest na tym etapie zachowanie kompletnej kopii tekstu. Rozbij tekst:
2. Teraz czas na zabawę. Kilkakrotnie powiel tą warstwę tak, aby każda litera miała swoją warstwę. Po utworzeniu kopii przejdź do oryginalnej wersji i usuń wszystkie oprócz pierwszej. Prawdopodobnie będziesz musiał ukryć wszystkie warstwy oprócz bieżącej, gdyż inaczej możesz się pogubić! 3. Na oryginalnej warstwie zaznacz pozostałą literę i zgrupuj ją. Na następnej warstwie usuń wszystkie litery oprócz drugiej i zgrupuj ją i taki sam zabieg wykonaj dla pozostały warstw:
Rozdział 8-216
W ukończonym efekcie litery na oddzielnych warstwach będą pojawiać się na ekranie każda w innym czasie. 4. Aby uzyskać taki efekt wstaw ujęcia kluczowe na wszystkich warstwach w ujęciu 15, a w ujęciu 1 zeskaluj każdą literę — ja wybrałem 200%. Dla dodatkowego efektu spróbuj przekształcić tekst w kontury w ujęciu 1 dla wszystkich warstw. Teraz przesuń każdą literę z ujęcia 1 na bok:
5. Na każdej warstwie zastosuj uzupełnianie ruchu. 6. Zaznacz każdy zestaw ujęć z uzupełnieniem ruchu i rozmieść go na listwie czasowej tak, aby nakładały się na siebie mniej więcej o 50%. Dzięki temu litery będą pojawiać się jedna po drugiej. Na koniec każdej warstwy dodaj ujęcia, aby wszystkie były takiej samej długości:
Na koniec filmu wstawiłem również akcję stop.
Rozdział 8-217
7. Przetestuj film i obejrzyj kontury liter wskakujące na swoje miejsca. I w tym przypadku po zwiększeniu prędkości odtwarzania filmu (dla pliku w formacie FLA umieszczonego na płycie CD-ROM wybrałem prędkość 90fps) efekt jest o wiele bardziej przekonywujący. Pewnie zastanawiasz się, czy nie istnieje łatwiejszy sposób na wykonanie tego typu efektu bez konieczności stosowania kilku warstw i ręcznej obróbki poszczególnych liter. Dobra wiadomość jest taka, że owszem, istnieje lepszy sposób. Jak wiele innych dobrych rzeczy we Flashu, metoda ta związana jest z zastosowaniem skryptu ActionScript. Przyswojenie sobie podstaw obróbki tekstu w skrypcie umożliwi ci realizację wielu świetnych efektów. Zajmijmy się tą techniką i wykonajmy efekt składający się z ciągu tekstu, automatycznie rozbitego na poszczególne litery rozmieszczone w różnych miejscach ekranu. Dynamiczny tekst z kodem ActionScript
Zastosujemy skrypt do wykonania poruszającego się tekstu na ekranie i przyczepimy go do kursora myszy aby tekst poruszał się po ekranie jak hiperaktywna gąsienica. Oznacza to trochę pracy ze skryptem, lecz większość wykonanego w tym ćwiczeniu skryptu będzie można stosować ponownie, inaczej niż warstwy i automatyczną animację z poprzedniego ćwiczenia. 1. W nowym filmie utwórz klip filmowy, jak nazwałem go seed, i umieść w nim pole dynamicznego tekstu. W pole Variable wprowadź zmienną text: 2. Możesz umieścić na razie w nim literę, aby sprawdzić jak wygląda. Wybierz dowolny rozmiar, kolor i czcionkę — parametry te zostaną zastosowane na wszystkich literach w tekście. Ja wybrałem rozmiar czcionki 14 i biały tekst dla zachowania czytelności. Zalecam zastosowanie na początku prostej czcionki, jak na przykład Courier, gdyż łatwiej ci będzie dokonać późniejszych rozmieszczeń. Zastosujemy ten klip filmowy jako podstawę dla wszystkich innych liter, które zostaną wyświetlone na ekranie, dlatego też poczyniona przez ciebie tutaj ustawienia będą wykorzystywane później.
3. Możesz również do litery dodać obrazek tła. Ja zastosowałem za polem tekstowym rysunek kółka aby stworzyć niewielki kontrast i wzbudzić zainteresowanie widza.
Rozdział 8-218
4. Umieść klip filmowy seed na głównej scenie poza widocznym obszarem sceny. W moim filmie zastosowałem litery przypominające wyglądem piłki, więc nazwałem tę kopię klipu filmowego seed ball0. Za chwilę dowiesz, się dlaczego użyłem nazwie cyfrę 0. Skoro już mamy klip filmowy seed, napiszemy skrypt, który będzie go obsługiwać. Skrypt dla tego efektu podzielony jest na dwie części: definiowanie tekstu i animowanie go. 5. W głównym filmie utwórz nową warstwę o nazwie actions. 6. Rozpoczniemy od zdefiniowania tablicy. Uwielbiam stosowanie tablic do porządkowania informacji. Potrzebujemy listę do umieszczenia w niej klipów filmowych poszczególnych liter, które za chwilę wykonamy. 7. Na warstwie actions w ujęciu 1 wpisz poniższą instrukcję w okno dialogowe Frame Actions: balls = new Array;
Pamiętaj, że instrukcja ta powoduje tylko utworzenie nowej tablicy. Skoro mamy już miejsce do przechowywania naszych klipów filmowych, musimy dokładnie zdefiniować zawartość tych klipów filmowych. Pamiętasz, jak w poprzednich ćwiczeniach pisaliśmy tekst na jednej warstwie zanim go rozbiliśmy? Poniższe część skryptu stanowi odpowiednik takiej operacji z tym, że tym razem rozbicie tekstu wykonamy w całości w kodzie. Wystarczy umieścić ciąg tekstu w zmiennej. 8. Dodaj poniższą linijkę kodu do skryptu: theText = “Dynamic Text”;
W tej linijce theText jest starą zwykła zmienną, natomiast DynamicText jest faktycznym tekstem, który ma pokazać się na ekranie i nad którym będziemy pracować dla uzyskania odpowiedniego efektu. Pamiętaj, że jedna kopia klipu filmowego, o nazwie ball0, znajduje się już na scenie. Zastosujemy ten klip do przechowania w nim naszej pierwszej litery, wykorzystując w tym celu pole tekstowe umieszczone w klipie filmowym. Następnie powielimy ten klip filmowy dla pozostałych liter. 9. Określ pierwszą pozycję w tablicy balls jako klip filmowy ball0 poprzez dodanie poniższego kodu jako następnej linijki skryptu: balls[0] = ball0;
Jak pamiętasz, w oryginalnym klipie filmowym umieściliśmy pole tekstowe z powiązaną z nim zmienną o nazwie text. Obecnym problemem do rozwiązania jest przekształcić pierwszą literę naszego ciągu dynamicznego tekstu (który, w tym przypadku, oznaczony jest mianem DynamicText) we wspominanie pole tekstowe i wyświetlić ją. I znowu dopisuje nam szczęście, ponieważ Flash wyposażony został w funkcję tekstu, która zwróci na każdy znak w ciągu tekstowym w oparciu o jego wartość indeksową — czyli pozycję w ciągu. Zatem, jeśli podamy instrukcję
Rozdział 8-219
balls[0].text = theText.charAt(0), wówczas Flash umieści pierwszą literę theText (wartości indeksowe są numerowane od zera) w wejściowym polu tekstowym w klipie filmowym. Następnie wystarczy powtórzyć te kroki dla każdej litery. Moglibyśmy, znając długość wejściowego ciągu, podać następujący kod... balls[1] = ball1; balls[1].text = theText.charAt(1); balls[2] = ball2; balls[2].text = theText.charAt(2); balls[3] = ball3; balls[3].text = theText.charAt(3); ...
...powtarzając dwie proste instrukcje dla wszystkich liter w ciągu. Jednakże oznaczałoby to wiele monotonnej pracy, a przecież ogólnym celem tego ćwiczenia jest unikanie takich sytuacji. 10. Aby ułatwić sobie życie zastosujemy pętlę. Zanim przedstawimy ci ją, dodaj ten kod do skryptu: balls[0] = ball0; balls[0].text = theText.charAt(0);
W tym fragmencie najpierw dodajemy odnośnik do pojedynczej kopii klipu filmowego do tablicy jako pozycję pierwszą w tej tablicy. W drugiej linijce zastosowaliśmy funkcję charAt do zdefiniowania zmiennej text tego samego klipu filmowego dla pierwszej litery ciągu tekstowego, czyli w tym przypadku „D”. Obecnie klip filmowy zawiera pierwszą literę tekstu plus rysunek tła dołączony do oryginalnego klipu. Jeśli przeciągniesz ta kopię na widoczny obszar sceny i uruchomisz film, zobaczysz literę D pojawiającą się na rysunkowym tle. Skoro już przygotowaliśmy podwaliny, możemy przejść do utworzenia pętli, która przetworzy wszystkie pozostałe znaki w ciągu tekstowym. 11. Dodaj ten kod pętli do istniejącego skryptu: for (i=1; i
W pierwszej linijce definiujemy warunki, które będą kontrolować liczbę razy odtwarzania pętli. Dla licznika pętli (zmienna i) przypisaliśmy początkową wartość 1 i nakazaliśmy odtwarzać pętle tak długo jak wartość zmiennej i jest mniejsza od liczby znaków podanej dla zmiennej theText: i
Zauważ, że w tej linijce zastosowaliśmy wbudowaną własność length, którą posiada każda zmienna. Instrukcja i++ zwiększa wartość zmiennej i o 1 pod koniec każdego otworzenia pętli. Tyle o początkowej pętli — przejdźmy teraz do głównej części procesu. Następna linijka kodu... duplicateMovieClip (this.ball0, “ball”+i, i);
Rozdział 8-220
...powiela oryginalny klip filmowy tworząc kopię klipu ball0, którą nazywa poprzez połączenie ciągu “ball” z bieżącą wartością licznika i. Oznacza to, że kolejne odtworzenia pętli będą generować klipy filmowe o nazwach ball1, ball2, ball3 i tak dalej. Powielanie klipów stanowi tylko część procesu. Chcemy również dodać je do tablicy, abyśmy mogli nimi manipulować poprzez zastosowanie ich numerów indeksowych w tablicy. To właśnie dzieje się w następnej linijce: balls[i] = eval(“ball”+i);
W ten sposób ewaluowany jest klip filmowy reprezentowany przez połączenie członu “ball” i zmiennej i oraz tworzony jest dla niego odnośnik w tablicy. Skoro możemy już uzyskać dostęp do klipu filmowego poprzez tablicę zastosujemy funkcję charAt plus wartość licznika... balls[i].text = theText.charAt(i);
...do zdefiniowania pola text ostatniego skopiowanego klipu filmowego dla następnej litery w zmiennej theText. Ostatnia linijka w pętli określa początkową wartość pozycji x dla nowego klipu filmowego: balls[i]._x = 20*i;
W tym fragmencie zastosowaliśmy licznik i pomnożony przez stałą liczbę pikseli, którą nazywam przesunięciem. Krótko mówiąc, przesuniecie jest to liczba pikseli pomiędzy środkiem klipu ball0 i środkiem klipu balln. Tutaj wybrałem użyłem przesunięcia o wartości 20, która jest właściwa dla stosunkowo niewielkich kółek zastosowanych przeze mnie, lecz możliwe że będziesz musiał zmienić tą wartość aby dopasować ją do rozmiaru rysunku tła i zastosowanego przez ciebie tekstu. Jak się możesz przekonać bez przesunięcia litery oddzielą się od siebie podczas poruszania kursorem myszy, lecz umieszczone zostaną jedna na drugiej po zatrzymaniu kursora. Innym sposobem tutaj mogłoby być przechowanie wartości przesunięcia w zmiennej zamiast wpisanie jej bezpośrednio do skryptu. To już koniec skryptu powielania klipów, który powinien wyglądać tak: balls = new Array; theText = “Dynamic Text”; balls[0] = ball0; balls[0] = ball0; balls[0].text = theText.charAt(0); for (i=1; i
Jeśli odtworzysz teraz film, w zależności gdzie umieściłeś oryginalny klip filmowy seed, zobaczysz każdą z poszczególnych liter (włącznie z przerwą pomiędzy wyrazami) wyświetloną w jej własnym klipie filmowym.
Rozdział 8-221
Mamy już tablicę liter w klipach filmowych, lecz nadal pozostało nam kilka rzeczy do wykonania. Musimy zdefiniować skrypt dla liter, gdzie powinny się umieścić na ekranie i co powinny robić. Istnieje tyle efektów, jakie można zastosować na literach — wszystkie efekty oparte na sprężystość, sile ciążenia i innych związanych z fizyką systemach będą tutaj odpowiednie, jeśli dysponujesz odpowiednią wiedzą matematyczną do napisania kodu. Ja wolę stworzyć prostszy efekt, więc wykonam ciąg tekstowy podążający za kursorem myszy po ekranie. Obecnie jest to dosyć często tworzony efekt, lecz jest pouczający, a jego wykonanie sprawia dużo frajdy. Aby zamierzony efekt powstał należy dodać jedną linijkę kodu do istniejącego już skryptu. 12. Dodaj ten kod do końca skryptu w ujęciu 1: startDrag (“ball0”, true);
Kod ten umożliwi nam przeciągnięcie pierwszej litery, D, w klipie filmowym ball0. Uruchom film i zobaczysz, że litera D podąża a kursorem myszy. Teraz musimy przygotować skrypt, dzięki któremu każda z pozostałych liter będzie podążać za literą poprzedzającą ją. Efekt ten jest luźno oparty na sile ciążenia, lecz nie martw się, cała matematyka zostanie wykonana za ciebie. Skrypt ten umieścimy w ujęciu 2 na listwie czasowej głównego filmu. 13. Dodaj ten skrypt w oknie dialogowym Frame Actions w ujęciu 2: speed = 2; friction = 0.45; offset = 20; for (i=1, i
Jak widać, rozpoczęliśmy od zdefiniowania trzech zmiennych. Zmienna speed definiuje prędkość podążania jednego numeru za drugim, a zmienna friction określa ilość traconej przez piłki energii w trakcie zbliżania się do poprzedniej litery. Zmienna offset, natomiast, służy do definiowania odległości pomiędzy klipami
Rozdział 8-222
filmowymi na ekranie. Zauważ, że dla zmiennej speed większa wartość oznacza wolniej poruszające się litery. Ustawienia te działają całkiem dobrze, lecz jako ogólna zasada, gdy kod podobnie jak teraz się zapcha, wypróbuj różne wartości aby znaleźć jak najlepsze. Celem tego skryptu jest określenie przyrostu x i y, który będzie poruszać klipy filmowe po scenie w odpowiedni sposób. Aby tego dokonać skrypt sprawdza, jak daleko bieżąca litera znajduje się od poprzedniej i wówczas odrobinę się do tej litery zbliża. Najpierw przygotujemy pętlę do wykonania tego zestawu akcji dla tylu liter, ile znajduje się w zmiennej theText: for (i=1, i
Dwie pierwsze linijki w samej pętli określają wartości różnicy odległości pomiędzy x i y: Xdiff = (balls[i-1]._x-balls[i]._x); Ydiff = (balls[i-1]._y-balls[i]._y);
Wartości te uzyskuje się poprzez wzięcie pozycji x każdego klipu filmowego w tablicy... balls[i-1]._x
...i odjęcie pozycji x następnego klipu filmowego w tablicy: -balls[i]._x
Podobnie dla pozycji y klipów filmowych. Zatem podczas pierwszego odtwarzania pętli kod porówna pozycje klipów, do jakich odnosimy się w tablicy jako balls(0) i balls(1) i przypisze różnicę w ich pozycja x i do zmiennych Xdiff i Ydiff. Po dodaniu wartości zmiennej offset do różnicy... Xdiff += offset;
...zwiększamy wówczas prędkość ruchu klipów filmowych o ułamek różnic x i y i wartości zmiennej friction: balls[i].x_rate balls[i].y_rate balls[i].x_rate balls[i].y_rate
+= += *= *=
(Xdiff/speed); (Ydiff/speed); friction; friction;
Pozostawione samym sobie, piłki potrzebowałyby wiele czasu na zahamowanie, więc pomożemy im odrobinę poprze zmniejszenie ich prędkości podczas każdej pętli przy pomocy tych obliczeń i ułatwimy im poruszanie się poprzez dodanie prędkości x_ i y_ do wartości x i y bieżącego klipu filmowego: balls[i]._x += balls[i].x_rate; balls[i]._y += balls[i].y_rate;
Rozdział 8-223
I w taki sposób kończy się pierwsze odtworzenie pętli, która wówczas przechodzi do następnego klipu filmowego. Końcowa linijka w skrypcie... updateAfterEvent(mousemove); }
...zapewnia, że Flash stosuje te zmiany przy każdym ruchu myszy. Uff! 14. W ujęciu 3 dodaj jedynie prostą akcję: gotoAndPlay(2);
W ten sposób film będzie powtarzać cały proces. 15. Na koniec — absolutnie definitywny! — dodaj ujęcia na warstwie balls aby była ona tej samej długości co warstwa actions:
Ten efekt nie zadziała bez twojej pomocy! 16. Wypróbuj film i obejrzyj przesuwające się po ekranie piłki i litery:
Teraz poeksperymentuj z innymi tarciami, przesunięciami i wartościami prędkości i sprawdź, jaki będą one miały wpływ na zachowanie klipu filmowego. Bez zbyt wielkiego modyfikowania skryptu możesz bezpośrednio w skrypcie określić kierunek ruchu klipu filmowego ball0, zamiast przeciągać go. Lub możesz przypisać każdej literze punkt docelowy, do którego będzie przechodzić zamiast podążać za poprzednią literą. Ten przykład stanowi ilustrację możliwości, jakie daje zastosowanie tekstu, rozbicie go i użycie w dynamicznie utworzonych klipach filmowych. Pamiętaj, że możesz w równym stopniu zastosować te reguły na tekście wpisywanym przez użytkownika poprzez pobranie danych z wejściowego pola tekstowego, przypisanie do niego zmiennej lub zmiennych i manipulowanie tymi zamiennymi przy pomocy tego typu kodu. W ostatnim ćwiczeniu w tym rozdziale połączmy efekt maskowania z manipulowanym skryptowo tekstem.
Rozdział 8-224
Maskowanie skryptowego tekstu
Spróbujemy zastosować maskę do umieszczenie małego tekstu w dużym. Aby efekt powstał interesujący tekst wypełnienia będzie się również przewijać od prawej do lewej.
A matrix — matryca 1. Rozpoczniemy od przygotowani maski tekstu. Podobnie jak w kilku poprzednich ćwiczeniach zastosowałem jednolity tekst na jednej warstwie o nazwie mask, i utworzyłem oddzielną warstwę outlines z zmiękczonymi krawędziami tekstu do obramowania maski:
2. Teraz utwórz klip filmowy o nazwie maskedText. Umieść w nim puste pole dynamicznego tekstu o takiej samej szerokości jak tekst na warstwie mask. Upewnij się, że zawarłeś w tym polu tekstowych kontury czcionki klikając ikonę Include entire font outline w sekcji Embed Fonts panelu Text Options:
Efekt maskowania nie zadziała na tekście dopóki nie zostaną włączone do niego kontury. Teraz musimy utworzyć kolejny klip filmowy, który będzie zawierać mały tekst wygenerowany w skrypcie i przewijany po ekranie za maską. Klip ten zostanie osadzony w klipie maskedText. Przy każdorazowym odtwarzaniu pętli w skrypcie
Rozdział 8-225
będziemy tworzyć kilka kopii klipu małego tekstu i dodawać przypadkowy tekst na końcu każdej linijki w tym osadzonym klipie. W tym czasie na końcu drugiej linijki tekst będzie usuwany, tworząc w ten sposób efekt przewijania. 3. Dodaj nowy klip filmowy o nazwie textLine. Utwórz w nim pole dynamicznego tekstu, mniej więcej o tym samym rozmiarze co pole w klipie filmowym z zamaskowanym tekstem. Zastosuj bardzo małą czcionkę — ja wybrałem czcionkę Courier o wielkości 14 punktów. Przypisz polu tekstowemu zmienną o nazwie text i ponownie upewnij się, czy osadziłeś czcionki:
4. Umieść kopię klipu textLine w klipie maskedText i nazwij ją text0.
Teraz przejdźmy do skryptu, który tchnie życie w tekst. Zostanie on umieszczony w klipie filmowym maskedText. Struktura tego efektu jest bardzo zbliżona do efektu z bąbelkami z wcześniejszego ćwiczenia. Najpierw musimy zdefiniować zmienne. 5. W klipie maskedText wstaw warstwę actions i w ujęciu 1 umieść poniższy skrypt: textArray = new Array(); textArray[0] = text0; Counter = text0._y;
W tym fragmencie utworzyliśmy nową tablicę do przechowywania tekstu, którego będziemy generować i umieściliśmy film text0 (który, jak pamiętasz, jest kopią klipu textLine) w zerowej pozycji tablicy. Następnie zdefiniowaliśmy zmienną counter do przechowywania pozycji pierwszej linijki tekstu. Teraz powielimy skopiujemy więcej linijek z oryginału. 6. Dodaj poniższy kod do istniejącego skryptu: for (i=1; i<=20; i++) { Counter+=12; duplicateMovieClip (text0, “text”+i, i);
W ten sposób powstanie wiele kopii klipu zawierającego tekst za maską. Kod ten różni się od kodu powielania z filmu z bąbelkami tylko pod tym względem, że piąta linijka powoduje przesunięcie nowego klipu filmowego o 12 pikseli w dół od poprzedniego. Ostatnią operacją, jaką należy wykonać w skrypcie w tym ujęciu jest wypełnienie wszystkich linijek jakimś przypadkowym tekstem, zanim rozpoczniemy przewijanie (kod, którego umieścimy w następnym ujęciu dodaj literę do prawego i usunie literę z lewego końca linijki, przez co zostalibyśmy z pustymi linijkami gdybyśmy ich najpierw nie wypełnili). 7. Dodaj ten ostatni fragment skryptu do ujęcia 1: for (j=0; j<=100; j++) { for (i=0; i<=20; i++) { newChar=chr(random(150)+1); textArray[i].text+=newChar; }}
Aby generować przypadkowe znaki przekształciłem przypadkową liczbę bezpośrednio w tekst zapisany w kodzie ASCII: newChar=chr(random(150)+1);
Dzięki temu tekst przybierze bardzo profesjonalny wygląd, z wszystkimi możliwymi znakami. Następnie po prostu dodaję literę do ciągu: textArray[i].text+=newChar;
W drugim ujęciu klipu filmowego masked text chcemy uruchomić listę linijek tekstu w tablicy, a następnie dodać i odjąć literę w każdej linijce. 8. W tym celu dodaj ten kod do ujęcia 2: for (i=0; i<=20; i++) { newChar=chr(random(100)+1); textArray[i].text+=newChar; textArray[i].text=textArray[i].text.substr( 1, textArray[i].text.length ); }
Kod ten jest bardzo zbliżony do kodu, którego zastosowaliśmy do wypełnienia na początku linijek. Jedynie ostatnia linijka... textArray[i].text=textArray[i].text.substr( 1, textArray[i].text.length );
...jest całkowicie nowa. Zastosowaliśmy w niej polecenie substr do usunięcia pierwszego znaku w ciągu. 9. W trzecim ujęciu warstwy actions dodaj poniższą instrukcję: gotoAndPlay(2);
Spowoduje ona ciągłe odtwarzanie animacji i utworzenie ukończony efekt. 10. Zwiększ długość oryginalnej warstwy w klipie filmowym maskedText, aby była ona tej samej długości co warstwa actions.
Rozdział 8-227
11. Teraz przeciągnij kopię klipu masked text na scenę do nowej warstwy o nazwie masked. Jak poniżej:
12. Rozmieść odpowiednio warstwy mask i masked ta, aby tekst znajdował się za oryginalną maską...
...i uruchom film aby obejrzeć ukończony efekt. Teraz możesz zabrać się za precyzyjne rozmieszczenie klipów filmowych, rozmiary tekstu i inne elementy, aby uzyskać dokładnie taki rezultat, jaki zamierzałeś.
Zakończenie Skoro już nauczyłeś się tylko efektów w tym rozdziale, nie przestawaj tylko na nich, lecz potraktuj je jako odskocznię dla lepszych pomysłów i lepszych efektów. Wypróbuj różne ustawienia zmiennych i rozmieszczenie klipów filmowych aby sprawdzić, jakie powstaną wówczas efekty, a także dodaj kilka fragmentów kodu do dostosowania filmów. Jeśli zobaczysz w Sieci jakiś świetny efekt, przyjrzyj się mu i spróbuj zgadnąć, jak został wykonany, a wówczas pójdź o krok dalej. Podkradanie czyichś pomysłów nie jest zbyt inteligentne, lecz inspiracja jest dostępna za darmo. Baw się dobrze. jnych i profesjonalnie wyglądających stron. Naprzód projektancie!
Rozdział 8-228
Rozdział 9 Przyciski i menu Flash jest interaktywnym medium. Umożliwia ci wyrażanie twoich pomysłów, artystycznych wizji i demonstracji produktów w tak autentyczny i bezpośredni sposób, że można prawie zapomnieć, że patrzysz na stronę internetową. Jednakże, liniowa animacja widoczna na ekranach powitalnych i paskach reklamowych nie wystarczy ci na długo. Nauczenie się tworzenia płynnej, przykuwającej uwagę interakcji stanowi klucz do uwolnienia pełnej mocy Flasha. W tym rozdziale zajmiemy się omówieniem metod dodawania interaktywności do filmów Flasha, bez częstego zagłębiania się w kod ActionScript. Poprzez mądre zastosowanie podstawowej funkcjonalności Flasha, nauczysz się tworzyć dynamiczne przyciski i inne elementy interfejsu, konstruować filmy w taki sposób, aby odpowiadały na poruszanie kursorem myszy przez użytkownika i jak ulepszyć nawigację po twoich witrynach przy pomocy kompletnych systemów menu. Zwrócimy szczególną uwagę na dwa główne elementy interfejsu, czyli przyciski i menu, a także na sposoby łączenia ich do tworzenia bardziej dynamicznych interfejsów dla witryn internetowych. Zaczniemy od przycisków.
Przyciski Przyciski są podstawową jednostką interaktywności we Flashu. Prawdę mówiąc, do ukazania się piątej wersji Flasha, przyciski stanowiły jedyny sposób dla użytkownika do interakcji z filmem Flasha — i nawet teraz, przyciski pozostają najważniejsza techniką do umożliwienia użytkownikom bezpośredniego kontrolowania tego, co dzieje się w filmach. Domyślna obsługa przycisku dostępna we Flashu poprzez ujęcia Up, Over, Down i Hit pomaga w generowaniu minimum, jakiego użytkownik może spodziewać się od przycisku: pewnego znaku jego aktywności i pozytywnej reakcji po pomyślnym wciśnięciu przycisku przez użytkownika. Jednakże, z łatwością można ulepszyć zachowanie przycisku na sposoby, które dostarczają coraz lepsze rozwiązania twoim użytkownikom i właśnie nimi zajmiemy się w tej części rozdziały. W szczególności omówimy efekty, które można uzyskać poprzez osadzenie klipów filmowych w przycisku i osadzenie przycisków w klipach filmowych.
Tworzenie przycisków z podpowiedziami Podczas projektowania interfejsu dla aplikacji, główny problem stanowi przestrzeń. Rzadko kiedy masz wystarczająco dużo miejsca na umieszczenie wszystkich elementów dokładnie tak, jak zamierzałeś. Z estetycznych czy też związanych z wolnym obszarem powodów, projektanci często stosują symbole zamiast tekstu do opisania przycisków. Praca dobrego projektanta interfejsów polega na zapewnieniu, że znaczenie tych ikon jest oczywiste. Do sprawdzenia, że znaczenie ich ikon jest zrozumiałe, projektanci stosują jedną sztuczkę, używaną w większości komercyjnych aplikacji. Wystarczy potrzymać kursor myszy nad jednym z narzędzi w oknie Tools i już będziesz wiedział, o czym mówię: małe pole tekstowe Rozdział 9-229
wyskakuje obok kursora myszy zawierające więcej informacji o danym narzędziu. Tego typu podpowiedzi są bezcenne podczas projektowania interfejsu, a stosowane efektywnie mogą wywrzeć znaczny wpływ na twój projekt. Jak się okazuje, we Flashu dodawanie podpowiedzi do przycisków jest bardzo proste. Najłatwiejszą techniką jest edycja stanów Over przycisków i dodanie pola tekstowego. Problem polega na tym, że podpowiedź zostanie wyświetlone jak tylko kursor myszy znajdzie się nad przyciskiem, natomiast pomiędzy umieszczeniem kursora nad przyciskiem i wyświetleniem podpowiedzi powinno zaistnieć pewne opóźnienie. Jednym z rozwiązaniem byłoby dodanie skryptu do wyświetlenia etykietki, opierając się na funkcji czasomierza, lecz bardzo podobny efekt można uzyskać poprzez animowanie przycisku z zastosowaniem osadzonego klipu filmowego. Dodawanie podpowiedzi do przycisków
W celu demonstracji tej techniki omówimy tworzenie przycisku pomocy (Help) dla filmu Flasha, nad którym wyświetlana będzie podpowiedź, gdy kursor myszy się na chwilę nad nim zatrzyma. Podstawowy przycisk będzie się składać z dwóch symboli graficznych zawierających odpowiednio górną część przycisku i jego cień. Dla tego ćwiczenia przygotowaliśmy już rysunki, które znajdziesz w pliku Tooltips.fla na płycie CD-ROM. Symbole te zastosujemy jako podstawę dla wszystkich stanów przycisku:
1. Przeciągnij graficzne symbole z biblioteki na scenę. Następnie rozmieść je tak, jak widać na rysunku i przekształć je w klip filmowy o nawie Button_Movie. 2. Wejdź do nowego klipu filmowego i w ujęciu 12 wstaw ujęcie kluczowe:
Rozdział 9-230
Umieszczenie tego ujęcia kluczowego na listwie określa długość opóźnienia przed wyświetleniem podpowiedzi — 12 ujęć w filmie odtwarzanym z prędkością 12 ujęć na sekundę dadzą efekt 1-sekundowego opóźnienia i o to nam właśnie chodzi. 3. Utwórz nową warstwę o nazwie Tooltip i w ujęcie 12 wstaw ujęcie kluczowe. Teraz umieść statyczne pole tekstowe tuż pod i na prawo od środka kwadratu, zawierające słowo Help (pomoc):
Możesz wpisać coś bardziej opisowego, lecz ogólnie zalecam zachowanie ducha podpowiedzi i podawanie wiadomości krótkich i treściwych.
Możesz również dodać jasny prostokąt jako tło dla podpowiedzi. 4. Na koniec otwórz okno dialogowe Frame Actions dla ujęcia 12 na warstwie Tooltip i dodaj w nim akcję stop, aby film nie był odtwarzany ciągle. 5. Teraz jesteśmy już gotowi na wykonanie samego przycisku. Rozpocznij od przeciągnięcia na główną scenę kolejnej pary symboli Top i Shadow i przekształć je w nowy symbol przycisku. 6. Otwórz przycisk, upewnij się, że rysunki umieszczone są na środku sceny i wstaw ujęcia kluczowe dla wszystkich czterech stanów przycisku. 7. Następnie usuń zawartość stanu Over i zastąp ją kopią świeżo utworzonego klipu filmowego. Jeśli tylko film jest poprawnie wyrównany względem symboli w innych ujęciach (nasze przycisku umieszczone są w pozycji 0,0), wówczas wszystkie klony tego przycisku będą miały opisową podpowiedź wyświetlającą się sekundę po umieszczeniu kursora myszy nad przyciskiem, czyli dokładnie tak jak zamierzaliśmy. Właśnie szczegóły tego rodzaju ożywiają aplikację.
Przyciski w klipach filmowych Jednym z aspektów Flasha dezorientującym wielu nowych użytkowników kodu ActionScript jest różnica pomiędzy klipem filmowym i przyciskiem. Często chcesz utworzyć element, który zachowuje się zarówno jak klip i przycisk, lecz domyślnie nie można wykryć, czy kursor myszy kliknął nad klipem filmowym (przynajmniej nie bezpośrednio), jak również nie można nazwać przycisku w taki sposób, aby odnieść się do niego w skrypcie. Aby rozwiązać ten problem możemy zastosować bardzo prostą technikę owinięcia przycisku klipem filmowym, a następnie zastosowania tego klipu filmowego w filmie w taki sposób, jakbyśmy użyli przycisk — jest to operacja odwrotna do tej, którą wykonaliśmy w poprzednim ćwiczeniu. Dzięki tej technice możemy nadać „owiniętemu” przyciskowi nazwę klonu na scenie, zastosować na nim efekty koloru i alfa, a także odnieść się do niego w kodzie ActionScript.
Rozdział 9-231
Jednym z przykładów zastosowania tej metody jest tworzenie możliwych do przeciągania obiektów. Celem wykonania takiego obiektu jest utworzenie małego graficznego obiektu, który, po kliknięciu na nim, „przyklei” się do kursora myszy aż do zwolnienia przycisku myszy. Możliwości dla tego typu zachowania są nieograniczone, a zastosowanie tej techniki widoczne jest wszędzie, od gier dla dzieci po systemy menu. Tworzenie przycisku do przeciągania
Rozpocznij to ćwiczenie od otworzenia pliku Draggable.fla z płyty CD-ROM na środku sceny zobaczysz niezwykle prosty przycisk wykonany we Flashu, zdefiniowany poprzez następujące cztery ujęcia:
1. Jak wytłumaczyliśmy powyżej, w celu utworzenia zamierzonego przez nas zachowania musimy osadzić klon przycisku w nowym klipie filmowym. Polega to na zaznaczeniu symbolu na scenie i przekształceniu go w klip filmowy o nazwie Drag_Button. Jeśli przetestujesz film na tym etapie, zauważysz, że klip zachowuje się dokładnie tak samo jak „zwykły” przycisk, lecz to się już wkrótce zmieni. 2. Efekt „przeciągnij-i-upuść” uzyskiwany jest poprzez dodanie do przycisku dostosowanych funkcji obsługi zdarzenia on (press) i on (release) — chcemy podnieść przycisk Flasha po wciśnięciu przycisku myszy i puścić go po zwolnieniu przycisku myszy. W tym celu zastosujemy funkcje Flasha startDrag i stopDrag. 3. Wywołaj okno dialogowe Object Actions i wpisz poniższy skrypt: on (press) { startDrag (“”); } on (release) { stopDrag (); }
Poprzez funkcję obsługi zdarzenia on (press) funkcja startDrag zdefiniuje film do przeciągnięcia — w tym przypadku pozostawiliśmy ciąg pusty. Zastosowanie pustego ciągu oznacza, że chcesz przeciągnąć każdy obiekt na bieżącej listwie czasowej, a jeśli umieścimy go na głównej scenie, przycisk przeciągnie każdy obiekt widoczny na scenie w danym momencie. Jednakże, ponieważ „zawinęliśmy” przycisk w klip filmowy, przeciągnie on wszystkie obiekty znajdujące się na listwie czasowej tego klipu filmowego — mianowicie sam przycisk, a właśnie o to nam chodzi. Jeśli przetestujesz teraz film zauważysz, że po kliknięciu na przycisk on sam przyczepia się do kursora myszy, dzięki czemu możesz przeciągać go po ekranie aż do zwolnienia przycisku myszy. Wówczas przycisk pozostanie tam, gdzie go zostawiłeś. Rozdział 9-232
W sumie, Flash umożliwia obsługę ośmiu akcji przycisku: press, release, release outside, key press, roll over, roll out, drag over i drag out. Ponadto, obsługa automatyczna dostępna dla stanów Over i Down jest świetna dla użytkowników takich jak ja, którzy wcześniej pracowali w programie Director. Nie powinieneś się jednak poczuć ograniczonym tymi wbudowanymi zachowaniami przycisku, gdyż są one jedynie bryłami, na których możesz budować. Jeśli nie masz nic przeciwko pisania kodu, będziesz mógł rozwiązać prawie każdy problem, z jakim się zetkniesz.
Zastępowanie zachowania przycisku Ostatnio pracowałem nad wykonaną we Flashu grą dla dziecięcej witryny internetowej. Gra ta zawierała wiele dających się przeciągnąć elementów, podobnych do opisanych powyżej. Problem polegał na tym, że klient wymagał dosyć dziwnego zachowania przycisków: przyciski w grze powinno się dać przeciągnąć i upuścić, jak można by się tego spodziewać, lecz również podnieść jednym kliknięciem i upuścić go również jednym. Jeśli zastanowisz się nad kodem zastosowanym w poprzedni ćwiczeniu zauważysz problem: instrukcja release czasami oznaczała rozpoczęcie przeciągania, a czasami zaprzestanie przeciągania. „Czasami” dla programisty brzmi strasznie w jakimkolwiek języku, więc moją pierwszą odpowiedzią było „Nie można tak zrobić!”. Lecz po pewnym zastanowieniu się, odpowiedź okazała się dosyć prosta. Z minimalną ilością kodu i jedną zmienną w celu dodania dodatkowego „stanu” do przycisków, problem został rozwiązany. Przeanalizujmy kod i zobaczmy, jak to wykonaliśmy. Tworzenie „lepkiego” przycisku
To ćwiczenie rozpoczyna się w miejscu zakończenia poprzedniego, więc możesz rozpocząć od otwarcia pliku z poprzedniego przykładu lub pliku Sticky_button.fla z płyty CD-ROM. Teraz aby dodać nowe zachowanie wystarczy utworzyć nowy stan dla przycisku. Ja nazwałem ten stan clicked, co oznacza, że przycisk myszy został wciśnięty i zwolniony gdy kursor znajdował się nad przyciskiem. 1. Do utworzenia nowego stanu potrzebujemy zmienną, w której będziemy go przechowywać. Otwórz klip filmowy, wywołaj okno dialogowe Frame Actions dla ujęcia 1 i wpisz poniższy kod: clicked = false;
Rozdział 9-233
Kod dodany w oknie Frame Actions tworzy tutaj nową zmienną o nazwie clicked, której przypisaliśmy Boolowską wartość początkową false. Zastosujemy tą zmienną do sprawdzenia, czy przycisk rzeczywiście został kliknięty. 2. Skoro nie chcemy, aby klip był odtwarzany ciągle i resetował zmienną, należy również dodać nowe ujęcie kluczowe w ujęcie 2 i w oknie dialogowym Frame Actions wywołanym dla tego ujęcia wpisać akcję stop. 3. Sedno tego przykładu leży w zaktualizowanej wersji kodu do obsługi akcji przycisku. Upewnij się, że znajdujesz się w ujęciu 2 klipu filmowego i w ujęciu tym wywołaj okno dialogowe Object Actions dla kopii przycisku. Teraz dokonaj poniższych zmian w funkcjach obsługi zdarzenia on (press) i on (release), które napisaliśmy dla poprzedniego przykładu: on (press) { if (clicked == false) { startDrag (“”); clicked = true; loc_x = _x; loc_y = _y; } else { stopDrag (); clicked = false; } } on (release) { abs_x = Math.abs (loc_x - _x); abs_y = Math.abs (loc_y - _y); if (abs_x > 20 || abs_y > 20) { stopDrag (); clicked = false; } }
Polecenie on (press) obejmuje teraz instrukcję if, opartą na stanie zmiennej clicked. Wiemy, że zmiennej clicked przypisaliśmy początkową wartość false, więc po pierwszym wciśnięciu przycisku funkcja startDrag wywoływana jest natychmiast, zmiennej clicked przypisana zostaje wartość true, a własności przycisku _x i _y zapisane zostają jako loc_x i loc_y dla przyszłego użycia. Następnie, po zwolnieniu przycisku myszy, funkcja obsługi zdarzenia on (release) oblicza różnicę pomiędzy pozycją, w której przycisk został kliknięty i pozycją, w której przycisk został zwolniony. Funkcja Math.abs przekształca po prostu liczbę w jej wartość bezwzględną (czyli dodatnią). Oznacz to, że możemy zmniejszyć o połowę pracę, jaką mamy wykonać. Nie chcemy wiedzieć, w którym kierunku przycisk został przeciągnięty, lecz jak daleko. Możemy więc powiedzieć: Jeśli przycisk został przeciągnięty o więcej niż 20 pikseli z jego punktu początkowego wówczas użytkownik chciał go przeciągnąć w to miejsce, więc upuścimy go. Jeśli liczba jest wystarczająco duża, oznaczająca, że przycisk został przesunięty w inne miejsce na ekranie, gdy przycisk myszy był wciśnięty, wówczas skrypt wywołuje akcję stopDrag i upuszcza przycisk, a zmiennej clicked zostaje przypisana wartość false. Jednakże, jeśli dwie pozycji znajdują się od siebie w odległości do 20 pikseli, wówczas instrukcja on (release) nie powoduje żadnej akcji, zmiennej clicked zostaje przypisana wartość true, a polecenie stopDrag nie zostaje wywołana. Oznacza to, że jeśli przycisk zostanie wciśnięty ponownie, tym razem Rozdział 9-234
zmiennej clicked przypiszemy wartość true, instrukcja else zostanie wykonana, funkcja stopDrag wywołana, przycisk upuszczony, i zmiennej clicked przypisana wartość false. I już: utworzyłeś przycisk z dostosowanym zdarzeniem. Przetestuj film i wypróbuj dwa sposoby wybrania przycisku. Przeoczyłem w tym ćwiczeniu jeden istotny punkt — konieczność testowania pomiędzy dwoma pozycjami. Czemu mamy się przejmować wartościami bezwzględnymi — nie wystarczy sprawdzić, czy są sobie równe? Od tego właśnie zacząłem, lecz wkrótce odkryłem, że trudno jest nie poruszyć kursorem mysz pomiędzy kliknięciem i zwolnieniem przycisku, a testowanie w celu sprawdzania równości spowodowało dosyć dziwne zachowanie. Oczywiście wartość wybrana przez ciebie jako dopuszczalne maksimum przed zamianą stanów, zależy od ciebie: ja wybrałem 20, ponieważ chciałem, aby obiekty były zgarnięte jednym „nurkiem” myszy, lecz z łatwością możesz to zmienić na 10, jeśli chcesz, aby ruch był bardziej precyzyjny. Przeciągane klipy filmowe i cele upuszczenia
Aby zakończyć tą część rozdziału dodamy jeszcze jedną właściwość do naszego bazującego na przycisku klipu filmowego nadającego się do przeciągania. Poprzez zastosowanie własność _droptarget można wykryć, czy właśnie przeciągany klip filmowych znajduje się „nad” jakimś innym klipem filmowym o innej nazwie i wówczas będzie można zastosować inną akcję w zależności od rezultatów sprawdzania. Jeśli brzmi to trochę tajemniczo, może pomogą ci przykłady — zastosowanie tej techniki może okazać się zdumiewająco użyteczne w kilku aplikacjach. Powiedzmy, na przykład, że chcesz, aby użytkownik mógł przeciągnąć obiekt z grupy obiektów na określone miejsce. Taka sytuacja może się zdarzyć podczas projektowania gry dla dzieci (na przykład przeciągnięcie geometrycznego kształtu do dziury), lub internetowego sklepu odzieżowego (przeciągnięcie ubrania do właściwego miejsca na manekinie, aby obejrzeć je przed zakupem). W obydwu sytuacjach chcesz, aby ruch się odbył jedynie w przypadku, jeśli obiekt został przeciągnięty (mniej więcej) we właściwe miejsce. Funkcja _droptarget ułatwi ci zrealizowanie takiego efektu. Aby zastosować własność _droptarget potrzebny ci będzie klip filmowy możliwy do przeciągnięcia i nazwany docelowy klip filmowy. Jako klip filmowy możemy zastosować „lepki” przycisk z poprzedniego ćwiczenia, a dla klipu docelowego użyjemy kopię prostego okrągłego symbolu klipu filmowego. Obydwa obiekty znajdziesz w pliku Droptarget.fla na płycie CD-ROM.
Rozdział 9-235
Aby zilustrować zastosowanie tej techniki utworzymy efekt, w którym przycisk będzie mógł zostać upuszczony wyłącznie na docelowy klip filmowy — jeśli upuścisz go w inne miejsce, powróci do swojej poprzedniej pozycji. 1. Otwórz plik w formacie FLA i nadaj nazwy klonów dwóm składnikom przycisku: przyciskowi nadaj nazwę button, a celowi target. 2. W przycisku button umieszczony jest już kod obsługujący podnoszenie i opuszczanie przycisku kursorem myszy, więc aby uzyskać zamierzone przez nas zachowanie wystarczy dodać trochę kodu ActionScript do kodu już istniejącego. Chcemy, aby klip filmowy pamiętał swoją pozycję początkową (na wypadek, jakby miał do niej powrócić) i aby wiedział, w jakie miejsce został upuszczony. Aby zrealizować pierwszy warunek ponownie zastosujemy zmienne loc_x i loc_y, które użyliśmy wcześniej w celu dodania zachowania „lepkiego” przycisku — jak na razie nieźle. Odrobinę trudniejsza będzie obsługa przycisku po zakończeniu przeciągania, ponieważ musimy poprzedzić obydwa wywołania funkcji stopDrag instrukcją warunkową testującą, czy własność _droptarget przycisku jest identyczna z naszym docelowym klipem filmowym. Na nieszczęście, wartość zwracana przez funkcję _droptarget jest przechowywana za pomocą notacji z ukośnikami poprzedzającą piątą wersje Flasha, dlatego też musimy zastosować funkcję eval, aby przekształcić informację w formę, która będziemy mogli zastosować. Funkcja eval po prostu przywróci odnośnik do klipu filmowego w notacji kropkowej.
Gdy znajdujemy się nad celem, możemy po prostu wywołać funkcję stopDrag — lecz w innym przypadku będziemy musieli zastosować wartości przechowane wcześniej, w celu przywrócenia klipu filmowego do jego początkowej pozycji. Poniżej zapisaliśmy zmiany, jakich musimy dokonać: on (press) { if (clicked == false) { startDrag (“”); clicked = true; loc_x = _x; loc_y = _y; } else { if (eval(_droptarget) != _parent.target) { _x = loc_x; _y = loc_y;
Nowy kod wykonuje dokładnie to, co opisaliśmy powyżej: jeśli celem upuszczenia przycisku nie jest kopia klipu filmowego target (!= oznacza „nie równy”), wówczas resetujemy pozycję klipu button przed wywołaniem instrukcji stopDrag. Zauważ, że ponieważ zarówno button jak i target są klonami umieszczonymi na listwie czasowej głównego filmu, musimy określić ścieżkę do klipu target z perspektywy klipu button, co wiążę się z zastosowaniem ścieżki _parent. Możesz teraz przetestować film, który powinien zachowywać się tak, jak tego chcieliśmy. Jeśli przycisk jest zwolniony poza obszarem docelowym, wówczas powróci do swojej oryginalnej pozycji, lecz jeśli przycisk jest zwolniony w obrębie obszaru docelowego, pozostanie tam, gdzie go upuszczono. Problem z nim jest taki, że gdy już przycisk znajduje się nad celem, nie można go już stamtąd zabrać. Istnieją różne rozwiązania tego problemu w zależności od projektu. W grze dla dzieci prawdopodobnie nie chcesz, aby właściwy kształt został przeciągnięty z miejsca docelowego, więc nie musisz niczego zmieniać. Lecz w przypadku typu manekin ze sklepu odzieżowego, zapewne będziesz chcieć inny cel — zazwyczaj pojemnik najpierw przeciągnięty, którego możesz przeciągnąć z powrotem na jego miejsce jeśli go nie chcesz. Z dotychczas nabytą wiedzą, powinieneś dać sobie radę z modyfikacją tego przykładu z uwzględnieniem takiej ewentualności.
Menu Do tego momentu omawialiśmy dwie połowy interakcji we Flashu: narzędzia stosowane przez użytkownika do komunikacji z Flashem i metody używane we Flashu do obsługi tych akcji. Staraliśmy się przykazać ci informacje, które posłużą ci za podwaliny do tworzenia większych i bardziej złożonych interaktywnych elementów. Teraz przejdziemy do kompletnych systemów menu. Każda dobra witryna internetowa potrzebuje dla użytkowników intuicyjnej metody nawigacji przez jej zawartość, a Flash jest szczególnie efektywny w tworzeniu ich — bez względu na to, czy są one osadzone w stronie HTML, czy stanowią część większego filmu Flasha. Systemu menu pojawiają się w zaskakującej liczbie odmian, lecz wszystkie one są oparte na tej samej strukturze: na grupie przycisków tworzących razem funkcjonalny system. Przyciski te mogą być ustawione w pionowej kolumnie, lub też mogą pływać w trójwymiarowej rzeźbie Flasha o dowolnej formie, lecz zastosowanie ich nie zmienia się. Przyciski w menu również mogą różnie reagować po kliknięciu na nich. Niektóre menu składają się z prostych przycisków, które przenoszą użytkowników do określonej sekcji filmu lub witryny internetowej, podczas gdy inne składają się z kilku poziomów, gdzie przycisk ukazuje nowy zestaw opcji. Jako projektant, musisz zwracać uwagę na rodzaj i ilość
Rozdział 9-237
informacji, jaką chcesz przedstawić i wybrać najbardziej wydajną i estetyczna metodę wyświetlenia jej.
Proste menu Wielu ludzi uważa, że system nawigacyjny powinien być technologicznie imponujący, lecz chociaż cecha taka nie jest szkodliwa, najważniejszą rzeczą do zapamiętania podczas projektowania struktury menu jest łatwość w obsłudze. Nie projektuj na tyle skomplikowanych rzeczy, że użytkownicy zirytują się, gdy będą chcieli szybko się gdzieś dostać, a nie będą wiedzieli jak. Unikaj również takich projektów, w których użytkownik musi być strzelcem wyborowym, aby umieścić kursor myszy na jednym z szybko poruszających się przycisków. Rozpoczniemy nasze studium systemów menu od najprostszej odmiany. W następnym ćwiczeniu utworzymy bardzo prosty poziomy pasek menu, który będzie przenosić użytkownika do różnych sekcji w filmie Flasha. Ten typ menu jest nie tylko łatwy do wykonania, lecz również jest jednym z najlepszych: jeśli projekt składa się tylko z kilku kategorii pasek taki będzie najbardziej eleganckim rozwiązaniem. Tworzenie prostego menu
Pierwszą rzecz, jaką potrzebujemy do menu, to kilka przycisków. Stare przyciski jednak nie wystarczą. Elementem, dzięki któremu menu staje się prawdziwym menu, jest jednolity projekt. Przyciski w menu albo powinny wyglądać tak samo, albo z jakiegoś ważnego powodu nie powinny wyglądać tak samo. Wówczas lepiej wykonać rysunek dla każdego stanu przycisku w formie oddzielnego symbolu, a następnie zastosować je do utworzenia pozostałych przycisków. Tworzenie przycisków w ten sposób zmniejsza również rozmiar filmu. Pamiętaj, że każdy stan przycisku może zawierać cokolwiek, od statycznych rysunków po klipy filmowe, dźwięki i skrypty. Możesz dodać tekst potrzebny dla danego przycisku podczas tworzenia poszczególnych przycisków. Jeśli potrzebny jest tekst, utwórz nową warstwę w przycisku — wówczas jeśli chcesz aby tekst zmieniał się pomiędzy stanami przycisku, wstaw ujęcia kluczowe na warstwie tekstu, i dokonaj potrzebnych zmian. Po wykonaniu jednego przycisku, skopiuj go aby utworzyć pozostałe. W skopiowanych przyciskach będziesz wtedy musiał jedynie edytować warstwy tekstowe.
Powyższy rysunek przedstawia bibliotekę i obrazek klipu filmowego Simple_Menu znajdujące się w pliku SimpleMenu.fla na płycie CD-ROM. Jak widać po nazwach symboli, konstrukcja przycisków oparta jest na moich wskazówkach, a same przyciski zawarte są w Rozdział 9-238
klipach filmowych. Nawet jeśli przyciski będą tylko na scenie, umieszczanie grup elementów takich jak przyciski menu w klipach filmowych jest świetnym sposobem na zorganizowanie pracy i ułatwienie sobie edycji filmów. Aby menu to zrobiło coś użytecznego, umieścimy je w lewej ramce na stronie HTML, a przyciski będą przenosić do stron o nazwach home.html, about.html i tak dalej, które będą ładowane w prawej ramce tej samej strony. 1. Naszym pierwszym zadaniem wiec jest dodanie funkcji obsługi zdarzenia on (release) dla każdego przycisku w klipie filmowym. Otwórz plik w formacie FLA, a następnie otwórz umieszczony w nim klip filmowy Simple_Menu. Kliknij na przycisku Home aby go zaznaczyć i wywołaj okno dialogowe Object Actions. Wpisz poniższy kod: on (release) { getURL ("home.html", "target"); }
W tym fragmencie drugi argument przenoszony do instrukcji getURL służy do zdefiniowania okna przeglądarki, w którym powinna został załadowana strona. Gdy zajmiemy się zaprojektowaniem strony, będziemy musieli pamiętać, aby nadać nawę target prawej ramce, o której wspomnieliśmy. Pozostałe przyciski zawierają ten sam skrypt, lecz wyraz "home" został zastąpiony odpowiednim wyrazem dla danego przycisku. Aby zaoszczędzić na czasie wprowadziliśmy już kod ActionScript dla pozostałych przycisków aa ciebie. 2. Po napisaniu wszystkich funkcji obsługi musimy we Flashu wykonać jeszcze jedną rzecz, a mianowicie zmienić rozmiar filmu i dopasować go do zawartości na scenie. Musimy to zrobić dlatego, że gdy film umieszczony jest w ramce, zeskaluje ona film aby pasować do swoich wymiarów. Oznacza to, że jeśli opublikujemy film, wówczas menu może zostać wyświetlone za małe — nadal będzie funkcjonalne, lecz bezużyteczne. 3. Wreszcie możemy opublikować film. W Procesie publikacji wygenerowany zostanie plik o nazwie SimpleMenu.html i jeśli tylko dołączyliśmy go do lewej ramki, wszystko powinno być w porządku. Poniżej umieściliśmy kod HTML dla kontrolowania strony TestMenu.html, która znajduje się na płycie CD-ROM:
Ten kod wygeneruje witrynę internetową wyglądającą tak:
Rozdział 9-239
Oczywiście można utworzyć bardziej skomplikowaną od tej, lecz ta strona służy tylko do celów demonstracyjnych.
Pływające menu Po utworzeniu naszego pierwszego menu możemy zastanowić się nad ulepszeniem go. Jeśli projektowane przez ciebie menu ma być zastosowane w witrynie napisanej w języku HTML (czyli takiej, jaką mamy tutaj), wówczas obszar przeznaczony na elementy interfejsu jest dosyć ograniczony. W takich przypadkach menu takie jak to zaprojektowane w poprzednim ćwiczeniu (lub jego poziomy odpowiednik) jest dosyć powszechnie stosowane. Jeśli jednak projektujesz większy film Flasha, którego menu jest jedynie częścią, masz większą swobodę w projektowaniu kształtu i działania menu. W następnym ćwiczeniu przekształcimy nasze proste menu w pływającą paletę menu. To menu będzie można przeciągnąć w dowolne miejsce w obrębie filmu Flasha, i również będzie je można złożyć, jak wszystkie palety w samym Flashu. Pływające menu świetnie nadają się do stosowania w filmach Flasha zawierających wiele rysunków o rozmiarach porównywalnych z samą sceną. Menu może być półprzezroczyste, a nawet może zawierać cień aby nadać mu trójwymiarowy wygląd. Tworzenie pływającego menu
Dla potrzeb tego ćwiczenia będziemy potrzebować kopię naszego prostego menu, nowy klip filmowy i dwa przyciski. Jednym z przycisków będzie pasek przeciągania dla górnej części palety, a drugi przycisk służyć będzie do zwijania okna. Ich łączna szerokość powinna być odrobinę mniejsza od szerokości menu — mniej więcej tak, jak na rysunku. Nowe symbole przycisków o nazwach Button_Grab i Button_Open znajdziesz na płycie CD-ROM w pliku FloatingMenu.fla.
Teraz po prostu zastosujemy kilka sztuczek, których nauczyłeś się we wcześniejszej części rozdziału, aby menu stało się bardziej dynamiczne. 1. Zaznacz na scenie menu i przyciski i przekształć je w klip filmowy o nazwie Floating_Menu. Wejdź do tego klipu filmowego, nadaj warstwie 1 nawę Menu i w ujęciach 1 i 2 wstaw ujęcia kluczowe:
Rozdział 9-240
2. Usuń zawartość z pierwszego ujęcia kluczowego i utwórz dwie nowe warstwy o nazwach Buttons i Background. Przeciągnij warstwę Background na dół listy warstw. 3. W drugim ujęciu na warstwie Menu wytnij dwa małe przyciski ze sceny i wklej je specjalnie (Paste in Place) na warstwie Buttons. Następnie w drugim ujęciu na warstwie Buttons wstaw ujęcie kluczowe. 4. Teraz przejdź do warstwy Background, zaznacz ujęcie 2 tak, abyś nadal widział menu umieszczone pod spodem i narysuj dopasowany prostokąt wokół menu i przycisków:
5. Następnie dodaj drugie ujecie kluczowe w ujęciu 2 na warstwie Background, kliknij z powrotem na pierwszym ujęciu i zeskaluj prostokąt pionowo, aby pokrywał tylko dwa przyciski na górze:
6. Skoro już wszystko poprawnie rozmieściliśmy, musimy dodać skrypty przycisków. Zaznacz przycisk Button_Grab w ujęciu 1 i wpisz prosty skrypt przeciągania, podobny do skryptu zastosowanego w ćwiczeniu z przyciskiem do przeciągania: on (press) { startDrag (“”, false); } on (release) { stopDrag (); }
Rozdział 9-241
7. Powtórz ten kod w drugim ujęciu, a następnie, nadaj w ujęciu 2 zaznacz przycisk Button_Open i wpisz w okno dialogowe Object Actions poniższy kod: on (release) { gotoAndStop (1); }
8. Następnie powróć do ujęcia 1, ponownie zaznacz przycisk Button_Open i wpisz poniższy kod: on (release) { gotoAndStop (2); }
9. Na koniec musimy jeszcze dodać ostatnią warstwę o nazwie Actions nad warstwą Buttons. Jeśli nie zastosujemy akcji stop, film ten będzie odtwarzany ciągle, nie zwracając uwagi na klikanie przyciskiem myszy. Na nowej warstwie wstaw dwa ujęcia kluczowe i w każdym umieść akcję stop. I już, teraz możesz przetestować film. Menu powinno dać się przeciągnąć gdy klikniesz na pasku przeciągania, a po kliknięciu na przycisku zwijania powinno się zwinąć. Skoro już wiesz, w jaki sposób można połączyć podstawowe elementy przycisków i menu, zajmiemy się teraz innymi rodzajami menu — poziomym i pionowym. Zamiast ponownie tłumaczyć tworzenie menu i przycisków przedstawimy ci najważniejsze techniki użyte w każdym przykładzie, abyś mógł je zastosować we własnych projektach.
Horyzontalne hierarchiczne menu We Flashu można tworzyć menu na wiele sposobów, lecz większość z nich są odmianami typów menu, jakie omówiliśmy do tej pory. Jednym bardzo popularnym systemem menu są menu hierarchiczne, czyli proste menu z przyciskami, które, po kliknięciu na nie, ujawniają kolejny zestaw przycisków. Menu tego typu stosuje się wówczas, gdy masz zbyt wiele opcji i nie mógłbyś ich wyświetlić na raz. Na przykład, załóżmy, że projektujesz swoją własną witrynę internetową do zademonstrowania swoich dokonań. Wówczas mógłbyś wykonać menu składające się z takich przycisków jak Dom, O witrynie, Ofertówka, Resume i Kontakt. W tym przypadku może trzeba by było rozbić sekcje Ofertówka, na podsekcje zawierające twoje rysunki, kompozycje wykonane w Photoshopie i kompozycje wykonane we Flashu. Przy pomocy hierarchicznego menu będziesz mógł zaprojektować system menu, który ładowałby stronę HTML po kliknięciu na jeden z przycisków, lecz wyświetlałby podkategorie po kliknięciu na przycisk Ofertówka. Podczas tworzenia bardziej złożonych systemów menu należy zastanowić się, w jaki sposób menu zostanie dołączone do głównej witryny. Można tego dokonać na dwa sposoby. Menu może stanowić część dużego filmu, więc wówczas przyciski menu przenosiły użytkownika do różnych części filmu. Z perspektywy projektanta we Flashu, ta metoda jest najłatwiejsza do zastosowania, gdyż w takim przypadku projektant nie musiałby się mozolić ze zbyt wieloma ograniczeniami przestrzeni — menu takie nie musi znajdować się w określonej ramce, czy ramce głównej. Możliwe jest również zastosowanie efektów specjalnych i przejść dla rozwijającego się dalej menu. Wadą takiej metody jest utrata elastyczności i łatwości w utrzymaniu. Gdy cała witryna zaprojektowana jest w formie filmu Flasha, jakakolwiek aktualizacja witryny wymaga edycji głównego filmu. Inny sposobem włączenia menu do witryny jest osadzenie menu na stronie HTML. Zaleta tej techniki jest taka, że menu, jest najmniej podatnym na zmiany elementem witryny, więc po umieszczeniu go w witrynie, można aktualizować strony po prosty poprzez edycję kodu Rozdział 9-242
HTML. Największym problemem jest konieczność stosowania ramek, z menu w jednej ramce i zawartością w innej. Jeśli nie użyjesz ramek, nie masz gwarancji, że menu pozostanie dostępne w pamięci podręcznej przeglądarki pomiędzy stronami, a wówczas może okazać się koniecznym ponowne ładowanie menu dla każdej strony, co dramatycznie zwolni funkcjonowanie witryny. Osobiście nie mam nic przeciwko witrynom z zastosowaniem ramek w celach nawigacyjnych, jeśli tylko projektant ukryje wszystkie widoczne ślady po samych ramkach, lecz wiele osób jest zdecydowanie przeciwnych stosowaniu ramek w projektowaniu witryn internetowych. Każdy ma swoje subiektywne podejście do tej kwestii. Do utworzenia takiego menu zastosujemy klip filmowy z ujęciem kluczowym dla każdej sekcji i przyciskiem dla każdej głównej kategorii. Jak zwykle zacznij od utworzenia nowego klipu filmowego i określ liczbę sekcji, jaka znajdzie się w menu — ja wybrałem cztery:
Na powyższym rysunku przedstawiającym kolejny etap procesu tworzenia menu, możesz już zaobserwować sposób działania menu. Pasek (Bar) i cztery przyciski (About, Contact, Home, Portfolio) umieszczone na nim, są stałymi elementami tego klipu filmowego. Cztery znaczniki skryptu widoczne na warstwie Actions wskazują na zastosowanie akcji stop, a etykiety przypisane do każdego z nich oznaczają, że w kodzie do obsługi przycisków będziemy mogli umieścić film w wybranym przez nas miejscu. Gdy będziemy chcieli wyświetlić podmenu, umieścimy nowy klip filmowy na warstwie Sub-menus, w pozycji odpowiadającej odpowiedniej etykiecie. Ponieważ zamierzamy stosować etykiety ramek w celu przechodzenia z jednej sekcji do drugiej, nie jest istotne, gdzie umieścisz te ramki, ani w jakiej kolejności. Dla zachowania porządku ja zazwyczaj umieszczam je w odległości co 5 ujęć, tworząc w ten sposób wystarczająco dużo miejsca dla etykiet, które dodamy później. Po ostatnim ujęciu kluczowym możesz dodać kilka pustych ujęć, aby zostawić miejsce dla ostatniej etykiety.
Z klipem filmowym w tej pozycji następnym etapem będzie dodanie funkcji obsługi zdarzenia on (release) do każdego przycisku. Jak zazwyczaj, są one dosyć proste — instrukcja dla przycisku Home wygląda w następujący sposób: on (release) { gotoAndPlay ("Home"); }
Dla pozostałych przycisków instrukcja ta będzie wyglądać podobnie, lecz w miejsce “Home” należy wstawić odpowiednio “About”, “Portfolio” i “Contact”. W ten sposób Rozdział 9-243
przygotowaliśmy na razie element, który funkcjonalnością zbliżony jest do prostego menu. Skonstruowany jest w inny sposób, lecz jeśli byśmy umieścili całą zawartość witryny do tego klipu filmowego, całość działałaby tak samo. Jednakże możemy i zrobimy to lepiej. Do menu Portfolio dodamy podmenu poprzez wstawienie drugiego zestawu przycisków w drugim klipie filmowym i umieszczenie go w odpowiednim miejscu na warstwie Sub-menus. Na warstwie tej wstaw ujęcia kluczowe odpowiadające tym na warstwie Actions i przejdź do ujęcia 15. Ja utworzyłem mniejszą wersję głównego paska z kilkoma nowymi przyciskami na nim:
Teraz, gdy klikniesz na przycisk Portfolio, film przejdzie do ujęcia zawierającego dodatkowy zestaw przycisków dla tej sekcji. Aby przejść do następnego etapu, oczywiście należy do instrukcji przycisków podmenu dodać komendy „go to frame” lub „URL” — lecz nie jest to celem naszego ćwiczenia. Udało nam się wykonać nie zajmujące dużo miejsca, poziome, hierarchiczne menu, czyli dokładnie to, co chcieliśmy!
Pionowe hierarchiczne menu Poziome menu jest dosyć proste, a jego największa zaleta jest prawdopodobnie łatwość dodawania jednego lub kilku poziomów informacji do struktury witryny bez zabierania zbyt dużo miejsca na interfejsie. Niestety, konstrukcja poziomego menu nie przekłada się dobrze w format pionowy. Gdy chcesz rozwinąć w dół opcję z głównego menu, aby uzyskać dostęp do podmenu, wszystkie elementy menu pod opcjami z podmenu zostaną ukryte. Na wielu witrynach stosuje się pionowe hierarchiczne menu z podmenu rozwijanymi na bok menu. Wada takiego typu menu jest ilość zajmowanego przez nie miejsca, co jest nie do zaakceptowania, zwłaszcza jeśli użyjesz menu wykonane we Flashu na stronie HTML. Jednym rozwiązaniem tego problemu jest zastosowanie menu rozwijającego się pionowo. W celu zastosowania tego rodzaju menu należy skonstruować menu podobne do poziomego, tworząc inne układy dla każde elementu menu. Lecz, skoro jest to już ostatnie ćwiczenie w tym rozdziale, zróbmy coś bardziej wymyślnego. W poprzednim przykładzie staraliśmy się maksymalnie ograniczyć zastosowanie skryptu. W tym użyjemy go o wiele więcej. Wykonamy menu o dynamicznej hierarchicznej strukturze. Każdy elementem menu będzie klipem filmowym zawierającym własne pozycje podmenu. Zastosujemy tablice do przechowywania informacji o klipach filmowych i ich rozmieszczeniu na scenie w danym momencie.
Rozdział 9-244
Sekret tego systemu menu leży w sposobie obsługi wszystkiego, co się dzieje po wciśnięciu przycisku menu. Gdy jeden przycisk się rozwinie, pozostałe należy przesunąć w dół, a odległość, o jaką powinny być przesunięte, zależy od liczby podmenu dołączonych do przycisku głównego menu. Wyraźmy tą sytuację trochę bardziej formalnie. Gdyby menu składało się z czterech przycisków, a ty klikniesz, powiedzmy, na pierwszym wówczas przyciski 2, 3 i 4 musiałby zostać przesunięte. Gdybyś kliknął na drugim, wówczas wystarczyłoby przesunąć przyciski 3 i 4. Najlepiej poradzimy sobie z tym problemem poprzez zastosowanie pętli, która będzie odtwarzana dla wszystkich przycisków, dlatego też przechowamy wszystkie klipy filmowego menu w tablicy o nazwie MenuArray. Przechowamy również dla każdego menu w oddzielnej tablicy wartości przesunięcia — czyli ilość pionowej przestrzeni zajmowanej przez rozwinięte menu. To jest jedyna informacja, jaką będziemy musieli wziąć pod uwagę podczas otwierania dowolnego menu. Zanim jednak zastanowimy się nad sposobem ich przemieszczania, najpierw zajmiemy się opracowaniem sposobu utworzenia trzech klipów filmowych przycisków menu (home, about i contact). Prawdę mówiąc, są to dosyć skomplikowane małe elementy, chociaż można również zauważyć pewne podobieństwa między nimi i menu, nad którymi pracowaliśmy wcześniej. Listwy czasowe dla tych trzech klipów filmowych, wyglądają jednak identycznie:
Rozdział 9-245
Co my tutaj mamy? Siedem warstw? Jednakże, nawet przy takiej pozornej złożoności projektu, nie powinniśmy mieć żadnych problemów z rozpracowaniem go, jeśli tylko zaczniemy go analizować od góry do dołu. Na początku mamy już tradycyjną warstwę Actions, która zgrabnie dzieli klip filmowy na stany „w górę” i „w dół”. Gdy główny przycisk jest „w górze”, czyli nie jest rozwinięty, na scenie widoczny jest przycisk, jego nazwa i tajemniczy element o nazwie spacer. Gdy przycisk jest „w dole”, na scenie widoczne są również cztery przyciski podmenu i łącząca je pionowa linia:
Przedstawione na rysunku strzałki tworzą jedynie część przycisków podmenu. Na prawo znajdują się ich pola tekstowe, zawierające biały tekst „sub-menu”. Stanie się on widoczny, gdy umieścimy klipy filmowe na czarnym tle.
Klip filmowy Menu1 składa się zatem z jednego przycisku głównego menu i czterech przycisków podmenu, które wyświetlane są po kliknięciu na główny przycisk. Gdy klikniemy na ten przycisk po raz drugi podmenu zostanie ponownie ukryte. Opisanemu przyciskowi towarzyszy w tym filmie klip Menu2, oznaczony etykietą Action i posiadający dwa podmenu, a także Menu3 (czyli Contact). Po utworzeniu wszystkich trzech klipów (a jeszcze lepiej, po załadowaniu pliku Vertical.fla z płyty CD-ROM) możemy kontynuować pracę. Z gotowymi przyciskami menu możemy wreszcie przystąpić do utworzenia klipu filmowego Menu, na którym umieścimy przyciski. Na pierwszy rzut oka będzie to dosyć proste: dwie warstwy (dla tła i przycisków) i dwa ujęcia (po jednym dla każdego kodu ActionScript):
Rozdział 9-246
Trzem klipom filmowym nadaliśmy nazwy kopii odpowiednio menu1, menu2 i menu3. Możemy je zastosować do przygotowania funkcji, które zostaną wywołane po wciśnięciu przycisków, aby zrobić miejsce dla rozwinięcia podmenu w pionie. Ujęcie 2 na warstwie Buttons jest proste — zawiera ono jedynie akcję stop — lecz w ujęciu 1 musimy wykonać trochę więcej pracy. Najpierw przedstawimy kod, a następnie go omówimy: MenuArray = new array(1); MenuArray[1] = menu1; MenuArray[2] = menu2; MenuArray[3] = menu3; offset = new array(1); offset[1] = menu1._height; offset[2] = menu2._height; offset[3] = menu3._height; function up(men_num) { var men_offset = offset[men_num] — 30; men_num++; for(i = men_num; i <= 3; i++) { MenuArray[i]._y = MenuArray[i]._y — men_offset; } } function down(men_num) { var men_offset = offset[men_num] — 30; men_num++; for(i = men_num; i <= 3; i++) { MenuArray[i]._y = MenuArray[i]._y + men_offset; } }
Ten skrypt wykonuje dwie czynności. Po pierwsze, inicjuje dwie tablice, o jakich już wspomnieliśmy, gdzie wreszcie wyjaśni się zastosowanie tajemniczego elementu „spacer”. Pamiętaj: umieściliśmy go dokładnie u dołu klipów filmowych rozwiniętych menu, więc własność _height będzie zawierać odległość, o jaką pozostałe menu należy przesunąć po rozwinięciu jednego z nich.
Rozdział 9-247
Funkcje up i down zostaną wywołane przez funkcję obsługi zdarzenia on (release) przycisków menu i jak widać są one dosyć krótkie i bardzo do siebie zbliżone. Różnią się tym, że funkcja up odejmuje wartość przesunięcia od wartości _y bieżącego menu, a funkcja down dodaje wartość przesunięcia. Podczas wywoływania tych funkcji, menu przekaże własną liczbę jako argument — więc jeśli menu2 wywoła swoją liczbę, zmienna men_num będzie równać się 2. Pierwszą czynnością wykonaną przez tą funkcję jest zdefiniowanie jej wewnętrznej zmiennej men_offset poprzez zastosowanie zmiennej men_num w celu sprawdzenia wartości z tablicy offset. Teraz, menu, na które klikamy nie rusza się, a jedynie menu umieszczone poniżej, dlatego też następnym krokiem będzie zwiększenie wartości zmiennej men_num. Na koniec mamy pętlę for, która odtwarzana jest dla wszystkich menu poniżej menu, na którym kliknęliśmy i przesuwa je o odległość równą wartości przesunięcia tego menu. Już naprawdę na zakończenie musimy dodać funkcje obsługi zdarzenia on (release) dla klipów filmowych przycisków menu, które wywołają właśnie napisane przez nas funkcje up i down i przełączą przyciski pomiędzy ich stanami Up i Down. Jak pamiętasz, każdy przycisk zawiera na listwie czasowej dwa ujęcia kluczowe, więc dla każdego potrzebne są dwie instrukcje. Z natury tworzy się na podstawie symetrycznego wzoru. Poniżej przedstawiliśmy dwie instrukcje (ujęcie 1, ujęcie 10) dla klipu menu1: on (release) { _parent.down (1); } on (release) { _parent.up (1); gotoAndStop ("up"); }
Po dodaniu podobnych instrukcji dla menu2 i menu3 możesz uznać pracę za zakończoną! W kolejnych rozdziałach będziesz miał więcej okazji do odkrywania zasad pisania skryptu, lecz na razie napisałeś całkiem niezły niewielki skrypt filmowy. To menu jest niezwykle użyteczne, ponieważ umożliwia przechowywanie wielu opcji na niewielkim obszarze. Możesz, w razie potrzeby, nawet dodać kolejny poziom podmenu. Przy bardzo niewielkiej liczbie poprawek możesz utworzyć menu używające naszych filmów głównego menu jako elementów menu.
Zakończenie Gdy dodajesz interaktywność do swoich witryn internetowych, wiesz wówczas, że maksymalnie wykorzystujesz możliwości Flasha. Dobry interfejs powinien nie tylko płynnie reagować, lecz również być bardzo intuicyjny. Właśnie najmniejsze poprawki stwarzają największe wrażenie. W tym rozdziale staraliśmy się przedstawić ci podstawowe sposoby dodawania interaktywności do filmów Flasha, a także kilka sztuczek ułatwiających pracę na projektem. Możliwości, jednakże, są nieograniczone. Wraz z rozwojem potencjału Flasha i udoskonalaniem kodu ActionScript jako języka skryptowego, będziesz, jako projektant we Flashu, dysponować coraz większą bazą możliwości wyrażania własnego stylu w projektach. Najpierw zdecyduj, jak mają zachowywać się poszczególne elementy w twoim filmie, a następnie spróbuj opracować metodę realizacji tych zamierzeń. Najlepiej można się nauczyć poprzez działanie.
Rozdział 9-248
Część 3. ActionScript
Rozdział 10 Podstawy programowania w środowisku ActionScript ActionScript jest najprawdopodobniej najpotężniejszym narzędziem dostępnym dla programistów tworzących we Flashu. wraz z wersją 5. Flasha, ActionScript stał się raczej normą a nie wyjątkiem, i wykorzystywany jest w prawie każdej nowej witrynie Flasha czy animacji. Różnorodność, dynamizm i bogactwo ActionScript sprawiają, że Flash jest programem niedoścignionym przez swoich rywali, a sam język programowania jest zdecydowanie silnikiem prawie wszystkich witryn internetowych wykonanych we Flashu, które naprawdę powalają swym wyglądem. W tym rozdziale omówimy właściwości podtrzymujące moc kodu ActionScript jako języka programowania na własnych prawach. Pragniemy pomóc ci w traktowaniu twoich filmów i zawartości witryn internetowych jako programowalnych systemów, a także przedstawić ci, w jaki sposób możesz polepszyć kodem ActionScript swoje strony internetowe i tworzyć świetne interfejsy użytkownika, jak również kompletne aplikacje internetowe prawdziwie funkcjonalne i o niewielkich rozmiarach plików. Flash posiada obecnie siłę i elastyczność dojrzałego języka programowania, a także możliwości zastosowania technologii back-end (czyli baz danych i innych źródeł danych) i graficznych interfejsów, które pracują na reputację Flasha. We Flashu 5 język ActionScript został zmodernizowany do kompletnego języka skryptowego z zastosowaniem specyfikacji ECMA-262 będącej standaryzowaną hybrydą wielu technologii, z których najpopularniejszą są języki JavaScript i JScript. Język programowania jest przede wszystkim narzędziem umożliwiającym pisanie ciągów instrukcji, które można przeprowadzać przy zaistnieniu określonych zdarzeń. We Flashu skrypty napisane w języku ActionScript można uruchamiać z ujęcia w momencie dotarcia do niego wskaźnika odtwarzania, lub też uruchamiać za pomocą zdarzeń wywołanych poprzez aktywne elementy na ekranie, takie jak klipy filmowe, przyciski i kursor myszy. Rozpoczniemy od omówienia głównych właściwości języka programowania ActionScript.
Rozdział 10-249
Najważniejsze zagadnienia programowania W przypadku prostych skryptów, jak na przykład zastosowanie poleceń stop do zachowania zawartości filmu na ekranie bez ciągłego odtwarzania filmu, lub użycie polecenia goto w celu przejścia do danego ujęcia po wciśnięciu przycisku, nie jest konieczne dogłębne zrozumienie teorii programowania i składników języka programowania. Jednakże, gdy przyzwyczaisz się już do kodu ActionScript, będziesz chciał realizować coraz bardziej złożone plany w tworzonych prze ciebie filmach. Wówczas właśnie zrozumienie zagadnień, na których oparta została struktura i składniki języka ActionScript we Flashu 5 jest niezbędne. Zacznijmy od podstawowej struktury programowanie przechowującej dane w programach, czyli od zmiennej.
Zmienne Zmienne są to po prostu pojemniki na dane. Jako dane można zastosować cokolwiek — od nazwiska do liczby kontrolującej prędkość, z którą klip filmowy przesuwa się po ekranie. Kluczowe zagadnienia związane ze zmiennymi są następujące: • Nadajesz zmiennej nazwę, do której będziesz odnosić się w kodzie ActionScript. • Przypisujesz zmiennej wartość, która będzie przechowywana w tym nazwanym pojemniku. • Używasz nazwy do wydobycia wartości z pojemnika kiedykolwiek będzie ci ona potrzebna. W bardziej technicznych kategoriach, zmienna jest to definiowana przez użytkownika etykieta przypisana do określonej lokalizacji w pamięci komputera — jest to lokalizacja fizyczna, w której umieszczona została wartość. Nazwa zmiennej — etykieta — służy do ułatwiania ci życia: zamiast pamiętać dokładny adres pamięci fizycznej wartości, wystarczy nakazać komputerowi odnieść się do tej określonej sekcji pamięci (nie musisz nawet wiedzieć, gdzie ona jest) poprzez użycie etykietki, jaką zmiennej przypisałeś. Na przykład, rozważmy poniższy program: myName = “Richard”; print (myName);
W tym fragmencie pseudo-kodu tworzymy zmienną o nazwie myName i nadajemy jej — przypisujemy — wartość “Richard”. W cudzysłowie przechowujemy faktyczną wartość. Pojedynczy znak równości przypisuje wartość po prawej stronie znaku do nazwy zmiennej umieszczonej po lewej stronie znaku.
Po umieszczeniu wartości zmiennej myName w pamięci komputera, wartość ta zostaje wówczas wyświetlona na ekranie za pomocą funkcji drukowania (print) i nazwy zmiennej. Efekt tej operacji jest dokładnie taki sam jak po napisaniu programu jak poniżej: print (“Richard”);
Dlaczego więc w ogóle stosować zmienne? Dlatego, gdyż zmienne zaoszczędzają nam czasu i wysiłku spędzonych na programowaniu, a także zwiększają elastyczność programów. Pomyśl, co by się stało, gdybyś potrzebował program do wyświetlenia wyrazu „Richard” pięćset razy w rzędzie do utworzenia ładnego wzoru. Stosując metodę print (“Richard”), w której nazwa jest zakodowana w instrukcji drukowania, musiałbyś powielić tą instrukcję pięćset razy. Jak na razie, może być. Lecz co się stanie, jeśli zamiast „Richard” będziesz chciał Rozdział 10-250
wyświetlić „Mapes”? Używając wspomnianej metody musiałby ręcznie zmieniać każdy z tych pięciuset wierszy kodu na Mapes. Jednakże, jeśli zastosujesz do przechowywania tych nazwisk zmienną myName, wystarczy zmienić wartość tylko tej jednej zmiennej... myName = “Mapes”;
...i już nowa wartość zostanie rozprowadzona po całym programie i zastosowana we wszystkich miejscach wystąpienia zmiennej myName. W tym przypadku również mamy pięćset instrukcji o treści print (myName), lecz wystarczy tylko zmienić pierwszą z nich aby uzyskać właściwy efekt. Stosowanie tego samego kodu, lecz z różnymi wartościami nosi nazwę wieloużywalności. Flash umożliwia rozróżnianie pomiędzy odrębnymi typami zmiennych, dając nam w ten sposób jeszcze większą kontrolę i elastyczność w kodzie.
Rodzaje zmiennych Omówimy dwie kategorie zmiennych stosowanych we Flashu — zmiennej globalne i lokalne. To, czy dana zmienna jest globalna, czy lokalna zależy od jej zasięgu, czyli stopnia rozpowszechnienia wartości zmiennej w całym programie (lub, w przypadku Flasha, w filmie w formacie SWF). Do wartości zmiennych globalnych można uzyskać dostęp z dowolnego miejsca w filmie. Ze zmiennych globalnych każdy element filmu może wydobyć ich wartości (i oczywiście aktualizować). Jest to najczęściej stosowany typ zmiennych, ponieważ jest to domyślny typ zmiennej stosowany we Flashu. Podczas definiowania zmiennej w kodzie ActionScript poprzez wpisanie jej definicji w trybie Expert lub zastosowanie akcji set variable...
......ustanawiasz zmienną globalną myName do przechowania ciągu tekstowego „Richard’. Ta wartość będzie dostępna dla wszystkich klipów filmowych i skryptów w filmie. Ta metoda jest wystarczająca w większości przypadków, więc dlaczego w ogóle stosować zmienne lokalne? Nad użyciem tego typu zmiennej warto się zastanowić w przypadku zarządzania pamięcią. Pamięć coraz rzadziej zaprząta nam uwagę wraz z powstawaniem nowych zaawansowanych technologii, lecz dla uzyskania najszczuplejszego, najczystszego i najbardziej eleganckiego kodu, warto ją rozważyć. Podczas definiowania zmiennej globalnej zmienna ta zajmie całą zarezerwowaną pamięć komputera. Nawet, jeśli zmienna ta stosowana jest tylko raz, czy dwa w całym filmie Flasha, ta sekcja pamięci zostaje zarezerwowana dla jednej wartości. Przy odtwarzaniu pochłaniającego pamięć filmu zawierającego wiele zmiennych, użycie zmiennych globalnych może spowodować gorsze odtwarzanie filmu. Można poradzić sobie z tym problemem poprzez zastosowanie zmiennych lokalnych. Dla zmiennych lokalnych, sekcja pamięci, w której przechowywana jest dana zmienna zarezerwowana zostaje tylko dla określonego w programie czasu, po którym można ją
Rozdział 10-251
ponownie wykorzystać. Na przykład, jeśli masz fragment kodu ActionScript zawierającego zmienną „loop counter (licznik pętli)” do rejestrowania liczby odtwarzania animacji i jeśli zdefiniowałeś ten liczniki jako zmienną lokalną, zmienna ta będzie zajmowała pamięć tylko podczas realizacji pętli. Po odtworzeniu animacji wybraną liczbę razy zakończeniu pracy licznika, zmienna zostanie zniszczona, uwalniając tym samym zajmowaną przez nią pamięć. Gdyby została ona zdefiniowana jako zmienna globalna, nadal zajmowałaby pamięć nawet po ukończeniu liczenia pętli animacji. Zmienne lokalne można potraktować jako metodę wykorzystywana przez program do sprzątania po sobie, usuwając niepotrzebne śmieci po użyciu ich. Aby zdefiniować zmienną lokalną we Flashu 5 należy rozpocząć wiersz od słowa kluczowego var:
Zatem, co można przechowywać w zmiennej? W zasadzie to wszystko. Lecz aby zachować porządek i umożliwić nam upewnienie się, że zastosowaliśmy właściwy rodzaj zmiennej dla właściwego zadania, Flash, podobnie jak inne języki programowania, definiuje liczbę różnych typów danych, z których każdy posiada inne właściwości i każdym można manipulować na inne sposoby.
Rodzaje danych Do przechowywania każdej kategorii wartości służą inne rodzaje danych. Poniższe wiersze wszystkie zawierają zmienne i ich wartości w kodzie ActionScript: age = 17; title = “Flash 5”; isAVariable = true;
Każde z tych przypisań, jednakże reprezentuje inny typ danych. Typ danych, jak można się tego spodziewać, opisuje naturę danych zawartych w zmiennej. W kodzie ActionScript Flasha 5 dostępnych jest kilka typów danych. Poniżej przedstawiliśmy krótkie opisy każdego z nich. Liczba Jest to najprostszy typ danych, który definiuje zmienną po prostu jako wartość numeryczną: x = 24; y = 6;
Rozdział 10-252
Do zmiennych typu liczbowego można przypisywać operacje matematyczne. Na przykład, stosując powyższe liczby możesz dodać zmienne x i y w następujący sposób — x + y — i uzyskasz wynik 30. Ciąg Ten typ zmiennych zawiera grupę znaków umieszczonych w cudzysłowie. Przykład: x = “Hello”;
Ten rodzaj wartości to wartość literalna — co oznacza, że Flasha zawsze będzie generować znaki dokładnie takie, jak umieszczone w cudzysłowie. Ciągi traktowane są inaczej niż liczby pod tym względem, że po dodaniu dwóch ciągów razem zostają one połączone, czyli spięte. Na przykład, jeśli zastosujesz dwie poniższe zmienne ciągów: x = “24”; y = “6”;
...a następnie zastosujesz instrukcję x + y aby je dodać, uzyskasz wynik “246”, gdyż dwa ciągi zostały po prostu ze sobą połączone. Jednakże, jeśli się zastanowić, nie można normalnie pomnożyć dwóch ciągów: gdy jakaś wartość, nawet liczba, przechowywana jest jako ciąg, staje się ona wartością literalną, a przecież nie chciałbyś pomnożyć na przykład “Richard” przez “Mapes”, prawda? Zmienne boole’owskie Zmienna boole’owska może posiadać jedynie jedną lub dwie wartości: true lub false. Ten rodzaj zmiennych stosowany jest do szacowania rzeczy, co zazwyczaj oznacza stan lub status innych zmiennych. Przykład: isMyNameRichard = true; isMyNamePlantagenet = false;
Zmienne boole’owskie są powszechnie stosowane do sprawdzenia, czy określony warunek istnieje przed wykonaniem następnego fragmentu kodu. Na przykład, jeśli masz program, który ma sprawdzić, czy hasło użytkownika jest poprawne, zanim będziesz kontynuować, instrukcja będzie wyglądała następująco: if (isPasswordCorrect == true) then proceed
Zauważ, że gdy sprawdzasz, czy zmienna równa się określonej wartości lub warunkowi, stosujesz w tym celu podwójny znak równości. Ten znak nosi nazwę operatora równości i służy on do sprawdzania, czy wartość lub wyrażenie po prawej stronie znaku jest równe zmiennej czy wyrażeniu po lewej. Należy zapamiętać różnice pomiędzy podwójnym (operator równości) i pojedynczym znakiem równości, noszącym nazwę operator przypisania, który stosowany jest do określenia wartości zmiennej.
Rozdział 10-253
Obiekty i klipy filmowe Obiekty to, w kategoriach programowania, grupy własności posiadające nazwy i wartości. Flash zawiera wbudowane obiekty, jak na przykład obiekt Math, który umożliwia przeprowadzanie kolekcji predefiniowanych operacji matematycznych. Wiele kompozycji wykonanych we Flashu, a w szczególności klipy filmowe, są przede wszystkim obiektami. Oznacza to, że gdy tworzysz klip filmowy, dziedziczy on te same standardowe cechy jak wszystkie inne klipy filmowe. Na przykład, załóżmy że tworzysz symbol klipu filmowego wyświetlający na ekranie piłkę. Klon tego klipu filmowego umieszczony na scenie i nazwany BallClip będzie posiadał wszystkie domyślne właściwości klipów filmowych Flasha — czyli szerokość _width, wysokość _height i przezroczystość _alpha. Możesz zobaczyć te właściwości dla pojedynczego obiektu na scenie poprzez zaznaczenie go i otwarcie pozycji Properties w oknie Object Actions:
Możesz odnieść się do tych właściwości w kodzie i przypisać ich wartości zmiennym. W podobny sposób możesz przypisać właściwościom obiektu wartości przechowywane w innych zmiennych. W kodzie ActionScript możesz przypisać właściwości _alpha tego klipu filmowego określoną wartość poprzez zdefiniowanie zmiennej a następnie zastosowanie notacji kropkowej Flasha do przypisania tej wartości do jednej z właściwości klipu filmowego: alphaValue = 50; BallClip._alpha = alphaValue;
W podobny sposób bierzesz wartość właściwości obiektu i przypisujesz ją zmiennej: widthValue = BallClip._width;
Już rozumiesz, że metody te elementy te dają nam cenne metody przenoszenia danych w filmie i wprowadzania dynamicznych modyfikacji.
Rozdział 10-254
Stałe i literały Stała, w większości języków programowania, jest predefiniowana zmienną, której nigdy nie można zmienić programatycznie w trakcie działania programu, a jedynie odczytać, podobnie jak pamięć stałą w komputerze w porównaniu do pamięci operacyjnej RAM. Rozważmy, na przykład, stałą pi (3.14 i tak dalej). Usiłowanie zmodyfikowania wartości pi byłoby bez sensu, podobnie jak próbowanie zmiany koloru nieba, który jest po prostu nadany. We Flashu nie można zdefiniować zmiennej jako zmiennej stałej: wszystkie zadeklarowane przez ciebie zmiennej będą modyfikowalne w kodzie w trakcie działania programu. Flash zawiera jednak zestaw predefiniowanych stałych: na przykład, właściwościom wbudowanego obiektu Key — Key.SPACE zawsze będzie przypisana wartość wciśnięcia spacji i nie można ich zmodyfikować, aby przechowywały inną wartość. Operatory Operatory są to symbole, które wykonują pewien rodzaj przetwarzania zmiennych. Wspomnieliśmy już o operatorach przypisania i operatorach równości. Kilkoma pozostałymi najlepiej znanymi operatorami są operatory arytmetyczne (*, +, -, /), a także bardzo wiele innych typów, jak na przykład operatory porównania, które bardzo często będziesz widzieć w tym podręczniku: < > <= >=
(mniejszy od) (większy od) (mniejszy lub równy) (większy lub równy)
Operatory porównania, podobnie jak operator równości, są niezwykle przydatne podczas sprawdzania warunków, od których zależny jest dalszy kod. Operatory we Flashu poukładane są według kolejności pierwszeństwa podobnie jak w matematyce. Kolejność pierwszeństwa dla podstawowych operatorów arytmetycznych jest *, /, +, -. Oznacza to, że mnożenie w wyrażeniu zawsze będzie przed dodawaniem. Zatem: 1 + 2 * 3 = 7, ponieważ najpierw rozwiązujemy mnożenie 2 * 3, a dopiero potem dodajemy do wyniku 1. Aby zmienić tą domyślną kolejność pierwszeństwa, należy umieścić część wyrażenia w nawiasach. Wyrażenia w nawiasach zawsze oblicza się przed innymi. Zatem: (1 + 2) * 3= 9, ponieważ 1 + 2 obliczamy najpierw, a następnie mnożymy wynik razy 3. Skoro już omówiliśmy podstawowe elementy, przejdźmy do przedstawienia sposobów zastosowania ich do ukształtowania struktury programu, które będą pasowały do filmu i przekształcą go w coś o wiele bardziej interesującego niż zestaw prostej animacji automatycznej odtwarzanych jedna po drugiej.
Struktury programowania w języku ActionScript Poziom składników, których do tej pory przedstawiliśmy, można porównać z alfabetem i ortografią stosowanymi w języku pisanym: zmienne wówczas byłby literami, a operatory elementami łączącymi litery lub dzielącymi je na pojedyncze wyrazy.
Rozdział 10-255
ActionScript posiada również gramatykę i organizację na większą skalę, które nakładane są na ten niższy poziom elementów ta gramatyka definiuje porządek, w którym kod powinien być pisany, jak również sposób łączenie i przetwarzania poszczególnych porcji kodu.
Wyrażenia Jeśli przyjmiemy, że operatory i zmiennej funkcjonują w kodzie ActionScript jak wyrazy w języku pisanym, wówczas wyrażenia odpowiadałyby wyrażeniom języka. Wyrażenie jest kolekcją elementów kodu (kombinacją zmiennych i operatorów) które wygenerują wartość. Na przykład: 12 * 5 23 + 35 91 — 47
Instrukcje Instrukcja, ogólnie mówiąc, jest pojedynczym wierszem kodu i można ją porównać do zdań w języku pisanym. Instrukcję definiuje się jako „kompletna jednostka wykonania”. Instrukcje zawsze kończą się średnikiem. Na przykład: gotoAndPlay (2); widthValue = Ball.Clip._width;
Obydwie powyższe instrukcje są kompletne i niezależne. Uruchomienie ich spowoduje przeprowadzenie określonych akcji i uzyskanie określonych rezultatów. Podczas pisania ręcznie kodu ActionScript w trybie Expert, pamiętaj o umieszczaniu średników na końcu instrukcji.
Bloki Blok jest grupą instrukcji zawartych w nawiasach — {}. Blok kodu można porównać z akapitem w języku pisanym i zazwyczaj zawiera on zestaw powiązanych ze sobą instrukcji, z których wszystkie należy uruchomić, aby uzyskać pożądany efekt. Na przykład: on (press) { alphaVal = 50; BallClip._alpha = alphaVal; }
Formowanie kodu w bloki jest istotne zarówno dla organizacji kodu ActionScript, jak i dla kontrolowania akcji. Abyś lepiej mógł zrozumieć konieczność stosowania bloków, przejdziemy teraz do omówienia przepływu sterowania.
Przepływ sterowania Przepływ sterowania służy do manipulacji kolejnością, w której realizowane są poszczególne instrukcje i dotyczy sposobu kontroli zachowania filmu opartego na instrukcjach podanych w strukturach programowania ActionScript. Zastosowanie tych struktur umożliwia Rozdział 10-256
zrezygnowanie z prostego liniowego odtwarzania filmów i klipów filmowych i udostępnia nam bardziej interesujące i dające się przystosować zachowania. Opiszemy tutaj dwie istotne grupy struktur kontrolowania: struktury rozgałęzień i struktury pętli. Obydwie wpływają na kolejność, w której Flash realizuje kod ActionScript podczas odtwarzania filmu.
Konstrukcje rozgałęzień Te konstrukcje przeznaczone są do podejmowania decyzji i zazwyczaj charakteryzują się strukturą if...else. Ogólnie, tego typu struktury stosuje się wówczas, gdy jedna akcja jest uzależniona od innych danych lub innych okoliczności. Na przykład: if /jeśli (jestem znudzony) { Poczytam książkę; Zrobię drinka; Napiszę kwartet smyczkowy; } else/lub { Będę robić to co robię; Dorosnę i nauczę się; }
Powyżej przedstawiliśmy przykład bloków i instrukcji w akcji. Zarówno część if jak i else tego kodu rozpoczynają się członami warunkowymi, po których następują oddzielne bloki kodu, podzielone nawiasami. Każdy blok składa się przynajmniej z dwóch instrukcji, z których każda zakończona jest średnikiem. Omówiony przykład możemy uznać za strukturę rozgałęzienia, gdyż kod wybierze tylko i wyłącznie jedną z możliwych tras — nigdy nie zrealizuje obydwu bloków akcji podczas jednego odtworzenia programu.
Konstrukcje pętli Inaczej niż w przypadku struktur rozgałęzień, które zostały zaprojektowane do wybierania pomiędzy dwoma biegami akcji, konstrukcje pętli — pętle — umożliwiają powtarzanie kompletnych bloków instrukcji kodu tak długo, jak dane warunki istnieją. Najważniejszymi strukturami pętli są: for while do...while
Pętla While Tak wygląda pętla while: while/skoro(jestem głodny) { usiądę przy stole; zjem coś; napiję się; }
Pętla ponownie oszacuje warunek (jestem głodny) i będzie realizować blok kodu umieszczony w nawiasach dopóki początkowy warunek nie przybierze wartości false. Stanie się to wówczas, gdy jakaś inna akcja spowoduje zmianę w statusie tego warunku. Akcją tą może być na przykład wciśnięcie przycisku przez użytkownika lub zmienna kilogramyZjedzonejWołowiny, gdy dosięgnie predefiniowany próg.
Rozdział 10-257
Pętla For Pętla for jest podobna do pętli while, tyle że z samokontrolą. Nie jest ona zależna od zewnętrznej akcji lub zmiany, która może spowodować zakończenie pętli, lecz warunki dla jej zakończenia określone są w parametrach, jakie stosujemy podczas inicjalizacji pętli. Rozważmy tą pętlę for: for (i=0, i<5; i++) { print “hello”; }
Pierwszy wiersz to instrukcja inicjalizacyjną. Podczas inicjalizacji pętli for, zawsze należy dopisać trzy argumenty w nawiasach okrągłych. Są one następujące: • Początkowa wartość zmiennej, która będzie kontrolować pętlę. Zmienna ta (w tym przypadku i) jest licznikiem pętli. • Warunek, który zakończy pętlę. W tym przykładzie pętla zostanie zakończona, gdy wyrażenie i<5 nie będzie już prawdziwe. • Wskazówka, co należy zrobić po uruchomieniu instrukcji w bloku kodu za każdym razem w pętli. Tutaj zastosowaliśmy operator przyrostu ++, aby dodać 1 do wartości i. Użycie tego operatora stanowi skrót dla równania “i=i+1”. Po instrukcji inicjalizacyjnej następuje blok kodu, jaki chcemy wykonać podczas każdorazowego odtworzenia pętli, czyli instrukcja print. Uruchomienie pętli z tą inicjalizacyjną instrukcją spowoduje wyświetlenie wyrazu hello pięć razy, po jednym razem przy każdym odtworzeniu pętli, gdy wartości zmiennej i wynoszą 0, 1, 2, 3 i 4. Wówczas zmienna i osiągnie wartość 5, instrukcja inicjalizacyjna przybierze wartość false i blok kodu nie zostanie już uruchomiony. Odpowiednik pętli while dla tej akcji wyglądałby następująco: i=0; while(i<5 { print “hello”; i++; }
Obydwa fragmenty kodu wydrukowałyby pięciokrotnie wyraz hello. Pętla Do...While Pętla do...while jest posobna do zwykłej pętli while, lecz zawsze przetwarza ona blok kodu przynajmniej raz zanim sprawdzi warunek. Na przykład: x=15; while(x<10) { print “hello”; }
Pętla ta niczego by nie wydrukowała, lecz: x=15; do { print “hello”; } while(x<10);
...ta pętla wydrukowałaby wyraz “hello” jeden raz zanim stan pętli zostałby sprawdzony a pętla zakończona.
Rozdział 10-258
Poprzednio wspomnieliśmy o wieloużywalności — pojęciu, które oznacza zastosowanie kodu więcej niż raz. Omówimy teraz jedno z najważniejszych narzędzi wieloużywalności — funkcje.
Funkcje Funkcja wykonuje dane zadanie lub zestaw operatorów zawsze, gdy jest wywołana przez inny fragment kodu. Gdy tylko zauważysz potrzebę zastosowania fragmentu kodu w kilku miejscach w filmie, powinieneś od razu instynktownie wyczuć, że należy zastosować funkcję. Jeśli zadanie wykonywane przez dany fragment kodu jest często stosowane, ponowne pisanie tego kodu w różnych miejscach byłoby nudne i nieekonomiczne. Podobnie, jeśli zauważyłeś błąd w tym kodzie, a zastosowałeś go w kilku miejscach, będziesz musiał naprawić błąd w kilkunastu miejscach, a nie tylko w jednym. W tym przypadku działa ta sama zasada co w pięciuset-wierszowym programie, o którym wspominaliśmy wcześniej podczas omawiania użyteczności zmiennych. Funkcja, zatem, jest cząstką kodu o predefiniowanym przeznaczeniu, którą można wywołać z dowolnego miejsca w filmie. Wówczas funkcja wykona swoje przydzielone zadanie i przywróci wynik do klipu filmowego lub fragmentu kodu, który ją wywołał. Aby to zadziałało, funkcja musi oczekiwać i musi uzyskać określoną ilość i tym danych wejściowych, które następnie będzie mogła przetworzyć. Rozważmy napisanie funkcji, która będzie mnożyć dwie liczby. Sam kod w funkcji może być tak prosty, jak poniższy: przywróć wynik a*b do kodu który wywołał tą funkcję
Aby funkcja mogła wykonać tą pracę musimy nakazać jej oczekiwać kod wywołania, który przekaże jej dwie zmienne — a i b — podczas wywoływania funkcji. Podczas tworzenia funkcji we Flashu dołączamy nazwy zmiennych, które zostaną przekazane w instrukcji definicji: function Multiply(a, b) {
W tym fragmencie wyraz function informuje Flasha, że ten kod będzie zrealizowany za każdym wywołaniem funkcji o nazwie Multiply. Dwie zmienne zdefiniowane w nawiasach okrągłych noszą nazwę argumentów funkcji, gdyż funkcjonują one jako miejsca, do których zostaną przekazane dane wartości podczas wywołania funkcji. Zatem, pełna definicja funkcji, uzupełniona aktualnym blokiem kodu, będzie wyglądać tak: function Multiply(a, b) { return a*b; }
Ta funkcja weźmie dowolne dwie liczby, jakie jej zostaną przekazane, pomnoży je i zwróci wynik. return jest poleceniem stosowanym do przesyłania z powrotem wyniku mnożenia jako wartości. Aby wywołać tą funkcję z programu należy zastosować poniższy wiersz kodu ActionScript: Multipy (3, 4);
Rozdział 10-259
Wówczas dwie wartości w nawiasach okrągłych zostaną przekazane funkcji Multiply gdzie (zajmując miejsce znaków-wypełniaczy w definicji funkcji) będą pomnożone. Akcja return przekaże wówczas końcową wartość z powrotem do głównego programu. Jeśli chcesz wyświetlić wynik funkcji Multiply, możesz przypisać go do zmiennej, tak jak poniżej... result = Multiply (3, 4);
...a następnie wyświetlić zmienną w ramce dynamicznego tekstu na ekranie:
Co prawda, nie jest to szczególnie ekscytująca funkcja, lecz gdy zestaw instrukcji w bloku kodu funkcji jest długi i skomplikowany, wówczas umieszczenie ich w funkcji znacznie ułatwi utrzymanie kodu Z reguły funkcja powinna wykonywać tylko i wyłącznie jedno zadanie. Najlepszym sposobem na upewnienie się tego jest zastosowanie prostej konwencji nazywania — nazwą funkcji powinien być czasownik, a na nazwy argumentów powinny składać się rzeczowniki, na przykład: Rzuć (Piłkę); Zjedz (Jajka, Szynkę); Jeśli dana funkcja zawiera pod-zadania, wówczas powinna zostać dalej podzielona na pod-funkcje.
Flash posiada zestaw predefiniowanych funkcji takich jak getVersion, która zwraca numer wersji odtwarzacza Flasha, w którym odtwarzany jest film. Inną użyteczną funkcją jest hitTest, która zwraca wartość boole’owską gdy ramka ograniczająca jednego klipu filmowego jest rozbita poprzez inny klip filmowy umożliwiając tym samym proste wykrywanie kolizji.
Obiekty Obiekty to zasadniczo jednostki funkcjonalności kodu, które są samodzielne i potrafią wykonywać określone zadania. Są one najważniejszą częścią programowania zorientowanego obiektowo (PZO), jednej z najistotniejszych konstrukcji w programowaniu z dwóch ostatnich dekad. Proces projektowania programów na przestrzeni swojej historii pokonał kilka kamieni milowych. Na początku programy były monolityczne, które rozpoczynały się od pierwszego wiersza, wykonywały każdą instrukcję w ścisłej kolejności i kończyły się, gdy dotarły do
Rozdział 10-260
ostatniego wiersza. Pierwszy duży przełom nastąpił, gdy okazało się, że zadania można rozbić na funkcje, upraszając w ten sposób proces myślowy i umożliwiając oddzielenie zadań i wywołanie ich w razie potrzeby. Jednakże, zarówno monolityczne, jak i oparte na funkcjach programowanie ciągłe było ograniczone stosunkowo surową zależnością czasową. Nawet po rozbiciu na funkcje, każdy program i tak zaczynał się na początku i odtwarzany był do końca. Zagadnienia przepływu sterowania okazały się pomocne, lecz wprowadzenie graficznych interfejsów takich jak Windows oznaczało, że coraz mniej programów działało w liniowy sposób. Wówczas coraz bardziej pożądane stawały się programy, które odpowiadały na każde kliknięcie myszy i reagowały na dane wejściowe użytkownika zamiast działać wedle określonej procedury. Aby umożliwić powstawanie takich programów wprowadzono obiekty. Zamiast traktowania programów jako zestawów operacji wykonywanych na danych (funkcje) zaczęto je uznawać za zestawy danych, które wzajemnie oddziaływały na siebie (obiekty). Na przykład, poprzednio zadanie zagotowania czajnika było rozbijane funkcjonalnie w następujący sposób: Napełnij (Czajnik); Włącz (Czajnik); SprawdźczysięZagotował(Czajnik);
Teraz to samo zadanie składa się z pojedynczego obiektu czajnika z następującymi metodami umieszczonymi w jego kodzie: Napełnij Włącz Zagotował
Znaczenie tej modyfikacji staje się widoczne, gdy próbujesz dowiedzieć się, kto dokładnie wie, kiedy czajnik jest pełny (lub, faktycznie, kiedy się zagotował). W funkcjonalnym modelu zmienna odzwierciedlająca stan czajnika musi zostać zachowana w głównym kodzie. Jeśli program jest przystosowany do obsługi dwóch czajników, zmiana ta musi zostać wprowadzona w całym programie, dlatego też będziesz potrzebować nowego zestawu zmiennych „napełnienia”, „włączenia” i „zagotowania” dla każdego nowego czajnika. Jeśli jednak masz obiekt czajnika zawierający swój własny zestaw stanów, z któryż każdy reprezentowany jest wewnątrz obiektu, wówczas możesz dodać tyle różnych czajników do programu ile chcesz, bez konieczności zmiany reszty programu. ActionScript stosuje zorientowane obiektowo podejście poprzez zastosowanie klipów filmowych. Możesz utworzyć małe, funkcjonalnie niezależne klipy i dołączyć je do głównego filmu. Każdy może zawierać określoną liczbę właściwości i zmiennych, a także funkcje operujące na tych zmiennych i właściwościach. Po utworzeniu tych klipów filmowych można je odtwarzać niezależnie od tyranizującego biegu głównej listwy czasowej. Po wprowadzeniu głównych zagadnień związanych z programowaniem w języku ActionScript umocnijmy te informacje poprzez wykonanie kilku przykładów ilustrujących ich zastosowanie.
Przykłady: zmienne i sterowanie przepływem Jednym z kluczowych zastosować języka ActionScript jest animowanie obiektów wówczas, gdy animacja po-klatkowa jest niepraktyczna, lub niepożądana. Na przykład, animacja odbijającej się piłki metodą klatka po klatce byłaby bardzo pracochłonna — obliczanie odległości o jaką powinna przesuwać się piłka w każdym ujęciu i skrupulatne przesuwanie piłki do właściwej pozycji — jak również wymagająca dużego filmu mieszczącego wszystkie
Rozdział 10-261
ujęcia animacji. Przyjrzyjmy się w jaki sposób można łatwo wykonać taką animację za pomocą kodu ActionScript. Pliki w formatach FLA dla tych ćwiczeń znajdziesz na płycie CD-ROM dołączonej do książki. Prosta animacja skaczącej piłki
Poprzez programowanie ruchu piłki w języku ActionScript Flash wykona za nas obliczenia, a film zostanie zredukowany wyłącznie do trzech ujęć — w jednym zdefiniujemy zmienne, a w dwóch następnych wykonamy pętlę obliczeń. 1. W ten animacji będziemy potrzebować dwa obiekty — piłkę i podłoże. Możesz je wykonać tak szczegółowo, jak chcesz. Jeśli nie masz artystycznego zacięcia, wystarczy przygotować wypełnione kółko i prostą linię. Upewnij się, że piłka znajduje się wystarczająco wysoko nad ziemią aby kilkakrotnie się od niej mogła odbić. Po narysowaniu obiektów przekształć je w oddzielne klipy filmowe. Nie ważne, jak je nazwiesz — my, dla jasności, nadaliśmy dla piłki i podłoża nazwy odpowiednio ball i ground:
2. Wciśnij przycisk Edit Symbol umieszczony w górnym prawym rogu i z listy zaznacz symbol ziemi aby otworzyć go do edycji. Górna część ziemi powinna zostać umieszczona w pozycji Y o wartości 0. 3. Można tego dokonać poprzez zaznaczenie całego kształtu i zastosowanie panelu Info. Upewnij się, że czarny kwadrat znajduje się u góry po lewej stronie gdyż mamy użyć właśnie tej punktury, i wówczas przypisz pozycji Y wartość 0:
4. Będziemy potrzebować dwie warstwy: jedną dla obiektów graficznych na scenie i druga dla kodu. Warto przyzwyczaić się do tego podziału, gdyż umożliwia on kilka rzeczy: • Oddziela kod od obrazków, pomagając w ten sposób w zachowaniu porządku. • Ułatwia odnalezienie i aktualizowanie kodu w razie potrzeby.
Rozdział 10-262
•
Podczas modyfikacji obrazków jesteśmy pewni, że nie usuniemy przypadkowo kodu.
Te zasady staną się niezwykle ważne podczas dodawania większej liczby warstw w bardziej złożonych filmach. 5. Zmień nazwę bieżącej warstwy na Graphics, a następnie dodaj nową warstwę i nazwij ją Code. Na warstwie Code w ujęcia 2 i 3 wstaw ujęcia kluczowe, a także zwykłe ujęcia w te same miejsca na warstwie Graphics, aby obydwie warstwy były tej samej długości. 6. Teraz powinieneś mieć pustą warstwę Code i warstwę Graphic zawierającą klony klipów filmowych ball i ground. W panelu Instance nazwij kopie klipów filmowych piłki i ziemi odpowiednio ball i ground;
7. Skoro już oparliśmy się z obrazkami, warto zablokować warstwę Graphics aby, na wszelki wypadek, uniemożliwić jej edycję. Teraz zdefiniujemy nasze zmienne. 8. W pierwszym ujęciu na warstwie Code dodaj poniższy skrypt: var var var var
Jeśli pracujesz w trybie Normal, są to wszystkie polecenia var dostępne w książce Actions, lecz w czasie programowania lepiej przejść do trybu Expert i o prostu samemu wpisywać kod. To ujęcie zostanie uruchomione tylko raz. Potrzebujemy go do określenia zmiennych wymaganych do obliczenia ruchu piłki. Są one następujące: • groundLevel — jest to punkt, w którym piłka odbije się od ziemi. Wydobędziemy go z pozycji _y kopii symbolu ziemi. Jeśli jesteś nowicjuszem w kodzie ActionScript notacja kropkowa tutaj odnosi się do pozycji y (_y) klipu z nazwą kopii ground. Ponieważ wcześniej przypisaliśmy pozycji y klipu filmowego ground wartość 0, wiemy, że pozycja y dowolnej kopii tego klipu będzie odnosić się do „powierzchni” ziemi. • ballOffset — podobnie jak poziom ziemi, również wydobędziemy pozycję y piłki z kopii ball. W tym jednak przypadku szukamy podstawy piłki, o której wiemy, że jest przesunięta od pozycji _y o odległość równającą się połowie wysokości piłki. Zatem wydobędziemy i przechowamy tą wartość, którą później dodamy do pozycji y piłki, aby uzyskać w ten sposób lokalizację podstawy piłki.
Rozdział 10-263
• gravity — jest to stałe przyspieszenie w dół. • velocity — prędkość piłki. Zostanie ona aktualizowana w ujęciu 2. Zauważ, że dwie pierwsze wartości zostały wzięte z kopii, z którymi są związane, nie zostały im natomiast przypisane żadne stałe liczby. W ten sposób jesteśmy pewni, że jeśli będziemy chcieli zmienić w jakikolwiek sposób obrazki, czy przesuwając je na scenie, czy modyfikując ich rozmiary, nie będziemy musieli zmieniać kodu. Kolejna cecha wieloużywalności oszczędzająca nam pracy. Zauważ również, że nadaliśmy zmiennym opisowe nazwy. Warto się do tego przyzwyczaić, gdyż podczas edycji programu będziemy wiedzieli czego dotyczy każda zmienna. Dobre nazwy zmiennych powinny mówić same za siebie. 9. Teraz, w ujęciu 2, zajmiemy się samą animacją. Powrócimy do tego miejsca później, a że nie chcemy zniszczyć animacji jeśli ją przesuniemy, zastosujemy więc panel Frame aby nadać jej etykietę FallingCalc:
Animacja będzie się składać z dwóch faz: aktualizacji prędkości i aktualizacji pozycji piłki. 10. Otwórz panel Actions dla ujęcia 2 warstwy code i wpisz poniższy kod: //Aktualizujemy prędkość if ((ball._y + ballOffset) < groundLevel) { //Ciążenie velocity += gravity; } else { if (velocity > 0) //Skacze { velocity = - velocity * 0.8; } }
Aby dokładnie zrozumieć, co się w nim dzieje, omówimy go wiersz po wierszu. Ten fragment kodu zaczyna się od komentarza oznaczonego notacją //. Warto umieszczać w kodzie szczegółowe komentarze do niego, abyś ty, lub ktoś inny, mógł powrócić do niego później i zorientować się dokładnie, jak on działa i z łatwością go uaktualnić. Po skompilowaniu kodu w pliku wszystkie komentarze są pomijane przez Flasha, więc w żaden sposób nie wpłyną one na końcowy rozmiar filmu. W następnym wierszu rozpoczyna się właściwy program: if ((ball._y + ballOffset) < groundLevel)
W tym fragmencie sprawdzamy, czy bieżąca pozycja podstawy piłki jest powyżej czy poniżej poziomu ziemi. We Flashu punkt 0,0 na scenie znajduje się w górnym lewym rogu, zatem dodatnie wartości współrzędnej y skierowane są ku dołowi sceny. Dlatego
Rozdział 10-264
też dodajemy zmienną ballOffset do współrzędnych środka piłki, aby uzyskać pozycję podstawy piłki i sprawdzamy, czy jej wartość jest mniejsza od wartości zmiennej groundLevel. Jeśli tak, wówczas podstawa piłki będzie znajdować się nad ziemią. Następnie mamy: {
//Ciążenie velocity += gravity;
}
Jeśli piłka znajduje się nad poziomem ziemi, wówczas przyspieszamy ją zgodnie z kierunkiem sił ciążenia. Notacja += w tym wierszu jest skrótem dla równania velocity = velocity + gravity; Następny fragment: else { if (velocity > 0) //Skacze { velocity = - velocity * 0.8; } }
Jeśli piłka nie znajduje się nad poziomem ziemi, musi być na lub poniżej. Wówczas powinna odbić się poprzez przekształcenie naszej skierowanej w dół prędkości w skierowaną w górę. Dodajemy również stały czynnik 0.8 aby zapewnić, że odbicia piłki stopniowo zanikną. 11. Skoro mamy już nową prędkość, zastosujemy teraz ją na piłce. W ujęcie 3 wpisz poniższy kod: //Aktualizujemy pozycję ball._y += velocity; //I zerujemy obliczenia gotoAndPlay(“FallingCalc”);
W pierwszym wierszu w tym fragmencie kodu aktualizujemy pozycję piłki poprzez dodanie do niej wartości prędkości. W drugim wierszu powracamy do początku pętli w ujęciu 2, ponownie obliczając prędkość i nową pozycję piłki. 12. Teraz odtwórz film. Jeśli piłka wydaje się skakać za ziemią, zastosuj polecenie Modify|Arrange aby umieścić symbol ground za symbolem ball. Nie jest źle, lecz można na kilka sposobów ulepszyć naszą animację. Bez wątpienia zauważyłeś, że piłka nie zawsze odbija się w tym samym miejscu. Dzieje się tak dlatego, że operacja sprawdzania w ujęciu 2 nie bierze pod uwagę prędkości piłki (czyli, jeśli zmiana we wskazanej pozycji jest większa od odległości od ziemi, piłka znajdzie się pod ziemią przed następnym odbiciem). Można rozwiązać ten problem poprzez modyfikację aktualizacji pozycji w ujęciu 3 — jeśli prędkość piłki skieruje ją poniżej poziomu ziemi (pamiętaj, że we Flashu im wyższa jest wartość współrzędnej y tym niższy jest poziom) wówczas pozycja zostanie zmieniona tylko do poziomu ziemi. Potraktuj to jako ćwiczenie i sam spróbuj wprowadzić taką modyfikację. Możesz również spróbować pobawić się ze zmiennymi w pierwszym ujęciu: zmodyfikuj zmienną velocity przypisując jej wartość pomiędzy 0.1 i 1 i zauważ, w jaki sposób zmiana ta wpływa na animację. Jest to dobry program do ćwiczeń gdyż wszystkie poczynione przez ciebie zmiany będą od razu widoczne podczas odtwarzania filmu.
Rozdział 10-265
Przykłady: funkcje Skoro już pobawiłeś się kilkoma podstawowymi zmiennymi i pętlami, czas na funkcje. W tym ćwiczeniu napiszemy program do generowania fraktala. Nie martw się, jeśli przepisując kod nie będziesz wiedział dokładnie, co właściwie piszesz — wszystko wytłumaczymy pod koniec każdej sekcji. Generowanie fraktala
1. Zaczniemy od przygotowania sceny. Podobnie jak w ćwiczeniu z piłką, utwórz dwie warstwy, jedną dla obrazków — Graphics, i jedną dla kodu — Code. I w tym przypadku wstaw na warstwie Code trzy ujęcia kluczowe, a na warstwie Graphic 3 normalne ujęcia. 2. Na warstwie Graphics narysuj prostą poziomą linię i przekształć ją w klip filmowy o nawie Prim — czyli skrót od ang. słowa primitive, znaczącego parametryczny. Nadaj mu nazwę kopii Prim1:
3. Teraz musimy się upewnić, że punktura (czyli krzyżyk) dla symbolu Prim znajduje się na lewym końcu linii. Można tego dokonać w taki sposób jak w przypadku ziemi w poprzednim ćwiczeniu: otwórz symbol w jego własnym oknie edycji, a następnie albo przesuń go ręcznie, albo w panelu Info umieść go w pozycji 0,0 aby znalazł się po prawej stronie krzyżyka:
Ten kształt parametryczny zastosujemy nie jako samą linię, lecz raczej jako generator linii. Zauważ, że nie określiliśmy dokładnie długości linii — to dlatego, że po uruchomieniu programu sama linia będzie niewidoczna. W rzeczywistości zastosujemy kopie klipu filmowego do wyświetlenia na ekranie, a sami określimy długość linii w kodzie. 4. Czas na ciężką pracę. Otwórz panel Actions dla pierwszego ujęcia na warstwie Code i wpisz poniższy kod: elementCount = 1;
Rozdział 10-266
//Generujemy fraktal w pozycji x, y x = 100; y = 100; //Inicjujemy 1 = 1; w =1; h = 0; rotation = 0; Prim1._visible = false;
W tym fragmencie kodu deklarujemy wszystkie początkowe zmienne: • elementCount — rejestruje liczbę elementów. • x,y — pozycja, od której będziemy rysować fraktala. • l — długość elementu fraktala. • w, h — szerokość i wysokość każdego elementu w dowolnym czasie (zależy od obrotu). • rotation — obrót każdego elementu. Określimy również nadrzędny klip filmowy Prim1 aby na razie był niewidoczny. W tym ujęciu zdefiniujemy również kilka funkcji. Pierwsza z nich będzie podnosić jedną wartość do potęgi drugiej. We Flashu 5 istnieje funkcja Math.pow, lecz ma ona pewne problemy z podnoszeniem do kwadratu ujemnych liczb. Funkcja, jaką przygotujemy — Pow — potrzebuje dwa argumenty: liczbę x i potęgę, do której liczba ta zostanie podniesiona, n. Za pomocą pętli for funkcja ta pomnoży x przez inną zmienną, result, n razy. 5. Wpisz poniższy kod w ujęciu 1: function Pow(x, n) { var result,i; result = 1; for(i=0;i
6. Druga funkcja, Turn(), jest głównym napędem generatora fraktali. Fraktal zostaje generowany prze wiele iteracji, gdzie w każdej iteracji dodana zostaje nowa linia pod kątem prostym do poprzedniej. Turn() oblicza, czy ten kąt powinien być skierowany w kierunku zgodnym z ruchem wskazówek zegara, czy odwrotnym, z liczbą 1 oznaczającą kierunek zgodny z ruchem wskazówek zegara, a -1 kierunek przeciwny. Wartość przekazywana funkcji Turn() nazywa się i. function Turn(i) { //Określamy kierunek obrotu i-tego obrotu //1 = clockwise; -1 = counter-clockwise if (i<=0) { trace(“Invalid Parameter in Turn : i should be > 0”); return 1; //Unikamy wyjątka } //Redukujemy i do pierwszej nieparzystej liczby po podzieleniu przez 2 var halfi, n; halfi = i/2;
Rozdział 10-267
n = Math.ceil(halfi); while (halfi == n) { halfi /=2; n = Math.ceil(halfi); } //Gdy liczba jest nieparzysta, turn = (-1)**n gdzie 1 = 2n — 1 return Pow(-1, n); }
W tym fragmencie, instrukcja if jest procedurą obsługującą błąd — musimy upewnić się czy podaliśmy właściwe parametry. Jeśli podaliśmy wartość i równą zero lub mniejszą, algorytm będzie odtwarzany ciągle. Dlatego też, nawet jeśli nie zamierzamy przekazać tej wartości, warto umieścić w kodzie procedurę sprawdzającą na wypadek, jakby ktoś inny chciał użyć naszego kodu, lub po prostu zapomnieliśmy. Zastosujemy również instrukcję trace aby poinformować wszystkich, że jeśli taka sytuacja nastąpi, to będzie to mały problem. Instrukcja trace wyśle wiadomość o błędzie do okna Output jeśli pojawi się błąd w trakcie działania programu. Poprzez zwrot wartości 1 upewniamy się, że program nie zawiesi się gdy pojawi się błąd, lecz ostrzeże użytkownika i nadal będzie kontynuować działanie, używając wartości fikcyjnej dla tej iteracji. Funkcja Math.ceil zaokrągla przekazana jej liczbę. W drugim ujęciu umieścimy cały proces kopiowania filmu i zmiany kolorów. 7. Najpierw wpisz poniższy kod: myMovieName = “Element” + String(elementCount); Prim1.duplicateMovieClip(myMovieName,elementCount); elementCount++; myElement = eval(myMovieName); myElement._x = x; myElement._y = y; myElement._width = 1; myElement._rotation = rotation; myElement._visible = true;
Pierwszy wiersz generuje unikatowa nazwę dla naszego nowego elementu poprzez przyłączenie zmiennej elementCount na koniec wyrazu Element. Ostatecznie wpakujemy się w kłopoty gdy elementCount przepełni się i powróci do zera, lecz możemy założyć, że do czasu gdy dotrzemy do tego momentu, i tak pewnie skończą nam się zasoby systemu. Spowodowane to zostanie liczbą oddzielnych klipów filmowych, jak będą uruchomione. Drugi wiersz tworzy kopię klipu filmowego Prim1, nadaje jej nową nazwę i umieszcza na nowym poziomie. Następnie dodajemy 1 do wartości zmiennej elementCount. W końcowych wierszach definiujemy właściwości nowo skopiowanego klipu filmowego. Przede wszystkim przechowujemy w zmiennej myElement odniesienie do klipu filmowego poprzez przypisanie jej oceny nazwy klipu filmowego: myElement = eval(myMovieName);
Operacja ta jest zbliżona do tworzenia skrótu do katalogu na pulpicie komputera — skrót jest jedynie odniesieniem do pozycji oryginalnego katalogu na dysku twardym. Wszystkie dane przekazywane do skrótu zostaną zastosowane w katalogu docelowym. W ten sam sposób wszystko, co przekazujemy do zmiennej myElement będzie zastosowane w danym klipie filmowym, na który wskazuje zmienna.
Rozdział 10-268
Poniżej tego fragmentu kodu dodamy krótką procedurę do zmiany koloru każdego nowego elementu. Na szczęście jedną z nowych cech języka programowania ActionScript we Flashu 5 jest wbudowany obiekt Color, który świetnie nadaje się do naszego ćwiczenia. 8. Dodaj poniższy kod pod poprzednim fragmentem: col = new Color(myElement); colVal += 10; if (((colVal & 0xff) > 0xf5) {colVal += 0x0900;} if ((colVal & 0xf00) > 0xf500 (colVal += 0x090000;} col.setRGB(colVal);
Zanim będziemy mogli zastosować obiekt Color, potrzebować będziemy konstruktora do utworzenia kopii obiektu. Użycie konstruktora zbliżone jest do definiowania zmiennej pod tym względem, że deklarujemy powstanie nowego obiektu Color, a wówczas wbudowane konstruktory Flasha automatycznie zbudują dla nas jedną kopię obiektu opartą na szablonie obiektu Color. Potrzebny do tego kod umieściliśmy w pierwszym wierszu powyższego fragmentu: col = new Color(myElement);
Kod ten działa poprzez ustanowienie zmiennej col jako nazwy kopii obiektu Color, a następnie podaje element docelowy, którego kolor chcemy zmienić, w tym przypadku używając tej samej zmiennej myElement do wskazania bieżącego klipu filmowego. Po utworzeniu nowej kopii obiektu Color, możemy zastosować wbudowaną metodę setRGB do kontrolowania koloru wszystkich składników klipu filmowego. Stosujemy zmienną colVal do śledzenia bieżącego koloru i każdorazowego zwiększania go o 10. Dwie skomplikowanie wyglądające instrukcji if umożliwiają po prostu zwiększenie wartości składowej zielonej o 10 razy za każdym razem, gdy wartości składowej niebieskiej rolls over, i wartości składowej czerwonej również o 10 razy za każdym razem, gdy wartość składowej niebieskiej rolls over. Liczba poprzedzona prefiksem 0x oznacza szesnastkową (hex) wartość koloru; prefiks 0x oznacza po prostu, że wartość ta jest szesnastkowa (model kolorów RGB reprezentowany jest przez dwie cyfry dla każdej wartości składowej czerwonej, zielonej i niebieskiej w kolejności, w zakresie od 00 to FF. Pierwsza para wartości reprezentuje składową czerwoną, druga zieloną, a trzecia niebieską. Zatem wartość FF0000 oznacza 100% składowej czerwonej, 00FF00 — 100% składowej zielonej, a 0000FF — 100% składowej niebieskiej, a wszystkie pozostałe wartości przedstawiają kolory pośrednie). Zauważ, że nie inicjalizujemy zmiennej colVal z przypisaną wartością. Dowolnej zmiennej, której wartość nie jest specjalnie inicjalizowana zostanie automatycznie przypisana wartość 0. 9. Ostatni zestaw akcji w tym ujęciu porządkuje pozycję i rotację kursora przygotowując miejsce na umieszczenie kolejnego klipu filmowego. Dodaj go teraz: x+=w; y-=h; e = Turn(elementCount); rotation += e*90; tmp = h; h = -e * w; w = e *tmp;
Rozdział 10-269
Ten kod przenosi nas na koniec bieżącego elementu, uruchamia funkcję Turn() aby wskazać nam, w którym kierunku powinniśmy się skierować i wówczas definiuje nowe parametry następnego elementu. Ostatni fragment kodu umieścimy w ujęciu 3. Składa się on z polecenia nakazującego ponowne odtwarzanie całej procedury od ujęcia 2. 10. Dodaj teraz następujący kod: gotoAndPlay (“AnimStart”);
11. Na koniec możesz przetestować film i obejrzeć rozwój fraktala. I w tym przypadku zachęcamy do zastosowania różnych wartości dla zmiennych i do spróbowania ulepszenia programu.
Przykłady: obiekty Do utworzenia obiektowego śladu myszy przygotujemy obiekt, który będzie wiedział jak się gra w „podążaj za przewodnikiem” — każdy obiekt w śladzie będzie starał się nadążyć za obiektem czołowym. Gdy przyłączymy wówczas obiekt prowadzący do myszy, wszystkie obiekty będą tworzyć za nim ślad przy każdym ruchu myszy. Tworzenie śladu myszy
Najpierw utworzymy obiekt. Podstawowym elementem obiektu będzie kula, lecz ty możesz wybrać dowolny inny kształt. 1. Utwórz obrazek i przekształć go w symbol klipu filmowego:
2. Dwukrotnie kliknij na klipie, aby go tworzyć i utwórz w nim trzy ujęcia kluczowe. 3. Następnie otwórz panel Actions dla pierwszego ujęcia. Dodaj w nim poniższy kod, który zainicjalizuje zmienne dla naszego filmu: //Definiujemy zmienne this.Force = {x:0, y:0}; this.attractionCoefficient = 0.3;
Wyraz kluczowy this jest odniesieniem do bieżącego klipu filmowego. Oznacza to, że nie musimy znać nazwy kopii obiektu — wystarczy użyć określenia this i Flash już będzie wiedzieć, że oznacza ono klip, w którym umieszczony jest kod.
Rozdział 10-270
Pierwsza instrukcja kodu tworzy nowy obiekt o właściwościach x i y, a także przypisuje im początkowe wartości równe 0. Zmienna Force reprezentuje siłą przyciągania pomiędzy elementem śladu myszy i obiektem, za którym podąża. Wartość ta jest proporcjonalna do odległości pomiędzy nimi, dlatego też element śladu myszy zwolni i zatrzyma się gdy odległość będzie wynosić 0 (czyli gdy dogodni obiekt, za którym podąża). Następnie aktualizujemy pozycję... this.attractionCoefficient = 0.3;
...poprzez założenie, że element śladu myszy porusza się z prędkością proporcjonalną do siły. Zmienna attractionCoefficient oznacza prędkość, z którą klip porusza się w kierunku swojego lidera. Później w ujęciu tym dodamy jeszcze więcej kodu, który między innymi będzie definiować który klip filmowy jest klipem przewodnim. Teraz przygotujemy dwu-ujęciową pętlę do obliczania siły przyciągającej każdą kulę do ich przywódcy i aktualizujemy pozycję, do której kula musi się przenieść. 4. W ujęciu 2 wpisz poniższy kod: //Teraz zagramy w „podążaj za przewodnikiem” //Aktualizujemy pozycje jako zmienne aby umożliwić elastyczność if (this._leader != undefined) { Force.x = 0; Force.y = 0; Attraction(this._leader._x, this._leader._y); UpdatePosition(); }
Przede wszystkim, odnotowujemy, że jeśli nie ma przywódcy to niczego nie robimy. Znak ! oznacza NIE, więc treść tego kodu brzmi po prostu „jeśli przywódca nie jest niezdefiniowany, wówczas zrób to”, albo jeszcze lepiej „jeśli ten klip posiada przywódcę, to zrób to”. Dzięki temu możemy określić jeden obiekt jako przywódcę grupy. Następnie nadajemy sile wartość 0 dla obu kierunków, abyśmy mogli stopniowo zwiększać siłę. W tym przykładzie mamy tylko jedną funkcję definiującą silę, lecz później możemy dodać siłę odpychającą, aby powstrzymać kulki przed zbyt znacznym zbliżeniem się do siebie. Teraz wywołujemy dwie funkcje, jedną do obliczenia siły przyciągającej kulkę do jej przywódcy, a drugą do aktualizacji pozycji opartej na tej sile: Attraction(this._leader._x, this._leader._y); UpdatePosition();
Pierwsza z tych funkcji oblicza siłę przyciągania dla każdej kulki. 5. W celu zdefiniowania funkcji dodaj poniższy kod w ujęciu 2 poniżej wcześniej wprowadzonego fragmentu: //Funkcja do obliczenia siły przyciągania function Attraction (x, y) { //Atrakcja jest proporcjonalna do odległości var xdiff = x - _x; var ydiff = y - _y; this.Force.x += this.attractionCoefficient*xdiff; this.Force.y += this.attractionCoefficient*ydiff; }
Rozdział 10-271
Ta funkcja określa siłę jako proporcjonalna do odległości pomiędzy klipem i punktem zdefiniowanym przez współrzędne x i y. Poprzez odseparowanie jej jako oddzielnej funkcji, jednakże, możemy wygenerować dowolną siłę. Intensywność siły definiujemy za pomocą zmiennej attractionCoefficient. 6. Następna funkcja aktualizuje pozycję klipu. Wprowadź teraz dla niej kod: function UpdatePosition () { this._x += this.Force.x; this._y += this.Force.y; }
Ta funkcja zwyczajnie stosuje informację o pozycji wygenerowaną przez funkcję Attraction na kopii wywołanego klipu filmowego. Jeśli wartość zmiennej attractionCoefficient wynosi 1 wówczas kulki natychmiast przesuną się do pozycji ich przywódcy. Przypisanie wartości mniejszej od 1 tworzy ciekawszy efekt, gdyż dodaje opóźnienie w ruchu. Przypisanie zmiennej attractnionCoefficient wartości większej niż 1 daje interesujący efekt i zdecydowanie warto to wypróbować. Zakładając, że wartość jest mniejsza od 2, powstaje efekt, w którym kulki natychmiast dosięgną przywódcy, oscylując po jednej lub po drugiej jego stronie i sprawiając w ten sposób wrażenie planet krążących planet po orbicie. Jeśli wartość jest większa od 2 wówczas ruch zaniknie a wszystkie kulki odlecą z ekranu. Poeksperymentuj z tymi ustawieniami i zobacz, co z tego wyniknie. 7. Na zakończenie skompletuj pętlę wpisując poniższe polecenie... gotoAndPlay (2);
...w ujęciu 3. Teraz musimy odpowiednio przygotować scenę poprzez umieszczenie na niej potrzebnych obiektów, a następnie powrócić do ujęcia 1 aby zakończyć program. Na razie mamy tylko jedną kulkę prowadzącą, więc dodaliśmy jeszcze siedem innych, aby w sumie widocznych było osiem kulek. „Ogon” myszy możemy wykonać na dwa sposoby. Ja wybrałem tutaj technikę przeciągania każdego obiektu z biblioteki na scenę, lecz równie dobrze można zastosować akcję duplicateMovieClip na oryginalnym klipie do utworzenia kolejnych jego siedmiu kopii. 8. Utwórz dodatkowe kopie wybraną przez ciebie metodą:
9. Teraz nadamy kopiom nazwy. Ja nazwałem kulkę prowadzącą Head, a pozostałe kulki Element1 do Element7.
Rozdział 10-272
Na koniec dodamy ostatni fragment kodu w ujęciu 1 głównego filmu aby połączyć wszystkie klipy razem. Wpiszemy również fragment kodu, aby poszczególne klipy stawały się stopniowo mniejsze od kulki prowadzącej. 10. W ujęciu 1 wprowadź poniższy kod: var sizeChange = 4/5; Element1._leader = Head; Element1._width = Element1._leader._width * sizeChange; Element1._height = Element1._leader._height * sizeChange; for (i=2;i<7;i++) { myElement = eval( “Element” + String(i)); myElement._leader = eval( „Element” + String(i-1)); myElement._width = myElement._leader._width * sizeChange; myElement._height = myElement._leader._height * sizeChange; }
W pierwszym wierszu definiujemy zmienną sizeChange — przypisujemy jej przypadkową wartość oznaczającą, że rozmiar każdej kulki będzie stanowić 4/5 rozmiaru kulki prowadzącej. W następnym wierszu określamy właściwość leader dla kopii Element1 jako oryginalny klon, czyli Head. W dwóch kolejnych wierszach zmieniamy rozmiar kopii Element1 w oparciu o rozmiar przywódcy, a także zastosowaną na niej zmienną sizeChange. Pętla for przeprowadza dokładnie te same operacje dla pozostałych kopii. Najpierw definiuje nowy obiekt myElement jako odniesienie do bieżącego klonu: myElement = eval( “Element” + String(i));
W tym fragmencie zastosowaliśmy funkcję eval Flasha do wydobycia odpowiedniej nazwy elementu za pomocą stałej wartości podanej w cudzysłowie plus wartość pochodząca z wbudowanej funkcji String. W tym przypadku funkcja String przekształca bieżącą (numeryczną) wartość licznika pętli i w zmienną łańcuchową, dzięki czemu będzie można tą wartość połączyć z wartością “Element”. Następnie przekazujemy temu elementowi informację, że jego przywódcą jest obiekt Element o jeden niżej: myElement._leader = eval( “Element” + String(i-1));
Na koniec określamy rozmiar bieżącej kopii w oparciu o rozmiar obiektu przewodniego. 11. Zdecydowanie ostatnim zadaniem do wykonania jest przypisanie kulki Head do myszy. Można tego dokonać w zdumiewająco łatwy sposób poprzez dodanie poniższego kodu na koniec ujęcia 1: Rozdział 10-273
Mouse.hide(); startDrag (“Head”, true);
//Aby ukryć istniejący wskaźnik
Prowadząca kulka będzie teraz podążać za kursorem myszy, a za nią pozostałe kulki.
Zakończenie Jeśli jeszcze tego nie zrobiłeś, przejrzyj ponownie zamieszczone w tym rozdziale przykłady i pobaw się nimi. Zmień kilka zmiennych, a nawet wymyśl własne. Niech twoja piłka rozgniata się w górę po zderzeniu się z ziemią, a potem ponownie wydłuża przy kolejnym odbiciu. Zastąp obiekt koloru we fraktalu obiektem dźwiękowym z odpowiednim odgłosem, a przy odrobinie pracy będziesz mógł obiekt ten przekształcić w dziwny fraktal nagłośnienia. Dodaj odrobinę iskro do śladu myszy, dosłownie poprzez dodanie kilku mniejszych iskierek, które będą odpryskiwać wirując od każdej głównej kulki, aby następnie zaniknąć. Eksperymentuj: od tego właśnie jest Flash i w tym jest najlepszy.
Rozdział 10-274
Rozdział 11 Integracja środowiska programowania ActionScript Listwy czasowe, klipy filmowe i obiekty Ten rozdział poświęcimy na omówienie listwy czasowej, klipów filmowych i obiektów. Chociaż pracowałeś już z listwą czasową i klipami filmowymi, to chcielibyśmy przyjrzeć się im tutaj w większym kontekście. Dokonamy tego poprzez przedstawienie interakcji różnych listew czasowych w filmie a także omówienie kolejności uruchamiania kodu w filmie z kilkoma klipami filmowymi i osadzonymi listwami czasowymi. W pozostałej części rozdziału spróbujemy zachęcić cię do traktowania klipów filmowych jako obiektów — a dokładniej jako fragmenty kodu istniejące niezależnie i charakteryzujące się wbudowanymi zachowaniami. Klipy filmowe są niezwykle potężnymi narzędziami we Flashu i można je stosować na wiele sposobów jeśli wbudowane są w nie funkcje i inne zakodowane zachowania. W rozdziale tym teoria przeplata się z praktyką, z głównymi zagadnieniami nakreślonymi na początku, po których zamieściliśmy kilka praktycznych przykładów ilustrujących omówione zagadnienia. Jak zawsze odpowiednie pliki w formacie FLA znajdziesz na płycie CD-ROM dołączonej do książki. Rozpocznijmy od omówienia listwy czasowej Flasha.
Główna listwa czasowa Sercem wszystkich animacji Flasha jest główna listwa czasowa:
Podczas gdy tradycyjne programy obsługują listwę czasową zależną od instrukcji sterowania przepływem i z prędkością określoną poprzez czas wymagany do wykonania każdej instrukcji, Flash charakteryzuje się wbudowaną listwą czasową poruszającą się z dokładnie predefiniowaną prędkością odtwarzania, która wyrażana jest jako liczba ujęć filmu Flasha na sekundę: Rozdział 11-275
Wszystkie klipy filmowe osadzone w głównym filmie Flasha również dziedziczą tą prędkość odtwarzania. Kod ActionScript jest albo dołączony do ujęcia na głównej listwie czasowej, do ujęcia w klipie filmowym, lub do dowolnego składnika filmu (takiego jak na przykład przycisk czy klip filmowy), który znajduje się na głównej listwie czasowej lub jest osadzony wewnątrz innego klipu filmowego. Wykonanie kodu w środowisku ActionScript można rozpatrzyć w następujący sposób:
Każde ujęcie na głównej listwie czasowej odtwarzane jest z określoną prędkością odtwarzania, bez względu na zawartość czy ilość kodu umieszczonego w tym ujęciu. Niektóre ujęcia posiadają kod, z kodem różniących się w każdym ujęciu długością i czasem potrzebnym do wykonania go. Jeśli realizacja kodu zabiera więcej czasu, niż domyślnie przypisany jest danemu ujęciu poprzez prędkość odtwarzania, wówczas animacja „zablokuje” listwę czasową” oznacza to, że zaczeka ona z przejściem do następnego ujęcia aż kod zostanie w pełni zrealizowany. Jeśli animacja jest za bardzo opóźniona, wyświetlone zostanie ostrzeżenie i propozycja wyłączenia skryptu. To jednak nie powinno nigdy nastąpić jeśli kod jest inteligentnie podzielony pomiędzy ujęciami.
Unikanie blokowania listwy czasowej Należy starać się nie blokować listwy czasowej. Jeśli animacja zostaje opóźniona poprzez wolno działający kod wówczas, w najlepszym przypadku będzie urywana i niedokładnie kontrolowana, a w najgorszym przypadku wyświetlone zostanie ostrzeżenie a skrypt wyłączony. Więc ile czasu mamy do dyspozycji? Przede wszystkim musimy obliczyć liczbę milisekund potrzebnych do odtworzenia każdego ujęcia. Zakładając, że prędkość odtwarzania wynosi 12 ujęć na sekundę (jest to domyślne ustawienie we Flashu 5) i wiedząc, że jedna sekunda składa Rozdział 11-276
się z 1000 milisekund, odtworzenie każdego ujęcia zajmie 1000/12 = 83,33 ms (milisekund). Zatem, jeśli realizacja kodu przekroczy ten czas, płynne odtwarzanie listwy czasowej będzie zagrożone. Ponadto, czas wykonania danej instrukcji zależy również od mocy twojego komputera; test szybkości wykonany na komputerze Pentium 600 MHz pokazuje, że wykonanie każdej instrukcji kodu ActionScript trwa pomiędzy 0,04 i 0,06 ms. Na komputerze PowerMac G4 wyniki były podobne — pomiędzy 0,05 i 0,06 ms. Oznacza to, że odtwarzanie listwy czasowej będzie zagrożone po wykonaniu około 2000 operacji. Najlepiej więc starać się zachować minimalną ilość kodu na ujęcie. Może myślisz, że nigdy nie będziesz maił w jednym ujęciu 2000 oddzielnych instrukcji kodu i zapewne masz rację. Dlaczego więc w ogóle się tym przejmować? Cóż, problematyczny czynnik jest taki, że przy każdym odtworzeniu pętli zrealizowane również zostaną wszystkie instrukcje w pętli; odtwórz tą pętlę dziesięć razy, a wszystkie instrukcje także zostaną wykonane dziesięć razy. Osadź ta pętlę wewnątrz innej pętli i już masz uruchomionych bardzo wiele instrukcji. Na przykład, poniżej przedstawiliśmy kilka wierszy kodu, który na pewno sprawi problemy we Flashu: for (a=1; a<100; a++) { for (b=1; b<100; b++) { for (c=1; c<100; c++) { } } }
Problem polega na tym, że w powyższym fragmencie osadzone są trzy pętle; każda iteracja pierwszej pętli spowoduje setkę iteracji drugiej, a każda iteracji tej drugiej spowoduje setkę iteracji trzeciej. Oznacza to 100 x 100 x 100 instrukcji — czyli znacznie ponad próg 2000 instrukcji. Główne kłopoty związane z blokowaniem listwy czasowej spowodowane są osadzonymi pętlami podobnymi do przedstawionych powyżej, a także funkcjami rekurencyjnymi. Funkcja rekursywna charakteryzuje się tym, że sama siebie wywołuje. Powiedzmy, że masz kilka liczb od 1 do 100 i chcesz znaleźć liczbę z tego zakresu; wówczas możesz zastosować funkcję, która dzieli zakres na pół i sprawdza, w której połowie znajduje się poszukiwana liczba. Następnie ponownie sama się wywołuje, dzieli nowy zakres na pół i tak dalej, aż znajdziesz liczbę i wypchnie samą siebie z rekurencyjnej pętli. Aby obejść ten problem powinniśmy się starać jak najczęściej unikać tego typu instrukcji. Z zastosowania funkcji rekurencyjnych łatwo można zrezygnować, lecz omijanie nadmiernie aktywnych pętli może być trudniejsze. Oczywiście stosowanie pętli w kodzie nie jest niczym złym — bardzo się przydają w programowaniu, lecz łatwo z nimi przesadzić. Możemy do pewnego stopnia dać sobie radę z tym problemem pamiętając, że mamy do dyspozycji dwa wymiary czasowe; zamiast tworzenia pętli całego kodu w jednym ujęciu, możemy wykonać ją w obrębie jednej sekcji listwy czasowej, jak w poniższym ćwiczeniu. Tworzenie pętli ekranu ładującego
Aby przedstawić przewagę pętli listwy czasowej nad pętlami programu posłużymy się prostym przykładem: oczekiwanie na załadowanie się filmu. Utworzymy film, który ładuje inny film a następnie go odtwarza. Nie chcemy, aby drugi film został odtworzony dopóki nie zostanie w pełni załadowany do pierwszego, więc będziemy potrzebować ekran zaprzątający uwagę użytkownika, aż film będzie już gotowy. 1. Najpierw utwórz w nowym filmie trzy warstwy: jedną dla kodu, drugą dla filmu, jaki zostanie załadowany i trzecią dla animacji którą odtworzymy podczas ładowania filmu. Nazwij je odpowiednio Code, Final Movie i Loading Screen. Rozdział 11-277
Akcja loadMovie może skierować załadowany klip filmowy albo do klipu filmowego lub na poziom w filmie macierzystym. W tym ćwiczeniu wybierzemy pusty klip filmowy który będzie funkcjonować jako „pojemnik” dla klipu filmowego, którego będziemy ładować. 2. Utwórz nowy symbol klipu filmowego o nazwie replace i przeciągnij jego kopię z biblioteki na warstwę Final Movie. Nazwiemy ten klon movie1:
Jak widać, pusty symbol we Flashu 5 reprezentowany jest na scenie przez małe białe kółko. Następnie przygotujemy animację ładowania, która będzie odtwarzana podczas ładowania drugiego filmu. 3. Rozpocznij tą animację w drugim ujęciu na warstwie Loading Screen. My wykonaliśmy tylko prostą ciągle odtwarzaną animację automatyczną kształtu, lecz twoja animacja może być o wiele bardziej złożona. Pamiętaj jednak, że ekran ładujący powinno dać się pobrać natychmiast i odtworzyć podczas oczekiwania na załadowanie głównego filmu, więc nie powinien być on zbyt skomplikowany.
Proces ładowania filmu składa się z trzech etapów: • inicjalizacja procesu, • oczekiwanie na pobranie filmu, • rozpoczęcie odtwarzania załadowanego filmu. 4. Aby wykonać te etapy wstaw trzy ujęcia kluczowe na warstwie Code i nazwij je odpowiednio Initialize, Loading Loop i Start Movie. Ujęcie kluczowe Initialize powinno znaleźć się w ujęciu 1, Loading Loop w ujęciu 2, a Start Movie dwa ujęcia po animacji ładującej — w naszym przypadku będzie to ujęcie 12.
W tym kodzie najpierw inicjalizujemy proces ładowania poprzez wywołanie polecenia loadMovie z pustego pojemnika na film, którego nazwaliśmy movie1. musisz tutaj zastąpić adres internetowy lokalizacją pliku, jakiego chcesz załadować. Dla potrzeb testu możesz pobrać istniejący film z dysku twardego. W tym celu film docelowy musi znajdować się w tym samym katalogu co utworzony film, z którego go wywołujesz. Zatem, jeśli wywoływany plik SWF znajduje się w pliku o nazwie c:\przyklady flasha, wówczas plik really_big.swf, którego chcesz pobrać również powinien znaleźć się w tym katalogu. Jeśli masz zamiar załadować ten właśnie plik, wówczas pierwszy wiersz kodu będzie wyglądać tak: movie1.loadMovie("really_big.swf");
Zauważ, że jeśli plikiem docelowym jest plik lokalny, a nie adres internetowy, nie wpisujesz ścieżki dostępowej do pliku, lecz tylko samą jego nazwę. Dla przypomnienia: aby uzyskać dostęp do lokalnego pliku SWF poprzez podanie tylko jego nazwy w poleceniu loadMovie, ten plik SWF musi znajdować się w tym samym folderze, co plik SWF, który go wywołuje. Następny wiersz zapewnia, że film nie zostanie odtworzony dopóki nie zostanie kompletnie pobrany. Wówczas przypisujemy własności visible wartość false, aby widoczny był tylko ekran ładujący, a nie pierwsze ujęcia częściowo pobranego filmu. Aby poczekać na załadowanie filmu musimy sprawdzić liczbę ujęć pobranych w porównaniu z całkowitą liczbą ujęć. 6. Dodaj poniższy kod w ujęciu Loading Loop: movie1._visible = false; if (movie1._framesloaded == movie1._totalframes) { gotoAndPlay("Start Movie"); }
I w tym przypadku pierwszy wiersz kodu zapewnia, że film nie będzie widoczny. Instrukcja if używa wbudowanych własności framesloaded i totalframes do sprawdzenia, czy pobrano już wszystkie ujęcia filmu, a jeśli tak, przechodzi ona do ujęcia o nazwie Start Movie i rozpoczyna odtwarzanie filmu. Jeśli nie pobrano jeszcze wszystkich ujęć filmu, wówczas odtwarzanie animacji ładującej będzie kontynuowane. 7. Aby zapewnić, że animacja ładująca jest samodzielna, wstaw ujęcie kluczowe na warstwie Code, jedno ujęcie za końcem animacji — w naszym przypadku jest to ujęcie 11 — i wpisz w nim następujący kod: gotoAndPlay("Loading Loop");
Rozdział 11-279
Polecenie to zapewnia, że animacja ładująca będzie odtwarzana do momentu, gdy będziemy już gotowi uruchomić główny film. Na koniec musimy uruchomić film po załadowaniu go, więc należy rozszerzyć listwę czasową, abyśmy mogli zobaczyć odtwarzanie filmu. 8. W tym celu dodaj poniższy kod w ujęciu Start Movie: movie1._visible = true; movie1.play(); stop();
W tym fragmencie kodu najpierw ponownie uwidaczniamy film, a następnie rozpoczynamy jego odtwarzanie. Polecenie stop zapewnia, że listwa czasowa nie wykona pętli z powrotem na początek i nie będzie próbować ponownie pobrać filmu. 9. Na zakończenie wstaw ujęcie na warstwie Final Movie aby wyrównać ją z ostatnim ujęciem na warstwie Code, w naszym przypadku z ujęciem 12, aby można było obejrzeć filmu po rozpoczęciu odtwarzania go. Teraz przejdźmy do szczegółowego omówienia pracy z klipami filmowymi.
Praca z klipami filmowymi Kolejnym zagadnieniem sprawiającym problemy programistom we Flashu jest podziała na sceny, ujęcia i klipy filmowe. W poprzedniej części rozdziału zajmowaliśmy się ujęciami — są to po prostu pojedyncze okienka na listwie czasowej, w których umieszczana jest pewna zawartość — natomiast sceny w dogodny sposób umożliwiają podział listwy czasowej na logiczne i obsługiwalne sekcje. Z drugiej strony, klipy filmowe to zagadnienie nieco bardziej zagmatwane. Mogą one nie tylko pojawiać się i znikać w dowolnych punktach wzdłuż listwy czasowej, lecz również posiadają własne listwy czasowe, które działają (na pół) niezależnie od głównej listwy czasowej.
Praca z kilkoma listwami czasowymi Podczas pracy z klipami filmowymi, jedną niezwykle istotną rzeczą do zapamiętania jest to, że każdy klip filmowy zawiera własną listwę czasową i może się po niej poruszać bez wpływu na listwy czasowe innych klipów filmowych. Nie oznacza to, że listwy czasowe są całkowicie niezależne. Pamiętaj, że prędkość odtwarzania jest stałą wartością w całym filmie, dlatego też pod tym względem klipy filmowe muszą być zsynchronizowane z głównym filmem. Na przykład, dwa klipy filmowe zawierające odpowiednio cztery i osiem ujęć będą powtarzane co osiem ujęć, a dwa kipy filmowe zawierające trzy i pięć ujęć będą powtarzane co piętnaście ujęć.
Rozdział 11-280
Krótko mówiąc kolejność ujęć w klipach filmowych jest niezależna, lecz prędkość odtwarzania nie jest. Prędkość odtwarzania wszystkich filmów pobierana jest z filmu z górnego poziomu, bez względu, czy są one zdefiniowane jako symbole w bibliotece tego filmu, czy też zostały pobrane z zewnętrznego źródła. Wszystkie dodatkowe klipy filmowe w danym ujęciu będą potencjalnie zmniejszały prędkość odtwarzania, gdyż wszystkie skrypty należy uruchomić zanim wskaźnik odtwarzania przejdzie do następnego ujęcia. Oznacza to, że najlepiej rozciągnąć długie operacji na kilka następujących po sobie klipów filmowych. Rozszerzenie ich na kilka warstw, lub kilka kolejnych ujęć, nie za bardzo pomoże, a może nawet pogorszyć sprawę poprzez konieczność przechodzenia pomiędzy listwami czasowymi. Jednakże, powód dzielenia kodu na kilka listew czasowych w większym stopniu związany jest z przypisywaniem kodu do jego właściwego elementu (na przykład kod służący do przeprowadzenia wykrywania kolizji dla klipu filmowego powinien znajdować się wewnątrz danego klipu). Najlepszą metodą jest zoptymalizowanie każdej listwy czasowej oddzielnie, zamiast przeprowadzenia optymalizacji przez wszystkie listwy czasowe, gdyż to zazwyczaj prowadzi do zamieszania w kodzie i może spowodować więcej problemów, niż ich rozwiąże.
Praca z osadzonymi klipami filmowymi Innym pokrewnym zagadnieniem jest osadzanie klipów filmowych. Główna listwa czasowa nie tylko może zawierać kilka klipów filmowych, każdy z własną listwą czasową, lecz wszystkie z nich mogą również zawierać kolejne klipy filmowe i tak dalej, do nieskończoności. Prawdopodobnie najtrudniejszym rzeczą do zrozumienia podczas pracy z osadzonymi klipami filmowymi jest zasięg zmiennych i funkcji. Po zadeklarowaniu zmiennej w obrębie danej listwy czasowej, wówczas ta listwa czasowa staje się jej zasięgiem. Tylko wówczas będziesz mógł uzyskać dostęp do zmiennej podając jedynie jej nazwę, jeśli wywołujesz ją z tej samej listwy czasowej. Jednakże, możesz zmienić ścieżkę listwy czasowej za pomocą poniższej składni: listwaczasowa_ścieżka.zmienna_nazwa
Jeśli nie obce ci są zorientowane obiektowo języki, takie jak Java, składnia ta powinna być ci dobrze znana. Na przykład, gdy tworzysz film z dwoma klipami filmowymi, bodger i badger, z których każdy zawiera zmienną count, wówczas uzyskujesz do nich dostęp odpowiednio poprzez wyrażenia bodger.count i badger.count. Ta sama zasada odnosi się do własności, gdyż są one po prostu systemowo zdefiniowanymi zmiennymi.
Rozdział 11-281
Zatem, aby uzyskać dostęp do właściwości pozycji y klipu badger, zastosujesz poniższą składnię: badger._y
Przejście o poziom wyżej w hierarchii listew czasowych osadzonego klipu filmowego jest jeszcze prostsze. Każda listwa czasowa zawiera pseudo obiekt, _parent, który reprezentuje listwę czasową umieszczona o poziom wyżej. Aby uzyskać dostęp do dodatkowych poziomów możemy zastosować również notację kropkową. Zatem, aby uzyskać dostęp do zmiennej o nazwie loop możemy z powodzeniem zastosować poniższą składnię... bodger._parent.loop
...która przeniesie nas o jeden poziom w dół na listwę czasową klipu bodger, a następnie z powrotem w górę do macierzystej listwy czasowej (czyli tam, gdzie zaczęliśmy) i wówczas do zmiennej loop. Jeśli pragniesz wrażeń, możesz również zastosować pseudo obiekty _root i _level0. podobnie jak obiekt _parent, te również przenoszą nas na różne listwy czasowe, lecz tym razem, przeskakujemy prosto do listwy czasowej najwyższego poziomu, czyli do głównej listwy czasowej całego filmu. Istnieje jednak niewielka różnica pomiędzy obiektami _root i _level0. Pierwszy z nich przenosi nas do najwyższego poziomu danego filmu, w którym się znajdujemy, a drugi zabiera nas do listwy czasowej oznakowanej _level0, która nie musi być jednocześnie główną listwą czasową filmu. Na przykład, jeśli film, z którego wywołujemy został załadowany do innego filmu (za pomocą polecenia loadMovie), obiekt _root przeniesie nas do poziomu, do którego film został załadowany, a nie do górnego poziomu całego filmu. I zanim sam zapytasz, tak, są oczywiście obiekty _level1, _level2 i tak dalej. Wszystko zależy od liczby poziomów listwy czasowej istniejących w aktualnie odtwarzanym filmie.
Rysunki, klipy filmowe i przyciski Czy kiedykolwiek zastanawiałeś się, dlaczego we Flashu wprowadzono trzy typy symboli? Różnica między nimi nie leży w definicji, lecz w sposobie zachowania symboli. Każdy symbol jest, w końcu, klipem filmowym, gdyż składa się z sekwencji ujęć. Jednakże, sposób interpretacji tych ujęć zależy od ich zdefiniowanych zachowań. Zachowanie graficznego symbolu jest najprostsze — jest on odtwarzany poprzez ujęcia w symbolu. Tego symbolu nie można ani obsługiwać zewnętrznym kodem, ani żaden kod w symbolu graficznym nie będzie miał wpływu na zewnętrzne symbole. Ponadto, listwa czasowa symbolu graficznego jest całkowicie zsynchronizowana z listwą czasową w jakiej jest zawarta, zatem z dwunasto-ujęciowego symbolu graficznego na dwu-ujęciowej listwie czasowej zostaną odtworzone tylko dwa ujęcia. Symbol graficzny może mieć wybrane również inne opcje odtwarzania, takie jak na przykład odtwarzanie jednorazowe, rozpoczęcie z innego ujęcia, czy wyświetlenie tylko jednego ujęcia. Zachowanie symbolu klipu filmowego omawialiśmy już w tym rozdziale i poprzednim i jest to rodzaj zachowania dający we Flashu największe możliwości. Podobnie jak z symbolem graficznym, symbol klipu filmowego zawiera pewną liczbę ujęć, które są odtwarzane w standardowy sposób. Jednakże, listwa czasowa klipu filmowego jest niezależna od listwy czasowej zawierającej dany klip filmowy, zatem z dwunasto-ujęciowego klipu filmowego umieszczonego na dwu-ujęciowej głównej listwie czasowej odtworzone zostanie wszystkie dwanaście ujęć klipu. Każdej kopii symbolu klipu filmowego umieszczonego na scenie
Rozdział 11-282
można nadać nazwę i obsługiwać ją w obrębie kodu. Co więcej, kod umieszczony w dowolnym klonie klipu filmowego sam potrafi obsługiwać inne obiekty i zmienne. Wyłącznie klipowi filmowemu można przypisać kod zdarzenia za pomocą instrukcji onClipEvent dla operacji typu poinformowanie, kiedy klip zostanie załadowany, lub kiedy zostaje wciśnięty przycisk myszy. Uzyskany efekt jest identyczny z dodaniem funkcji, która będzie wywołana przy każdym wystąpieniu zdefiniowanego zdarzenia (na przykład zwolnienia przycisku myszy). Ten zestaw rozszerzonych zachowań daje nieograniczone możliwości zarówno symbolowi klipu filmowego jak i samemu językowi ActionScript w najbardziej niezwykłych i interaktywnych filmach Flasha. Na koniec, symbol przycisku posiada zupełnie inny zestaw zachowań. Na symbol przycisku składają się tylko cztery ujęcia reprezentujące cztery stany — Up, Over, Down i Hit. Zamiast odtwarzać ujęcia w kolejności, jak w przypadku innych typów symboli, przycisk odtwarza każde ujęcie w odpowiedzi na pewne zdarzenia. Kopii przycisku, za pomocą polecenia on, można nawet przypisać kod, aby wywołać instrukcje w języku ActionScript — na przykład gdy użytkownik przesuwa mysz nad przyciskiem lub klika na nim. W przyciskach można osadzać symbole graficzne i klipy filmowe.
Kiedy wykonywany jest kod? Kolejność wykonywania kodu ActionScript zależy od wielu różnych czynników. Jeśli film zawiera kilka klipów filmowych, z których każdy posiada kilka warstw i kilka ujęć, wówczas struktura ta wpłynie na kolejność wykonywania instrukcji. Poniżej przedstawiliśmy podstawowe zasady kolejności uruchamiania instrukcji w kodzie ActionScript: W obrębie pojedynczego ujęcia: • Instrukcje wykonywane są w kolejności ich występowania. Kod w obrębie danego ujęcia tworzy oddzielną jednostkę — pomiędzy początkiem i końcem odtwarzania ujęcia nie da się wykonać żadnego innego kodu. W obrębie pojedynczej warstwy: • Ujęcia realizowane są jedno po drugim. • Funkcje wykonywane są po wywołaniu ich. Pamiętaj, że można je wywołać wyłącznie po zadeklarowaniu ich. • Procedury obsługi zdarzeń (polecenia on lub onClipEvent) wykonywane są wówczas, gdy zachodzi dane zdarzenie. I w tym przypadku można je wykonać tylko po zadeklarowaniu ich. W obrębie pojedynczego klipu filmowego: • Kod w ujęciach odtwarzanych w tym samym czasie wykonywany jest w kolejności warstw, od góry na dół (czyli z wierzchu na spód). • Kolejność ujęć sekwencyjna. W obrębie filmu: • Dla jednoczesnych ujęć kod w klipie filmowym wykonywany jest po kodzie w klipie macierzystym. Warto również pamiętać, że listwa czasowa klipu filmowego rozpocznie się wyłącznie w ujęciu, w którym umieszczono kopię klipu. Rozdział 11-283
Najłatwiejszym sposobem na sprawdzenie kolejności wykonywania poszczególnych operacji jest zastosowanie akcji trace. Na przykład, masz zmienne o nazwach Sheep, Gates, Count i AmountOfSheep. Wyobraź sobie, że znajdują się one w różnych ujęciach lub różnych klipach filcowych, a ty chcesz poznać kolejność, w jakiej występują. W tym celu umieść akcję trace po pierwszym użyciu każdej zmiennej. Na przykład: Sheep = 24; trace (Sheep);
Podczas testowania filmu, jak tylko ten wiersz kodu zostanie uruchomiony, pojawi się okno Output z wyświetloną liczbą 24. Aby operacja ta była bardziej zrozumiała, możesz zmodyfikować polecenie trace aby wyświetlany komunikat zawierał nazwę zmiennej. Teraz kod będzie wyglądać następująco: Sheep = 24; trace ("Sheep = " + Sheep);
W oknie Output wyświetlony zostanie komunikat Sheep = 24. Poniższe ćwiczenie ilustruje, jak ważna jest kolejności wykonywania kodu.
Wielokolorowe kule bilardowe z jednego symbolu W tym ćwiczeniu wykonamy przykład dla gry bilardowej, do której potrzebnych jest 9 kul. Nie będzie się dało zagrać w tę grę, lecz przynajmniej widoczne będą różnokolorowe kule. Dla ułatwienia przykładu wszystkie kule będą jednokolorowe, aby nie komplikować sobie rzeczy na tym etapie poprzez dodanie, na przykład, pasków. Na początku będziemy mieli grupę kul bilardowych wszystkich w jednolitym kolorze szarym, lecz za pomocą jednej tylko funkcji nadamy im różne kolory. Kod ilustruje, jak można zastosować funkcję „członkostwa” do zdefiniowania właściwości klipu filmowego w taki sposób, aby dało się efektywnie wielokrotnie stosować pojedynczy symbol. Zastosowany w ćwiczeniu kod pokaże podkreśli również, jak istotną jest kolejność wykonywania kodu w środowisku ActionScript. Zestaw kul
Najpierw rozpoczniemy od wykonania kuli bilardowej. Ponieważ zastosujemy obiekt Color do zdefiniowania koloru (za pomocą transformacji koloru), zaczniemy od narysowania kulki, której można z łatwością przypisać dowolny kolor. 1. Narysuj kółko z szaro-białym wypełnieniem radialnym, a następnie przekształć je w klip filmowy o nazwie Ball:
Potraktujemy piłkę jak niezależny obiekt, więc należy mu przypisać pewne właściwości. Najbardziej oczywistymi właściwościami kuli bilardowej są: • • • •
Kolor Liczba Pozycja Prędkość Rozdział 11-284
Z podanych właściwości, o prędkość zadbają już wbudowane właściwości klipu filmowego x i y, natomiast dla kul bilardowych, kolor i liczba są współzależne. Prędkość w końcowej wersji gry będzie kontrolować szybkość poruszania się kuli, lecz ponieważ nie będziemy wykonywać całej gry, nie uwzględnimy tej właściwości w naszym kodzie. Ponadto, żadnej z tych właściwości nie da się zdefiniować dopóki nie umieścimy kopii symbolu na scenie: właściwości pozycji zostaną określone, gdy klon symbolu znajdzie się na scenie, więc w zasadzie musimy się zająć jedynie właściwościami koloru i liczby. Przede wszystkim wykonajmy obiekt, który będzie zawierał wszystkie możliwe kolory i liczby kul bilardowych. 2. Dwukrotnie kliknij na klipie filmowym Ball aby otworzyć go do edycji i wywołaj okno Actions dla pierwszego ujęcia na listwie czasowej. W trybie Expert wpisz poniższy kod ActionScript: BallColors = { Yellow: 1, Blue: 2, Red: 3, Purple: 4, Orange: 5, Green: 6, Brown: 7, Black: 8, White: 9 }
Ta składnia może być dla ciebie czymś nowym. Używamy tutaj bardzo pomysłowego składnika kodu ActionScript Flasha 5 o nazwie inicjalizer obiektowy. To małe stworzonko umożliwia tworzenie ogólnych obiektów, nadawanie im właściwości i przypisywanie tym właściwościom wartości. Zastosujemy tutaj wspomniany obiekt do przygotowania obiektu „pojemnika”, który przechowa wszystkie wartości dla różnych kul i ułatwi nam ich obsługę w kodzie: przez obiekt pojemnik będziemy mogli odnosić się do wszystkich elementów. W pierwszym wierszu tworzymy obiekt o nazwie BallColors: BallColors = {
Klamra po znaku równości oznacza, że po niej następuje definicja właściwości obiektu ogólnego i ich początkowe warto0ści. Zatem, następny wierszy... Yellow: 1,
...powoduje utworzenie właściwości Yellow (żółty) dla obiektu BallColors, a liczba 1 po dwukropku oznacza, że chcemy przypisać tej właściwości wartość 1. Po przecinku umieszczonym po liczbie następują pozostałe definicje właściwości i wartości dla obiektu BallColors. Na koniec wstawiamy klamrę zamykającą, która oznacza, że definicja jest kompletna. Możemy teraz odczytać z zapisać wartości tych właściwości za pomocą notacji kropkowej. W przypadku piłkę bilardowych, omówiona składnia umożliwia odniesienie się teraz do kolorów poprzez nazwę, a ponadto kojarzy każdy kolor z liczbą. Teraz musimy utworzyć funkcję, którą będziemy mogli wywołać w celu zdefiniowania kolorów.
Rozdział 11-285
3. W pierwszym ujęciu pod poprzednim fragmentem wpisz poniższy kod: function SetColor (ballColor) { col = new Color(this); trans = new Object();
W pierwszym wierszu umieściliśmy instrukcję inicjalizacji dla naszej nowej funkcji SetColor, która będzie przekazywać pojedynczy argument o nazwie ballColor. W obrębie samej funkcji utworzyliśmy dwa obiekty: col, obiekt Color, którego zastosujemy do modyfikacji koloru kul i trans, kolejny obiekt ogólny nie posiadający predefiniowanych właściwości. Następnie, po zdefiniowaniu odpowiednich wartości dla obiektu trans, zastosujemy go do przekazania zestawu parametrów do jednej z predefiniowanych funkcji obiektu Color — setTransform, którą posłużymy się do zdefiniowania transformacji kolorów na piłkach. Obiekt Color jest nowym dodatkiem w kodzie ActionScript Flasha 5 i jest to interesujący obiekt pod tym względem, że składa się z zestawu funkcji, które oddziałują na docelowy klip filmowy. Na przykład, funkcja SetColor nie działa na obiekt Color lecz na docelowy klip filmowy. Aby zastosować obiekt Color należy najpierw utworzyć kopię obiektu za pomocą instrukcji „konstruktora”, którą w tym przypadku jest polecenie new Color. Konstruktor bierze parametr definiujący docelowy klip filmowy, na którym zostanie zastosowany. W tym kodzie chcemy, aby docelowym klipem filmowym był ten, w którym obecnie się znajdujemy, dlatego też zastosujemy wyraz kluczowy this do wskazania, aby bieżący klon (czyli ten, w którym uruchomiony jest ten kod), był klipem docelowym nowego obiektu Color. Następnie musimy wpisać główną część funkcji, składającą się z serii instrukcji if...else. 4. Dodaj ten blok kodu do funkcji pod poprzednim fragmentem. Przyspieszysz pracę, jeśli wpiszesz pierwszą instrukcje if, a następnie skopiujesz i wkleisz ją osiem razy, przed dokonaniem na niej zmian: if (ballColor == BallColors.Yellow) { trans.ba = 0; } else if (ballColor == BallColors.Blue) { trans.ra = 0; trans.ga = 0; } else if (ballColor == BallColors.Red) { trans.ga = 0; trans.ba = 0; } else if (ballColor == BallColors.Purple) { trans.ra = 66; trans.ga = 0; trans.ba = 66; } else if (ballColor == BallColors.Orange) { trans.ga = 66; trans.ba = 0; } else if (ballColor == BallColors.Green) { trans.ra = 0; trans.ba = 0; } else if (ballColor == BallColors.Brown) { trans.ra = 66; trans.ga = 33; trans.ba = 0; } else if (ballColor == BallColors.Black) { trans.ra = 0; trans.ga = 0; trans.ba = 0; } else if (ballColor == BallColors.White) { trans.rb = 40; trans.gb = 40; trans.bb = 40;
Rozdział 11-286
}
Te instrukcje definiują transformacje kolorów, w zależności od koloru, jaki ma być przypisany danej piłce. Na razie na kolor naszej kuli składa się biało-szary gradient, a Flash naniesie transformacje kolorów na każdy piksel wszystkich piłek. Stanie się to poprzez pomnożenie jednej z wartości składowych modelu RGB kuli przez wartość procentową. Na przykład, jeśli chcemy z kuli usunąć kolor niebieski, mnożymy wartość Blue przez 0%. Przyjrzymy się, jak ta zasada działa dla gradientu. Rozpoczniemy od gradientu biały do czarnego umieszczonego na piłce: BIAŁY FFFFFF
JASNOSZARY 999999
CIEMNOSZARY 333333
CZARNY 000000
Następnie pomnożymy składnik niebieski (czyli dwie ostatnie cyfry każdej sześciocyfrowej szesnastkowej definicji koloru) przez 0%, co nam daje: FFFF00
999900
333300
000000
W ten sposób usunęliśmy niebieski kolor, pozostawiając odcienie żółci od najjaśniejszego do najciemniejszego, z czarnym kolorem jako najciemniejszym możliwym odcieniem. Piłka nadal zachowała swój gradient, lecz zmieniliśmy jej ogólny kolor. Prawdopodobnie zauważyłeś, że końcowy kolor wybrany przez nas to biały, i pewnie zastanawiasz się, że skoro piłka i tak już jest biała, to po co w ogóle zmieniać ten kolor. Dobre pytanie: jeśli dokładnie przejrzysz kod, spostrzeżesz, że do wszystkich wartości innych kolorów dodaliśmy sufiks a, na przykład trans.ra, natomiast do wartości koloru białego dodaliśmy b, na przykład trans.rb. Różnica polega na tym, że wartości a reprezentują wartość procentową, przez którą zostanie pomnożony bieżący kolor, a wartość b wartość, jaka zostanie dodana lub odjęta od bieżącej wartości szesnastkowej koloru. Na przykład, chcemy rozjaśnić szary odcień kuli, aby wyglądał bardziej ... no cóż, biało. Dokonamy tego poprzez dodanie 40 do oryginalnych wartości RGB rozjaśniając w ten sposób cały gradient. Naszym ostatnim zadaniem jest zastosowanie transformacji kolorów. W tym celu umieścimy wartości trans bezpośrednio w obiekcie color. 5. Dodaj poniższy kod ActionScript pod poprzedni fragment: // Teraz definiujemy kolor col.setTransform(trans); }
I w ten sposób mamy już gotowy cały kod dla kuli. Zauważ, że funkcja ta służy tylko do inicjalizacji, gdyż ponownie zastosowanie transformacji kolorów może stworzyć dziwne efekty: transformacja koloru polega na pomnożeniu czerwonego, niebieskiego i zielonego składnika kuli poprzez określone ułamki i po zastosowaniu jej na szarej piłce nadaje jej wymagany kolor. Jednakże, jeśli piłce zmieniliśmy już kolor, wówczas poprzez zastosowanie kolejnej transformacji kolorów nie uzyskamy zamierzonego koloru, lecz piłka najprawdopodobniej przybierze kolor czarny. Na przykład, możemy przypisać piłce kolor czerwony poprzez pomnożenie zielonego i niebieskiego składnika koloru kuli przez zero, pozostawiając czerwony składnik nietknięty. Technika ta stosowana jest w taki sposób, że cieniowanie kuli zostaje zachowane, dzięki czemu nadal jej kształt będzie przypominać kulę, a nie czerwone
Rozdział 11-287
kółko. Jednakże, jeśli wówczas będziemy chcieli zmienić kolor kuli na zielony (usuwając czerwony i niebieski składnik), przysporzymy sobie kłopotów, gdyż już wcześniej usunęliśmy zielony i niebieski. Oznacza to, że po zastosowaniu nowej transformacji usunie ona niebieski i czerwony składnik pozostawiając czarne kółko. Teraz musimy umieścić kule na scenie. Można to wykonać na kilka sposobów: albo ręcznie, nadając im nazwy kopii Ball1, Ball2, Ball3 i tak dalej, lub za pomocą polecenia duplicateMovieClip, aby ono wykonało za nas całą robotę. 6. W tym przypadku wystarczy przeciągnąć ręcznie każdą kopię na scenę, abyśmy mogli je na oko właściwie rozmieścić. Chcemy, aby kule zostały ułożone w kształt rombu, z piłką Ball9, białą, w środku. Kolejność kul nie jest istotna. Ukończone rozmieszczenie, z poprawnie przypisanymi nazwami kopii, powinien wyglądać mniej więcej tak:
Naszym kolejnym zadaniem będzie przypisanie wcześniej zdefiniowanych kolorów odpowiadającym im nazwom kul. Należy pamiętać, że nie możemy inicjalizować kul w pierwszym ujęciu, w jakim się ukażą, ponieważ funkcja dla inicjalizacji ich nie istnieje, dopóki ujęcie to nie zostanie zrealizowane. Pamiętaj, że kolejność wykonywania kodu daje pierwszeństwo rodzicowi, a następnie dziecku. Dlatego właśnie ujęcie definiujące funkcję SetColor nie zostanie wykonane dopóki nie zostanie uruchomiony kod na scenie.
7. Aby obejść ten problem, wstaw na głównej listwie czasowej drugie ujęcie kluczowe, a na zakończenie dodaj poniższy kod ActionScript w ujęciu 2 — wywoła on funkcję i przypisze kolory: Ball1.SetColor(1); Ball2.SetColor(2); Ball3.SetColor(3); Ball4.SetColor(4); Ball5.SetColor(5); Ball6.SetColor(6); Ball7.SetColor(7); Ball8.SetColor(8); Ball9.SetColor(9); stop();
Ten kod przypisuje każdej piłce odpowiadający jej kolor poprzez wywołanie przygotowanej wcześniej przez nas funkcji SetColor dla każdej kopii kuli na scenie, a następnie zatrzymuje się. Pierwsza instrukcja... Ball1.SetColor(1);
Rozdział 11-288
...wywołuje funkcje dla kuli Ball1, przekazując funkcji argument 1, który zostaje umieszczony w kontenerze (ballColor) zdefiniowanym przez nas podczas deklarowania funkcji: function SetColor (ballColor) {
Funkcja zostaje teraz uruchomiona... SetColor (1) {
...z liczbą 1 oznaczającą ballColor. Co się stanie teraz? Przyjrzyj się ponownie pierwszemu wierszowi pętli if z funkcji SetColor: if (ballColor == BallColors.Yellow) {
Pamiętaj, że pętla ta zdefiniuje wartość dla transformacji kolory kuli. Wiersz ten bierze aktualną wartość obiektu ballColor — 1 — i porównuje ją z wartością pierwszej właściwości w obiekcie BallColors, w którym utworzyliśmy i przechowaliśmy pary nazw i wartości: BallColors = { Yellow: 1, Blue: 2, Red: 3, Purple: 4, Orange: 5, Green: 6, Brown: 7, Black: 8, White: 9 }
Jeśli kod sprawdzi, że bieżąca wartość obiektu ballColor jest tak sama jak właściwość Yellow (żółty) tego obiektu, warunek if zostanie spełniony i wykonany zostanie kolejny wiersz funkcji SetColor: trans.ba = 0;
Ten wiersz ustanowi poprawną wartość trans do usunięcia całego składnika niebieskiego z kopii Ball1, dzięki czemu uzyskamy w efekcie żółtą piłkę. Skoro instrukcja if została spełniona, pozostałe instrukcje else if w funkcji zostaną zignorowane, a funkcja przeskoczy do wiersza, który zastosuje wartość trans: // Teraz definiujemy kolor col.setTransform(trans); }
Pamiętaj, że obiekt col jest kopią wbudowanego we Flashu obiektu Color, który wskazuje bieżący — this — klip filmowy po inicjalizacji funkcji: col = new Color(this);
Stąd col.setTransform(trans); wiersz za pomocą polecenia setTransform obiektu Color stosuje właśnie określoną wartość trans na bieżącym klipie filmowym — Ball1. wreszcie piłka została pokolorowana na żółto. Pozostała część kodu w ujęciu 2... Rozdział 11-289
...wykonuje ten sam proces dla każdej z kul na scenie, zanim film zostanie zatrzymany, abyśmy mogli zachwycić się widokiem naszego zestawu kolorowych kul bilardowych. Na pierwszy rzut oka tego typu zmiana koloru dla kilku kulek może wydać się pracochłonna, lecz prawdziwym celem tego ćwiczenia jest zilustrowanie, w jaki sposób można połączyć wbudowane funkcje Flasha z twoimi własnymi funkcjami, pętlami i kodem do tworzenia przeróżnych efektów. Innym sposobem na wywołanie funkcji i zastosowanie kolorów byłoby użycie pętli w ujęciu 2, która cyklicznie przechodziłaby pomiędzy kopiami piłek: for (i=1; i<9; i++) { eval("Ball" + String(i)).SetColor(i); } stop();
W tym przykładzie zastosowaliśmy wartość i jako licznik pętli i po prostu dodaliśmy ją na koniec obiektu Ball i polecenie SetColor w każdej iteracji pętli do przekazania funkcji SetColor liczb potrzebnych jej do przeprowadzenia wszystkich transformacji kolorów. 8. Ostatnią rzeczą, jaką musimy wykonać, jest zmiana koloru tła na autentyczny niebieski ryps i uruchomienie filmu. Powinieneś zobaczyć mniej więcej cos takiego: POOL BALS IN COLOR (KOLOROWE KULE BILARDOWE)
Resztę gry pozostawię tobie. Wskazówki odnośnie jej tworzenia znajdziesz w następnych rozdziałach. To ćwiczenie udowadnia, że klipy filmowe są obiektami. Mogą stosować właściwości i funkcje, są samodzielne i posiadają prototyp — oryginalny symbol w bibliotece — którego można zastosować do wygenerowania jego kopii. W następnym przykładzie dokładniej zagłębimy się w koncepcję klipów filmowych jako obiektów.
Rozdział 11-290
Klipy filmowe jako obiekty — rozwijane menu Aby zilustrować zastosowanie klipów filmowych jako obiektów spróbujemy zrealizować bardzo ambitny projekt — utworzymy konfigurowalne menu rozwijane. We Flashu 5 dostępnych jest kilka sprytnych klipów elementów menu o podobnej funkcjonalności, do tych, które przygotujemy w tym przykładzie, lecz głównym celem tego ćwiczenia jest przedstawienie ci technik kodowania, które będziesz mógł wykorzystać również w innych projektach. W tym ćwiczeniu zastosowaliśmy znaczną ilość kodu więc radzimy ci, abyś często zapisywał swoją pracę.
Nasze rozwijane menu będzie charakteryzowało się następującymi właściwościami: • można je wypełnić dowolną liczbą pozycji, • po rozwinięciu jej widoczna będzie maksymalna liczba pozycji, • jeśli liczba pozycji na liście przekroczy maksimum, wyświetlony zostanie pasek przewijania umożliwiający przewinięcie listy. Mając te wszystkie założenia na względzie, ukończony produkt będzie wglądać mniej więcej tak:
Zadanie nasze jest trudniejsze, niż mogłoby się to wydawać na pierwszy rzut oka. Menu składa się z kilku oddziałujących na siebie części, z których każda posiada własne zachowania, i muszą one spójnie współdziałać ze sobą aby wyprodukować całościowe zachowanie rozwijanego menu. Możemy rozbić menu na dwie główne części — pole tekstowe, które wyświetla wartość wybraną z rozwijanego pola listy, i samo pole listy.
Pole tekstowe
Pole tekstowe ma wyświetlać bieżąco zaznaczoną pozycję. Jeśli lista niczego nie zawiera, pole to może być puste. W innym przypadku jego domyślnym ustawieniem jest wyświetlanie pierwszej pozycji z listy. Na prawo od pola tekstowego znajduje się przycisk obsługujący pole listy. Po kliknięciu na nim lista rozwija się, a strzałka na przycisku zostaje skierowana w górę. Po kolejnym kliknięciu przycisku pole listy jest usuwane, a strzałka na powrót zwrócona zostaje w dół.
Rozdział 11-291
Pole listy Pole listy wyświetla zestaw pozycji (dla naszego ćwiczenia przygotowaliśmy ich cztery):
Jeśli w liście znajduje się do wyświetlenia mniej pozycji niż na rysunku, wówczas rozwijane menu odpowiednio dopasuje się do nich rozmiarem i będą widoczne wyłącznie dostępne pozycje. Jeśli w liście znajduje się więcej pozycji, wówczas wyświetlony zostanie pasek do przewijania listy. Zanim przejdziemy dalej warto zastanowić się nad połączeniu tych wszystkich elementów z perspektywy „obiektowej”. Aby właściwie wykorzystać obiektowa naturę klipów filmowych należy rozpatrzyć obiektową naturę menu, którego mamy zamiar zaprojektować. Możemy rozpocząć na poziomie górnym poprzez rozważenie właściwości, jakimi ma charakteryzować się menu i jego stanami. Na początek wystarczy, aby menu posiadało jedynie dwie właściwości: • listę pozycji menu, • wartość indeksową wskazującą na bieżąco wybraną pozycję. Menu może znajdować się wyłącznie w jednym z poniższych stanów: • ze zwiniętym polem listy, • z rozwiniętym polem listy. Właściwości zostaną przetworzone bezpośrednio w zmienne w obrębie symbolu menu rozwijanego, a stany przekształca się w zestawy ujęć na listwie czasowej. Wstępnie zatem symbol rozwijanego menu będzie się składać z trzech ujęć: jedno zainicjalizuje zmienne, a dwa kolejne posłużą do wyświetlania każdego ze stanów menu. Zdefiniowaliśmy już menu koncepcyjnie i zgromadziliśmy już wszystkie informacje potrzebne do zaprojektowania go. Następnym naszym zadaniem będzie zdefiniowanie pola tekstowego i pola listy. Do utworzenia pola tekstowego we Flashu będziemy potrzebować obszar wyświetlania tekstu składający się z tła i pola dynamicznego tekstu, a także przycisk do rozwinięcia lub zwinięcia pola listy. Pole tekstowe będzie posiadać tylko jedną właściwość: aktualnie wyświetlany tekst. Pole listy jest odrobinę bardziej skomplikowane. Składa się ono z tła, czterech obszarów wyświetlania tekstu (po jednym dla każdej pozycji) i paska przewijania. Charakteryzuje się jedną oczywistą właściwością, którą jest miejsce umieszczone w określonej odległości od górnej części listy, w którym wyświetlone zostaną pozycje listy. Właściwość ta będzie modyfikowana za pomocą paska przewijania, a jej początkowa wartość będzie wynosić 0. Zauważ, że do tej pory zdarzyliśmy już zdefiniować przynajmniej cztery nowe obiekty, z których jeden jest wspólny dla obydwu składników. Są to: • obszar wyświetlania tekstu, • przycisk rozwijania, • tło pola listy, • pasek przewijania. Rozdział 11-292
Można się szybko zorientować, że gdy zaczynamy traktować składniki jako zbiory obiektów, szybko generujemy długie listy rzeczy, jakie należy utworzyć. Na pierwszy rzut oka może się to wydać odrobinę zniechęcające, dlatego też warto na tym etapie pamiętać, że jeszcze w zasadzie nie wykonaliśmy więcej pracy. Gdy się nad tym zastanowisz okaże się, że każdy obiekt jakiego identyfikujemy musi i tak być obecny w końcowym składniku. Bez traktowania składników jako obiektów musielibyśmy zaprojektować cały klip filmowy za jednym zamachem. Poprzez podzielenie projektu dla każdego obiektu na obsługiwalne cząstki funkcjonalności, w efekcie stopniowo upraszczamy pracę, jaką mamy wykonać. Ponadto zaczynamy odnajdywać wspólne obiekty, takie jak obszar wyświetlania tekstu, które poprzednio musieliśmy projektować dwukrotnie. Poprzez tworzenie takich elementów jako oddzielne, samodzielne klipy filmowe, upraszczamy naszą pracę, zarówno pod kątem konstruowania nowych składników jak i późniejszego utrzymywania systemu.
Na szczęście powoli dochodzimy do sedna projektu. Umieściliśmy nasze pierwsze trzy podstawowe składniki — obszar wyświetlania tekstu, tło pola listy i przycisk rozwijania. Patrząc na pasek przewijania widzimy, że on również zawiera kilka składników: tło, przyciski z symbolem strzałki w górę i w dół i suwak przewijania. Właśnie zdefiniowaliśmy następujące składniki: • rozwijane menu, • pole tekstowe, • pole listy, • obszar wyświetlania tekstu, • przyciski strzałek, • pasek przewijania, • suwak przewijania, • tło pola listy. Ponieważ chcemy wypróbować i zmodularyzować maksymalnie kod, a także ułatwić komunikację pomiędzy składnikami, przygotujemy dla nich odpowiednie interfejsy, które umożliwią im porozumiewanie się między sobą. zastosujemy dwa rodzaje interfejsów: przychodzący, który będzie obsługiwać wiadomości lub instrukcje wysyłane do składnika, i wychodzący, który będzie instruował pozostałe składniki. Omówimy te interfejsy, w dalszej części ćwiczenia. Zrozumiesz konieczność stosowania interfejsów lepiej, gdy nabierzesz „bardziej zorientowanego obiektowo” podejścia do programowania w środowisku ActionScript. Teraz zabierzemy się za wykonanie tych składników. Rozpoczniemy od najmniejszych części. Pole tekstowe i pole listy złożone są z kombinacji innych składników, więc zajmiemy się najpierw ich wspólnym elementem, czyli obszarem wyświetlania tekstu. Tworzenie obszaru wyświetlania tekstu
Tego składnika użyjemy w dwóch miejscach: w polu tekstowym i w polu listy i w obydwu przypadkach służy on do wyświetlania tekstu i umożliwia zaznaczenie go. 1. Narysuj na scenie prostokąt o rozmiarze 80×20 pikseli z rogowym promieniem wynoszącym 30 stopni i przekształć go w klip filmowy o nazwie text display area:
2. Dwukrotnie kliknij na nowym klipie filmowym aby otworzyć go do edycji, a następnie przekształć prostokąt w klip filmowy o nazwie text background. W ten sposób zyskujemy dwie rzeczy: • możemy w razie potrzeby obsługiwać tło programistycznie (na przykład do zmiany rozmiaru obszaru wyświetlania),
Rozdział 11-293
•
możemy potencjalnie załadować dowolne tło za pomocą akcji loadMovie lub attachMovie. 3. W klipie filmowym text display area zmień nazwę warstwy na Background, a następnie utwórz dwie nowe warstwy o nazwach Button i Text:
4. Na warstwie Text utwórz pole dynamicznego tekstu ponad tłem:
5. Wybierz dla pola tekstowego nazwę zmiennej value i nie zaznaczaj pola wyboru Selectable, aby nie można było wybrać tej zmiennej. I tak mamy już interfejs „przychodzący” dla obszaru wyświetlania tekstu — aby zdefiniować tekst wystarczy przypisać wybrane przez nas ustawienie do zmiennej value. 6. Aby pole tekstowe odpowiadało na kliknięcia myszą należy dodać przycisk. Utwórz nowy symbol przycisk o nazwie invis button i przeciągnij kopię obiektu text background z biblioteki na środek ekranu. Ustaw górną lewą punkturę w pozycji 0,0 i w panelu Effects zmień wartość parametru Alpha na 0. 7. Powróć do klipu filmowego text display area i przeciągnij kopię przycisku invis button z biblioteki na warstwę Button. Zostanie ona wyświetlona jako półprzezroczysty niebieski przycisk. W panelu Align umieść przycisk nad istniejącym tłem. 8. Teraz dla przycisku wpisz w oknie Object Actions poniższy kod: on(release) { _parent.onTextBoxSelect(_name); }
Kod ten tworzy „wychodzący” interfejs obszaru wyświetlania tekstu. Aby klip filmowy można było wielokrotnie użyć, przesuniemy proces definiowania co się stanie gdy go zaznaczymy do momentu, aż przypiszemy go do jakiegoś elementu. Generujemy zatem zdarzenie (TextBoxSelect), które zostaje uruchomione przy każdym zaznaczeniu pola testowego. Aby umożliwić reakcję na to zdarzenie, wszystkie klipy filmowe zawierające obszary wyświetlania tekstu powinny również zawierać funkcję o nazwie onTextBoxSelect, która bierze nazwę obiektu jako parametr.
Rozdział 11-294
Moglibyśmy zastosować instrukcję onClipEvent do wykonania zadania reakcji na zaznaczenie pola tekstowego, lecz odpalanie zdarzenia ma kilka zalet: • onClipEvent wymagałaby przyłączenia tego samego (lub bardzo podobnego) kodu do każdej kopii obszarów wyświetlania tekstu. Metoda stosowana tutaj przez nas umożliwia zachowanie całego kodu w jednym miejscu. • W tej metodzie rodzic nic nie wie o mechanizmie zaznaczania pól tekstowych. Dlatego też, jeśli rozszerzymy system w taki sposób, aby zaakceptował zaznaczenie z klawiatury na równi z zaznaczeniem myszą, nie musimy wprowadzać żadnych zmian dla rodzica. • Przy każdorazowym dodaniu nowego pola tekstowego automatycznie będzie ono informować rodzica o swych zdarzeniach. Dzięki temu system staje się skalowalny. W tym systemie natkniemy się na interfejs wychodzącego zdarzenia jeszcze w kilku obiektach. Następnymi składnikami do zdefiniowania na naszej liście są przyciski strzałek. Tworzenie przycisków strzałek
Przyciski te zastosujemy trzy razy: raz jako przycisk rozwijania dla pola tekstowego i dwukrotnie w obrębie paska przewijania. W obu przypadkach jedyną różnicą jest orientacja strzałki i efekt wciśnięcia przycisku. Każdy przycisk będzie posiadał interfejsy — w zasadzie funkcje — które zastosujemy do komunikacji z resztą świata. Zatem możemy zdefiniować funkcjonalność przycisk w następujący sposób: Interfejs wejściowy SetOrientation(orientation)
To polecenie definiuje kierunek, w jaki zwrócona będzie strzałka. Interfejs wyjściowy {Button name}_onButtonUp() {Button name}_onButtonDown() {Button name}_onButtonOver()
Tutaj zastosujemy trochę inną metodę niż w przypadku obszaru wyświetlania tekstu. Wówczas potrzebowaliśmy zderzenie do obsługi funkcji zajmującej się wszystkimi polami tekstowymi, natomiast teraz chcemy przypisać dla każdego przycisku inne funkcje. Zatem każda funkcja zostanie nazwana po przycisku, do którego jest przyłączona. Aby można było określić orientację strzałki i tła oddzielnie utworzymy dla nich oddzielne symbole, a następnie dodamy je jako kopie symboli o nazwach odpowiednio Arrow i Background. Dzięki temu możemy również określić oddzielnie kolory, tworząc w ten sposób w pełni konfigurowalny przycisk. Za chwilę pokażemy, jak to będzie można zastosować w praktyce do wskazywania stanu przycisku. Zajmijmy się konstruowaniem... 1. Powróć na główną scenę i narysuj kółko o rozmiarach 20×20 pikseli. Przekształć je w klip filmowy o nazwie arrow back. 2. Następnie musimy wykonać samą strzałkę. Najprostszym sposobem będzie narysowanie kwadratu bez krawędzi o rozmiarze 15×15 pikseli i narzędziem strzałki (Arrow) ściągnięcie razem górnych i dolnych prawych rogów w celu ukształtowania trójkąta:
Rozdział 11-295
3. Gdy już narysowałeś kształt strzałki przekształć go w klip filmowy o nazwie arrow front. 4. W pierwsze ujęcie każdego z tych klipów filmowych wpisz poniższy kod ActionScript: function SetColor(newcol) { _root.functions.SetColor(this, newcol); }
Umożliwia on zdefiniowanie ich kolorów za pomocą wywołania prostej funkcji. 5. Kolejnym zadaniem jest połączenie dwóch symboli w przycisk i przypisanie mu kodu umożliwiającego programatyczną modyfikację jego orientacji. Najpierw nadaj im nazwy kopii odpowiednio Background i Arrow. 6. Następnie wyrównaj te dwa symbole, strzałkę nad kółkiem i połącz je w klip filmowy o nazwie arrow full:
7. Otwórz klip arrow full i zmień nazwę pierwszej warstwy na graphic. Następnie utwórz dwie nowe warstwy i nazwij je odpowiednio code i button. 8. W pierwsze ujęcie warstwy code wpisz poniższy kod ActionScript: function SetOrientation (orientation) { if (orientation == "down") { Arrow._rotation = 90; } else if (orientation == "up") { Arrow._rotation = -90; } else if (orientation == "left") { Arrow._rotation = 180; } else if (orientation == "right") { Arrow._rotation = 0; } }
Możemy już teraz zmienić programatycznie kierunek strzałki. 9. Utwórz nowy symbol przycisku o nazwie arrow button. W stanie Hit przycisku wstaw ujęcie kluczowe i przeciągnij kopię klipu arrow back z biblioteki na środek sceny. Zauważ, że poprzez zastosowanie tego samego kształtu dla tła i przycisku zapewniamy utworzenie właściwego obszaru uderzenia (Hit). 10. Teraz powróć do klipu filmowego full arrow i przeciągnij kopię klipu arrow button na scenę na warstwie button. Wyrównaj przycisk nad istniejącym rysunkiem. 11. Następnie otwórz okno Object Actions i do kopii przycisku dodaj poniższy kod: on (press) { onButtonDown(); } on (release) { onButtonOver(); } on (rollOver) { onButtonOver(); }
Rozdział 11-296
on (rollOut) { onButtonUp(); }
Umożliwia on zdefiniowanie funkcji do określenia trzech stanów przycisku. 12. Teraz będziemy musieli dodać ostatni fragment kodu ActionScript w celu nadania funkcjonalności przyciskowi. Poniższy kod umieść na warstwie code poniżej wcześniej wpisanego fragmentu: background.bdColor = 0x50ffff; background.buColor = 0x4471ff; background.roColor = 0xff71ff;
Tutaj najpierw definiujemy domyślne kolory dla trzech stanów przycisku. Są one następujące: button down (cyjan), button up (niebieski) i rollover (różowy). Te trzy stany są identyczne ze stanami zdefiniowanego we Flashu przycisku. Deklarujemy te kolory jako zmienne, dzięki czemu będziemy im mogli w razie potrzeby przypisać inne wartości. 13. Poniżej wpisz następny fragment kodu: function onButtonDown () { background.SetColor(background.bdColor); eval("_parent."+_name+"_onButtonDown") (); } function onButtonUp () { background.SetColor(background.buColor); eval("_parent."+_name+"_onButtonUp") (); } function onButtonOver () { background.SetColor(background.roColor); eval("_parent."+_name+"_onButtonOver") (); }
Te trzy funkcje definiują kolor tła i odpalają odpowiednie zdarzenie przy każdorazowym wejściu przez nas w dany stan. Wywołanie odpalenia zdarzenia przez funkcję przystosowane jest za pomocą polecenia eval do utworzenia nazwy funkcji z nazwy przycisku i wymaganego zdarzenia. Pamiętaj o zapisaniu wszystkich nawiasów we właściwych miejscach — jedno potknięcie i film nie będzie działać! 14. Teraz dodaj ten końcowy fragment kodu ActionScript: function Refresh () { background.SetColor(background.buColor); }
Teraz mamy już przycisk składający się z pojedynczego ujęcia, któremu można nadać nazwę kopii umożliwiająca programatyczną obsługę ujęcia. Następnym składnikiem do wykonania w liście będzie pasek przewijania. Tworzenie paska przewijania
Pasek przewijania jest kolejnym składnikiem posiadającym interfejs wychodzący. Tym razem chcemy, aby dowolny obiekt przypisany do niego składał się z listy pozycji, którą będzie można przewijać przesuwając suwak lub klikając na przyciski. ukończony pasek przewijania powinien wyglądać tak:
Rozdział 11-297
Ponadto zamierzamy, aby pasek przewijania automatycznie skalował ruchy suwaka w zależności od liczby pozycji listy do pokonania. W ten sposób zgromadziliśmy następujące właściwości interfejsu wychodzącego: • • • •
refreshDisplay — ponownie oblicza wyświetloną listę pozycji listItems — tablica pozycji przeznaczonych do wyświetlenia itemsToDisplay — maksymalna liczba tych pozycji, która jest widoczna w dowolnej chwili offset — jak daleko w liście należy wyświetlić pierwszą pozycję
Zaczniemy od przygotowania tła dla suwaka. 1. Narysuj na głównej scenie prostokąt o rozmiarach 22×150 pikseli bez wypełnienia, o szerokości linii wynoszącej 2 i o promieniu rogowym 30 stopni. Przekształć go w klip filmowy o nazwie slider full, a następnie, wewnątrz tego klipu, przekształć go ponownie w symbol graficzny o nazwie slider back:
2. Przejdź do klipu slider full i zmień nazwę pierwszej warstwy na Background. Musimy dodać do naszego paska przewijania trzy przyciski: dwie strzałki do rozwijania i zwijania i suwak paska, którego będzie można przesuwać za pomocą myszy:
Przyciski rozwijania i zwijania dodamy bez problemu, gdyż zdefiniowaliśmy już strzałkę.
Rozdział 11-298
3. Utwórz nową warstwę o nazwie Arrows i umieść na niej kopię klipu arrow full na obydwu końcach paska przewijania. Nadaj im odpowiednie nazwy kopii — scrollUp i scrollDown. Chociaż dysponujemy funkcjami do orientacji strzałek, w tym przypadku bardziej sensowe będzie po prostu obrócenie symboli, gdyż orientacja ich nie zmieni się w trakcie odtwarzania filmu. 4. Będziemy musieli utworzyć również symbol dla suwaka przewijania. Utwórz nową warstwę o nazwie Scroll Bar i narysuj na scenie prostokąt o rozmiarze 20×30 pikseli. Możesz nadać mu bardziej profesjonalny wygląd poprzez naniesienie na niego efektu wytłoczenia:
5. Przekształć go w klip filmowy o nazwie scroll block i nadaj kopii tego klipu nazwę scrollBar. 6. Wewnątrz klipu scroll block zaznacz ponownie prostokąt i tym razem przekształć go w symbol graficzny o nazwie slider. Upewnij się, że znajdujesz się w klipie scroll block i za pomocą panelu Info umieść górną część symbolu slider na współrzędnej Y w pozycji 0. Dzięki temu później łatwiej nam będzie prawidłowo go umieścić. 7. Zmień nazwę pierwszej warstwy klipu scroll block na Graphic i dodaj do niej dwa ujęcia. Następnie utwórz dwie kolejne warstwy i nadaj im nazwy Code i Button. 8. Przeciągnij wcześniej przez nas wykonany przycisk invis button z biblioteki na warstwę Button. Tym razem jednak, zamiast pokryć rysunek przyciskiem, zwiększ rozmiar przycisku tak, aby stał się dwukrotnie dłuższy od rysunku. Dzięki temu przycisk będzie odpowiadać na kursor myszy nad i pod suwakiem, aby można go było przesuwać:
9. Aby uzyskać dokładnie taki efekt, zastosuj panel Info do zmiany rozmiaru przycisku na 20x30 pikseli i umieść go nad rysunkiem slider tak, aby nakładał się na niego równo po obu stronach. Aby suwak właściwie współdziałał z paskiem przewijania, będziemy potrzebować kolejnego interfejsu wychodzącego o następujących właściwościach: onScrollUp onScrollDown
Teraz musimy znaleźć jakiś sposób na odpalenie zdarzeń dla tego interfejsu. Chcemy, aby suwak reagował tylko wówczas na kursor myszy, gdy znajdzie się on nad paskiem przewijania i będzie przesuwać się w dół. Dlatego też należy utworzyć ujęcia dla dwóch stanów: drag i nodrag. 10. Przekształć wszystkie ujęcia na warstwie Code w ujęcia kluczowe, a następnie nazwij pierwsze ujęcie nodrag, a drugie drag:
Rozdział 11-299
11. Otwórz dla przycisku invis button okno Object Actions i wpisz w nie poniższy kod, który umożliwi przyciskowi przełączanie się pomiędzy dwoma stanami: on (release, releaseOutside) { gotoAndPlay ("nodrag"); } on (press) { gotoAndPlay ("drag") }
Kod ten przełączy suwak w stan przeciągania (drag) gdy kursor myszy przesuwa się w dół, a w stan nie ciągnięcia (nodrag) zawsze wtedy, gdy kursor przycisk myszy zostanie zwolniony. Oczywiście, aby postępować zgodnie z metodą obiektową, przyłączyliśmy kod do samego przycisku, aby wiedział, jak ma się zachować. 12. Pierwszy stan, nodrag, składa się z jednego ujęcia. Nic w tym stanie nie powinno się dziać, dlatego też do jego ujęcia dodaj poniższy kod: stop();
13. Drugi stan, drag, musi ciągle podążać za pozycją myszy. W tym celu należy dodać dla niego dwu-ujęciową pętlę. Rozpocznij ją w ujęciu 2: if (_ymouse<0) { _parent.onScrollUp(); } else if (_ymouse>30) { _parent.onScrollDown(); }
14. Teraz zamknij pętlę poprzez dodanie poniższego kodu w ujęciu 3: gotoAndPlay("drag");
Kod ten sprawdza ciągle, czy kursor myszy znajduje się nad czy poniżej rysunku suwaka i odpala odpowiednie zdarzenie. Liczba 0 oznacza górną część symbolu slider, a liczba 30 dolną. Podczas przewijania chcemy znać granice, w obrębie których możemy przesuwać suwak. Aby automatycznie je obliczyć, nawet po zmianie rozmiaru symbolu paska przewijania, możemy zastosować kolejny symbol graficzny umieszczony pomiędzy strzałkami i wówczas po prostu odczytać górną i dolną pozycję rysunku. 15. Utwórz nową warstwę w symbolu slider full i nazwij ją Scroll Range. Przeciągnij kopię przycisku invis button z biblioteki na scenę i zmień jego rozmiar na 20x110 pikseli. Teraz powinien już pasować pomiędzy przyciski strzałek. 16. W panelu Instance zmień zachowanie przycisku invis button na klip filmowy. W ten sposób będziemy mogli nadać kopii przycisku nazwę scrollRange — zrób to teraz. 17. Następnie umieść przycisk scrollRange wygodnie pomiędzy dwie strzałki. Teraz możemy już wykorzystać jego właściwości y i height to obliczenia dostępnego zakresu przewijania. Po dodaniu przycisków przewijania nadszedł czas na przygotowanie paska przewijania do reagowania na zdarzenia.
Rozdział 11-300
18. Utwórz nową warstwę o nazwie Code w symbolu slider full i przygotuj palce na odrobinę pisania. Rozpocznij od dodania poniższych funkcji w ujęciu 1 warstwy Code. Będą one reagować wówczas, gdyż strzałka przewijania zostanie wciśnięta lub suwak przeciągnięty w dół bądź w górę: function scrollUp_onButtonDown () { SetOffset(_parent.offset-1); } function scrollDown_onButtonDown () { SetOffset(_parent.offset+1); } function onScrollUp () { SetOffset(_parent.offset-1); } function onScrollDown () { SetOffset(_parent.offset+1); }
Ten fragment wywołuje funkcję SetOffset (którą utworzymy za chwilę) i przekazuje jej wymagany argument, aby mogła aktualizować odległość przy każdorazowym wystąpieniu przewijania. 19. Następnym naszym zadaniem będzie dodanie kodu ActionScript do zdefiniowania tej funkcji. Umieść go dokładnie poniżej dopiero co wprowadzonymi funkcjami: function SetOffset (val) { if (val>=0 and val<=_parent.listItems.length-_parent.itemsToDisplay) { _parent.offset = val; UpdateBarPos(); _parent.refreshDisplay(); } }
Ta funkcja najpierw sprawdza, czy przewijanie może przekroczyć zakres odległości. Jeśli nie, odległość zostaje aktualizowana, wyświetlona lista odświeżona, a pozycja paska przewijania również zaktualizowana. 20. Aktualizacja zostaje zrealizowana za pomocą następnej funkcji — UpdateBarPos. Dodaj teraz poniższy kod: function UpdateBarPos () { if (_parent.listItems.length>0) { scrollBar._y = scrollRange._y+(_parent.offset*(scrollRange._height→scrollBar._height/2)/(_parent.listItems.length-_parent.itemsToDisplay)); } }
Ta funkcja oblicza proporcję obszaru przewijania, która reprezentuje odległość w dół listy i odpowiednio przesuwa pasek przewijania. Na początku listy pasek przewijania będzie się znajdować u góry swego zakresu, a na końcu listy u dołu zakresu. Skoro poradziliśmy już sobie z kodem zdarzeń, czas na wpisanie kodu do zdefiniowania składników. 21. W pierwszym ujęciu wpisz następujący fragment kodu, poniżej kodu zdarzeń: function SetupScrollButton (scrollBut) { scrollBut.background.roColor = scrollBut.background.buColor; scrollBut.background.bdColor = scrollBut.background.buColor + 0x101020; scrollBut.Refresh(); } function UpdateScrollBlockHeight () { scrollBar._height = 2*scrollRange._height/_parent.listItems.length; if (scrollBar._height<50) { scrollBar._height = 50;
Rozdział 11-301
} }
Pierwsza funkcja określa kolory przycisków wykorzystując do tego kolor tła. Druga funkcja zmienia wysokość paska przewijania aby dopasować ją do jego zakresu i definiuje pozycję paska dla pierwszej jego aktualizacji. Niemniej jednak nie można w tym ujęciu określić kolorów przycisków, ponieważ kod definiujący ich domyślne kolory nie zostanie uruchomiony dopóki nie skończy się kod w ujęciu macierzystym (czyli w pierwszym ujęciu paska przewijania). Zatem, jeśli chcemy określić nowe kolory w ujęciu 1, zostaną one nadpisane. Możemy obejść ten problem poprzez wywołanie funkcji definiującej te kolory dopiero nie wcześniej niż w ujęciu 2. 22. W tym celu wstaw kolejne ujęcie kluczowe na warstwie Code i wpisz poniższy kod ActionScript: SetupScrollButton(scrollUp); SetupScrollButton(scrollDown); UpdateBarPos(); UpdateScrollBlockHeight (); stop ();
W ten sposób zakończyliśmy wpisywanie kodu dla paska przewijania, który jest prawie ostatnim na naszej liście podstawowych składników. 23. Na koniec dodaj drugie ujęcie do wszystkich warstw aby wyrównać je z warstwą Code. Teraz jesteśmy już gotowi na utworzenie pierwszego z naszych dwóch głównych składników, czyli pola listy. Tworzenie pola listy
Pole to będzie się składać w dużej mierze z symboli, które już zdefiniowaliśmy, za wyjątkiem naszego ostatniego podstawowego składnika, czyli tła pola listy. Na szczęście nie jest on trudny do wykonania. 1. Narysuj na scenie prostokąt o rozmiarze 130×110 pikseli z promieniem rogowym wynoszącym 30 stopni. Przekształć go w klip filmowy o nazwie list box back, a następnie nadaj mu nazwę kopii boundingBox:
2. Nadal na głównej scenie umieść cztery klipu text display area na tym polu i nadaj im nazwy kopii textBox1, textBox2, textBox3 i textBox4. ponadto przeciągnij kopię symbolu slider full na scenę z mień jego rozmiar na 20×80 pikseli. 3. Teraz umieść wszystkie elementy na scenie w taki sposób, aby przypominały pole listy:
Rozdział 11-302
4. Na koniec zaznacz wszystkie elementy i przekształć je w jeden klip filmowy o nazwie ListBox. Teraz możemy już dodać do naszego pola listy funkcjonalność. Ponieważ większość pracy już wykonaliśmy poprzez kodowanie podstawowej funkcjonalności w podstawowych składnikach, ten proces będzie stosunkowo prosty. 5. W klipie filmowym List Box zmień nazwę warstwy na Components, a następnie utwórz nową warstwę o nazwie Code. Dodaj poniższy kod ActionScript do ujęcia 1 tej warstwy: listItems = new Array(); itemsToDisplay = 4; offset = 0;
Kod ten definiuje zmienną listItems jako tablicę przygotowaną na dodanie do niej pozycji, określa liczbę pozycji, jaką można wyświetlić jednorazowo na 4 (ponieważ mamy cztero pola tekstowe) i nadaje zmiennej offset wartość początkową 0. Następnym zadaniem jest przygotowanie pola listy do reagowania na zdarzenia. 6. Najpierw dodaj kod dla tej funkcji w ujęciu 1. Umożliwi ona przewijania listy: function refreshDisplay() { getListItems();
Ta funkcja jest to procedura obsługująca zdarzenie rerfreshDisplay, która będzie wywoływana przy każdym przewinięciu paska przewijania przez użytkownika. Najpierw zapewnia, że posiada aktualną kopię pozycji listy przechowanych w jej rodzicu za pomocą funkcji getListItems (którą wkrótce zdefiniujemy). 7. Następnie dodaj ten wiersz: totalheight =0;
Kod ten inicjalizuje zmienną gotowa do obliczenia wysokości pola listy. 8. Teraz wpisz: // Definiujemy widoczność paska przewijania scrollBar if (listItems.length <= itemsToDisplay) { scrollBar._visible = false; } else { scrollBar._visible = true; }
Oznacza to, że pasek przewijania zostanie wyłączony, gdy liczba pozycji na liście jest mniejsza niż liczba pozycji do wyświetlenia.
9. Teraz umieścimy kilka pozycji w polach listy. Dodaj poniższy kod: // Dodajemy listę pozycji do pól for(i=0;i
Rozdział 11-303
Rozpoczynając od pozycji offset, kod ten przechodzi przez listę, wypełniając pola wyświetlania. Zwiększamy również wartość totalheight o wysokość każdego wyświetlonego pola. W ten sposób uzyskujemy całkowitą wysokość 4×20 = 80, chyba że liczba pozycji na liście wynosi trzy lub mniej. W takiej sytuacji będziemy musieli dodać jeszcze jeden fragment kodu: // Ukrywamy pozostałe elementy for(;i
10. Jeśli na liście faktycznie znajduje się mniej pozycji niż pól wyświetlania, wówczas pozostałe pola powinny stać się niewidoczne. Dlatego też ostatnim zadaniem do wykonania w tej sekcji będzie zmiana rozmiarów pól aby dopasować je do ich zawartości. Wpisz następujący kod: boundingBox._height = totalheight + 20; scrollBar._height = totalhegith; }
Nie musimy w zasadzie zmieniać rozmiaru paska przewijania, gdyż jego wysokość będzie wynosić 80 lub stanie się on niewidoczny. Niemniej jednak, jeśli później zmienimy kod (na przykład w celu uzyskania elastycznej liczby pól tekstowych), wówczas dzięki temu będziemy pewni, że cały kod zachowa swoją spójność i nie będzie zawierać żadnych błędów. Teraz musimy zdefiniować funkcję getListItems aby można było wypełnić listę danymi. 11. Wpisz ten kod w ujęciu 1: function hetListItems() { for (i=0;i<_parent.listItems.length;i++) { listItems[i] = _parent.listItems[i]; } }
12. Konieczne jest również, aby można było zareagować na zaznaczoną pozycję listy. Wpisz poniższy kod, który tworzy nowy interfejs wychodzący, który przekazuje zdarzenia do rodzica: function onTextBoxSelect(textBox) { _parent.setValue(eval(textBox).value); _parent.gotoAndPlay(“list_up”); }
Przede wszystkim fragment ten zmienia zaznaczoną wartość na tą, na którą kliknął użytkownik, a następnie zamyka pole listy. Teraz musimy zapewnić, że pole listy reaguje na zmiany w liście pozycji, jaką ma wyświetlać — musi być aktualne. W tym celu utworzymy kolejną sprawdzającą dwuujęciową pętlę.
Rozdział 11-304
13. Na warstwie Code wstaw dwa nowe ujęcia kluczowe i nadaj ujęciu 2 nazwę refreshLoop. W tym samym ujęciu wpisz poniższy wiersz kodu... refreshDisplay();
15. Na koniec, dodaj ujęcie w ujęciu 3 na warstwie Components aby wyrównać ją z warstwą Code. I już prawie wszystko mamy zrobione. Po wielkim wysiłku jesteśmy już gotowi na połączenie wszystkich elementów w kompletne rozwijane menu. Łączenie wszystkich elementów
Dla przypomnienia: menu będzie się składać z pola listy plus pole tekstowe złożone z przełączanego przycisku i obszaru wyświetlania tekstu. Dodamy również tło za polem tekstowym i przycisk przełączania, aby dopracować jego wygląd. 1. Na głównej scenie głównej listwy czasowej zaznacz całe pole listy, przekształć je w klip filmowy o nazwie DropDownMenu i nadaj mu nazwę kopii MyMenu. Wewnątrz tego nowego klipu filmowego zmień nazwę warstwy na List Box i utwórz kolejną warstwę o nazwie Text Box. 2. Przeciągnij na scenę na warstwie Text Box symbole arrow full, list box back i text display area. 3. Zmień rozmiar symbolu list box back na 130x30 pikseli, a następnie umieść pozostałe dwa elementy nad tym symbolem:
4. Nadaj symbolowi arrow full nazwę kopii toggle_button, a symbolowi text display area nazwę selection. 5. Teraz musimy zdefiniować kilka procedur obsługujących zdarzenia dla tych obiektów. Utwórz nową warstwę o nazwie Code i w pierwsze ujęcie wpisz następujący kod ActionScript: // Inicjujemy funkcje i zmienne listItems = new Array(); function toggle_button_onButtonDown() { gotoAndPlay(nextState); } function setValue(val) { selection.value = val; this.value = val; }
Przede wszystkim inicjalizujemy listItems jako tablicę. Ponadto przygotowujemy procedurę obsługi dla przycisku rozwijania (toggle_button_onButtonDown). Ta procedura po prostu przełącza przycisk pomiędzy stanami za pomocą zmiennej nextState, którą zdefiniujemy później. Na koniec wywołujemy funkcję
Rozdział 11-305
setValue gdy w polu listy zostaje zaznaczona jakaś wartość. Funkcja ta wykonuje dwie czynności — definiuje wartość do wyświetlenia w obszarze wyświetlania tekstu i określa właściwość rozwijanego menu, czyli zmienną value. 6. Na warstwie List Box nadaj klipowi filmowemu list box nazwę kopii drop_down_list. 7. Aby skompletować pole listy musimy utworzyć dwa stany: list_up i list_down. Możemy to wykonać poprzez dodanie dwóch ujęć kluczowych na warstwie kodu, o nazwach odpowiednio list_up i list_down. Dodaj następujący kod ActionScript w ujęcie 2... nextState = "list_down"; toggle_button.SetOrientation("down"); drop_down_list._visible = false; stop();
Ten kod jest stosunkowo prosty. Najpierw definiujemy zmienną nextState, którą najpierw zastosowaliśmy w sekcji toggle_button_onButtonDown. Zmienna ta przełącza akcję przycisku rozwijania. Następnie określamy orientację strzałki — skierowana w dół, gdy lista jest ukryta, a w górę, gdy jest wyświetlona. Na koniec definiujemy pole listy, aby było widoczne zanim akcja zostanie zatrzymana. 9. Teraz dodaj ujęcia do dwóch kolejnych warstw i wyrównaj je z warstwą Code. I to już właściwie wszystko. Poprzez podzielenie całego kodu na zdefiniowane obszary w obrębie składników, stopniowo uprościliśmy każdy wyższy poziom integracji. Teraz możemy zastosować menu. Upewnij się, że na scenie widoczna jest jego kopia i wypełnij właściwość listItems pozycjami listy. Pamiętaj, że nie możemy zastosować tablicy listItems przed jej inicjalizacją. 10. W tym celu dodaj poniższy kod do pierwszego ujęcia na głównej listwie czasowej: // Inicjujemy rozwijane menu for (i = 0;i<10;i++) { listItems[i] = "My Entry " + String(i); }
11. A teraz dodaj kolejne ujęcie do pierwszej warstwy:
Już możesz uruchomić swój film i zobaczyć listę wypełnioną pozycjami My Entry oznaczonymi liczbami od 0 do 9:
Rozdział 11-306
W ten sposób utworzyłeś rozwijane pole listy, jakie możesz zastosować w dowolnej aplikacji i wypełnić za pomocą prostej pętli podobnej do tej, którą przed chwilą zastosowaliśmy. Następnym krokiem byłaby integracja tego pola listy w aplikacji, może poprzez dodanie kodu do przycisku, którego użytkownik wciskałby dokonując wyboru elementu. Ten kod umożliwiałby na przykład zakup, lub można by go było zastosować do określenia zmiennych i właściwości w innym miejscu aplikacji.
Zakończenie W tym rozdziale w dużej mierze zajęliśmy się podstawami i kodem. Mamy nadzieję, że dzięki zagadnieniom teoretycznym i praktycznym poruszonym tutaj zdobyłeś wiadomości dotyczące stosowania funkcji w połączeniu z innymi rodzajami kodu i zachęciły cię do umieszczania kodu w niewielkich składnikach, które następnie można połączyć w większą całość.
Rozdział 11-307
Rozdział 12 Efekty wizualne z zastosowaniem języka ActionScript W tym rozdziale przedstawimy ci w jaki sposób każdy, nawet stosunkowo nowy użytkownik języka ActionScript, może go używać do tworzenie naprawdę świetnych efektów na ekranie. Podzielimy się z tobą pomysłami i najbardziej ulubionymi niewielkimi sztuczkami, z nadzieją, że spodoba ci się to co zobaczysz, zrozumiesz kod i nauczysz się go stosować do realizacji własnych pomysłów, tworząc własny repertuar ulubionych technik i twórczych metod. Jak zawsze zamieściliśmy na płycie CD-ROM pliki z przykładami z ćwiczeń, abyś mógł się im przyjrzeć i je zachować. Zanim zajmiemy się kodowaniem efektów, przypomnimy zasady stosowania jednego z moich najbardziej zaufanych narzędzi, czyli tablic.
Tablice We Flashu bardzo często zdarza się, że pracujesz z wielką liczbą zmiennych i obiektów. Czy jest to grupa przycisków, klipów filmowych czy seria zmiennych, w wielu sytuacjach musimy przechować kilka podobnych obiektów dla zastosowania w naszych skryptach. We Flashu istnieje pewien sposób na zorganizowanie serii obiektów czy zmiennych w listę, do której można się następnie bez problemu odnieść: tablice. Tablica zachowuje się podobnie do ponumerowanej listy, gdyż tak jak ona posiada ponumerowane wejścia, w których można przechowywać dane. Aby zadeklarować tablicę w języku ActionScript należy zastosować następującą instrukcję: my Array = new Array (10)
Kod ten utworzy nową tablicę, która może przechować dziesięć wartości. Teraz możesz już przypisać do tablicy wartości (lub obiekty) poprzez zastosowanie nazwy tablicy z następującym po niej numerze okienka, do którego chcesz uzyskać dostęp, podanego w kwadratowych nawiasach. Pozycje tablice numeruje się zaczynając od 0. Następna instrukcja utworzy tablicę i wstawi w pierwsze trzy wejścia wartości: myArray=new Array (); myArray[0]=100; myArray[1]=256; myArray[2]=34;
Zauważ, że nie musisz określać rozmiaru tablicy, aby można ją było zapełnić wartościami. Ja mogę uzyskać ten sam efekt za pomocą poniższego kodu:
Rozdział 12-308
myArray=new Array (); myArray=[100,256,34]
liczby umieszczone w kwadratowych nawiasach zostaną automatycznie przypisane do numerów indeksowych tablicy w takiej samej kolejności, jak w poprzednim fragmencie kodu. Jak można edytować lub odczytać każde wejście w liście? Najlepszym sposobem jest zastosowanie pętli. Jeśli chcę wykonać jakąś operację na pozycjach w tablicy, zastosuję zmienną licznika pętli jako indeks w tablicy, do przejścia kolejno przez wszystkie pozycje tablicy. Do tego typu przetwarzania świetnie nadaje się pętla for. W dalszej części rozdziału zastosujemy wiele pętli for w ćwiczeniach, więc będziesz miał okazję poćwiczyć ich użycie.
Efekty wizualne Rozpocznijmy od pierwszego przykładu zastosowania kodu ActionScript w celu zyskania interesujących efektów na ekranie. W tym ćwiczeniu zastosujemy wiecznie popularny ścigacz myszy.
Ścigacz myszy Na początek wykonamy prosty ścigacz myszy z wykorzystaniem polecenia powielania klipów filmowych do utworzenia „ogona”. Będzie to kolejna wariacja na ten sam temat, w której znajdziesz inną metodę niż opisaną w poprzednim rozdziale. Efekt ten ilustruje, że do uzyskania tego samego rezultatu można zastosować wiele różnych technik programowania. Tworzenie ścigacza myszy
Poniżej przedstawiliśmy obrazek ukończonego efektu, przypominającego nieco kometę:
1. W nowym filmie utwórz nowy klip filmowy o nazwie ball. Narysuje w nim kółko bez konturu i wypełnij je gradientem radialnym przechodzącym od niebieskiego w środku do przezroczystości na zewnątrz. Upewnij się, że kółko jest odpowiedniego rozmiaru do ścigania myszy, ponieważ jeśli zmienisz jego rozmiar po umieszczeniu go na głównej scenie uzyskasz dziwne efekty, gdy kod będzie obsługiwać oryginalny (pełno-rozmiarowy) klip filmowy. Moje kółko ma rozmiar 85.5 na 85.5 pikseli. 2. Aby uzyskać właściwy efekt gradientu podświetl jednolite niebieskie wypełnienie i z menu Fill wybierz radialny gradient. Teraz możesz zaznaczyć próbkę farby znajdującą się na prawo od paska zakresu gradientu i za pomocą panelu Mixer ustawić jej przezroczystość (parametr Alpha) na około 30%:
Rozdział 12-309
3. Umieść kopię klipu ball w pierwszym ujęcie na pierwszej warstwie głównej listwy czasowej i nadaj jej nazwę ball0. Nadaj tej warstwie długość trzech ujęć:
4. Utwórz kolejną warstwę o nazwie actions i wstaw w niej trzy następujące po sobie ujęcia kluczowe. Zapewne się już przyzwyczajasz do tego modelu składającego się z trzech ujęć kluczowych jako standardowego ustawienia dla wielu klipów filmowych: pierwsze ujęcie zawiera kod inicjalizujący, drugie interaktywny krok, a trzecie instrukcję gotoAndPlay(2) do ciągłego odtwarzania kroku z drugiego ujęcia. W tym przypadku zdefiniujemy tablicę do przechowywania naszych powielonych rysunków ścigacza myszy w pierwszym ujęciu, a następnie przejdziemy przez tablicę aby przesunąć każdy klip filmowy w drugim ujęciu kluczowym. W trzecim ujęciu proces z poprzedniego będzie odtwarzany ciągle aby ścigacz kontynuował ściganie... Naszym pierwszym zadaniem jest utworzenie tablicy do przechowywanie odniesienia do klipu filmowego ball0 i jego kopii. Wówczas będziemy mogli odnosić się do klipów filmowych stosując odpowiedni numer indeksowy wejścia w tablicy. 5. Dodaj ten kod na warstwie Actions w ujęciu 1 głównej listwy czasowej aby utworzyć tablicę: balls = new array();
Musimy zdecydować ile będzie nam potrzebnych w skrypcie kopii tego klipu. Mnie wyszło, że w sumie będę potrzebować dziesięć piłek, co oznacza, że muszę powielić mój klip filmowy ball0 dziewięć razy. Zastosowałem zmienną do przechowywania tej wartości, gdyż dzięki niej, jeśli później będę chciał zmienić liczb ścigających piłeczek, wystarczy abym zmienił tą wartość zmiennej w kodzie. Rozdział 12-310
6. Dodaj poniższą instrukcję po istniejącym kodzie w ujęciu 1: num_balls = 10;
7. Ponieważ na scenie mamy już jedną piłkę, przypiszemy kopię ball0 do pierwszej pozycji w tablicy poprzez dodanie następującej instrukcji: balls[0] = ball0;
Następnym krokiem będzie utworzenie pętli for do budowania kopii klipu ball0, które wypełnią pozostałe wejścia w tablicy. 8. Dodaj ten kod do istniejącego skryptu: for (i=1; i
W instrukcji inicjalizującej pętli for rozpoczynamy od zmiennej licznika i równej 1, ponieważ w tablicy znajduje się już jedna piłka ball0. Część warunkowa pętli for, i
Skoro mamy już nową piłkę bezpiecznie umieszczoną w tablicy, możemy uzyskać do niej dostęp poprzez tablicę i inicjalizować ją: balls[i].x_rate=0; balls[i].y_rate=0; balls[i]._xscale-=(i*10); balls[i]._yscale-=(i*10); }
W tym kodzie określamy dwie zmienne rate, które zastosujemy do obliczenia ruchu w następnym ujęciu, jak również definiujemy rozmiar nowego klipu. Aby efekt był bardziej interesujący postanowiłem pomniejszać stopniowo piłki poprzez pomnożenie bieżącej wartości licznika. Ten blok kodu stanowi świetną ilustrację przydatności licznika w pętli for, która znacznie przekracza jego pierwotną funkcję. 9. Teraz dodaj ostatnią sekcję kodu to tego ujęcia: startDrag ("ball0", true);
Ten kod stosuje polecenie startDrag w celu przyczepienia klipu ball0 do kursora myszy. Kompletny kod w ujęciu 1 powinien wyglądać tak:
Rozdział 12-311
balls = new array(); num_balls = 10; balls[0] = ball0; for (i=1; i
Następne ujęcie kluczowe, w ujęciu 2, zawiera skrypt ruchu, który stanowi prostą wersję zachowania przyciągającego, jaką ponownie zastosujemy w dalszej części tego rozdziału. Tym razem chcemy, aby każda piłka została przyciągnięta do piłki bezpośrednio poprzedzającej ją w tablicy. Aby ruch przyciągani zadziałał, zdefiniujemy dwie zmienne — speed i friction, które zastosujemy do obliczenia przyciągania. 10. Dodaj poniższy kod do ujęcia 2 na warstwie Actions: speed=2; friction=0.45;
Wartość zmiennej speed oznacza w zasadzie liczbę ujęć potrzebnych nowej piłce do złapania ostatnio utworzonej piłki. Jeśli zmiennej tej przypisana jest wartość 1, piłki nigdy nie ustawią się w ogonku za kursorem myszy, gdyż zbyt szybko dobiegną jedna do drugiej. Zmienna friction z kolei opisuje symulowane tarcie powietrza powodujące utratę energii piłki podczas poruszania się w powietrzu. Im większa jest jej wartość tym wolniej piłka będzie się zatrzymywać. Puścimy piłki w ruchu poprzez dodanie prędkości (zmienne rate), które przechowamy w ujęciu 1, do pozycji x i y powielonych klipów filmowych. I w tym przypadku zastosujemy pętlę, aby maksymalnie wykorzystać możliwości tablicy. 11. Dodaj poniższy kod do istniejącego skryptu w ujęciu 2: for (i=1; i
Ten kod stosuje pochodne zmienne Xdiff i Ydiff do obliczenia wartości zmiennych x_rate i y_rate, które będą kontrolować ruch. Wartość początkowa tych zmiennych będzie równa 0, lecz określimy tutaj również odległość pomiędzy piłkami, podzieloną przez zmienną prędkości i dodamy wynik do początkowej wartości zmiennych rate. 12. Teraz wpisz kolejny blok kodu do ujęcia 2 — wprawi on piłki w ruch: balls[i].x_rate*=friction; balls[i].y_rate*=friction; balls[i]._x+=balls[i].x_rate; balls[i]._y+=balls[i].y_rate; updateAfterEvent(mouseMove); }
Rozdział 12-312
W tym kodzie mnożymy zmienną rate przez zmienną tarcia aby symulować utratę energii, modyfikujemy właściwości _x i _y klipu filmowego za pomocą wartości zmiennych rate z poprzedniego bloku i na koniec aktualizujemy pozycję filmu po ruchu kursora myszy. A oto kompletny skrypt dla ujęcia 2: speed=2; friction=0.45; for (i=1; i
Możemy już teraz zakończyć film 13. Dodaj tą instrukcję do ujęcia 3 na warstwie Actions: gotoAndPlay (2)
Możesz teraz przetestować film i zobaczyć całkiem fajowy efekt. Czas na eksperymentowanie: wypróbuj animację z inną liczbą piłek i innymi wartościami zmiennych dla tarcia i prędkości. innym ćwiczeniem może być na przykład wyłączanie i włączanie śladu myszy z wykorzystaniem klawisza do przełączania statusu. Zastosowanie różnych rysunków również może dać ciekawy wygląd ścigacza. Spróbuj również utworzyć klip filmowy do przechowania całego efektu, abyś mógł go importować do innych filmów Flasha. Ten przykład prezentuje proste zastosowanie akcji duplicateMovie. Jest on łatwy i przyjemny, gdyż cały proces powielania wykujemy w pierwszym ujęciu w dosyć dobrze kontrolowany sposób. W kolejnym ćwiczeniu zastosujemy powielanie dla uzyskania czysto wizualnego efektu.
Efekt cząsteczki: ogień Niektóre efekty wizualne niezwykle trudno się animuje za pomocą tradycyjnych środków. Wyobraź sobie, że chcesz wykonać animację płonącej świecy. Jeśli spróbujesz narysować animację ujęcie po ujęciu we Flashu, prawdopodobnie skończysz z czymś przypominającym kreskówkę, chyba że jesteś niezwykłym wektorowym artystą. Możesz uzyskać efekt ognia o wiele bardziej realistycznego poprzez zastosowanie powielania do symulacji tańczącego ognia. Efekt ten można sklasyfikować jako efekt „cząsteczki”, gdyż zastosujemy wiele małych obiektów do symulacji większego. Efekty cząsteczek można używać do symulacji wielu zjawisk, od deszczu po stado ptaków.
Rozdział 12-313
Ogień
Istotnym aspektem większości efektów cząsteczek jest to, że obiekty składnikowe aktywnie kontrolują ich własne zachowanie. Aby utworzyć efekt ognia, przygotujemy cząsteczkowy klip filmowy ze stosunkowo prostym wewnętrznie zdefiniowanym zachowaniem, które będzie nakazywało klipowi poruszanie się w górę. W taki sposób powstanie iskierka, która będzie się rozrastać w celu symulacji płomienia. Następnie powielimy płomienie aby również wrastały aż do zaniknięcia.
Główny film tworzy filmy cząstkowe i umożliwia im swobodne poruszanie się. Po ukończeniu ćwiczenia będziemy mogli przeciągnąć ten klip filmowy do dowolnego filmu, w jakim zechcesz rozpalić ogień. 1. Utwórz nowy klip filmowy do przechowania w nim całego efektu i nazwij go fire effect. Następnie w klipie tym utwórz warstwę actions i wstaw w niej trzy standardowe ujęcia kluczowe. Nasz kod powielenia filmu będzie wywoływany w każdym cyklu przez całą animację, dlatego też nie możemy zastosować licznika pętli do śledzenia liczby klipów filmowych ognia, jakie wykonamy. 2. Aby śledzić całkowitą liczbę cząstek utworzymy w pierwszym ujęciu warstwy actions zmienną o nazwie count i przypiszemy jej wstępną wartość równą zero: count=0;
Musimy teraz utworzyć klip filmowy o nazwie particle, który będzie zawierać rysunek ognia (wykonamy go za chwilę). Skoro już zdefiniowaliśmy zmienną count w ujęciu 1 musimy ustawić widoczność klipu filmowego particle na false, gdyż nie chcemy widzieć oryginalnego klipu filmowego a tylko jego kopie. 3. W tym celu dodaj poniższy kod do ujęcia 1: particle._visible=false
4. Ostatnim wstępnym krokiem będzie utworzenie tablicy do przechowywania cząstek, którą nazwiemy fireArray. Wpisz poniższy kod w ujęciu 1: fireArray=new Array()
Zanim opuścimy pierwsze ujęcie musimy zdefiniować funkcję, która usunie dany klip filmowy z tablicy po zakończeniu animacji. Ja dla tego celu przygotowałem funkcję o nawie deleteMe(me). Ta funkcja zostanie wywołana przez same klipy filmowe,
Rozdział 12-314
które jej przekażą ich numer indeksowy w tablicy. Funkcja ta ma za zadanie wywołać jedynie standardowa funkcję Flasha — removeMovieClip. 5. Dodaj poniższą funkcję do ujęcia 1: function deleteMe(me){ removeMovieClip (fireArray[me]); fireArray[me]=0; }
Funkcja ta stosuje jako parametr me, czyli wywołujący klip filmowy. Jak widać przypisałem mu w tablicy wartość 0, aby wskazać, że klip ten już nie istnieje. Moja tablica będzie bardzo duża i będzie się składać głównie z zer jako wynik usuwania klipów filmowych. Mógłbym napisać taką funkcję powielania, która sprawdzałaby tablicę i umieszczała nowy klip filmowy w pierwszym wolnym wejściu zamiast dodawać do na końcu, lecz animacja wówczas znacznie zwolni z powodu pętli while, którą będę potrzebować do każdorazowego przechodzenia przez dużą tablicę. Zamiast tego będzie zerować animację co pewien czas, dzięki czemu tablicę będzie można obsługiwać. Oznacza to, że co pięć minut płomień na chwilę zgaśnie, lecz w ten sposób zwiększymy prędkość animacji. szybko zorientujesz się, że w programowaniu często będziesz musiał pójść na takie układy, zwłaszcza podczas pracy z elementami graficznymi. W tym przypadku układ ten jest korzystny, lecz gdybym tworzył tablicę zawierającą istotne dane, których nie można by było tak łatwo zastąpić jak płomienie, które wyglądają mniej więcej tak samo, wówczas lepszym wyborem byłaby bardziej rygorystyczna opcja skryptu. Gdybyś musiał taką zastosować, możesz użyć wbudowana metodę tablicy o nazwie splice do usuwania danych i przesuwania wszystkie o jedną pozycję do góry. Przechodząc ze skryptem do drugiego ujęcia kluczowego, musimy zdefiniować pętlę, która utworzy kilka nowych płomieni przy każdej pętli głównego filmu. 6. Utwórz zmienną o nazwie flame_num, która określi liczbę płomieni tworzonych w każdym cyklu: flame_num=1;
Im większa jest ta liczba tym bardziej realistycznie będzie wyglądał efekt ognia, lecz tym wolniej będzie on odtwarzany. Wartość 1 jest bardzo odpowiednia, gdyż eliminuje konieczność utworzenia pętli, lecz chciałbym również mieć możliwość zmiany jej w razie potrzeby. 7. Utwórz standardową pętlę for wykorzystującą zmienną flame_num jako końcowy warunek i dodaj pierwszy wiersz kodu do pętli: for(i=0; i
Naszym pierwszym zadaniem w obrębie pętli jest zwiększenie zmiennej count. Gdy znajdujemy się w pętli tworzymy nowy płomień, więc wartość zmiennej count wzrasta o jeden. 8. Następny krok polega na powieleniu naszego cząstkowego klipu filmowego. Zamiast użyć licznika pętli do określenia nazwy i poziomu zastosuj poniższy kod w celu dodania zmiennej count: duplicateMovieClip (particle, "fire"+count, count);
Rozdział 12-315
9. Po powieleniu musimy umieścić nowy klip filmowy w tablicy fireArray[count]. W tym celu dodaj poniższy kod: fireArray[count]=eval("fire"+count);
Skoro nasz nowy klip filmowy znajduje się w tablicy musimy go zainicjalizować, co w tym przypadku oznacza przede wszystkim uwidocznienie go. Jak pamiętasz, oryginalną cząsteczkę (particle) uczyniliśmy niewidoczną. 10. Dodaj ten wiersz do ujęcia 2: fireArray[count]._visible=true;
11. Następnie zdefiniuj pozycje x i y klipu za pomocą poniższego kodu: fireArray[count]._x=0; fireArray[count]._y=0;
W tym przypadku obydwie współrzędne wynoszą zero, gdyż przygotowujemy skoncentrowany płomień świecy. Jeśli ogień miałby być bardziej rozproszony, zastosowałbyś przypadkowe liczby do rozszerzenia początkowego umieszczenia. 12. Ostatnim zadaniem w pętli jest ustanowienie zmiennej o nazwie myNum wewnątrz nowe klipu filmowego, która będzie równa zmiennej count, abyśmy wiedzieli, jaki numer ma ona w tablicy. Możemy tego dokonać za pomocą poniższego kodu: fireArray[count].myNum=count; }
13. Na zakończenie skryptu w ujęciu 2 dodamy tą sprzątającą funkcję, o której wspomnieliśmy: if(count>1000){ for(i=0; i
Funkcja ta wykonywana jest tylko co 1000/flame_num razy. Po uruchomieniu jej funkcja usuwa wszystkie powielone klipy filmowe i przywraca do ognia jeden z nich, aby z powrotem zainicjalizować zmienne. Zauważ, że stosujemy tutaj notację != (nie równy) w celu zaznaczenia klipów, które jeszcze nie zostały usunięte. A tak wygląda kompletny ukończony skrypt z ujęcia 2: flame_num=1; for(i=0; i1000){ for(i=0; i
Rozdział 12-316
} gotoAndPlay(1); }
14. W trzecim ujęciu wprowadzamy naszą zaufaną instrukcję... gotoAndPlay(2);
...i już zakończyliśmy pisanie skryptu dla głównego filmu. Teraz przygotujemy zawartość, aby cały uroczy skrypt mógł zadziałać. 15. Utwórz klip filmowy do przechowania rysunku płomienia i nazwij go fire. Wewnątrz tego klipu w ujęciu 1 narysuj kółko o szerokości 50 pikseli bez konturu, a następnie wypełnij je gradientem radialnym. Dla uzyskania ognistych barw zastosowałem jasnożółty dla środka gradientu o przezroczystości 50% i ciemno-czarny na krawędziach o przezroczystości 25%. Jeśli chcesz możesz zmienić przezroczystość poszczególnych kolorów w gradiencie poprzez zaznaczenie małych próbek farby na pasku w panelu Fill:Radial Gradient i zmodyfikowanie ich za pomocą ustawień z palety Mixer:
16. Gdy już uzyskasz zadowalający cię efekt, dodaj w ujęciu 25 ujęcie kluczowe. 17. Zaznacz kółko w ujęciu 25 i w panelu Info nadaj mu wysokość 100 pikseli, aby uzyskało ono kształt owalu. Teraz przeciągnij małe próbki farby w panelu Fill:Radial Gradient na przeciwne końce paska, aby odwrócić gradient wypełnienia kółka:
Teraz ogień powinien być czerwony w środku i żółty na obrzeżach. 18. Automatycznie uzupełnij kształt pomiędzy dwoma ujęciami kluczowymi. Upewnij się, że animacja działa poprawnie poprzez przeciągnięcie wskaźnika odtwarzania przez obszar automatycznej animacji zanim przystąpisz do dalszej pracy. Dlatego modyfikujemy kolor kółka, ponieważ ogień często zmienia kolor, od środka płomienia w górę. Skoro mamy zamiar tak wykonać tego klipy filmowe, aby
Rozdział 12-317
poruszały się w górę samodzielnie, zmiana koloru będzie skierowana w tym właśnie kierunku. Wszystkie elementy są półprzezroczyste, więc powinny ładnie się połączyć. Niestety, pomarańczowe kółka nie wyglądają jednak dokładnie jak płomienie. Aby poradzić sobie z tym problemem utworzyłem biało czarny obrazek płomienia w Photoshopie i importowałem go do mojego klipu filmowego, gdzie następnie go śledziłem i zastosowałem jako maskę nad warstwą circle. Możesz wykonać własną maskę, pożyczyć moją (oryginalny obrazek nosi nazwę flame.png, a śledzoną wersją jest symbol Mask — obydwa te elementy znajdują się w bibliotece FLA), lub nie robić nic. 19. Jeśli zdecydujesz się zastosować maskę, utwórz nową warstwę i umieść tam maskę zanim przekształcisz ją w warstwę maski. Następnie dwukrotnie zwiększ jej wymiary w ujęciu kluczowym w ujęciu 25 podobnie, jak zrobiliśmy to dla wypełnionego kółka i utwórz automatyczną animację kształtu dla maski. Zablokuj obydwie warstwy i przeciągnij strzałkę odtwarzania przez obszar automatycznej animacji aby sprawdzić, czy wszystko działa poprawnie:
Nasz klip filmowy płomienia jest już prawie ukończony. Pozostało nam jeszcze przystosowanie każdego płomienia do informowania głównego filmu, kiedy kończy swoje odtwarzanie. Wykonamy to poprzez powielenie kilku klipów filmowych w tym efekcie, lecz wówczas nasza animacja bardzo zwolni, jeśli nie umożliwimy każdemu płomieniowi, aby sam się zgasił w swoim ostatnim ujęciu. Zastosujemy ostatnie ujęcie klipu filmowego płomienia do wywołania funkcji deleteMe() głównego filmu, którą zdefiniowaliśmy wcześniej. W tym wywołaniu funkcji zastosujemy zmienną _parent do poruszania się po hierarchii filmu w celu wywołania funkcji w głównym klipie filmowym. Zmienna myNum, jak pamiętasz, zawiera pozycję każdego klipu filmowego w tablicy, zatem przekażemy ją do głównej funkcji, aby wiedziała ona, jak element należy usunąć. Dzięki temu, po zakończeniu odtwarzania płomienia zostanie on usunięty, co da nam interesujący efekt ognia. 20. Nadal w klipie filmowym fire, zaznacz ostatnie ujęcie kluczowe warstwy, w której znajduje się efekt ognia, a nie na warstwie maski. Dodaj poniższy skrypt: _parent._parent.deleteMe(_parent.myNum)
21. Utwórz nowe ujęcie kluczowe zaraz za poprzednim i dodaj akcję stop. 22. Teraz utwórz nowy klip filmowy o nazwie particle. Przeciągnij do niego kopię klipu filmowego fire i nadaj mu nazwę kopii fire. 23. Nadal wewnątrz klipu filmowego particle dodaj warstwę actions składającą się z trzech ujęć kluczowych — przestrzegam nasz trzy-ujęciowy model animacji nawet wówczas, gdy w pierwszym ujęciu nie znajduje się żaden skrypt. Pamiętaj, aby tak rozszerzyć oryginalną warstwę, aby była ona tej samej długości co warstwa actions. Rozdział 12-318
24. W drugim ujęciu wpisz dwa wiersze kodu aby zwiększyć pozycję x i y klipu: this._x+=(Math.random()*2)-0.5;//spread this._y-=(Math.random()*2)+1;//height
Kod ten spowoduje delikatne trzęsienie się klipu filmowego na boki podczas przesuwania się go w górę. 25. W trzecim ujęciu klipu filmowego particle dodaj poniższe polecenie: gotoAndPlay(2)
26. Teraz otwórz główny klip filmowy fire effect. Utwórz nową warstwę, upewnij się, że składa się ona z trzech ujęć, nadaj jej nazwę particle i przeciągnij klip filmowy particle na tą warstwę. Nadaj mu nazwę kopii particle.
27. A teraz ostatnie, lecz bardzo ważne zadanie: przeciągnij kopię klipu fire effect na główną scenę i uruchom film:
Ja narysowałem małą świeczkę, na której umieściłem płomień, lecz ty możesz zastosować płomień w zupełnie inny sposób. Jeśli wypróbujesz ten efekt, powinieneś uzyskać ładnie wyglądający niewielki płomień. Spróbuj pobawić się ustawieniami, aby wydłużyć lub poszerzyć płomień. Zmiana koloru jest odrobinę trudniejsza, lecz możesz w zasadzie bez problemu utworzyć niebieskie lub zielone płomienie. Lecz najlepszą zaletą tego efektu jest to, że, ponieważ w całości wykonaliśmy go w klipie filmowym, możesz przeciągnąć go do dowolnego filmu bez jakichkolwiek trudności. W następnym ćwiczeniu zajmiemy się integracją klawiatury z kodem ActionScript.
Przechwytywanie klawisza Flash 5 zawiera kilka predefiniowanych obiektów, które dają dostęp do zaawansowanych właściwości, takich jak obiekt tablicy Array, którego już poprzednio stosowaliśmy. Dla Rozdział 12-319
utworzenia kolejnego efektu również wykorzystamy jeden z tych obiektów — tym razem będzie to obiekt klawisza Key. W czwartej wersji Flasha można było przygotować przycisk do wykonania fragmentu kodu po wciśnięciu danego klawisza, lecz gdy chciałeś przypisać kilku klawiszom różne funkcje, musiałeś napisać procedurę obsługującą dla każdego z nich. Nadal można wykonać podobny efekt we Flashu 5, lecz tym razem mamy do dyspozycji o wiele lepszy sposób na wykrycie i rozróżnienie wciśniętych przez użytkownika klawiszy, właśnie za pomocą obiektu Key. Aby efektywnie stosować obiekt Key, należy opracować sposób wykrywania wciśnięcie klawisza. Nie stosujemy już w tym celu przycisków, więc musimy zastosować inną metodę wykrywania. Będziemy musieli również dowiedzieć się, który klawisz został wciśnięty, jak również zdecydować, co chcemy z nim zrobić. W piątej wersji Flasha do klipów filmowych, podobnie jak do przycisków, można przypisywać procedury obsługujące zdarzenia. Podczas gdy procedury obsługujące przyciski „monitorują” takie zdarzenia jak press, czy release, charakterystyczne dla przycisków, funkcje obsługujące klipy filmowe wykrywają takie zdarzenia, jak load, unload czy enterframe. Dla klipów filmowych charakterystyczne są również procedury obsługujące zdarzenia keyUp i keyDown, które odpowiedzialne są za zrealizowanie danego zdarzenia. Zastosowanie tych wyrazów kluczowych jako parametrów dla procedury onClipEvent klipu filmowego spowoduje aktywację kodu po wciśnięciu klawisza. Na przykład, po wciśnięciu dowolnego klawisza procedura onClipEvent (keyDown) aktywuje dowolny, zdefiniowany przez nas kod. Może się tak zdarzyć, że w obrębie procedury onClipEvent będziemy chcieli rozróżnić dokładnie, który klawisz został wciśnięty. Liczba klawiszy, którymi będziemy musieli się zająć, zależy wyłącznie od tego, co chcemy uzyskać w danym filmie i w jakim stopniu powinien być on interaktywny. W tej części rozdziału omówimy dwa ćwiczenia; w pierwszy zastosujemy bardzo prosty skrypt do przesuwania obiektu po ekranie za pomocą klawisza strzałki, a w drugim wykonamy odrobinę bardziej skomplikowany efekt, gdyż spróbujemy zróżnicować, który klawisz został wciśnięty. Ruch klawisza strzałki
1. Utwórz klip filmowy z rysunkiem, powiedzmy, kółka. 2. Umieść go na scenie i nadaj mu nazwę kopii ball. Nadal z zaznaczonym klipem filmowym na scenie otwórz okno Object Actions. Chcemy, aby rysunek piłki poruszał się po każdym wciśnięciu jednego z czterech klawiszy strzałki. Możemy zastosować procedurę onClipEvent (keyDown), która poinformuje nas o wciśnięciu klawisza, lecz następnie będziemy musieli również wiedzieć, który klawisz został wciśnięty, abyśmy mogli przesunąć piłkę w odpowiednim kierunku. Obiekt klawisza Key również posiada pewną liczbę stałych dla kilku najczęściej używanych klawiszy. Nam przydadzą się stałe o nazwach Key.RIGHT, Key.LEFT, Key.UP i Key.DOWN. Możemy przypisać każdą z tych stałych do funkcji testowania, Key.isDown, aby przekonać się, który klawisz zostaje wciśnięty w danym momencie. Zastosujemy serie instrukcji if/else, aby zobaczyć, który z czterech klawiszy jest wciśnięty. 3. Wprowadź dla klipu ball poniższy skrypt: onClipEvent (keyDown) { if(Key.isDown(Key.RIGHT)){ _parent.ball._x+=5;
4. Przetestuj film i kliknij klawiszem myszy w przeglądarce — powinieneś móc przesuwać kółko po ekranie za pomocą klawiszy strzałem (najpierw należy kliknąć aby obejść wbudowaną w Flashu funkcję bezpieczeństwa). Ta prosta procedura umożliwi ci kodowanie nieskomplikowanych gier, takich jak na przykład PacMan. Jak już wspomnieliśmy, Flash może wykryć, który klawisz został wciśnięty jako ostatni, dzięki czemu możemy zapisać omawianą funkcję w jeszcze inny sposób. Obiekt Key posiada funkcję o nazwie Key.getCode, która przywróci kod dla ostatniego wciśniętego klawisza. Zaletą tej funkcji jest to, że możesz wykryć klawisze, które nie posiadają żadnej stałej reprezentacji (klawisze strzałek takową posiadają). Możesz wykryć, który klawisz został wciśnięty jako ostatni, w dowolnym czasie po wciśnięciu klawisza. 5. Zmodyfikuj funkcję aby zastosować nowy kod (zmienione wiersze zostały pogrubione): onClipEvent (keyDown) { theKey = Key.getCode(); if(theKey==Key.RIGHT){ _parent.ball._x+=5; } else if(theKey==Key.LEFT){ _parent.ball._x-=5; } else if(theKey==Key.UP){ trace("UP"); _parent.ball._y-=5; } else if(theKey==Key.DOWN){ _parent.ball._y+=5; } }
Skoro już mam zmienną (theKey) przypisaną wirtualnemu kodowi klawisza dla ostatniego klawisza, jaki został wciśnięty, możemy ją zastosować w instrukcji warunkowej w celu porównania symbolicznych stałych zamiast stosować funkcję KeyisDown, i uruchomić wybrany przez nas kod po wciśnięciu przez użytkownika określonego klawisza. Więcej o kodach klawiszowych Chociaż stosowaliśmy tutaj termin „kod klawisza”, obiekt Key w rzeczywistości posiada dwie metody rozpoznawania wciśnięcia klawisza: kod wirtualny, którego już używaliśmy, a który uzyskiwany jest za pomocą funkcji Key.getCode, a także kod ASCII, którego można zastosować poprzez funkcję Key.getAscii. Metody dają bardzo podobne efekty, lecz ich działanie jest różne. Kody klawiszy są bezpośrednio związane z klawiszami na klawiaturze — do każdego klawisza przypisany jest kod. Po wciśnięciu klawisza wewnętrznej zmiennej w obiekcie Key przypisywany jest dany kod, który następnie jest w niej przechowywany, aż wydobędzie go funkcja Key.getCode. Natomiast kody ASCII, reprezentują znaki. Po wciśnięciu klawisza, komputer określa, jaki znak chciałeś uzyskać, w oparciu o wciśnięty przez ciebie klawisz i modyfikatory. Wówczas ten kod ASCII zostaje umieszczony i przechowany w innej zmiennej we Flashu.
Rozdział 12-321
Oznacza to, że kod klawiszowy poinformuje cię, gdy wciśnięty zostanie klawisz A, lecz nie przekaże ci żadnej informacji, jeśli wcisnąłeś A, a á, lub Á, podczas gdy kod ASCII poda ci dokładny wariant znaku A. Podczas przechwytywania klawiszy stosuje się ogólną zasadę, zgodnie z którą najpierw należy uzyskać kod klawiszowy, wyeliminować wszystkie nietekstowe znaki, które nie posiadają odpowiedników ASCII, a następnie uzyskać kod ASCII dla pozostałych znaków. Na końcu podręcznika Flash ActionScript Reference Guide rozprowadzanego razem z Flashem znajdziesz listę wszystkich kodów wirtualnych klawiszy. Teraz zajmiemy się czymś o wiele bardziej interesującym niż przesuwanie kółka po ekranie. Mianowicie, wykonamy niewielką aplikację umożliwiającą użytkownikowi wpisywanie liter, które następnie wyświetlone zostaną na ekranie. Każda litera zostanie umieszczona w odrębnym klipie filmowym, co znacznie ułatwi ich obróbkę za pomocą kodu ActionScript. Wpisywanie tekstu w czasie rzeczywistym
Na ten efekt składa się pięć etapów. W pierwszym utworzymy skrypt dla głównego filmu. W skrypcie tym zdefiniujemy tablicę, w której będziemy przechowywać klipy filmowe liter i zastosujemy informacje przechowywane w różnych miejscach do umieszczania liter. W drugiej części zajmiemy się samym klipem filmowym liter, który będzie zawierać pole tekstowe wyświetlające literę. Wykonamy kopię każdej litery, jaką będziemy wpisywać. W trzeciej części ćwiczenia wykonamy pole tekstowe na scenie, które będzie wyświetlać to, co zostało przez nas wpisane. W czwartym etapie zastosujemy prostokątne tło reprezentujące obszar wpisywania. Na koniec, w piątej części, zajmiemy się najbardziej skomplikowanym elementem ćwiczenia, czyli klipem filmowym o nazwie listener, w którym umieścimy kod do obsługi wciskanych klawiszy. Poniżej przedstawiliśmy ukończony efekt:
Większość pracy w tym ćwiczeniu polega na zapamiętywaniu miejsc, w jakich mamy umieścić każdą literę. 1. W nowym filmie utwórz klip filmowy, w którym umieścimy cały efekt i nazwij go typer. Dzięki temu będziesz mógł przeciągnąć go do innego filmu. 2. W głównym klipie filmowym typer utwórz nową warstwę o nazwie display i narysuj dynamiczne pole tekstowe z możliwością wpisywania kilku linii (opcja Multiline) i zawijaniem tekstu (Word Wrap). Pole tekstowe powinno być dosyć duże, mniej więcej 450 na 100 pikseli. W panelu Text Options, w pole Variable, wpisz nazwę zmiennej text. W tym polu będziemy przechowywać wszystkie wpisane litery. 3. Utwórz kolejny klip filmowy, nazwij go Drawing Board i narysuj w nim szary prostokąt o rozmiarze 300 na 200 pikseli. Na tej tablicy będą wyświetlane wpisane litery.
Rozdział 12-322
4. Powróć do głównego klipu filmowego typer, utwórz nową warstwę i przeciągnij kopię klipu Drawing Board na scenę, Umieść ją nad polem dynamicznego tekstu i nadaj jej nazwę klonu board. Upewnij się, że tablica została umieszczona w punkcie 0,0, gdyż inaczej wyświetlony tekst nie dopasuje się do niej. Napiszemy taki skrypt, aby tekst pojawiał się na tej tablicy. 5. Następnie utwórz klip filmowy dla naszych liter i nadaj mu nazwę text_movie. Utwórz dynamiczne pole tekstowe o rozmiarze 30 na 30 pikseli, cofnij zaznaczenie opcji Multiline i Word Wrap, a w pole Variable wprowadź nazwę zmiennej letter_text:
6. W polu tekstowym umieść drukowaną literę A pisaną czcionką Courier o rozmiarze 20 punktów i dopasuj rozmiar pola tekstowego do rozmiaru litery, a następnie wyśrodkuj pole w punkcie 0,0 w klipie filmowym:
7. Teraz upewnij się, że wcisnąłeś ikonę Include entire font outline w panelu Text Options: Embed fonts:
Dwukrotnie sprawdź, czy wykonałeś to — musisz to zrobić, gdyż inaczej efekt nie zadziała, a ty będziesz się wściekać próbując dowiedzieć się dlaczego!
8. Utwórz kolejny klip filmowy i nazwij go letter_object. Przeciągnij kopię klipu text_movie na środek klipu letter_object i nadaj mu nazwę kopii text_movie.
Rozdział 12-323
9. Nadaj warstwie z klipem filmowym text_movie długość dziesięciu warstw poprzez umieszczenie ujęcia kluczowego w dziesiątym ujęciu, a następnie zastosuj panel Frame do utworzenia automatycznej animacji ruchu, która obraca jeden raz klip zgodnie z kierunkiem ruchu wskazówek zegara. Zaznacz również pola wyboru Scale, Synchronize i Snap:
10. Dodaj kolejnych dziesięć pustych ujęć po omawianym ujęciu kluczowym poprzez umieszczenie ujęcia w ujęciu 20 — dzięki temu litera pozostanie widoczna w sekundę po obróceniu. Nadaj ujęciu pierwszemu nazwę text_movie, abyśmy mogli się później w ten sposób do niego odnieść. 11. Nadal w klipie letter_object zaznacz pierwsze ujęcie kluczowe i wpisz poniższe akcje: a_code=0; x_rate=0; y_rate=0;
W efekcie kod ten przypisze stałym automatycznej animacji wartości zerowe, w oczekiwaniu na informacje o wpisanych literach z klipu listener. 12. Zaznacz ujęcie kluczowe na końcu automatycznej animacji ruchu (ujęcie 10) i dodaj w nim akcję stop, aby litery obracały się tylko raz. 13. W głównym klipie filmowym typer utwórz nową warstwę o nazwie letters. Przeciągnij kopię klipu letter_object na klip letters, nadaj mu nazwę kopii letter i umieść go po lewej stronie sceny:
Rozdział 12-324
14. Utwórz warstwę actions w głównym klipie filmowym typer i umieść na niej trzy tradycyjne ujęcia kluczowe. W pierwszym ujęciu klipu typer zainicjalizujemy wszystkie główne zmienne. Dodaj poniższy skrypt do ujęcia 1: h_offset = 0; num_chars = 0; line_counter=0; letters=new Array(); kern=new Array(); BoardNounds=board.getBounds(this);
Zmienna num_chars przechowuje całkowitą liczbę znaków wpisanych przez użytkownika, zmienna h_offset określa odległość na lewo od początkowej pozycji litery, podczas gdy zmienna line_counter określa liczbę wierszy w dół, miejsce, gdzie się znajdujemy w danym momencie. Tablica letters przechowuje odniesienia do poszczególnych klipów filmowych liter. Instrukcja BoardBounds=board.getBounds(this); stosuje rysunek tablicy, którego dodaliśmy do klipu typer, do zdefiniowania obszaru pisania. Wbudowana metoda getBounds zwraca cztery zmienne, xMin, yMin, xMax i yMax, które informują nas o zasięgu klipu filmowego. Tablica kern przechowuje wartości szerokości dla każdej litery. Kerning stanowi w zasadzie największy problem w tym projekcie. Gdy przyjrzysz się blokowi tekstu, zauważysz, że w większości czcionek, nie wszystkie litery posiadają taką samą szerokość. Skoro usiłujemy umieścić litery w akapicie tekstu, ważne jest, aby odległości pomiędzy nimi wyglądały naturalnie. Niestety, nie istnieje żadna bezpośrednia metoda zapisania szerokości znaku danej czcionki o określonym rozmiarze. A to pech! Można ten problem rozwiązać na cztery sposoby. Jedną z metod jest zastosowanie jednej z czcionek o stałych odległościach pomiędzy znakami, taką jak na przykład Courier, w której wszystkie litery są takiej samej szerokości. Jeśli masz taką możliwość, możesz zostawić dodatkowy pusty obszar pomiędzy wszystkimi literami aby w ten sposób zatuszować różnice pomiędzy nimi, lub też możesz utworzyć drugoplanowy rysunek dla każdej litery, na przykład kwadrat lub kółko, i zastosować go do rozmieszczenia liter. Ostatnim i najnudniejszym sposobem jest obliczenie szerokości każdej litery i zastosowanie tych wartości do rozmieszczenia. Masochistycznie tak właśnie zrobiłem, i jeśli zajrzysz do pliku FLA zobaczysz, że w pierwszym ujęciu obudowałem kodem tablicę kern, zaczynając w następujący sposób... kern[65]=15//A kern[66]=15//B
Rozdział 12-325
kern[67]=15//C kern[68]=15//D
...i kontynuowałem aż dotarłem do Z, plus kilka znaków interpunkcyjnych. Aby zaoszczędzić ci kłopotu pisania tego wszystkiego, umieściliśmy ten kod w pliku tekstowym na płycie CD-ROM, pod nazwą KernCode.txt. 15. Otwórz plik KernCode.txt, skopiuj wszystkie instrukcje i wklej je do kodu w ujęciu 1 pod instrukcją BoardBounds=board.getBounds(this);:
Skrypt dla drugiego ujęcia będzie wyglądać znajomo, gdyż jest prawie taki sam jak skrypt zachowania ruchu, jakie zastosowaliśmy poprzednio dla ścigacza myszy i świeczki. Tym razem będziemy wykonywać pętlę przez tablicę letters i będziemy przesuwać litery w kierunku ich końcowej pozycji. 16. Wpisz poniższy kod w drugim ujęciu kluczowym: speed = 2; friction = 0.45; for (i=1; i<=num_chars; i++) { if(letters[1].moving==true){ Xdiff = (letters[i].x_pos-letters[i]._x); Ydiff = (letters[i].y_pos-letters[i]._y); letters[i].x_rate += (Xdiff/speed); letters[i].y_rate += (Ydiff/speed); letters[i].x_rate *= friction; letters[i].y_rate *= friction; letters[i]._x += letters[i].x_rate; letters[i]._y += letters[i].y_rate; if (letters[i].x_pos==letters[i]._x && letters[i].y_pos==letters[i]._y){ letters[i].moving=false; } }}
Kluczowym elementem tego kodu jest wiersz if(letters[i].moving==true) {. Będziemy stosować zmienną moving do określenia czy chcemy, bądź nie, aby klip się poruszał. Pod koniec tego kodu przypisaliśmy zmiennej moving wartość false. 17. W trzecim ujęciu kluczowym dodaj tradycyjną akcję gotoAndPlay (2). Rozdział 12-326
Skoro już przygotowaliśmy podwaliny efektu, możemy przejść do jego serca, czyli samego klipu listener. Pamiętaj, że ten właśnie klip będzie odpowiadać na klawisze wciśnięte przez użytkownika i uruchamiać kod obsługujący je. 18. Utwórz nowy klip filmowy o nazwie listener, przeciągnij go na nową warstwę w klipie filmowym typer i umieść go nad środkiem klipu board. Ponieważ jest to pusty klip, będzie on widoczny na scenie jako małe białe kółko, jeśli nie jest zaznaczony:
19. Zaznacz go, nadaj mu nazwę kopii listener i otwórz jego okno Object Actions. 20. Teraz dodaj poniższy kod do obiektu listener: onClipEvent (keyDown) { theKey = Key.getCode();
W tym fragmencie zastosowaliśmy wbudowaną procedurę onClipEvent do wykrycia jakiejś aktywności, dlatego też w pierwszym wierszu umieściliśmy instrukcję onClipEvent (keyDown), która zostanie uruchomiona gdy użytkownik wciśnie klawisz na klawiaturze. Wówczas przechwycimy wciśnięty klawisz poprzez zastosowanie procedury Key.getCode i przechowamy wynik w zmiennej o nazwie theKey. Następnie zastosujemy kilka instrukcji if...else do określenia, co chcemy zrobić po wciśnięciu klawisza. 21. Dodaj pierwszą instrukcję if do istniejącego kodu onClipEvent: if ((theKey>=48 && theKey<=111) || theKey == 32) { _parent.num_chars++; theKey = Key.getAscii(); newLetter = String.fromCharCode(theKey);
Zwróć uwagę na dwa symbole potokowania w pierwszym wierszu. Na klawiaturze znak potokowania znajduje się na klawiszu lewego ukośnika (\) i można do niego uzyskać dostęp wciskając ten klawisz wraz z klawiszem Shift. W naszym kodzie dwa symbole potokowania oznaczają operator sumy logiczne OR kodu ActionScript. Pierwsza instrukcja if sprawdza, czy do klawisza wciśniętego przez użytkownika przypisany jest jeden ze znaków, które chcemy przekształcić w klip filmowy litery. Kody ASCII w pierwszym wierszu odnoszą się do wszystkich wartości, które zdefiniowaliśmy w tablicy kern, plus klawisz spacji (32). Jeśli kod klawisza jest alfanumeryczny, co w tym kontekście oznacza dowolną literę, liczbę, znak interpunkcyjny lub klawisz spacji, zwiększamy wartość zmiennej num_chars aby wskazać, że zamierzamy utworzyć nowy klip filmowy litery. Następnie stosujemy funkcję Key.getAscii w celu zresetowania wartości theKey, aby była równa odpowiedniemu kodowi ASCII. W kolejnym wierszu używamy jednej z wbudowanych we Flashu funkcji do obsługi ciągów, String.fromCharCode, aby przekształcić kod ASCII w jednoznakowy ciąg, którego przechowamy w zmiennej o nazwie newLetter. Do tej pory udało nam się przechwycić literę wprowadzona przez użytkownika. Następnym etapem będzie umieszczenie tej litery w kopii klipu filmowego letter_object i dodanie jej do tablicy.
Rozdział 12-327
Pamiętasz duże pole tekstowe, jakie wykonaliśmy w klipie filmowym typer? Jak już powiedzieliśmy, chcemy zastosować to pole tylko do wyświetlania wpisanych przez użytkownika liter. Jednym z powodów przechowywania wpisanych znaków jest wysyłanie tekstu w jakieś miejsce, na przykład do zewnętrznego skryptu CGI, który przechowa wyniki w pliku lub bazie danych — będziesz mógł się tym zająć po przeczytaniu rozdziałów o dynamicznej zawartości. Na razie będziemy powtarzać to, co użytkownik wpisał. W tym celu dodamy zmienną newLetter do pola tekstowego. 22. Wpisz poniższy kod do siniejącego kodu onClipEvent klonu listener: _parent.text = _parent.text + newLetter;
W tym fragmencie zastosowaliśmy operator + w celu dodania wartości zmiennej newLetter do istniejącej wartości tekstu w klipie typer. Pamiętaj, że pracujemy w klipie filmowym listener, dlatego też konieczne jest zastosowanie prefiksu _parent, abyśmy mogli powrócić do klipu filmowego typer. 23. Teraz powiel klip filmowy letter. Dodaj w tym celu kolejny fragment skryptu: duplicateMovieClip (_parent.letter, "letter"+_parent.num_chars, _parent.num_chars); _parent.letters[_parent.num_chars] = _parent["letter"+_parent.num_chars];
Ten kod na pierwszy rzut oka może wyglądać bardziej skomplikowanie od poprzedniego, lecz jego przeznaczenie jest podobne — powiela klip i dodaje jego odnośnik do tablicy. Możemy zastosować zmienną num_chars jako sufiks do nazwy, jak zostało to przedstawione, jak również dla poziomu. Możemy także użyć nową nazwę, aby dodać nową literę do tablicy letters w pozycji num_chars. Litera została już umieszczona w tablicy. Teraz przejdźmy do inicjalizacji kopii klipu filmowego letters i animowania jej za pomocą skryptu ruchu z powrotem w klipie filmowym typer. 24. Dodaj kolejny fragment kodu do istniejącego skryptu: _parent.letters[_parent.num_chars].a_code = theKey; _parent.letters[_parent.num_chars].text_movie.letter_text = newLetter.charAt (0); _parent.letter[_parent.num_chars].moving=true;
Inicjalizacja klipu jest może odrobinę bardziej skomplikowana niż mogłoby się wydawać. Pierwszym etapem jest przechowanie zmiennej theKey w klipie filmowym letter w zmiennej o nazwie a_code, abyśmy w przyszłości mieli do niej swobodny dostęp. Następnie przypisujemy do wejściowego pola tekstowego wartość równą pierwszemu i jedynemu znakowi newLetter. Jak pamiętasz to pole tekstowe umieściliśmy dosyć głęboko, dlatego też ścieżka w drugim wierszu jest taka długa. Zastosowaliśmy funkcję ciągu charAt do wydobycia pierwszego znaku z ciągu newLetter. Na koniec przypisaliśmy zmiennej moving wartość true, co oznacza, że klip będzie mógł przesuwać się w konie ruchu, którego przygotowaliśmy wcześniej. Następna część skryptu obsługuje proces przypisywania początkowych i końcowych pozycji x i y do każdego klipu litery na ekranie. 25. W tym celu dodaj poniższy blok kodu: if (_parent.h_offset>_parent.board._width-20) { _parent.line_counter++; _parent.h_offset = 0; }
Rozdział 12-328
Fragment ten rozpoczyna instrukcja if, które za pomocą rysunku tablicy sprawdza, czy kolejny znak nie wybiegnie poza obszar pisania. Jeśli wybiegnie, tekst zostaje przeniesiony do następnej linijki. Aby uzyskać taki efekt zastosujemy kod, który zwiększa licznik linii i resetuje poziomą odległość. Efekt sieci polega na tym, że punkt wstawiania dla nowego tekstu przechodzi o jedną linijkę w dół i z powrotem na lewo. 26. Skoro jesteśmy już gotowi na umieszczenie litery wpisz poniższy fragment kodu, który precyzyjnie ulokuje klip każdej litery na tablicy: _parent.letters[_parent.num_chars].x_pos = 20 + _parent.BoardBounds.xMin + →_parent.h_offset; _parent.letters[_parent.num.chars].y_pos = 20 + _parent.BoardBounds.yMin + →(20*_parent.line_counter); _parent.letters[_parent.num_chars].hoffset = _parent.h_offset; _parent.h_offset += _parent.kern[theKey];
Określenie końcowych pozycji, które będą umieszczone dla każdej litery w zmiennych x_pos i y_pos uzyskaliśmy poprzez zastosowanie liczby linijki i poziomej odległości. Oczywiście obydwie wartości należy aktualizować podczas dodawania liter. Tutaj uzyskujemy pozycję x poprzez zastosowanie stałej odległości (20), plus prawa krawędź tablicy, plus zmienna h_offset. Pozycję y obliczamy za pomocą wartości odległości, górnej krawędzi pola, dodanych do wartości zmiennej h_offset podzielonej przez stałą odległość. Następnie przechowujemy bieżącą stałą odległość w klipie filmowym litery, aby każda litera „wiedziała”, jaka była odległość przed dodaniem. Na koniec do całkowitej odległości dodajemy wartość kerningu bieżącej litery. Teraz przejdziemy do określenia początkowych pozycji każdego powielonego klipu. 27. Dodaj poniższy kod: _parent.letters[_parent.num_chars]._x = _xmouse; _parent.letters[_parent.num_chars]._y = _ymouse;
Dla początkowych pozycji, z których będą wylatywać litery, zastosowaliśmy pozycję kursora myszy, stwarzając w ten sposób złudzenie, że litery wystrzeliwane są ze wskaźnika myszy. Możesz oczywiście za pozycję początkową obrać inny punkt. W ten sposób zakończyliśmy pisanie kodu tworzenia klipu znaku. Musimy jeszcze poradzić sobie z dwoma typami wciśnięć klawiszy: z klawiszem Enter i Delete. Nic się nie martw: ten kod będzie już o wiele prostszy od poprzedniego. 28. Dodaj kolejny fragment kodu dla klawisza Enter: } else if (theKey == Key.ENTER) { _parent.line_counter ++; _parent.h_offset = 0;
Ten kod przenosi nas do następnej linijki za pomocą zmiennej line_counter i zmiennej h_offset. Na koniec pozostał nam jeszcze klawisz Delete (w tej definicji umieścimy również klawisz Backspace). Na Macu G3 mam pewne kłopoty z klawiszem Delete, gdyż aby poprawnie działał muszę mieć wciśnięty również klawisz Option. Natomiast Delete świetnie działa na pecetach, więc możliwe, że jest to po prostu błąd w wersji Flasha na Macintosha. Proces usuwania jest odrobinę dłuższy niż nowa linijka, lecz w
Rozdział 12-329
zasadzie przygotowywaliśmy ten efekt przez cały czas realizacji projektu, nawet o tym nie wiedząc. 29. Dodaj ten ostatni fragment kodu: } else if (theKey == Key.BACKSPACE || theKey == Key.DELETEKEY) { if(_parent.num_chars>0){ _parent.h_offset=_parent.letters[_parent.num_chars].hoffset; removeMovieClip(_parent.letters[_parent.num}chars]); _parent.num_chars--; if(_parent.h_offset<=0 && _parent.line_counter>0{ _parent.line_counter--; } } } }
Na początek mamy instrukcję else if obsługującą dwa klawisze, a następnie instrukcję if sprawdzającą, czy mamy jakieś znaki do usunięcia. Następnie stosujemy odległość przechowywaną w literze, którą chcemy usunąć aby odwrócić wartość zmiennej h_offset. Następnie usuwamy klip filmowy i zmniejszamy wartość zmiennej num_chars. Na koniec sprawdzamy, czy to był ostatni znak w linijce, a jeśli tak, to zmniejszamy również wartość zmiennej line_counter. Ogólnie mówiąc, proces usuwania całkiem dokładnie odzwierciedla proces tworzenia. 30. Przeciągnij kopię całego klipu filmowego typer na scenę. Przetestuj go i sprawdź jak działa. Klawisze Delete i Enter nie będą działać, chyba że przetestujesz je w przeglądarce, gdyż są one przypisane do innych zadań po wybraniu polecenia Test Movie we Flashu. Zanim wpiszesz tekst w przeglądarce należy kliknąć jeden raz przyciskiem myszy, z powodu funkcji zabezpieczeń we Flashu, które uniemożliwiają wpisanie tekstu dopóki się nie klinie myszą (dzięki tej funkcji niemożliwe jest załadowanie pliku Flasha w przeglądarce, a następnie rozpoczęcie przechwytywania wciśnięć klawiszy, co mogłoby obejmować również hasła i tego typu elementy). Jeśli cokolwiek nie działa, sprawdź bardzo dokładnie nazwy kopii. Plik w formacie FLA z efektem uzyskanym w tym ćwiczeniu, noszący nazwę Text Typer.fla, znajduje się na płycie CD-ROM wraz z pozostałym kodem z tego rozdziału. Na wiele sposobów można powiększyć ten projekt dodając obsługę większej liczby kombinacji klawiszowych, jeśli tylko masz na to ochotę. W następnym ćwiczeniu, o wiele łatwiejszym do kodowania, porysujemy linie.
Manipulacja linią W użyciu klipów filmowych jest jednak pewne ograniczenie polegające na tym, że najmniejsze elementy w nich zastosowane muszą być predefiniowane. We wszystkich projektach wykonanych do tej pory w tym rozdziale, pokazaliśmy, jak tworzymy obiekty ręcznie, a następnie w kodzie ActionScript powielamy je i manipulujemy nimi aż uzyskamy interesujący nas efekt. Problem polega na tym, że za pomocą kodu ActionScript nie możemy nigdy niczego narysować na poziomie pikseli, co w efekcie uniemożliwia nam tworzenie własnych obiektów. Gdybym poprosił cię o zaprogramowanie aplikacji, która wyświetlałaby dane jako wykres słupkowy, prawdopodobnie zorientowałbyś się, że należy w tym celu powielić jakiś wykres Rozdział 12-330
graficzny i zeskalować go w oparciu o dostarczone dane. Dopracowanie takiego projektu wymagałoby trochę wysiłku, lecz dałoby się go wykonać. Lecz co byś odpowiedział na podobny program, tyle że generujący wykres liniowy? Podejrzewam, że miałbyś trochę więcej z nim kłopotu, gdyż Flash po prostu nie potrafi rysować dynamicznie linii. Nie obawiaj się, jednak, gdyż istnieje pewna sztuczka, którą można zastosować do rysowania linii we Flashu od jednego punktu do drugiego. W tym ćwiczeniu utworzymy funkcję, które właśnie do tego będzie służyć, a następnie zastosujemy ją w kilku prawdziwych aplikacjach. W pierwszym przykładzie wykonamy prosty klip filmowy składający się z czterech węzłów, które będzie można dowolnie przeciągać. Każdy z nich będzie połączony z dwoma węzłami za pomocą linią, a wszystkie węzły tworzą wierzchołki czworoboku:
Podczas poruszania węzłami łączące je linie będą aktualizowane dynamicznie, dzięki czemu kształt czworoboku będzie się zmieniać. Węzły i linie
1. Rozpocznij od utworzenia nowego klipu filmowego, w którym umieścimy cały efekt. Nazwij go line drawing. Każdy z węzłów będzie reprezentowany przyciskiem osadzonym w klipie filmowym. Prawdziwy rysunek jest w zasadzie nieistotny — ja wybrałem dla niego kształt kółka. 2. Utwórz mały przycisk z, powiedzmy kółkiem o średnicy 20 pikseli, i upewnij się, że posiada stan Hit, wraz z pozostałymi tradycyjnymi stanami przycisku, Up, Over i Down. Nazwij go node button. 3. Umieść kopię przycisku wewnątrz nowego klipu filmowego o nazwie point i upewnij się, że przycisk znajduje się w samym środku klipu filmowego — zastosuj panel Info do wyrównania go do pozycji 0,0. Efekt nie zadziała, jeśli niewłaściwie umieścisz przycisk, więc lepiej sprawdzić dwukrotnie. 4. Zaznacz kopię przycisku wewnątrz klipu filmowego i zastosuj okno Object Actions, aby przypisać jej poniższe procedury, które umożliwią przyciskowi przeciąganie obiektu, w którym się znajduje, czyli klipu filmowego point: on (press) { startDrag ("",1); } on(release){ stopDrag (); }
5. Po zdefiniowaniu przycisku wewnątrz jego klipu filmowego przeciągnij cztery klony klipu filmowego point do głównego klipu filmowego line drawing. Nadaj im nazwy kopii odpowiednio point0, point1, point2 i point3:
Rozdział 12-331
Aby ten efekt zadziałał, wystarczy utworzyć jeszcze tylko jeden obiekt — rysunek, którego zastosujemy do rysowania linii. 6. Utwórz nowy klip filmowy o nazwie square i narysuj w nim kwadrat bez wypełnienia, lecz z ciemnym konturem, dokładnie o rozmiarze 100 na 100 pikseli, w razie potrzeby skorzystaj z panelu Info. 7. Wyrównaj kwadrat tak, aby jego górny lewy róg znajdował się dokładnie w środku klipu filmowego. W palecie Align zastosuj opcję Align To Stage, a także wciśnij ikony Align top edge i Align left edge, aby wyrównać obiekt z górną i lewą krawędzią sceny.
8. Wewnątrz klipu filmowego square uważnie narysuj czerwoną linię z górnego lewego rogu kwadratu do dolnego prawego. Linia ta koniecznie musi zetknąć się z obydwoma rogami figury — jakiekolwiek przerwy wpłyną na późniejsze dopasowanie linii narysowanych na ekranie. Zastosuj opcję Snap to objects i powiększ obrazek, aby upewnić się, że narysowałeś go perfekcyjnie. 9. Zaznacz linię i zapisz ją jako oddzielny klip filmowy o nazwie line. Edytuj go i umieść jego lewy górny róg w pozycji 0,0. 10. Teraz powróć do klipu filmowego square, zaznacz wszystkie linie w kwadracie i upewnij się, że ich grubość ustawiona jest na opcję hairline:
11. Następnie, w głównym klipie filmowym line drawing utwórz nową warstwę o nazwie components i przeciągnij na nią klip filmowy square. Nadaj mu nazwę klonu square.
Rozdział 12-332
12. Teraz przeciągnij kopię klipu line na tą samą warstwę, nadaj mu nazwę kopii line i umieść dokładnie nad klonem square tak, aby dwie czerwone linie nakładały się na siebie. Na tym etapie, w głównym klipie filmowym powinny być widoczne dwa koliste przyciski i kwadrat z linią.
13. Dodaj nową warstwę o nazwie actions i wstaw standardowe trzy ujęcia kluczowe. 14. W pierwszym ujęciu warstwy actions rozpocznij jak zwykle od zdefiniowania kilku zmiennych: lines = new Array(); points = new Array(); points[0] = point0; points[1] = point1; points[2] = point2; points[3] = point3;
Będziemy potrzebować dwie tablice — jedną dla zmiennej points dla punktów, a drugą dla zmiennej lines dla linii. Skoro mamy już punkty, musimy umieścić je ręcznie w tablicy. Dlatego też pozycji points[0] przypisujemy punkt point0 i tak dalej. Wkrótce powrócimy do tablicy lines. Dalsza część skryptu podzielona jest na dwie funkcje — funkcję inicjalizacji (CreateLines) i funkcję rysowania (DrawLines). Po wykonaniu funkcji rysowania, w drugim ujęciu będzie ona po prostu wywoływana w każdym cyklu. Funkcję inicjalizacji można by również napisać jako kod wbudowany, lecz aby ułatwić przenoszenie aplikacji do innych filmów, nadałem jej formę funkcji. Uwielbiam funkcje. Funkcja inicjalizacji bierze jako dane wejściowe tablicę obiektów, które zostaną zastosowane jako punkty. W tym przypadku obiekty są ruchomymi przyciskami, lecz można zastosować zamiast nich dowolny klip filmowy, który posiada wymagane przez funkcję rysowania pozycje x i y. 15. Utwórz funkcję inicjalizacji jako kontynuację kodu w ujęciu 1 warstwy actions: function CreateLines (pointArray) { for (i=0; i
Rozdział 12-333
}
Funkcja ta wykonuje kopię klipu filmowego lines dla każdego zestawu dwóch następujących po sobie punktów w tablicy wejściowej. Funkcja ta tworzy zamknięty wielobok, dlatego też umieszcza również linię pomiędzy ostatnim i pierwszym punktem. Nie wykonuje ona jednak żadnego rysunku, lecz informuje każdy nowy obiekt linii, jakie są jego początkowe i końcowe punkty poprzez przechowanie odnośników do nich (p1 i p2) w każdym klipie filmowym linii. Kod powielania powinien być ci już znany, gdyż jest to taka sama struktura, jaką stosowaliśmy w całym rozdziale. Instrukcja if sprawdza, czy dany punkt jest ostatnim, a wówczas funkcja połączy go z pierwszym punktem, uzupełniając kształt. 16. Na koniec dodaj kod dla funkcji rysowania: function DrawLines (lineArray) { for (i=0; i
Ta funkcja jest stosunkowo prosta. Będzie ona uruchamiana w tablicy linii i będzie umieszczać każdy rysunek we właściwym miejscu. Trudniejsze jest zrozumienie, dlaczego funkcja ta w ogóle działa. Ja wytłumaczę zagadnienia matematyczne, lecz wydaje mi się, że zrozumiesz lepiej ten efekt, jak zobaczysz go w akcji. No to czas na matematykę: wyobraź sobie pusty klip filmowy, w którym umieszczasz kropkę w pozycji (0,0), czyli dokładnie w środku klipu filmowego, tam, gdzie widoczny jest symbol krzyżyka. Następnie umieść krzyżyk w pozycji (100,100). Pamiętasz wykonany przez nas rysunek kwadratu? Jego rozmiar wynosił 100 na 100 pikseli, dlatego też po umieszczeniu go w tym klipie filmowym z lewym górnym rogiem na pierwszym krzyżyku, dolny prawy róg naturalnie znajdzie się na drugim krzyżyku. Teraz wyobraź sobie, że przesunąłeś drugi krzyżyk do pozycji (200,200). Jak zeskalujesz rysunek kwadratu, aby dolny prawy róg ponownie znalazł się na drugim krzyżyku? Łatwo zauważyć, że aby uzyskać omawiany efekt wartości parametrów x i y również muszą wynosić 200. A co się stanie, jeśli przesunę drugi krzyżyk do pozycji, której wartości nie są aż tak oczywiste? Zorientujesz się, że po umieszczeniu górnego lewego rogu kwadratu o rozmiarze 100 na 100 na pierwszym krzyżyku, możesz przypisać pozycji x kwadratu wartość równą pozycji x drugiego krzyżyka minus pozycja x pierwszego. Podobnie możesz przypisać pozycji y wartość równą pozycji y drugiego krzyżyka minus pozycja y pierwszego. Gdy przesunęliśmy krzyżyk do pozycji (200,200), uzyskalibyśmy równanie 200-0, co daje nam wynik 200. Ostatnia część tego kodu wywołuj funkcję inicjalizacji, która bierze jako parametr zmienną lineArray. Ja dodatkowo przekształciłem również oryginalny rysunek linii w przezroczysty. Poniżej umieściliśmy kompletny skrypt dla pierwszego ujęcia: lines = new Array(); points = new Array(); points[0] = point0; points[1] = point1; points[2] = point2;
Rozdział 12-334
points[3] = point3; function CreateLines (pointArray) { for (i=0; i
17. W ujęciu 2 po prostu wywołujemy funkcję DrawLines za pomocą poniższego kodu: DrawLines(lines)
Kod ten wykona za nas całą robotę stosując tablicę lines jako dane wejściowe. 18. W ujęciu 3 twoje palce powinny już wpisywać... gotoAndPlay(2)
...z przyzwyczajenia. 19. Przeciągnij kopię klipu line drawing na główną scenę i przetestuj film:
Możesz eksperymentować z nim poprzez dalszą edycję rysunku. Dopóki będziesz stosować linię o grubości hardline, rozpoczynając się w punkcie 0,0 i kończącą w pozycji 100,100 możesz robić w środku wszystko, co ci się żywnie podoba. Spróbuj na przykład zastosować jakieś krzywe. Skoro już potrafisz w dowolnym miejscu rysować linie, wykorzystajmy tę właściwość. Na początku tej sekcji zachęciłem cię do zastanowienia się nad metodą wykonania wykresu liniowego we Flashu. Zróbmy go teraz.
Rozdział 12-335
Wykres liniowy
Jeśli chcesz umieścić na swojej stronie internetowej dynamicznie generowane wykresy, normalnie musiałbyś zapłacić za kosztowne narzędzia po stronie serwera, które generowałyby wykres, a następnie wyświetlałyby go jako obrazek. Z pomocą Flasha oszczędzimy mnóstwo pieniędzy i wykonamy gustowne wykresy w tym samym czasie. W tym ćwiczeniu zajmiemy się wykresem, którego przygotujemy w oparciu o dane z pól wejściowych.
W prawdziwym życiu prawdopodobnie wczytałbyś dane w formie tekstowej z pliku tekstowego, lecz znajduje się to poza obrębem tego rozdziału — i tym razem zachęcamy cię do przejrzenia rozdziału o dynamicznej zawartości, w którym znajdziesz wiele informacji związanych z omawianym zagadnieniem. Na razie utworzymy funkcję, która będzie rysować wykres liniowy na podstawie danych wprowadzonych ręcznie. 1. Utwórz klip filmowy, w którym umieścimy cały efekt, i nadaj mu nawę graph. Zauważ, że ponieważ chcemy przygotować cały wykres w tradycyjny sposób, z dolną lewa współrzędną jako punktem początkowym, powinieneś umieścić całą zawartość tego klipu filmowego nad i na prawo od środkowego punktu klipu. 2. Zastosuj polecenie File|Open as Library do otwarcia pliku FLA z poprzedniego ćwiczenia i z biblioteki przeciągnij klip filmowy line do biblioteki obecnego klipu filmowego. 3. Utwórz nową warstwę w klipie filmowym graph o nazwie line i przeciągnij kopię klipu line w górny lewy róg klipu graph. Nadaj mu nazwę kopii line:
Rozdział 12-336
4. Utwórz nowy klip filmowy o nazwie point i umieść w nim bardzo małe kółko, o około 5 pikselach szerokości. Umieść je dokładnie w pozycji 0,0 za pomocą panelu Info. 5. Utwórz nową warstwę o nazwie point w głównym klipie filmowym graph i przeciągnij kopię klipu point w górny lewy róg, obok klipu line. Nadaj mu nazwę kopii point:
6. Teraz dodaj kolejny klip filmowy i nazwij go field. Utwórz w nim wejściowe pole tekstowe o szerokości około 40 pikseli i wysokości 20 i umieść je w pozycji 0,0. Nadaj zmiennej pola tekstowego nazwę text, wybierz opcję Single Line i zaznacz pole wyboru Border/Bg:
7. Upewnij się, że wpisałeś w pole Max. Chars. jakąś sensowną liczbę znaków, na przykład 4. 8. Utwórz przycisk o nazwie drawGraph. W pierwszym ujęciu przycisku wpisz tekst Draw Graph (rysuj wykres) o rozmiarze około 20 punktów, a następnie wstaw oddzielne ujęcia kluczowe dla wszystkich czterech stanów przycisku:
Rozdział 12-337
9. W stanach Up i Over nadaj tekstowi kolor szary, a w stanie Down kolor czerwony. W stanie Hit dodaj duży prostokąt — jego kolor nie gra roli, gdyż i tak go nigdy nie zobaczysz; prostokąt ten powinien zakrywać cały blok tekstowy. Utwórz nową warstwę w głównym klipie filmowym graph, a następnie przeciągnij kopię przycisku na tą warstwę w dolne lewy róg:
Dopracowanie tego efektu może trochę potrwać, ponieważ musimy przygotować obszar siatki, na której będziemy rysować wykres. Najpierw zdecydujemy, który kwadrant płaszczyzny x, y zastosujemy pod wykres. W tym ćwiczeniu będzie to górny prawy kwadrant. 10. Jeśli chcesz, utwórz siatkę jasnych linii tła na oddzielnej warstwie. Jak widać, ja wykonałem siatkę o szerokości 50 pikseli:
11. Przeciągnij dwa klony klipu filmowego field na główną scenę. Nazwij dwie kopie odpowiednio x0 i y0 i umieść je jedna obok drugiej po lewej stronie, poniżej klipów line i point:
Rozdział 12-338
Te klipy filmowe zostaną powielone parami dziewięć razy, abyśmy mogli wpisać w nie dziesięć zestawów punktów x i y, dlatego też upewnij się, że pozostawiłeś pod nimi wystarczająco dużo wolnego miejsca. Możemy rozmieścić je ręcznie, lecz łatwiej utworzyć je i nazwać w skrypcie. Jeśli chcesz, możesz tak jak ja dodać do pól tekstowych tło. W tym celu utwórz nową warstwę w głównym klipie filmowym i wstaw tło tak, jak to widać na rysunku:
Jeśli chodzi o skrypt, to już czas najwyższy, aby się za niego zabrać. Do tworzonego przez nas efektu będziemy potrzebować tylko jedno ujęcie skryptowe. Przygotujemy wszystkie elementy potrzebne do rysowania wykresu, a następnie napiszemy funkcję, która wykona samo rysowanie. Następnie przypiszemy ją do przycisku, dzięki czemu przy każdorazowej aktualizacji pola tekstowego będziemy musieli jedynie wcisnąć przycisk Draw Graph, aby wykres został ponownie narysowany. 12. W głównym klipie filmowym graph utwórz warstwę actions i dodaj poniższy skrypt w pierwsze ujęcie: input_num = 10; lines = new Array(); input = new Array(); points = new Array();
Skrypt rozpoczyna się od zdefiniowania zmiennej do przechowywania tylu punktów x, y, ile będziemy mieć, a następnie inicjalizuje trzy tablice: dla linii, punktów i danych. Pierwsze dwie są standardowymi tablicami, natomiast tablica input w zasadzie będzie dwuwymiarową tablicą, w której każda indeksowa lokalizacja będzie zawierać
Rozdział 12-339
kolejną tablicę. Każda pozycja w drugiej tablicy będzie zawierać dwie wartości, z elementem danych x w pierwszej pozycji i y w drugiej. Po zdefiniowaniu początkowych zmiennych nadszedł czas na zapełnienie tablicy input. 13. W tym celu wpisz poniższy skrypt: input[0] = new Array(); input[0][0] = x0; input[0][1] = y0; input[0][0].text = 0; input[0][1].text = 0;
Początkowy wiersz tworzy nową tablicę wewnątrz pierwszej pozycji w istniejącej tablicy input. Do zapełnienia obydwu podlokalizacji w pierwszej pozycji zastosujemy podwójne nawiasy: input[0][0] = x0; input[0][1] = y0;
Zatem klip filmowy x0 umieściliśmy w pozycji input [0] [0], a klip y0 w pozycji input [0] [1]. Zmiennej text dla każdego klipu przypisaliśmy wartość 0: input[0][0].text = 0; input[0][1].text = 0;
Kolejne trzy bloki kodu zawierając oddzielne pętle powielenia, wszystkie bardzo podobne do tych, które już widzieliśmy. 14. Dodaj teraz poniższy kod dla pierwszej pętli: for (i=1; i
Ta pętla utworzy nowe elementy danych. Powiela ona w zasadzie dwa klipy filmowe, x0 i y0. każdy z nich zostaje skopiowany, a następnie przesunięty w dół z wykorzystaniem techniki przesunięcia, podobnej do tej zastosowanej w ćwiczeniu przechwytywania klawiszy klawiatury. Zmiennej text każdego klipu przypisaliśmy wartości początkowe poprzez zastosowanie wielokrotności licznika pętli dla pierwszej lokalizacji, i danych wyjściowych metody pow obiektu Math dla drugiej: input[i][0].text = i*50; input[i][i].text = Math.pow (i*2, 2)*2;
15. Wpisz kod dla kolejnego cyklu powielania: for (i=0; i
Rozdział 12-340
Ten kod tworzy wszystkie nowe linie, które będą rysowane w wykresie. Potrzebujemy o jedną linię mniej od całkowitej liczby punktów danych, ponieważ liczba segmentów linii w wykresie jest o jeden mniejsza od liczby punktów. 16. Wpisz skrypt dla trzeciego i ostatniego skryptu powielania: for (i=0; i
Ten skrypt tworzy kopie rysunku point, którymi zostaną zaznaczone punkty w wykresie. W ostatnim przykładzie punkty określały kierunek linii, lecz w tym projekcie, punkty dodawane są później jako wizualne znaczniki. 17. Na koniec dodaj funkcję stanowiącą serce tego efektu, czyli funkcję DrawLines: functionDrawLines (inputArray, lineArray, pointArray) { for (i=0, i<(input_num-1); i++) { lineArray[i]._x = inputArray[i][0].text; lineArray[i]._y = inputArray[i][1].text; lineArray[i]._y* =-1; lineArray[i]._xscale = inputArray[i+1][0].text — inputArray[i][0].text; lineArray[i]._yscale = inputArray[i][1].text — inputArray[i+1][1].text; } for (i=0; i
Chociaż założenia matematyczne dla rysowania linii pozostają takie same, struktury danych znacznie zmieniły się od ostatniego ćwiczenia. W tej funkcji mamy dwie pętle for, z powodu różnicy liczb pomiędzy punktami i liniami. Najpierw rysujemy punkty za pomocą danych z tablicy input. Zauważ, że mnożymy pozycję y każdego punktu przez wartość ujemną: lineArray[i]._y* =-1;
Dzieje się tak z powodu sposobu działania systemu współrzędnych we Flashu: musimy odbić wyniki pionowo aby umieścić wykres we właściwym kwadrancie. Następna pętla for umieszcza wszystkie linie w tablicy lines. Po ukończeniu definicji funkcji po prostu wywołujemy ją pod koniec skryptu z wykorzystaniem trzech tablic jako argumentów: DrawLines (input, lines, points);
W ten sposób po uruchomieniu filmu wyświetlony zostaje początkowy wykres. W moim projekcie oryginalne klipy filmowe line i point są niewidoczne. Ostatnia pozycją w ujęciu jest akcja stop — nie chcemy przecież, aby film został odtwarzany od nowa i ponownie inicjalizował wszystkie elementy. 18. Już prawie koniec. Przejdź teraz do kopii przycisku drawGraph na scenie i w oknie Object Actions dodaj poniższe akcje:
Rozdział 12-341
on ( release ) { DrawLines (input, lines, points); }
19. Przeciągnij kopię klipu graph na główną scenę, odpowiednio ją umieść i przetestuj film. Wykres powinien pojawić się natychmiast, z początkowymi wartościami współrzędnych wygenerowanymi za pomocą kodu ActionScript:
Spróbuj edytować punkt w wykresie poprzez zmianą liczb w polach tekstowych. Po wciśnięciu przycisku Draw Graph wykres powinien zostać zmodyfikowany aby odzwierciedlić wprowadzone przez ciebie liczby. Nadal jest możliwe rysowanie wykresu poza obszarem wykresu, więc jeśli masz ochotę na odrobinę praktyki w pisaniu skryptu, możesz zmodyfikować funkcję Draw w taki sposób, aby nie rysowała punktu wychodzącego poza obszar wykresu. Możesz również pobawić się obliczeniami i zastanowić, w jaki sposób można wprowadzić tego liczby do filmu jako serie zmiennych, a następnie zastosować je jako współrzędne punktów.
Zakończenie Mamy nadzieję, że dowiedziałeś się w tym rozdziale kilku rzeczy o możliwościach niezwykle potężnego języka skryptowego Flasha. Najlepszą radą, jaką można dać każdemu użytkownikowi pragnącemu nauczyć się języka ActionScript, to cierpliwość. Podobnie jak z wszystkimi innymi rodzajami kodu, trzeba poświęcić trochę czasu na poprawianie błędów i rozwiązywanie problemów, drapiąc się po głowie i przełączając się pomiędzy równymi oknami Actions dla kodu obiektów. Potraktuj to jako świetne ćwiczenie zwiększające twoje doświadczenie, dzięki czemu na pewno zaznajomisz się z narzędziami i technikami stosowanymi w środowisku ActionScript. Aby nauczyć się języka ActionScript nie da się niczego obejść — dokonasz tego jedynie poprzez ćwiczenia, doświadczenia i innowację. Powodzenia i miłego Flashowania!
Rozdział 12-342
Rozdział 13 Proste procedury stosowane w grach Czy ci się to podoba czy nie, witryny internetowe wykonane we Flashu są już w całej Sieci, lecz mimo, że Flash jest obecnie jednym z najpotężniejszych dostępnych programów do tworzenia witryn internetowych, wiele z witryn nie wykorzystuje w pełni jego możliwości. Jednym z aspektów Flasha często omijanych przez użytkowników był język ActionScript, lecz z nadejściem Flasha 5, tej cechy programu nie można już zignorować. W środowisku ActionScript możesz tworzyć wysoce interaktywne interfejsy a nawet gry, które stanowią główny temat tego rozdziału. Przejdziemy przez kilka samouczków programowania, które przeprowadzą cię krok po kroku przez proces tworzenia gier i interaktywnej zawartości dla twoich witryn internetowych. Nawet jeśli twoje doświadczenie z językiem ActionScript jest niewielkie, samouczki ułatwią ci zaznajomienie się z tym środowiskiem i zanim dojdziesz do ostatniego ćwiczenia będziesz już zaawansowanym użytkownikiem ActionScript. Jedną z najważniejszych rzeczy, a jakiej należy zawsze pamiętać, jest różnica pomiędzy nazwą symbolu i nazwą kopii. Nazwa symbolu oznacza nazwę rysunku, przycisku lub klipu filmowego, który umieszczony jest w bibliotece, a opisowe nazywanie symboli znacznie ułatwi ci ich późniejszą identyfikację, jak również przyspieszy pracę. Nazwę kopii można nadać jedynie klipowi filmowemu znajdującemu się na scenie, i pozwala ona na kontrolowanie klipu za pomocą poleceń języka ActionScript. Zaletą nazwy kopii jest możliwość przeciągania wielu kopii tego samego symbolu na scenę przy jednoczesnym kontrolowaniu wszystkich kopii oddzielnie poprzez nadanie im różnych nazw. Nazwy symboli i kopii mogą być jednakowe — Flash nigdy ich nie pomyli, gdyż należą one do różnych typów obiektów, więc sam musisz zdecydować, czy chcesz nadać taką samą nazwę, aby ją łatwiej zapamiętać, czy wolisz różne, aby się samemu nie pomylić. Jak już wspomnieliśmy, nie czyni to żadnej różnicy dla programu, lecz powinieneś o tym pamiętać podczas rozwijania własnych metod pracy i zwyczajów. No to zacznijmy. Podczas programowania gier we Flashu koniecznie należy zapoznać się ze sposobem tworzenia takiego klipu filmowego, który „wie”, w którym miejscu znajduje się na ekranie, i który jest zdolny do poruszania się. W pierwszym ćwiczeniu nauczysz się, jak wykonać piłkę, która przemieszcza się po ekranie odbijając się od jego boków. Odbijająca się piłka
Zaczniemy od przystosowania filmu Flasha dla piłki, aby mogła on przemieszczać się w jego obrębie. 1. Utwórz nowy film i określ jego szerokość (Width) i wysokość (Height) na 400 pikseli. Na razie zmień prędkość odtwarzania filmu (Frame Rate) na 20 fps: możesz przetestować różne szybkości aby znaleźć najbardziej ci odpowiadającą, lecz ja odkryłem, że 20fps to wystarczająca prędkość do tworzenia przekonywujących
Rozdział 13-343
animacji. Na koniec określ odległości w siatce (Grid Spacing) na 10 pikseli i upewnij się, że pola wyboru Show Grid i Snap to Grid są zaznaczone. 2. Narysuj czarne linie wokół krawędzi sceny. To będzie twoja ściana, dzięki której będziesz mógł obserwować w którym miejscu piłka się odbija po zetknięciu się z krawędziami ekranu:
3. Skoro już przygotowaliśmy tło, wystarczy jeszcze tylko dodać piłkę. Narysuj w dowolnym miejscu na scenie wypełnione kółko i w panelu Info nadaj mu szerokość (Width) i wysokość (Height) wynoszącą 20 pikseli. Następnie zaznacz kółko i przekształć je w symbol klipu filmowego o nazwie Ball. Teraz w panelu Instance nadaj kopii na scenie niezwykle twórczą nazwę...Ball. 4. Tyle jeśli chodzi o podstawy. Jesteś już gotowy do wpisania pierwszego fragmentu kodu ActionScript i puszczenia piłki w ruch. Otwórz klip filmowy Ball do edycji, utwórz nową warstwę, w ujęcia 1, 2 i 3 wstaw ujęcia kluczowe i nazwij tą warstwę Code. Następnie wstaw kolejne dwa ujęcia na warstwie 1 i zmień jej nazwę na Graphics:
5. Otwórz panel Frame Actions dla ujęcia 1 na warstwie Code i dodaj poniższe akcje: Xspeed = 10; Yspeed = 10;
Te zmienne określają prędkość piłki poprzez zdefiniowanie odległości, o jaką będzie poruszać się klip filmowy w każdym ujęciu. 6. W ujęciu 2 na warstwie Code dodaj następujące akcje: BallX = _x; BallY = _y; BallX = BallY+Xspeed; BallY = BallY+Yspeed; if (BallX>390) { BallX = 390; Xspeed = Xspeed*-1; } if (BallX<10) { BallX = 10; Xspeed = Xspeed*-1; } if (BallY>390) { BallY = 390; Yspeed = Yspeed*-1; } if (BallY<10) { BallY = 10;
Rozdział 13-344
Yspeed = Yspeed*-1; } _x = BallX; _y = BallY;
Jest to przewodni kod ruchu piłki. _x i _y są wbudowanymi właściwościami reprezentującymi pozycję piłki na scenie. Zmienne BallX i BallY ustawione są na bieżące pozycje _x i _y piłki, następnie przeprowadzanych jest na nich kilka obliczeń, a na koniec właściwości _x i _y ponownie zostają przypisane zmiennym BallX i BallY, aktualizując pozycję piłki na ekranie. Instrukcje if sprawdzają, czy piłka zetknęła się z krawędzią ekranu. Wiemy, że rozmiar sceny wynosi 400 na 400 pikseli, a promień piłki równy jest 10 pikselom (połowa z 20). Na razie program jest skonfigurowany w taki sposób, aby mierzył piłkę od środka, więc jeśli odejmiemy promień piłki od rozmiaru sceny dowiemy się, kiedy krawędź piłki zetknęła się z krawędzią ekranu:
Po zetknięciu się z krawędzią ekranu kierunek ruchu piłki zostaje odwrócony poprzez „odbicie” odpowiedniej prędkości. Dokonujemy tego poprzez pomnożenie prędkości przez -1: na przykład, 10*-1 = -10 a -10*-1=10. 7. W ujęciu 3 na warstwie Code wpisz poniższe akcje: gotoAndPlay (2);
Ten kod po prostu przesyła klip filmowy z powrotem do ujęcia 2 tworząc w ten sposób pętlę i aktualizując pozycję piłki dziesięć razy na sekundę. Jeśli wpisałeś kod poprawnie, po uruchomieniu filmu zobaczysz piłkę skaczącą po ekranie. Jeśli nic się nie dzieje, lub piłka nie porusza się tak, jak należy, dwukrotnie sprawdź kod ActionScript, gdyż choćby najmniejszy błąd może sprawić wielką różnicę. Jeśli wszystko działa dobrze, zapisz ten plik na dysku pod nazwę Balltut1.fla, ponieważ w następnym samouczku dodamy do niego nowe fragmenty skryptu ActionScript. Dodawanie losowości
Na razie piłka będzie skakać po niezmiennej ścieżce, tworząc pętlę. Pierwszą modyfikacją, jaką możemy wprowadzić, jest zmiana prędkości piłki. Poprzez modyfikację zmiennych Xspeed i Yspeed w pierwszym oszukamy przyciąganie ziemskie. Wypróbuj wartości odpowiednio 8 i 15. Sprawią one, że piłka będzie się poruszać szybciej i w efekcie dalej, wzdłuż płaszczyzny Y (pionowej) niż po płaszczyźnie X (poziomej).
Rozdział 13-345
Dodanie losowych elementów do akcji spowoduje, że piłka będzie zachowywać się i poruszać w różnych kierunkach po każdym uruchomieniu filmu. Ta właściwość dodaje element rzeczywistości do twoich filmów, przez co stają się one bardziej interesujące dla oglądających je osób, zachęconych w ten sposób do interakcji z nimi. W tym ćwiczeniu dodamy takie akcje, które spowodują, że piłka będzie rozpoczynać ruch z różnych miejsc na ekranie i losowo zmieniać prędkość po zetknięciu się z krawędziami ekranu. 1. Rozpoczynając od pliku z poprzedniego ćwiczenia, zaznacz klip filmowy Ball i następnie albo edytuj lub edytuj specjalnie, aby uzyskać dostęp do listwy czasowej klipu Ball. W ujęciu 1 na warstwie Code zmodyfikuj wpisany tam kod ActionScript aby dopasować go do poniższego skryptu (zmieniony kod został pogrubiony): Xspeed = 8; Yspeed = 15; _x = (Math.random()*300)+20; _y = (Math.random()*300)+20;
Te dwie akcje spowodują, że piłka będzie rozpoczynać ruch z różnych miejsc po każdym uruchomieniu filmu. Zamiast funkcji random() zastosowaliśmy tutaj metodę Math.random(), ponieważ jest to preferowane polecenie we Flashu 5, a także daje ono lepsze przybliżenie losowej liczby. Jedyny problem z tą metodą jest taki, że zwraca ona liczbę od 0.0 do 1.0. Oznacz to, że musimy pomnożyć uzyskany wynik przez inną liczbę, aby otrzymać wystarczająco obszerny zakres. Na przykład, we Flashu 4, można było zastosować funkcję random(10) aby uzyskać losową liczbę od 0 do 9, lecz teraz lepiej użyć metody Math.random(), a następnie pomnożyć wynik przez 10. Zatem, dla losowej liczby od 0 do 9 kod wyglądałby Math.random()*10. W ten sposób uzyskamy jednak zbyt dokładną liczbę, na przykład 8.945272636435, więc aby ją zaokrąglić do najbliższej liczby całkowitej zastosujemy kod Math.floor(Math.random()*10). Pewnie wygląda on dosyć skomplikowanie, lecz nie zapominaj, że zawsze możesz rozwiązać ten problem za pomocą funkcji. A oto prosty przykład: function NewRand(2){ return Math.floor(Math.random()*a); }
Teraz otrzymamy losową liczbę od 0 do 9 wywołując polecenie NewRand(1);. 2. Następnie przejdź do kodu głównego klipu Ball i nadaj mu losową prędkość. W tym celu w ujęciu 2 na warstwie Code wpisz poniższe akcje: BallX = _x; BallY = _y; BallX = BallY+Xspeed BallY = BallY+Yspeed; if (BallX>390) { BallX = 390; Xspeed = Xspeed+((Math.random()*10)-5); Xspeed = Xspeed*-1; } if (BallX<10) { BallX = 10; Xspeed = Xspeed*-1; Xspeed = Xspeed+((Math.random()*10)-5); } if (BallY>390) { BallY = 390; Yspeed = Yspeed+((Math.random()*10)-5); Yspeed = Yspeed*-1;
Te nowe akcje spowodują zmianę prędkości i kierunku piłki po zetknięciu się z krawędzią okna. 3. Podczas odtwarzania filmu zauważysz, że piłka nigdy nie obiera tej samej drogi, jak poprzednio i możesz tutaj dokładnie zaobserwować efekt, jaki kilka losowo wybranych liczb może wywrzeć na ruchu filmu. Jeśli jesteś zadowolony z uzyskanego efektu zapisz film w pliku pod nazwą Balltut2.fla. Zastosujemy go w kolejnym ćwiczeniu. Czas na dodanie do filmu odrobiny interaktywności i podstawową kontrolę myszą. Tworzenie interaktywności
Dodawanie interaktywnych elementów do filmów daje ci możliwość tworzenia fantastycznych animowanych menu i przycisków. Przyjrzeliśmy się już programowaniu klipu filmowego, który samodzielnie porusza się po ekranie, a teraz dodamy kilka akcji, które pozwolą użytkownikowi na zatrzymanie i uruchomienie klipu filmowego poprzez przesunięcie nad nim kursora myszy:
1. Pierwszym zadaniem, jakie należy wykonać, jest utworzenie przycisku, który będzie uruchamiać kod ActionScript po umieszczeniu i przesunięciu kursora myszy nad piłką. Otwórz klip filmowy Ball i zaznacz rysunek piłki na warstwie Graphics. Przekształć go w symbol przycisku i nadaj mu nazwę Button. W ten sposób wykonałeś przycisk osadzony wewnątrz klipu filmowego, do którego możesz już dodać akcje. 2. Kliknij na klipie Button aby go zaznaczyć, a następnie otwórz okno Object Actions i wpisz poniższy kod: on (rollOver, dragOver) { Xspeedsave = Xspeed; Yspeedsave = Yspeed; Xspeed = 0; Yspeed = 0; } on (rollOut, dragOut) { Xspeed = Xspeedsave; Yspeed = Yspeedsave; }
Zmienne Xspeedsave i Yspeedsave przechowują prędkość ruchu piłki zanim prędkość zostaje zredukowana do 0. Gdy mysz odsuwa się od piłki zmienne Xspeed i
Rozdział 13-347
Yspeed powracają do swoich oryginalnych wartości za pomocą zmiennych Xspeedsave i Yspeedsave. Tylko taki niewielki fragmentu kodu ActionScript jest potrzebny do zatrzymywania i uruchamiania piłki kursorem myszy. Uruchom film, aby sprawdzić czy wszystko działa poprawnie, a następnie zapisz plik pod nazwą Balltut3.fla, gdyż ponownie zastosujemy go w kolejnym ćwiczeniu. Powielanie piłki
Teraz dodamy do filmu przycisk, który po każdym jego wciśnięciu utworzy nową piłkę. 1. Na głównej listwie czasowej otwórz bibliotekę i przeciągnij z niej kopię utworzonego przez nas wcześniej przycisku w dolny prawy róg ekranu:
Jeśli chcesz, możesz w panelu Effect nadać przyciskowi jakiś kolor, aby się odróżniał od innych. 2. Teraz otwórz okno Object Actions dla przycisku i dodaj poniższe akcje: on (press) { Count = Count+1; duplicateMovieClip ("Ball", "Ball" + Count, Count); }
Zmienna Count przechowuje liczbę piłek na ekranie i zwiększa samą siebie o jeden po każdym wciśnięciu przycisku. Akcja duplicateMovieClip tworzy nową wersję piłki i dodaje wartość do zmiennej Count na koniec jej nazwy tak, że pierwsza kopia klipu Ball będzie nosić nazwę Ball1, druga Ball2 i tak dalej. 3. Po wpisaniu akcji uruchom film i wciśnij przycisk dowolna liczbę razy. Po każdym wciśnięciu pojawi się nowa piłka, a ty będziesz mógł ją zatrzymać umieszczając nad nią kursor myszy:
4. Gdy już skończysz zabawę zapisz film na dysk pod nazwę Balltut4.fla.
Rozdział 13-348
To już koniec przykładów z piłką. Do tej pory omówiliśmy podstawowe procedury kodu ActionScript niezbędne do tworzenia zarówno gier, jak i bardzo ładnej zawartości witryn internetowych. Zajmowaliśmy się następującymi czterema procedurami: • • • •
ruch klipu filmowego, proste wykrywanie kolizji, elementy losowe, powielanie klipu filmowego.
Teraz jesteś już gotowy do zaprogramowania twojej pierwszej gry we Flashu.
Prosta gra w pingponga Czas najwyższy, aby utworzyć we Flashu grę typu „ping pong” z wykorzystaniem procedur, które przed chwilą omówiliśmy, włącznie z kilkoma dodatkowymi akcjami, które zabiorą cię głębiej w świat środowiska ActionScript. Gra będzie się składać z piłki skaczącej po ekranie, dwóch rakietek kontrolowanych przez gracza, dwóch obszarów goli i tekstu wyświetlającego wynik. Tworzenie gry
Rozpoczniemy od skonfigurowania obszaru gry w filmie. 1. Utwórz nowy film i ustaw jego szerokość (Width) na 600 pikseli, a wysokość (Height) na 400. W wyświetlonym oknie dialogowym określ również prędkość odtwarzania (Frame Rate) na 20fps. Ustaw odległości pomiędzy kratkami siatki na 10 pikseli i upewnij się, że pola wyboru Show Grid i Snap to Grid są zaznaczona. Wówczas narysuj linie wokół krawędzi filmu tak jak poprzednio, dzięki czemu będziesz mógł widzieć dokładnie rozmiar okna po uruchomieniu filmu. 2. Teraz przejdziemy do utworzenia piłki, którą zastosujemy w grze. Narysuj wypełnione kółko o rozmiarze 20 na 20 pikseli, a następnie przekształć je w klip filmowy o nazwie Ball. Teraz kliknij na kopii klipu filmowego na scenie, otwórz panel Instance i nadaj jej nazwę klonu Puck, tak dla odmiany. 3. Następnie wykonamy rakietkę. Narysuj wypełniony prostokąt o szerokości 10 i wysokości 40 pikseli. Zaznacz go i przekształć w klip filmowy o nazwie Bat. W tej grze rakietki będą się poruszać w stosunku do pozycji myszy. W ten celu utworzymy niewidoczny klip filmowy, który będzie się poruszać wraz z muszą: ten klip poinformuje rakietki, gdzie mają się przesunąć. Łatwiej ci będzie zrozumieć działanie tego mechanizmu, jak go zobaczysz w akcji. 4. Utwórz wypełnione kółko o rozmiarze 10 na 10 pikseli i przekształć je w klip filmowy o nazwie InvisClip. Następnie nadaj mu nazwę kopii MousePosition. 5. Kliknij na pierwszym ujęciu na głównej listwie czasowej i wywołaj okno Frame Actions. Aby klip filmowy MousePosition mógł przesuwać się wraz z kursorem myszy wpisz poniższe proste akcje: startDrag ("MousePosition", true, 0, 20, 600, 380);
Akcja startDrag powoduje zablokowanie klonu MousePosition na kursorze myszy. Liczby definiują granicę, w obrębie której można przeciągać klip. Jest ona trochę mniejsza od sceny, aby rakietki podczas poruszania się nie mogły wyjść poza górne i dolne krawędzie sceny:
Rozdział 13-349
Jak widać, gdy klip MousePosition styka się ze swoją granicą ruchu, rakietka dochodzi do górnej krawędzi sceny, tak jak to przewidzieliśmy. Właściwość true potwierdza, że chcemy przypisać kursor myszy do środka klipu. 6. Jeśli odtworzysz teraz film zobaczysz, jak klon MousePosition radośnie porusza się po scenie, zablokowany na kursorze myszy. Na razie na ekranie widoczna jest tylko jedna rakietka, lecz do gry będziemy potrzebować dwie. Dlatego też otwórz bibliotekę i przeciągnij drugą kopię klipu filmowego Bat na scenę. Zaznacz jedną z rakietek i umieść ją w taki sposób, aby jej górny lewy róg znajdował się w górnym lewym rogu sceny, a następnie nadaj jej nazwę LeftBat. Zaznacz teraz drugi klip Bat i umieść go w podobny sposób jak poprzedni, tyle że w górnym prawym rogu sceny. Nazwij go RightBat:
Nadszedł już czas na zaprogramowanie filmu tak, aby obydwie rakietki poruszały się w górę i w dół po ekranie wraz z kursorem myszy, lecz nie w lewo ani w prawo. 7. Na głównej scenie zaznacz klip filmowy MousePosition i otwórz go do edycji. Dodaj nową warstwę o nazwie Code i utwórz ujęcia kluczowe w ujęciach 1, 2 i 3. Na warstwie 1 w ujęciu 3 dodaj jedno ujęcie. 8. Dodaj poniższe akcje w ujęcie 3 na warstwie Code: gotoAndPlay (2);
Ten kod utworzy pętlę pomiędzy ujęciami 2 i 3. 9. Teraz dodaj następujące akcje do ujęcia 2 na warstwie Code: MousePositionY = _root.MousePosition._y; _root.LeftBat._y = MousePositionY; _root.RightBat._y = MousePositionY;
Te akcje sprawdzają pozycję klipu filmowego MousePosition, a następnie modyfikują odpowiednio pozycję klipów LeftBat i RightBat. Jeśli teraz uruchomisz film, podczas przesuwania kursorem myszy rakietki będą podążać za nim, jeśli przesuwa się on w dół lub w górę, lecz nie będą się przesuwać w prawo ani w lewo. Tyle wystarczy nam kodu dla rakietek, więc zajmijmy się teraz piłką. Klip filmowy Puck będzie zawierać wszystkie procedury kolizji, napisane w języku ActionScript, z krawędziami okna, jak również kolizje z rakietkami i wynik gry, więc proponuję, abyś sobie zrobił teraz filiżankę kawy, gdyż czeka na ciebie dosyć duża dawka programowania...
Rozdział 13-350
10. Zaznacz klip Puck i otwórz go do edycji. Utwórz nową warstwę o nazwie Code. W ujęciach 1, 2 i 3 na tej warstwie wstaw ujęcia kluczowe, a następnie dodaj również ujęcie w ujęciu 3 na warstwie 1. 11. Dodaj poniższą akcję do ujęcia 3 na warstwie Code: gotoAndPlay (2);
I w tym przypadku kod ten tworzy znaną nam już pętlę pomiędzy ujęciami 2 i 3. 12. Dodaj poniższe akcje do ujęcia 1 na warstwie Code: Xspeed = (Math.random()*15)+5; Yspeed = (Math.random()*15)+5; _root.Score = 0; _x = (Math.random()*300)+150; _y = (Math.random()*150)+75;
Akcje te definiują początkową losową prędkość dla piłki, początkową wartość wyników i losową pozycję startową piłki. Ujęcie 2 będzie zawierać główny szkielet programu: ruch piłki, wykrywanie kolizji i wynik gry. 13. Dodaj poniższy kod, który będzie aktualizować pozycję rakietek i piłki: LeftBatY = _root.LeftBat._y; RightBatY = _root.RightBat._y; BallX = _x; BallY = _y; BallX = BallX+Xspeed; BallY = BallY+Yspeed;
Dwa pierwsze wiersze zapisują pozycję rakietek, dwa kolejne pozycję piłki, a dwa ostatnie definiują nową pozycję piłki. 14. Teraz, poniżej istniejącego już kodu, umieścimy serię instrukcji if, które określają, kiedy piłka uderza w jakiś obiekt i definiują co należy zrobić w takim przypadku. Chcemy uzyskać następujące reakcje: • • •
piłka uderza w górną lub dolną krawędź — odbija się z nową losową prędkością, piłka uderza w rakietkę — odbija się z nową losową prędkością i zwiększa wynik o 10 punktów, piłka uderza w prawą lub lewą krawędź — koniec gry, ponowne uruchomienie gry i wyzerowanie wyników.
Omówmy kod krok po kroku. 15. Wpisz poniższy skrypt w ujęciu 2 poniżej ostatniego fragmentu: if (BallX>580) { if (BallY>(RightBatY-20)) { if (BallY<(RightBatY+20)) { BallX = 580; Xspeed = (Math.random()*15)+5; Xspeed = Xspeed*-1; _root.Score = _root.Score+10; } } }
Ten pierwszy zestaw instrukcji if sprawdza, czy piłka uderzyła w prawą rakietkę. Najpierw sprawdzają, czy piłka zetknęła się z określonym punktem na ekranie, Rozdział 13-351
którego można sobie wyobrazić jako pionowa linię narysowaną tuż przez rakietką. Następnie kod sprawdzą, czy piłka znajduje się na tym samym poziomie ekranu (mierzonym od góry do dołu). Jeśli piłka znajduje się obok rakietki wówczas odbija się od niej i wynik zostaje zwiększony o 10. Jeśli jednak nie uda nam się odbić piłki prawą rakietką... if (BallX>590) { _root.Score = 0; gotoAndPlay (1); }
...wówczas wynik zostaje wyzerowany i gra rozpoczyna się od nowa. 16. Następnie będziemy potrzebować podobny zestaw akcji dla rakietki po lewej stronie ekranu. Wpisz je teraz: if (BallX<20) { if (BallY>(LeftBatY-20)) { if (BallY<(LeftBatY+20)) { BallX = 20; Xspeed = (Math.random()*15)+5; _root.Score = _root.Score+10; } } } if (BallX<10) { _root.Score = 0; gotoAndPlay (1); }
17. Teraz powiemy piłce co ma robić, gdy uderza w górną lub dolną krawędź ekranu: if (BallY>390) { BallY = 390; Yspeed = (Math.random()*15)+5; Yspeed = Yspeed*-1; } if (BallY<10) { BallY = 10; Yspeed = (Math.random()*15)+5; }
18. Na koniec dodaj poniższy kod do aktualizowania pozycji piłki: _x = BallX; _y = BallY;
I w ten sposób zakończyliśmy główny proces programowania. Zostało nam jeszcze trochę sprzątania i przygotowanie wyników, lecz za chwilę się tym zajmiemy. Na razie możesz usiąść wygodnie, odprężyć się i pobawić się piłką:
Rozdział 13-352
Dobrze, czas już na końcowe poprawki. Przede wszystkim musimy ukryć klip filmowy znajdujący się pod kursorem myszy. Najłatwiejszym sposobem na to będzie po prostu usunięcie go. 19. Powróć do głównego okna, zaznacz klip filmowy MousePosition i otwórz go do edycji. Zaznacz w nim wypełnione kółko i usuń je. Nie obawiaj się — nie spowoduje to usunięcia klipu filmowego. Możemy nawet pójść o krok dalej i usunąć również kursor myszy. 20. Powróć do głównej listwy czasowej i otwórz dla pierwszego (i jedynego) ujęcia na warstwie 1 panel Frame Actions. Znajduje się już w tym ujęciu akcja startDrag. Poniżej tego fragmentu kodu dodaj następujący: Mouse.hide();
Kursor powinien być teraz niewidoczny i już nie trzeba niczego z nim robić. Aby wyświetlić wynik gry dodamy na głównej listwie czasowej kolejną warstwę o nazwie Score. 21. Utwórz na tej warstwie dynamiczne pole tekstowe i w polu Variable wpisz nazwę Score. Przesuń pole tekstowe do pozycji na ekranie, w której chcesz, aby wyświetlany był wynik; ja umieściłem moje u góry ekranu. Możesz również zaznaczyć pole wyboru Border/Bg, aby wynik był lepiej widoczny.
Teraz nadszedł czas na wielki test. Po uruchomieniu filmu powinieneś zobaczyć piłkę poruszającą się po ekranie. Jeśli piłka dotrze do lewej lub prawej krawędzi ekranu, wówczas wynik zostanie wyzerowany. Jeśli poruszysz rakietki przez piłką, wówczas piłka odbije się od nich i wynik zwiększy się o 10 punktów. Oczywiście nadal można na wiele sposobów ulepszyć tą grę — dodając tablice najlepszych wyników, lepsze rysunki, dźwięk, przycisk startu do rozpoczęcia gry, i tak dalej — lecz pozostawię to już tobie. Gdy skończysz zapisz grę pod nazwą BatandBall.fla. Rozdział 13-353
Tworzenie wirtualnego zwierzaka
Wirtualne zwierzaki, co? Są już wszędzie: w komputerach, w konsolach gier, nawet na breloczkach kluczy. Chociaż do utworzenia takich wirtualnych stworzonek zachowujących się jak prawdziwe zwierzęta potrzebne jest bardzo złożone oprogramowanie, można również wykonać prosty program za pomocą języka ActionScript i przy odrobinie wyobraźni. W tym ćwiczeniu przeprowadzimy cię przez proces tworzenia twojego własnego Flashowego wirtualnego ulubieńca z zastosowaniem niczego więcej niż kilku klipów filmowych i kodu ActionScript. Rozpoczniemy od ruchu, a następnie przejdziemy do zachowań i interaktywności. 1. Jak zwykle najpierw przygotujemy scenę dla nowego filmu. Wybierz dla niego szerokość i wysokość wynoszące 500 pikseli, a prędkość odtwarzania (Frame Rate) ustaw na 20 fps (ujęć na sekundę). Parametrowi Grid Spacing przypisz wartość 10 pikseli i upewnij się, że pole wyboru Show Grid jest zaznaczone. Możesz również narysować linie wokół krawędzi filmu, aby uwidocznić obszar, w obrębie którego odtwarzany będzie film. Teraz zajmiemy się stworzonkiem. 2. Narysuj wypełnione kółko o rozmiarze 40 na 40 pikseli, a następnie zaznacz je i przekształć w klip filmowy o nazwie Creature. Zaznacz go i otwórz do edycji. 3. Teraz nad wypełnionym kółkiem narysuj strzałkę skierowaną w górę:
4. Zaznacz wypełnione kółko i strzałkę, a następnie przekształć je w symbol graficzny o nazwie CreatureGraphic. Powróć na główną scenę, zaznacz klip filmowy Creature i nadaj mu nazwę kopii Creature. Jak widać, klip filmowy nie przypomina na razie żadnego stworzenia, lecz zawsze możesz poprawić jego wygląd edytując symbol CreatureGraphic. Aby na razie niczego nie komplikować najlepiej pozostawić ten symbol bez zmian. Wystarczy wyobrazić sobie, że jest to niewielkie czarne stworzonko z niezliczoną liczbą ruchliwych nóżek. Teraz nadszedł czas na napisanie akcji, dzięki którym zwierzak będzie mógł się poruszać po ekranie i obracać się przodem do kierunku, w którym się przesuwa. 5. Zaznacz klip filmowy Creature i otwórz go do edycji. Utwórz nową warstwę o nazwie Code. W ujęciach 1, 2 i 3 wstaw ujęcia kluczowe, a w ujęciu 3 na warstwie 1 dodaj jedno zwykłe ujęcie. 6. Wpisz poniższy kod w ujęcie 2 na warstwie Code: gotoAndPlay (2);
Kod ten utworzy pętlę pomiędzy ujęciami 2 i 3. 7. W ujęciu 1 na warstwie Code wpisz poniższe akcje: Direction = (Math.round(Math.random()*8))+1; Speed = (Math.round(Math.random()*10))+5;
Akcje te informują program, w którym kierunku i z jaką prędkością stworzonko ma zacząć się poruszać. Nasz zwierzak będzie się przesuwać w ośmiu kierunkach:
Rozdział 13-354
8. Następnie dodaj poniższe akcje w ujęcie 2 na warstwie Code: CreatureX = _x; CreatureY = _y;
Te akcje przechowują bieżącą pozycję X i Y stworzonka. 9. Poniżej istniejącego kodu wpisz następujący fragment: if (Direction CreatureY = _rotation = } if (Direction CreatureY = CreatureX = _rotation = } if (Direction CreatureX = _rotation = } if (Direction CreatureY = CreatureX = _rotation = } if (Direction CreatureY = _rotation = } if (Direction CreatureY = CreatureX = _rotation = } if (Direction CreatureX = _rotation = } if (Direction CreatureY = CreatureX = _rotation = }
Akcje if (Direction == ?) sprawdzają, w którym którą stronę zwierzak wskazuje, a następnie obracają go w tymże kierunku. 10. Następnie dodaj kolejną serię instrukcji if: if (CreatureX>480) { CreatureX = 480; Direction = (Math.random()*8)+1; Speed = (Math.random()*10)+5; } if (CreatureX<20) {
Rozdział 13-355
CreatureX = 20; Direction = (Math.random()*8)+1; Speed = (Math.random()*10)+5; } if (CreatureY>480) { CreatureY = 480; Direction = (Math.random()*8)+1; Speed = (Math.random()*10)+5; } if (CreatureY<20) { CreatureY = 20; Direction = (Math.random()*8)+1; Speed = (Math.random()*10)+5; }
Te akcje sprawdzają, czy zwierzak dotarł do krawędzi ekranu. Jeśli tak, wówczas przypiszą mu inny losowo wybrany kierunek ruchu i losowo wybraną prędkość. Dodamy również kolejny losowy element do ruchu stworzonka, który spowoduje, że w dowolnej chwili (z prawdopodobieństwem 1 na 30), zwierzak po prostu będzie kontynuować swój marsz w innym kierunku. 11. Dodaj ten krótki fragment kodu do poprzedniego bloku: DirectionChange = (Math.round(Math.random()*10)); if (DirectionChange == 1) { Direction = (Math.round(Math.random()*8))+1; Speed = (Math.round(Math.random()*10))+5; }
Jeśli chcesz, aby zmiana kierunku następowała częściej, wystarczy zastąpić 30 jakąś mniejszą liczbą. Zmiana tej wartości na przykład na 10 spowoduje, że ruchy stworzonka będą bardziej nieregularne i nieprzewidywalne. 12. Na koniec musimy aktualizować pozycję zwierzaka nowymi wartościami: _x = CreatureX; _y = CreatureY;
Te akcje kontrolują wszystkie ruchy stworzonka. Jeśli uruchomisz teraz film, zobaczysz, jaki zaprogramowałeś ruch zwierzaka — wyobraź sobie, że jest to mały robak z mnóstwem nóżek! Teraz dopiszemy jeszcze kilka dodatkowych akcji, aby umożliwić stworzonku zatrzymanie się na chwilę przed ponownym wyruszeniem w drogę. W ten sposób stworzymy wrażenie, że nasz wirtualny zwierzak zatrzymuje się, rozgląda się i zastanawia gdzie by tu teraz iść. 13. Upewnij się, że klip filmowy Creature jest otwarty i dodaj zwykłe ujęcie do ujęcia 20 na warstwie 1. Następnie wstaw ujęcie kluczowe w ujęciu 5 i ujęciu 20 na warstwie Code:
Dziura pomiędzy ujęciem 5 i 20 będzie naszą pauzą. 14. Aby mogła ona zadziałać, dodaj poniższy fragment kodu pod istniejącym skryptem w ujęciu 2 na warstwie Code: Pause = (Math.round(Math.random()*40))+1; if (Pause == 1) { gotoAndPlay (5);
Rozdział 13-356
}
Zmienna Pause otrzymuje losowo wybraną liczbę pomiędzy 1 i 40 i jeśli liczba ta równa jest 1, wówczas klip filmowy przeskakuje do ujęcia 5 i stworzonko zatrzymuje się na chwilę. W efekcie zwierzak ma jedną szansę na 40, że się zatrzyma. Jeśli chcesz ją zwiększyć, zmień warunek if w następujący sposób: if (Pause <=2) {
Ten kod zwiększy szansę zwierzaka na zatrzymanie się do 2. 15. Na koniec dodaj poniższą akcję w ujęciu 20 na warstwie Code: gotoAndPlay (1);
W ten sposób, po chwilowej przerwie, zwierzątko otrzyma nowy kierunek ruchu. Pod koniec tego ćwiczenia dodamy jeszcze stworzonku kilka innych zachowań, lecz wcześniej zajmijmy się interaktywnością. W tej sekcji zaprogramujemy dwa rodzaje interaktywności zwierzaka: pierwszy umożliwi nam podniesienie stworzonka i przenoszenie go, a drugi pozwoli nam na poruszanie bloku po ekranie. Jeśli stworzonko zderzy się z blokiem, potraktuje go jako twardy obiekt i nie będzie mogło przez niego przejść. 16. Upewnij się, że klip filmowy Creature jest otwarty i utwórz nową warstwę nad warstwą Code. Nazwij ją Button. 17. Teraz na warstwie Button utwórz drugie wypełnione kółko o takim samym rozmiarze jak zwierzak (40 na 40 pikseli) i umieść go tak, aby pokrywało stworzonko (nie martw się, nie zrobi mu żadnej krzywdy). Zaznacz nowe wypełnione kółko i przekształć je w przycisk o nazwie CreatureButton. 18. Zaznacz klip CreatureButton i otwórz go do edycji. Dodaj ujęcie kluczowe w stanie Hit, upewniając się, że wypełnione kółko nadal jest widoczne, a następnie usuń rysunek z pozostałych trzech stanów, tworząc w ten sposób niewidoczny przycisk na „grzbiecie” naszego robaka. 19. Powróć do klipu filmowego Creature, otwórz panel Object Actions dla klipu CreatureButton i dodaj w nim poniższy kod: on (press) { gotoAndStop (10); startDrag ("", false, 30, 30, 470, 470); } on (release, releaseOutside) { play (); stopDrag (); }
Ten kod zatrzymuje klip Creature gdy przycisk jest wciśnięty. Następnie aktywuje akcję startDrag, umożliwiając ci przeciąganie klipu filmowego. Po zwolnieniu przycisku klip Creature zostanie ponownie odtworzony, a akcja startDrag zatrzymana. Dlatego przenosimy ją do ujęcia 10, ponieważ chcemy utworzyć krótką pauzę zanim stworzonko będzie kontynuować swoją podróż po upuszczeniu go. Teraz utworzymy blok, którego będzie można przenosić po ekranie za pomocą kursora myszy. 20. Powróć do okna głównego filmu, utwórz nową warstwę i nadaj jej nazwę Block. Następnie narysuj wypełniony kwadrat o rozmiarze 80 na 80 pikseli na warstwie Block i przekształć go w klip filmowy o nazwie Block. Zaznacz klip filmowy Block i otwórz go do edycji. Rozdział 13-357
21. Jak już się z tym uporasz, zaznacz wypełniony kwadrat na warstwie 1 i przekształć go w przycisk o nazwie BlockButton. Następnie dodaj ujęcie do ujęcia 3 na warstwie 1 klipu Block. 22. Utwórz nową warstwę i nadaj jej nazwę Code. Na tej warstwie wstaw ujęcia kluczowe tradycyjnie w ujęciach 2 i 3. Teraz jesteśmy już gotowi na dodanie kilku akcji. Rozpoczniemy od tradycyjnej metody pętli pomiędzy ujęciami 2 i 3. 23. Dodaj poniższy kod w ujęciu 3 na warstwie Code: gotoAndPlay (2);
24. Teraz zabierzemy się za bardziej zaawansowany skrypt. Wpisz następujący fragment w ujęciu 2: BlockX = _x; BlockY = _y; CreatureX = _root.Creature._x; CreatureY = _root.Creature._y; if (CreatureX>BlockX-70) { if (CreatureXBlockY-60) { if (CreatureYBlockX+40) { if (CreatureY>BlockY-60) { if (CreatureYBlockY-70) { if (CreatureYBlockX-60) { if (CreatureXBlockY+40) { if (CreatureX>BlockX-60) { if (CreatureX
Ten fragment kodu sprawdza, gdzie znajduje się klip Creature, a każdy blok osadzonych instrukcji if kontroluje jeden bok bloku. Jeśli stworzonko jest blisko jakiegoś boku bloku, wówczas klip filmowy Creature zostaje zatrzymany, przechodzi do ujęcia 10 i ponownie zostaje odtworzony — w ten sposób powstaje przerwa, stwarzająca wrażenie, jakby zwierzak zastanawiał się, dokąd iść.
Rozdział 13-358
25. Aby umożliwić przeciąganie bloku kursorem myszy upewnij się, że klip filmowy Block jest otwarty, a następnie dodaj poniższy skrypt w panelu Object Actions dla przycisku BlockButton: on (press) { startDrag ("", false, 80, 80, 420, 420); } on (release, releaseOutside) { stopDrag (); }
Ten kod wykonuje podobną czynność jak przycisk, którego zastosowaliśmy do przeciągania zwierzaka, a także umożliwia przesuwanie bloku w dowolne miejsce na ekranie. Sposób, w jaki blok został zaprogramowany pozwala na umieszczenie kilku bloków jednocześnie na ekranie. 26. Otwórz bibliotekę i przeciągnij kilka kopii bloku na ekran. Jeśli uruchomisz teraz film zobaczysz, o co mi chodzi: każdy blok można przesuwać oddzielnie, a robak traktuje je wszystkie jak twarde obiekty:
Właśnie stworzyłeś prostego wirtualnego zwierzaka we Flashu. Przy odrobinie wyobraźni i testowania będziesz mógł zmodyfikować go i wykonać własnego Flashowego zwierzaka programując bardziej bogate graficznie otoczenie zwierzątka, w którym będzie się ono poruszać i odkrywać. Najlepszym sposobem na rozpoczęcie pracy jest zapisanie wszystkich zachować stworzonka na kartce papieru. Powodzenia i miłej zabawy. Zanim zaczniesz zmieniać program, nie zapomnij zapisać go w pliku o nazwie Vpet.fla. Odległość i połączenia
W tym ostatnim ćwiczeniu przedstawimy ci popularną technikę obliczania odległości pomiędzy dwoma klipami filmowymi i rysowania pomiędzy nimi linii. 1. I tym razem będziesz musiał utworzyć nowy film o rozmiarze 400 na 400 pikseli. Określ prędkość odtwarzania (Frame Rate) na 20 fps, parametrowi Grid Spacing przypisz wartość 10 pikseli i upewnij się, że pole wyboru Show Grid jest zaznaczone. 2. Narysuj wypełnione kółko o szerokości 20 na 20 pikseli, zaznacz je przekształć w klip filmowy o nawie Point.
Rozdział 13-359
3. Teraz zaznacz klip Point i otwórz go do edycji. Wewnątrz zaznacz wypełnione kółko i przekształć je w symbol przycisku o nazwie PointButton. 4. Zaznacz przycisk PointButton i wpisz w panelu Object Actions poniższe akcje: on (press) { startDrag ("", false, 20, 20, 380, 380); } on (release, releaseOutside) { stopDrag (); }
Ten kod umożliwi przeciąganie klipu po ekranie. 5. Powróć do okna głównego filmu, otwórz okno biblioteki i przeciągnij kolejną kopię klipu filmowego Point na scenę. Teraz powinny znajdować się na niej już dwie kopie tego klipu, jedną obok drugiej:
6. Nadaj tym kopiom klipu Point nazwy klonów, odpowiednio A i B. Linia łącząca te dwa klipy filmowe sama będzie również klipem. Jej rozmiary muszą być niezwykle precyzyjne, gdyż inaczej nie połączy ona poprawnie klipów Point. Jeśli przeczytałeś rozdział Michaela Bedara o efektach wizualnych w środowisku ActionScript, poznałeś już podobną technikę. 7. Na głównej listwie czasowej narysuj kwadrat o rozmiarze 100 na 100 pikseli, bez wypełnienia. Teraz narysuj linię biegnącą od górnego lewego do prawego dolnego rogu kwadratu.
8. Usuń kontur kwadratu uważając, aby nie usunąć narysowanej właśnie linii. W ten sposób na ekranie powinna pozostać tylko ukośna linia.
Rozdział 13-360
9. Zaznacz linię, przekształć ją w klip filmowy i nadaj mu nazwę Line. Zaznacz klip filmowy Line, a następnie zastosuj polecenie Edit, nie Edit in Place, aby otworzyć ten klip filmowy. 10. Teraz zaznacz linię i tak ją umieść, aby jej górny lewy punkt znalazł się na środku klipu filmowego. Najprostszym sposobem na wykonanie tego jest otwarcie panelu Info i przypisanie współrzędnym X i Y wartości 0 z zastosowaniem górnego lewego punktu początkowego:
11. Teraz powróć do okna głównego filmu, zaznacz klip filmowy Line i nadaj mu nazwę kopii Line. Ta linia jest istotna z wielu powodów: • Jej rozmiar wynosi 100 na 100 pikseli przy normalnym widoku, czyli 100%. Oznacza to, że jeśli zeskalujemy linię o daną wartość procentową, wiemy dokładnie, jak duża ona będzie. Na przykład, jeśli zeskalujemy ją o 50% na osi x i o 30% na osi y, wówczas rozmiar linii będzie wynosić 50 na 30 pikseli. • Możemy również odbić linię wzdłuż jej osi poprzez zastosowanie ujemnej wartości skali. Na przykład, jeśli zastosujemy skalę dla osi x wynoszącą 100%, linia zostanie odbita wzdłuż osi y:
•
Na scenie górny lewy punkt linii znajduje się w pozycji 0,0. Oznacza to, że możemy umieścić linię w dowolnym miejscu na scenie, a przez skalowanie linii, tak jak zrobiliśmy powyżej, będziemy dokładnie wiedzieć, gdzie znajduje się drugi koniec linii. Jest to niezwykle użyteczny i stosunkowo prosty sposób rysowania linii pomiędzy dwoma punktami. Teraz, skoro już wszystko przygotowaliśmy, możemy zająć się wpisywaniem kodu ActionScript. 12. Upewnij się, że znajdujesz się w oknie głównego filmu, a następnie utwórz nową warstwę o nazwie Code. Na tej warstwie wstaw ujęcia kluczowe w ujęcia 2 i 3, a także zwykłe ujęcie w ujęciu 3 na warstwie 1. 13. Dodaj poniższy kod do ujęcia 1 na warstwie Code:
Rozdział 13-361
_root.Line._visible = false;
Ten kod powstrzyma film przed wyświetleniem oryginalnego klipu filmowego Line po uruchomieniu go. 14. Następnie wpisz poniższe akcje do ujęcia 2 na warstwie Code: AX = _root.A._x; AY = _root.A._y; BX = _root.B._x; BY = _root.B._y; duplicateMovieClip ("Line", "NewLine", 1); _root.newline._x = AX; _root.newline._y = AY; _root.newline._xscale = BX-AX; _root.newline._yscale = BY-AY;
Te akcje przechowują współrzędne klipów filmowych A i B. Następnie powielają one, umieszczają i skalują klip filmowy Line za pomocą przechowanych współrzędnych tak, jak wytłumaczyliśmy wcześniej. 15. Teraz wystarczy jeszcze tylko dodać akcję pętli do ujęcia 3 na warstwie Code: gotoAndPlay (2);
W ten sposób ukończyłeś pierwszą część filmu. Jeśli go teraz uruchomisz, zobaczysz jaki efekt uzyskałeś.
Nie zapomnij zapisać film w pliku o nazwie Connect1.fla, ponieważ będzie on nam potrzebny w następnym ćwiczeniu. Więcej połączeń
Teraz pokażemy ci jak w prosty sposób można dodać więcej klipów filmowych Point do pliku Connect1.fla jedynie za pomocą kilku wierszy kodu ActionScript. 1. Po otwarciu pliku Connect1.fla wywołaj okno biblioteki przeciągnij kolejną kopię klipu filmowego Point na warstwę. Nadaj jej nazwę klonu C. 2. Dodaj poniższe pogrubione akcje do istniejącego kodu w ujęciu 2 na warstwie Code: AX = _root.A._x; AY = _root.A._y; BX = _root.B._x; BY = _root.B._y; CX = _root.C._x; CY = _root.C._y; duplicateMovieClip ("Line", "NewLine", 1); duplicateMovieClip ("Line", "NewLine2", 2); _root.newline._x = AX; _root.newline._y = AY; _root.newline._xscale = BX-AX; _root.newline._yscale = BY-AY; _root.newline2._x = BX; _root.newline2._y = BY; _root.newline2._xscale = CX-BX; _root.newline2._yscale = CY-BY;
Rozdział 13-362
Ten kod zapisuje współrzędne klipu C, powiela kolejny klip Line i tworzy linię pomiędzy klipami B i C. Jeśli teraz uruchomisz film zobaczysz, że dodane zostały do niego nowe klipy Point i Line:
Na koniec dodamy jeszcze tylko połączenie pomiędzy dwoma nie połączonymi klipami filmowymi Point. 3. W tym celu wpisz poniższe akcje do ujęcia 2 na warstwie Code: AX = _root.A._x; AY = _root.A._y; BX = _root.B._x; BY = _root.B._y; CX = _root.C._x; CY = _root.C._y; duplicateMovieClip ("Line", "NewLine", 1); duplicateMovieClip ("Line", "NewLine2", 2); duplicateMovieClip ("Line", "NewLine3", 3); _root.newline._x = AX; _root.newline._y = AY; _root.newline._xscale = BX-AX; _root.newline._yscale = BY-AY; _root.newline2._x = BX; _root.newline2._y = BY; _root.newline2._xscale = CX-BX; _root.newline2._yscale = CY-BY; _root.newline3._x = AX; _root.newline3._y = AY; _root.newline3._xscale = CX-AX; _root.newline3._yscale = CY-AY;
Ten nowy kod utworzy końcowe połączenie. Uruchom film, aby obejrzeć efekt:
W ten sposób ukończyłeś ostatnie ćwiczenie w tym rozdziale. Wystarczy jeszcze zapisać film w pliku o nazwie Connect2.fla, i już.
Co powinienem zrobić teraz? W tym rozdziale przygotowałeś kilka elementów dla bardziej zaawansowanych gier wykonanych we Flashu i interaktywnej zawartości witryn internetowych. Zanim zabierzesz się za tworzenie jakiejkolwiek interaktywnej zawartości we Flashu powinieneś usiąść sobie i zapisać wszystko, co chcesz zrobić w danym projekcie. Czy chcesz,
Rozdział 13-363
aby pasek menu był animowany, czy ma podążać za kursorem myszy, skakać po ekranie, czy też ma być zupełnie inny. Jeśli zamierzasz zaprogramować grę we Flashu, czeka cię o wiele więcej planowania. Przedstawimy ci teraz krótki opis kilku elementów typowych dla gry. Mamy nadzieję, że wskazówki te pomogą ci w podjęciu decyzji, jak zrealizować każdą część projektu, a w następnym rozdziale przeprowadzimy cię przez proces tworzenia kompletnej gry we Flashu od początku do końca.
Elementy typowej gry Poniżej zamieściliśmy wybór tradycyjnych zasad przestrzeganych w większości gier, włącznie z opisem gracza i przeciwników. Pamiętaj jednak, że nie musisz się kurczowo trzymać tej listy. Jeśli tylko znasz zasady, możesz je łamać. Gracz Postać gracza jest niezbędna w każdej grze, lecz można ją wprowadzić na wiele różnych sposobów. Możesz oglądać postać z boku, z góry, z tyłu, bądź też postrzegać grę oczami głównego bohatera z „pierwszo-osobowej perspektywy”. Postać gracza zazwyczaj posiada pewien poziom zdrowia, który zmniejsza się, gdy bohater zostaje zraniony przez przeciwnika, lub wpada w pułapkę. Zdrowie zostaje przywrócone przeważnie wówczas, gdy gracz zdobędzie apteczkę, lub jakiś inny rodzaj „zasilania”. W zależności do rodzaju gry, należy zdecydować, czy postać gracza będzie korzystać z broni. Jeśli tak, trzeba zastanowić się nad rodzajem broni, stopniem jej szkodliwości, ile amunicji zużywa i w jaki sposób można amunicję uzupełnić. Jeśli w twojej grze zastosujesz broń, zawsze lepiej wprowadzić ją już w trakcie gry, a nie od razu wyposażając gracza w całą broń już na początku. W trakcie gry możesz również umożliwić graczowi zwiększanie umiejętności postaci (maksymalna energia, siła, prędkość poruszania się i tak dalej). Wrogowie Typowa gra zawiera również przeciwników, którzy starają się zniszczyć gracza. Posiadają oni własną broń, poziomy zdrowia, a także samodzielnie się poruszają. Musisz zdecydować, w jaki sposób można wyeliminować przeciwnika, a jeśli jest on potężny, należy się zastanowić, czy składa się on z jednej czy z kilku części, które również trzeba zniszczyć. Przeciwnicy zazwyczaj w trakcie gry stają się więksi i niebezpieczniejsi i, jak się przekonasz, w większości gier, na końcu każdego poziomu, wprowadzany jest również „szef” (wielki, trudny do pokonania wróg), a także super wielki szef na końcu gry. Poziomy Poziomy w grze są odpowiedzialne za tworzenie atmosfery, miejsca akcji (kosmos, dżungla, podziemna baza wojskowa, czy też kilka miejsc). W dobrej grze zawsze znajdziesz różne etapy (lub poziomy), które gracz musi przejść aby skończyć grę. Podczas przechodzenia z jednego poziomu do drugiego stopień ich trudności powinien stopniowo wzrastać, a przeciwnicy na każdym poziomie również powinni stawać się coraz silniejsi. Wszystkie poziomy w grze powinny charakteryzować się jakimś końcowym celem, do którego gracz musi dotrzeć, aby móc ukończyć dany poziom. Na przykład, jednym z zadań gracza może być pokonanie wszystkich przeciwników na ekranie, wykonanie pewnego zadania lub kilku zdań, lub uzyskanie określonego wyniku.
Rozdział 13-364
Należy zdecydować również z ilu poziomów będzie się składać gra i czy gracz może powrócić do któregoś z nich. Większości gier gracz może jedynie przechodzić przez poziomy w linearnym procesie. Dobre gry pozwalają jednak graczowi na powrócenie do poprzednich poziomów, aby odkryć tajemnice, do których nie miał dostępu wcześniej. Programowanie nie linearnej gry jest trudniejsze, lecz efekty są tego warte, gdyż dzięki temu gracz czuje się wolny i usatysfakcjonowany. Obiekty i zagrożenia Obiektami w grze może być cokolwiek, od krzaków do całej planety. Wszystko zależy od typu gry, jaką programujesz. Obiekty stosuje się z wielu różnych powodów. Na przykład, gracz otrzymuje dodatkowe punkty, po zniszczeniu danego obiektu odsłonięte zostają ukryte przedmioty do zebrania, lub też za wielką skałą, którą można rozbić, jeśli gracz wystarczająco długo w nią strzela, znajduje się wejście do tajemniczego poziomu. Zagrożenia w grze zmniejszą energię gracza, jeśli zetknie się z którymś z nich. Niektóre zagrożenia niszczą gracza całkowicie, a ich wybór po raz kolejny zależy od ciebie. Opowieść Każda przyzwoita gra powinna opowiadać jakąś historię. Najbardziej popularne i uzależniające gry charakteryzują się opowieścią i fabułą, która coraz bardziej wciąga gracza w świat gry. Nawet jeśli tworzysz prostą strzelaninę, warto dodać do niej jakąś historię, którą może być zawiła, wielowątkowa fabuła z licznymi możliwościami i zakończeniami, czy też stary model „uratowania świata przed najazdem obcych”. Jest jedna cecha, niezwykle charakterystyczna dla graczy — nieufność. Pamiętaj, że nie ważne jak bardzo fantastyczna staje się opowieść, jeśli tylko jest spójna i wydaje się przekonywująca. Takie wyczucie gry nabędziesz z doświadczeniem i często doprowadza ono do dziwacznych sytuacji — ludzie szybko godzą się z tym, że małpa lata, lecz jedynie wówczas, gdy jej latanie wydaje się w porządku. Możesz również dodać do gry inne postaci, które gracz będzie spotykać w czasie jego podróży. Pomogą one w kontynuowaniu opowieści i zachęcą gracza do robienia nowych znajomości. Możesz również umożliwić graczowi kontrolowanie tych nowych postaci prze krótki czas, lub przez całą grę. I to już wszystko, zakończyliśmy ten rozdział. Mamy nadzieję, że ćwiczenia w nim przedstawione pomogą ci w określeniu kilku zasad i elementów, które zastosujesz w prostych grach i ułatwią tworzenie nawet bardziej zdumiewającej zawartości twoich witryn internetowych. Pamiętaj, że, przede wszystkim, głównym kluczem do sukcesu jest wyobraźnia.
Rozdział 13-365
Rozdział 14 Programowanie gier Właśnie natknąłeś się w Sieci na coś, co na pierwszy rzut oka wygląda na całkiem niezłą grę wykonaną we Flashu. Czekasz, aż się gra załaduje, czekasz jeszcze trochę... wreszcie się załadowała, a ty wciskasz przycisk „start”. To, co wyświetla się przed tobą, nawet nie przypomina gry. Możesz jedynie strzelać, masz przeciwko sobie tylko dwóch wrogów, na u góry planszy świecą się paskudne kontrolery gry! Czy nie byłoby wspaniale mieć grę wykonana we Flashu, która wyglądałaby i działała jak prawdziwa gra? Właśnie taką stworzysz! Zamierzamy wykonać grę w stylu dobrze znanych strzelanin, lecz z jajem. Oprócz zastępów wroga, które mrowiąc się na ekranie zbliżają się do ciebie, będzie również niezwyciężona mina, która bezustannie krąży wokół twojego statku czekając tylko aż uderzy i zniszczy ciebie. Na szczęście nie tylko dysponujesz swoim zaufanym miotaczem, lecz również kolekcją spadających z nieba bonusów, które możesz zbierać aby tymczasowo zasilić twój statek. Strzeż się jednak, gdyż z nieba leci również zły bonus, który spowolni twój statek i umożliwi nadciągającym hordom przeciwnika ukrócić twoje marzenia o wysokim wyniku. Bądź dzielny.
Kosmiczna gra Odpal plik Cosmic_final.swf z płyty CD-ROM i zagraj kilka razy w grę. Poznaj podstawową przesłankę gry i obsługę różnych elementów. A oto twój cel:
Aby odrobinę ułatwić sobie życie, przygotowaliśmy już dla ciebie rysunki, które zastosujesz w grze. Wykonaliśmy to za ciebie, abyś nie musiał spędzać długich godzin na rysowaniu ich, Rozdział 14-366
a następnie tworzeniu filmu. Zamiast tego możesz od razu zabrać się za kodowanie. Zastosowane rysunki są bardzo proste, i z łatwością możesz wykonać własne, lub zmodyfikować istniejące. Zajmiemy się tym na końcu rozdziału, gdyż przy tworzeniu rysunków należy wziąć pod uwagę kilka ich wytycznych (rozmiar i tak dalej), o których musisz pamiętać podczas dostosowywania filmu do swoich potrzeb. Zanim zaczniemy załaduj z płyty CD-ROM plik Cosmic_final(no_code).fla, który stanowi szkielet gry, włącznie z wcześniej przygotowanymi symbolami rysunków. Po otworzeniu wspomnianego pliku pierwsza rzecz, jaka się rzuca w oczy, to oczywiście podział filmu na dwie sceny — START i GAME. Scena startowa (START) zawiera instrukcje i wprowadzenie do gry:
W tej scenie wystarczy kliknąć we wskazanym miejscu aby przejść do następnej, która rozpoczyna grę. Scena ta składa się z trzech warstw: • • •
TEXT/GFX — zawiera cały tekst wyświetlany na scenie, MOUSE — zawiera klip filmowy Mover, który zastępuje kursor myszy, CODE — będzie (wkrótce!) zawierać cały kod dla omawianej sceny.
Podczas tworzenia własnych gier, warto przygotować wstępną scenę podobną do tej, dzięki której gra rozpoczyna się wówczas, gdy gracz jest już gotowy. Ponadto wstępna scena daje umożliwia zarządzanie czasem ładowania dużych gier poprzez zajęcie uwagi użytkownika w trakcie pobierania gry. A oto scena druga — GAME:
Rozdział 14-367
Tutaj odbywa się cała przygoda. Scena ta składa się z sześciu warstw: • •
• • • •
CODE — na tej warstwie umieścimy kod samej gry. Zawiera ona również przycisk, na którego klika użytkownik, aby ponownie rozpocząć grę po rozbiciu statku. GFX1 — Zawiera główne rysunki zastosowane w grze — statek kosmiczny gracza w środku, dwóch przeciwników umieszczonych poza sceną u góry ekranu i biały promień lasera poza sceną po prawej stronie. Ponadto umieściliśmy tutaj również tekst obwieszczający koniec gry („Game Over”) i końcowy wynik gry. GFX2 — Zawiera zmodyfikowany kursor myszy. GFX3 — Zawiera pole tekstowe wyświetlające bieżący wynik gracza, a także krótkotrwały biało-przezroczysty efekt, który spowoduje błysk ekranu w momencie zniszczenia statku gracza. GFX4 — Zawiera animację eksplozji statku gracza umieszczona poza sceną w górnym lewym rogu. GFX5 — Zawiera rysunki bonusów, również poza sceną u góry.
Po otwarciu biblioteki zobaczysz listę składającą się z 19 pozycji, z których większość to klipy filmowe. Do niektórych z nich dodamy również odrobinę kodu. W trakcie pracy nad grą wyjaśnimy ci kiedy i gdzie należy ten kod wprowadzić. Nadaliśmy już wszystkim elementom na scenie nazwy kopii. Poniżej znajdziesz listę z opisami tych obiektów i, w razie konieczności, wyjaśnieniem ich działania: • • • • • • • •
No dobrze, starczy tego wprowadzenia. Zabierzmy się teraz za przygotowanie kodu.
Rozdział 14-368
Kodowanie sceny startowej
Zaczniemy od dodania kodu ActionScript na do listwy czasowej scen START i GAME. Działanie kodu wpisywanego przez ciebie ActionScript wytłumaczymy w trakcie pracy. Wskazówki te powinny ci ułatwić modyfikowanie kodu gry w ramach przygotowania do tworzenia własnych gier we Flashu. 1. Przejdź do sceny START i dodaj poniższy kod ActionScript do ujęcia 1 na warstwie Code: fscommand ("allowscale", "true"); fscommand ("showmenu", "false");
Akcja fscommand pozwala na wywołanie metod środowiska JavaScript w przeglądarce internetowej lub odtwarzaczu Flasha. Zastosowane przez nas dwa polecenia są charakterystyczne dla odtwarzacza Flasha i w nie wywierają żadnego wpływu na przeglądarkę. Pierwsze z nich umożliwia skalowanie filmu, a drugie zapobiega przez wywoływaniem menu kontekstowego przez użytkowników prawym kliknięciem myszy w filmie. 2. Następnie wpisz dwa kolejne wiersze: Mover.startDrag(true); Mouse.hide();
Ten kod przymocowuje klip filmowy Mover do środka kursora myszy, a następnie ukrywa kursor pozostawiając widocznym tylko klip filmowy. 3. Teraz w ujęciu 5 na warstwie Code wpisz: stop ();
To polecenie chyba nie wymaga wyjaśnień! Możesz teraz przetestować ten pierwszy etap filmu. Po uruchomieniu klipu powinien on wyświetlać tylko ekran powitalny, a ty będziesz mógł poruszać zmodyfikowanym kursorem myszy po ekranie. Nie jest to zbytnio ekscytujące, lecz tego typu przygotowania są niezbędne. Następnie dodamy kod umożliwiający przejście do następnej sceny. 4. Po powrocie do głównego filmu zauważysz przezroczysty przycisk pokrywający tekst „click here to start”. Zaznacz go, wywołaj okno Object Actions i wpisz w nim poniższy skrypt: on (press) { gotoAndPlay (“GAME”, 1); }
Kod ten, po kliknięciu na przycisk, nakazuje filmowi przejście do sceny GAME i rozpoczęcie odtwarzania od pierwszego ujęcia. Uwierz lub nie, lecz w ten sposób zakończyłeś kodowanie sceny START. W końcu jest to jedynie obszar przejściowy wyświetlany w oczekiwaniu na rozpoczęcie gry przez użytkownika. Teraz przejdziemy do następnej, znacznie bardziej skomplikowanej sceny. Kodowanie sceny gry
Jak obiecaliśmy, najpierw dodamy kod do listwy czasowej, a następnie zaprogramujemy klipy filmowe. Warstwa Code znajduje się u dołu listy warstw w scenie GAME. 1. W ujęciu 1 na warstwie Code wpisz poniższy skrypt:
Rozdział 14-369
Mover.startDrag(true);
Taki sam kod zastosowaliśmy w scenie START. Warto zapamiętać, że niektóre polecenia, takie jak na przykład Mouse.hide, oddziałują na każdą scenę w filmie, natomiast bardziej szczegółowe polecenia, takie jak startDrag należy wydawać ponownie w różnych kontekstach, w których mają zadziałać. 2. Teraz nadszedł już czas na rozpoczęcie właściwego kodu. Wpisz poniższy fragment poniżej akcji startDrag: PlayerShot._visible = 0; EnemyNum=-1; EnemySpeed=2; GameScore=0; Enemy.gotoAndStop(31); PlayerShip.CraftSpeed=10; Mover.Laser=0; Shield=0;
W tym fragmencie konfigurujemy wszystkie elementy konieczne do rozpoczęcia gry. Najpierw ukrywamy klip PlayerShot, aby był niewidoczny. Dzięki temu gracz nie widzi lasera startującego z góry ekranu, gdy gracz chce go użyć. Następnie inicjalizujemy kilka zmiennych dla gry. EnemyNum służy do powielania wrogów, co zobaczysz później. EnemySpeed określa początkową prędkość przeciwników, a GameScore zeruje wynik gracza. Następne polecenie powoduje przejście i zatrzymanie się klipu Enemy w jego ostatnim ujęciu. W ten sposób gracz nie będzie widział tego klipu na początku gry. Klip filmowy Enemy jest również klipemrodzicem, którego zastosujemy do powielenia pozostałych wrogów. Trzy zmienne u dołu, CraftSpeed, Laser i Shield działają wraz z bonusami, które omówimy w dalszej części rozdziału. 3. Po dokonaniu konfiguracji możemy zabrać się za produkowanie wrogów, do których gracz będzie strzelać. W tym celu dodaj poniższy skrypt do ujęcia 2: EnemyNum=EnemyNum+1; duplicateMovieClip ("_root.Enemy", "Enemy"+EnemyNum, EnemyNum+100); setProperty ("Enemy"+EnemyNum, _x, random(400)+50); if (EnemyNum>6){ PlayerDeath = false; gotoAndPlay (19); }
Jest to główny kod powielania wrogów. Pierwszy wiersz zwiększa wartość zmiennej EnemyNum, którą zainicjalizowaliśmy w ujęciu 1. Zmienną tą zastosujemy do zindywidualizowania wrogów. Akcja duplicateMovieClip powiela klip filmowy Enemy, a następnie zmienia jego nazwę. Nowa nazwa składa się z członu “Enemy” i wartości zmiennej EnemyNum. Na przykład, jeśli wartość zmiennej EnemyNum wynosi 5, wówczas nazwa powielonego wroga będzie Enemy5. Polecenie setProperty losowo umieszcza nowego wroga gdzieś u góry ekranu. Szerokość filmu wynosi 500 pikseli, a nowemu klipowi filmowemu przypisaliśmy pozycję na osi X pomiędzy 50 i 449. W ten sposób powstrzymujemy nowych wrogów przed wyświetleniem zbyt blisko krawędzi ekranu. Instrukcja if, po umieszczeniu sześciu przeciwników na ekranie, powoduje przejście listwy czasowej do ujęcia 19. W ten sposób dajemy graczowi na początku gry „cudowną” chwilę, w której nie można go zabić. Gdy ta chwila minie, przypisujemy zmiennej PlayerDeath wartość false, czyniąc go śmiertelnym. Teraz zamkniemy to ujęcie w pętli, aby ciągle powstawali nowi wrodzy. Rozdział 14-370
4. W ujęciu 18 na warstwie Code dodaj poniższy kod: gotoAndPlay (2);
5. Utworzyliśmy pętlę, która przechodzi do ujęcia 19 po sześciokrotnym odtworzeniu się, więc lepiej będzie, jak wpiszemy tam trochę kodu. Dodaj ten fragment w ujęciu 19: if (PlayerDeath==true) { GameScore=_root.ScoreMovie.GameScore; PlayerShipX=_root.PlayerShip._x; PlayerShipY=_root.PlayerShip._y; gotoAndPlay (21); }
Ten kod kieruje listwę czasową do ujęcia 21 jeśli zmiennej PlayerDeath przypisana jest wartość true, co oznacza, że jakiś wróg zniszczył gracza. W takiej sytuacji końcowy wynik zostaje zapisany w zmiennej GameScore. Wynik odczytywany jest z klipu filmowego ScoreMovie, który wyświetla bieżący wynik u dołu ekranu. Zmienne PlayerShipX i PlayerShipY są skonfigurowane w ten sposób, że klip filmowy PlayerShipExplosion zostaje przeniesiony na właściwą pozycję po zakończeniu gry. 6. W ujęciu 20 na warstwie Code wpisz poniższy fragment skryptu: gotoAndPlay (19);
To polecenie po prostu tworzy pętlę pomiędzy ujęciami 19 i 20 podczas odtwarzania gry. Jak tylko wróg trafia w statek gracza, następuje koniec gry, a listwa czasowa przechodzi do ujęcia 21, które teraz zakodujemy. 7. W ujęciu 21 dodaj poniższy kod: PlayerShipExplosion._x=PlayerShipX; PlayerShipExplosion._y=PlayerShipY; PlayerShipExplosion.gotoAndPlay (1); Num=-1; do { Num=Num+1; setProperty ("_root.Enemy"+Num, _visible = 0); } while (Num<15); Powerups._visible = 0;
Dwa górne wiersze ustawiają pozycję x i y klipu PlayerShipExplosion na końcową pozycję klipu PlayerShip, która zdefiniowaliśmy wcześniej w ujęciu 19. Wówczas klip filmowy PlayerShipExplosion odtwarzany jest z tej pozycji. Następnie inicjalizujemy nową zmienną o nazwie Num. Zastosujemy ją jako licznik dla pętli do...while. Polecenie do będzie kontynuowało ciągłe odtwarzanie gry wartość zmiennej Num jest mniejsza od 15. Akcja setProperty w obrębie tej pętli powoduje ukrycie na ekranie klipów filmowych wroga po zniszczeniu statku gracza. Ostatni wiersz ukrywa główny film Powerups, gotowy na rozpoczęcie nowej gry. 8. Aby skończyć już wpisywanie kodu dla głównej listwy czasowej dodaj poniższy skrypt do ujęcia 30 na warstwie Code: PlayerDeath=false; Mouse.show(); stop();
Rozdział 14-371
Ten kod przypisuje zmiennej PlayerDeath wartość false i powoduje ponowne wyświetlenie kursora myszy. Polecenie stop zatrzymuje film na końcowym ekranie, dopóki nie zostanie wciśnięty przycisk „click here to retry”. 9. Jako ostatnia poprawka, dodaj poniższy kod do przycisku pokrywającego tekst „click here to retry”: on (press) { gotoAndPlay ("START", 1); }
W ten sposób, po wciśnięciu przycisku, gra powraca do początkowego ekranu tytułowego. Tyle jeśli chodzi o kod dla głównej listwy czasowej. Jeśli przetestujesz teraz film okaże się, że nie dzieje się w nim zbyt wiele. Statek gracza będzie stać w jednym miejscu i świecić, podobnie jak przeciwnicy. Ma to pewien urok, lecz wydaje się brakować grze możliwości grania w nią. Dodamy ją w formie kodu ActionScript do klipów filmowych w całych filmie. Kodowanie klipów filmowych
Czas na zaprogramowanie najważniejszej części gry, czyli klipów filmowych. Najprostszym sposobem na to jest odnalezienie odpowiedniego klipu w bibliotece i otworzenie go do edycji dwukrotnym kliknięciem myszy. Pamiętaj, że wszystkim klipom filmowym na scenie nadaliśmy już nazwy kopii, więc teraz wprowadzimy dla nich tyko kod. Rozpocznijmy od jednego z nieprzyjaciół: Enemy_One_B:
Są to główni antagoniści w grze. Najpierw spadają w dół ekranu z iście lemmingowym fatalizmem, odwracając się, aby zetknąć się twarzą w twarz z ich niszczycielem. Lecz po wyeliminowaniu jednego wroga, kolejne, coraz inteligentniejsze, wlatują na jego miejsce. 1. Kliknij dwukrotnie na klipie filmowym Enemy_One_B, aby otworzyć go do edycji. Ponownie zobaczysz na listwie czasowej warstwę Code, na której wpiszemy kod ActionScript. W ujęciu 1 dodaj poniższy skrypt: EnemySpeedY=2; EnemySpeedX=0;
Ten kod inicjalizuje zmienne, które zastosujemy dla statków wroga. Zmienna EnemySpeedY reprezentuje prędkość, z którą wróg porusza się w dół ekranu. W trakcie gry będziemy zwiększać tą wartość aby przeciwnicy poruszali się coraz szybciej. Zmienna EnemySpeedX wykonuje mniej więcej to samo, tyle że kontroluje prędkość, z którą przeciwnicy poruszają się w poprzek ekranu w kierunku gracza. Zauważ, że ten ruch rozpoczyna się od 0, więc na początku wrogowi po prostu spadają pionowo w dół ekranu, stwarzając graczowi złudne poczucie bezpieczeństwa. 2. W ujęciu 2 na warstwie Code wpisz następujący fragment kodu: Death=false; EnemyY=EnemyY+EnemySpeedY;
Rozdział 14-372
EnemyX=_x; if (EnemyY>400) { EnemyY=0; }
Zmienna Death przechowuje stan klipu filmowego wroga i po zniszczeniu przeciwnika przypisywana jest jej wartość true. Wartość zmiennej EnemyY wzrasta o wartość zmiennej EnemySpeedY i służy do nadania wrogowi pionowego ruchu. Jeśli wartość zmiennej EnemyY dochodzi do 400 lub przekracza tą liczbę oznaczając, że obiekt dotarł do dołu ekranu, wówczas sama zeruje się i powraca do góry ekranu, gdzie ponownie rozpoczyna spadanie. 3. Poniżej wpisz kolejny fragment kodu: PlayerShipX=_root.PlayerShip._x; if (EnemyX>PlayerShipX) { EnemyX=EnemyX-EnemySpeedX; } if (EnemyX
Ta sekcja kodu kontroluje ruch wroga w kierunku gracza. Zmienna PlayerShipX najpierw zostaje ustawiona na pozycję X klipu filmowego PlayerShip na głównej listwie czasowej. Polecenia if służą do zmiany pozycji wroga za pomocą zmiennej EnemySpeedX: jeśli wróg znajduje się po prawej stronie gracza, wówczas będzie się poruszać w lewo, i vice versa. Ponadto, im większa jest wartość zmiennej EnemySpeedX, tym szybciej przeciwnik będzie się poruszać wzdłuż osi x w kierunku gracza. 4. Na koniec obiekty wroga należy jeszcze przesunąć do ich nowej pozycji. W tym celu umieść poniższy kod w ujęciu 2: this._x=EnemyX; this._y=EnemyY; this._rotation=(EnemyX-PlayerShipX);
Nakazaliśmy również wrogowi obrócić się w stronę gracza. Dokonaliśmy tego poprzez proste obliczenie, które odrobinę wyolbrzymi rotację, lecz stworzy dzięki temu lepsze wrażenie. 5. Następnie wpisz poniższy kod w ujęciu 3 na warstwie Code: PlayerShipX = _root.PlayerShip._x; PlayerShipY = _root.PlayerShip._y; EnemyX = _x; EnemyY = _y; if (EnemyXPlayerShipX-20) { if (EnemyY>PlayerShipY-20) { if (EnemyY
Jest to główny kod kolizji wroga i gracza. Zmienne PlayerShipX i PlayerShipY zostają najpierw ustawione na pozycje x i y klipu filmowego PlayerShip. Zmienne EnemyX i EnemyY ustawiamy na bieżącą pozycję klipu filmowego Enemy, w obrębie Rozdział 14-373
którego są uruchamiane. Następnie polecenia if sprawdzają, czy wróg zajmuje to samo miejsce co gracz. Końcowa instrukcja if sprawdza, czy gracz posiada obecnie aktywny bonus Shield. Jeśli gracz uderzył we wroga, a jego statek nie posiada osłony, wówczas zmiennej PlayerDeath w scenie GAME przypisana zostaje wartość true. Ujęcie 19 w scenie GAME ciągle sprawdza, czy wartość ta została przypisana zmiennej PlayerDeath, a jeśli tak, to wówczas wskaźnik odtwarzania przesuwany jest na ekrany wybuchu i zakończenia gry. Polecenie gotoAndPlay powoduje przejście listwy czasowej klipu filmowego do ujęcia 2 i kontynuuje tworzenie pętli aktualizując pozycję wroga i sprawdzając czy trafił on w gracza. Zwróć uwagę, że Flash 5 obsługuje teraz polecenie w środowisku ActionScript, przeznaczone do wykrywania kolizji — hitTest. Mimo, że wydaje się oczywiste, że powinniśmy zastosować to polecenie w naszej grze, gdyż kod dla tego polecenia jest o wiele prostszy i krótszy... if (this.hitTest(_root.PlayerShip) && _root.Shield==0 { _root.PlayerDeath=1; }
...gdy wypróbowaliśmy go, uzyskane efekty nie były jednak równie dobre jak te utworzone dzięki instrukcjom if, które zastosowaliśmy w ukończonej grze. Zastosowanie ramki ograniczającej spowolniło grę, a ponadto utworzyło wykrywanie kolizji w stylu komputerów Spectrum. Gdy w miejsce ramki ograniczającej użyliśmy bezpośrednich współrzędnych, wykrywanie następowało zbyt późno, co powodowało, że statek gracza znajdował się już nad wrogiem zanim polecenie hitTest zostało wykonane. Zachęcamy cię jednak do wypróbowania różnych metod w twoich własnych grach. Problem ten można obejść poprzez wykonanie mniejszego klipu filmowego umieszczonego za wrogiem i zastosowanie go, zamiast samego przeciwnika, do wykrywania kolizji.
6. Jeśli przyjrzysz się warstwie GFX zauważysz automatyczną animację pomiędzy ujęciami 4 i 11. Jest ona odtwarzana po zniszczeniu wroga. W ujęcie 4 na warstwie Code wpisz poniższy fragment kodu: Death = true; _root.ScoreMovie.GameScore += 10;
Klip filmowy Enemy przejdzie do tego ujęcia tylko wówczas, gdy nakaże mu to klip filmowy PlayerShot. Gdy klip wroga znajduje się w tym ujęciu oznacza to, że został zestrzelony przez gracza i zniszczony. Ten fragment kodu przypisuje zmiennej Death wartość 1 i dodaje 10 do wartości zmiennej GameScore w klipie filmowym ScoreMovie, aktualizując w ten sposób wynik. Jest to po prostu krótszy sposób na wyrażenie instrukcji _root.ScoreMovie.GameScore = _root.ScoreMovie.GameScore + 10. 7. Po zniszczeniu przeciwnika, chcemy, aby kolejny pojawił się u góry ekranu. Zamiast usuwać stary klip filmowy i powielając nowy, przetworzymy go umieszczając z powrotem u góry ekranu. Dodaj poniższy kod do ujęcia 12 na warstwie Code: _root.PlayerDeath = false; EnemySpeedY += 0.5; EnemySpeedX = EnemySpeedY/3; this._y = -20; this._x = random(400)+50; EnemyY = -20; gotoAndPlay (2);
Gdy gracz zestrzela wroga, ten kod zwiększa wartość zmiennych EnemySpeedY i EnemySpeedX i restartuje wroga u góry ekranu. W ten sposób wróg po każdym zestrzeleniu staje się coraz szybszy. Następnie rozpoczyna swój ruch, a wykrywanie kolizji ponownie tworzy pętlę z ujęcia 2. Rozdział 14-374
No to pierwszego wroga mamy już z głowy. Jeśli przetestujesz teraz film, zobaczysz przeciwnika spadającego w dół ekranu. Jeśli uda mu się zderzyć z klipem filmowym PlayerShip, film powinien przejść do ekranu końca gry. Nadszedł już czas na zaprogramowanie drugiego wroga, więc bibliotece dwukrotnie kliknij na klipie filmowym Enemy_Two_B i otwórz go. Enemy_Two_B:
Jest to niezniszczalna mina przeciwnika, która porusza się wokół statku gracza usiłując zderzyć się z nim i zniszczyć go. Jest ona tylko jedna, więc nie będziemy potrzebować kodu do powielania jej, lecz z powodu jej złożoności niezbędny będzie dodatkowy kod dla zaprogramowani jej ruchu. 1. W ujęciu 1 na warstwie Code wpisz poniższy kod: MineSpeedX = 0; MineSpeedY = 0; MineX = _x; MineY = _y; MineMax = 1;
Jak zwykle, w ujęciu 1 inicjalizujemy główne zmienne, które będą używane przez minę. Zmienne MineSpeedX i MineSpeedY określają wstępną prędkość ruchu wroga, a zmienne MineX i MineY przechowują jego początkowe pozycje x i y. Zmienna MineMax określa wstępną maksymalną prędkość wroga. 2. Teraz w ujęciu 2 zakodujemy ruch miny. Podzielimy ten kod na mniejsze części, aby łatwiej było wytłumaczyć jego działanie. Rozpocznij od wpisania poniższego fragmentu: PlayerShipX = _root.PlayerShip._x; PlayerShipY = _root.PlayerShip._y;
Te dwa wiersze zapisują i przechowują pozycję klipu filmowego PlayerShip na ekranie. Zastosujemy do rozpracowania, gdzie znajduje się statek gracza w stosunku do wroga. 3. Wpisz następną sekcję kodu ActionScript, która kontroluje ruch miny. if (MineXPlayerShipX) { MineSpeedX = MineSpeedX-.3; } if (MineYPlayerShipY) { MineSpeedY = MineSpeedY-.3; } if (MineSpeedX>MineMax) { MineSpeedX = MineMax;
Rozdział 14-375
} if (MineSpeedX<-MineMax) { MineSpeedX = -MineMax; } if (MineSpeedY>MineMax) { MineSpeedY = MineMax; } if (MineSpeedY<-MineMax) { MineSpeedY = -MineMax; }
Ten kod sprawdza pozycję wroga i pozycję gracza, a następnie dopasowuje odpowiednio ruch przeciwnika. Wróg zawsze będzie starał się poruszać w kierunku statku gracza. 4. Teraz zastosujemy obliczenia, których dokonaliśmy dla aktualnej pozycji wroga na ekranie. Dodaj następujący kod poniżej już istniejącego: MineX = MineY = this._x this._y
Zmienne MineX i MineY zostają wyregulowane za pomocą zmiennych MineSpeedX i MineSpeedY, które zdefiniowaliśmy w poprzednim fragmencie kodu. Następnie zostają użyte w dwóch ostatnich wierszach do aktualizacji pozycji wroga. 5. Dotarliśmy w ten sposób do ostatniego fragmentu kodowania wroga. To ujęcie zawiera podobny kod wykrywania kolizji do tego, jakiego zastosowaliśmy dla pierwszego przeciwnika. Poniższy kod wpisz w ujęciu 3 na warstwie Code: MineMax = MineMax+0.025; if (MineMax>15) { MineMax = 2; } PlayerShipX = _root.PlayerShip._x; PlayerShipY = _root.PlayerShip._y; EnemyX = _x; EnemyY = _y; if (EnemyXPlayerShipX-15) { if (EnemyY>PlayerShipY-15) { if (EnemyY
Pierwszy wiersz zwiększa wartość zmiennej MineMax o 0.025 po każdej aktywacji ujęcia. Pamiętaj, że im większa jest wartość zmiennej MineMax, tym szybciej porusza się wróg. Jeśli prędkość przeciwnika jest zbyt wielka, zostaje ona zmniejszona do 2. W ten sposób nie tylko zapewniamy, że mina nie stanie się zbyt szybka dla gracza, lecz również zapobiegamy prze wystrzeleniem jej w kosmos. Reszta kodu jest dokładnie taka sama jad dla innych wrogów i służy do wyszukiwania kolizji z graczem. Jeśli kolizja następuje, wówczas zmiennej PlayerDeath w scenie GAME przypisana zostaje wartość 1, a listwa czasowa wroga przechodzi do ujęcia 4. W omawianym kodzie wpisaliśmy również instrukcję if, która sprawdza, czy osłona gracza jest aktywna czy nie, podobnie jak robiliśmy to wcześniej. Rozdział 14-376
Jeśli przetestujesz teraz film, zauważysz na ekranie już dwa typy przeciwnika atakujące bezbronnego gracza: jeden, który spada w dół ekranu w kierunku gracza, i drugi, który krąży wokół jego statku, drwiąc z niego, zanim nie rozbije się o niego i zakończy grę. Mover
Klip Mover jest to krzyżyk, który zastępuje kursor myszy. Gracz porusza myszą aby wskazać kierunek, w jakim ma przesunąć się statek. To opóźnienie nadaje dodaje grze więcej realizmu. Zauważysz, ile różnicy to sprawia, gdy zagrasz w grę i zbierzesz pierwszy bonus prędkości. Druga, lecz nie mniej ważna, funkcja klipu Mover to przechowywanie przycisku umożliwiającego graczowi strzelanie. 1. Dwukrotnie kliknij w bibliotece na klipie filmowym Mover aby go otworzyć. Na warstwie Button zobaczysz mały okrągły przycisk pokrywający krzyżyk. Zaznacz go, a następnie wywołaj okno Object Actions i dodaj poniższy kod: on (press) { gotoAndPlay (2); }
Ten kod po prostu przenosi listwę czasową do ujęcia 2 po każdorazowym wciśnięciu przycisku. Oznacza to, że gracz wcisnął przycisk myszy i chcesz wystrzelić pocisk ze statku. 2. Teraz przejdź na listwę czasową klipu filmowego Mover i odnajdź warstwę Code. Dodaj poniższy wiersz w ujęcie 1: stop ();
To polecenie jest proste, lecz bardzo ważne. Gdybyśmy go tutaj nie umieścili, statek strzelałby bez przerwy. Po wciśnięciu przycisku myszy statek rozpocząłby strzelanie, które trwałoby do samego końca gry. Ta akcja po prostu zatrzymuje listwę czasową na ujęciu 1. Jeśli chcesz dodać później funkcję automatycznego strzelania do gry, będziesz musiał wrócić właśnie do tego fragmentu kodu. 3. Następnie dodaj poniższy kod do ujęcia 2, który umożliwi strzelanie ze statku: ShotNum = ShotNum+1; if (ShotNum>10) { ShotNum = 0; } duplicateMovieClip ("_root.PlayerShot", "PlayerShot"+ShotNum, ShotNum+500); if (Laser == 1) { _root["PlayerShot"+ShotNum]._yscale = 200; _root["PlayerShot"+ShotNum].Laser = 1; } if (Laser == 0) { _root["PlayerShot"+ShotNum].Laser = 0; }
W tym kodzie przede wszystkim zwiększamy wartość zmiennej ShotNum o 1. Następnie instrukcja if sprawdza, czy wartość zmiennej ShotNum przekracza 10, a
Rozdział 14-377
jeśli tak, wówczas zmniejsza tą wartość do 0. W ten sposób gracz nie może mieć więcej niż 11 (nie zapominaj, że liczenie rozpoczyna się od 0) promieni lasera na ekranie w tym samym czasie. Polecenie duplicateMovieClip tworzy kolejny klip filmowy PlayerShot i zmienia jego nazwę w taki sam sposób, jak modyfikowana jest nazwa kopii klipu wroga. Polecenia if (Laser) służą do sprawdzania, czy gracz ma aktywny bonus lasera. Jeśli tak, wówczas wielkość pocisku zostaje zwiększona, a zmienna ustawiona na klip filmowy PlayerShot, który nakazuje przyciskowi lasera kontynuację jego ruchu w momencie zetknięcia się z wrogiem. Zanim przetestujemy ten owy kod i zaobserwujemy zmiany, musimy zaprogramować również same pociski. Player_Shot_A
Te pociski muszą przesuwać się pionowo po ekranie z ich punktu początkowego umieszczonego na dziobie statku kosmicznego. Jeśli zetkną się z wrogiem, muszą go zniszczyć, podobnie jak same siebie. Jedyne odstępstwa od tej reguły są następujące: po pierwsze, jeśli gracz dysponuje bonusem lasera, pocisk nie zostanie wówczas niszczony w kontakcie z wrogiem i po drugie, miny nie da się zniszczyć żadnym rodzajem pocisku. 1. Dwukrotnie kliknij na klipie filmowym Player_Shot_A w bibliotece aby go otworzyć, a następnie dodaj poniższy kod w ujęciu 1 na warstwie Code: this._x = _root.PlayerShip._x; ShotY = _root.PlayerShip._y-10; ShotDeath = false;
Pierwszy wiersz utrzymuje pocisk na tej samej pionowej linii co statek gracza. Zastosowana zostaje wówczas zmienna ShotY, która służy do umieszczenia pocisku tuz nad statkiem. Dzięki temu, gdy gracz strzela, pocisk wygląda tak, jakby wychodził z tego samego punktu, w którym znajduje się przód statku. Pod koniec omawianego fragmentu kodu zastosowaliśmy zmienną ShotDeath, którą ustawiliśmy na false. Przypiszemy jej wartość true, gdy pocisk zetknie się z wrogiem. 2. W ujęciu 2 na warstwie Code wpisz poniższy kod: ShotX = this._x; ShotY = ShotY-15; EnemyNum = -1; if (ShotY<-20) { gotoAndStop (4); } this._y = ShotY;
Ten kod definiuje kilka zmiennych i sprawdza, czy następny ruch pocisku przeniesie go dalej niż 20 piksele ponad górną krawędź ekranu. Jeśli tak, przesuwa wówczas listwę czasową do ujęcia 4, w którym pocisk zostanie przetworzony. Teraz już czas na chyba najbardziej skompilowany fragment kodu w całej grze. Obsługuje on procedurę wykrywania kolizji dla pocisków. 3. Dodaj poniższy kod do ujęcia 2, pod ostatnim fragmentem skryptu:
Rozdział 14-378
do { EnemyNum = EnemyNum+1; EnemyX = _root["Enemy"+EnemyNum]._x; EnemyY = _root["Enemy"+EnemyNum]._y; if (ShotX>EnemyX-15) { if (ShotXEnemyY-15) { if (ShotY
Ten fragment kodu stosuje akcję do...while do utworzenia pętli kodu. Pętla kodu zawiera polecenia sprawdzające, czy nastąpiła kolizja z jakimkolwiek z wrogów widocznych na ekranie. Pętla będzie powtarzana wówczas, gdy wartość zmiennej EnemyNum jest mniejsza od 12. Jeśli kolizja nastąpiła, wówczas zmienna ShotDeath zostaje ustawiona na true, a trafiony klip filmowy Enemy przeniesiony do ujęcia 4 na jego listwie czasowej. Jeśli nie pamiętasz kodowania tego ujęcia, przypominamy, że kod w nim informuje wroga, że jest martwy, odtwarza jego animację i dodaje 10 punktów do wyniku. Po nastąpieniu kolizji pocisk zostaje usunięty z ekranu za pomocą ostatniego polecenia if. Instrukcje if (Laser) sprawdzają, czy gracz posiada aktywny bonus lasera. Jeśli tak, wówczas pocisk będzie kontynuować swą podróż w górę ekranu niszcząc każdego wroga, jaki mu się nawinie — o taaaaaaaaaaak. Po tym zmasowanym kodowaniu odetchniemy odrobinę w następnym ujęciu. 4. W ujęciu 3 na warstwie Code dodaj kolejny fragment skryptu: gotoAndPlay (2);
Ta pętla powoduje ciągłe odtwarzanie filmu od ujęcia 2. 5. Teraz dodaj poniższy kod do ujęcia 4: this._x = 600; this._visible = 0; ShotDeath = false; stop ();
Ten kod stosujemy po zetknięciu się pocisku z wrogiem. Pierwsze polecenie przesuwa pocisk poza ekran, a drugie czyni go niewidocznym. Zmienna ShotDeath zostaje ustawiona na false i, na koniec, akcja stop zatrzymuje listwę czasową na ujęciu 4, gdzie pozostanie aż do wystrzelenia kolejnego pocisku. W ten sposób skompletowaliśmy kod dla tego klipu filmowego. Jeśli przetestujesz film, już będziesz mógł strzelać ze statku kliknięciem myszy. Przy odrobinie szczęścia uda ci się zniszczyć zabłąkanych przeciwników, którzy znajdą się na ścieżce lasera zanim samonaprowadzająca się mina rozbije twój statek. Wszystko pięknie, tyle że nadal czegoś brakuje. Czas na zaprogramowanie ruchu samego statku gracza.
Rozdział 14-379
Player_Ship_B
Dla statku gracza nie tak dużej dawki kodowania. Wystarczy, aby podążał za klipem filmowym Mover. 1. Dwukrotnie kliknij na klipie filmowym Player_Ship_B w bibliotece i otwórz go, a następnie wpisz poniższy kod w ujęcie 1 na warstwie Code: MoverX = _root.Mover._x; MoverY = _root.Mover._y; PlayerShipX = _root.PlayerShip._x; if (MoverX>PlayerShipX) { PlayerShipX = PlayerShipX+((MoverX-PlayerShipX)/CraftSpeed); } if (MoverXPlayerShipY) { PlayerShipY = PlayerShipY+((MoverY-PlayerShipY)/CraftSpeed); } if (MoverY
Ten kod służy do przesuwania statku w kierunku klipu filmowego Mover (krzyżyka). Zmienne MoverX i MoverY są ustawione na pozycję klipu filmowego Mover, a zmienna PlayerShipX na pozycję statku gracza. Polecenia if sprawdzają, gdzie klip filmowy Mover znajduje się w stosunku do statku, a następnie zwiększają lub zmniejszają odpowiednio pozycję x i y statku. Polecenia u dołu fragmentu kodu aktualizują pozycję statku i jego rotację na ekranie. Zmiennej CraftSpeed na początku gry zostaje przypisana wartość 10, która to będzie modyfikowana po aktywacji przez gracza określonych bonusów. Zmiana tej wartości na mniejszą niż 10 spowoduje przyspieszenie statku, a zwiększenie tej wartości ponad 10 spowolnienie. 2. Teraz skopiuj w klej ten kod w ujęcie 2, a następnie zmień ostatni podświetlony wiersz: MoverX = _root.Mover._x; MoverY = _root.Mover._y; PlayerShipX = _root.PlayerShip._x; if (MoverX>PlayerShipX) { PlayerShipX = PlayerShipX+((MoverX-PlayerShipX)/CraftSpeed); } if (MoverXPlayerShipY) { PlayerShipY = PlayerShipY+((MoverY-PlayerShipY)/CraftSpeed); } if (MoverY
Rozdział 14-380
Jak widać, w kodzie wprowadziliśmy tylko jedną niewielką zmianę. Dodaliśmy na koniec polecenie gotoAndPlay aby film powrócił do ujęcia 1. Zrobiliśmy to dlatego, aby statek reagował bardziej płynnie: jeśli pozostawilibyśmy w tym ujęciu tylko polecenie goto, wówczas pozycja statku byłaby aktualizowana tylko co drugie ujęcie. Poprzez dwukrotne umieszczenie kodu zapewniliśmy, że statek będzie się poruszać w każdym ujęciu. Tyle jeśli chodzi o kod dla statku gracza. Jeszcze tylko dodamy niewielki fragment kodu do klipu filmowego eksplozji statku, Player_Ship_Explosion. 3. Dwukrotnie kliknij na klipie filmowym Player_Ship_Explosion w bibliotece i w ujęciu 47 na warstwie Code wpisz poniższą akcję: stop ();
I to już wszystko. Polecenie to zatrzymuje listwę czasową w ujęciu 47. Teraz możesz już przetestować podstawową wersję gry. Statek powinien podążać za klipem filmowym Mover, a ty możesz strzelać do nieprzyjaciół klikając myszą. Gdy trafisz w przeciwnika, zauważysz jednak, że wynik zachowuje się trochę dziwnie: zamiast wyświetlać poprawny wynik pokazuje coś, co przypomina kod dwójkowy. Dzieje się tak, ponieważ kazaliśmy Flashowi dodać 10 do wartości zmiennej GameScore po strąceniu przeciwnika, lecz nie zdefiniowaliśmy jeszcze samej tej zmiennej. Ponieważ umieściliśmy już 0 w dynamicznym polu tekstowym wyświetlającym zmienną GameScore, program „myśli”, że usiłujemy utworzyć ciąg znaków. Wówczas dodaje 10 do końca ciągu po każdorazowym zabiciu wroga. Więc po pierwszy zestrzeleniu przeciwnika otrzymujesz wynik 010, potem 01010 i tak dalej. Na szczęście bardzo łatwo ten błąd naprawić informują program, że jest to liczba, a nie ciąg. Wykonamy to w klipie filmowym Score_A. Score_A Już prawie skończyliśmy grę. Po zaprogramowaniu wyników pozostaną nam jeszcze tylko bonusy. 1. Dwukrotnie kliknij na klipie filmowym Score_A w bibliotece i wpisz poniższy kod w ujęciu 1 na warstwie Code: GameScore = 0; NextScore = 200;
Ten kod przypisuje zmiennej GameScore wartość 0 informując w ten sposób program, że jest to wartość numeryczna, a nie ciąg. Definiujemy również nową zmienną o nazwie NextScore, która reprezentuje następny wynik, jakiego gracz musi uzyskać, zanim będzie mógł zebrać bonusa. 2. W ujęciu 2 na warstwie Code dodaj: if (GameScore >= NextScore) { GameScore = GameScore+10; NextScore = NextScore+200; _root.Powerups.gotoAndPlay(2); }
Rozdział 14-381
Ten kod uruchamia bonusy wówczas, gdy gracz dochodzi do określonej liczby punktów. Co 200 punktów wywoływany będzie film Powerups i wybrany losowo bonus pojawi się na ekranie. 3. Na koniec, dodaj poniższy kod w ujęciu 3: gotoAndPlay (2);
Kod ten przenosi listwę czasową z powrotem do ujęcia 2 i kontynuuje sprawdzanie wyniku, aby przekonać się, czy gracz zasłużył już na bonusa. Teraz już w pełni można zagrać w grę. Idź i staw czoła obcym hordom, wysyłaj skwierczące lasery w dal i zgromadź jak najwyższy wynik zanim stanie się nieuniknione, a twój dzielny statek zostanie zredukowany do skrzącej się chmury neutronów. Wiesz już, o co chodzi. Skoro już uporaliśmy się z podstawami, możemy poeksperymentować z kilkoma ulepszeniami w grze. Spróbujemy dodać bonusy. Power_Ups gracza
Bonusy będą powoli spadać z góry ekranu, po jednym co 200 punktów zdobytych przez gracza. Każdy z nich będzie wywierać inny krótkotrwały efekt na statek gracza: • • • • •
Speed-Up — zwiększa prędkość statku, Slow-Down — spowalnia prędkość statku, Bonus Points — gracz otrzymuje dodatkową, losowo wybraną, liczbę punktów, Laser — laser będzie zestrzeliwał kilku wrogów jednocześnie, Shield — statek gracza przez chwilę będzie niepokonany.
Rysunki dla wszystkich wyżej wymienionych elementów przechowywane są w jednym klipie filmowym (Player_Powerups_A), a animacja odtwarzana podczas zbierania ich — w drugim (Player_Powerups_B). Musimy zmodyfikować obydwa klipy filmowe, lecz w pierwszym klipie będzie nam potrzebny tylko jeden wiersz kodu, więc powinniśmy się z tym uporać w miarę szybko. 1. W bibliotece dwukrotnie kliknij na klipie filmowym Player_Powerups_A aby go otworzyć i w ujęciu 1 na warstwie Code wpisz poniższą akcję: stop ();
Ta operacja powstrzymuje klip przed ciągłym przechodzeniem przez wszystkie rysunki gdy pojawi się na ekranie po raz pierwszy. Będziemy wywoływać poszczególne rysunki za pomocą poleceń gotoAndStop umieszczonych w następnym klipie filmowym, jakiego przygotujemy. 2. Przejdziemy teraz do klipu filmowego Player_Powerups_B. Dwukrotnie na nim kliknij w bibliotece i dodaj poniższy kod w ujęciu 1 na warstwie Code: stop ();
Rozdział 14-382
Pewnie właśnie odczułeś usprawiedliwione deja vu, lecz naprawdę chcieliśmy napisać właśnie taki kod. Tym razem polecenie to zastosowaliśmy aby zapobiec upuszczeniu jakichkolwiek bonusów zaraz po uruchomieniu gry, gdyż chcemy, aby elementy były dostępne dopiero wówczas, gdy gracz uzbiera pewną liczbę punktów. Niestety ten klip filmowy nie jest już tak prosty do zakodowania jak poprzedni, a czeka nas jeszcze więcej pracy z kodem. 3. W ujęciu 2 na warstwie Code dodaj poniższy kod: _root.PlayerShip.CraftSpeed = 10; _root.Mover.Laser = 0; _root.Shield = 0; _root.PlayerShip.Effects._visible = 0; _root.PlayerShip.Effects.gotoAndPlay(50); _root.Powerups._y = -60;
Ten kod zatrzymuje aktualnie aktywnego bonusa, jak również efekt graficzny na statku, jeśli dany bonus jest aktywny (efekt ten pojawia się wówczas, gdy na statku używany jest jakiś bonus). Gracz nie powinien otrzymać jednocześnie dwóch bonusów, lecz dzięki sprytnemu zastosowaniu lasera mogło by się mu to udać. Ten kod zapewnia, że jeśli gracz zapracował na drugi bonus, pierwszy natychmiast zostanie mu odebrany. To okrutne, lecz sprawiedliwe. 4. Teraz dodamy kod określający, którego bonusa gracz otrzyma. Wpisz następujący skrypt poniżej poprzedniego fragmentu: Powerup = random(5); _root.Powerups.Image.gotoAndStop(Powerup+1); _root.Powerups._x = (random(400)+50); _root.Powerups._y = -60;
Pierwszy wiersz generuje dla zmiennej Powerup losową liczbę od 0 do 4, oznaczające poszczególne bonusy. Następnie otwieramy odpowiedni rysunek dla wybranego bonusa. Program przechodzi wówczas do ujęcia w klipie filmowym Player_Powerups_A (o nazwie kopii Image) i zatrzymuje się tam. Dwa dolne wiersze kodu określają początkową pozycję nowego bonusa, dzięki czemu po każdym wywołaniu bonusa będzie on spadać z innego miejsca u góry ekranu. Skoro już umieściliśmy odpowiedni rysunek na scenie, dodamy dla niego kod ActionScript, najpierw aby gracz mógł zebrać ten element, a następnie aby sam obiekt mógł wykonać jakąś akcję. 5. W ujęciu 3 na warstwie Code wpisz: PowerupY = _y; PowerupY = PowerupY+2.5; if (PowerupY>440) { _root.Powerups._y = -60; gotoAndStop (1); } _root.Powerups._y = PowerupY; PlayerShipX = _root.PlayerShip._x; PlayerShipY = _root.PlayerShip._y; PowerupX = _x; PowerupY = _y; if (PowerupXPlayerShipX-20) { if (PowerupY>PlayerShipY-20) { if (PowerupY
Rozdział 14-383
To jest kod ruchu i kolizji dla bonusa. Jest on bardzo zbliżony do kodu i kolizji wroga, którego zastosowaliśmy wcześniej. Różni się od niego tylko tym, że gracz nie zostaje zabity po zetknięciu się z bonusem, a gdy bonus dotrze na dół ekranu nie pojawia się ponownie u góry. Jeśli graczowi nie uda się zebrać bonusa, nie będzie miał już drugiej szansy. Aby otrzymać kolejnego bonusa gracz będzie musiał ponownie zebrać odpowiednią liczbę punktów. 6. W ujęciu 4 na warstwie Code dodaj poniższą operację: gotoAndPlay (3);
To polecenie tworzy pętlę pomiędzy ujęciami 3 i 4, sprawdzając, czy gracz nie zebrał bonusa i czy obiekt ten nie wyleciał poza dolną krawędź ekranu. Teraz, po zebraniu bonusa przez gracza musimy uaktywnić ten element. Jego działanie i typ będzie zależeć od tego jaka liczba została wygenerowała. 7. W ujęcie 5 wpisz poniższy kod: if (Powerup == 0) { _root.Shield = 1; _root.PlayerShip.Effects.gotoAndPlay(2); } if (Powerup == 1) { _root.PlayerShip.CraftSpeed = 3; _root.PlayerShip.Effects.gotoAndPlay(2); } if (Powerup == 2) { _root.PlayerShip.CraftSpeed = 40; _root.PlayerShip.Effects.gotoAndPlay(2); } if (Powerup == 3) { _root.Mover.Laser = 1; _root.PlayerShip.Effects.gotoAndPlay(2); } if (Powerup == 4) { _root.ScoreMovie.GameScore += (random(10)*10); } _root.PlayerShip.Effects._visible = 1;
Ten kod jest stosowany wówczas, gdy graczowi udaje się zebrać bonusa. W zależności od wartości zmiennej Powerup zostaną skonfigurowane różne zmienne w filmie. Jeśli wartość zmiennej Powerup wynosi 2, wówczas zmiennej CraftSpeed w klipie filmowym PlayerShip przypiszemy wartość 40, która spowoduje spowolnienie statku. Końcowy wiersz kodu służy do uruchamiania graficznego efektu migania wokół statku gdy bonus jest aktywny. Na razie efekt ten odtwarzany jest ciągle, lecz za chwilę to zmienimy. 8. Aby zakończyć kod dla bonusa wpisz poniższy skrypt w ujęcie 200: _root.PlayerShip.CraftSpeed = 10; _root.Mover.Laser = 0; _root.Shield = 0; _root.PlayerShip.Effects._visible = 0; _root.PlayerShip.Effects.gotoAndPlay(50); _root.Powerups._y = -60;
Zastosujemy ten kod jako wyzwalacz dla bonusa. Zamiast definiując pętlę lub podając aktualny czas, poczekamy, aż film dotrze do ujęcia 200 i wtedy zatrzymamy bonusa. Wówczas wszystkie zmienne bonusa zostaną zresetowane, a klip filmowy Powerups przesunięty z powrotem do góry ekranu. Efekt graficzny wokół statku gracza również zostanie zatrzymany.
Rozdział 14-384
Wystarczy jeszcze tylko dodać niewielki fragment kodu w klipie Player_Ship_Extra i to już będzie wszystko. 9. Otwórz klip filmowy Player_Ship_Extra w bibliotece i dodaj poniższy kod w ujęciu 1 na warstwie Code: stop ();
To polecenie (wreszcie) zatrzyma migotanie statku w całym filmie. 10. A teraz w ujęciu 10 na warstwie Code wpisz: gotoAndPlay (2);
Ta akcja tworzy pętlę graficznego efektu w czasie aktywności bonusa. I to już koniec. Doprowadziliśmy cię do tego etapu gry. Od ciebie zależy, czy postanowisz poszerzyć ją, czy też nie. Poniżej znajdziesz kilka sposobów na rozbudowanie tej gry. Najpierw jednak uruchom grę i podziwiaj twoje własnoręczne dzieło. Baw się dobrze i pamiętaj: jesteś tylko tak dobry, jak twój ostatni najlepszy wynik.
Modyfikacja gry Skoro dodałeś już cały kod ActionScript do gry, możesz się zająć jej modyfikacją i dopracowywaniem. Pierwszą i najbardziej oczywistą zmianą, jaką można wprowadzić, jest sam jej wygląd. Możesz z powodzeniem dopracować wygląd gry zmieniając rysunki klipów filmowych. Jeśli to będziesz robić, warto zachować taki sam rozmiar nowych rysunków jak obecnych, ponieważ kod został przystosowany do pracy z elementami o określonych rozmiarach. Jeśli naprawdę chcesz zmienić rozmiar rysunków, możesz to zrobić, lecz wówczas również konieczne będzie edytowanie kodu kolizji i wprowadzenie nowych wymiarów rysunków. Następną modyfikacja może być zmiana kodu. Jest to bardziej skomplikowane zadanie, lecz przy uważnym planowaniu, odrobinie szczęścia i zastosowaniu metody prób i błędów, na pewno uda ci się dopiąć swego. Poniżej zamieściliśmy listę sugerowanych przez nas zmian w grze: • Dodaj poziomy do gry. Aby przejść na kolejny poziom gracz musi zarobić, powiedzmy, 1200 punktów. • Dodaj różnych wrogów na poszczególnych poziomach. Gra nabierze tempa, a gracz będzie mógł zarobić więcej punktów. Przeciwny mogą również zacząć strzelać do gracza. • Dodaj obrońców „końca poziomu”. Są to niezwykle twardzi przeciwnicy, których zadaniem jest obrona końca poziomów. • Dodaj automatyczne strzelanie lub automatyczne bonusy. • Po każdym 100 punktów wyzeruj prędkość zwykłych wrogów, lecz umieść jednocześnie dodatkowego niezniszczalnego przeciwnika. • Daj graczowi kilka żyć, lub pasek energii malejący wówczas, gdy gracz zostanie trafiony. • Dodaj przewijane tło lub kilka ładnych wektorowych efektów gazowych. • Dodaj więcej bonusów, na przykład: o nową broń — samosterujące pociski, różnego rodzaju bomby, podwójne pociski, pociski wielokierunkowe, odbijające się lasery... o automatyczne strzelanie, Rozdział 14-385
o sprytne bomby — niszczą wszystkich wrogów na ekranie za jednym razem, o mnożniki wyniku — podwajają liczbę punktów, jaką gracz otrzymuje za każdego wroga, o „pomocnicze druidy” — małe roboty, które krążą wokół statku gracza, dając mu dodatkowe bronie, lub ochraniając statek przed wrogami, o reset — przywraca wrogom ich początkową prędkość, o dodatkowe zdrowie/życie. Jak widzisz, możesz wprowadzić niezliczoną liczbę ulepszeń do tej gry: wystarczy mieć pomysł i ochotę na udoskonalenie twoich zdolności programowania w środowisku ActionScript. Mamy nadzieję, nasze wskazówki ci w tym pomogą. Powodzenia i niech cię nie kusi ciemna strona...
Rozdział 14-386
Rozdział 15 Flash i trzeci wymiar Odkąd pamiętam, projektanci Flasha usiłują wzbogacić swoje projekty zawartością trójwymiarową, a wraz z ukazaniem się na rynku takich aplikacji jak Vecta3D i Swift 3D, dodanie tej zawartości do witryny internetowej stało się stosunkowo proste. Od tej pory elementy 3D stosowano w wielu witrynach internetowych i grach online z różnymi powodzeniem. Efekty trójwymiarowe niezmiennie przyciągają tłumy, lecz łatwo wpaść w pułapkę stosując je w nieodpowiednich miejscach. Chociaż tematem tego rozdziału jest trzeci wymiar Flasha, nadal sceptycznie podchodzę do popierania stosowania efektów 3D w Sieci bez opamiętania. Jestem przekonany, że zestaw narzędzi do tworzenia grafiki trójwymiarowej może pomóc ci w tworzeniu niezwykle atrakcyjnych i niezapomnianych efektów, lecz wiem również, że ma to swoje słabe strony. Elementy trójwymiarowe mogą znacznie obciążyć procesor, a ponadto trzeba się pilnować, aby z nimi nie przesadzić. Wraz z wprowadzeniem i rozwojem środowiska ActionScript we Flashu 4 i 5 nadeszła możliwość wykonywania kalkulacji 3D w czasie rzeczywistym, w miejsce polegania na predefiniowanych obliczeniach. Mimo udoskonaleń wprowadzonych w nowym odtwarzaczu Flasha 5, wymagania procesora dla skomplikowanych obliczeń we Flashu przy przyzwoitej prędkości nadal są dosyć wysokie. Jednakże przy odrobinie logicznego myślenia, jest możliwe odnalezienie sposobów na obejście tych ograniczeń.
Co jest możliwe, a co praktyczne Pamiętając o powyższych utrudnieniach, doszedłem do wniosku, że na razie wartość 3D w czasie rzeczywistym we Flashu nie oznacza tworzenia kompletnych, złożonych form geometrycznych, gdyż leży to poza granicami rozsądku. Bardziej pociągającą jest możliwość określania pozycji „obiektów” w przestrzeni poprzez nadanie im przestrzennych współrzędnych. Przykładem takiej techniki jest trójwymiarowa gra w rugby o nazwie Conversion King (www.sportal.co.za/conversionkings), którą wykonała moja firma dla korporacji Sportal:
Rozdział 15-387
Aby obliczyć współrzędne x, y i z piłki w przestrzeni zastosowaliśmy prosty mechanizm 3D podobny do tych, którymi zajmiemy się w tym rozdziale. Stadionowi, stanowiskom i podłożu również nadaliśmy przestrzenne współrzędne, co umożliwiło nam uzyskanie takich efektów jak wykrycie kiedy piłka uderza w jeden z tych obiektów. Następnie nałożyliśmy przezroczystą „matrycę” trójwymiarowych współrzędnych na prerenderowanym tle 3D aby umieścić ruch piłki w określonym kontekście. Ponieważ współrzędne obliczane są w wirtualnym środowisku 3D, możemy również zmienić kąt i perspektywę widoku, tworząc w ten sposób serie różnych widoków pod różnych katem, a nawet opcję „powtórki” spoza stanowisk. Jedyne elementy, jakie należy obliczyć metodą ujęcie po ujęciu są piłka i jej cień, a to z kolei stanowi przykład realnego zastosowania trzeciego wymiaru we Flashu. Podobnym projektem jest interfejs użytkownika na stronie www.com-ebusiness.de, gdzie ponownie jedyne obliczenia 3D konieczne do wykonania służą do określenia pozycji piłki w aksonometrycznej przestrzeni 3D, gdyż jej współrzędne x, y i z pozostają pod wpływem fizycznych obliczeń i środowiska.
Rozdział 15-388
Wierzę, że takie połączenie prerenderowanych obiektów trójwymiarowych i obliczeń 3D w czasie rzeczywistym stanowi wielki potencjał, zwłaszcza na polu programowania gier we Flashu i jak na razie, możliwości tej techniki nadal nie zostały w pełni zgłębione. Oczywiście tego rodzaju trzeci wymiar może być również z powodzeniem stosowany w projektowaniu multimedialnych interfejsów.
Wszystko o okręgach Zanim nawet weźmiemy pod uwagę takie zastosowania, musimy zrozumieć w jaki sposób przeprowadzane są te „proste” obliczenia 3D. To właśnie będzie stanowić główny temat naszego rozdziału, w którym przeprowadzimy cię przez proces generowania prostego „mechanizmu” 3D we Flashu. Na serce takiej maszyny składa się kilka okręgów i obliczeń kątów. W tym celu przygotowaliśmy kilka plików w formacie FLA, które wyjaśnią różne zagadnienia i kroki w trakcie pracy.
Pliki te w formacie FLA znajdziesz na płycie CD-ROM dołączonej do książki i zalecalibyśmy przechowywanie ich pod ręką podczas pracy nad tym ćwiczeniem. Wierzymy, że najlepszym sposobem na naukę jest eksperymentowanie, więc poświęć wystarczająco dużo czasu na zbadanie różnych etapów samouczka, tak jak zostały one przedstawione w przykładowych plikach.
Zanim zaczniemy powinniśmy się dokładnie zastanowić, co właściwie chcemy osiągnąć. Naszym celem jest utworzenie efektów 3D we Flashu 5 z zastosowaniem języka ActionScript, a nasz końcowy projekt został zilustrowany w pliku sample_13.fla, w którym zastosowaliśmy środowisko ActionScript do obliczenia współrzędnych sześcianu w przestrzeni i stworzenia Rozdział 15-389
iluzji trzeciego wymiaru. Zauważ, że użyliśmy słowa „iluzja” nie dlatego, że ćwiczenia w tym rozdziale dotyczą tworzenia pseudo-trójwymiarowych efektów, lecz dlatego, że obiekt trójwymiarowy na jakiejkolwiek dwuwymiarowej powierzchni jest niczym innym jak iluzją. Uzyskuje się ją poprzez kombinację właściwości x i y poszczególnych punktów w trójwymiarowym obiekcie i wyregulowanie ich właściwości skali podczas ruchu tych punktów w przestrzeni. Nasz sześcian wygląda jak obiekt trójwymiarowy dzięki regułom, których przestrzegaliśmy podczas rysowania go, umożliwiających szybkie skojarzenie i wyobrażenie sobie przez nasz mózg sześcianu jako obiektu w trójwymiarowej przestrzeni. Ponieważ żyjemy w trójwymiarowym świecie, intuicyjnie rozpoznajemy efekty perspektywy, takie jak zmniejszanie się obiektów wraz z oddalaniem się ich od nas, czy zbieganie się linii w niewidocznych punktach. W pliku sample_13.fla kluczową cechą jest iluzja, w której różne punkty w obiekcie wyglądają, jakby się obracały wokół centralnego punktu. Jeśli używałeś Flasha 3, na pewno próbowałeś animować obiekt wzdłuż spłaszczonej owalnej ścieżki, aby symulować obrót 3D wokół centralnego punktu. Jest to ważne, ponieważ daje to nam pierwszą wskazówkę odnośnie sposobów symulacji efektów trójwymiarowych w środowisku ActionScript. Oznacza to, że jeśli możemy obliczyć kolistą ścieżkę, zamiast animować ją, jesteśmy na dobrej drodze do utworzenia trójwymiarowych efektów w czasie rzeczywistym we Flashu.
Sinus i kosinus Pamiętam, jak w szkole średniej mój nauczyciel matematyki mówił o związku trygonometrycznych funkcji sinusa (sin) i kosinusa (cos) z okręgami. Nie będziemy tutaj wyjaśniać działania tych funkcji, gdyż jest to zadanie twojego nauczyciela matematyki i na szczęście nie musimy tego wiedzieć, aby przejść przez ten rozdział. Jeśli chciałbyś dowiedzieć się więcej o funkcjach trygonometrycznych, masz do dyspozycji mnóstwo podręczników, materiałów dostępnych w Internecie i szkołach, czekających aż się w nich zagłębisz. Zatem bez dalszych wstępów przyjrzyjmy się funkcjom trygonometrycznym i przekonajmy się, co mogą nam zaoferować. Mając określony kąt, możemy zastosować sinus i kosinus do obliczenia współrzędnych, w których linia narysowana pod podanym kątem przecina się z kołem. Zatem podczas symulacji trzeciego wymiaru, sinus i kosinus służą do obliczania kolistej ścieżki wokół centralnego punktu. Kosinus reprezentuje wartość poziomą (X), a sinus wartość pionową (Y) współrzędnej. Poniżej przedstawiliśmy ilustrację działania tych dwóch funkcji.
Rozdział 15-390
Wartości sinusa i kosinusa dla danego kąta oparte są na okręgu o promieniu długości jednej jednostki, zwanym również kołem jednostkowym (jak na rysunku). Promień reprezentuje odległość pomiędzy środkowym punktem (0,0) i krawędzią koła. Z tymi danymi równanie dla obliczenia współrzędnej x będzie wyglądać tak: współrzędnaX = promień * cos (kąt)
A równanie dla współrzędnej y tak: współrzędnaY = promień * sin (kąt)
I większa wartość promienia, tym większe będzie koło. Na przykład, weźmy kąt 33 stopni z promieniem 2: X = 2 * cos(33) = 2 * 0.8387 = 1.6773 Y = 2 * sin(33) = 2 * 0.5446 = 1.0892
Inaczej niż w poprzednich wersjach, te funkcje trygonometryczne są funkcjami wbudowanymi we Flashu 5 i możemy uzyskać do nich dostęp poprzez nowy obiekt Math. Zatem w kodzie ActionScript możemy napisać równania w następujący sposób: współrzędnaX = promień * Math.cos (kąt); współrzędnaY = promień * Math.sin (kąt);
Wydaje się to proste, lecz jest oczywiście pewien kruczek: kąty stosowane przez obiekty Math.cos i Math.sin mierzone są w radianach, a nie w stopniach. Radiany można określić jako bardziej elokwentny sposób mierzenia kątów, lecz jeśli wolisz używać stopni, możesz przekształcić je za pomocą poniższego równania: radiany = stopnie * (◊ / 180)
Wartość ◊ (pi) zastosowana w powyższym równaniu można również uzyskać za pomocą nowego obiektu Flasha 5 Math, zatem w języku ActionScript równanie to będzie wyglądać tak: radiany = kąt * (Math.PI / 180); współrzędnaX = promień * Math.cos (radiany); współrzędnaY = promień * Math.sin (radiany);
Rozdział 15-391
Równania te umożliwią ci obliczenie współrzędnych x i y dowolnego punktu przecinającego się z kołem o znany promieniu.
Ruch po okręgu Przeprowadźmy teraz test. W pliku sample_01.fla zobaczysz, że listwa czasowa _root składa się z pojedynczej kopii klipu filmowego umieszczonego na środku sceny. Wewnątrz tego klipu odbędzie się cała akcja, więc dwukrotnie na nim kliknij aby edytować jego zawartość. Ten klip filmowy zawiera dwa kolejne klony klipów filmowych: kółko o nazwie kopii Point i krzyżyk z nazwie kopii centerPoint. Właściwości _x i _y klipu centerPoint służą jako odnośnik do współrzędnej, wokół której klip Point będzie się poruszać. W tym przypadku odpowiada ona środkowi klipu filmowego (0,0).
Jeśli przyjrzysz się układowi listwy czasowej, zauważysz, że ten klip filmowy składa się tylko z trzech ujęć. Zawierają one kod ActionScript. Ujęcie 1 jest ujęcie konfiguracyjnym, w którym umieściliśmy różne funkcje. Dwukrotnie kliknij na ujęciu 1 aby je obejrzeć: Radius = 100; degrees = 0; // funkcja setAngle; function setAngle () { Angle = degrees * (Math.PI / 180); degrees = degrees + 2; } // funkcja drawPoints; function drawPoints () { Xpos = Radius * Math.cos(Angle); Ypos = Radius * Math.sin(Angle); // rysuj Point._x = Xpos + centerPoint._x; Point._y = Ypos + centerPoint._y; }
W tym ćwiczeniu zmienną setAngle będziemy stosować do określenia wartości kąta Angle dla dowolnego obrotu, jakiego chcemy obliczyć. W pierwszym przykładzie zmienna setAngle służy do przypisania zmiennej Angle wartości konwersji ze stopni do radianów, a następnie do zwiększenia stopni degrees o 2 przy każdorazowym wywołaniu jej.
Rozdział 15-392
Zmienna drawPoints zawiera kod obliczający punkt na kole w oparciu o omówione wcześniej równania, a następnie definiuje nową pozycję klipu Point na ekranie poprzez określenie jego właściwości _x i _y. Ujęcie 2 zawiera kod, który wywołuje akcję setAngle i drawPoints: setAngle(); drawPoints();
Skrypt w ujęciu 3 tworzy pętlę kodu w ujęciu 2: gotoAndPlay(2);
Ponieważ wartość zmiennej Angle jest zwiększana poprzez ciągłe wywołania polecenia setAngle, zarówno sinus jak i kosinus zostają użyte w poleceniu drawPoints do obliczenia nowej pozycji klipu Point na okręgu o promieniu 100. W efekcie otrzymujemy klip Point poruszający się po kolistej ścieżce wokół klipu centerPoint:
Poprzez zmianę wartości promienia Radius, możemy kontrolować rozmiar kółka. Jeśli, zamiast określonej wartości 100 zmodyfikujemy funkcje drawPoints aby zwiększyć wartość promienia Radius przy każdorazowym jej wywołaniu, kolista ścieżka będzie stopniowo się zwiększać (sample_02.fla): Radius = 0; degrees = 0; // funkcja setAngle function setAngle () { Angle = degrees * (Math.PI / 180); degrees = degrees + 2; } // funkcja drawPoints function drawPoints () { Radius = Radius + 0.5; Xpos = Radius * Math.cos (Angle); Ypos = Radius * Math.sin (Angle); // rysuj Point._x = Xpos + centerPoint._x; Point._y = Ypos + centerPoint._y; }
Rozdział 15-393
W efekcie uzyskamy klip Point poruszający się po spiralnej ścieżce wokół klipu centerPoint:
Oś Z Więc w jaki sposób ta spirala związana jest z naszym ćwiczeniem 3D? Następny rysunek przedstawia analizę trzech osi w środowisku 3D (x, y i z). Jeśli przyjrzysz się pierwszej ilustracji, zrozumiesz, że w dwóch omówionych do tej pory przykładach obliczaliśmy obrót wokół osi z poprzez zastosowanie współrzędnej punktu na osi x i y w celu zdefiniowania kolistej ścieżki. Na ekranie komputera można wyobrazić sobie oś z jako os skierowaną w naszym kierunku, wychodzącą z ekranu.
W oparciu o ten rysunek, możemy stwierdzić, że w środowisku 3D: • poprzez zdefiniowanie współrzędnej x i y punktu z zastosowaniem sinusa i kosinusa możemy obliczyć obrót punktu wokół osi z, • poprzez zdefiniowanie współrzędnej y i z punktu z zastosowaniem sinusa i kosinusa możemy obliczyć obrót punktu wokół osi x, • poprzez zdefiniowanie współrzędnej z i x punktu z zastosowaniem sinusa i kosinusa możemy obliczyć obrót punktu wokół osi y. We Flashu możemy określić współrzędne x i y klonu poprzez zastosowanie właściwości _x i _y, lecz współrzędna z jest odrobinę bardziej problematyczna. W środowisku trójwymiarowym pozycja obiektu na osi z zazwyczaj reprezentuje jego odległość od widza. Z powodu perspektywy, im bliżej obiekt znajduje się przy widzu, tym wygląda na większy, i na
Rozdział 15-394
odwrót. Oznacza to, że do przedstawienia współrzędnej klonu na osi z możemy zastosować jego właściwości _xscale i _yscale.
Obrót wokół osi Y Przeprowadźmy test. W oparciu o nasz pierwszy eksperyment, sample_01.fla, zmodyfikowałem kod dla funkcji drawPoints aby symulować obrót wokół osi y. Zgodnie z wyżej wymienionymi regułami, dokonujemy tego poprzez określenie współrzędnych x i z. Nowy kod w znajduje się w pliku sample_03.fla i wygląda następująco: Radius = 100; degrees = 0; // funkcja setAngle function setAngle () { Angle = degrees * (Math.PI / 180); degrees = degrees + 2; } // funkcja drawPoints function drawPoints () { Xpos = Radius * Math.cos (Angle); Zpos = Radius * Math.sin (Angle); // rysuj Point._x = Xpos + centerPoint._x; Point._yscale = Point._xscale = Zpos + 200; }
Wprowadziliśmy tutaj tylko dwie zmiany. Najpierw poniższy wiersz Ypos = Radius * Math.sin (Angle);
A zamiast definiować właściwości _y klipu Point, ustawiamy teraz jego właściwości _xscale i _yscale na Zpos + 200: Point._yscale = Point._xscale = Zpos + 200;
W tym kodzie definiujemy właściwości Point.yscale i Point.xscale jako równe Zpos + 200. wartość 200 zostaje następnie dodana do zmiennej Zpos aby zrekompensować fakt, że z promieniem Radius o wartości 100, minimalna wartość zmiennej Zpos będzie wynosić -100, a my nie chcemy, aby klip Point posiadał ujemną wartość skali. Ruch klipu Point wzdłuż osi x pozostaje taki sam (jak został zdefiniowany przez kosinusa kąta Angle), lecz zamiast poruszać się w dół i w górę osi y, klip Point przemieszcza się teraz „do przodu” i „do tyłu” po osi z, lub mówiąc dokładniej, skaluje się, jak zostało to zdefiniowane przez sinus kąta Angle. W efekcie tworzy się iluzja klipu Point poruszającego się po kolistej ścieżce w przestrzeni:
Rozdział 15-395
Prawdziwa perspektywa Chociaż ten ruch jest całkiem przekonywujący, nie jest jeszcze całkowicie poprawny. Regulowaliśmy skalę klipu Point, lecz należy również dopasować ścieżkę, którą podąża nasz „obiekt”, do skalowania punktu. Innymi słowy, ponieważ sama ścieżka rozciąga się ku nam i oddalając się od nas, powinna być widoczna w perspektywie. Aby uzyskać taki efekt wprowadzimy zmienną perspective i zdefiniujemy właściwości _x, _xscale i _yscale klipu Point w stosunku do tej zmiennej. Zatem, na początku fragmentu skryptu w ujęciu 1 w pliku sample_04.fla, nowej zmiennej perspective przypisaliśmy wartość 150: Radius = 100; perspective = 150; degrees = 0; // funkcja setAngle function setAngle () { Angle = degrees * (Math.PI / 180); degrees = degrees + 2; }
Ta zmienna stosowana jest przez polecenie drawPoints do obliczania stopnia zachodzącego zniekształcenia perspektywy. Im mniejsza jest wartość zmiennej perspective, tym bardziej wyraziste będzie zniekształcenie i na odwrót. W samym poleceniu drawPoints zdefiniowaliśmy nową zmienną Depth, opartą na wartościach zmiennych perspective i Zpos: // funkcja drawPoints function drawPoints () { Xpos = Radius * Math.cos (Angle); Zpos = Radius * Math.sin (Angle); // perspektywa Depth = 1 / (1 - (Zpos / perspective)); // rysuj Point._x = (Xpos * Depth) + centerPoint._x; Point._y = centerPoint._y; Point._yscale = Point._xscale = Depth * 100; }
Rozdział 15-396
Wartość zmiennej Depth zostaje pomnożona przez wartość zmiennej Xpos w celu zdefiniowania właściwości _x, a następnie pomnożona przez 100 aby określić wartości właściwości _xscale i _yscale klipu filmowego Point. Im „bliżej” klip filmowy Point znajduje się widza (innymi słowy, im większa jest wartość zmiennej Zpos), tym większa będzie wartość zmiennej Depth. Na następnym rysunku, który jest widokiem wzdłuż osi y (czyli z „góry”), możesz zauważyć zniekształcenie ścieżki wokół środka i w jaki sposób wpływają na to zniekształcenie różne wartości zmiennej perspective:
Oglądając rysunek wzdłuż osi z, widoczny będzie efekt bardziej wyrazistego ruchu i skalowania podczas „przybliżania” się obiektu do widza, i delikatniejszego ruchu im obiekt będzie znajdować się „dalej”. Można to porównać z jazdą prze okolicę, gdzie najbliższe otoczenie wokół samochodu sprawia wrażenie, jakby się poruszało o wiele szybciej niż, na przykład, góry w tle. Gdy wartość zmiennej perspective dociera w zakres 1,000,000 wówczas nie nastąpi prawie żadne zniekształcenie, tworząc w ten sposób widok ortogonalny (czyli taki, w którym nie jest obecne zniekształcenie perspektywiczne). Jeśli spojrzymy na nasze otoczenie z perspektywy ortogonalnej, wówczas będzie nas dzieliła od wszystkich obiektów jednakowa odległość. Na razie zmiennej perspective w ujęciu 1 klipu filmowego Move3D przypisaliśmy wartość 1000000, więc nie zauważysz zbytniego zniekształcenia podczas oglądania filmu:
Spróbuj zmienić wartość na 150, a następnie uruchomić film, aby zobaczyć naprawdę wyrazisty efekt perspektywy. Można nawet utworzyć efekt przesuwania się obiektu poza ekran: przypisz zmiennej perspective wartość 15 i postaraj się nie uchylać, gdy obiekt
Rozdział 15-397
będzie zataczać pętlę nad twoją głową. Po zmianie wartości zmiennej perspective modyfikacje ruchu i skalowania klipu Point są łatwo zauważalne.
Obrót wokół osi X Tą samą technikę możemy zastosować do symulacji obrotu wokół osi x, poprzez obliczenie współrzędnych z i y. Widok wzdłuż osi x przedstawia płaszczyznę, na które y reprezentuje współrzędną pionową (sinus), a z współrzędną poziomą (kosinus). Zatem, w skrypcie do symulacji obrotu wokół osi x (sample_05.fla), polecenie drawPoints będzie wyglądać tak: function drawPoints () { Ypos = Radius * Math.cos (Angle); Zpos = Radius * Math.sin (Angle); // perspektywa Depth = 1 / (1 - (Zpos / perspective)); // rysuj Point._x = centerPoint._x; Point._y = (Ypos * Depth) + centerPoint._y; Point._yscale = Point._xscale = Depth * 100; }
A oto rezultat wprowadzonych zmian:
Nasza kula sprawia teraz wrażenie jakby obracała się wokół osi x, przybliżając się i oddalając podczas obrotu.
Przemieszczanie kilku punktów Skoro już wiesz, w jaki sposób stosujemy funkcje sinus i kosinus do symulacji obrotu pojedynczego punktu wokół osi w przestrzeni, przyjrzyjmy się teraz metodom tworzenia systemu, w którym będzie się obracać kilka punktów wokół środka. Przede wszystkim musimy określić rozmieszczenie punktów w systemie i sposób przechowywania tej informacji. Aby maksymalnie uprościć wyjaśnienia, omówimy to zagadnienie najpierw w formie dwuwymiarowej, a dopiero później dodamy trzeci wymiar. W systemie dwuwymiarowym możemy określić współrzędną x i y dla każdego punktu, jakiego chcemy zastosować. Współrzędne te zdefiniujemy w stosunku do punktu środkowego Rozdział 15-398
(0,0) i będą one działać na tej samej zasadzie jak jednopunktowe systemy, którymi zajmowaliśmy się do tej pory. Oznacza to, że będziemy postępować zgodnie z konwencją Flasha mówiąc, że jakiś punkt umieszczony jest nad osią x będzie miał ujemną wartość współrzędnej y, a punkt umieszczony poniżej będzie posiadał dodatnią wartość współrzędnej y. Tą samą zasadę stosujemy dla współrzędnych x, gdzie punkt na lewo od osi y będzie miał ujemną wartość współrzędnej, i na odwrót:
Obrót wokół osi Z Zaczniemy od systemu składającego się z czterech punktów. Poniższy rysunek przedstawia współrzędne konieczne do narysowania kwadratu o rozmiarze 100 na 100 jednostek, ze środkiem wyrównanym do środka siatki:
A oto współrzędne dla rogów tego kwadratu: Punkt0: x =-50, y =-50 Punkt1: x = 50, y =-50 Punkt2: x =-50, y = 50 Punkt3: x = 50, y = 50 We Flashu zastosujemy dwie tablice o nazwach x i y do przechowywania tych wartości. Zatem, w oparciu o pierwsze ujęcie w pliku sample_01.fla (czyli pierwszy eksperyment, jakim się zajmowaliśmy), zastąpimy wiersz definiujący wartość promienia Radius kodem,
Rozdział 15-399
który definiuje dwie nowe tablice. Nowy skrypt (umieszczony w pliku sample_06.fla) wygląda następująco: // określamy punkt na współrzędnych xyz x = new Array(-50, 50, -50, 50); y = new Array(-50, -50, 50, 50); verticeNum = x.length;
W tym kodzie zmienną verticeNum ustawiamy na wartość długości length tablicy x — czyli, na liczbę punktów w systemie. Ponieważ chcemy, aby nasz system składał się z czterech punktów, dołączyliśmy procedurę, która tworzy kopie klipu Point, nadając im nazwy Point0, Point1, Point2 i Point3, a następnie czyni oryginalny klip filmowy niewidzialnym: // powielamy punkty for (c = 0; c < verticeNum; c++) { duplicateMovieClip ("Point", "Point" + c, c); } Point._visible = 0;
Główna zmiana w poleceniu drawPoints zachodzi w równaniach, które stosowaliśmy do tej pory do obliczania zmiennych Xpos i Ypos: Xpos = promień * cos (kąt) Ypos = promień * sin (kąt)
Zamiast promienia Radius, zastosujemy współrzędne x i y, które właśnie zdefiniowaliśmy do mniej więcej podobnego działania. Zatem nowe równania będą wyglądać tak: Xpos = x * sin (kąt) + y * cos (kąt) Ypos = y * sin (kąt) — x * cos (kąt)
Jednakże, musimy określić zmienne Xpos i Ypos (jak również właściwości _x i _y) dla każdego punktu w systemie. Dokonamy tego stosując pętlę, która wykona akcje odpowiedzialne za czterokrotne zdefiniowanie tych wartości. Pętla używa zmiennej o nazwie c do kontrolowania liczby pętli, jakie już zostały wykonane i do uzyskania dostępu do wartości tablic x i y: function drawPoints () { for (c = 0; c < verticeNum; c++) { // obrót Z Xpos = x[c] * Math.sin (Angle) + y[c] * Math.cos(Angle); Ypos = y[c] * Math.sin (Angle) - x[c] * Math.cos(Angle); // rysuj this["Point" + c]._x = Xpos + centerPoint._x; this["Point" + c]._y = Ypos + centerPoint._y; } }
W sekcji Rysuj w powyższym kodzie, zmienna this["Point" + c] zostanie zmieniona, po uruchomieniu filmu, na nazwy kopii klipu filmowego Point0, Point1, Point2 i Point3 w kolejności. Po uruchomieniu tego nowego skryptu (sample_06.fla) zauważysz, że po zwiększeniu kąta (za pomocą zmiennej setAngle) wszystkie cztery punkty poruszają się po kolistej ścieżce wokół klipu centerPoint, zachowując stałą odległość pomiędzy sobą:
Rozdział 15-400
Prawdziwą zaletą stosowania tej metody jest możliwość zmiany współrzędnych x i y każdego punktu w systemie. Przeprowadźmy krótki eksperyment, który lepiej zilustruje to zagadnienie: zmienimy wartości w tablicach x i y, stosując kształt na kolejnym rysunku jako odniesienie. Kształt ten prezentuje nowy zestaw wartości wyglądający następująco:
Gdy zastąpimy wartości zdefiniowane dla tablic x i y nowymi (sample_07.fla), w efekcie uzyskamy nową konfigurację punktów w systemie, przypominającą kształtem poprzednią figurę. Jednakże, nadal będą się one obracać wokół klipu centerPoint, zachowując stałe odległości między sobą. Poeksperymentuj ze zmianą tych wartości samemu i obejrzyj rezultaty. Obrót wokół osi Y Podobnie jak w pierwszym przykładzie w tym rozdziale, właśnie dokonaliśmy obliczeń, które reprezentują obrót wokół osi z. Zatem, z możemy również wykonać obliczenia dla osi x i y, na bazie tego, czego nauczyłeś się w pliku sample_04.fla i sample_05.fla. Najpierw przyjrzyjmy się obrotowi wokół osi y. Wiesz, że w celu symulacji obrotu wokół osi y, musimy określić wartości zmiennych Xpos i Zpos, a do tego będziemy potrzebować zestawu współrzędnych punktów na osiach x i z. Dla tego celu wyobraźmy sobie „obrócenie” płaszczyzny x-y o 90 stopni wokół osi x w taki sposób, że stare współrzędne y stają się współrzędnymi z, a współrzędne x pozostają niezmienione:
Rozdział 15-401
Nowe równanie dla obliczenia obrotu wokół osi y będzie wyglądać tak: Xpos = x * sin(kąt) + z * cos(kąt) Zpos = z * sin(kąt) - x * cos(kąt)
Potrzebujemy również kod, który zdefiniuje wartość zmiennej Depth stosowanej do określania właściwości _xscale i _yscale klipu Point. Wartość zmiennej Depth zostaje również pomnożona przez wartość zmiennej Xpos dając nam w ten sposób właściwość x klipu Point. Ponieważ zmienna Depth polega na wartości zmiennej perspective, musimy również pamiętać o przypisaniu zmiennej perspective jakiejś wartości — jak poprzednio umieszczamy ją na początku skryptu w ujęciu 1. Zatem, kod dla polecenia drawPoints, symulujący obrót wokół osi y, będzie wyglądać następująco (znajdziesz go w pliku sample_08.fla na płycie CD-ROM dołączonej do książki): // funkcja drawPoints function drawPoints () { for (c = 0; c < verticeNum; c++) { // obrót Y Xpos = x[c] * Math.sin (Angle) + z[c] * Math.cos (Angle); Zpos = z[c] * Math.sin (Angle) - x[c] * Math.cos (Angle); // perspektywa Depth = 1 / (1 - (Zpos / perspective)); // rysuj this["Point" + c]._x = (Xpos * Depth) + centerPoint._x; this["Point" + c]._y = centerPoint._y; this["Point" + c]._xscale = this["Point" + c]._yscale = Depth * 100; // sortowanie Z this["Point" + c].swapDepths(Depth * 500); } }
Ostatni wiersz kodu w tej funkcji jest odpowiedzialny za sortowanie z (określanie, które punkty należy narysować przed innym, podczas ich obrotu). We Flashu 4 w tym celu musieliśmy przejść przez stosunkowo długi proces, lecz we Flashu 5 możemy zastosować wbudowaną funkcję swapDepths. Ogólnie mówiąc, funkcja ta przesuwa bieżącą kopię na nowy poziom określony przez wyrażenie Depth * 500 — zatem im większa jest wartość zmiennej Depth tym wyżej w bieżącym stosie zostanie przesunięty klon klipu Point. Funkcja te nie zastępuje zawartości poziomu, do którego przechodzi, lecz zamienia zawartości dwóch poziomów, co jest szczególnie pomocne, gdy dwa punkty posiadają jednakową wartość zmiennej Depth.
Rozdział 15-402
Obrót wokół osi X Podobnie równania dla obrotu wokół osi x, obliczające współrzędne y i x, będą wyglądać mniej więcej tak (patrz plik sample_09.fla): Ypos = y * sin(kąt) + z * cos(kąt) Zpos = z * sin(kąt) - y * cos(kąt)
A rezultat będzie zbliżony do efektu z pliku sample_05.fla z tym wyjątkiem, że teraz już cztery punkty obracają się wokół osi x.
Obiekt trójwymiarowy Do tego momentu obliczaliśmy obrót wokół poszczególny osi oddzielnie, za każdym razem przypisując do obliczenia po dwie współrzędne na punkt. Jednakże, aby powstała iluzja obracania trójwymiarowego obiektu, każdemu punktowi musimy przypisać współrzędną x, y i z, a obliczenia dla wszystkich trzech osi należy wykonać dla każdego punktu. Następny rysunek ilustruje sytuację, w której do wytłoczenia dwuwymiarowego kwadratu w celu wygenerowania sześcianu, musimy wygenerować cztery dodatkowe punkty, a do każdego z nich również należy przypisać współrzędną z:
Końcowy sześcian unosi się w trójwymiarowej przestrzeni współrzędnych z punktem początkowym 0,0,0. W oparciu o ten rysunek możemy stwierdzić, że trójwymiarowe współrzędne dla sześcianu, takiego jak ten, o rozmiarze 100 na 100 na 100 jednostek, w punktem środkowym w pozycji (0,0,0), będą wyglądać następująco: Punkt0: x = -50, y = -50, z = 50 Punkt1: x = 50, y = -50, z = 50 Punkt2: x = -50, y = 50, z = 50 Rozdział 15-403
Punkt3: x = 50, y = 50, z = 50 Punkt4: x = -50, y = -50, z = -50 Punkt5: x = 50, y = -50, z = -50 Punkt6: x = -50, y = 50, z = -50 Punkt7: x = 50, y = 50, z = -50 Zamiast wykonywać obliczenia dla obrotu wokół pojedynczej osi, jak robiliśmy do tego momentu w funkcji drawPoints, dokonamy obliczeń dla wszystkich trzech osi jednocześnie. Z tego względu musimy wprowadzić trzy nowe zmienne, które będą kontrolować kąt obrotu wokół każdej osi. Nazwiemy te zmienne Xangle, Yangle i Zangle i zastąpimy nimi ogólną zmienną Angle, jaką stosowaliśmy do tej pory. Zmienna Xangle będzie reprezentować kąt obrotu wokół osi x, zmienna Yangle wokół osi y, a zmienna Zangle wokół osi z. Nowy zestaw równań można zatem podzielić na trzy części i będzie on wyglądać następująco: Obrót x: Ypos_Temp = y * sin(Xangle) + z * cos(Xangle) Zpos_Temp = z * sin(Xangle) - y * cos(Xangle)
Obrót y: Xpos_Temp = x * sin(Yangle) + Zpos_Temp * cos(Yangle) Zpos = Zpos_Temp * sin(Yangle) — x * cos(Yangle)
W tych równaniach, zmienne Xpos_Temp, Ypos_Temp i Zpos_Temp służą jako tymczasowe zmienne stosowane w miejsce zmiennych x, y i z w celu dojścia do wartości dla zmiennych Xpos, Ypos i Zpos. Zatem, po przypisaniu wartości zmiennym Xpos, Ypos i Zpos pod powyższymi równaniami wpisujemy wiersz kodu definiujący zmienną Depth, a na koniec nowe pozycji punktów zostają narysowane na ekranie poprzez pomnożenie wartości zmiennej Depth z wartościami zmiennych Xpos i Ypos i określenie właściwości _x i _y każdego punktu w taki sam sposób, jak w poprzednim przykładzie. W tym przypadku również zastosowaliśmy zmienną Depth do określenia właściwości _xscale i _yscale dla każdego klonu Point. A oto skrypt tworzący funkcję drawPoints (sample_10.fla): // funkcja drawPoints function drawPoints () { for (c = 0; c < verticeNum; c++) { // obrót X Ypos_Temp = y[c] * Math.sin (Xangle) + z[c] * Math.cos (Xangle); Zpos_Temp = z[c] * Math.sin (Xangle) - y[c] * Math.cos (Xangle); // obrót Y Xpos_Temp = x[c] * Math.sin (Yangle) + Zpos_Temp * Math.cos (Yangle); Zpos = Zpos_Temp * Math.sin (Yangle) - x[c] * Math.cos (Yangle); // obrót Z Xpos = Xpos_Temp * Math.sin (Zangle) + YPos_Temp * Math.cos (Zangle); Ypos = Ypos_Temp * Math.sin (Zangle) - Xpos_Temp * Math.cos (Zangle); // perspektywa
Na tym etapie warto podzielić się z tobą użyteczną wskazówką: nie zawsze konieczne jest obliczanie obrotu wokół wszystkich trzech osi, aby mogły powstać trójwymiarowe efekty. Czasami niezbędne jest obrócenie obiektu wokół osi z, lecz nie zawsze. Ogólnie mówiąc, ograniczenie kodu we Flashu jest dobrym pomysłem, dzięki czemu będziemy mogli obliczyć tylko obroty x i y: Obrót x: Ypos = y * sin(kątX) + z * cos(kątX) Zpos = z * sin(kątX) - y * cos(kątX)
Obrót y: Xpos = x * sin(kątY) + Zpos * cos(kątY) Zpos = Zpos * sin(kątY) — x * cos(kątY)
W ten sposób nie będą już nam potrzebne dodatkowe tymczasowe zmienne (patrz plik sample_11.fla). Jednakże, dla potrzeb tego ćwiczenia, nadal będziemy korzystać z oryginalnych równań obliczających obrót wokół wszystkich trzech osi. Aby przejść z pliku sample_09.fla do sample_10.fla musimy również zmienić funkcję setAngle aby zdefiniować wartości dla zmiennych wszystkich trzech kątów (Xangle, Yangle i Zangle). Dokonamy tego poprzez trzykrotne powielenie istniejącego skryptu zmieniając nazwy zmiennych: function setAngle () { Xangle = Xdegrees * (Math.PI / 180); Yangle = Ydegrees * (Math.PI / 180); Zangle = Zdegrees * (Math.PI / 180); Xdegrees = Xdegrees + 2; Ydegrees = Ydegrees + 2; Zdegrees = Zdegrees + 2; }
Wartości, które dodajemy do stopni degrees na końcu kodu określają o ile każda oś ma się obrócić. Na przykład, wartość 0 zatrzyma sześcian obracający się na danej osi, a wartość ujemna spowoduje obracanie się obiektu w przeciwnym kierunku. Oczywiście wartości te można definiować z zastosowaniem innych wyrażeń. Na przykład, aby obrócić obiekt w oparciu o ruch myszy, możemy zmienić skrypt aby wyglądał tak (sample_12.fla): function setAngle () { Xangle = Xdegrees * (Math.PI / 180); Yangle = Ydegrees * (Math.PI / 180); Zangle = Zdegrees * (Math.PI / 180); Xdegrees = this._xmouse; Ydegrees = this._ymouse; Zdegrees = 0; }
Rozdział 15-405
Ustawienie stopni Xdegrees i Ydegrees na bieżącą lokalizację wskaźnika myszy jest najprostszym sposobem na uzyskanie omawianego efektu, lecz możemy również zastosować bardziej skomplikowane skrypty aby uzyskać inny ruch i interakcję. W ten sposób dotarliśmy do ostatniego etapu. Na razie mamy w systemie 8 punktów wokół punktu środkowego, lecz możemy chcieć nadać obiektowi jakąś strukturę poprzez połączenie poszczególnych punktów liniami. W tym celu utworzymy kolejną funkcję o nazwie drawLines, która będzie tworzyć pętlę dla kilku linii, jakie chcemy umieścić. Aby połączyć linie w sześcianie, będziemy potrzebować dwanaście linii, lecz niestety we Flashu nie możemy definiować współrzędnych poszczególnych punktów dla linii w środowisku ActionScript. Musimy znaleźć na to jakiś inny sposób. Rozwiązanie polega na zastosowaniu klipu filmowego zawierającego pojedynczą ukośną linię, którego zeskalujemy poziomo i pionowo pomiędzy punktami, które mają zostać połączone. Film powinien mieć identyczne właściwości szerokości, wysokości i skali (_width, _height i _scale) wówczas, gdy jego punkty końcowe odpowiadają punktom przeznaczonym do połączenia — innymi słowy, potrzebujemy klip filmowy o rozmiarze 100 na 100 jednostek, gdy skalowany jest w 100%. Oznacza to, że jeśli znamy odległość pomiędzy dwoma punktami, wówczas potrzebujemy jedynie ustawić właściwości _scale klipu filmowego na tą odległość, aby nadać mu odpowiednią długość. Aby utworzyć taki klip filmowy, narysuj ukośną linię biegnącą w dół od lewej do prawej pod katem 45 stopni i w panelu Info ustaw wartości X i Y na 0, aby górny lewy koniec linii stał się „środkiem” klipu filmowego. Ustaw szerokość i wysokość na 100.
Nazwij tą kopię klipu filmowego Line. W ujęciu 1 klipu filmowego Move3D w pliku sample_13.fla przypisujemy zmiennej o nazwie LineNum wartość 12. Reprezentuje ona liczbę linii, którymi połączymy wszystkie punkty w sześcianie:
Rozdział 15-406
Następnym krokiem jest dwunastokrotne powielenie klipu Line, nazywając kopie Line0, Line1, Line2 i tak dalej, a następnie ustawiając widoczność oryginalnego klonu na 0: lineNum = 12; // powielamy linie for (c = 0; c < lineNum; c++) { duplicateMovieClip ("Line", "Line" + c, c + verticeNum); } Line._visible = 0;
Aby skrypt odpowiedzialny za łączenie wszystkich linii „wiedział”, które punkty należy połączyć, przygotujemy dla każdej linii listę punktów do połączenia. Dokonamy tego poprzez przypisanie zmiennych o nazwie LineXStart i LineXEnd do każdej z linii, gdzie X oznacza liczbę, którą dodamy do nazwy każdego klipu filmowego w ostatnim fragmencie kodu. Lista wygląda tak: // określamy informacje o liniach Line0Start = 0, Line0End = 1; Line1Start = 0, Line1End = 2; Line2Start = 1, Line2End = 3; Line3Start = 2, Line3End = 3; Line4Start = 0, Line4End = 4; Line5Start = 1, Line5End = 5; Line6Start = 2, Line6End = 6; Line7Start = 3, Line7End = 7; Line8Start = 7, Line8End = 6; Line9Start = 7, Line9End = 5; Line10Start = 5, Line10End = 4; Line11Start = 6, Line11End = 4;
Zatem, dla linii Line0 punktem zakotwiczenia będzie punkt Point0 (Line0Start), a zostanie ona rozciągnięta do punktu Point1 (Line0End). Linia Line1 zostanie połączona od punktu Point0 do Point2 i tak dalej. Pierwsze cztery linie wyglądać będą tak:
Rozdział 15-407
Następnie dodamy funkcję, która połączy punkty. Jest to zadanie nowej funkcji DrawLines w ujęciu 1, która jest odpowiedzialna za tworzenie pętli skryptu umieszczającego linie: // funkcja drawLines; function drawLines () { for (c = 0; c < lineNum; c++) { this["Line" + c]._x = this["Point" + (this["Line" + c + "Start"])]._x; this["Line" + c]._y = this["Point" + (this["Line" + c + "Start"])]._y; this["Line" + c]._xscale = this["Point" + (this["Line" + c + "End"])]._x →this["Point" + (this["Line" + c + "Start"])]._x; this["Line" + c]._yscale = this["Point" + (this["Line" + c + "End"])]._y — →this["Point" + (this["Line" + c + "Start"])]._y; } }
Ten skrypt ustawia właściwości _x i _y każdej linii jako równe właściwościom _x i _y punktu reprezentującego punkt początkowy linii (LineXStart), a następnie skaluje linię z zastosowaniem różnicy pomiędzy właściwościami _x i _y dwóch punktów przez nią połączonych. Ten cały mechanizm działa, ponieważ, jeśli zeskalujemy coś ujemnie, wówczas możemy efektywnie odbić to przez jego oś. Zatem, jeśli chcemy aby linia Line wyglądała następująco...
Oznacza to, że skalujemy klip Line przez -8% na osi x, ustawiając szerokość klipu filmowego na -8 i skalujemy os y przez -10%, ustawiając wysokość klipu filmowego na -10. Po zastosowaniu wartości na wszystkich liniach, mamy to, co sobie zaplanowaliśmy: sześcian w trójwymiarowej przestrzeni:
Rozdział 15-408
W ten sposób zakończyliśmy konstrukcję podstawowej maszyny 3D, którą można bez problemu zaadaptować dla własnych potrzeb, w zależności od rodzaju aplikacji. Ukończony model znajduje się w pliku sample_13.fla na płycie CD-ROM dołączonej do książki.
Zakończenie Następnym etapem będzie eksperymentowanie poprzez zmianę współrzędnych poszczególnych punktów aby przekonać się, w jaki sposób zmiany te wpłyną na model. Spróbuj również umieszczać dodatkowe punkty w systemie poprzez zmianę wartości zmiennej verticeNum i określanie dla nich początkowych współrzędnych. Stosunkowo łatwym zadaniem będzie przekształcenie tego modelu w dynamiczny system, w którym użytkownik mógłby kontrolować głębię lub liczbę punktów za pomocą wejściowego pola tekstowego, lub po prostu przyciskami plus i minus i obserwować zmiany zachodzące w czasie rzeczywistym. Na zakończenie pamiętaj, że te współrzędne nie muszą być statyczne. Piękno tego systemu polega na tym, że możemy resetować pozycje punktów podczas każdej pętli systemu, mniej więcej w taki sam sposób jako określaliśmy zmienne odpowiedzialne za definiowanie kątów obrotu. Daje nam to możliwość przesuwania punktów w obrębie systemu, a to jest z kolei podstawą na której zostały przygotowane przykłady omówione na początku tego rozdziału.
Rozdział 15-409
Rozdział 16 Obiektowe gry Flasha Główni twórcy witryn internetowych wykonanych we Flashu dopiero zaczynają opanowywać zawiłości projektowania witryn internetowych i dynamicznej zawartości, lecz wydaje się, że wielu ludziom to jeszcze nie wystarcza. Coraz częściej klienci poszukują projektantów programujących również gry we Flashu, układanki i inne multimedialne „dodatki”, uważając, że takie elementy przyciągną na dłużej użytkowników do danej witryny. Istnieje również bardziej subtelny powód, dla którego klienci przepadają za tymi grami i wygaszaczami ekranu — można je wykonać w formie samodzielnych plików do pobierania, które użytkownik zabierze do grania czy oglądania offline. Ich monitory stają się wówczas tysiącami darmowych wirtualnych bilboardów, wszystkie do wzięcia! Podobno reklamodawców cieszą różnorodne media w ich reklamach internetowych, a nie przychodzi mi do głowy nic bardziej różnorodnego od interaktywnej gry przyciągającej wyczekiwane kliknięcie.
Patrząc w przyszłość, Sieć zdecydowanie odchodzi od jej drukowanych początków (czyli stron z tekstem i statyczną zawartością), w kierunku czegoś, co bardziej zasługuje na nazwę „elektronicznych mediów”. Z interaktywnymi elementami i animacją, Flash w dużej mierze zapoczątkował ten ruch, lecz tworzonych jest coraz więcej zaawansowanych interfejsów. Niektóre z nich są już tak znacznie oddalone od języka HTML, a nawet od prostych witryn internetowych wykonanych we Flashu, że zaczynają podkradać pomysły ze świata gier komputerowych, takie jak na przykład symulacja rzeczywistego ruchu czy dynamiczne inteligentnie animowane elementy. Nasza pierwsza konkluzja jest więc taka, że wiedza o projektowaniu i programowaniu gier Flasha nie jest zarezerwowana jedynie dla guru języka ActionScript Flasha, który chce się popisać. Jest to natomiast ujawniająca się umiejętność, dzięki której możesz znaleźć się (i twoi klienci) na przedzie tłumów.
Trasa Istnieje jednak kilka powodów, dlaczego projektowanie gier tak znacznie się różni od projektowania tradycyjnych witryn internetowych we Flashu, i należy być ich świadomym, zanim zaczniesz pracę. Projektowanie witryn internetowych można przeprowadzić na wiele różnych sposobów, od wersji „bez języka ActionScript’ w górę. Gry są inne pod tym względem, że zastosowanie języka ActionScript jest mniej lub bardziej konieczne, włącznie z dynamiczną animacją opartą na zdarzeniach (animacja oparta na listwach czasowych po prostu się tutaj nie nadaje). Zanim jednak zbytnio się podekscytujemy, należy wspomnieć o ograniczeniach Flasha, które również musimy wziąć pod uwagę. Pod koniec rozdziału zaprojektujemy i zaprogramujemy grę Flasha, która omija wszystkie wady Flasha i czerpie jak najwięcej z możliwości tego programu. Postaramy się wprowadzić Rozdział 16-410
popularne strukturalne metody, które będziesz mógł zastosować we własnych grach. Omówimy również dwie złote zasady projektowania i tworzenia gry, w jaką ludzie będą chcieli grać. Oprócz strukturalnej metody, nie ma żadnych skrótów. Pisanie gry we Flashu jest jednym z najtrudniejszych zastosować języka ActionScript, a ponieważ utworzona przeze mnie gra jest dosyć znacznie naszpikowana matematyką, gra Savior z pewnością nie jest dla bojaźliwych. Jest to gra, dla stworzenia której możesz zastosować wszystkie twoje nowe zdolności. Zagraj w nią, przeanalizuj, a jeśli chcesz, udoskonal.
Jeśli wolisz, możesz już teraz rzucić okiem na grę otwierając plik savior.fla, lecz zanim przejdziemy dalej z jej opisem, zajmijmy się najpierw złymi wiadomościami.
Ograniczenia Flasha jako środowiska gier Podczas pisania gry we Flashu należy zdać sobie sprawę z kilku ograniczeń tego programu, z których dwa najważniejsze zostały przedstawione poniżej. Zanim jednak przybierzesz zbyt pesymistyczne podejście do tego projektu, muszę przyznać, że ograniczenia te nie należą do grupy ograniczeń niemożliwych do obejścia tylko takich, dla ominięcia których należy wymyślić jakiś sposób. Zaraz zobaczysz, o co mi chodzi... Przeglądarka to nie to samo co konsola do gier Zaleta konsol gier jest taka, że można gry wyświetlać na ekranie telewizora, który to charakteryzuje się mniejszą rozdzielczością niż przeciętny monitor komputerowy. Wczesne gry wideo były uruchamiane w rozdzielczości wynoszącej maksymalnie 320×256 pikseli z 8 kolorami. Nawet dla konsoli PlayStation i Nintendo64 rozdzielczość 400×300 pikseli jest w zupełności wystarczająca. Ponadto, procesory stosowane w konsolach gier wideo przeznaczone są wyłącznie dla uruchomienia gry, a kod gry zapewnia maksymalną kontrolę nad sprzętem. W przeglądarce internetowej natomiast Flash nie posiada żadnej z tych korzyści. Nie ma kontroli nad rozdzielczością ekranu, która zazwyczaj jest dosyć duża (przeważnie 1024×768 z 24bitami kolorów, czyli wymaganiami przekraczającymi nawet obecne możliwości komputerów przeznaczonych głównie do gier). Ponadto, nawet jeśli komputer docelowy wyposażony jest w super procesor 1GHz z gigabajtem pamięci operacyjnej, biedna wtyczka Flasha jest stosunkowo daleko w hierarchii zasobów systemu. Nie może liczyć na swobodne zastosowanie całej mocy, jak również na wykorzystanie tej uroczej karty graficznej 3D, którą kiedyś kupiłeś. Flash posiada mechanizm renderowania nieodpowiedni dla wielu tradycyjnych gier Rozdział 16-411
W sercu większości sprzętu do gier, znajdują się dwa elementy: bitmapowy mechanizm duszków/przewijania/skalowania (stosowany we wczesnych maszynach Sega i Nintendo), lub pracujący w czasie rzeczywistym mechanizm 3D/mapowania tekstur (stosowany w większości nowoczesnych konsol). Czasami otrzymujesz obydwa, jak w przypadku DirectX API firmy Microsoft, który oświecił rynek gier na peceta. Flash nie posiada żadnego z nich: wyposażony jest natomiast w dwuwymiarowy, wektorowy mechanizm do renderingu, który został zoptymalizowany dla minimalnego rozmiaru plików kosztem prędkości. Maszyna ta potrzebuje wtyczki Flasha do utworzenia każdego ujęcia rysunków w czasie wykonawczym, opartego na skompresowanym formacie zawierającym jedynie dane punktów i wypełnienia dla każdego elementu graficznego. Mechanizm działa wolno, gdy stosowany jest z mapami bitowymi (ponieważ, nie został on do nich przystosowany) i niezbyt dobrze obsługuje trójwymiarowej wieloboki w czasie rzeczywistym (ponieważ wtyczka nie posiada po prostu priorytetu procesora do obsługi tak wymagającego elementu).
Tworzenie gier mimo ograniczeń Jest to dosyć przygnębiający zestaw ograniczeń — co, jeśli cokolwiek, możemy więc powiedzieć w obronie Flasha? No cóż, istnieje mimo wszystko kilka sposobów na ominięcie tych pułapek, a ponadto mamy po naszej stronie całkiem niezły język programowania. Zajmijmy się teraz sposobami przezwyciężenia tych ograniczeń. Możesz: • Twórz stosunkowo niewielki obszar gry. Jest to ulubiona technika stosowana w większości gier Flasha. Poprzez przygotowanie małego z nie skalowalnego obszaru gry, program poradzi sobie z rysunkami wyświetlanymi na ekranie. Przy odrobinie pomysłowości, można utworzyć widoczny ekran bardzo duży, a aktywny obszar gry o wiele mniejszy, a gra nie będzie wówczas wyglądać klaustrofobicznie. • Twórz małe duszki gry. Jest to jedynie odmiana pierwszej możliwości, lecz pozwala ci ona na zastosowanie większego obszaru gry. Pamiętaj, że mówimy tutaj o wektorowej maszynie Flasha, w przypadku którego znaczenie wyrazu „małe” różni się od znaczenia tego samego wyrazu w mechanizmie bitmapowym. Flash traktuje ukośną linię biegnącą od lewego górnego rogu ekranu do dolnego prawego jako „mały” rysunek, ponieważ jest on prosty i szybki do narysowania, gdyż wystarczą do tego jedynie dwa punkty. W przypadku maszyny bitmapowej słowo to oznaczałoby mapę bitową w trybie pełnoekranowym i o wiele bardziej złożoną. Poprzez tworzenie rysunków z zastosowaniem tej fundamentalnej różnicy na twoją korzyść, uwolnisz Flasha od wielu trudności związanych z emulacją bitmapowej gry. • Używaj mniej poruszających się duszków w jednym momencie. Aby obszar gry nie wyglądał na zbyt pustawo, umieść w nim wiele ruchomych obiektów, lecz nie w tym samym czasie. Klasyczne gry wideo cierpiały z powodu sprzętu o niewystarczającej mocy, lecz ich twórcy obeszli to ograniczenie poprzez zastosowanie prostej grafiki i stylizowanych środowisk gry. Analizując pomysły zastosowane we wczesnych grach można się naprawdę wiele nauczyć i dzięki zdobytej wiedzy stworzyć najbardziej uzależniającą grę w historii. Istnieje przykład wielu takich obejść stosowanych w samym Flashu 5. zastosuj polecenie Help|About Flash i natychmiast dwukrotnie kliknij na logo „M” firmy Macromedia na wyświetlonym oknie About Flash. Jeśli uczynisz to zanim pojawią się u dołu po lewej trzy przyciski (team, thanks i legal), a następnie wciśniesz przycisk thanks, uzyskasz dostęp do uzależniającej, lecz niezwykle prostej gry o nazwie Gold Rush (posiadającą również przycisk
Rozdział 16-412
powrotu do pracy, „come back to work”, gdyby nagle pojawił się twój szef), która bardzo dobrze działa na maszynie Flasha o „minimalnych wymogach sprzętowych”. Dodatkowo możesz również dwukrotnie kliknąć na logo firmy Macromedia więcej niż jeden raz, aby wyświetlić skaczące „M”!
Ta gra doskonale ilustruje moje podejście do gier we Flashu: chociaż masz niewielkie zasoby i musisz stosować niewielki obszar gry, możesz zastosować tego ograniczenia na twoją korzyść. Sytuacja taka zmusza cię do wymyślania, zamiast polegania na przeciążonych prerenderowanych scenach i wspomaganiu szybkiego sprzętu. Zalety Flasha umożliwiają nam maksymalne wykorzystanie tych problemów, jeśli będziemy pracować uważnie i w obrębie ograniczeń. Jako użytkownicy Flasha 5, mamy luksus strukturalnego, obiektowo zorientowanego języka, obiektu graficznego bezpośrednio wspomagającego animację (czyli klipu filmowego) i możliwość wprowadzenia skomplikowanych hierarchii nie tylko w obrębie kodu, lecz również w obrębie rysunków, poprzez osadzone listwy czasowe. Jak zobaczymy później, ta kwestia jest niezwykle istotna, gdyż dzięki niej możesz w prosty sposób przeprowadzić trudne skądinąd operacje. Chociaż nie mamy możliwości uruchamiania naszych gier przy optymalnej prędkości sprzętowej, mamy ActionScript, który posiada wspomaganie ważnych elementów, takich jak sterowane zdarzeniami struktury, wykrywanie kolizji i wbudowane warstwy ekranu. Możemy rozszerzyć struktury kodu na same rysunki, ponieważ Flash 5 traktuje wszystkie elementy jako obiekt, bez względu na to, czy będzie to kod czy rysunek. Jest to naprawdę świetna rzecz, gdyż (jak się o tym już wkrótce przekonamy), pozwala nam ona na zorganizowanie struktur rysunków w obiekty emulujące skomplikowane elementy gry.
Szablon gry Flasha Zanim przejdziemy do omówienia kodu stosowanego w grze opracowywanej w tym rozdziale, zdefiniujemy ogólny szablon projektu gry, odpowiedni dla środowiska Flasha. Ponieważ gry mogą być bardziej złożone od witryn internetowych, musimy być uważni i stosunkowo wcześnie projektować strukturę, aby mechanizm naszej gry (czyli kod uruchamiający grę) nie wyglądał w efekcie jak talerz spaghetti. System opisany poniżej ilustruje sposób dodawania takiej struktury, a miałem możliwość udoskonalić go w kilku grach Flasha. Chociaż nie jest to jedyna metoda, jaką można zastosować, wykorzystuje ona ulepszenia poczynione w języku ActionScript Flasha 5, pomocne w tworzeniu obiektowej struktury.
Rozdział 16-413
Jak już wspomnieliśmy, nowością we Flashu 5 jest traktowanie wszystkiego jako obiektu, włącznie z rysunkami (dzięki magicznemu obiektowi MovieClip). Chociaż Flash nie wspomaga bezpośrednio zaawansowanych elementów animacji potrzebnych w projekcie gry, można je wykonać od początku w środowisku Flasha. W moim systemie zastosowałem klipy filmowe jako podstawowy obiekt, a każda gra animuje się sama za pomocą kodu ActionScript osadzonego w klipie filmowym. W ten sposób definiowana jest lokalna struktura dla każdego animowanego elementu gry, lecz nie struktura globalna, w której umieszczamy wszystkie pojedyncze fragmenty. System obchodzi ten problem poprzez zdefiniowanie hierarchii, która wykorzystuje zdolność Flasha do osadzania klipów filmowych w innych klipach filmowych — czyli, w zasadzie, umożliwia nam tworzenie hierarchii niezależnych listew czasowych. Podobnie jak wiele innych rzeczy, systemu gry nie da się skonstruować dopóki nie zobaczysz odpowiedniego przykładu i nie przeanalizujesz procesu „wypełniania” szablonu w celu utworzenia gry. Radzę, zatem, przeczytać poniższą część rozdziału poświęconą szablonowi gry, zapamiętując jak najwięcej informacji, a następnie przyjrzeć się kodowi ilustrującemu zastosowanie podanej teorii w praktyce, gdyż dzięki temu naprawdę będziesz mógł wszystko zrozumieć. Naprzód!
Duszki gameSprite Przede wszystkim zaczniemy od wytłumaczenia stosowanej przeze mnie terminologii. Znaczenie wyrazu „duszek” (ang. sprite), stosowanego przez Macromedia Director, różni się nieco od mojej definicji tego wyrazu. Moje znaczenie jest bliższe definicji „duszka” używanej przez programistę gier, lecz aby uniknąć pomyłek, nazwę moją odmianę duszka mianem gameSprite. Duszek gameSprite jest to dynamiczny rysunek kontrolujący swój własny ruch i wygląd. Nie trzeba umieszczać go na listwie czasowej aby wiedział, co ma robić, ponieważ wszystko potrafi wykonać sam. Po umieszczeniu go na scenie, gameSprite wykona wszystkie swoje zadania, bez pomocy z zewnątrz. gameSprite może również modyfikować swoje zachowanie w oparciu w reguły określone przez środowisko gry. Jeśli umieścimy duszka gameSprite w odrobinie innym środowisku o (powiedzmy) mniejszej grawitacji, lub większym tarciu, wówczas duszek gameSprite zbierze nowe informacje i zacznie stosować się do obowiązujących reguł. Duszki gameSprite animują siebie za pomocą nowej we Flashu 5 nawy ścieżki this. Po zmniejszeniu animacji opartej na zdarzeniach, wykonujemy animację poprzez odniesienie się do nazwy kopii i jej właściwości, na przykład: mójFilm._x = mójFilm._x + 10;
Powyższy kod przeniósłby kopię mójFilm o 10 pikseli na prawo poprzez zwiększenie właściwości _x klipu filmowego — lecz w takiej sytuacji konieczne jest podanie nazwy kopii. Ścieżka this, natomiast, odnosi się do listwy czasowej, z której wywoływane jest polecenie: this._x = this._x + 10;
Jeśli napiszę ten kod w ujęciu na listwie czasowej klipu mójFilm, wówczas poruszy się sam klip filmowy: klip filmowy sam powoduje własną animację! Jest to właśnie podstawowy element konstrukcji duszka gameSprite. Poprzez wpisywanie języka ActionScript w obrębie klipów filmowych, z zastosowaniem ścieżki this jako celu, nadajemy klipom filmowym kontrolę nad nimi samymi!
Rozdział 16-414
Świat gier Aby duszki gameSprite mogły czynić swoją magię, musimy skonfigurować „świat” gry, zrozumiały dla gameSprite. W tym celu należy skonstruować strukturalny związek pomiędzy naszym światem i gameSprite, coś w tym rodzaju:
Na tym rysunku duże pole reprezentuje świat gry, w którym umieszczony został nasz gameSprite. Świat gry powinien dostarczyć duszkowi różnych informacji o jego konstrukcji, takich jak granice, stałe fizyczne i funkcje. W podobny sposób, duszek gameSprite również będzie musiał przekazać do świata gry (a raczej do pozostałych duszków gameSprite umieszczonych w tym świecie) pewne informacje, w zależności od tego, jaką czynność wykonuje: takie informacje noszą nazwę status duszka. Za chwilę omówimy te elementy szczegółowo, lecz na razie stoi przed nami poważniejsze zadanie połączenia tego wszystkiego z Flashem. Ścieżki Świat gry jest listwą czasową Flasha, podczas gdy gameSprite jest listwą czasową w obrębie świata gry — będzie nim klip filmowy na listwie czasowej świata gry. Na powyższym rysunku przedstawiliśmy ta zależność poprzez umieszenie gameSprite w polu świata gry. Aby duszek gameSprite mógł pobrać informację ze świata gry, należy zastosować poniższą ścieżkę: _parent.information
Jeśli, jednak, świat gry chce się czegoś dowiedzieć od duszka gameSprite zastosuje taką ścieżkę (gdzie zmienna spriteName oznacza nazwę kopii duszka): spriteName.information
Preferowane jest stosowanie pierwszej ścieżki, ponieważ nie są wówczas wymagane żadne nazwy kopii. gameSprite prosi o podanie danych z poziomu _parent (czyli poziomu świata gry) i w razie potrzeby można je umieścić z powrotem za pomocą tej samej ścieżki. Jak się nad tym zastanowisz, okaże się, że w taki sam sposób działa również nasz świat: znajdujemy się w interakcji ze światem, a nie on z nami, ponieważ my jesteśmy istotami obdarzonymi inteligencją. W świecie gry takimi istotami są duszki gameSprite i właśnie one zajmują się przekazem danych. Świat gry jest to po prostu teren, w którym można się poruszać, opisany za pomocą danych.
Rozdział 16-415
Poziomy Opracowujemy zatem sposób zastosowania umiejętności Flasha do zastosowania osadzonych listew czasowych w celu reprezentowania dwóch poziomów. Ścieżką świata gry będzie albo _root albo _root.world, a wszystkie duszki gameSprite w obrębie tego świata będą reprezentowane przez poziom powyżej: _root.spriteName lub _root.world.spriteName. Listwy czasowe Flasha są stosowane do przedstawiania wzrastającej liczby szczegółów. Nie musimy koniecznie zatrzymać się na ścieżce _root.world.spriteName, ponieważ w obrębie duszków gameSprite możemy dodać wszystkie rodzaje kontrolujących klipów filmowych do modyfikacji zachowania duszków (będę się odnosić do tego zagadnienia pod nazwą klip filmowe zachowania). Ponadto, jeśli zastosujemy preferowaną ścieżkę _parent, nie musimy (w większości przypadków) znać nazwy kopii elementu, aby go kontrolować, a to z kolei uwalnia nas od wielu kłopotów. Podczas projektowania moich gier Flasha rysuję wiele diagramów takich jak powyższy, gdyż stanowią one klucz do reprezentowania w prosty sposób złożonej struktury gry Flasha. W naszym zorientowanym obiektowo podejściu, omawianym tutaj, diagram przedstawia dwa obiekty (świat gry i duszka gameSprite), ich względne pozycje w hierarchii świata gry, jak również ich interfejsy (czyli rodzaj i zawartość komunikacji, jaka musi między nimi zaistnieć). W najbliższej dyskusji diagramy będą obejmować również inne elementy, więc szczegółowo omówimy każdą informację w nich zawartą. Limity Limity są to rzeczy, których duszkowi gameSprite nie wolno wykonywać. Wszystkie światy gier muszą się składać przynajmniej z jednego zestawu limitów: granic świata, poza które nie wolno duszkowi wyjść. Nazwę je limitami granic:
W najprostszym typie świata gry, który składa się tylko ze sceny Flasha, limity granic odnoszą się do rozmiaru samej sceny. Domyślny rozmiar sceny wynosi 550x400, zatem limity dla tego rozmiaru będą wyglądać tak, jak na powyższym rysunku. gameSprite odczyta te wartości ze świata i będzie wiedzieć, że nie wolno mu przekroczyć tych granic. W bardziej złożonych grach, duszek musi znać również inne wartości, takie jak jego pozycja startowa czyli miejsce, w którym zostaje „zrodzony” w świecie gry. Stałe fizyczne Duszek gameSprite będzie zawierać algorytmy, które wprawiają go w ruch i powodują zatrzymanie go. W prawdziwym świecie przestrzegamy prawa fizyki, takie jak grawitacja, zależności pomiędzy siłą i przyspieszeniem i tarcie. Moglibyśmy przygotować wartości, które
Rozdział 16-416
dopasowałyby te prawa do algorytmów samych duszków gameSprite, dzięki czemu znałby je tuż po „urodzeniu”, lecz nie jest to najlepszy pomysł z dwóch powodów: • Wartości te mogą się różnić w każdej grze. Chcemy uczynić naszego duszka gameSprite jak najbardziej modularnym, abyśmy mogli go przeciągnąć i upuścić w nowej grze z innymi prawami fizyki. W ten sposób otwieramy również możliwość definiowania ogólnego mechanizmu gameSprite, którego możemy dopasować i zastosować w nowych grach. • Te fizyczne „stałe” mogą zmieniać się w czasie. Zazwyczaj chcemy, aby z biegiem czasu gra stawała się coraz trudniejsza. Najprostszym sposobem na dokonanie tego jest ułatwienie „wrogim” duszkom gameSprite poruszania się w świecie gry — możemy więc zmniejszyć takie elementy jak tarcie lub zwiększyć ich maksymalną prędkość. Wówczas świat gry staje się bardziej nieprzyjazny dla gracza, ponieważ wrogowie sprawiają wrażenie, jakby stawali się silniejsi. Najlepszym sposobem na przekazanie duszkowi gameSprite informacji o stałych fizycznych w jego świecie gry jest umożliwienie mu odczytania ich ze świata po każdych jego narodzinach. Funkcje Podobnie jak stałe fizyczne, czasami przydaje się skonfigurowanie zupełnie nowych praw fizyki, czyli dużych tabeli wartości. Można tego dokonać za pomocą funkcji. Jeśli, na przykład, modelujemy przyspieszenie, gameSprite poinformowałby świat: „Moja bieżąca prędkość wynosi tyle, a działająca na mnie siła przyspieszenia jest taka”. Skoro już poznałeś te wartości, powiedz mi, jak będzie moja nowa prędkość”. Status duszka GameSprite W naszym świecie będzie mieli kilka duszków gameSprite i na pewnym etapie będą musiały się między sobą porozumiewać. Można tego dokonać na dwa sposoby w zależności od liczby duszków, które będą chciał uzyskać tą samą informację. Jeśli istnieje jeden duszek gameSprite, który zawiera informację potrzebną kilku innym duszkom, rozprowadzamy ją poprzez umieszczenie jej w świecie, jak tylko powstający gameSprite ją pozna. W efekcie tworzymy z tej informacji pewien rodzaj limitu gry. W grze Space Invaders, na przykład, wszyscy obcy muszą dowiedzieć się dwóch rzeczy od statku gracza: „Gdzie jesteś?” (aby mogły strzelać lub skierować się w tym kierunku) i „Czy jesteś już martwy?” (aby wiedziały, że wygrały).
W świecie przedstawionym powyżej, duszek gameSprite player zna swoją pozycję dzięki lokalnym zmiennym shipX (pozycja x) i shipY (pozycja y). Po śmierci gracza gameSprite Rozdział 16-417
player utworzy również boolowską wartość shipDead = true. Jeśli duszek player będzie stale udostępniać te trzy porcje danych światowi gry (tworząc w ten sposób dane globalne), wówczas każdy obcy (alien) może uzyskać do nich dostęp w następujący sposób: _parent.shipX _parent.shipY _parent.shipDead
Zauważ, że przekazanie tej informacji nie wymagało podania duszkom gameSprite żadnych nazw kopii. Oznacza to, że możemy pisać ogólne procedury odnoszące się do ogólnego świata gier.
Lecz istnieje również druga opcja komunikacji: jeśli gameSprite A chce dowiedzieć się czegoś od gameSprite B, musi poprosić B o tą informację. Ta sytuacja również odzwierciedla to, co dzieje się w rzeczywistym świecie: jeśli chcę dowiedzieć, się, gdzie jest mój brat, dzwonię do niego i pytam — lecz w tym celu muszę znać jego numer na komórkę. We Flashu odpowiednikiem numeru telefonu mojego brata jest ścieżka do klipu B z klipu A, i to się może stać problematyczne, ponieważ w tym przypadku jest już wymagana nazwa kopii. Poradzenie sobie z tym problemem wymaga uważnego tworzenia struktury świata gry aby zapewnić, że takie transfery danych będą możliwe tylko w jednym kierunku (zazwyczaj od duszka gameSprite kontrolowanego przez gracza, który zazwyczaj jest jedynym duszkiem budzącym zainteresowanie innych, czyli jedyną nazwą kopii, jaka musi pojawić się w kodzie). Kolejny poziom? Czasami potrzebny jest poziom nawet bardziej fundamentalny niż poziom świata. Ja nazywam go poziomem systemowym. Na tym poziomie umieszczane są elementy, które w zasadzie nie należą do świata gry, lecz są potrzebne do przygotowania Flasha do obsługi gry. W nowoczesnej grze komputerowej, takie rzeczy jak inicjalizacja sprzętu, obsługa joysticka i karty graficznej 3D zazwyczaj umieszczane są właśnie na tym poziomie. W mojej grze Savior również zastosowałem poziom systemowy z dwóch względów: • Świat gry, włącznie z wszystkimi duszkami gameSprite i wszelkimi pozostałymi elementami w nim zawartymi, same się skalują (czyli sprawiają wrażenie, jakby się powiększały i pomniejszały). Potrzebowałem poziom systemowy do umieszczenia w nim elementów, które nie miały być skalowane wraz ze światem, jak na przykład wynik gracza. • Zastosowałem poziom systemowy do zdefiniowania obiektów dźwiękowych dla gry, o czym będziemy mówić później.
Klipy filmowe zachowania W naszym systemie jest jeszcze jeden końcowy poziom szczegółów: elementy umieszczone w samym duszku gameSprite. Dlatego musimy wprowadzić ostatni blok w naszym systemie tworzenia gry. Cała inteligencja została zainwestowana w duszki gameSprite. Z czasem stanie się ona bardzo skomplikowana, ponieważ duszki zapewne będą wykonywać kilka czynności na raz. Ogólnie, duszek gameSprite może: • Animować siebie, upewniając się że znajduje się w obrębie limitów gry, jednocześnie... • Wykrywając kolizję w innymi duszkami gameSprite, jednocześnie... • Obliczając kierunek, w którym będzie zmierzać w następnym ujęciu, w oparciu o jego ostateczne miejsce przeznaczenia i stałe fizyczne świata gry, jednocześnie...
Rozdział 16-418
•
Odbierając dane wejściowe od użytkownika.
gameSprite kontrolowany przez użytkownika czasami nazywany jest również awatar. Słowo to, pochodzące z języka hinduskiego i oznaczające „bóstwo w ciele człowieka lub zwierzęcia odwiedzające ziemię”, jest także stosowane przez użytkowników gier przygodowych do określania „ludzkiego gracza w formie cyfrowej odwiedzającego świat wirtualny”. To samo zagadnienie, różne poziomy.
Aby zwiększyć swoją efektywność, duszek gameSprite musi wykonać wszystkie te czynności w każdym ujęciu. Kod dla duszka mógłby stać się bardzo skomplikowany, lecz istnieje inny sposób: możemy podzielić duszka gameSprite:
Podobnie jak ActionScript, możemy osadzić kolejne klipy filmowe w duszku gameSprite służące do wykonywanie określonej operacji, jak na przykład jednej z tych wymienionych wyżej. Nazywam je klipami filmowymi zachowania, gdyż kontrolują one części całościowego zachowania gameSprite w obrębie świata gry. Zachowanie jest to osadzony klip filmowy, w taki sam sposób jak sam duszek gameSprite jest osadzony w świecie gry. Do kontrolowania właściwości gameSprite lub określania w nim zmiennych, klip filmowy zachowania używa ścieżki _parent. Aby odnieść się do poziomu „świata”, klip filmowy zachowania stosuje ścieżkę _parent._parent (czyli przechodzi w górę o dwa poziomy). Jest to rozwiązanie różne od kodu ActionScript zastosowanego w duszku gameSprite, który (jak napisaliśmy powyżej) użyłby ścieżki this aby przekazać kontrolę samemu sobie. Ze stosowania klipów filmowych zachowania zamiast kodu ActionScript wewnątrz duszka gameSprite wynikają trzy korzyści: • Modularność. Poprzez podzielenie duszka gameSprite na oddzielne części, upraszczamy go. To z kolei stanowi zaletę pod względem wielokrotnej używalności — możemy, na przykład, użyć zachowania „kolizja” w każdym duszku gameSprite, gdzie jest to konieczne. • Równoległe przetwarzanie. Możemy zastosować osadzone listwy czasowe do przeprowadzenia kilku czynności jednocześnie. Każde zachowanie uruchamiane jest w tym samym czasie jako listwa czasowa duszka gameSprite, lecz oddzielnie od niego, a każda listwa kontroluje poszczególne części zachowania duszka w tym samym czasie co inne zachowania wykonują własne zadania. Wyobraź je sobie jako załogę dobrego statku o nazwie gameSprite: mamy na nim żeglarza odpowiedzialnego za sterowanie (zachowanie ruchu), żeglarza siedzącego w bocianim gnieździe i wypatrującego lądu lub innych statków (zachowanie wykrywania kolizji) i tak dalej. • Tworzenie złożonego zachowania duszka gameSprite poprzez interakcję prostych składników. Każde zachowanie narzuca duszkowi gameSprite określoną funkcję.
Rozdział 16-419
Jeśli funkcje te nakładają się na siebie, zachowania zostaną do siebie dodane. Na przykład, jeśli mamy klip filmowy zachowania który zmniejsza rozmiar duszka gameSprite i inny wprawiający go w wibrację, wówczas gameSprite będzie jednocześnie kurczyć się i wibrować. Poprzez konstruowanie bardziej użytecznych interakcji, będziemy robić to samo co natura: tworzyć złożone (a nawet chaotyczne) zachowanie poprzez interakcję kilku prostych, oddzielnych reguł. I oto cały system gry! Chociaż pozostaje jeszcze wiele rzeczy do zrozumienia, pamiętaj, że system ten składa się tylko z trzech elementów: świata gry, duszka gameSprite i klipu filmowego zachowania. Jak już uda ci się kilka razy je zastosować, będziesz sobie dawać z nimi tak świetnie radę, jakby były twoją drugą naturą. Zobaczysz jak teoria przedstawiona w tym rozdziale powoli zacznie przenikać do twoich projektów internetowych, a gdy się to już stanie, konkurencja będzie miała problem!
Wygląd i działanie gry Po całej tej teorii chyba czas, aby nasze mózgi powróciły do normalnej temperatury. Po schłodzeniu ich możemy odejść od technicznych zagadnień i dla odmiany zabrać się za stronę estetyczną: jak będzie wyglądać nasza gra i co powinna robić? Co w zasadzie tworzy dobrą grę? Widziałem już wiele gier Flasha, które wyglądały tak, jakby powstały z zastosowaniem technik języka ActionScript, lecz sam projekt gry grał drugie skrzypce. Świat jest naprawdę pełen przeciążonych gier Shockwave o następujących projektach: „Będziemy mieć ośmiornicę (wykonaną w stylu Disneya) rzucającą puszki firmowego delikatnego napoju, które gracz-nurek musi złapać w przydużą skorupę małży. Jest to świetny pomysł, ponieważ napój nosi nazwę „Agua”, a... no cóż... nurkowie i ośmiornice pływają w wodzie!”
Odgryzę sobie język, jeśli ten pomysł stanie się wielkim hitem na konsolach gier następnej generacji, lecz mocno wątpię, że to kiedykolwiek nastąpi. Ta gra sprowadza się do „łapania”, z mnóstwem dodatkowych „dekoracji”. Jeśli zajmiesz się tą grą w domu, proszę, potraktuj to jako ćwiczenie! A i owszem, projektuj sobie bogatą grafikę, jeśli twój klient na to nalega, lecz nie umieszczaj jej w grze dopóki sama gra nie zostanie ukończona, stosując w razie potrzeby modele i kontury. Do utworzenia gry przedstawionej w tym rozdziale, czerpałem inspirację z gier, które w mojej opinii stanowią trójcę klasycznych strzelanin: Defender, Galaga i Asteroids. Niemniej jednak nie wykonałem mojej gry poprzez skopiowanie różnych fragmentów tych trzech i połączenie ich w coś w rodzaju gry Frankenstein, gdyż chciałem poszerzyć ten gatunek poprzez dodanie najlepszych właściwości Flasha, a które były niemożliwe do uzyskania w czasie programowania tych gier. Zgodnie z definicją, tworzenie gier retro nie jest nowością, lecz część tego zjawiska jest zdumiewająco aktualna: ograniczenia i ułatwienia wczesnych programistów, które w większości przypadków są takie same jak omówione przez nas ograniczenia Flasha w zastosowaniu do tworzenia gier dla Internetu.
Rozdział 16-420
Pisząc ten rozdział, zwróciłem uwagę na podstawowe zasady przestrzegane w tych klasycznych grach i spróbowałem utworzyć listę zagadnień próbując odpowiedzieć sobie na pytanie, dlaczego gry te tak świetnie działały. Poniżej przedstawiam listę „projektowania dobrej gry”, wynik moich przemyśleń: • Gra musi stopniowo stawać się coraz trudniejsza, aby gracz mógł zauważyć postęp w czasie. We wczesnych grach, sprowadzało się to do przechodzenia na kolejne poziomy gry, lecz ostatnio dołączony został również rozwój postaci, uzyskiwanie dostępu do różnych obszarów gry i konieczność przestrzegania coraz bardziej zaawansowanych zasad. • Gracz powinien mieć dobrze zdefiniowane cele. • Gra powinna przedstawiać wiarygodny (lub przynajmniej spójny) świat. W szczególności gracz powinien intuicyjnie rozumieć zasady obowiązujące w tym świecie (chyba że celem gry jest ich odkrycie). Zauważ, że ani „wiarygodny”, ani „spójny” nie oznaczają „wierny”. Jednym z głównych zmartwień w projektowaniu gier jest zdecydowanie, jak mało realistycznych szczegółów należy umieścić w grze, aby gracz nadal dał się wciągnąć. • Gra musi reagować, co z kolei powinno stanowić priorytet nad graficznym wyglądem (gry, których dominującym elementem jest wygląd, są typowym przykładem tego, co nazywam grami „przeciążonymi”). • Gracze muszą wierzyć, że gdy przegrają, będzie to porażka sprawiedliwa, i zawsze powinni być w stanie ją przewidzieć. Jeśli przybliża się do mnie obcy, powinienem być pewien, że gdy zbije on mój statek, powodem mojej śmierci będzie zbyt wolna reakcja, chociaż miałem okazję przewidzieć taką sytuację i uniknąć jej. • Gracz powinien wierzyć, że jego przeciwnik jest inteligentny, a nie, że jego zachowanie jest coraz to bardziej niekonsekwentne. Na przykład, jeśli w opisanej przeze mnie grze z ośmiornicą, umarłem ponieważ znajdowałem się po lewej stronie i przypadkiem ośmiornica rzuciła puszkę na prawą stronę ekranu, gdzie nie miałem żadnej szansy na złapanie jej, oznaczałoby to, że projekt tej gry jest łzy. Jeśli, jednak, wiedziałbym, że powinienem się trzymać określonej pozycji (w środku) i wydawałoby mi się, że ośmiornica inteligentnie stara się odciągnąć mnie od tego miejsca, wówczas czułbym się, jakbym walczył z prawdziwym przeciwnikiem (jest to w rzeczywistości bardzo subtelna rzecz do uzyskania, ponieważ w większości gier przeciwnik zdobywa inteligencję w oparciu o jedną lub kilka losowo wybranych wartości, które zwiększają się z czasem aby uczynić obcego szybszym, uderzenia tenisisty bardziej trafne i tak dalej). • Musi istnieć możliwość udoskonalania swoich umiejętności w trakcie gry (jest to kolejny dobry powód na unikanie niekonsekwentnego zachowania przeciwnika, którego trudno pokonać, nawet przez gracza doświadczonego). Ta właściwość właśnie sprawia, że gracz powraca do danej gry i stanowi ona cechę dobrze przemyślanej gry. Rozdział 16-421
A oto pierwsza z moich złotych reguł projektowania gier: dowiedz się, co potrzebne jest do zaprojektowania dobrej gry w wybranym przez ciebie gatunku. Zrób to zanim zaczniesz ją kodować, gdyż w innym razie będziesz zwracać uwagę tylko na to, co jest łatwe do utworzenia, a przeoczysz istotne pytanie: „Czy ludzie będą w to grać?”
Przyjrzałem się sposobowi działania trzech wybranych przeze mnie gier, regułom w nich przestrzeganym i ich mechanizmowi. Wkrótce kilka punktów stało się dla mnie oczywistych: • W grze Asteroids zastosowano proste liniowe rysunki. Gdybym zrobił to samo, wykorzystałbym świetną właściwość Flasha: rysowanie wektorów. • W grach Defender i Galaga użyto małe duszki, zatem konieczność ograniczenia się do równie małych we Flashu nie stanowi problemu. • Defender i Galaga przedstawiają światy gry wymagające przewijania, lecz sprzęt, na których były one wówczas uruchamiane nie obsługiwał tej funkcji. Programiści rozwiązali ten problem poprzez zastosowanie linii reprezentującej ruchomy krajobraz i gwiazdy. Pod każdym względem oszukali gracza przekonując go, że znajduje się w poruszającym się świecie, jedynie poprzez przesuwanie malutkich kropek (gwiazd) lub konturów wzgórz (narysowanych przy pomocy linii). Flash jest dobry w rysowaniu obu tych elementów, ponieważ należą one do grafiki wektorowej. • Statek kosmiczny w Asteroidach obraca się i porusza po ekranie w sposób bardziej realistyczny niż nieskomplikowanym ruchem w prawo-lewo w górę-dół zastosowanym w dwóch pozostałych grach. Jednakże, nie przewija się gdy wychodzisz poza krawędź ekranu, a tylko pojawia się ponownie na drugiej stronie tworząc efekt zawijania. Sądziłem, że Flash potrafi więcej niż tylko przewijanie czy zawijanie, lecz nie bardzo wiedziałem co. Następny etap polegał na naszkicowaniu pomysłów dla mojej gry. Pomijając już to, że z Flash lepiej sobie daje radę z wektorami niż mapami bitowymi, postanowiłem zastosować grafikę wektorową również z powodów projektu. W niewielu grach Flasha zastosowano tą technikę; zazwyczaj używane są w nich małe symbole składające się zarówno z wektorów jak i wypełnień. Ja spróbowałem narysować kilka statków kosmicznych obcych jedynie z zastosowaniem linii i udało mi się stworzyć coś takiego:
A oto druga z moich złotych reguł projektowania gier: nie czuj się zniechęcony ograniczeniami (zazwyczaj spowodowanymi grafiką). Zastanów się nad tym, co możesz zrobić i wprowadź to do swojego projektu poprzez uproszczenie i odrealnienie twojego świata i żyjących w nim postaci.
Zastosowanie prostych wektorów oznaczało, że Flash poradzi sobie nie tylko z poruszaniem tych rysunków: będzie już również całkiem szybko skalować i obracać. Odkryłem, że zamiast przewijania ekranu w czasie ruchu umieszczonych na nim elementów, mógłbym zastosować efekt pomniejszenia (podobny do ruchu kamery używanego do objęcia dwóch postaci biegnących w przeciwnych kierunkach). Ponadto, zamiast nudnych map bitowych, poruszających się jak wycinanki, pomyślałem sobie, że wszystkie elementy mojej gry mogłyby się w każdej chwili obracać. W efekcie poprzez zastosowanie pomniejszania i obracania gra nabierze dosyć staroświeckiego wyglądu, lecz jak tylko gracza raz w nią zagra i
Rozdział 16-422
zobaczy, jak się poruszają w niej obiekty, przekona się, że ma przed sobą świetną interaktywną animację. Brzmi całkiem łatwo, lecz zauważ, że na tym etapie nie określiłem jeszcze szczegółowej charakterystyki (co na pewno miałbym już za sobą w przypadku projektu witryny internetowej). Chociaż klient może narzucić pewne elementy, które muszą pojawić się w grze, a także podać mi określony temat, wolę pozostawić samo kodowanie na koniec, ponieważ tego, czy gra będzie grywalna czy nie, nie można od tak sobie zakodować. Musisz eksperymentować podczas pracy, wprowadzając odpowiednie zmiany w trakcie projektowania.
Na początku... Reasumując, chciałem zaprojektować grę w stylu retro, lecz przewyższającą możliwości starszych gier. Zdecydowałem, że będzie to strzelanina, lecz przeciwnicy będą poruszać się w bardziej inteligentny sposób niż tylko atakując „w dół ekranu”, co było charakterystyczne dla takich gier jak Space Invaders. Rozpocznijmy od samego początku. Musimy stworzyć świat i wypełnić go fizycznymi właściwościami, które scharakteryzują cyfrowy teren, miejsce zamieszkania duszków gameSprite. Według Greków, Bóg jest czystą myślą rozważającą samą siebie, lecz w moim świecie gry, ja jestem Bogiem, i ja mówię, że On jest więcej niż tylko myślą. Musimy podejść do naszego świata od strony praktycznej i zadać wiele pytań: • Co, według mnie, ma się dziać i czy mogę tą akcję jakoś podzielić? • Co znajdzie się w środku mojego świata i co ono będzie chciało ode mnie wiedzieć? • Czego nie muszę umieszczać w świecie? Istnieje pewna legenda związana z grą wideo Defender. Jej twórca, Eugene Jarvis, spędził wiele miesięcy próbując zaprojektować grę dla producenta, Williamsa i jedynym co udało mu się zaprezentować pod koniec tego okresu, był przesuwający się krajobraz. Na koniec, gdy pozostało już tylko kilka dni przed ostatecznym terminem, nagle dostał olśnienia i zaprogramował obcych i statek gracza w zaledwie kilka godzin. Morał tej historyjki jest taki, że świat gry jest najważniejszym jej elementem. Jest to opoka, na której tworzy się całą grę. Jak już zadziała świat gry, pozostałe jej elementy podążą za nim; jeśli jednak coś jest z nim nie tak, nie zajdziesz zbyt daleko. W tym rozdziale praca nad naszą grą ma taką zaletę, że z wyprzedzeniem mogę ci pokazać, w jaki sposób ją sobie wyobraziłem. Jeśli jeszcze się nie skusiłeś, zanim przejdziemy dalej zagraj w grę umieszczoną w pliku savior.fla. Poniżej przedstawiłem listę elementów potrzebnych do utworzenia świata dla tej gry: • Ogólne funkcje obrotów rotacji umożliwiające duszkowi gameSprite obracanie się wokół własnej osi. • Reguły, jakich będzie przestrzegać gameSprite aby mógł obrócić się w kierunku drugiego duszka. • Jak zeskalować świat gry, aby wszystkie duszki gameSprite zawsze były widoczne na ekranie. Jeśli spróbujemy utworzyć te wszystkie elementy na raz w jednym pliku FLA, będzie to dosyć skomplikowane zadanie. Lepszym sposobem będzie zidentyfikowanie najpierw największych utrudnień, jakim ty, jako bóg swojego świata gry, musisz stawić czoła, i rozprawienie się z nimi oddzielnie, w testowym pliku FLA. Ja uznałem, że najtrudniejszymi problemami do rozwiązania są dwa pierwsze punkty przedstawione powyżej i postanowiłem, Rozdział 16-423
że zajmę się nimi najpierw. Gdybym nie mógł... no cóż, gra w znacznym stopniu opiera się na tych dwóch elementach, więc gdybym nie dał sobie z nimi rady, musiałbym ponownie przemyśleć mój plan.
Dynamika obrotów Postanowiłem wbudować do mojego świata dynamikę obrotów, ponieważ opracowanie ruchu po łuku zużywa więcej mocy komputera niż opracowanie ruchu w linii prostej. Ilustruje to istotny aspekt tworzenia światów gier: konieczność ograniczenia złożonych kalkulacji poprzez obliczenie trudnych elementów przed rozpoczęciem gry. W symulatorach lotu i tym podobnych mechanizmach stosuje się wcześniej obliczone tabele służące do rozpracowania takich skomplikowanych rzeczy jak określanie współczynnika oporu dla danego trybu lotu, czy minimalnego kąta, przy którym samolot zaczyna nurkować przy danej prędkości i w trakcie ładowania bomby. Te tak zwane tabele przeglądowe stosowane są w wielu grach do unikania skomplikowanych obliczeń w czasie rzeczywistym bez konieczności uciekania się do upraszczania (co z kolei mogłoby zmniejszyć autentyczność gry). W grze Asteroids nie zastosowano żadnej dynamiki obrotów. Asteroidy prawdę mówiąc wcale się nie obracają, a na statek gracza nie składa się nic więcej oprócz klipu filmowego złożonego z wcześniej narysowanych ujęć, które, gdy oglądane w kolejności, sugerują obracający się statek kosmiczny.
Dla naszej gry poszukiwałem czegoś bardziej zaawansowanego, gdyż zależało mi na zaprezentowaniu ci sposobu zastosowania złożonych obliczeń matematycznych w czasie rzeczywistym bez spowalniania modelu świata gry. Otwórz plik savior_test01.fla, w którym możesz obrócić statek za pomocą klawiszy strzałek w lewo i w prawo, a także poruszyć statek klawiszem strzałki w górę. To właśnie był test, jakiego wykorzystałem do zdefiniowania statku gracza, jego interakcji z użytkownikiem, podstawowym światem gry i dynamiką obrotów narzuconą przez prawa działające w tym świecie. Ten plik FLA demonstruje sposób konfiguracji mojego świata, którą można streścić w poniższym diagramie:
Przede wszystkim powinieneś wiedzieć, że ten rysunek wykonałem zanim napisałem kod w języku ActionScript (którego umieściłem w ujęciu 1 na listwie głównej czasowej _root) i możesz dzięki temu przekonać się, jak bardzo przydatnym się okazał po prostu poprzez dosłowny opis diagramu w skrypcie.
Rozdział 16-424
Utworzyłem obiekt o nazwie world do przechowania w nim wszystkich parametrów świata gry. Chociaż mogłem zdefiniować je jako oddzielne zmienne, zastosowanie obiektu polepsza strukturę gry — dzięki temu od razu widać, że wszystkie te zmienne należą do poziomu świata, gdyż posiadają związane z nim nazwy, zawsze składające się z wyrazu world, oznaczającego świat, i drugiego członu: world.coś. Limity .xMin i .xMax definiują limity szerokości świata. .yMin i .yMax definiują limity wysokości świata. .xCenter i .yCenter definiują środek świata (który zostanie zastosowany jako punkt narodzin duszka gameSprite gracza). Stałe fizyczne .linSpeed definiuje maksymalną prędkość liniową. .rotSpeed definiuje maksymalną prędkość rotacyjną (czyli jak szybko gameSprite może się obracać). .friction definiuje stała tarcia, która będzie spowalniać ruch i modeluje sumę wszystkich sił opóźniających działających na duszka gameSprite. Pozostałe wartości nie stanowią części obiektu world, ponieważ nie są ani limitami świata ani stałymi, lecz elementami pomagającymi mi w ustanawianiu fizycznych praw. Funkcje Aby można było opracować sposób poruszania się gracza, musimy dokonać pewnych obliczeń trygonometrycznych i w tym właśnie miejscu będziemy potrzebować tabel przeglądowych. W pierwszym ujęciu filmu gry Flash zastosuję te funkcje do obliczenia tabel przeglądowych poprzez posortowanie sinusów i kosinusów zakresu kątów w kilku tablicach: sin[] definiuje tabelę przeglądową wcześniej obliczonych wartości sinusa, od 0 do 360 stopni z przyrostem co 1 stopień. cos[] definiuje tabelę wcześniej obliczonych wartości kosinusa, od 0 do 360 stopni, z przyrostem co 1 stopień. Obiekt Math funkcji trygonometrycznych zamiast stopni stosuje radiany, gdzie ◊ (czyli pi, 3.141...) radianów równa się 180 stopni. W matematyce radiany są używane w zaawansowanej geometrii, ponieważ ◊ bardzo często pojawia się w obliczeniach geometrycznych, natomiast naukowcy i inżynierowie używają radianów z tego samego powodu. Reszta z nas woli jednak stopnie, gdyż nie jesteśmy w stanie wyobrazić sobie kąta o wartości 0.7854 radiana (wartość ta równa jest 45 stopniom, czyli połowie kąta prostego). Z tego powodu, i ponieważ indeksami tablic powinny być liczby całkowite, ja wyraziłem moje tablice sinus/kosinus w stopniach.
Inne hidden jest to wartość, którą dodałem już w trakcie pracy, a reprezentuje ona pozycję (x,y) punktu znajdującego się poza ekranem, gdzie mogę umieścić jakiś element, który ma pozostać ukryty. Lepiej zdefiniować takie miejsce jako zmienną niż zastosować jedynie współrzędne na przykład (-100, -100), ponieważ jest to jedna z tych śmiesznych rzeczy, do których powrócisz pół roku później i pomyślisz, „Dlaczego, na Boga, umieszczam tam duszka gameSprite?” Film Poniżej przedstawiliśmy pełny kod dla ujęcia 1 klipu filmowego _root: // tworzymy i inicjalizujemy ogólne obiekty
Rozdział 16-425
// konfiguracja świata world = new object(); world = {xMax:550, xMin:0, yMax:400, yMin:0, linSpeed:7, rotSpeed:5, friction:0.98}; with (world) { world.xCenter = (xMax-xMin)/2; world.yCenter = (yMax-yMin)/2; } // różne stałe hidden = -100; // tworzymy i zapełniamy tablicę funkcji trygonometrycznych. sin = new Array(360); cos = new Array(360); for (i=0; i<=360; i++) { radian = (i/360)*2*Math.PI; sin[i] = Math.sin(radian); cos[i] = Math.cos(radian); }
Zauważ, że już teraz zaczyna się wdzierać skomplikowana struktura kodu. Mamy już tyle wartości, że wystarczyłyby nam dla całej witryny internetowej wykonanej we Flashu, a to dopiero początek! Dlatego właśnie, aby zrobić szybkie postępy potrzebujemy system tworzenia gry. Drugą rzeczą jaką można zauważyć jest, oprócz zastosowania klipów filmowych jako obiektów gameSprite, użycie obiektów danych Flasha 5 (tablic i obiektu Object) do utworzenia strukturalnego systemu zarządzania zmiennymi danych. Jeśli kiedykolwiek chciałeś zobaczyć ulepszenia języka ActionScript Flasha 5 zorientowanego obiektowo programowaniu, trafiłeś we właściwe miejsce, ponieważ w końcowej wersji gry będzie ich mnóstwo. W bibliotece dla pliku savior_test01.fla znajdziesz trzy klipy filmowe:
Ponieważ będę stosować klipy filmowe do różnych zadań, zorganizowałem nazwy pozycji w bibliotece w system z prefiksami, dzięki któremu mogę je odróżnić. Prefiks ma oznacza „klip filmowy ActionScript” i odnosi się do klipu filmowego zawierającego wyłącznie kod ActionScript — zazwyczaj jest to klip filmowy zachowania. Prefiks sp oznacza „klip filmowy duszek” i odnosi się do klipu filmowego działającego jako duszek gameSprite. Statek kosmiczny Najważniejszym elementem jest klip filmowy sp.player, który definiuje statek kosmiczny gracza. Przyjrzyjmy się poniższemu diagramowi:
Rozdział 16-426
Duszek gameSprite dla statku gracza inicjalizuje jego pozycję startową odnosząc się do zmiennych world.xCenter i world.yCenter ze świata gry. Ponadto pobiera również wartość zmiennej world.rotSpeed do zdefiniowania prędkości obracania się, a wartość zmiennej world.linSpeed do zdefiniowania prędkości poruszania się. Zmienna world.friction służy do zdefiniowania sił opóźniających działających na statek i odczytuje ona limity świat world.xMax, .xMin, .yMax i .yMin, aby poznać obszar świata gry. Na koniec stosuje również obliczenia z tabel przeglądowe sin i cos. Statek gracza tworzy również swoje własne wewnętrzne zmienne: xPos i yPos (oznaczają jego bieżącą pozycję w świecie gry), angle (bieżący kąt lub orientację), xVel i yVel (bieżące prędkości w kierunku x i y), thrust (bieżąca siła ciągu statku poruszająca go do przodu) i thrusting (zmienna boolowska informująca nas, czy gracz w tym właśnie momencie odpala silniki). Następnie stosuje również klip filmowy zachowania o nazwie ma.playerControls do łączenia się z użytkownikiem przez klawiaturę, a ta zależność z kolei używa kolejnego zdefiniowanego przez użytkownika obiektu o nazwie input. Główny kod ActionScript poruszający duszkiem gameSprite gracza znajduje się w ujęciu 2 klipu filmowego o nazwie sp.player. Stosuje on właściwości obiektu input (.leftPress, .rightPress, .thrustPress i .firePress), które zostaną ustawione na true po wciśnięciu klawisza na klawiaturze odpowiadającego danej akcji. Manewrowanie Pierwszy blok kodu w ujęciu 2 odpowiedzialny jest z rotację statku. Jeśli chcemy obrócić go w lewo (czyli w kierunku przeciwnym do ruchu wskazówek zegara), musimy zmniejszyć kąt (odejmując od niego prędkość obrotu). Jeśli chcemy obrócić go w prawo (czyli zgodnie z ruchem wskazówek zegara), zwiększamy kąt dodając do niego wartość zmiennej world.rotSpeed, czyli prędkość obrotu:
Rozdział 16-427
I tu napotykamy na pewien problem. Ponieważ pełny obrót wynosi 360 stopni, musimy ograniczyć nasz kąt do zakresu od 0 do 360 stopni i za to właśnie jest odpowiedzialny drugi blok kodu: // obliczamy nowy obrót statku if (input.leftPress) { angle = angle-rotSpeed; } if (input.rightPress) { angle = angle+rotSpeed; } // ograniczamy kąt pomiędzy 0 i 360 stopni if (angle<0) { angle = angle+360; } else if (angle>360) { angle = angle-360; }
No to prosta część jest już za nami. Teraz przejdźmy do czegoś trudniejszego. We Flashu możemy przesuwać statek tylko w dwóch kierunkach: w prawo i w lewo (płaszczyzna x poprzez zmiany właściwości _x), lub w górę i w dół (płaszczyzna y, poprzez zmiany we właściwości _y). A co się stanie, jeśli statek przesuwa się pod pewnym kątem w stosunku do tych dwóch płaszczyzn?
Przychodzi nam tutaj z pomocą trygonometria, ponieważ możemy obliczyć dwa składniki prędkości naszego statku za pomocą jego kąta. Poprzez uformowanie trójkąta prostokątnego, gdzie kierunek statku (czyli wektor siły ciągu) tworzy przeciwprostokątna, możemy obliczyć składnik x i y stosując w tym celu odpowiednio sinus i kosinus. Chcemy ograniczyć ruch naszego statku do wartości zmiennej linSpeed, wiec również zmienna ta pojawia się w Rozdział 16-428
równaniu, lecz jedyne, co tutaj wykonujemy, to rozbijamy składniki prędkości x i y(xVel i yVel) poprzez zastosowanie wartości kąta statku. Zanim omówimy sam kod, powrócimy jeszcze na chwile na lekcje matematyki, na których uczyłeś się o kartezjańskich współrzędnych x i y, w których wartość współrzędnej y wzrasta im wyżej strony się przesuwasz. We Flashu stosowane są osie współrzędnych x i y takie jak w przeglądarkach, gdzie wartość współrzędnej y wzrasta im bardziej przesuwasz się w dół, zatem może się pojawić znak minus w wartości zmiennej yVel, gdy tego najmniej się będziesz spodziewać. Ponieważ korzystamy tutaj z tabel przeglądowych, zastosowanie trygonometrii nie spowoduje spowolnienia statku (obliczanie wartości sinusa i kosinusa w czasie rzeczywistym wymaga zastosowania w programie długiej i znacznie obciążającej procesor funkcji, a tego zdecydowanie nie chcemy). // obliczamy nowe wektory prędkości thrusting = false; linSpeed = _parent.world.linSpeed; if (input.thrustpress) { thrusting = true; if (Math.abs(xVel)
Teraz musimy zmienić pozycje naszego statku (xPos, yPos) poprzez dodanie wartości prędkości (xVel, yVel) obliczonych powyżej. Do modelowania tarcia mnożę wartości prędkości przez stałą fizyczną friction. Ponieważ uzyskana w ten sposób wartość jest mniejsza od 1, spowoduje ona z czasem spowolnienie statku: // modelujemy tarcie (redukuje prędkość w czasie) xVel = xVel*_parent.world.friction; yVel = yVel*_parent.world.friction; // obliczamy nowe pozycje statku xPos = xPos+xVel; yPos = yPos+yVel;
Zanim faktycznie przesuniemy statek musimy jeszcze sprawdzić czy nowa pozycja, do której chcemy przenieść statek nie znajduje się poza granicami świata gry. Jeśli tak, wówczas kod „zawinie” statek na drugą stronę sceny. Dzięki temu jeśli wyjdziemy poza lewą stronę ekranu, instrukcje if zresetują naszą pozycję na prawą stronę: if (xPos>_parent.world.xMax) { xPos = _parent.world.xMin; } if (xPos<_parent.world.xMin) { xPos = _parent.world.xMax; } if (yPos>_parent.world.yMax) { yPos = _parent.world.yMin; } if (yPos<_parent.world.yMin) { yPos = _parent.world.yMax; }
Tyle jeśli chodzi o obliczenia. Możemy teraz poruszyć naszego duszka gameSprite poprzez narysowanie go w nowej pozycji i pod nowym kątem: // animujemy statek w oparciu o najnowsze wartości
Podczas grania w grę z pliku savior_test01.fla zauważysz, że statek pozostawia za sobą słup dymu, utworzony w klipie filmowym sp.exhaust. Zastosowałem ten klip jako wizualną wskazówkę, aby upewnić się, że statek poprawnie przekształca wektor siły ciągu w składniki x i y, lecz wygląda to całkiem ładnie. Nie wykorzystałem tego efektu w końcowej wersji gry, wiec nie będziemy go omawiać, lecz jeśli chcesz, możesz przeanalizować ten element i zastosować go w swoich własnych projektach. Najlepszym sposobem na przeanalizowanie działania pliku FLA jest przejście do trybu debugowania i zaobserwowanie w jaki sposób zmieniają się wartości zmiennych podczas ruchu statku. Ponieważ w kodzie zastosowałem dwie dosyć duże tablice (sin i cos) okno debugowania zablokuje się na chwilę, jeśli będziesz chcieć obejrzeć zmienne w filmie _root, lecz wystarczy poczekać kilka sekund, a wszystko powróci do normy. W ostatecznej wersji gry (savior.fla) duszek gameSprite gracza jest prawie taki sam jak ten, którego omawialiśmy, z tym wyjątkiem, że oddziałuje również na duszka pocisku. Gdy przejdziesz do ukończonej gry będziesz mógł się przekonać, w jaki sposób zastosowałem w niej wyniki uzyskane w testowym pliku FLA.
Spotkanie z wrogiem Naszym kolejnym zadaniem jest utworzenie takiego duszka gameSprite, który, obracając się, będzie mógł skierować się w stronę innego duszka. Statki obcych w końcowej wersji gry wyposażone są w taką umiejętność podczas poruszania się w kierunku statku gracza. Zdaje się, że czeka nas jeszcze jedno spotkanie z trygonometrią. Przyjrzyjmy się plikowi savior_02test.fla. W tym pliku FLA zastosowaliśmy klip filmowy zachowania o nazwie ma.point, który wprawia w rotację każdy osadzony w nim klip filmowy aż będzie wskazywać na bieżącą pozycję myszy. Klip ma.point nie wykonuje jednak całej czarnej roboty, ponieważ wywołuje on funkcję o nazwie arctan zdefiniowaną w klipie filmowym ma.FastTrigLibrary. Omówię tą funkcję, gdyż używam jej w głównej grze i jest ona najbardziej skomplikowaną częścią pliku savior_02test.fla. Otwórz klip ma.FastTrigLibrary i przyjrzyj się skryptowi umieszczonemu w ujęciu 1.
Załóżmy, że obcy znajduje się w punkcie (x,y), a nasz statek w punkcie (h,k). Obcy musi znać wartość zmiennej kąta angle, ponieważ jeśli obróci się w tym kierunku, skieruje się w stronę statku. Wartość tego kąta może zawierać się pomiędzy 0 i 360 stopniami, lecz jeśli spróbujemy narysować trójkąt prostokątny, utkniemy. Z obliczeń uzyskamy jedynie wartość zmiennej angle2 przedstawionej na powyższym rysunku, która znajduje się w zakresie pomiędzy 0 i 90 stopniami i równa jest arctan((h-x)/(k-y)).
Rozdział 16-430
Możemy obliczyć wartość zmiennej angle1 poprzez sprawdzenie, w której ćwiartce względem punktu (x,y) położony jest punkt (h, k). Określimy to poprzez sprawdzenie, czy wartość x jest większa czy mniejsza od wartości h i czy wartość y jest większa bądź mniejsza od wartości k. W ten sposób dowiemy się, czy wartość zmiennej angle1 równa się 0 (kwadrant 1), 90 (2), 180 (3) czy 270 (4). Ten test przeprowadzony jest w pierwszej części funkcji arctan: function arcTan (x, y, h, k) { // przywracamy kąt wektora[(x,y),(h,k)]. // najpierw ustawiamy kąt na najbliższe 90 stopni za pomocą kwadrantów... if (h>x) { if (k
Następnie musimy sprawdzić jaki jest kąt angle2 — i jak zwykle, w tym tkwi problem. Jeśli wartości k i y są równe, różnica (k-y) wyniesie 0 a próbowanie podzielenia przez zero skończy się błędem. Jednakże, sytuacja taka zachodzi tylko wówczas, gdy kąt angle1 wynosi albo 90 albo 270 stopni a kąt angle2 0 stopni, zatem w tym przypadku możemy po prostu ustawić kąt angle2 na zero bez przeprowadzania obliczeń. Jeśli wartości h i x są sobie równe, nie powinno być żadnego problemu, ponieważ zero podzielone przez jakąkolwiek liczbę nadal pozostaje zerem. Jednakże, już wielokrotnie moja kariera była niweczona przez zakładanie, że zasada ta jest słuszna (Miałem poważne problemy z industrialnym, komputerowym systemem kontroli, który obliczył tą wartość jako nieskończoność), więc teraz zazwyczaj o tym pamiętam. Dlatego też w tym przypadku również ustaw kąt angle2 od razu na zero. I wreszcie, jeśli długość przyległego bądź przeciwległego boku (lecz nie obydwu) trójkąta wyrażona jest liczbą ujemną, z obliczeń tangensa uzyskamy „niewłaściwy’ kąt, dlatego pod koniec tej funkcji dodałem jeszcze trochę trygonometrii. Rozwiązuje ona wspomniany problem poprzez zamianę boków w obliczeniach, a także, za pomocą funkcji Math.abs, sprawia, że wartość tan zawsze będzie dodatnia (jako dodatkowy efekt powstaje tabela przeglądowa o rozmiarze o połowę mniejszym niż gdziekolwiek indziej). // konfigurujemy tangens (tan(theta)=opp/adj) trójkąta którego nasz wektor jest przeciwprostokątną... adjacent = h-x; opposite = k-y; if ((adjacent == 0) || (opposite == 0)) { tan = 0; } else { tan = opposite/adjacent; if (tan<0) { tan = 1/tan; } tan = Math.abs(tan); }
Rozdział 16-431
Aby uzyskać wartość kąta angle2 muszę obliczyć wartość zmiennej Math.arctan(tan), lecz jak zwykle nie chcę tego robić, ponieważ operacja taka znacznie obciążyłaby procesor. Zamiast tego zastosowałem drabinę instrukcji if...else if...else, dzięki której uzyskamy pożądany rezultat poprzez porównanie wcześniej obliczonych wartości. W ten sposób ustawiam kąt angle2 na pięć najbliższych stopni, co w zupełności wystarczy do uzyskania efektu, jakiego usiłuję utworzyć. // teraz ustawiamy pozostały kąt (za pomocą tabeli przeglądowej) na najbliższe // 5 stopni (co jest wystarczającym przybliżeniem dla większości gier...) if (tan>5.67) { angle2 = 80; } else if (tan>2.75) { angle2 = 70; } else if (tan>1.73) { angle2 = 60; } else if (tan>1.19) { angle2 = 50; } else if (tan>0.84) { angle2 = 40; } else if (tan>0.58) { angle2 = 30; } else if (tan>0.36) { angle2 = 20; } else if (tan>0.18) { angle2 = 10; } else { angle2 = 0; } return angle1+angle2; }
Łączenie w całość Po przygotowaniu tych dwóch procedur i przystosowaniu do szybkiego działania, mogę powiedzieć z absolutną pewnością, że mam już gotowy podstawowy kod obsługujący świat projektowanej przeze mnie gry. Czas najwyższy więc już się nią zająć. Plik savior.fla zawiera końcową wersję gry, lecz przeanalizuję wszystkie pośrednie kroki, które mnie do niej doprowadziły. Gdy jakiś plik FLA w sekwencji nie wnosił niczego istotnego do procesu tworzenia gry, nie udostępniałem ci go. Z tego właśnie powodu nie umieściłem na płycie CD-ROM pliku savior01.fla, w przeciwieństwie do pliku savior02.fla, którego na niej znajdziesz. Savior02.fla W tym pliku przeprowadziłem pierwszą próbę utworzenia skalowalnego świata gry, który mieści wszystkie elementy na ekranie. Przyjrzymy się bibliotece znajdującej się w tym pliku:
Rozdział 16-432
Klip filmowy sp.alien jeszcze niczego nie robi — umieściłem go w pliku w funkcji wizualnej wskazówki, aby lepiej widzieć co się dzieje na ekranie podczas skalowania świata gry i czy aktualizuje się wystarczająco szybko wraz z kilkoma symbolami graficznymi w nim się znajdującymi. Folder player zawiera elementy, które już widziałeś w pliku savior_test01.fla. Folder world zawiera podstawę świata gry i jest to największy dodatek do tego pliku w porównaniu z dwoma poprzednimi plikami testowymi. Świat gry zdefiniowany za pomocą klipów filmowych w tym folderze jest zdolny do samo-skalowania się. Chociaż może to sprawiać większe wrażenie od całego trygonometrycznego mambo-dżambo z poprzedniej części rozdziału, w rzeczywistości jest to efekt o wiele łatwiejszy do uzyskania, ponieważ skalowanie jest naturalną zdolnością Flasha. Działa ono w następujący sposób... Świat gry składa się z klipu filmowego o nazwie mc.world reprezentującego krawędzie świata. Zawiera on również drugi klip filmowy o nazwie mc.frame, który jest zwykłym kwadratowym konturem, chociaż niewidocznym w końcowej wersji gry, ponieważ jego właściwość widoczności _visible została ustawiona na false. Rama ta służy do określenia minimalnego początkowego rozmiaru świata („oryginalny rozmiar” w diagramie poniżej). Klip filmowy zachowania ma.worldScale będzie się starać utrzymać właśnie taki rozmiar świata gry poprzez sprawdzanie właściwości świata _height i _width. Jeśli nasz statek znajdzie się poza ramą, spowoduje to zmianę właściwości świata _height i _width (ponieważ statek jest osadzony w świecie, więc stanowi jego część). Tym właśnie zajmuje się nowy kod w ujęciu 2 w klipie filmowym sp.player: max_XPos = Math.abs(xPos)+_parent.world.maxS; max_yPos = Math.abs(yPos)+_parent.world.maxS; if (max_xPos>max_yPos) { _root.gameSize = max_xPos; } else { _root.gameSize = max_yPos; }
Klip filmowy zachowania ma.worldScale wówczas skurczy cały świat mnożąc wartości _xscale i _yscale przez (oryginalny rozmiar)/(nowy rozmiar), aby zeskalować świat z powrotem do jego oryginalnego rozmiaru. Procedura skalowania działa zawsze, zatem ciągle skaluje świat aby upewnić się, że zachowa on taki sam fizyczny rozmiar, co w rezultacie daje efekt powiększania/pomniejszania.
Rozdział 16-433
Czy to jest właśnie pomysł na zupełnie nowy schemat nawigacyjny powiększania i pomniejszania dla Sieci? Myślę, że tak!
Skoro już wiesz, w jaki sposób działa skalowanie, napisanie kodu ActionScript dla tego efektu jest zdumiewająco proste. Rzuć okiem na klip filmowy zachowania ma.worldScale, które zeskaluje dowolny klip filmowy w nim umieszczony, poprzez kontrolowanie właściwości jego klipu _parent (czyli w tym przypadku klipu mc.world). Cała funkcja powiększania/pomniejszania została zrealizowana w trzech krótkich ujęciach kodu ActionScript. W ujęciu 1 inicjalizujemy zmienną o nazwie worldSize z oryginalnym rozmiarem świata. Będzie to rozmiar ramy otaczającej świat, czyli klipu mc.frame. Świat naszej gry zawsze będzie w kształcie idealnego kwadratu, zatem stosujemy tutaj tylko właściwość _height, ponieważ wartość właściwości _width jest taka sama: worldSize = _parent._height;
W ujęciu 2 tworzymy dwie zmienne, xSize i ySize, które stanowią odpowiednio właściwości świata _width i _height. Następnie bierzemy większą wartość z tych dwóch i przypisujemy ją nowej zmiennej o nazwie size („nowy rozmiar” diagramie powyżej). xSize = _parent._width; ysize = _parent._height; if (xSize>ySize) { size = xSize; } else { size = ySize; }
Teraz tworzymy czynnika skalowania i stosujemy go na właściwości _parent poprzez właściwości _xscale i _yscale: scale = worldSize / size; _parent._xscale = _parent._xscale * scale; _parent._yscale = _parent._yscale * scale;
I jeszcze jedna rzecz: gdy gracz kieruje swój statek do środka świata, powodując powiększenie świata, istnieje szansa, że najbardziej zewnętrznym elementem w obiekcie world stanie się mrugająca gwiazda, która spowoduje dopasowanie rozmiaru świata nie do statku, lecz gwiazdy. Aby tego uniknąć, umieściliśmy gwiazdy poza obiektem świata, lecz nadal potrzebne im są informacje o czynniku skalowania, aby mogły powiększyć/pomniejszyć się dopasowując się w ten sposób do świata. Tym się zajmuje ostatnia linijka kodu:
Rozdział 16-434
// potokujemy czynnik skali do _root _root.scale = scale;
Ujęcie 3 powraca po prostu do ujęcia 2, tworząc w ten sposób pętlę składającą się z tych procedur. Folder starfield zawiera dwa proste klipy filmowe kontrolujące mrugające rozgwieżdżone niebo. Jeśli zrozumiałeś wszystko do tej pory, bez problemu dasz sobie radę i z tą częścią — gdyż stosujemy tutaj bardzo podobne techniki jak poprzednio. Analizę tych funkcji pozostawię tobie, lecz podpowiem ci tylko, abyś pamiętał, że pole gwiazd znajduje się poza obiektem world i należy go ciągle skalować za pomocą poniższej funkcji: this._xscale = this._xscale * _root.scale this._yscale = this._yscale * _root.scale
Te wiersze znajdują się w ujęciu 1 klipu filmowego sp.starfield, a w ujęciu 2 umieszczona jest pętla powracająca do ujęcia 1. Teksty score i level jest to po prostu para fikcyjnych pól tekstowych, które umieściłem w pliku FLA aby sprawdzić, że nie zeskalują się z resztą świata.
W trakcie eksperymentowania z tym plikiem możliwe, że zauważysz, że statek porusza się ociężale niż w końcowej wersji gry. Parametry świata w pliku savior02.fla nie zostały jeszcze wyregulowane (co stanowi ważne końcowe ćwiczenie), więc na tym etapie nie zajęliśmy się jeszcze takimi zagadnieniami, jak na przykład prędkość duszka gameSprite.
Savior03.fla W pliku savior03.fla dodałem obcych i animowałem system wyników. Ponadto statek gracza potrafi już strzelać do obcych, lecz nie można ich jeszcze zabić, co wydaje się przynajmniej niesprawiedliwe. Do ważnych nowych cech tego pliku można zaliczyć: • Integrację wszystkich obliczeń matematycznych w klipie filmowym o nazwie ma.fastTrigFunctions, którego przedstawiliśmy w lewym górnym rogu sceny na poniższym rysunku. • Animację obcych i klip filmowy zachowania wykrywający kolizję, o nazwie ma.hitTest. Prawie wszystkie gry wideo będą posiadały jeden z tych elementów, więc zdecydowanie się nimi za chwilę zajmiemy.
Rozdział 16-435
•
System oparty na sprytnych klipach składający się z pojedynczego obcego zdolnego do modyfikacji swojego wyglądu i podjęcia poziomów zręczności, aby uzyskać w ten sposób wrażenie wielu typów obcych (jest to kolejna świetne sztuczka do analizy, jeśli zamierzasz sam projektować gry, ponieważ umożliwia ona kodowanie ogólnego typu gameSprite, a następnie dopasowanie zachowania każdego z jego kopii z wykorzystaniem sprytnych klipów do utworzenia pozornie oddzielnych postaci gry).
Obcy Na dobrze, zacznijmy od obcych. Oprócz stosowania wartości i funkcji z obiektu world obcy będzie również sprawdzać wartości gracza xPos i yPos aby wiedzieć, gdzie gracz się znajduje w danej chwili. Zauważysz, że pierwszych kilka zmiennych w obiekcje gameSprite obcego są takie same jak wartości obiektu gameSprite gracza — jak największa standaryzacja obiektów zawsze jest dobrym pomysłem, ponieważ umożliwia ona ponowne zastosowanie klipów filmowych zachowania, jak również kilkakrotne użycie tego samego kodu.
Rozdział 16-436
Klip filmowy sp.alien posiada listwę czasową z wieloma fajnymi rzeczami na niej umieszczonymi. Jak można się zorientować po wyglądzie jego ikony w bibliotece, jest to sprytny klip, a jeśli zaznaczysz jakiego obcego na scenie (znajduję się oni w ujęciu 2 klipu mc.world) i wywołasz panel Clip Parameters (Window|Panels|Clip Parameters), zobaczysz poniższą scenę:
Aby zmienić wartość któregokolwiek z tych parametrów wystarczy kliknąć na polu Value i wpisać nową liczbę. Nowy parametr można wówczas zastosować w dowolnym skrypcie w obrębie klipu filmowego jako zmienną, która zostanie zainicjalizowana z właśnie wprowadzoną wartością. Zatem, chociaż dla wszystkich obcych napisałem taki sam skrypt, każda kopia obcego posiada zmienną umiejętności alienSkill i typu alienType z innymi wartościami. Więcej informacji o tworzeniu i stosowaniu sprytnych klipów znajdziesz w rozdziale Brendana Dawesa.
Teraz omówmy działanie skryptów w klipie sp.alien. Ujęcie 1 inicjalizuje zmienne obcego xPosStart i yPosStart na wartości właściwości _x i _y pozycji, w której obcy się znajduje na scenie. Dlaczego? Ponieważ (jak w większości gier) obcy nigdy naprawdę nie umiera — on tylko „udaje” umieranie znikając z ekranu by po chwili odrodzić się w swoim oryginalnym punkcie startowym. Krótko mówiąc, strzelanie do obcych jest bezcelowe! Ustawiłem również wartości skalowania na 0, co oznacza, że początkowo rozmiar obcych wynosi zero, zatem są one zbyt małe aby można je było zobaczyć: // inicjalizujemy wstępną pozycję w formacji. xPosStart = this._x; yPosStart = this._y; this._xscale = 0; this._yscale = 0;
Ujęcie 2 to ujęcie inicjujące, w którym obcy powraca do momentu tuż przed ponownymi narodzinami i nosi on nazwę „init”. Tutaj właśnie parametry naszego sprytnego klipu, alienSkill i alienType są stosowane do personalizacji każdej kopii obcego. Zobaczysz, że prędkość, z jaką obcy obraca się (rotSpeed) i jego siła ciągu (a zatem jego przyspieszenie) są modyfikowane za pomocą właściwości alienSkill. Wygląd obcego definiowany jest poprzez osadzony klip filmowy o nazwie mc.alienAppearance składający się Rozdział 16-437
z kilku ujęć, z których każde zawiera dany rysunek obcego i nazwy kopii alien. Właściwość alienType odnosi się do danego rysunku w ujęciu w obrębie klipu mc.alienAppearance, i równa jest wartości właściwości alienType, zatem, aby zdefiniować wygląd, wystarczy wydać polecenie alien.gotoAndStop(alienType). Proste! // inicjalizujemy dane obcego. rotSpeed = _parent.world.rotSpeed*alienSkill; angle = 0; xVel = 0; yVel = 0; xPos = xPosStart; yPos = yPosStart; thrust = alienSkill; dead = false; // określamy wstępny wygląd... alien.gotoAndStop(alienType); this._xscale = 0; this._yscale = 0; this._x = xPos; this._y = yPos; this._rotation = angle;
Ujęcia 3 i 4 zawierają procedurę narodzin, która tworzy niewielką animację obracania się obcego podczas wzrostu. Ujęcie 3 po prostu dodaje liczbę 5 do czynników skalowania, zwiększając odrobinę wielkość obcego. Ponadto do wartości rotacji dodaje liczbę 18, aby nadać obcemu ruch obrotowy. Procedura ta powtarzana jest dzięki poleceniu gotoAndPlay w ujęciu 4, aż czynnik skalowania osiągnie pełny rozmiar (100). Na tym etapie możemy już przejść do ujęcia skończonej pętli „readyLoop” (ujęcie 6): // procedura rozmnażania. // skalujemy ją w czasie... this._xscale = this._xscale+5; this._yscale = this._yscale+5; this._rotation = this._rotation+18; if (this._xscale == 100) { gotoAndPlay ("readyLoop"); }
Ujęcie 6 wybiera liczbę pomiędzy 0 i 1 i jeśli jest ona większa niż 0.999, obcy rozpocznie nurkowanie i poszukiwanie statku gracza. Szanse zaistnienia takiej sytuacji wynoszą jeden na każde tysiąc ujęć na każdego obcego, co jest dosyć dużym prawdopodobieństwem, lecz zastosowaliśmy tutaj te liczby tylko dla przykładu. W ujęciu 7 tworzymy pętlę do ujęcia 6, więc te dwa ujęcia będą ciągle sprawdzać losowo wybraną liczbę, aż będą mogły przejść do ujęcia „huntLoop” (ujęcie 11): // pozostaje bez ruchu chyba że jest już gotowy do nurkowania if (Math.random()>0.999) { gotoAndPlay ("huntLoop"); }
Ujęcie 11 zawiera cały mechanizm ukryty za zachowaniem obcego. Prawdę mówiąc to widziałeś już znaczną część tego kodu w dwóch testowych plikach FLA, więc nawet jeśli ten skrypt będzie dla ciebie wyglądać dosyć zastraszająco na pierwszy rzut oka, nie ma w nim niczego nowego. Ujęcie 12 tworzy pętlę do ujęcia 11, aby 12te było odtwarzane ciągle, aż obcy zostanie zestrzelony. Pierwszym zadaniem zapisanym w ujęciu 11 jest uzyskanie pozycji gracza. Statek gracza nosi nazwę kopii player, zatem prawidłowa ścieżką jest _parent.player: Rozdział 16-438
// zdobywamy pozycję gracza. targetX = _parent.player.xPos; targetY = _parent.player.yPos;
Obcy ciągle usiłuje skierować się w stronę statku gracza i robi to poprzez wywołanie funkcji argTan, którą utworzyliśmy w drugim pliku testowym (savior_test02.fla): // wskazujemy na gracza targetAngle = _root.fn.arcTan(xPos, yPos, targetX, targetY); errorAngle = targetAngle-angle; if (Math.abs(errorAngle)>5) { if ((errorAngle>0) && (errorAngle<180) || (errorAngle<-180)) { angle = angle+rotSpeed; } else { angle = angle-rotSpeed; } } if (angle>360) { angle = angle-360; } if (angle<0) { angle = angle+360; }
Reszta skryptu jest bardzo zbliżona do kodu zastosowanego przez nas do kontrolowania statku gracza w pliku savior_test01.fla. W rzeczywistości jest między nimi tylko jedna różnica. Obcy opierają swoja prędkość na ich odległości od gracza: im dalej się od niego znajdują, tym szybciej się będą poruszać, aż do uzyskania maksymalnej prędkości w zmiennej linSpeed: // obliczamy nowe wektory prędkości // sprawdzamy jak daleko znajdujemy się od naszego celu (z grubsza) // i na tej podstawie tej obliczamy naszą linearną prędkość... xDist = Math.abs(targetX-xPos); yDist = Math.abs(targetX-yPos); if (xDist>yDist) { linSpeed = xDist/30; } else { linSpeed = yDist/30; } // jeśli nie przekraczamy maksymalnej prędkości poruszani się, // odpalamy silniki... if (Math.abs(xVel)
Zestrzelenie Jak umiera obcy? No cóż, klip filmowy zachowania o nazwie ma.hitTest cały czas sprawdza, czy pocisk gracza uderzył w obcego. Jeśli tak, wówczas listwa czasowa obcego przejdzie do ujęcia 15 o nazwie dead, gdzie obcy zagra martwego (czyli zniknie stając się pustym klipem Rozdział 16-439
filmowym) aż do ujęcia 120, z którego powróci z powrotem do ujęcia 2 aby odrodzić się na nowo: gotoAndPlay ("init");
Rzućmy okiem również na działanie klipu filmowego sp.bullet i jego interakcję z zachowaniem wykrywającym kolizję obcego w klipie ma.hitTest, które niezwykle prostym zachowaniem stosującym pojedyncze polecenie warunkowe kodu ActionScript: if (_parent.hitTest(_parent._parent.bullet)) { _parent.gotoAndPlay("dead"); _parent._parent.bullet.range = _parent._parent.bullet.maxRange; }
To polecenie stosuje wbudowaną funkcję kodu ActionScript MovieClip.hitTest do określenia czy klipy filmowe alien i bullet się przecinają. Oprócz „zabicia” obcego pozbywamy się również pocisku przekonując go, że nagle osiągnął swój maksymalny zakres. Zakładając, że wiesz mniej więcej, jak działają duszki gameSprite gracza player i obcego alien, w klipie pocisku nie znajdziesz niczego nowego — pobiera on po prostu kąt statku gracza w punkcie wystrzału i przemieszcza się w tym kierunku o podany zakres. Możesz oczywiście sobie ten kod dokładniej obejrzeć, na pewno nie ugryzie. Matematyczny klip filmowy Kolejną rzeczą, na jaką warto zwrócić uwagę, jest sposób skonfigurowania funkcji trygonometrycznych. Widziałem wielu ludzi starających się, aby takie funkcje zadziałały, więc może przedstawię najważniejsze kwestie do zapamiętania: • Klip filmowy zawierający funkcje musi znaleźć się na listwie czasowej po każdym wywołaniu funkcji. • Ujęcie zawierające definicje funkcji należy przekazać zanim po raz pierwszy wywołasz daną funkcję. Druga pozycja z powyższej listy wyjaśnia taki a nie inny wygląd listwy czasowej. Biblioteka funkcji ma.fastTrigFunctions jest odczytywana w ujęciu 1 listwy czasowej _root, podczas gdy właściwa gra rozpoczyna się w ujęciu 2, przez co w efekcie funkcje można zdefiniować z wyprzedzeniem:
Savior.fla W ten sposób dotarliśmy do ukończonej gry. Patrząc na bibliotekę, zobaczysz kilka nowych symboli. Jest już ekran powitalny, na którego składa się prosta, automatyczna animacja. Dołączyłem również trochę efektów dźwiękowych, które zdefiniowałem za pomocą nowego obiektu dźwiękowego Flasha Sound i za chwilę je omówimy. Najpierw jednak zajmiemy się pirotechniką. Rozdział 16-440
Wybuchy Wszystkie eksplozje są mniej więcej takie same (animacja „wybuchu” na ekranie powitalnym również działa na takiej samej zasadzie, lecz wzbogacona została o efekt zanikania oparty na parametrze przezroczystości Alpha). Mamy tutaj do czynienia z rozpryskiem eksplozji (czyli z klipami „..._one”), który rozpoczyna się w pozycji (0,0) (chodzi tu o „punkt startowy” w diagramie po lewej stronie na poniższym rysunku). Jest on przesuwany za pomocą kodu ActionScript, który ciągle zwiększa jego właściwość _y (zauważ, że dodatnia wartość y oznacza ruch w dół) aż znajdzie się on w odległości „zakresu”. Klip filmowy robi również coś podstępnego, a mianowicie obraca się o losowo wybrany kąt pomiędzy 0 i 360 stopniami. Oznacza to, że rozprysk nie przesunie się prosto w dół, tyko pod losowo wybranym kątem this._rotation, które określa kąt, o jaki obrócony zostaje cały klip filmowy. Klip filmowy pojedynczego odłamka zostaje kilkakrotnie powtórzony w klipach filmowych „..._many” aby mogły powstać rozpryski eksplozji. Jest to świetny przykład pojedynczej, prostej animacji powielonej do uzyskania o wiele bardziej skomplikowanego efektu.
Rozdział 16-441
Tworzenie hałasu Jedynym naprawdę nowym elementem w końcowej wersji gry są efekty dźwiękowe, zdefiniowane w ujęciu 1 listwy czasowej _root. Same dźwięki nie znajdują się na scenie, lecz są połączone bezpośrednio z nią z biblioteki. We Flashu potrzebne jest w tym celu zastosowanie jakiegoś elementu odpowiadającego nazwie kopii. Zaznaczmy więc plik dźwiękowy w bibliotece i zaznaczamy pozycję Linkage z rozwijanego menu Options. W wywołanym oknie Symbol Linkage Properties zaznaczamy opcję Export this symbol i nadajemy dźwiękowi nazwę identyfikatora Identifier.
Należy koniecznie odnieść się do tej nazwy (podanej w cudzysłowie) podczas przyłączania dźwięku do obiektu Sound, jak widać w poniższym skrypcie: // definiujemy zmienne gracza... scale = 1; score = 0; level = 1; // definiujemy obiekty dźwiękowe... introSound = new Sound(); introSound.attachSound("intro"); laserSound = new Sound(); laserSound.attachSound("laser"); laserSound.setVolume(40); explodeSound = new Sound(); explodeSound.attachSound("explode"); waveSound = new Sound(); waveSound.attachSound("newWave"); deathSound = new Sound(); deathSound.attachSound("deathSound"); stop ();
Ponieważ dźwięki zostały zdefiniowane na listwie _root, odtwarzamy je podając następujące polecenie: _root.explodeSound.start(0, 1);
Polecenie to odtwarza obiekt explodeSound przez jedną pętlę z zerowym czasem wejścia (zero określa liczbę sekund po jakich ma zostać odtworzony dźwięk; jeśli długość trwania dźwięku wynosi 1 sekundę, a ty określiłeś czas wejścia na 0.5, polecenie odtworzy dźwięk rozpoczynając od 0.5 sekundy dźwięku). Gotowe! Rozdział 16-442
Zakończenie Wyjaśniłem wszystkie kluczowe zagadnienia tej gry, lecz sam powinieneś sprawdzić, jak to wszystko działa. Powinny ci się do tego przydać diagramy obiektów zwłaszcza, ponieważ są one jedynymi rzeczami zastosowanymi przeze mnie do definiowania tej gry (bez żadnych schematów działania!), co świetnie odpowiada wymaganiom wiecznie zajętego programisty w języku ActionScript. Co więcej zobaczyłeś ogólny system projektowania gry zdefiniowany i zastosowany do utworzenia stosunkowo skomplikowanego świata gry. W grze Savior, miałeś okazję zaobserwować w jaki sposób początkowy projekt gry został oparty na elastycznym systemie gameSprite, co wymusiło z kolei traktowanie połączeń pomiędzy poszczególnymi elementami gry w bardzie strukturalny i modularny sposób (czyli, jeśli bardziej ci odpowiada termin techniczny, obiektowo). Proces projektowania gry przebiegał w następujący sposób: • definiowanie świata gry • zapełnienie go prostymi duszkami gameSprite • dołączanie dodatkowych właściwości do duszków gameSprite z wykorzystaniem klipów filmowych zachowania Za każdym razem słyszę opinie wygłaszane na grupach dyskusyjnych i seminariach, że utworzenie gry w czasie rzeczywistym wykonanej we Flashu jest niemożliwe, bądź muszą być rozmiaru znaczka pocztowego aby zadziałały z przyzwoitą prędkością. Lecz nie jest to prawdą, jeśli zaplanujesz swoje gry tak, jak to czynią profesjonalni programiści, postarasz się zminimalizować pracę wykonywaną przez platformę gry po jej uruchomieniu (poprzez przygotowanie danych z wyprzedzeniem) i skoncentrujesz się na prawdziwych właściwościach dobrych gier: szybkiej reakcji i grywalności, nie zapchanych spowalniającymi rysunkami. A teraz... przejdź do praktyki programując własne gry. Właściwości, jakie będziesz musiał zdefiniować i skonstruować staną się właściwościami następnej generacji witryn internetowych wykonanych we Flashu. Jeśli ktoś spyta, wcale nie grasz w gry, lecz ćwiczysz na przyszłość.
Rozdział 16-443
Część 4. Dynamiczna zawartość
Rozdział 17 Dynamiczna zawartość uzyskiwana z plików tekstowych Jednym z najpotężniejszych właściwości Flasha jest możliwość stosowania go jako interfejsu dla aplikacji internetowych — czyli witryn dostarczających interaktywnych serwisów i zawartości przyciągających użytkowników. Odtwarzacz Flasha obsługuje tego typu zawartość i, w połączeniu z bogatym graficznym środowiskiem, jakie można utworzyć we Flashu, dostarczysz użytkownikom interaktywną dynamiczną zawartość o świetnym wyglądzie. Dzięki dynamicznej zawartości twoje witryny internetowe będą bardziej interesujące i atrakcyjne dla użytkownika, a jest to fantastyczny sposób na zachęcenie internautów do powrotu na twoją witrynę. W tym rozdziale zajmiemy się jedną najprostszych metod integracji dynamicznej zawartości z filmami Flasha — przechowywaniem danych w plikach tekstowych, do których można uzyskać dostęp na odległość kliknięciem przycisku w filmie Flasha. Aby umieścić taki rodzaj zawartości w Sieci, będziesz potrzebować serwera WWW, my korzystamy z serwera firmy Microsoft, Internet Information Server — IIS, będącego częścią systemu Windows 2000 Professional, lecz będziesz mógł wykonać wszystkie ćwiczenia na własnym komputerze, nawet jeśli nie masz IIS. Omówimy tutaj dwa oddzielne projekty, pierwszym z nich będzie strona witryny internetowej z regularnie aktualizowanymi sekcjami tematycznymi, a drugim dynamicznie aktualizowany baner ogłoszeniowy. Chociaż we Flashu dysponujemy wieloma przeróżnymi narzędziami ułatwiającymi tworzenie i aktualizację dynamicznych witryn internetowych wykonanych w tym programie, opcja z plikami tekstowymi jest łatwa do zastosowania i obsługi. Może się tak zdarzyć, że będzie projektować prostą witrynę dla klienta, który prawie niczego nie wie o Flashu i potencjalnych źródłach danych, a któremu potrzebny jest łatwy sposób na aktualizowanie witryny na długo po ukończeniu jej przez ciebie. W takim kontekście pozostawienie klientowi kilku prostych plików tekstowych do aktualizacji jest świetnym rozwiązaniem. Argumentów przemawiających za połączeniem tak prostego źródła danych z Flashem w tego typu sytuacji chyba nie trzeba nawet wyliczać — pominięcie Flasha oznacza pominięcie prostej metody Rozdział 17-444
tworzenia łatwych do ładowania witryn internetowych, która zdecydowanie pozostawi twoich statycznych konkurentów w tyle.
Dynamiczna zawartość uzyskiwana z plików tekstowych Jako przykład witryny internetowej charakteryzującej się szybką, łatwą i częstą aktualizację (jak również utrzymaniem przez właściciela tejże witryny) utworzymy stronę z najnowszymi wiadomościami, informacjami sportowymi pogodą, polityką i sekcją poświęconą jedzeniu. Zanim ją ukończymy, każdy, kto potrafi używać Notatnika (czy innego prostego edytora tekstowego) będzie w stanie zmienić zawartość strony i obejrzeć wprowadzone przez niego aktualizacje wyświetlone przy następnych odwiedzinach tej witryny w trybie online. Poniższy zrzut ekranu przedstawia całą stronę, jaką zamierzamy wykonać w pierwszym ćwiczeniu:
Strona ta składa się z zestawu przycisków po lewej stronie, które uruchamiają wyświetlenie informacji tekstowej po prawej stronie ekranu. Widoczne są też dwa przyciski strzałek służących do przewijania w górę i w dół wyświetlonego pola tekstowego. Na tym rysunku użytkownik wybrał opcję Sport. Skieruj twoją wyszukiwarkę pod adres... http://www.webryder.com/flash_book/text_1.html ...aby obejrzeć wersję tej strony w mojej witrynie internetowej. Zanim zajmiemy się szczegółami tworzenia pliku Flasha ze stroną internetową, ustalimy, w jaki sposób będzie to wszystko działać.
Ładowanie danych tekstowych do Flasha Aby obejrzeć dynamiczną zawartość tekstową we Flashu będziemy potrzebować trzech elementów: • przeglądarki internetowej, • pliku SWF umieszczonego na stronie internetowej, • źródła danych zawierającego aktualizowalny tekst. Użytkownik przechodzi do naszego filmu Flasha, wybiera jakąś zawartość, a wówczas film Flasha pobiera wybrany tekst ze strony internetowej i wyświetla go w przeglądarce. Proces ten przedstawiliśmy na poniższym diagramie:
Rozdział 17-445
Po wywołaniu strony HTML w wyszukiwarce, zostaje wyświetlony plik SWF osadzony wewnątrz strony. Plik ten będzie obejmować kilka predefiniowanych pól tekstowych, takich jak te, które utworzymy za chwilę w pierwszym ćwiczeniu. Pod wpływem prostych poleceń ActionScript te dynamiczne pola tekstowe przystąpią do importowania danych z plików tekstowych i aktualizacji zawartości wyświetlanej wewnątrz filmu Flasha. Tworzenie klipu filmowego do przechowywania dynamicznego tekstu
Rozpoczniemy od utworzenia w Notatniku lub podobnym edytorze tekstu plików źródłowych dla filmu, które będą zawierały różne elementy tekstu, jaki ma być wyświetlany. W tym ćwiczeniu wykonamy stronę przypominającą portal z wiadomościami. 1. Zacznijmy od utworzenia pięciu plików tekstowych do przechowania informacji wyświetlanych w filmie Flasha na stronie internetowej. Aby nie robić zamieszania, nadamy tym plikom nazwy odzwierciedlające poszczególne sekcje tematyczne: news.txt dla wiadomości, sports.txt dla informacji sportowych, weather.txt dla pogody, politics.txt dla polityki i food.txt dla jedzenia. Jak widać na diagramie wszystkie pięć plików tekstowych umieścimy wraz z plikiem Flasha w tym samym katalogu na serwerze (lub na twoim dysku twardym, jeśli przechowujesz pliki lokalnie), aby sobie niczego nie utrudniać. Upewnij się, że zapisałeś te pliki w tym samym folderze, w którym powinien się również znaleźć film Flasha i strona HTML. 2. Możesz umieścić w każdym pliku dowolny tekst prawdziwy lub fikcyjny, lecz koniecznie wstaw również na początku każdego pliku specjalny wiersz. Wiersz ten będzie zawierać identyfikację tekstu umieszczonego pod nim, która umożliwi zastosowanie tego tekstu przez program w filmie. Dla strony z pogodą, utworzyłem plik tekstowy o następującej treści: textField=Weather DEC 6 Scattered Showers — lo 24°F (GRU 6 Przelotne opady — temp.min 24°F) THU DEC 7 Snow Showers hi 30°F — lo 15°F (Czw GRU 7 Przelotne opady śniegu — temp.max 30°F — temp.min 15°F) FRI DEC 8 Snow Showers hi 32°F — lo 13°F (PT GRU 8 Przelotne opady śniegu temp.max 32°F — temp.min 13°F)
i tak dalej... 3. Zwróć uwagę na wiersz textField=Weather na początku pliku. Instrukcja textField= przypisuje dany tekst do zmiennej textField, która zostanie
Rozdział 17-446
zdefiniowana w filmie Flasha, natomiast część instrukcji z nazwą Weather stanowi nagłówek tekstu umieszczonego poniżej w pliku. 4. Dodaj elementy textfield= u góry wszystkich plików tekstowych tworząc w ten sposób nagłówki News, Sports, Weather, Politics i Food. A tak wyglądają moje pliki:
Teraz utworzymy lokalizację w pliku Flasha, dzięki której będziemy mogli wyświetlać informacje z tych plików. 5. Otwórz nowy film Flasha, utwórz symbol klipu filmowego i nazwij go text_location. 6. Narzędziem Text utwórz proste pole tekstowe w ujęciu 1 klipu filmowego:
Rozdział 17-447
Teraz musimy skonfigurować to pole tekstowe tak, aby dało się w nim umieścić dynamiczną zawartość tekstową. 7. Wybierz z listy w panelu Text Options opcję Dynamic Text, aby nasze pole tekstowe można był aktualizować, lecz bez możliwości, w przeciwieństwie do Input Text, umieszczania w nim tekstu przez użytkowników. Należy również wybrać opcję Multiline, zaznaczyć pole wyboru Word Wrap aby tekst mógł przejść do następnej linijki i zaznaczyć pole wyboru Selectable, aby użytkownicy mogli skopiować i wkleić umieszczony w polu tekst.
Naszym ostatnim zadaniem przy konfiguracji pola tekstowego jest przypisanie mu zmiennej. Wówczas będziemy mogli zastosować nazwę zmiennej do wskazywania na zawartość pliku tekstowego, jaka ma zostać wyświetlona w polu testowym. 8. Wpisz nazwę zmiennej, textField, w pole Variable w panelu Text Options. Jest to identyczna nazwa z tą, którą umieściliśmy na początku wszystkich źródłowych plików tekstowych:
9. W zakładce Character z panelu Text Options możemy wybrać czcionkę i kolor tekstu wyświetlonego w polu tekstowym. Domyślnie w polu nie znajduje się żaden tekst, lecz musimy się upewnić, że kolor tekstu będzie się różnić od koloru tła filmu. Możemy również pobieżnie określić kilka wartości — wiemy, że pole testowe będzie zawierać dosyć dużo tekstu, więc w takim razie wybierzmy 12 punktów i czytelną czcionkę. Ja wybrałem 12 punktową Verdanę.
Rozdział 17-448
Skoro zdefiniowaliśmy już pole tekstowe w obrębie klipu filmowego, przetestujmy je umieszczając w nim jakiś tekst do wyświetlenia. 10. Otwórz okno Frame Properties dla ujęcia 1 klipu filmowego i wpisz w nim akcję setVariable, która przypisze zmiennej textField następujący tekst: „to pole tekstowe jest zarezerwowane dla dynamicznej aktualizacji z plików tekstowych...”.
Ten tekst będzie wyświetlany w polu tekstowym aż wybierzesz określoną sekcję tematyczną. 11. Przeciągnij kopię klipu filmowego text_location na scenę, nadaj mu nazwę kopii textMovie i uruchom go. Powinieneś zobaczyć mniej więcej coś takiego:
No dobrze, to było dosyć proste — w teście przypisaliśmy jedynie określoną wartość do zmiennej textField i zastosowaliśmy ją do aktualizacji dynamicznego pola tekstowego wewnątrz klipu filmowego. Jest to pewien rodzaj dynamiczności, ale nie taki, o jaki nam chodzi. W następnym etapie dodamy kod ActionScript, który umieści zawartość jednego z plików tekstowych utworzonych wcześniej.
Rozdział 17-449
Umieszczanie dynamicznego tekstu
Teraz wskażemy na jeden z plików tekstowych i wyświetlimy jego zawartość w polu tekstowym. W tym celu zastosujemy akcję loadVariable. Przypiszemy ją do przycisku, po wciśnięciu którego dany tekst zostanie wyświetlony. A oto schemat całego systemu:
1. Rozpoczniemy od utworzenia prostego symbolu o nazwie News. Wykonaj to w dowolny sposób, lecz pamiętaj, że będziemy potrzebować po jednym przycisku dla każdego z tematów: News, Sport, Weather, Politics i Food. Z tego powodu ja przygotowałem pięć oddzielnych przycisków, każdy ze stanem Hit pokrywającym tekst:
Umieściłem przyciski na oddzielnej warstwie w głównym filmie. Teraz przypiszemy przycisk News do pliku tekstowego news.txt. 2. Zaznacz przycisk News na scenie i otwórz okno Object Actions. Następnie dodaj akcję loadVariable, która stosuje jako adres URL plik news.txt, a kopię klipu filmowego TextMovie jako cel dla załadowanych zmiennych:
Rozdział 17-450
3. Teraz wykonaj to samo dla pozostałych przycisków, określając odpowiednią nazwę pliku tekstowego jako ich adres URL. Tym razem, po uruchomieniu filmu i kliknięciu na przyciski wyświetlony zostanie tekst z odpowiedniego pliku tekstowego:
W zależności od rozmiaru pola tekstowego możesz napotkać na niewielkie problemy z formatowaniem, gdy na przykład tekst znajdzie się poza krawędzią pola. Za chwilę to naprawimy. To proste zadanie ilustruje bardzo ważną zasadę — możesz wyszczególniać nazwy zmiennych, zapełniać te zmienne danymi wywoływanymi z odległych lokalizacji i wyświetlać dane w plikach SWF. Jest to niezwykle potężna technika i stanowi ona sedno procesu umieszczania dynamicznej zawartości w plikach Flasha.
W tym przykładzie możemy zastosować w polu URL prostą składnię jeśli określimy, gdzie skąd chcemy pobrać tekst:
Ponieważ plik news.txt znajduje się w tym samym folderze co film Flasha i jego strona HTML, wystarczy wpisać jego nazwę i Flash z łatwością zlokalizuje ten plik źródłowy. Jeśli jednak nasz plik znajduje się w innym miejscu... Załóżmy, że umieściliśmy plik news.txt w folderze Testing/Flash na dysku C:. W takim przypadku należy podać następującą lokalizację tego pliku:
W kodzie akcji loadVariable należy wpisać powyższą lokalizację w następujący sposób: on (release) { loadVariables("c:/Testing/Flash/news.txt", "_root.textMovie");
Rozdział 17-451
{
Zauważ, że możemy stosować notację kropkową kodu ActionScript do określania lokalizacji docelowej również w każdym innym miejscu w filmie — jeśli tylko skonfigurowaliśmy docelowy klip filmowy do przyjęcia dynamicznej zawartości, jaką chcemy mu wysłać. Jeśli nasz źródłowy plik tekstowy został umieszczony na serwerze, nadal możemy pobrać z niego dane, o ile użyliśmy właściwej składni. Załóżmy, że plik news.txt jest przechowywany na witrynie internetowej o nazwie www.freshfroot.com, w katalogu o nazwie StudioText. W tym przypadku musimy podać pełny adres internetowy:
Tak wygląda składnia dla kompletnego określenia nazwy adresu źródłowego URL. Powróćmy teraz do wyświetlania tekstu w przeglądarce. Sposób sformatowania tekstu z wykorzystaniem prostej metody pliku tekstowego wpłynie na wygląd tekstu w ukończonym filmie. Na przykład, po wpisaniu wiersza textField=News w źródłowym pliku w Notatniku, wciśnij klawisz Enter aby przejść do następnej linijki i kontynuuj wpisywanie tekstu...
Tekst zostanie wówczas wyświetlony w ukończonym filmie w następujący sposób...
...z przerwą o szerokości jednej linijki oddzielającą nagłówek News od samego tekstu. Jeśli jednak dodasz pustą linię po nagłówku, tekst zostanie wyświetlony tak...
Rozdział 17-452
... z DUŻĄ przerwą pomiędzy nagłówkiem i tekstem. Jeśli pozostawisz nagłówek News nie oddzielony od reszty tekstu:
Tekst zostanie wyświetlony tak:
Jak widać, nawet w podstawowym formatowaniu możesz uzyskać kilka prostych efektów. Jeśli chcesz, możesz wypróbować również zastosowanie kilku tekstowych plików źródłowych i kilku pól tekstowych z oddzielnymi zmiennymi dla każdego z nich, aby wyświetlać różne części tekstu kilkoma czcionkami o różnym rozmiarze. Ponieważ pole tekstowe utworzone w klipie filmowym text_location posiada określony rozmiar, warto umożliwić użytkownikowi przewijanie tekstu. Można tego dokonać poprzez klikając na wyświetlonym tekście i przesuwając go za pomocą klawiszy strzałek, lecz istnieje również bardziej intuicyjna i elegancka metoda. Zaraz się nią zajmiemy. Tworzenie przewijalnego tekstu
W tym ćwiczeniu dodamy do naszego filmu dwa przyciski, jeden dla przewijania w górę i jeden dla przewijania w dół. Gdy użytkownik wciśnie przycisk, zdefiniowana zostanie zmienna, której wartość będzie efektywnie kontrolować pozycję „kursora” wewnątrz wyświetlonego pola tekstowego. Najpierw musimy zdefiniować dwie zmienne, które zastosujemy do przewijania tekstu.
Rozdział 17-453
1. W tym samym klipie filmowym, nad którym pracowaliśmy do tej pory, otwórz do edycji symbol klipu filmowego text_location. 2. Na nowej warstwie zastosuj dwa polecenia var (z książki Actions) do utworzenia dwóch zmiennych w ujęciu 1, upScroll i downScroll i przypisz im wartości początkowe równe 0:
Polecenie var definiuje lokalną zmienną. Jest ona przeciwieństwem zmiennych globalnych, które deklaruje się za pomocą polecenia setVariable. Ponieważ w klipie filmowym będziemy korzystać z takich zmiennych, zdefiniujemy je tutaj jako zmienne lokalne. A teraz zajmijmy się przyciskami wykorzystującymi omawiane zmienne. 3. Utwórz nową warstwę dla przycisków przewijania w klipie filmowym i dodaj dwa przyciski na prawo od istniejącego pola tekstowego:
Ja utworzyłem dla przycisków dwie warstwy, z białym kółkiem w tle na jednej i czarną strzałką nad kółkiem na drugiej. W stanie Over przycisku zmieniłem odcień strzałki z czarnego na niebieski, aby strzałka zmieniała kolor w momencie, gdy użytkownik umieści nad nią kursor myszy. Po zakończeniu tworzenia pierwszego przycisku możesz skopiować go w bibliotece i obrócić strzałkę w 180 stopni w ujęciach kluczowych, aby przygotować drugi przycisk przewijania. Ja nazwałem przyciski Up Scroll, dla przewijania w górę i Down Scroll dla przewijania w dół. 4. Zaznacz kopię przycisku Up Scroll na scenie i dodaj do niego akcję on. 5. Teraz skonfiguruj przycisk zaznaczając pola wyboru tak, jak na poniższym rysunku:
Rozdział 17-454
Ten skrypt zostanie uruchomiony wówczas, gdy użytkownik kliknie na przycisku strzałki w górę w pliku SWF. Teraz wpiszemy kod ActionScript do przewijania tekstu. 6. Zastosuj akcję setVariable (lub wpisz ją bezpośrednio w trybie Expert) w celu przypisania zmiennej upScroll utworzonej wcześniej wartości 1. Twój skrypt powinien teraz wyglądać następująco:
Oznacza to, że po kliknięciu kursorem myszy na przycisku Up Scroll Flash przypisze wartość 1 zmiennej upScroll, czyli zmiennej lokalnej, którą utworzyliśmy wcześniej. Tekst będzie się przewijać tak długo, jak długo wartość zmiennej upScroll pozostanie 1 — innymi słowy, tak długo, jak długo będzie wciśnięty przycisk. 7. Chcemy, aby wartość zmiennej powróciła do 0 po zwolnieniu przycisku. W tym celu dodaj poniższy fragment kodu: on (release, releaseOutside, rollOut) { upScroll = "0"; }
Rozdział 17-455
Upewnij się, że zaznaczyłeś pola wyboru Release Outside, Release i Roll Out, jak widać na powyższym rysunku. Chcemy przerwać przewijanie (na co wskazuje wartość 0) gdy użytkownik zwolni przycisk myszy, bez względu na to, czy kursor będzie znajdować się wewnątrz czy na zewnątrz przycisku przewijania. Teraz dodamy podobne akcje do przycisku przewijania w dół, aby można było przewijać tekst w dół. Aby uzyskać ten efekt, zastosujemy dla tego przycisku zmienną downScroll. 8. Aby przycisk Down Scroll zadziałał, wpisz poniższy kod: on (press, keyPress “”) { downScroll = “1”; } on (release, releaseOutside, rollOut) { downScroll = “0”; }
Naszym kolejnym zadaniem będzie przypisanie kilku akcji do kopii klipu textmovie znajdującego się na scenie, aby efekt przewijania mógł zadziałać w polu tekstowym. Przewijanie tekstu
Ponownie zastosujemy zmienne upScroll i downScroll utworzone w klipie filmowym textmovie. 1. Zaznacz na scenie kopię textmovie i otwórz okno Object Actions. Dodaj poniższy kod (za chwilę go omówimy): onClipEvent (enterFrame) { if (downScroll=="1") { this.textfield.scroll += 1; } } onClipEvent (enterFrame) { if (upScroll=="1") { this.textfield.scroll -= 1; } }
Rozdział 17-456
Upewnij się, że zastosowałeś składnię z podwójnym znakiem równości w instrukcjach if — dwa znaki równości obok siebie.
Pierwszą część akcji stanowi instrukcja onClipEvent, której przypisaliśmy zdarzenie enterFrame. Instrukcja ta powoduje uruchomienie akcji podczas odtwarzania każdego ujęcia. Nasz film zawiera tylko jedno ujęcie, więc akcja będzie odtwarzana ciągle. Następnie stosujemy instrukcje if do sprawdzenia bieżących wartości zmiennych upScroll i downScroll zdefiniowanych w klipie filmowym. Jeśli wartość którejś z tych zmiennych jest równa 1, wówczas rozpoczyna się przewijanie klipu filmowego w górę lub w dół. Właściwość scroll jest we Flashu właściwością predefiniowaną i służy specjalnie do przewijania tekstu. Instrukcja this.textField.scroll +=1 powoduje przewinięcie w dół tekstu przypisanego do zmiennej textField klipu filmowego this. Instrukcja this.textField.scroll -=1 powoduje przewinięcie tekstu w górę. I to już wszystko. 2. Przetestuj film z większymi plikami tekstowymi, które po wciśnięciu przycisków przewijania powinno dać się przewijać w dół i w górę.
Jeśli chcesz aktualizować na przykład wiadomości, czy pogodę, wprowadzasz zmiany w plikach tekstowych i ładujesz je na serwer, zastępując nimi stare pliki. Natychmiast po ukończeniu ładowania plik zostanie dynamicznie aktualizowany. Innymi słowy, nasz plik Flasha można bez problemu aktualizować bez konieczności ładowania dużej liczby plików, które mogłyby spowodować zwolnienie wyświetlania stron co przeszkodziłoby użytkownikom w oglądaniu ich. Nie musi niczego zmieniać w oryginalnym liku SWF — wystarczy zmodyfikować plik danych testowych, co potrafi zrobić bez niczyjej pomocy nawet klient o bardzo podstawowej znajomości komputera. Rzućmy teraz okiem na nasz przykład banera ogłoszeniowego.
Baner ogłoszeniowy z możliwością aktualizacji Tym razem wykonamy bardzo prosty baner ogłoszeniowy, w którym umieścimy łatwo aktualizowalne pliki tekstowe. Zastosujemy w tym projekcie nową właściwość Flasha 5 umożliwiającą zastosowanie kilku podstawowych opcji formatowania w języku HTML wewnątrz samego pola tekstowego. Na poniższym diagramie przedstawiliśmy schemat działania całego projektu: Rozdział 17-457
Jeśli chcesz obejrzeć ukończony produkt, zajrzyj pod adres... http://www.webryder.com/flash_book/banner_ad.html:
Istnieje kilka powodów, dla których zmienia się czasami tekst wewnątrz banera ogłoszeniowego. Na przykład, jeśli umieściłeś na swojej witrynie internetowej specjalną ofertę, możesz zmienić czcionki i kolory czcionek, aby skierować uwagę użytkowników właśnie na ofertę. Możesz również aktualizować plik testowy aby umieścić w nim adres URL, pod którym znajduje się oferta. W ten sposób użytkownicy będą mieli do niej bezpośredni dostęp. Zróbmy więc nasz baner ogłoszeniowy. Tworzenie ogłoszenia z możliwością aktualizacji
Zanim zajmiemy się projektowaniem naszkicujmy strukturę banera. Mamy tutaj główny film zawierający klip filmowy z przewijanym tekstem banera. Ten klip filmowy zawiera z kolei dwa klipy filmowe, z których każdy pobiera swój tekst z pojedynczego pliku tekstowego napisanego w Notatniku bądź innym prostym edytorze tekstu. Plik Notatnika można ręcznie aktualizować za każdym razem, gdy twój klient chce aktualizować tekst ogłoszenia.
Rozdział 17-458
1. Otwórz nowy film i określ rozmiar sceny na 468×60 pikseli — jest to standardowy rozmiar banera ogłoszeniowego. Będzie to główny plik SWF, którego można osadzić na stronie HTML, a scena posłuży jako tło dla przewijającego się tekstu. A teraz przejdźmy do klipu filmowego „kontenera”, w którym umieścimy dwa filmy tekstowe. 2. Utwórz nowy klip filmowy o nazwie textscroll. Umieść w nim trzy warstwy, jedną dla kodu ActionScript, a dwie pozostałe dla dwóch klipów filmowych tekstu, które zastosujemy do przewijania tekstu:
Na ekranie wyświetlimy jednocześnie dwie przewijające się wiadomości. Naszym kolejnym zadaniem będzie przygotowanie szablonu dla dwóch klipów filmowych odpowiedzialnych z przewijanie tekstu. 3. Utwórz nowy klip filmowy o nazwie textbox i w pierwszym ujęciu wstaw dynamiczne pole tekstowe o wysokości o połowę mniejszej od wysokości głównego filmu lecz szersze — rozmiar mojego pola wynosi 30 pikseli wysokości na 800 pikseli szerokości, aby zmieścił się w nim długi fragment tekstu. Określ pole tekstowe jako Single Line i nadaj mu nazwę zmiennej text. Upewnij się, że pole wyboru Selectable nie jest zaznaczone — nie chcemy, aby użytkownicy kopiowali i wklejali tekst i przewijali go po ekranie. Zaznacz pole wyboru HTML, gdyż dzięki temu będziemy mogli zastosować kilka znaczników w pliku filmowym aby zmienić wygląd tekstu w ukończonym filmie. Nie zapomnij o wybraniu koloru tekstu kontrastującego z kolorem tła filmu i zastosuj rozmiar czcionki około 16 punktów.
Rozdział 17-459
W filmie „kontenerze” textscroll zastosujemy dwie kopie tego symbolu klipu filmowego. 4. Następnie utwórz plik tekstowy o nazwie banner_ad.txt. Umieścimy w nim elementy zawartości, jakie zostaną zastosowane w naszym filmie: • Zawartość tekstową dla pierwszej kopii klipu filmowego textbox. • Zawartość tekstową dla drugiej kopii klipu filmowego textbox. • Zmienną informującą program o zakończeniu ładowania pliku banner_ad.txt do filmu. Wkrótce dodamy zawartość do tego pliku tekstowego. No dobrze, mamy już wszystkie potrzebne strukturalne składniki, więc musimy je teraz połączyć za pomocą kodu ActionScript i umieścić w nich właściwą zawartość. Pamiętaj, że film textscroll będzie zawierać faktyczne klipy filmowe przewijające tekst. Zastosujemy ten film również do kontrolowania akcji i koordynowania wszystkich elementów poprzez wydanie polecenia loadVariables i skierowania danych tekstowych z pliku banner_ad.txt do klipów filmowych, które będą przewijać ten tekst. 5. W klipie filmowym textscroll, w pierwszym ujęciu na warstwie actions utwórz zmienną o nazwie go i przypisz do niej wartość 0:
Jest to zmienna kontrolna: tak długo jak jej wartość wynosi 0, nasz film nie rozpocznie przewijania tekstu. Dzieje się tak dlatego, gdyż chcemy upewnić się, że wszystkie dane zostaną załadowane z pliku tekstowego zanim rozpocznie się przewijanie banera. Pod koniec pliku tekstowego umieścimy wiersz z instrukcja przypisująca zmiennej go wartość 1 — wówczas będziemy mogli już rozpocząć przewijanie tekstu. 6. W nowym ujęciu kluczowym w drugim ujęciu warstwy actions wstaw polecenie loadVariables. Określ plik banner_ad.txt jako adres URL, a następnie z rozwijanego menu wybierz pozycję Target i wpisz this jako lokalizację, do której zostaną wysłane zmienne, zaznaczając również pole wyboru Expression. W ten sposób dane zmiennych zostaną umieszczone w wywołującym klipie filmowym.
Rozdział 17-460
Jeśli plik tekstowy nie znajdował się w tym samym folderze co plik SWF, należy wpisać pełny adres internetowy pliku tekstowego w polu URL, na przykład: http://www.webryder.com/banner_ad.txt. Ze względów bezpieczeństwa, plik Flasha dla ogłoszenia należy umieścić w tej samej domenie lub poddomenie (nazwa.twójserwer.com), jako główne pliki witryny internetowej, gdyż inaczej nie będzie ono działać. Wszystko będzie funkcjonować wówczas, gdy korzystasz tylko z lokalnego dysku twardego, lecz prościej będzie wpisać po prostu nazwę banner_ad.txt w pole URL i upewnić się, że wszystkie pliki znajdują się w tym samym folderze.
Aby zapewnić, że plik tekstowy zostanie w całości załadowany zanim rozpocznie się przewijanie, musimy sprawdzić wartość zmiennej go, którą zainicjalizowaliśmy w pierwszym ujęciu. Moglibyśmy po prostu kontynuować bez sprawdzania, czy plik została załadowany, lecz wówczas tekst mógłby się nagle pojawić gdy proces przewijania byłby już w połowie ekranu, co nie wyglądałoby zbyt profesjonalnie. Jeśli wartość równa jest 0, oznaczając że tekst nie został jeszcze całkowicie załadowany, chcemy, aby Flash ciągle powtarzał sprawdzanie tej wartości aż tekst się załaduje i wartość zmiennej go będzie równa 1. 7. Aby zastosować tą pętlę sprawdzania/opóźniania utwórz nowe ujęcie kluczowe w ujęciach 3 i 4 warstwy actions. Następnie dodaj poniższy skrypt do ujęcia 4 na tej samej warstwie. Dzięki niemu Flash będzie powracać do pustego ujęcia 3 aż wartość zmiennej go wyniesie 1: if (go == "0") { gotoAndPlay (3); }
Na dwóch kolejnych warstwach klipu filmowego textscroll — text movie 1 i text movie 2 — dodamy klipy filmowe pól tekstowych, które będą przewijane po ekranie. 8. W ujęciu 1 na odpowiadających im warstwach w klipie filmowym textscroll umieść dwie kopie klipu filmowego textmovie po prawej stronie sceny, skąd rozpoczną przewijanie. 9. Umieść obydwa klipy w tym samym miejscu na ich warstwach, mniej więcej tak, jak widać na poniższym rysunku, na poziomie środkowego punktu klipu textscroll i w taki
Rozdział 17-461
sposób, aby większość klipu znajdowała się poza prawą stroną sceny. Pamiętaj, że nie będziesz mógł zobaczyć konturu klipu filmowego po przesunięciu go poza obszar sceny:
Dwa klipy filmowe znajdują się jeden nad drugim lecz na oddzielnych warstwach, więc możesz bez problemu uzyskać do nich dostęp ukrywając jedną z warstw. Jeśli kiedykolwiek miałeś już z czymś takim do czynienia, należy pamiętać o tym, aby pola tekstowe zostały wygenerowane w filmie przed załadowaniem zmiennych tekstowych. Jeśli pola tekstowe nie będą na swoim miejscu po załadowaniu zmiennych, wówczas zmienne nie odnajdą swoich miejsc i tekst nie zostanie wyświetlony! Dlatego właśnie kolejność ujęć jest taka istotna.
Nadaj tym dwóm kopiom klipów filmowych nazwy odpowiednio text_1 i text_2.
Te kopie klipów filmowych mają przewijać się w poprzek ekranu jeden po drugim. 10. Na warstwie zawierającej pierwszy klip filmowy wstaw ujęcie kluczowe w ujęciu 5 (czyli w następnym ujęciu po instrukcji if go=="0" na warstwie actions), a następnie ujęcie kluczowe trochę dalej — gdzieś około ujęcia 60. W ujęciu kluczowym w ujęciu 60 przenieś klip filmowy poza lewą stronę sceny i utwórz automatyczną animację pomiędzy tymi dwoma ujęciami.
Rozdział 17-462
11. To samo wykonaj dla drugiej kopii, lecz tym razem rozpocznij automatyczną animację w miejscu zakończenia pierwszej, czyli w ujęciu 61, jak na moim przykładzie:
Aby uzyskać odpowiednie rozmieszczenie pól możesz wykonać kilka testów sprawdzających poruszanie się pól od lewej do prawej, aby uzyskać taki efekt, w którym rozpoczynają swój ruch po prawej stronie ekranu i kończą po lewej bez zbyt szybkiego uruchamiania ich, czy zbyt wolnego kończenia. Jeśli faktycznie rozpoczniesz lub zakończysz przewijanie zbyt późno, nie będzie ono dobrze wyglądać; w takiej sytuacji najlepiej jest poeksperymentować z rozmieszczeniem klipów aby wszystko działało jak należy (po tym jak przetestujemy film, czyli już wkrótce!). Nadaj tym warstwom taką samą długość poprzez przeciągnięcie końcowego ujęcia na warstwie text movie 1 do ujęcia 120. 12. W ostatnim ujęciu kluczowym na warstwie text movie 2 należy utworzyć pętlę, aby pola testowe przewijały się bez przerwy. Uzyskamy taki efekt za pomocą polecenia gotoAndPlay, które cofnie film z powrotem do ujęcia 5:
Jeśli chcesz umieścić na ekranie więcej niż dwa przewijane teksty wystarczy w tym celu dodać więcej warstw z umieszczonym na każdej z nich klonem klipu filmowego textbox o innej nazwie kopii. Następnie zastosuj automatyczną animację, tak jak zrobiliśmy to tutaj, aby przewijać je na ekranie jeden po drugim. 13. Skoro już zakończyliśmy pracę nad klipem filmowym „kontenerem” i wszystkimi jego składnikami, możemy już umieścić kopię klipu textscroll na głównej listwie czasowej. Powróć do tej listwy, umieść kopię klipu filmowego w pierwszym ujęciu i nadaj jaj nazwę textscroller. Ta kopia powinna znaleźć się po prawej stronie sceny, jak widać na rysunku:
Rozdział 17-463
Na koniec pozostało nam utworzenie pliku tekstowego zawierającego informację o danych, jakie należy przesłać do pól tekstowych. Tutaj właśnie zastosujemy wspomniany przez nas język HTML. 14. Otwórz plik tekstowy banner_ad.txt w Notatniku i wpisz poniższy kod: text_1.text=webryder.com - need some site updates ? Contact Us today!
) i podkreślenia (). Można również zastosować oznaczenia do określenia czcionki, a także lub do ustawienia względnego/absolutnego rozmiaru czcionki. Zauważ, że Flash potraktuje rozmiar czcionki jako podany w punktach, a nie w wartościach HTML. Wymieniliśmy już wszystkie znaczniki HTML obsługiwane przez Flasha. 15. Teraz dodaj poniższy kod do pliku testowego po poprzedniej sekcji: &text_2.text=
Rozdział 17-464
Symbol & służy do oznakowania zmiennej, jaką chcemy traktować inaczej niż dane text1_text zdefiniowane w poprzednim fragmencie kodu. Ten blok kodu definiuje wartość długiego klipu filmowego za pomocą polecenia text_2.text=. Podobnie jak w przypadku poprzedniej zmiennej text_1.text, definiujemy hiperłącze i tekst, jaki będzie wyświetlany. Ponadto tekst pogrubiamy i piszemy kursywą. Pozostała nam jeszcze jedna zmienna do zdefiniowania, umieszczona u dołu pliku, czyli zmienna go, służąca do sprawdzania, czy zostały już pobrane wszystkie dane i czy można już rozpocząć przewijanie. Jeśli ty utworzyłeś więcej klipów do przewijania niż zastosowaliśmy w tym ćwiczeniu, tekst należy zdefiniować również tutaj, przed wierszem &go=1. Twój końcowy plik powinien wyglądać mniej więcej tak:
Powinieneś uważać z użytą przez ciebie ilością tekstu w zależności od rozmiaru dynamicznych pól tekstowych, jakie utworzyłeś. Jeśli tekst jest dłuższy od pola tekstowego, wówczas zostanie on obcięty, zatem upewnij się, że pole tekstowe jest wystarczająco duże, aby pomieścić cały tekst. Podobnie jak przy rozmieszczaniu pól tekstowych w klipie filmowym, najlepiej jest poeksperymentować z rozmiarami pól. Uruchom film i obejrzyj przewijany tekst. Teraz możesz się już zabrać za ulepszanie go.
Zakończenie Zastosowanie dynamicznej zawartości z plików tekstowych we Flashu pozwala na łączenie w witrynach internetowych wizualnych efektów Flasha z aktualizowaną zawartością, co zachęca do ponownego odwiedzenia strony. Po zastosowaniu aktualizowanej zawartości we Flashu, aktualizacja i umieszczanie pliku tekstowego na serwerze jest proste. Możemy wymienić wiele różnorodnych powodów, dla których warto stosować dynamiczną zawartość z plików tekstowych we Flashu. Możesz, na przykład, umieścić pytanie na stronie i umożliwić użytkownikom wysyłanie komentarzy. Możesz utworzyć wykonywalny plik zawierający dynamiczny tekst z odległego adresu URL, który będzie codziennie aktualizowany i umożliwić użytkownikom pobieranie go (zabezpieczenie adresu URL nie wpływa na filmy Flasha odtwarzane w samodzielnych odtwarzaczach, a jedynie wówczas, gdy uruchamiane są w przeglądarce internetowej). Wypróbuj stosowanie dynamicznej zawartości, a twoje projekty Flasha staną się jeszcze bardziej pikantne, niż były wcześniej.
Rozdział 17-465
Rozdział 18 Dynamiczne aplikacje internetowe Nowa Sieć jest miejscem, gdzie statyczny HTML i wyłącznie tekstowe witryny internetowe nie stanowią domyślnego rozwiązania, a internauci odwiedzają witryny z myślą o interakcji, a nie po to, by być tylko pasywnymi zwiedzającymi. Nowa Sieć jest miejscem zmysłowych doświadczeń i wartości użytkowych. Jest to miejsce, w których witryny internetowe przekształcają się w internetowe aplikacje. Co to jest aplikacja internetowa? Według najprostszej definicji jest to aplikacja uruchamiana na serwerze WWW, z którą użytkownicy wchodzą w interakcję i która dostarcza im wartościowych doświadczeń lub usług. Dobrym przykładem aplikacji internetowej jest mechanizm wyszukiwawczy: użytkownik otwiera stronę wyszukiwarki, wpisuje swoje zapytanie i wówczas aplikacja przystępuje do przeszukania baz danych zanim wyświetli użytkownikowi kompletną listę odniesień. Sam mechanizm wyszukiwawczy jest niewielką smutną maszyną stojącą w ciemnym pokoju, lecz po skomunikowaniu się z użytkownikiem nagle budzi się do życia, a użytkownicy uzyskują usługę, o jaką po prosili. Nawet lepszym przykładem aplikacji internetowej jest system koszyka na zakupy, gdzie użytkownicy mogą przeglądać dostępne produkty, dodawać wybrane pozycje, jakie zamierzają kupić, do koszyka, przechodzić do kasy i zakupić wybrane produkty. Tego typu system integruje kilka różnych funkcji do utworzenia ujednoliconego doświadczenia użytkownika. W dalszej części tego rozdziału omówimy sposób zaprojektowania prostego koszyka na zakupy we Flashu. Aplikacja internetowa składa się z dwóch głównych elementów: silnika (back end) i interfejsu (front end). Silnik jest to kod wykonujący całą pracę włącznie z bazą danych przechowującą informacje, którą użytkownik zobaczy, z którą będzie współdziałać, czy w którą się będzie zaopatrywać. Interfejs jest częścią, którą użytkownik ładuje do przeglądarki i z którą się komunikuje.
Rozdział 18-466
Flash, jeśli stosowany efektywnie, jest idealnym narzędziem do tworzenia elementów wewnętrznych — a możliwości języka ActionScript Flasha pozwalają na zastosowanie pełnego zestawu innych narzędzi i technologii zapewniających funkcjonalność silnika i umieszczenie dynamicznej zawartości w przeglądarce użytkownika. Flash bez trudu mógłby stać się de facto standardem dla aplikacji czołowych w nowej Sieci. Jednym z powodów, dla których tak wielu z nas uwielbia używać Flasha jest taki, że tworzy on małe, możliwe do skalowania rysunki wektorowe. Oznacza to, że możesz zastosować Flasha do tworzenia niezwykle intuicyjnych interfejsów użytkownika znacznie ułatwiających internautom używanie twojej aplikacji. Na przykład, wykonanie we Flashu wbudowanego systemu pomocy kontekstowej jest bardzo proste, lecz nigdy nie byłoby możliwe w aplikacji internetowej wykorzystującej HTML dla swego interfejsu. Możesz nawet zastosować Flasha do przeniesienia systemu pomocy o jeden krok w przód i wprowadzenia postaci lub agenta do poprowadzenia użytkowników przez każdy ekran. Wizualnie atrakcyjny wygląd, jakiego możesz zaprojektować we Flashu, połączony z dynamiczną zawartością silnika, stwarza niezwykle bogate i wszechstronne sposoby tworzenia przyciągającego interfejsu szybko ładującego się i łatwego w użyciu. W jego obecnym wcieleniu, Flash posiada wszystkie narzędzia potrzebne do przekształcenia się w standardowy interfejs dowolnej aplikacji internetowej. Przejdźmy do konkretów.
Interfejs Zaczniemy od szybkiego omówienia kilku podstawowych zasad projektowania interfejsów we Flashu.
Projektowanie architektury Podczas stosowania Flasha do projektowania interfejsu dla aplikacji internetowej, architektura i praktyczność stanowią zagadnienia ważniejsze niż kiedykolwiek wcześniej. Tworząc interfejs dla aplikacji przede wszystkim konstruujesz szablon dla każdego ekranu, jakiego użytkownik zobaczy i/lub będzie z nim współdziałać, pozostawiając miejsca na dane, których dostarczy silnik podczas odtwarzania filmu.
Rozdział 18-467
Więcej ogólnych informacji o projektowaniu grafiki dla witryn internetowych wykonanych we Flashu znajdziesz w rozdziale Petera Holma.
Bardzo ważnym jest zorganizowanie twojego filmu lub filmów w formacie, do którego bez problemu będziesz mógł powrócić po ukończeniu projektu — na przykład, jeśli musisz dodać nowe właściwości, lub pojawią się jakieś problemy z istniejącymi już filmami. Ogólnie, najlepiej zorganizować filmy w oddzielne pliki SWF, które będą ładowane na różne poziomy. Poziom 0 dobrze jest stosować jako poziom interfejsu, który powinien zawierać grafikę dla interfejsu, główne elementy nawigacyjne, standardowe kopie, do których tworzy się odniesienia na innych poziomach i funkcje. Konstrukcja pozostałych poziomów zależy przede wszystkim od rodzaju projektu, nad którym pracujesz, lecz ja zazwyczaj dzielę całość na logiczne sekcje według zawartości. Dobra reguła do zapamiętania jest taka, że gdy masz przycisk przenoszący się do jakiejś sekcji, wówczas sekcja ta powinna być umieszczona we własnym pliku SWF. Taka organizacja znacznie ułatwia edycję różnych sekcji projektu oddzielnie, a także ułatwia zadanie komputerowi użytkownika, gdyż zmniejsza obciążenie pamięci operacyjnej RAM i zużycie procesora. Możesz również stosować standardowe kopie bądź klony, czyli ogólne klipy filmowe, które są wykorzystywane, i do których tworzone są odniesienia w całym filmie. Najlepszym, według mnie, zastosowaniem tej techniki w zawartości aplikacji internetowej jest przechowywanie wszystkich danych przychodzących w standardowym klonie „pojemniku” o nazwie vars, co znacznie ułatwia dostęp do danych z obszaru całego filmu. Nie jest to koniecznie najlepsze rozwiązanie dla wszystkich projektów, lecz warto je rozważyć jako część strategii architektury projektu. Ja przekonałem się, że najlepiej przechowywać wszystkie funkcje zastosowane w filmie w pierwszym ujęciu głównej listwy czasowej na poziome 0, na ich własnej warstwie umieszczonej nad warstwą actions. Jeśli wywołasz funkcję zanim zostanie zadeklarowana, funkcja nie będzie działać, toteż zastosowanie tej metody zapewnia, że wszystkie funkcje zostaną zadeklarowane zanim pojawi się możliwość zastosowania ich w filmie. Poprzez przechowywanie funkcji na głównej listwie czasowej poziomu 0 możesz odnieść się do każdej funkcji zastosowanej w filmie z taką samą ścieżką docelową, _level0.nazwaFunkcji, co jest znacznie mniej kłopotliwe niż konieczność odnoszenia się do głównych funkcji rozmieszczonych w różnych listwach czasowych i poziomach.
Gdy pracujesz nad dużym projektem składającym się z wielu sekcji i wielu plików SWF, możesz pójść o jeden krok dalej i zastosować warstwę funkcji w każdym pliku SWF do przechowania głównych funkcji dla danej sekcji, natomiast główne funkcje dla całego projektu umieścić na poziomie 0. W pliku SWF warto przechowywać dźwięki, akcje i etykiety na oddzielnych warstwach i upewnić się, że wszystkie kopie klipów filmowych posiadają nazwy — wówczas o wiele łatwiej jest odczytać i zrozumieć dane debugowania. Składniki modularne stanowią klucz do skontrowania efektywnego interfejsu. W tym kontekście, zastosowanie sprytnych klipów pomoże ci zaoszczędzić wiele czasu. Na przykład, jeśli w witrynie znajduje się wiele miejsc, w których użytkownik może wybrać pozycje z rozwijanych menu, tworzenie oddzielnego klipu filmowego rozwijanego menu dla każdego menu wymagałoby wiele czasu i wysiłku. W takiej właśnie sytuacji warto zastosować sprytne klipy: zamiast tworzyć sto klipów filmowych rozwijanych menu, wystarczy wykonać jeden egzemplarz menu, a następnie zastosować parametry klipu do określenia poszczególnych pozycji, które znajdą się w danym menu na scenie. Sprytne klipy zostały zaprojektowane do ułatwienia programistom łączenia złożonych fragmentów kodu, które z łatwością mogą być stosowane przez projektantów, lecz, co więcej, umożliwiają one tworzenia wspólnych parametrów kontrolnych, które można wykorzystać w całym filmie Flasha. W ten sposób twój projekt stanie się bardziej spójny, a użytkownicy nie
Rozdział 18-468
będą mieli problemów ze zrozumieniem działania i użyciem interfejsu. Ta metoda zastosowania parametrów kontrolnych przyspiesza również proces programowania i pomaga w tworzeniu łatwo aktualizowanych filmów. Po zastosowaniu jednego sprytnego klipu szybko przyzwyczaisz się do używania ich ciągle. Z czasem skompletujesz bibliotekę modularnych parametrów kontrolnych, które będziesz mógł zastosować w dowolnej liczbie projektów jedynie przez modyfikację rysunków. Więcej informacji o tworzeniu i zastosowaniu sprytnych klipów znajdziesz w rozdziale Brendana Dawesa.
Gdy interfejs został dobrze zorganizowany, z zastosowaniem modularnych składników, łatwiej będzie zlokalizować błędy i naprawić je, a nawet ich uniknąć!
Planowanie z wyprzedzeniem Najważniejszym etapem przed przystąpieniem do konstruowania aplikacji internetowej jest planowanie, planowanie i jeszcze raz planowanie. Dopóki nie zapiszesz jasno sformułowanych pomysłów na papierze, będzie ci bardzo trudno od razu zabrać się do projektowania. Najpierw utwórz listę wszystkich właściwości, jakie powinien posiadać interfejs — napisz opis przeznaczenia oprogramowania, co będzie ono wykonywać dla użytkownika i w jaki sposób. Następnie przygotuj listę wszystkich filmów potrzebnych do spełnienia wymagań projektu, nadaj im nazwy i określ poziomy, na których będą one ładowane. W ten sposób utworzyłeś dokument architektoniczny. Podczas planowania interfejsu, czasami bardzo przydatnymi okazują się scenopisy obrazkowe — wykonane na papierze lub ekranie — ilustrujące proces programowania. Wystarczy wykonać prosty rysunek dla każdego ekranu, jakiego użytkownik zobaczy w aplikacji, nie zapominając o ekranach informujących o błędzie, ekranach pomocy i tak dalej. Przygotowanie tych schematów może okazać się czasochłonne, lecz jest to nieoceniony etap w procesie planowania i nie należy go omijać. Scenopisy obrazkowe nie muszą być ani ładne ani sensownie wykonane, jeśli tylko ilustrują to, co będzie widoczne na ekranie. Tworzenie scenopisów obrazkowych pomoże ci w objęciu wszystkich zagadnień, które w innym razie mogłyby nagle wyskoczyć już w trakcie programowania. Oprócz scenopisów obrazkowych, innym niezwykle cennym narzędziem na etapie planowania są schematy blokowe. Ilustrują one trasę użytkownika przez aplikację, a także ekrany, które będzie napotykać po drodze i którymi będzie wchodzić w interakcję. W ten sposób będziesz mógł zdefiniować „przepływ” programu i przeanalizować różne ścieżki, jakie użytkownik może obrać. Technika ta pomaga w uniknięciu luk w architekturze, które później mogą spowolnić a nawet zahamować proces pracy. Podczas konstruowania schematów blokowych, staraj się wypróbować i przewidzieć możliwe błędy, jakie mogą się pojawić, i koniecznie je zapisz. Poniżej przedstawiliśmy prosty schemat blokowy:
Rozdział 18-469
COLOR FLOW CHART (KOLOROWY BLOKOWY SCHEMAT DZIAŁANIA)
Jak widać na kolorowej wersji rysunku znajdującej się na płycie CD-ROM, zastosowałem różne kolory dla oznakowania stron z górnego poziomu i stron drugorzędnych, co ułatwia identyfikację kluczowych ekranów w aplikacji. Dwa ekrany informujące o błędach zaznaczyłem kolorem czerwonym. Zastosowanie schematów blokowych w połączeniu ze scenopisami obrazkowymi jest świetnym sposobem na rozplanowanie projektu. Oznacz każdą pozycję w schemacie blokowym odpowiadającym jej scenopisem obrazkowym, abyś potem mógł odnosić się do obydwu. Zastosowanie scenopisów obrazkowych i blokowych schematów działania może wzmocnić architekturę twojego interfejsu ponad trzykrotnie. Techniki te pomogą ci uniknąć dziur w architekturze, które w innym razie wymagały przeróbek projektu. Podczas pracy nad projektem koszyka na zakupy będę postępować zgodnie z moją radą stosowania tych technik. Zatem, abyś mógł bezproblemowo utworzyć zaprojektować aplikację internetową: • przygotuj scenopisy obrazkowe wyszczególniające każdy ekran w interfejsie, • przygotuj blokowe schematy działania uzupełniające scenopisy, • zastosuj standardowe kopie klipów filmowych takie jak vars do zorganizowania kodu i danych, • podziel zawartość na logiczne części i zastosuj akcję loadMovie do ładowania ich w czasie wykonawczym, • wykorzystaj sprytne klipy do tworzenia modularnych składników, • zaplanuj projekt gruntownie i całkowicie, • zastosuj funkcje do modularyzowania projektu, • zorganizuj listwę czasową i film w logiczny i łatwy do zrozumienia sposób, • wykorzystaj takie narzędzia jak Debugger Flasha, gdy twoje skrypty nie działają, • nie powielaj kodu na kilka oddzielnych listew czasowych i poziomów, lecz staraj się stosować wszędzie, gdzie tylko jest to możliwe ogólnie dostępne funkcje. Jak już wspomnieliśmy, aplikacje internetowe zazwyczaj składają się z interfejsu i silnika. Następnie omówimy efektywne współdziałanie tych dwóch elementów.
Komunikacja silnik/interfejs Obsługując takie akcje jak loadVariables i nowe obiekty XML i XML Socket Flash bez problemu potrafi komunikować się z zewnętrznymi językami programowania, które, z kolei,
Rozdział 18-470
są zdolne do pobierania informacji z bazy danych do wyświetlania ich w filmie Flasha. Jedyny wymóg jest taki, że aplikacje te muszą przywracać dane do Flasha w formacie przez ten program obsługiwanym. W większości wypadków — z XML jako wyjątkiem — Flash akceptuje jedynie pary nazwa/wartość oddzielone znakiem &, a specjalne znaki w wartościach muszą być zakodowane w adresie, czyli przekształcone w formę rozpoznawaną przez wyszukiwarkę, którą można bezpiecznie do niej wysłać. W naszym przykładzie z zakupami ciąg par nazwa/wartość przesyłanych do wyszukiwarki jest oddzielony znakami &, jak na przykład: zmienna1=wartość1&zmienna2=wartość2, i tak dalej. We Flashu istnieją jednak pewne ograniczenia: nie można importować w czasie wykonawczym popularnych formatów obrazków takich jak GIF i JPG, bez uciekania się do oprogramowania pośredniczącego, chociaż można ten problem obejść. Skoro forma SWF jest oparta na licencji open source, istnieje możliwość zastosowania języka programowania do dynamicznego dołączenia rysunku w pliku SWF i użycia akcji loadMovie do importowania go. W sytuacjach, gdy ładowanie obrazka dynamicznie jest absolutną koniecznością, mogą również przydać się takie aplikacje jak Macromedia Generator lub Swift Generator. Inny mankament Flasha zauważalny jest w obrębie niezgodności przeglądarki. Internet Explorer 4.5 na platformie Macintosha nie obsługuje metody POST wysyłania zmiennych z filmu Flasha do zewnętrznego skryptu. Chociaż zostało to już poprawione w wersji 5, niemniej jednak programiści powinni byś świadomi tego typu niekompatybilności. Dobrym sposobem na obejście problemu z metodą POST jest zastosowanie metody GET. Niestety, z metodą GET również związane jest pewne ograniczenie: teoretycznie potrafi ona wysyłać do 256kb danych, lecz Internet Explorer wysyła tylko 50kB danych — jeśli zostanie wysłanych zbyt dużo danych, wywołanie polecenie loadVariables zostanie zignorowane i odtwarzacz może spowodować zawieszenie się przeglądarki. Wielu programistów Flasha obawia się stosować oprogramowania pośredniczącego do umieszczania dynamicznej zawartości w filmach Flasha. Jednakże, w rzeczywistości ładujesz wówczas wysławiany plik tekstowy. Wszystkie wywołania serwera przechodzą w zasadzie przez taki sam proces:
Najpierw film Flasha wywołuje skrypt po stronie serwera i serwer przechowujący procesy zawarte w tym skrypcie. Następnie serwer zwraca dane wyjściowe do filmu Flasha, czyli ciąg zakodowanych w adresie URL para nazwa/wartość, przedstawiony na powyższym rysunku. Dane wyjściowe nie są automatycznie podane we właściwym formacie dla Flasha, gdyż Rozdział 18-471
skrypty muszą być tak napisane, aby przetwarzały dane w zakodowany w adresie URL ciąg zmiennych w formie nazwa/wartość. Mówiąc prościej, serwer otrzymuje wywołanie skryptu, przetwarza go i zwraca wyjściowy ciąg zmiennych do filmu Flasha. Sztuczka polega na tym, aby napisać (lub zatrudnić programistę, który napisze) działające po stronie serwera skrypty, które zwrócą ciąg zmiennych jako dane wyjściowe skryptu. Interfejs Flasha bazuje na danych dla zawartości, a ładowanie danych — podobnie jak rysunków czy filmów — jest czasochłonne. Skrypt wysyłający dane potrzebuje trochę czasu, aby mógł zostać wykonany, a dane muszą zostać załadowane do komputera, na którym uruchomiony jest film Flasha. Jeśli kod próbuje operować wartościami, które jeszcze nie zostały w pełni pobrane z serwera, końcowy efekt może być zaskakujący. Dlatego też, powinieneś posiadać bezpieczny mechanizm wstępnie ładujący dane i uruchamiający film dopiero po całkowitym pobraniu danych z serwera. Na szczęście, opcja Data akcji onClipEvent ułatwia sprawdzenie, kiedy wszystkie dane zostały załadowane do klipu filmowego:
To zdarzenie uruchamiane jest po całkowitym załadowaniu ostatniej zmiennej w ciągu do klipu filmowego. Innym prostym sposobem na sprawdzenie, czy dane już zostały załadowane, jest utworzenie klipu filmowego złożonego z dwóch ujęć kluczowych w następujący sposób: 1. Utwórz klip filmowy o nazwie preloader z dwoma ujęciami kluczowymi. Pozostaw pierwsze ujęcie kluczowe puste, a w drugim dodaj tekst o treści trwa pobieranie danych, proszę czekać (preloading data, please wait), informujący użytkownika, o procesie pobierania danych. Teraz umieść klon klipu filmowego na głównej listwie czasowej i nadaj mu nazwę preload. W ujęciu 1, również na głównej listwie czasowej, wstaw akcję start — zatrzyma ona film w trakcie działania programu ładującego. 2. Wcześniej mówiliśmy o stosowaniu standardowej kopii o nazwie vars do przechowania wszystkich danych wejściowych — możemy go zastosować w tym przykładzie: utwórz pusty klip filmowy o nazwie variables i przeciągnij jego kopię na scenę w ujęcie 1. Nadaj jej nazwę vars. Teraz przypisz kopii vars akcję loadVariables, która zacznie pobierać dane, a także procedurę obsługi onClipEvent, abyśmy mogli wykryć, kiedy dane zostały pobrane. Postępuj zgodnie z poniższymi instrukcjami. 3. Zaznacz klon vars i wpisz do niego poniższe akcje: onClipEvent (load) { //wysyłamy klip ładujący do ujęcia ładującego _root.preload.gotoAndStop (2); //ładujemy zmienne loadVariables (“textdata.txt”, this); } onClipEvent (data) {
Rozdział 18-472
//wysyłamy klip ładujący do pustego ujęcia _root.preload.gotoAndStop (1); //przesuwamy główną listwę czasową do następnego ujęcia _root.nextFrame; }
Teraz, gdy zdarzenie danych zostaje uruchomione przez Flasha wykrywając, czy wczytał on już wszystkie dane zmiennych, klip filmowy vars wyśle klip preload do pustego ujęcia i przesunie główną listwę czasową do następnego ujęcia (w którym mogą już bezpiecznie rozpocząć pracę akcje obsługujące pobrane dane). Możesz również, za pomocą akcji goto, nakazać programowi w ostatnim wierszu kodu, aby przeszedł do określonej etykiety. W tym przykładzie wstępnie ładowanymi i pobieranymi danymi zajęły się dwa bloki akcji. Zastosujemy tą technikę również w naszym projekcie koszyka na zakupy, którym zajmiemy się już za chwilę. Zauważ, że kod przedstawiony powyżej został swobodnie skomentowany. Dobrze skomentowany kod jest o wiele łatwiejszy do zrozumienia przy odczytywaniu go po pewnej przerwie, niż kod nie oznaczony żadnym komentarzem. Dzięki komentarzom pracować nad projektem morze kilu projektantów Flasha, którzy będą dokładnie wiedzieć, co każdy z nich wykonał i dlaczego. Komentarze nie zwiększą końcowego rozmiaru pliku SWF, gdyż nie są one eksportowane z kodem, więc możesz swobodnie komentować. No dobrze, przejdźmy do naszego koszyka na zakupy.
Koszyk sklepowy Flasha Jak już wspomnieliśmy wcześniej, użyjemy koszyka na zakupy do zilustrowania współdziałania prostej aplikacji internetowej i interfejsu. Dla zachowania prostoty ćwiczenia zastosujemy plik tekstowy do zdefiniowania danych zmiennych z jakich będzie korzystać koszyk. Te z kolei użyjemy do symulacji danych wyjściowych ze skryptu. Zarówno plik FLA, jak i wszystkie elementy potrzebne do wykonania ćwiczenia znajdziesz na płycie CD-ROM. Najpierw, w prawdziwym świecie programowania, powinniśmy zdefiniować cel projektu. Możemy zrobić to teraz: interfejs powinien umożliwiać użytkownikom wybieranie produktów i dodawanie ich do koszyka. Podczas robienia zakupów, na ekranie powinna być wyświetlana bieżąca suma do zapłacenia za wszystkie produkty znajdujące się w koszyku. Zrealizujemy te zamierzenia w tym ćwiczeniu — w prawdziwym projekcie musielibyśmy przygotować również system transakcji/zapłaty, lecz niestety nie mamy na to wystarczająco dużo miejsca. Może w następnej książce... Po zdefiniowaniu celu, następnym etapem jest określenie właściwości, jakimi powinien charakteryzować się interfejs, abyśmy mogli osiągnąć nasz cel — jest to bardzo proste. A oto moja wersja: • • • • •
koszyk ma pokazywać użytkownikowi rzeczy, jakie już w nim umieścił, listę pozycji będzie się dało przewijać: jednocześnie będzie widocznych tylko 6 pozycji, koszyk powinien pokazywać całkowitą liczbę pozycji w nim umieszczonych, produktami powinny być dynamiczne ładowane pliki SWF (zostaną one zdefiniowane w pliku tekstowym zastępującym skrypt), struktura interfejsu powinna być modularna, aby mogła pomieścić tyle produktów, ile to będzie konieczne, a także musi się składać z pasków przewijania, które będą przenosić użytkownika pomiędzy stronami produktów.
Rozdział 18-473
Zanim zajrzymy do plików FLA, obejrzyjmy scenopisy obrazkowe, jakie przygotowałem dla każdego ekranu. W procesie projektowania i programowania służą one jedynie do pobieżnego zilustrowania wyglądu końcowego interfejsu, lecz naprawdę znacznie pomagają w określeniu i rozmieszczeniu głównych jego elementów. Pierwszy scenopis obrazkowy przedstawia szkic głównego ekranu:
A oto elementy głównego ekranu: 1. Przewijalna lista produktów umieszczona po prawej stronie. 2. Przewijalna lista wybranych produktów wraz z ich cenami, plus całkowita cena, umieszczone po lewej stronie ekranu. I drugi scenopis obrazkowy:
Kluczowym elementem jest tutaj „powiększony widok produktu” po prawej stronie ekranu. Będzie to oddzielny klip filmowy z szczegółowym obrazkiem produktu wybranego z głównego ekranu (włącznie z jego nazwą i ceną). Po tej samej stronie znajduje się również przycisk, który doda dany produkt do koszyka. Scenopisy świetnie prezentują właściwości, jakie musimy dołączyć do projektu i jak możemy je w nim rozmieścić. Ilustrują też, które elementy wykonane we Flashu należy skonstruować w pliku FLA i co użytkownik zobaczy podczas interakcji z interfejsem. Posuńmy się o krok naprzód i przyjrzyjmy się schematowi blokowemu modelującemu „trasę” użytkownika przez interfejs:
Rozdział 18-474
Pierwszą rzeczą, jaką użytkownik zobaczy odwiedzając naszą witrynę jest lista produktów (jak widać na pierwszym scenopisie obrazkowym — st1). Następnie, po kliknięciu na produkt, użytkownik przejdzie do ekranu szczegółowego widoku (st2). Zwróć uwagę, w jaki sposób scenopisy odpowiadające różnym węzłom na schemacie blokowym są powiązane z ich identyfikatorami — st1 i st2. Dzięki temu w łatwy sposób możemy połączyć razem wszystkie schematy projektowe i rysunki i zorganizować końcową aplikację. Na ekranie szczegółowego widoku użytkownik ma do dyspozycji dwie opcje — może albo dodać oglądany produkt do koszyka, albo zamknąć okno. Obydwie opcje przeniosą użytkownika z powrotem do listy produktów. Powyższych schemat blokowy przedstawia obydwie ścieżki, jakie użytkownik może obrać przez interfejsu. Rozumiesz już, w jaki sposób schematy blokowe i scenopisy obrazkowe ułatwiają rozplanowanie aplikacji? Nawet przy tworzeniu tak niewielkiej aplikacji jak ta, zastosowanie schematów blokowych i scenopisów obrazkowych znacznie ułatwia planowanie architektury interfejsu — jest to jedna z wielkich sił wizualizacji. Po przejściu przez rygorystyczne etapy planowania przeprowadzone przed napisaniem kodu, ukończony produkt będzie o wiele bardziej stabilny.
Architektura pliku FLA Po zakończeniu etapu planowania możemy już zajrzeć do plików FLA tworzących interfejs. Najpierw, z płyty CD-ROM otwórz główny plik FLA dla koszyka o nazwie shoppingcart.fla. Pozostałe pliki zawierają obrazki produktów i każdy z nich składa się tylko z jednego ujęcia. Przyjrzyjmy się strukturze warstw na głównej listwie czasowej:
Film został podzielony na dwie części — część koszyka i część programu ładującego — jak wskazują na to warstwy Labels widoczne u góry rysunku, oznaczone nazwami showCart i preload. Zastosowaliśmy dwie warstwy Labels, aby nazwy etykiet były widoczne w całości.
Rozdział 18-475
Zgodnie z moją radą utworzyłem warstwę Functions i Actions do przechowywania funkcji i akcji. Warstwa Standard Instances zawiera wszystkie standardowe kopie zastosowane w filmie, czyli w tym przypadku tylko jedną — vars, „pojemnik na zmienne”. Pierwsze ujęcie w filmie (oznaczone etykietą preload) zawiera wiadomość Preloading data...please wait, informującą użytkownika o procesie pobierania danych, a na warstwie actions w ujęciu 1 znajduje się akcja stop — zatrzymuje ona film do momentu, gdy wszystkie zmienne zostaną załadowane. Kod odpowiedzialny za ten proces umieszczony został wewnątrz kopii klipu var, a oparty jest na prostym przykładzie aplikacji ładującej opisanej wcześniej. Po załadowaniu wszystkich danych film przechodzi do ujęcia drugiego. Ujęcie to, oznaczone etykietą showCart stanowi główny interfejs zawierający interfejs koszyka, produktów i pasków przewijania:
Warstwa Preload zawiera wiadomość informującą użytkownika, że zmienne są w trakcie pobierania. Na warstwie Detailed View znajduje się szczegółowy ekran widokowy z detalami danego produktu. Widoczność warstwy dla klipu Detailed View została ustawiona na false w tym projekcie, aby łatwiej było zauważyć i pracować z elementami umieszczonym pod tą warstwą. Poniżej przedstawiliśmy wygląd szczegółowego widoku w pliku FLA:
Warstwa Cart zawiera klip filmowy koszyka, natomiast warstwa Products klipy filmowe miejsc na produkty — po uruchomieniu filmu znajdą się w nich prawdziwe obrazki produktów. Są jeszcze dwie warstwy Background: na pierwszej znajdują się rysunki interfejsu, a na drugiej kwadratowy kontur okalający scenę. Rozdział 18-476
Zanim zajmiemy się kodem filmu, przeanalizujmy bardziej szczegółowo główny ekran — poniżej opisaliśmy kilka głównych jego elementów:
A oto główne elementy filmu: 1. Paski przewijania do przemieszczania się pomiędzy stronami — nazwy kopii prev i next. 2. Standardowy klon — nazwa kopii vars: uruchamia on kod ładujący i przenosi nas do głównego ekranu po załadowaniu zmiennych. 3. Miejsca na produkty — nazwy kopii product1 do product6. 4. Koszyk — nazwa kopii cart. Jak już wspomnieliśmy wcześniej, na głównej scenie znajduje się jeden element niewidoczny na tym zrzucie ekranu — szczegółowy ekran widokowy, który pozostanie niewidzialny aby zachować przejrzystość rysunku. Skoro szczegółowy ekran widokowy składa się z dosyć istotnych elementów, przyjrzyjmy się mu:
1. 2. 3. 4. 5.
Miejsca na produkty — nazwa kopii product. Przycisk zamykania ekranu. Pole tekstowe do przechowania nazwy produktu — nazwa zmiennej title. Pole tekstowe do przechowania ceny produktu — nazwa zmiennej cost. Przycisk Add to cart.
Rozdział 18-477
6. Niewidzialny przycisk umożliwiający przeciągnięcie ekranu. Teraz przyjrzyjmy się dokładniej koszykowi. Pamiętaj, że jest to obszar, w którym zostaną wyszczególnione wybrane przez użytkownika produkty:
Dla ułatwienia zrozumienia konstrukcji koszyka otwórz klip filmowy mc cart z biblioteki pliku shoppingcart.fla:
Pozycja w koszyku składa się z dwóch pól tekstowych oznaczonych na rysunku numerami 1 i 4. Obszar u góry (numer 1) składa się z oddzielnego klipu filmowego o nazwie mc cart_items. Zostanie on powielony dla każdego produktu dodanego do koszyka. Paski przewijania (2) działają poprzez przesuwanie klipu filmowego zawierającego pozycje koszyka poza maskę (3). Klip filmowy z miejscem na produkt — w sumie mamy ich sześć rozmieszczonych w tablicy na ekranie — również jest kluczowym składnikiem, więc przeanalizujmy go bardziej szczegółowo. W bibliotece otwórz klip mc product_view — to jest właśnie symbol, na którym oparte zostały wszystkie sześć kopii:
Składniki: 1. Niewidzialny przycisk. Umożliwia klikanie na produkt aby uzyskać jego szczegółowy obrazek. 2. Czarny kontur. Zastosowany jedynie dla wyglądu. 3. Klip filmowy, do którego zostanie załadowany obrazek produktu — nazwa kopii product1 — product6. Warto również się przyjrzeć listwie czasowej klipu filmowego mc product_view:
Rozdział 18-478
O co tu chodzi? Pierwsze ujęcie klipu filmowego zawiera stan klipu filmowego on, a drugie ujęcie stan off:
Potrzebujemy tych dwóch stanów w klipie filmowym, ponieważ czasami nie będzie żadnego produktu do wyświetlenia, a nie chcemy w takiej sytuacji pozostawić na ekranie ani konturu ani przycisku. Patrząc na pozycje na głównej scenie możemy już się zorientować, w jaki sposób wszystkie omówione przez nas na początku właściwości zostaną zastosowane.
Standardowe klony W tym projekcie stosujemy jeden standardowy klon o nazwie vars, umieszczony na warstwie Standard Instances, w prawym górnym rogu sceny:
Klon vars służy jako kontener dla zmiennych pobieranych przez koszyk z pliku tekstowego (czyli skryptu na serwerze). Dzięki temu możemy uzyskać dostęp do tych zmiennych z dowolnego klipu filmowego w filmie poprzez zastosowanie tej samej składni ścieżki — _root.vars. Zastosowanie tej zmiennej pomaga uniknąć wiele zamieszania, a także ułatwia zastosowanie z zrozumienie skryptu. Ponadto zwiększa prawdopodobieństwo błędu z powodu błędnie określonych ścieżek zmiennych. Wadliwe ścieżki zmiennych stanowią jeden z najczęstszych powodów problemów w bardziej skomplikowanych filmach Flasha, więc
Rozdział 18-479
możemy zaoszczędzić sobie wiele czasu pracy ograniczając szanse pojawienia się takich pomyłek.
Dane z pliku tekstowego Otwórz plik cartParams.txt z płyty CD-ROM w edytorze tekstu aby obejrzeć następujące zmiennej: item1=Apple&cost1=10&url1=apple.swf&item2=Grapes&cost2=15&url2=grapes.swf&item3=Pineappl e&cost3=20&url3=pineapple.swf&item4=Coconut&cost4=25&url4=coconut.swf&item5=Banana&cost5 =30&url5=banana.swf&item6=Pears&cost6=35&url6=pears.swf&item7=Fruit&cost7=50&url7=fruitb unch.swf&count=7
Jeśli sformatujemy je w bardziej „ludzki” sposób, a „nie odczytywany przez Flasha”, staną się one bardziej zrozumiałe:
Zauważ, że zastosowaliśmy tutaj siedem głównych elementów — po jednym dla każdego rodzaju owocu, jakie będziemy sprzedawać na naszej stronie. Każdemu owocowi przypisaliśmy trzy pary nazwa/wartość: 1. item/nazwa owocu 2. cost/cena produktu 3. url/nazwa pliku SWF zawierającego obrazek danego produktu. Po każdym parametrze następuje również numer indeksowy danego produktu — item1, item2 i tak dalej. Dzięki temu możemy odnieść się do każdego z produktów i jego parametrów poprzez zastosowanie jego numeru indeksu. Możemy wówczas bez problemu wykonać pętlę przez każdy produkt w pliku danych aby wyświetlić go dla użytkownika. Jak już wspomnieliśmy wcześniej, wszystkie pary nazwa/wartość oddzielone są od siebie znakiem &.
Dlaczego film został zaprojektowany w ten właśnie sposób Do tej pory przygotowaliśmy szablony dla każdego z ekranów, jakie użytkownik będzie oglądać i komunikować się z nimi. Na głównym ekranie miejsca na produkty służą jako lokalizacje do wyświetlania plików SWF zawierających obrazki produktów. Ekran ze szczegółowym widokiem również zawiera miejsce na powiększony obrazek — zwróć uwagę, że koszyk stosuje ten sam obrazek dla szczegółowego widoku i widoku produktu. Obrazek dodany do zewnętrznych plików SWF zostaje umieszczony w rozmiarze odpowiednim dla ekranu szczegółowego widoku, lecz następnie, po importowaniu go w czasie wykonawczym, zostaje pomniejszony do widoku produktu na głównym ekranie. Oznacza to, że wystarczy
Rozdział 18-480
zastosować jeden obrazek dla każdego produktu, a potem zmienić jego rozmiar w zależności od miejsca umieszczenia go. Sam koszyk jest dosyć prosty w budowie: po każdorazowym wybraniu produktu przez użytkownika, funkcja o nazwie addToCart powiela klip filmowy mc cart_item, dodając pola tekstowe dla nazwy i ceny wybranej pozycji, a następnie umieszcza go na scenie w obszarze koszyka:
Dzieje się to za maską, więc jednocześnie widocznych jest tylko sześć pozycji, dzięki czemu w prosty sposób można zaprogramować paski przewijania. Całkowita cena jest aktualizowana po dodaniu produktu do koszyka.
Kod To właśnie kod łączy wszystkie wizualne składniki i przekształca ładnie wyglądający interfejs w funkcjonalny składnik aplikacji internetowej. Przeanalizujemy kod szczegółowo, abyś mógł zrozumieć jego działanie w aplikacji zarówno jako „sklejającego” i „komunikacyjnego systemu”. Jeśli podczas czytania tej części rozdziału masz otwarte okno Actions, będziesz mógł przechodzić do tyłu i do przodu między składnikami i samemu ustanawiać połączenia. Większość kodu koszyka została zorganizowana w pięć głównych funkcji — przede wszystkim fragmenty kodu „wielokrotnego użytku” — z których każda zajmuje się jedną z głównych właściwości koszyka.
Główne funkcje Główne funkcje zostały umieszczone na warstwie Functions na głównej listwie czasowej: dzięki temu możemy odnieść się do każdej funkcji stosując ścieżkę _root.nazwaFunkcji. Właśnie dzięki tym funkcjom aplikacja koszyka działa. Przyjrzyjmy się pierwszej funkcji o nazwie initialize. Funkcja ta uruchamiana jest w ujęciu 2 na warstwie Actions w głównym filmie: //funkcja do inicjalizacji aplikacji function initialize() { _root.cart.total = 0; _root.cart.noItems = 0; _root.pageNo = 1; _root.cart.minY = _root.cart.cartItems._y; _root.totalPages = Math.ceil (_root.vars.count / 6); }
Nazwa funkcji mówi sama za siebie: służy ona do inicjalizacji głównych zmiennych zastosowanych w aplikacji. Najpierw przypisuje zmiennej total wartość 0, aby na początku całkowita cena produktów w koszyku wskazywała na $0. Drugi wiersz... _root.cart.noItems = 0;
Rozdział 18-481
...przypisuje zmiennej noItems w klipie filmowym cart wartość 0. Zmienna ta służy do przechowania całkowitej liczby produktów dodanych do koszyka. Zmienna ta zastosowana jest również w pozostałych funkcjach, w procesie powielania nazw kopii klipów filmowych, jak również do określania głębi każdego powielonego klipu. Zmienna pageNo... _root.pageNo = 1;
...przechowuje numer strony, na której aktualnie znajduje się użytkownik. Pamiętaj, że na głównym ekranie znajduje się tylko sześć miejsc na obrazki produktów, lecz w sumie mamy siedem owoców. Po wciśnięciu przez użytkownika na ekranie przycisku przewijania w prawo lub w lewo...
... wartość zmiennej pageNo efektywnie modyfikuje się pomiędzy 1 i 2. Zmienna minY... _root.cart.minY = _root.cart.cartItems._y;
...służy jako odnośnik do przewijania pozycji w koszyku w górę i w dół. Jest ona ustawiona — z klipu filmowego cart — na pozycję Y klipu filmowego cartItems. Ostatnia zmienna, totalPages... _root.totalPages = Math.ceil (_root.vars.count / 6);
... obliczana jest poprzez pobranie wartości zmiennej count z pliku tekstowego cartParams, podzielenie jej przez sześć (czyli liczbę produktów widocznych jednocześnie na stronie) i zaokrąglenie końcowej wartości. Dzięki temu będziemy mogli rozszerzyć liczbę pozycji przechowywanych w pliku tekstowych bez modyfikacji kodu filmu — to obliczenie zawsze da nam właściwą liczbę stron konieczną do wyświetlenia ilości produktów dostępnych w pliku tekstowym. Druga funkcja — buildDetailedView — umożliwia użytkownikowi obejrzenie szczegółowego widoku produktu. Zostaje ona wywołana po wciśnięciu przez użytkownika (niewidocznego) przycisku znajdującego się za każdym obrazkiem produktu na głównym ekranie:
Rozdział 18-482
Przeanalizujmy tę funkcję: //funkcja do utworzenia szczegółowego widoku po kliknięciu na produkcie. function buildDetailedView (itemName, itemURL, itemCost) { loadMovie (itemURL, _root.detailedView.product); _root.detailedView.title = itemName; _root.detailedView.cost = itemCost; _root.detailedView._visible = 1; }
Po kliknięciu na jednym z produktów kilka parametrów zostaje przekazanych funkcji: function buildDetailedView (itemName, itemURL, itemCost) {
Wartości tych trzech parametrów określane są w zależności od danego wybranego produktu, i generowane są przez kod wewnątrz przycisku: parametr itemName oznacza nazwę produktu, na którym użytkownik kliknął, i zostanie ona wyświetlona w polu tekstowym title na ekranie szczegółowego widoku; parametr itemURL oznacza adres URL pliku SWF, którego należy załadować w miejsce obrazka produktu; parametr itemCost oznacza cenę wybranego przez użytkownika produktu — zostanie ona wyświetlone w polu tekstowym cost na ekranie szczegółowego widoku. Pierwszy wiersz kodu w tej funkcji... loadMovie (itemURL, _root.detailedView.product);
...ładuje zewnętrzny plik SWF zawierający obrazek produktu w klip filmowy z miejscem na obrazek, z zastosowanie parametru itemURL. Następnie, kod przypisuje zmiennej title kopii klipu filmowego detailedView wartość parametru itemName: _root.detailedView.title = itemName;
Teraz kod przypisuje polu tekstowemu cost wartość parametru itemCost i, na koniec, ustawia właściwość visible klipu filmowego detailedView na 1 (co oznacza, że klip ten będzie widoczny): _root.detailedView.cost = itemCost; _root.detailedView._visible = 1;
Trzecia funkcja — buildProductView — jest dosyć ważna i bardziej złożona od poprzednich. Służy ona do tworzenia listy produktów podczas ładowania interfejsu lub przewijania różnych stron z produktami: //funkcja do utworzenia widoku miniaturek wszystkich produktów. function buildProductView () { var n = 1; for (i = _root.pageNo * 6 - 5; i <= _root.pageNo * 6; i++) {
Ta funkcja ma kilka zastosowań w aplikacji. Tworzy widok po pierwszym załadowaniu filmu przez użytkownika, lecz również jest wywoływana po każdym kliknięciu na przycisku przewijania, aby użytkownik mógł obejrzeć różne strony z produktami. Najpierw kod przypisuje lokalnej zmiennej n wartość 1: var n = 1;
Ta zmienna służy do tworzenia odniesień w pętli for do każdego z sześciu klipów filmowych z miejscami na produkty. Sama pętla for natomiast... for (i = _root.pageNo * 6 - 5; i <= _root.pageNo * 6; i++) { if (i <= _root.vars.count) { _root["product" + n].gotoAndStop ("on"); _root["product" + n].itemNo = i; loadMovie (eval("_root.vars.url" + i), "_root.product" + n + →".product"); } else { _root["product" + n].gotoAndStop ("off"); } n++; }
... może na pierwszy rzut oka wyglądać dosyć dziwnie. Zaraz wszystko wyjaśnimy. Ponieważ musimy odnosić się do różnych produktów w oparciu o zmienną i, ta zmienną należy inicjalizować w oparciu o numer strony. Na przykład, jeśli użytkownik znajduje się na pierwszej stronie, wartość zmiennej i będzie równa od 1 do 6 na skutek wykonania pętli, lecz jeśli użytkownik będzie na drugiej stronie, wówczas wartość i będzie równa od 7 do 12. Zatem ta część kodu... for (i = _root.pageNo * 6 - 5; i <= _root.pageNo * 6; i++)
... określa liczbę pętli — po jednej dla każdego produktu. Po inicjalizacji pętli for, kod sprawdza, czy wartość zmiennej i jest większa od wartości zmiennej count w kopii vars: if (i <= _root.vars.count) {
Jeśli nie jest, wówczas uruchamiamy kod przez pętlę i kod przesyła klip filmowy z miejscem na produkt do ujęcia oznaczonego on (na wypadek, gdyby znajdował się on w ujęciu off): _root["product" + n].gotoAndStop ("on");
Zauważ, że wartość zmiennej n jest złączona ze zmienną "product" — dzięki temu kod „wie”, w których klipie ma zadziałać. Następnie przypisujemy zmiennej itemNo wartość równą wartości zmiennej i w klipie filmowym z miejscami na produkty: Rozdział 18-484
_root["product" + n].itemNo = i;
Zmienna ta jest uruchamiana, gdy użytkownik klika na produkcie, aby obejrzeć jego szczegółowy widok. Wówczas kod ładuje plik SWF zawierający obrazek produktu do klipu filmowego z miejscami na produkty: loadMovie (eval("_root.vars.url" + i), "_root.product" + n + ".product");
Jeśli wartość zmiennej i jest większa od wartości zmiennej count, oznacza to, że nie ma żadnego obrazka produktu do wyświetlenia w tym miejscu, wiec kod wysyła klip filmowy z miejscem na produkty do ujęcia oznakowanego off: } else { _root["product" + n].gotoAndStop ("off");
Ten kod usuwa z widoku kontur i przycisk, na które normalnie użytkownik może kliknąć aby zobaczyć szczegółowy widok. Na koniec, kod pętli zwiększa wartość zmiennej n za pomocą operatora ++ i pętla jest odtwarzana tyle razy ile to jest konieczne. Wartości zmiennej i nie trzeba zwiększać ręcznie, ponieważ zadbaliśmy już o to podczas inicjalizacji pętli for. Uff. Czwarta funkcja — addToCart — również jest dosyć złożona. Dodaje ona nowe pozycje do koszyka, a jest uruchamiana przyciskiem umieszczonym na ekranie szczegółowego widoku:
A oto kod: //funkcja do aktualizacji koszyka po dodaniu produktu przez użytkownika. function addToCart (itemName, itemCost) { _root.cart.noItems++ duplicateMovieClip (cart.cartItems.item0, "item" + _root.cart.noItems, →_root.cart.noItems); _root.cart.cartItems["item" + _root.cart.noItems]._y = _root.cart.cartItems["item" + →(_root.cart.noItems - 1)]._y + 20; _root.cart.cartItems["item" + _root.cart.noItems].cost = "$" + itemCost; _root.cart.cartItems["item" + _root.cart.noItems].item = itemName; _root.cart.maxY = _root.cart.minY - (_root.cart.noItems * 20) + 120; if (_root.cart.noItems > 6) { _root.cart.cartItems._y = _root.cart.maxY; } updateTotal(itemCost); }
Najpierw omówmy parametry zastosowane w tej funkcji: itemName oznacza nazwę pozycji dodanej do koszyka, a itemCost jej cenę. Obydwa te parametry są wyświetlane w polach tekstowych w koszyku po powieleniu odpowiedniego klipu filmowego: Rozdział 18-485
Ten parametr stosowany jest również do wywołania funkcji updateTotal. Teraz przejdźmy do samej funkcji. Najpierw wartość zmiennej noItems zostaje zwiększona o 1 za pomocą operatora ++: _root.cart.noItems++;
W ten sposób podawana jest aktualna liczba produktów znajdujących się w koszyku. Wówczas nowy klip filmowy zostaje powielony dla nowej pozycji, na którą kliknął użytkownik. Klip powielany jest z głównej kopii klipu item0 — dokładniej z dwóch plików tekstowych — znajdującej się w klipie mc cart_items:
Te ustawienia służą jako punkt wyjściowy dla rozmieszczenia powielonych klipów. Nowa nazwa zostaje utworzona ze słowa item i wartości zmiennej noItems: duplicateMovieClip (cart.cartItems.item0, "item" + _root.cart.noItems, →_root.cart.noItems);
Głębi nowego klipu filmowego również przypisuje się wartość zmiennej noItems. Pozycja Y nowo skopiowanego klipu filmowego zostaje ustawiona na wartość wcześniej skopiowanego klipu filmowego plus 20: _root.cart.cartItems["item" + _root.cart.noItems]._y = _root.cart.cartItems["item" + →(_root.cart.noItems - 1)]._y + 20;
Zmiennej cost w klipie przypisujemy wartość parametru itemCost, dodaną do znaku dolara, natomiast zmiennej item w klipie filmowym przypisujemy wartość parametru itemName: _root.cart.cartItems["item" + _root.cart.noItems].cost = "$" + itemCost; _root.cart.cartItems["item" + _root.cart.noItems].item = itemName;
Rozdział 18-486
Następnie kod przypisuje zmiennej maxY w klipie filmowym cart wartość równą aktualnej liczbie pozycji w koszyku (noItems) pomnożoną przez 20 (odległość pomiędzy powielonymi klipami) plus 120: _root.cart.maxY = _root.cart.minY - (_root.cart.noItems * 20) + 120;
Wynikająca w ten sposób zmienna jest maksymalną pozycją Y, jaką klip filmowy cartItems może osiągnąć dopóki nie będzie się mógł dalej przewinąć: do parametru maxY odnoszą się paski przewijania, gdy użytkownik przewija stronę w górę i w dół. Następnie kod sprawdza, czy bieżąca liczba pozycji w koszyku jest większa niż 6 (maksymalna liczba pozycji, jaką można wyświetlić jednocześnie). Jeśli jest, kod zmienia pozycję Y klipu cartItems zawierającą wszystkie powielone klipu na wartość zmiennej maxY: if (_root.cart.noItems > 6) { _root.cart.cartItems._y = _root.cart.maxY;
Wówczas, gdy w koszu znajduje się już sześć pozycji, a użytkownik chce dodać kolejną, system automatycznie przewija stronę na koniec listy pozycji pokazując w ten sposób użytkownikowi, że dodał produkt do listy. Ostatnią akcją wykonywaną przez omawianą funkcję jest wywołanie oddzielnej funkcji updateTotal: updateTotal(itemCost); }
W ten sposób aktualizowana jest całkowita cena wszystkich pozycji w koszyku, po każdym wywołaniu funkcji addToCart. Sama funkcja updateTotal jest dosyć prosta: //funkcja do aktualizacji całej zawartości koszyka. function updateTotal (itemCost) { _root.cart.total += Number(itemCost); }
Stosuje ona jeden parametr — itemCost. Wartość tego parametru zostaje dodana do bieżącej sumy całkowitej i funkcja zostaje zakończona. Są to główne funkcje interfejsu, lecz musimy jeszcze omówić miejsce i czas ich wywoływania — w innych miejscach również znajdują się niewielkie fragmenty kodu.
Kod paska przewijania Najpierw rzućmy okiem na paski przewijania dla pozycji w koszyku:
Rozdział 18-487
Do przycisku przewijania w górę przypisany jest następujący kod: on (release) { if (cartItems._y < minY) { cartItems._y += 20; } }
Kod ten sprawdza, czy bieżąca pozycja Y klipu filmowego cartItems (czyli klipu zawierającego wszystkie powielone klipy filmowe) jest mniejsza niż wartość zmiennej minY zdefiniowana w funkcji initialize. Jeśli jest, wówczas pozycja Y klipu cartItems zostaje zwiększona o 20 pikseli. Kod dla przycisku przewijania w dół jest bardzo podobny: on (release) { if (cartItems._y < maxY) { cartItems._y -= 20; } }
Ten kod sprawdza, czy pozycja Y klipu filmowego cartItems jest większa od wartości zmiennej maxY zdefiniowanej w funkcji addToCart. Jeśli tak, wówczas pozycja Y klipu cartItems zostaje zmniejszona o 20 pikseli. Poziome paski przewijania służące do przemieszczania się pomiędzy stronami z produktami stosują ten sam symbol przycisku paska przewijania, lecz przycisk ten osadzony jest w klipie filmowym znajdującym się w bibliotece pod nazwą mc page_scroll: Do tego przycisku przypisane są następujące akcje: on (release) { _root.pageNo += dir; _root.buildProductView(); }
Akcje dla omawianego przycisku zostały zaprojektowane w taki sposób, abyśmy mogli zastosować ten sam klip filmowy dla obydwu przycisków, previous i next. Wartość zmiennej dir zostaje dodana do bieżącej wartości parametru pageNo, który przechowuje numer strony, którą aktualnie ogląda użytkownik. Wówczas zostaje wywołana funkcja buildProductView do utworzenia nowej strony produktów. A oto akcje dla przycisku previous: onClipEvent (enterFrame) { if (_root.pageNo == 1) { this._visible = 0; } else { this._visible = 1; } dir = -1; }
Ten klip filmowy stosuje funkcję obsługi enterFrame do uruchamiania swoich akcji. Najpierw klip sprawdza, czy bieżącym numerem strony jest 1, a jeśli tak, wówczas zmienia swoją właściwość visible na 0. Jeśli nie, zmienia właściwość visible na 1, aby wyświetlić przycisk. W ten sposób przycisk previous znika, gdy interfejs wyświetla pierwszą stronę produktów, ponieważ przycisk ten nie jest wówczas potrzebny. Zmienna dir, stosowana w akcjach przycisku, zostaje wtedy ustawiona na -1. Aby zrozumieć dlaczego tak się dzieje, przeanalizujmy kod zastosowany w przycisku w klipie filmowym, a zwłaszcza
Rozdział 18-488
wiersz _root.pageNo += dir. Ponieważ wartość zmiennej dir zostaje dodana do wartości zmiennej pageNo, podczas gdy w przycisku previous należy ją odjąć, przypisujemy zmiennej dir wartość -1, aby odjąć 1 zamiast go dodawać, co oznacza, że możemy zastosować ten sam symbol klipu filmowego dla obydwu przycisków przewijania. Akcje dla przycisku next są podobne: onClipEvent (enterFrame) { if (_root.pageNo == _root.totalPages) { this._visible = 0; } else { this._visible = 1; } dir = -1; }
Istnieje jednak jedna znaczna różnica: zamiast przypisywania zmiennej pageNo wartości 1, w tym kodzie zmienna ta porównywana jest ze zmienną totalPages, zdefiniowaną w funkcji initialize. W ten sposób przycisk zostaje ukryty, gdy aktualnie wyświetlana jest ostatnia istniejąca strona. Następnie zmiennej dir przypisujemy wartość 1 aby zwiększyć wartość parametru pageNo o 1 po wciśnięciu przycisku.
Kod programu ładującego Jest to kod wstępnie ładujący zmienne do klipu filmowego vars. Przede wszystkim zapamiętaj, że architektura filmu składa się z dwóch zasadniczych ujęć na głównej listwie czasowej, oznaczonych odpowiednio preload i showCart. W warstwie Actions ujęcia preload wstawiliśmy akcje stop, która zatrzymuje film aż zostaną pobrane wszystkie zmienne. Do klipu filmowego vars przypisane zostały poniższe akcje: onClipEvent (load) { loadVariables ("cartParams.txt", this); } onClipEvent (data) { _root.gotoAndStop ("showCart"); }
Zdarzenie load ładuje zawartość pliku testowego cartParams.txt do klipu filmowego vars (this). Następnie zdarzenie data wykrywa, kiedy ostatnia zmienna została załadowana do klipu filmowego i po wykryciu wysyła główną listwę czasową do ujęcia showCart — jest to proces bardzo podobny do przykładu omówionego wcześniej przez nas w tym rozdziale. Akcje na warstwie Actions ujęcia showCart wywołują dwie funkcje: initialize(); buildProductView(); stop();
Funkcja initialize służy do zdefiniowania głównych zmiennych wykorzystywanych przez pozostałe funkcje, a funkcja buildProductView zostaje wywołana do utworzenia pierwszej strony produktów. Ostatni fragment kodu, jakiego omówimy, umieszczony jest w kopii klipu filmowego detailedView:
Rozdział 18-489
onClipEvent (load) { this._visible = 0; }
Kod ten przypisuje właściwości visible ekranu szczegółowego widoku wartość false (0), gdy interfejs ładuje się po raz pierwszy, zapewniając w ten sposób, że użytkownik zobaczy ładny czysty widok głównego ekranu. No, tyle jeśli chodzi o kod, którego, według mnie, należało omówić. Doceniam to, że musiałeś przyswoić wiele materiału, lecz teraz możesz zastosować plik FLA jako obszar eksperymentalny, na którym przeanalizujesz sposób napisania tego kodu i samemu wypróbujesz kilka rzeczy.
„Uwielbiam, gdy udaje mi się zrealizować plan” Strukturalnie ten koszyk na zakupy Flasha połączony jest w dosyć prosty sposób, ponieważ większość kodu została zorganizowana w głównych funkcjach. Projekty skonstruowane w ten sposób o wiele łatwiej jest edytować i aktualizować, ponieważ cały główny kod umieszczony jest w jednym ujęciu na warstwie Functions. Zastosowanie scenopisów obrazkowych i blokowych schematów ułatwia rozmieszczenie wszystkich składników projektu. Dokładne zaplanowanie realizacji projektu pomaga w zrealizowaniu wszystkich właściwości w czysty i zwięzły sposób, a sam kod staje się dzięki temu bardziej modularny. Już nie mogę bardziej podkreślić ważności drobiazgowe planowania przy realizacji interfejsu.
Techniki rozwiązywania problemów Podczas konstruowania dynamicznych interfejsów, rzadko kiedy się zdarza, żeby od razu wszystko poprawnie działało — a mówię to z własnego bolesnego doświadczenia! Pamiętaj, aby włączyć debugowanie podczas eksportowania filmu. Zawsze możesz tą opcję wyłączyć przed eksportowaniem końcowej wersji filmu, a ona może naprawdę pomóc. Aby włączyć debugowanie otwórz plik FLA i zastosuj polecenie File|Export Movie. Zaznacz folder, w których chcesz zapisać film, a następnie zaznacz pole wyboru Debugging Permitted i wpisz hasło debugowania w pole Password. Po dokonaniu tych zmian okno eksportowe powinno wyglądać tak:
Rozdział 18-490
Powinieneś również włączyć zdalne debugowanie z samego debugera. W tym celu zastosuj polecenie Window|Debugger i z menu wybierz pozycję Enable Remote Debugging, jak widać na rysunku:
Czasami trzeba trochę poeksperymentować z debugerem, gdyż bywa on...kapryśny. Po odtworzeniu filmu w przeglądarce, jak to zazwyczaj będziesz musiał robić podczas testowania dynamicznej zawartości, powinieneś móc kliknąć prawym klawiszem myszy (lub Control+kliknięcie na Macintoshu) na filmie i zaznaczyć polecenie Debugger. Wówczas wyświetlone zostaną listwy czasowe zastosowane w filmie, a także zmienne i właściwości należące do tych listew. Jest to jeden z powodów, dla którego należy nazywać wszystkie kopie klipów filmowych na scenie, nawet jeśli nie są one docelowe — łatwiej je wówczas zlokalizować w debugerze. Możesz zmodyfikować wszystkie zmienne i właściwości, jakie da się zdefiniować w ten sposób, a wówczas zmiany te zostaną aktualizowane w wyszukiwarce. Dzięki temu łatwiej można zaobserwować co się stanie, gdy przypiszesz zmiennym inne wartości, lub zmodyfikujesz właściwości.
Zakładka Watch jest kolejnym przydatnym narzędziem. Umożliwia ona obserwowanie wybranych zmiennych podczas odtwarzania filmu. Aby dodać nową zakładkę kliknij prawym klawiszem myszy lub kliknij z wciśniętym klawiszem Control w polu zawartości na zakładki Watch i wybierz polecenie Add:
Rozdział 18-491
Wpisz nazwę zmiennej w polu Name i wówczas aktualne ustawienie tej zmiennej zostanie przedstawione w polu Value. Nie musisz wprowadzać ścieżki zmiennej — wystarczy zaznaczyć listwę czasową, na której znajduje się dana zmienna i wpisać jej nazwę. Jeśli chcesz usunąć obserwowaną zmienną, kliknij prawym klawiszem myszy, lub kliknij z wciśniętym klawiszem Control na zmiennej wybranej do usunięcia i z menu kontekstowego wybierz polecenie Remove. Dokładne testowanie skryptów działających po stronie serwera przed testowaniem ich we Flashu jest niezwykle istotne. Czas programowania może bardzo szybko się wydłużyć, jeśli będziesz pracować na skrypcie z błędami. Zanim przetestujesz połączenie z serwerem we Flashu, przetestuj go na „surowo” przez przeglądarkę, aby upewnić się, że sam skrypt nie generuje błędów. Dzięki temu oszczędzisz sobie wyszukiwania błędu w filmie Flasha wówczas, gdy naprawdę znajduje się on w skrypcie.
Zakończenie Podczas opracowywani projektu obejmującego dynamiczną zawartość, ważne jest, aby podchodzić do wszystkiego pod pewnym kątem. Tak naprawdę, to jedyne co robisz, to ładujesz zmienne z pola tekstowego do filmów. Tak się zdarzyło, że zmienne te są dynamiczne. Tworzenie interfejsów Flasha może przynieść wiele satysfakcji, gdyż technologia ta jest bardzo młoda. Masz okazję wykonać zdumiewające aplikacje wykorzystując moc dynamicznej zawartości podwojoną przez świetną grafikę wektorową Flasha, możliwości animacyjne i — oczywiście — jednoczącą moc i elastyczność kodu ActionScript. Jeśli tylko będziesz pamiętać o rygorystycznym etapie planowania, aby ograniczyć problemy, które mogą pojawić się wówczas, gdy podchodzisz do projektu ze zbyt wielu stron, zaczniesz tworzyć fantastyczne aplikacje internetowe. Świat czeka — więc na co ty jeszcze czekasz? W dwóch następnych rozdziałach przedstawimy ci zastosowanie dwóch istotnych narzędzi Flasha do tworzenia dynamicznej zawartości — PHP i XML.
Rozdział 18-492
Rozdział 19 Flash i PHP PHP (który z nie od razu rozpoznawalnych powodów jest skrótem od Hypertext Preprocessor — Preprocesor Hypertekstu) jest narzędziem i językiem służącym do pisania dynamicznie generowanych stron internetowych. pod tym względem nie różni się od zbytnio od technologii ASP (Active Server Pages) firmy Microsoft, o którym już wspominaliśmy w książce. Istnieją jednak między nimi dwie istotne różnice. Po pierwsze, PHP pracuje na wszystkich głównych platformach: Windows, Macintosh i UNIX, podczas gdy ASP przeznaczony jest tylko na Windowsa. Po drugie, PHP jest oprogramowaniem na licencji open source, co oznacza, że możesz pobrać i używać go bez uiszczania żadnych opłat — niezwykle atrakcyjna propozycja! PHP jest używany przez wiele osób i okazał się niezwykle popularnym narzędziem dla osób tworzących witryny internetowe z dynamiczną zawartością. Program ten można z łatwością zintegrować z Flashem, dzięki czemu będziesz mógł tworzyć filmy Flasha z niezwykle ważną dynamiczną i interaktywną zawartością. W tym rozdziale omówimy zastosowanie PHP do projektowania i tworzenia dynamicznych filmów Flasha, czyli filmów, które same siebie potrafią „spersonalizować” zgodnie z aktualnymi warunkami. Przedstawimy zasady użycia Flasha w połączeniu z PHP, zajmiemy się kilkoma technikami programowania witryn internetowych z wykorzystaniem tej kombinacji, a także omówimy kilka pomysłów na potencjalne zastosowanie tych technologii. Pod koniec rozdziału powinieneś już dokładnie wiedzieć, jaką rolę może odegrać PHP w twoich filmach, i być gotowych do przyswojenia kolejnych informacji o tej ekscytującej technologii.
Zasady stosowania PHP z Flashem Język programowania PHP przeszedł długi okres rozwoju od czasu jego narodzin w 1994. Chociaż obecnie uważany jest za język programowania na potrzeby Sieci i nieograniczonych możliwościach, oryginalnie powstał wyłącznie do zaspokojenia potrzeb jego autora, Rasmusa Lerdofa. Wówczas PHP był stosowany głównie do programowania prostej zawartości HTML z wykorzystaniem kilku makr pomagających użytkownikowi w tworzeniu takich narzędzi jak liczniki stron i internetowa księga gości. Na przestrzeni lat społeczność programistów open source wzbogaciła język programowania PHP wieloma nowymi cechami i sukces tego przedsięwzięcia był zaskakujący: według szacunkowych obliczeń ponad 1000000 witryn internetowych na całym świecie powstało na bazie PHP (a tak przy okazji, skrót PHP pochodzi z pierwszych lat istnienia tego języka, kiedy to jego pełna nazwa brzmiała Personal Home Pages, czyli Osobiste Strony Domowe). Do tworzenia witryn internetowych Flasha i aplikacji przystosowanych do komunikacji z ich otoczeniem, konieczne jest zrozumienie najważniejszych zagadnień teoretycznych. W następnej części tego rozdziału omówimy sposób, w jaki Flash komunikuje się z innymi elementami świata aplikacji internetowych: PHP, serwerem WWW, bazami danych i
Rozdział 19-493
użytkownikiem. Przeanalizujemy również cały proces tworzenia dynamicznych filmów Flasha z zastosowaniem PHP. Pierwszą rzeczą, z którą należy się zapoznać, jest sposób interakcji przeglądarki uruchomionej na komputerze twoim lub twojego klienta z odległym serwerem zawierającym witrynę internetową i dostarczającym jej zawartości i usługi.
Połączenia klient-serwer WWW Poniższy uproszczony diagram przedstawia, w jaki sposób serwery WWW obsługują połączenia z klientem i wysyłają odpowiedzi z „tradycyjną” zawartością witryn internetowych (czyli w języku HTML), bądź inne zasoby tekstowe, w sesji HTTP:
nie „klient – wyszukiwarka”, a „klient – przeglądarka” To połączenie pomiędzy przeglądarką i serwerem WWW jest uruchamiane najpierw przez użytkownika wysyłającego zadanie o jakąś informację umieszczoną na witrynie internetowej. Przeglądarka generuje żądanie HTTP wysłane do docelowego serwera WWW wraz z innymi wymaganymi informacjami o żądanym zasobie. Po otrzymaniu żądania przez serwer WWW, sprawdza on poprawność żądania. Jeśli wszystko jest w porządku, serwer zwraca żądane zasoby do klienta z krótki kodem stanu protokołu HTTP. Jeśli w trakcie przetwarzania żądania o zasoby coś się nie powiedzie, wygenerowany zostaje kod stanu HTTP o błędzie i wysłany do przeglądarki użytkownika. Przyjrzymy się teraz, w jaki sposób język PHP dodawany jest do tej mikstury.
Program obsługi PHP oparty na CGI Przy żądaniach o skrypty PHP na serwerze WWW stosunkowo prosty diagram przedstawiony powyżej staje się nieco bardziej skomplikowany. Tego typu żądania kierowane są do programu obsługi PHP oparty na CGI (Common Gateway Interface). Jest to część systemu obsługująca przetwarzanie skryptów napisanych w języku PHP. Właśnie te skrypty odpowiedzialne są za filtrowanie i obróbkę danych i zmiennych. Program obsługi PHP oparty na CGI podejmuje odpowiednie działania w celu uruchomienia skryptu, a także obsługi danych i żądań plików, wywołanych przez skrypt:
Rozdział 19-494
nie „klient – wyszukiwarka”, a „klient – przeglądarka” Serwer WWW kieruje dane wyjściowe z program obsługi PHP oparty na CGI, czyli dane żądane przez klienta, które zostały wygenerowane i przetworzone przez skrypt PHP, z powrotem do klienta, który oryginalnie żądał aktualny plik skryptu PHP. W ten sposób strona klienta ma dostęp tylko do wyniku wykonane skryptu a nie do samego pliku skryptu. Zaletą tego typ środowiska po stronie serwera jest różnorodne, w porównaniu do strony klienta wykonanie zadania. Przetwarzanie po stronie serwera nie jest ograniczone do środowiska i oprogramowania klienta, umożliwiając w ten sposób wykonanie na przykład, złożonych operacji na bazie danych. Ponadto, cała implementacja procesu może zostać ukryta i zabezpieczona. Program obsługi PHP oparty na CGI działa jako analizator składniowy języka programowania. Analizator składniowy odczytuje skrypt, wiersz po wierszu, i w razie potrzeby wykonuje różne funkcje. W protokole PHP istnieje potężna kolekcja użytecznych grup funkcji, z których każda koncentruje się na innym obszarze funkcjonalności. W tym rozdziale skupimy się na podstawowym programowaniu w języku PHP.
Komunikacja pomiędzy Flashem i PHP Chociaż PHP można stosować jako samodzielne narzędzie do tworzenia dynamicznych witryn internetowych, nas o wiele bardziej interesują możliwości tego języka w połączeniu z Flashem. Przede wszystkim, należy się zastanowić co robimy, gdy integrujemy film Flasha z narzędziem programowania po stronie serwera, takim jak PHP — gdy tworzymy film w pliku FLA, definiujemy kilka nazw zmiennych w języku ActionScript, które łączymy z, powiedzmy, kilkoma dynamicznymi polami tekstowymi:
Rozdział 19-495
Wówczas wprowadzamy kod ActionScript, który wywołuje skrypt PHP na serwerze dynamicznie zwracający serie wartości zmiennych. Następnie Flash wykorzystuje otrzymane zmienne do zapełnienia w locie pól tekstowych, wewnątrz filmu,, który wyświetlany jest w przeglądarce użytkownika. Zatem, na przykład, możemy zastosować kod ActionScript do wywołania skryptu PHP na serwerze, który przeszuka bazy danych, a następnie zapełnić cały zestaw pól tekstowych w filmie w oparciu o wyniki zwrócone przez skrypt do Flasha. Na tym etapie, nasz diagram ilustrujący interakcje pomiędzy klientem i serwerem staje się coraz bardziej złożony:
nie „klient – wyszukiwarka”, a „klient – przeglądarka” Jak widać, teraz nie przeglądarka lecz film Flasha wysyła wszystkie konieczne żądania HTTP na serwer WWW. Oznacza to, że film Flasha można z łatwością zmodyfikować za pomocą informacji zebranych z danych wyjściowych skryptów PHP. Ponieważ przeglądarka i film Flasha otrzymują tylko wyniki skryptów PHP wykonywanych na serwerze, konieczne jest, aby skrypty PHP produkowały ich dane wyjściowe w formie odczytywanej przez film Flasha. Oznacza to, że dane wyjściowe zapisywane są w formie ciągu par nazwa/wartość, z każdą nową nazwą zmiennej (po pierwszej nazwie) oznaczoną symbolem &: action=register&name=John+Smith&age=25
W tym ciągu danych znajdują się trzy nazwy zmiennych i wartości: Nazwa zmiennej Wartość action register name John+Smith age 25 Nie wydaje ci się to znajome? Równie dobrze moglibyśmy w tym momencie pracować nad programowaniem witryny internetowej: format ciągu zmiennych stosowany przez Flasha jest taki sam jak ciągi żądanych parametrów HTTP zakodowanych w adresie URL, z kilkoma wyjątkami. Parametry zmiennych Flasha również powinny być zakodowane tak jak adres URL, lecz wydaje się, że spacje można stosować jako zwykłe znaki. Wszystkie parametry Rozdział 19-496
zmiennych należy oddzielać znakiem &, oprócz parametru pierwszego. Powiedzmy, że masz już gotowy film Flasha z trzema dynamicznymi polami tekstowymi o nazwie Action, Name i Age. Teraz, jeślibyśmy chcieli przenieść przedstawiony powyżej ciąg zmiennych do filmu Flasha jako dane wejściowe, zmieniłby on zawartość tych trzech pól tekstowych tak, aby zawierały wartości zmiennych register, John Smith i 25:
Zatem, w jaki sposób wywołujemy skrypt PHP do uruchomienia i zwrócenia nam kilku wartości zmiennych? Głównymi mechanizmami są tutaj akcje loadVariables i getURL. Jeśli nie używałeś wcześniej funkcji kodu ActionScript Flasha 5, loadVariables ani getURL, najwyższy czas, abyś się tego nauczył! Gdy zostają one wywołane jako część kodu ActionScript, obydwie akcje generują żądanie HTTP i przesyłają tożsamości zmiennych zdefiniowanych w bieżącym filmie do adresu URL o nazwie podanej w kodzie ActionScript. W naszych przykładach, oczywiście, ten docelowy adres URL przechowa skrypt PHP, który dokona przetwarzania. Tożsamości zmiennych w filmie zostają dopasowane do nazw zmiennych zdefiniowanych w odbierającym skrypcie PHP. Funkcja getURL nie będzie czekać na żadne zmienne z odpowiedzi, lecz bezpośrednio przejdzie pod określony adres URL. Funkcja loadVariables, z drugiej strony, poczeka i pobierze zmienne z ciągu odpowiedzi HTTP (wygenerowanego przez skrypt PHP) do filmu, który spowodował wywołanie skryptu. Na przykład, poniższy fragment kodu ActionScript stosuje akcję getURL do załadowania zawartości ze zmiennej myURL do pustego okna przeglądarki: on (release) { getURL(myURL, "_blank"); }
W międzyczasie następny skrypt wprowadza do bieżącego filmu zmienne utworzone przez skrypt PHP o nazwie content.php, przechowywane na serwerze WWW: on (release) { loadVariables("www.mysite.com/content.php", 0); }
Poniższy schemat podsumowuje proces wysyłania i otrzymywania zmiennych tą trasą:
Rozdział 19-497
Baza danych i inne źródła danych przedstawione na tym rysunku są całkowicie opcjonalne. Czasami lepiej jest jak najmniej obciążać skryptu (na przykład, poprzez zastosowanie plików tekstowych jako źródła danych wejściowych) aby zapewnić maksymalną sprawność uruchomionego filmu Flasha — nie chcemy przecież, aby nasz film „zamarzał” w przeglądarkach użytkowników oczekując na wygenerowanie danych przez skrypt PHP. Z funkcją loadVariables związana jest pewna niezwykle ważna kwestia, która czasami może utrudnić człowiekowi życie. Po załadowaniu tej akcji, film Flasha zanim przystąpi do kontynuacji odtwarzania, nie zaczeka na załadowanie grupy zmiennych do filmu z zewnętrznego źródła. Domyślnym zachowaniem jest kontynuacja odtwarzania filmu ujęcie po ujęciu i bardzo trudno jest przewidzieć, kiedy wartości zmiennych zostaną w pełni pobrane. Jeśli zachowanie to jest odpowiednio obsługiwane, może sprawić wiele kłopotów. Jeśli pracujesz we Flashu 5, z tymi problemami można sobie bardzo łatwo poradzić: język programowania ActionScript Flasha 5 zawiera zdarzenie OnClipEvent(data), które zostaje wywołane po załadowaniu do filmu Flasha ostatniej zmiennej zewnętrznego ciągu zmiennych. Flash 4 nie posiada tej pomocnej funkcji, więc trzeba znaleźć inną metodę na obejście tych problemów. Na szczęście, istnieje bardzo proste rozwiązanie: wystarczy poczekać na doczytanie z ciągu zmiennych dodatkowej zmiennej sprawdzającej: action=register&name=John+Smith&age=25&foo=ok.
Jeśli Flash 4 jest docelową wersją dla twoich filmów, dodatkowa zmienna foo zawsze powinna być generowana na w skryptach PHP jako ostatnia. Należy również dodać pętlę sprawdzającą, która będzie odtwarzana do momentu otrzymania zmiennej foo, sygnalizując, że pobrane już zostały wszystkie wygenerowane przez skrypt dane. Jeśli, na przykład, pierwsze ujęcie w filmie stosuje akcję loadVariables do rozpoczęcia ładowania grupy zmiennych ze skryptu PHP, w trzecim ujęciu filmu powinieneś umieścić poniższy kod sprawdzający ActionScript: if (foo eq "") { gotoAndPlay (2); }
To takie proste! Po zakończeniu pętli pomiędzy drugim i trzecim ujęciem, możesz być pewien, że wszystkie przekazane zmienne zostały pomyślnie załadowane do pliku Flasha, nawet jeśli było ich dosyć dużo. No dobrze, w ten sposób zakończyliśmy nasz wstępny wykład teoretyczny o integracji Flasha i PHP. W dalszej części rozdziału przeanalizujemy kilka przykładów zastosowania tej technologii, lecz zatrzymajmy się teraz na chwilę i rzućmy okiem na platformy wspomagające, służące do testowania tego typu kodu.
Rozdział 19-498
Narzędzia Może słyszałeś, że narzędzia na licencji open source są zawodne, trudne do instalowania i trudne z użyciu. Kiedyś było to prawda, lecz czasy się zmieniły i twórcy tych narzędzi odpowiedzieli na zapotrzebowanie coraz większej liczby ich użytkowników poprzez udoskonalenie zarówno wydajności jak i opcji ułatwiających obsługę ich produktów. Jak już wkrótce się o tym przekonasz, narzędzia, jakie zastosujemy w tym rozdziale, są łatwe w obsłudze, instalacji i konfiguracji i szybciej niż myślisz będziesz pracować z serwerem WWW obsługującym PHP. Możliwe, że pracujesz w środowisku już wyposażonym w serwer WWW z obsługą języka PHP — zapytaj administratora systemu, jeśli nie jesteś pewien; w takiej sytuacji możesz od razu przejść do sekcji Twoja pierwsza strona w języku PHP. Zachęcamy jednak, żebyś został tutaj z nami, gdyż będziemy teraz omawiać konfigurację twojej maszyny do programowania i testowania kodu PHP. Po drodze zajmiemy się również charakterystyką języka PHP. Naszym celem jest ustanowienie środowiska programowania bez wymagania szerokiej wiedzy o sposobie jego konfiguracji. Do zrealizowania naszych dążeń będziemy potrzebować dwa elementy: sam język PHP i serwer WWW, na którym będzie on uruchomiony. Warto w tym miejscu wspomnieć, że, inaczej niż technologia ASP, działająca wyłącznie na serwerach WWW firmy Microsoft, PHP uruchomimy na dowolnej platformie. Między innymi, program ten świetnie daje sobie radę na serwerze Personal Web Server firmy Microsoft, Internet Information Server (IIS), jak również na oprogramowaniu serwerów firmy Xitami. W tym rozdziale jednak zastosujemy PHP w połączeniu z serwerem WWW, który najlepiej współdziała z omawianym programem, czyli Apache. Nie obawiaj się jednak — zasady omówione tutaj z powodzenie można stosować na innych platformach, a kod przetestowaliśmy również na serwerze IIS. Zarówno Apache jak i PHP znajdziesz na płycie CD-ROM dołączonej do książki. Jeśli chcesz zastosować PHP z serwerem WWW innym niż Apache, zauważysz, że instrukcje na witrynie internetowej PHP (www.php.net) są jasne i spójne i nie powinieneś mieć problemów z poradzeniem sobie samemu. Po uruchomieniu PHP będziesz mógł śledzić przykłady bez konieczności wprowadzania żadnych zmian.
Serwer WWW Apache Serwer WWW Apache jest bezpłatnie dostępny na witrynie internetowej Apache Software Foundation znajdującej się pod adresem www.apache.org. Ponieważ jest to produkt na licencji open source, nie powinno cię dziwić, że większość pozycji dostępnych pod łączem Download, to czysty kod źródłowy. Jednakże, jeśli uda ci się dotrzeć do folderu binaries, znajdziesz w nim skompilowane wersje Apache dla Windows, OS/2 i większości dystrybucji UNIX-a (włącznie z Linuxem). Dostępna jest również skompilowana wersja Apache dla systemu Mac OS X, lecz jest to pierwsze wydanie systemu operacyjnego firmy Apple, dla którego przygotowano serwer Apache. W naszych ćwiczeniach zastosowaliśmy wersję dla Windowsa. Instalacja Apache dla Windows jest dosyć prosta, gdyż dystrybucje umieszczone na wspominanej witrynie internetowej są całkowicie samo-konfigurujące się. Wystarczy pobrać najświeższą wersję z folderu win32 i uruchomić ją — jest to jeden plik obsługujący wszystkie wersje Windowsa. Zaakceptuj wszystkie domyślne opcje i po ukończeniu instalacji powinieneś w menu Start znaleźć nową pozycję:
Rozdział 19-499
Zgodnie z rysunkiem, zaznacz pozycję Install service i następnie ponownie uruchom komputer. Dzięki temu po uruchomieniu systemu Apache będzie już działać w tle, gotowy do obsługi stron. Aby to sprawdzić, otwórz swoja przeglądarkę stron WWW i wpisz adres http://127.0.0.1. Wówczas wyświetli się poniższy ekran:
Gratulacje! Właśnie pomyślnie zainstalowałeś serwer WWW Apache na swoim komputerze, więc jesteśmy już gotowi na wzbogacenie go o język PHP. W ramach wyjaśnienia: 127.0.0.1 nosi nazwę adresu pętli zwrotnej. Po wpisaniu tego adresu w przeglądarkę internetową, nie zacznie ona szukać konkretnej strony w Internecie, lecz serwera WWW na lokalnej maszynie, a skoro masz już zainstalowany serwer Apache, znajdzie właśnie jego.
Jeśli do wykonania ćwiczeń w tym rozdziale stosujesz serwer IIS, musisz upewnić się, że uruchomiłeś menadżera Personal Web Manager:
Rozdział 19-500
Jak widać na powyższym rysunku, moja maszyna testująca dostępna jest po wpisaniu adresu http://andyc w pole adresu internetowego w przeglądarce, a wszystkie pliki, jakie będę chciał wyświetlić na witrynie, będą umieszczone w folderze C:\Flash 5 Studio Testing. Nie możemy tutaj omówić również procedur konfiguracji dla serwera IIS, lecz powinieneś uzyskać pomoc od swego administratora systemu lub bezpośrednio od firmy Microsoft w trybie online. Zakładając, że skonfigurowałeś już serwer WWW, przejdźmy do samego języka PHP.
PHP4: Preprocesor Hipertekstu Strona domowa PHP znajduje się pod adresem www.php.net, a szybka wizyta na stronie downloads przedstawi sytuację podobną do tej na witrynie serwera Apache. Większość produktów dostępnych tutaj są w formie pakietów kodu źródłowego, lecz znajdziesz również skompilowane wersje dla Windows. Zawsze z myślą o ułatwianiu sobie życia, do wprawiania się w pisaniu kodu PHP zastosujemy wersję skompilowaną. Jak to często bywa z oprogramowaniem na licencji open source, nowe wersje programu PHP pokazują się co tydzień, a czasami nawet codziennie. Ponieważ w tym rozdziale zajmiemy się tą technologia bardzo powierzchownie, posiadanie najnowszej wersji nie jest tutaj niezbędne, lecz również nie zaszkodzi. W momencie pisania tej książki najbardziej aktualna wersja oznaczona była numerem 4.0.4pl1, lecz podczas wyboru wersji należy kierować się głównie tym, aby obsługiwała ona serwer Apache (jej wielkość będzie wynosić około 3 MB). Oczywiście, jeśli pracujesz na serwerze IIS, będziesz musiał pobrać wersję odpowiednią dla tej platformy. Po pobraniu pliku PHP.zip, rozpakuj jego zawartość do folderu o nazwie PHP na dysku C:. Plik znajdujący się teraz w folderze C:\PHP\install.txt zawiera instrukcje, jakich powinieneś przestrzegać, aby przeprowadzić procedurę instalacji, lecz dla zachowani pełnej jasności, odtworzymy jej tutaj. Instalacja PHP jest odrobinę trudniejsza od instalacji Apache, lecz nie jest tak źle, jak sądzisz! 3 Jeśli pracujesz na serwerze IIS, powinieneś zauważyć, że program instalacyjny wykonuje za ciebie całą pracę, więc zaraz po uruchomieniu go powinieneś być już gotowy do pracy.
3
Obecnie są już udostępnione programy instalujące za jednym zamachem (np. PhpTriad czy WinFoxServ) serwer Apache, PHP i MySQL, w środowisku Windows – przyp. red.
Rozdział 19-501
Przede wszystkim, musisz przenieść plik znajdujący się w folderze C:\PHP\php4ts.dll do folderu C:\Windows\System lub C:\WINNT\System32, w zależności od tego, czy pracujesz na systemie Windows 9x czy Windows NT. Następnie, przejdź do menu Start i zastosuj polecenie Programy|Apache Web Server|Management|Edit configuration. Wówczas otwarte zostanie okno Notatnika zawierające plik tekstowy o nazwie httpd.conf. Jest to plik konfiguracyjny serwera Apache, w którym wprowadzimy pewne zmiany. W tym pliku dodamy pięć linijek, w czterech różnych miejscach. Ustawienia zostały podzielone na grupy, więc znajdziesz miejsce, gdzie należy dodać poniższe wiersze wyszukując pierwszy wyraz z każdej linijki (podaliśmy też tutaj wiersze poprzedzające nowo wprowadzone linijki, więc od razu będziesz mógł sprawdzić, czy odnalazłeś właściwe miejsce). A oto pierwsza modyfikacja: #LoadModule status_module modules/ApacheModuleStatus.dll #LoadModule usertrack_module modules/ApacheModuleUserTrack.dll LoadModule php4_module c:/php/sapi/php4apache.dll
I druga: ScriptAlias /cgi-bin/ "C:/Program Files/Apache Group/Apache/cgi-bin/" ScriptAlias /php4/ "C:/php/"
Zamknij okno Notatnika (nie zapomnij wcześniej zapisać pliku) i to już prawie wszystko. Na koniec skopiuj plik o ścieżce C:\PHP\php.ini-dist do foldera Windows (lub WINNT), zmień jego nazwę na php.ini i ponownie uruchom komputer, tak na szczęście. Teraz pozostaje ci już tylko trzymać kciuki, że wszystko się uda...
Twoja pierwsza strona w języku PHP Aby sprawdzić, czy konfiguracja Apache/PHP jest w porządku (jeśli chcesz, możesz również przeprowadzić ten test na serwerze IIS), utwórz plik o nazwie test.php i wpisz w nim trzy poniższe wiersze: PHP content..."; ?>
W tym prostym kodzie umieszczone są dwa „zewnętrzne” elementy definiujące go jako skrypt PHP. Są tą znaczniki zawierające dwa znaki zapytania:
Rozdział 19-502
Znaczniki informują serwer, że cała treść zawarta pomiędzy tymi dwoma znacznikami jest skryptem PHP i powinna być uruchamiana za pomocą programu obsługi PHP oparty na CGI. Konfiguracja serwera zdefiniuje, gdzie znajduje się program obsługi i przeniesie do niego odpowiednią zawartość skryptu. A teraz przejdźmy do aktualnej zawartości skryptu. W tym przykładzie mamy pojedynczy wiersz skryptu umieszczone pomiędzy dwoma ogranicznikami skrypt PHP, który nakazuje serwerowi wysłanie ciągu tekstu i znaczników HTML z powrotem do przeglądarki, która wywołała skrypt. W tym celu zastosowano polecenie języka PHP echo, o treści: „wywołująca przeglądarko, proszę, wyświetl następujące dane”. Tekst w cudzysłowie następujący po poleceniu echo zostanie wyświetlony w przeglądarce, z pogrubionym skrótem PHP (sygnalizują to znaczniki „pogrubienia” HTML). Wiersz kończy się średnikiem, który w języku PHP oznacza zakończenie oddzielnego fragmentu skryptu. Umieść ten prosty skrypt PHP w folderze htdocs w katalogu instalacji Apache, jeśli zastosowałeś domyślne ustawienia, będzie to ścieżka C:\Program Files\Apache Group\htdocs (domyślnie, serwer Apache będzie zawsze szukać zawartości właśnie w tym folderze). Następnie w oknie przeglądarki wpisz adres http://127.0.0.1/test/php i jeśli wszystko pójdzie zgodnie z planem, powinieneś zobaczyć następujący ekran:
Voila — właśnie wygenerowałeś dynamiczną zawartość w oparciu o skrypt typu klient serwer. Aby przetestować konfigurację w serwerze IIS, zapisz plik test.php w domyślnym folderze twojego serwera WWW — w moim przypadku jest to folder o nazwie Flash 5 Studio Testing — a następnie skieruj przeglądarkę na tą ścieżkę wpisując adres składający się z nazwy serwera i nazwy pliku, tak jak na rysunku:
Rozdział 19-503
Dokumentacja PHP4 Aby zdobyć pełną dokumentację dla PHP przejdź do sekcji documentation na witrynie internetowej PHP i pobierz jedną z wielu dostępnych tam wersji. Często aktualizowany podręcznik jest dobrze zorganizowany i zawiera informacje niezbędne dla każdego programisty pracującego z językiem PHP. Wytłumaczone w nim zostały prawie wszystkie aspekty stosowania PHP, ilustrowane odpowiednio dobranymi przykładami, które z łatwością można zastosować do zbadania właściwości PHP. No dobrze, skoro uporaliśmy się już z podstawami, możemy przejść do zwiększania możliwości filmów Flasha poprzez zastosowanie platformy PHP.
Co można zrobić z PHP i Flashem Przy odrobinie wyobraźni i planowania sterowane skryptem PHP filmy Flasha mogą zaoferować wiele nowych możliwości. Jednakże, aby zrozumieć zasady działania zaawansowanych właściwości, jakie wprowadzimy w tym rozdziale, przeanalizujemy najpierw aplikacje Flasha wspomagane językiem PHP na bardziej ogólnym poziomie. Zadania, jakie można przeprowadzać za pomocą języka PHP podzieliliśmy na trzy następujące kategorie: • •
•
Przetwarzanie danych, jakie użytkownik wprowadził w czasie trwania filmu, jak również, być może, przechowywanie danych. Można sprawdzić poprawność informacji, a skrypt następnie adekwatnie odpowie filmowi Flasha. Tworzenie zupełnie nowych danych z zastosowaniem języka PHP i przesyłanie ich do filmu Flasha. Podobnie jak inne strukturalne języki programowania, PHP zawiera rozbudowaną kolekcję algorytmów i funkcji. W bardzo prosty sposób da się je stosować do tworzenia złożonych zestawów danych (takich jak drzewa danych), które można następnie wykorzystać w połączeniu z filmami Flasha. Funkcjonowanie jako most pomiędzy filmem Flasha i zewnętrznym źródłem danych. Ta opcja obejmuje systemy plików po stronie serwera, bazy danych, zewnętrzną łączność HTTP, pocztę elektroniczną i inne środki dostępu do danych.
Pojedynczy skrypt PHP może stanowić miksturę dowolnych z tych trzech kategorii. Podczas pracy nad bardziej zaawansowanymi aplikacji internetowymi często zauważa się, że możliwości obsługi danych Flasha nie są wystarczająco potężne do przeprowadzenia wszystkich potrzebnych operacji, zwłaszcza, gdy należy przetworzyć i odpowiedzieć na duże ilości danych. W przypadku znacznej liczby danych stosuj bazy danych: język PHP charakteryzuje się rozbudowaną obsługą wszystkich popularnych typów baz danych, chociaż niestety nie mamy tu wystarczająco dużo miejsca, aby omówić każdy z nich dokładniej. Im więcej nauczysz się o właściwościach języka PHP, tym szybciej dasz sobie radę z problemami z skomplikowanymi zadaniami. Staraj się tworzyć filmy Flasha i skrypty PHP jak najbardziej modularne — wysiłek ten opłaci ci się, gdy będziesz planować lub rozszerzać właściwości danej aplikacji w przyszłości. Zasady te staną się dla ciebie bardziej zrozumiałe po omówieniu przykładowych aplikacji w dalszej części rozdziału.
Zagadnienia związane z wydajnością PHP Warto utrzymywać stosunkowo krótki czas wykonywania poszczególnych skryptów. Ogólnie mówiąc, kod PHP wykonywany jest dosyć szybko, zwłaszcza po optymalizacji go do jak najlepszej wydajności. Długość skryptu, pod katem ilości zawartego w nim kodu, nie
Rozdział 19-504
odgrywa żadnej roli, lecz czas wykonania owszem. Jeśli skrypt można logicznie podzielić na mniejsze części, warto to zrobić, aby zapewnić, że wywołanie filmu Flasha nie ucierpi z powodu długiego czasu wykonania skryptów PHP. Wykonanie prędkości skryptów PHP może być znacznie ulepszone poprzez zoptymalizowanie ich za pomocą optymalizatora Zend. Narzędzie to zostało opracowane do zastosowania wyłącznie z wersja PHP 4 lub nowszą i nie zadziała z żadnymi wcześniejszymi wersjami. Więcej informacji znajdziesz pod adresem http://www.zend.com.
Teraz obierzmy bardziej praktyczne podejście i przyjrzyjmy się, w jaki sposób Flash i PHP współdziałają na poziomie wymiany informacji. Przeanalizujemy ten proces w ćwiczeniu, w którym prześlemy informacje z interfejsu wykonanego we Flashu, przetworzymy ją w skrypcie PHP i zapiszemy dane w pliku tekstowym umieszczonym na serwerze.
Flash i PHP w akcji W tym ćwiczeniu wykonamy prostą przykładową aplikację, na którą będzie się składać wspomagany językiem PHP film Flasha zbierający nazwiska i adresy poczty elektronicznej odwiedzających przed zapisaniem ich w jednym pliku tekstowym o stronie serwera:
Omówimy ten projekt bardzo szczegółowo, gdyż zastosowaliśmy w nim główne techniki łączenia Flasha z PHP. Wpisywanie tekstu do pliku po stronie serwera
Interfejs użytkownika dla tej niewielkiej aplikacji jest bardzo prosty:
Zabierzmy się do pracy. 1. Otwórz nowy film i wybierz dla niego rozmiar odpowiedni dla prostego interfejsu użytkownika — my wybraliśmy 300 na 150 pikseli. 2. Teraz dodaj dwa statyczne pola tekstowe, które posłużą jako etykiety dla pól wejściowych:
Rozdział 19-505
Następnie będziemy potrzebować dwa wejściowe pola tekstowe dla danych użytkownika. 3. Dodaj dwa wejściowe pola tekstowe, nadając górnemu polu nazwę zmiennej n, a dolnemu e. Przypisz im odpowiednio wartości Max Char 20 i 30. upewnij się, że pole wyboru Border/BG jest zaznaczone, dzięki czemu pole wejściowe będzie widoczne na ekranie:
Właśnie przygotowaliśmy środowisko wejściowe dla użytkownika. Następnym etapem będzie nadanie filmowi możliwości przetwarzania danych wejściowych poprzez wywołanie skryptu PHP na serwerze. Dodamy tą funkcjonalność do przycisku Submit, do którego przyłączony został kod ActionScript. 4. Sam utwórz przycisk Submit i nadaj mu odpowiedni stan Hit. 5. Aby zawartość była zawsze widoczna, do jedynego ujęcia filmu dodaj akcję stop. Skoro masz już elementy interfejsu gotowe....
Rozdział 19-506
... dodajmy kod ActionScript, który ożywi film. Cała funkcjonalność filmu mieści się w przycisku Submit, lecz nawet to jest stosunkowo proste. Kod ActionScript wymagany do wywołania zewnętrznego modułu PHP i przesłania zmiennych n i e (włącznie z ich wartościami) oparty jest na akcji getURL. 6. Zaznacz przycisk na scenie i wpisz poniższy kod w okno Object Actions: on (release) { getURL ("write_to_file.php", "_self", "POST"); }
W tym kodzie funkcja getURL służy do przesłania zmiennych z filmu do skryptu PHP o nazwie write_to_file.php. A oto trzy parametry pobrane przez akcję getURL: • "write_to_file.php" — jest to, jak już powiedzieliśmy, nazwa skryptu PHP, który przetworzy dane, jakie wyślemy na serwer. W tym celu podaliśmy nazwę skryptu i powiedzieliśmy Flashowi (i serwerowi), że skrypt PHP znajduje się w tym samym folderze co film (plik SWF), który skrypt ten wywołuje. • "_self" — ten parametr instruuje Flash, gdzie ma wysłać wartości zwrócone ze skryptu PHP. W tym przykładzie wartości zostaną odesłane do wywołującego okna dokumentu HTML. • "POST" –ten parametr określa metodę, jaka zostanie zastosowana do przekazania zmiennych pomiędzy przeglądarką i serwerem. Wybór pomiędzy GET i POST określi, czy zmienne mają być wysłane jako część nazwy adresu URL, czy też jako oddzielny fragment danych strumieniowany pomiędzy przeglądarką i serwerem. Rekomendujemy zastosowanie metody POST do przesyłania dużej liczby zmiennych w obydwu kierunkach. Najlepiej stosować metodę POST jako ustawienie domyślne, dlatego też użyliśmy jej tutaj. 4 Gdy omówiony kod ActionScript zostanie uruchomiony po wciśnięciu przycisku Submit, przesyłane jest wywołanie do serwera i centrum wykonawcze przechodzi wówczas do kodu PHP (który, przypadkiem, potrafi skierować użytkownika do innych zasobów filmu Flasha, jeśli tylko zdecydujesz, że tak ma być). Zauważ, że ponieważ zastosowaliśmy _self jako właściwość docelową w wywołaniu getURL, film Flasha zostanie umieszczony w oknie przeglądarki i zastąpiony danymi wyjściowymi 4
W poprzednim rozdziale są opisane ograniczenia tej medtoy – przyp. red.
Rozdział 19-507
wygenerowanymi przez skrypt PHP. Zamiast tego mogliśmy jako parametr docelowy wybrać właściwość _blank, co spowodowałoby wyświetlenie danych wyjściowych ze skryptu PHP w nowym oknie przeglądarki, opuszczając wywołujący uruchomiony film. Kolejną opcją, jeślibyśmy chcieli, aby film Flasha nadal był odtwarzany po wysłaniu informacji do skryptu PHP, byłoby zastosowanie akcji loadVariables. W prawdziwej aplikacji, prawdopodobnie będziesz chciał dodać do przycisku kod sprawdzający, aby upewnić się, że obydwa pola na ekranie zostały wypełnione przez użytkownika, lecz ominiemy ten kod w naszym ćwiczeniu dla zachowania jasności i prostoty projektu.
Przygotujmy teraz plik skryptu PHP, który zostanie wywołany przez kod ActionScript –write_to_file.php. 7. Utwórz nowy plik tekstowy i wpisz w nim poniższy kod PHP, a następnie zapisz plik pod nazwą write_to_file.php: Submit successful!"; ?>
Nie przejmuj się składnią — zaraz ją wytłumaczymy. 8. Opublikuj film, a następnie umieść plik HTML, plik SWF i plik skryptu PHP w folderze domyślnej przeglądarki, którą wybrałeś na hosta — jak pamiętasz, mój folder nosi nazwę Flash 5 Studio Testing, a wyżej wymienione pliki zostaną umieszczone w domyślnym katalogu instalacyjnym serwera Apache, C:\Program Files\Apache Group\Apache\htdocs. 9. W przeglądarce wpisz adres URL strony HTML przechowującej plik SWF i wpisz w pola żądane dane zanim wciśniesz przycisk Submit:
Jeśli wszystko działa jak należy, w oknie przeglądarki powinna pojawić się poniższa wiadomość:
Rozdział 19-508
10. Teraz zajrzyj do foldera twojej macierzystej przeglądarki. Powinien się w nim zajmować nowy plik o nazwie text_file.txt:
11. Dwukrotnie kliknij na tym pliku aby obejrzeć owoce pracy języka PHP (i twojej):
Jak widać, skrypt PHP naprawdę wykonał swoje zadanie, poprzez przesłanie informacji z Flasha do pliku testowego na serwerze. Teraz dokładnie wyjaśnimy, jak do tego doszło... No dobrze, Flash wydał polecenie getURL i za pomocą metody POST przekazała zmienne wpisane przez użytkownika na serwer. Po powrocie, uruchomiony zostaje skrypt PHP i przesyła nazwy zmiennych, jakie zdefiniowaliśmy dla wejściowych pól tekstowych (czyli n i e), plus wartości wpisane przez użytkownika — w tym
Rozdział 19-509
przypadku były to Andy Corsham dla zmiennej n i [email protected] dla zmiennej e. Wyposażony w te zmienne skrypt PHP przystąpił do przetworzenia informacji za pomocą skryptu umieszczonego w pliku write_to_file.php. Przypomnijmy, jak wygląda ten skrypt w całości: Submit successful!"; ?>
Podobnie jak cały kod w języku PHP, ten fragment kodu rozpoczyna się znacznikiem otwierającym, który identyfikuje blok kodu jak skrypt PHP:
Pierwszy wiersz kodu w skrypcie otwiera plik tekstowy na serwerze, abyśmy mogli w nim umieścić zmienne wysłane z Flasha: $f=fopen("text_file.txt","a");
Symbol $f oznacza nazwę zmiennej, która stanowi skrót odnoszący się do pełnej nazwy pliku — ten odnośnik nosi również nazwę uchwytu pliku. Wszystkie zmienne w języku PHP identyfikuje się poprzez dodanie prefiksu w formie znaku dolara ($). Funkcja fopen języka PHP przypisuje zmiennej $f wartość i wysyła jej dwa parametry. Funkcja fopen otworzy plik o nazwie podanej w pierwszym parametrze w cudzysłowie — “text_file.txt”. Jeśli skrypt PHP nie może znaleźć nazwanego pliku, utworzy nowy o podanej nazwie. Drugi parametr, w tym przypadku jest to “a”, definiuje atrybuty (odczyt, zapis lub dopisywanie), z którymi plik zostanie otwarty. Tutaj zawsze otwieramy plik w trybie „dołącz”, aby każdą przesłaną parę wartości można było dodać na koniec pliku tekstowego. Po otwarciu pliku tekstowego na serwerze, umieścimy w nim wartości zdefiniowane we Flashu. Tutaj kluczową rolę odgrywa funkcja języka PHP, fwrite: fwrite($f,"***************************************\r\n\r\n"); fwrite($f," Name:\t\t\t$n\r\n"); fwrite($f," E-Mail:\t\t$e\r\n\r\n");
Przeznaczeniem funkcji fwrite jest wpisywanie danych do plików, czyli dokładnie, to, czego potrzebujemy. Musimy wyposażyć tą funkcję dwoma parametrami: uchwytem pliku identyfikującym plik docelowy i ciągiem informacji, który ma zostać w pisany do pliku. Pierwszy wiersz... fwrite($f,"***************************************\r\n\r\n");
... wywołuje funkcję fwrite i za pomocą uchwytu pliku (odnośnika) $f skierowuje funkcję fwrite na nasz plik tekstowy. Następnie, w cudzysłowie, przekazujemy Rozdział 19-510
funkcji fwrite dane do wpisania. W tym przypadku jest to ciąg gwiazdek, po którym następują znaki zwrotne (\r) i wysuw wiersza (\n). W efekcie utworzony zostaje wiersz „oddzielający” i odstęp w pliku testowym, który oddziela każdą parę wartości zmiennych, jaką przechowamy w pliku.
Następny wiersz faktycznie zajmuje się dostarczonymi przez Flasha zmiennymi: fwrite($f," Name:\t\t\t$n\r\n");
Ponownie zastosowaliśmy tą samą kombinację fwrite($f, po której następuje otwarcie cudzysłowu oznaczające początek ciągu danych. Potem następuje kilka odstępów, a po nich tekst „Name:”; pojawi się on w pliku tekstowym dokładnie tak, jak został wpisany do skryptu. Za nim znajdują się trzy znaczniki (\t) i na koniec bardzo istotny znak $n. Pamiętaj, że w języku PHP symbol dolara oznacza zmienną, a po nim następuje nazwa zmiennej. Zatem zmienne $n w tym wierszu kodu odpowiada zmiennej n zdefiniowanej w pierwszym polu wejściowym filmu Flasha: nazwaliśmy tą zmienną $n skrypcie PHP, abyśmy mogli umieścić wartość ze zdefiniowanej we Flashu zmiennej n bezpośrednio w skrypcie PHP:
Nadanie zmiennych takich samych nazw w PHP i Flashu (bez identyfikatora $) tworzy ukryte łącze umożliwiające przesyłanie danych pomiędzy tymi dwoma programami.
Po wypisaniu wartości zmiennej pobranej z Flasha, wysyłamy znak powrotu karetki i nowego wiersza i jesteśmy już gotowi na napisanie kolejnego wiersza. Na tym etapie w skrypcie PHP, plik docelowy wygląda w następująco:
...stosuje tą samą zasadę wpisania zmiennej $e (e w drugim polu wejściowym Flasha) w drugi wiersz w pliku testowym: Rozdział 19-511
Następnie, po wysłaniu znaku powrotu karetki i nowego wiersza, zamykamy plik tekstowy za pomocą funkcji języka PHP fclose: fclose($f);
Na koniec stosujemy polecenie echo do wysłania użytkownikowi wiadomości potwierdzającej uruchomienie skryptu PHP i dodanie danych do pliku tekstowego... echo "
Submit successful!";
... zanim zakończymy skrypt odpowiednim znacznikiem: ?>
Po dwóch wpisach dokonanych przez różnych użytkowników, nasz plik tekstowy będzie wyglądać mniej więcej tak:
I to już wszystko. Z kilkoma linijkami prostego kodu PHP i jedną instrukcją kodu ActionScript, utworzyliśmy aplikację Flasha zdolną do obsługi systemu plików po stronie serwera.
Zakończenie W tym prostym przykładzie ustanowiliśmy główne zasady niezbędne do tworzenia aplikacji Flash-PHP. Oczywiście połączenie Flasha i PHP można zastosować jeszcze na wiele innych Rozdział 19-512
sposób, o których tutaj nie wspomnieliśmy, lecz mamy nadzieję, zachęciliśmy cię do zgłębiania języka PHP samemu i odkrywania jego możliwości. Jedną z niezrównanych zalet stosowania Flasha w połączeniu z językiem PHP jest stosunkowa łatwość przesyłania danych tam i z powrotem — uruchomienie przekazywania danych w wybranym kierunku polega głównie na dopasowaniu nazw zmiennych i zastosowaniu poleceń getURL i loadVariables. Ten prosty mechanizm można połączyć ze sprytnym inteligentnym ActionScript umieszczonym w plikach SWF i z dowolną ilością skryptów PHP na serwerze. Jeśli to Ci nie wystarczy, możesz również zgłębić zastosowanie baz danych i języków zapytań, aby dalej wzbogacić interaktywność, jaką skrypty po stronie serwera mogą wprowadzić do twoich filmów Flasha.
Rozdział 19-513
Rozdział 20 Flash i XML Extensible Markup Language, czyli XML, umieszczany jest w centralnym punkcie wielu wizji przyszłości komputerowej. Opinie są różnorodne: język ten uważa się za nowy sposób składu dokumentów, za element łączący następną generację systemów operacyjnych, lub po prostu za najlepszą metodę przechowywania prawie każdego rodzaju danych. Każde z tych twierdzeń zawiera odrobinę prawdy, a usilne popieranie tego produktu sugeruje, że język XML naprawdę jest aż tak ważny, albo wielu ludzi stosuje go w niewłaściwy sposób. Z pewnością firma Macromedia uznała XML za na tyle istotną technologię, aby wprowadzić do środowiska programowania ActionScript we Flashu 5 obsługę czytania, pisania i generowania dokumentów XML i właśnie tą nową funkcjonalnością, jak również sposobami jej zastosowania, zajmiemy się w tym rozdziale. Zanim przejdziemy dalej, warto zastanowić, się, czym XML nie jest. Nie jest to na pewno ani nowy zestaw znaczników dla, ani rozszerzenie języka HTML, chociaż często charakteryzowany jest we właśnie taki sposób. Jeśli wiesz, od kogo wyszła ta plotka, upomnij go w moim imieniu. Ponadto, XML nie jest językiem „programowania”. Nie możesz w nim napisać ani gry, ani procesora tekstu, ani systemu rozpoznawania głosu. Tłumaczę zazwyczaj moim klientom, że język XML nie posiada żadnych czasowników, tylko rzeczowniki: XML nie wykonuje żadnych rzeczy, tyko jest rzeczami. Po uporaniu się już z tymi nieporozumieniami, ustalmy, czym naprawdę XML jest i jak możemy go zastosować z Flashem.
Same fakty Jak już wspomniałem powyżej, głównym nieporozumieniem odnośnie języka XML jest traktowanie go jako „aktualizacji” dla języka HTML, co można zrozumieć, gdy się przyjrzy typowemu wierszowi w języku HTML, który wygląda miej więcej tak: Go to the index
...i wierszowi, jaki może pojawić się w dokumencie XML: Flash 5 Studio
Podobieństwo pomiędzy tymi dwoma wierszami spowodowane jest tym, że zarówno HTML jak i XML są językami oznaczeń używającymi znaczników w takiej formie: <...> do zaznaczania początku i końca poszczególnych informacji. Bardzo wielką różnicą jest jednak to, że podczas gdy język HTML służy do opisywania, w jaki sposób dana informacja ma być wyświetlona w przeglądarce stron WWW, język XML można zastosować do opisania czegokolwiek związanego z daną informacją — stąd właśnie wziął się wyraz extensible — rozszerzalny jako jeden z członów nazwy omawianego języka. Oczywiście istnieją pewne reguły, których należy przestrzegać, lecz jako metoda organizowania danych za pomocą jedynie zwykłego tekstu, język XML z łatwością pokonał takie rozwiązania alternatywne jak rozdzielanie przecinkami czy znacznikami. Rozdział 20-514
Nawet jeśli nigdy wcześniej nie natknąłeś się na ten język, na pewno zorientowałeś się, że przedstawiony powyżej wiersz zawiera pewne informacje o tej książce, lub przynajmniej na to wygląda. W języku XML, inaczej niż w HTML, nie stosuje się żadnych predefiniowanych znaczników. Możesz definiować nieograniczoną liczbę własnych znaczników, w zależności od informacji, jaką chcesz między nimi umieścić. Nie musiałem nazwać znacznika , lecz na przykład lub w jakikolwiek inny sposób. Ważne jest to, że aplikacja odczytująca dane XML musi wiedzieć, co ma zrobić gdy natknie się na znacznik , podobnie jak twoja przeglądarka internetowa wie, że ma utworzyć hiperłącze gdy odczyta znacznik . Dzięki temu można przygotować spersonalizowany model danych do zastosowania w każdej sytuacji.
, nie zostanie ona wyświetlona w niektórych wersjach przeglądarki Netscape, lecz Internet Explorer zawsze wyświetli zarówno tabelę, jak i jej zawartość). Gdy się nad tym zastanowisz, okaże się to całkiem logiczne: dokumenty HTML przeznaczone są do oglądania w przeglądarkach stron WWW, zatem zakres „zgadywania” automatycznie zostaje ograniczony do tego celu. Ponieważ dokument XML można użyć do czegokolwiek, nie istnieje żaden kontekst, w którym można by przeprowadzić zgadywanie. Główną rolą języka XML jest transmisja danych, w związku z czym integralność danych jest niezwykle istotna. Jako przykład, wyobraź sobie, że twój bank stosuje język XML do przekazywania twoich transakcji do biura obsługi. Powiedzmy, że wpłaciłeś trzy czeki, lecz w środku dokonywania transakcji połączenie pomiędzy bankiem i biurem obsługi zostało przerwane. Biuro obsługi może dostać dokument XML o następującej treści: 405.3329.99
Nie byłoby dobrze, gdyby biuro obsługi doszło do wniosku, że teraz wystarczy tylko dopisać kończący znacznik . Gdyby tak się stało, trzeci czek nie dotarły bo twoje konto. Istnienie otwierającego znacznika bez znacznika zamykającego (którym, w tym przypadku, byłby ) oznacza, że ten dokument nie jest poprawnie sformułowany, a zasady języka XML nie pozwalają na zgadywanie, w jaki sposób można go „naprawić”. Zamiast tego zakładamy, że dokument jest zepsuty, ponieważ coś poszło nie tak i że należy poprosić bank o ponowny zapis tej transakcji. Istnieje wiele specjalnych zasad i wskazówek odnoszących się do „poprawności sformułowania” dokumentów XML, i jeśli chciałbyś stać się ekspertem w tej dziedzinie, zalecam, abyś wziął głęboki wdech i zajrzał na stronę pod adresem http://www.w3c.org. Jeśli jeszcze tego nie wiesz, W3C (World Wide Web Consortium) jest czymś w rodzaju Stanów Zjednoczonych Sieci. W szczególności stworzyli oni techniczne specyfikacje z zamiarem wprowadzenia porządku w chaos Internetu poprzez standaryzację. „Napisali książkę” (jak gdyby) o języku HTML, XML i wielu innych protokołach i formatach plików.
W rozdziale tym zajmiemy się tylko tymi aspektami języka XML, które są nam potrzebne do zrozumienia go i zastosowania we Flashu 5. W ten sposób znacznie obniżymy stopień trudności naszego rozdziału.
Rozdział 20-516
Podstawowa składnia języka XML Nie mogę jednak, przy dobrych zmysłach pozostawić tobie samemu całą edukację aż do W3C — czułbym się, jakbym cię rzucił na pożarcie wilkom. Omówimy więc pokrótce anatomię języka XML na podstawie tego samego kodu, którego zastosujemy w przykładach. Przyjrzymy się ponownie pierwszemu podanemu przeze mnie przykładowemu kodowi XML: Flash 5 Studio
Jak widać na diagramie, element XML składa się z otwierającego i zamykającego znacznika i zawartości, lecz warto omówić tą strukturę bardziej szczegółowo, abyśmy dokładnie wiedzieli, co się dzieje. Mamy tutaj element , lecz skąd wiemy, że jest on taki a nie inny? Otwierający znacznik rozpoczyna się znakiem <, zatem jest to poprawny znak: wszystkie znaczniki w języku XML zaczynają się w taki sposób. Zaraz po znaku < następuje ciąg składający się z czterech znaków i spacja. Te cztery znaki, B-O-O-K, stanowią nazwę elementu; nie różni się on od sposobu zastosowania elementów . W języku HTML ten znacznik sygnalizowałby początek tekstu wyświetlanego czcionką Arial o rozmiarze 3, w czarnym kolorze. Powracając do naszego przykładu XML, nazwą atrybutu jest isbn a wartością 1903450306. Powinienem jeszcze dodać, że atrybuty zawsze określa się za pomocą takiej składni. Elementy w języku XML nie muszą obowiązkowo posiadać atrybutów, jak również mogą posiadać ich nieograniczoną liczbę — wszystko zależy od ich przeznaczenia. Bez względu na to jednak, jak długa jest lista atrybutów, zawsze zamykana jest znakiem > i, tym samym, znacznikiem otwierającym. Możemy już przejść do kolejnej części elementu. Pomiędzy otwierającym i zamykającym znacznikiem mamy zawartość elementu. W tym przypadku, jest to tekst Flash 5 Studio, lecz mogą to być również inne elementy XML — sytuację taką przeanalizujemy już za chwilę. Trzecia możliwość jest taka, że element nie zawiera nic i to jest właśnie podstawa świętej wojny pomiędzy projektantami dokumentów XML: czy informacja umieszczona w elemencie XML ma być przechowywana jako zawartość, czy jako wartości atrybutu? Na przykład, można by przedstawić dokładnie te same dane w ten sposób:
Po raz kolejny, wybór należy do ciebie. Ponieważ język XML w żaden sposób nie interpretuje danych, nie istotny jest sposób ich zapisu, jeśli tylko jest on zgodny z regułami języka. Niemniej jednak, ten rodzaj „wolnego od zawartości” elementu może mieć wpływ na Rozdział 20-517
strukturę dokumentów XML. Przyjrzyj się zamykającemu znacznikowi: pomiędzy znakami < i > znajduje się prawy ukośnik i nazwa elementu w dokładnie takiej samej formie jak w znaczniku otwierającym. Zauważ, że forma nazwy naprawdę musi być identyczna — w przeciwieństwie do języka HTML, XML rozróżnia małe i duże litery, więc nie można by było zastosować i jako zamykające znaczniki dla tego elementu, gdyż byłby to błąd. W języku XML wszystkie elementy muszą posiadać otwierające i zamykające znaczniki. Możliwość, jaką daje „wolny od zawartości” element jest zastosowanie znacznika efektywnie otwierającego i zamykającego jednocześnie element, jak na poniższym przykładzie:
Umieszczenie prawego ukośnika przed znakiem > oznacza, że element ten nie posiada żadnej zawartości i nie zastosujemy specjalnego znacznika zamykającego w formie . Będziemy często korzystać z tej techniki skrótowej w przykładowych dokumentach XML w dalszej części tego rozdziału. Na koniec omówimy zastosowanie elementów jako zawartości innych elementów. I w tym przypadku możemy zauważyć pewne podobieństwa z językiem HTML. Jeśli chcemy umieścić komórkę w rzędzie tabeli, zastosowali byśmy składnię typu
, gdzie element
jest całkowicie umieszczony w elemencie
. Używamy takiej samej składni w języku XML, więc dodanie elementu w elemencie będzie wyglądać tak:
Jak już powiedzieliśmy, element tworzy zawartość elementu i składa się z pojedynczego, samozamykającego się znacznika. Dla potrzeb stosowania języka XML we Flashu mniej więcej tyle musisz wiedzieć o elementach XML i ich składnikach. Przystępny teraz do omówienia zastosowania języka XML i twoich umiejętności we Flashu 5.
Zastosowanie języka XML w środowisku programowania ActionScript Flasha 5 Do tej pory omawialiśmy język XML jako metodę reprezentowania przechowywanych danych, jak również przesyłanych z jednego miejsca w drugie. Aby jakiekolwiek dane byłyby jednak użyteczne, musimy w jakiś sposób uzyskać do nich dostęp i obsługiwać je w aplikacjach — w naszym przypadku, będą to filmy Flasha. I to jest właściwy moment na zapoznanie się z nową terminologią. Document Object Model, lub po prostu DOM, jest jednym z wielu standardów pomijanych przez W3C, lecz jest on dla nas interesujący, ponieważ umożliwia on opisanie struktury dokumentu oznaczonego z zastosowaniem języka XML (lub jednego z innych języków oznaczeń) w zorientowanym obiektowo formacie. Po otrzymaniu przez Flasha dokumentu w języku XML udostępnia on kodowi ActionScript w formie DOM i od tego momentu możesz z nim robić na co masz ochotę — na przykład zastosować kod ActionScript do przesuwania rzeczy, modyfikacji ich, zmiany ich wyglądu i tak dalej, integrując dane XML w filmie Flasha, którego użytkownicy oglądają w oknie przeglądarki.
Rozdział 20-518
Format DOM organizuje elementy w dokumencie XML wedle zależności hierarchicznej. Z tego, co zobaczyłeś do tej pory wiesz, że element XML może nie zawierać nic, bądź zawartość tekstową, bądź inne elementy XML. W terminologii stosowanej w standardzie DOM pojedynczy element, lub pojedynczy fragment zawartości tekstowej, nosi nazwę węzła. Gdy węzeł zawarty jest w innym węźle, pierwszy z nich staje się dzieckiem drugiego. Jak można się domyśleć, „zewnętrzny” węzeł w tej zależności nosi nazwę rodzica. Chociaż zastosowałem je dopiero przed chwilą i mam już serdecznie dosyć wyrażenia zorientowany obiektowo, lecz musimy o tym wspomnieć na wypadek, jakbyś jeszcze wszystkiego nie zrozumiał. Jeśli używałeś już kod ActionScript we Flashu 5, widziałeś już orientację obiektową w użyciu: to takie „przegródkujące” podejście do programowania. Obiekt (który w zasadzie jest tylko zmienną), posiada właściwości i metody z nim związane, do których możesz uzyskać dostęp programatycznie, poprzez wpisanie nazwy zmiennej z następującą po niej kropką i nazwą właściwości lub metody, jaką jesteś zainteresowany (na przykład myObj.xPos). Właściwości stosuje się do uzyskiwania informacji z obiektu (włącznie z innymi obiektami „zawartymi” w pierwszym obiekcie), natomiast metody wywołują określoną czynność.
Obiekt XML Zmierzamy do tego, że kod ActionScript Flasha 5 posiada wbudowany obiekt XML, który obejmuje wszystkie właściwości i metody potrzebne do odczytania, napisania i obsługi dowolnego dokumentu XML za pomocą standardu Document Object Model. W języku ActionScript, można utworzyć obiekt XML poprzez zdefiniowanie zmiennej równej nowej, jak na przykładzie: xmlObj = new XML();
Sam obiekt XML jest wspólnym przodkiem całej hierarchii: wszystkie węzły w dokumencie są jego dziećmi, czyli jednym dzieckiem z dzieci jego dzieci, czyli...wiesz, o co chodzi. Węzeł może być dzieckiem węzła, jak również rodzicem kolejnego węzła. Czas więc najwyższy na przedstawienie kolejnego przykładu, w którym będziemy mogli zilustrować wszystkie te nowe wiadomości w odpowiednim kontekście. Przyjrzyjmy się poniższemu fragmentowi kodu z dokumentu XML:
Wyobraź sobie, że piszemy program czatowy na planecie, na której nie ma dwóch osób o takim samym imieniu. Chcemy, aby użytkownik mógł sprawdzić, czy nie ma w pobliżu któregoś z jego ulubionych czatowych kumpli. Gdybyśmy mogli przekonać serwer czata, aby wysłał nam fragment kodu XML podobnego do powyższego na żądanie, mielibyśmy wówczas wszystkie potrzebne informacje do sprawdzenie dostępności każdego z przyjaciół użytkownika. Podstawowe właściwości Pierwszym elementem (czyli węzłem) w dokumencie jest , który jest również rodzicem trzech elementów w nim zawartych. Zgodnie z zasadami przedstawionymi powyżej, odgrywa drugą rolę jako pierwszy (i jedyny) węzeł dziecko dowolnego obiektu XML zawierającego ten dokument, zatem, gdyby taki obiekt nosiłby nazwę xmlObj,
Rozdział 20-519
wówczas w języku ActionScript odnieślibyśmy się do węzła w następujący sposób: xmlObj.firstChild. Jeśli chcemy wiedzieć, jaki rodzaj informacji zawarty jest w pierwszym dziecku, możemy sprawdzić wartość zmiennej xmlObj.firstChild.nodeName. Zauważ, że zmienna nodeName, jest właściwością wszystkich węzłów i oznacza po prostu nazwę elementu (lub „zero”, jeśli jest to węzeł tekstowy). Jeśli sprawdzimy tutaj wartość zmiennej nodeName, dowiemy się, że mamy do czynienia z elementem , a stąd będziemy już wiedzieć, że powinniśmy poszukać jego atrybutów imienia i nazwiska, czyli firstname i lastname (wiemy, że należy poszukać tych atrybutów, bo jesteśmy po siedmiu godzinach spotkania, na którym rozpracowywaliśmy szczegóły tego modelu danych, a na arkuszu specyfikacji jasno stoi, że znacznik PERSON zawsze zawiera te dwa atrybuty, OK?). Zgodnie z powyższym wzorem, składnia do uzyskania wartości tego atrybutu będzie wyglądać tak: xmlObj.firstChild.attributes.firstname. Gdybyśmy chcieli, moglibyśmy umieścić już teraz tą wartość w dynamicznym polu tekstowym, lecz nasze ambicje sięgają wyżej. Chcemy przeszukiwać i wydobywać informacje z węzłów dzieci, a w tym celu musimy się zapoznać z kilkoma z ich właściwości. Właściwości węzłów Jedną z właściwości węzłów jest hasChildNodes. Właściwości tej nie można przypisać ani wartości true ani false, i, jak można było przewidzieć, informuje nas, czy dany węzeł posiada dzieci. Kod wyglądałby mniej więcej tak:
Gdybyśmy wstawili tutaj wartość true, powinniśmy byli wówczas przechodzić cyklicznie przez wszystkie dzieci, sprawdzając ich nazwy węzłów i atrybuty, a także sprawdzać węzły w poszukiwaniu ich dzieci. W tym celu, musimy wiedzieć ile dzieci posiada pierwszy węzeł, abyśmy mogli ustawić pętlę, która by przechodziła przez wszystkie po kolei. Kod wówczas rozpoczynałby się w ten sposób:
Rozdział 20-520
childNodes to kolejna z właściwości węzła: jest to kolekcja zawierająca wszystkie dzieci danego węzła. Kolekcje są bardzo przydatne, ponieważ udostępniają one swoją zawartość w sposób znacznie ułatwiający przeglądanie jej, z zastosowaniem wyrażeń takich jak collectionName[x]. Wartość podana w nawiasach reprezentuje pozycję danego elementu w kolekcji, do którego chcemy się odnieść; tutaj należy pamiętać, że numeracja rozpoczyna się od 0 (więc trzeci element w kolekcji będzie miał numer 2). Właściwość length kolekcji podaje całkowitą liczbę elementów w niej umieszczonych. Jak już dowiedzieliśmy się, ile elementów zawiera dana kolekcja, możemy napisać pętlę, która będzie ją przeszukiwać, jak poniżej:
Ten kod wymaga pewnych wyjaśnień. Rozpoczynamy pętlę z naszą zmienną licznika, x, ustawioną na 0, ponieważ numeracja kolekcji węzłów dzieci rozpoczyna się od 0. Z tego powodu upewniamy się, należy przerwać pętlę, gdy wartość licznika będzie mniejsza od wartości właściwości childNum — nasze trzy węzły dzieci będą ponumerowane 0, 1 i 2. Wówczas następuje poniższy wiersz: curNode = xmlObj.firstChild.childNodes[x];
W tym wierszu przypisujemy zmiennej curNode obiekt węzła dziecka o indeksie x — nie miałem ochoty na pisanie wyrażenia xmlObj.firstChild.childNodes[x] więcej razy, niż było to konieczne. Nie sprawia to w tym przypadku zbyt dużej różnicy, lecz naprawdę może, zaufaj mi. Jeśli mielibyśmy do sprawdzenia i zapisania dziesięć atrybutów, na pewno nie uznałbyś tego za głupi pomysł. Następnie sprawdzamy nazwę węzła, aby przekonać się, jaka informacja zawarta jest w danym węźle dziecka. Jeśli jest to informacja , wydobywamy nazwę z atrybutów węzła i wtedy możemy już robić, co nam się podoba — wyświetlić ją w filmie, zastosować jeszcze trochę kodu do uruchomienia jakiegoś automatycznego pozdrowienia, czy jeszcze coś
Rozdział 20-521
innego. Po uzyskaniu potrzebnych danych, XML kończy swoją działalność i możesz już wtedy kontynuować pracę nad filmem.
Obróbka dokumentów XML Chociaż nie omówiliśmy wszystkich dostępnych nam właściwości, przynajmniej w niewielkim stopniu zasmakowaliśmy w obiektach XML i DOM i dowiedzieliśmy się, w jaki sposób umożliwiają one czytanie dokumentów XML. Na razie uwierz mi na słowo, że przedstawiony powyżej kod zadziała — za chwilę ci to udowodnię. Oczywiście, czytanie dokumentu XML to tylko połowa sukcesu, w najlepszym przypadku. Czasami, będziemy potrzebowali zmodyfikować informacje umieszczone w dokumentach XML, a nawet tworzyć własne. Jednym ze sposób na zrealizowanie tego poprzez programowanie jest skonstruowanie ich z zastosowaniem kilku zmiennych, znaków plus i całej masy cudzysłowów. Lecz wtedy, metodą na utworzenie filmu Flasha będzie ręczne narysowanie animacji składającej się z 500 ujęć, wykonanie zrzutu ekranu każdego ujęcia i przekształcenie ich w ujęcia kluczowe. Nie polecam żadnej z technik. Lepszym sposobem na tworzenie własnych dokumentów XML jest zastosowanie metod dostępnych dzięki obiektowi XML Flasha. Ponownie zajrzyjmy do przykładowego dokumentu, którego właśnie odczytaliśmy za pomocą obiektu XML i omówmy sposób, w jaki moglibyśmy byli go napisać. Na wszelki wypadek przypominamy cały kod:
Dwie metody jakie zastosujemy do napisania tego dokumentu, to createElement i appendChild; użyjemy ich również (wraz z kilkoma właściwościami przedstawionymi powyżej) do utworzenia nowego dokumentu XML. Umieśćmy to w filmie, abyśmy mogli obserwować, co się dzieje. Otwórz Flasha i rozpocznij nowy film. Wybierz narzędzie Text, a następnie w panelu Text Options wybierz opcje Dynamic Text i Multiline. Teraz przygotuj duże ładne pole tekstowe, zajmujące prawie całą stronę. Powróć do panelu Text Options i w polu Variable wpisz nazwę body, a także zaznacz pole wyboru Word Wrap, jeśli jeszcze nie jest wybrane.
W wyniku tej procedury, gdy przyrównamy zmienną body do jakiegoś elementu, będziemy mogli zobaczyć to w polu tekstowym. Dwukrotnie kliknij na ujęciu 1 aby otworzyć edytora kodu ActionScript i przełącz się w tryb Expert:
Rozdział 20-522
Wpisz poniższy kod:
Uruchom film; powinieneś zobaczyć poniższy ekran:
Jak to się stało? W pierwszym wierszu utworzyliśmy obiekt XML o nazwie xmlObj. W wierszu drugim użyliśmy metody createElement tego obiektu do utworzenia elementu o nazwie i przechowaliśmy go w kolejnej nowej zmiennej o nazwie elm. W trzecim i czwartym wierszu zdefiniowaliśmy atrybuty firstname i lastname nowego węzła. W wierszy piątym przyłączyliśmy nowo utworzony element do dokumentu XML, a w wierszu szóstym umieściliśmy dokument XML w zmiennej body, abyśmy mogli go obejrzeć w polu tekstowym. Zauważ, że aby zachować atrybuty w takiej samej kolejności jak w dokumencie, którego próbujemy powielić, musimy ustawić atrybut lastname jako pierwszy.
Dodajmy teraz elementy — jak już tego dokonamy będziemy mogli coś zrobić z zastosowaniem tych wszystkich materiałów. A oto kod:
Rozdział 20-523
Po uruchomieniu filmu powinieneś zobaczyć kod XML dokładnie ten co wcześniej, tyle że tym razem nie jest zbyt ładnie rozmieszczony. Mój wygląda tak:
Czy zauważyłeś istotą różnicę, gdy dodawaliśmy elementy ? Podczas tworzenia elementu dodaliśmy go do nowego dokumentu XML poprzez wywołanie metody appendChild tego dokumentu, określając element jako pierwsze dziecko. Dla trzech elementów wywołaliśmy metodę appendChild obiektu xmlObj.firstChild, czyli elementu czyniąc każdy element dzieckiem elementu .
Testowanie kodu XML Obiecałem udowodnić ci, że kod odczytujący elementy i będzie działać, więc teraz, skoro już zakończyliśmy prace nad kodem XML we Flashu, mogę dotrzymać obietnicy. Proces „przechodzenia przez” dokument XML w celu przeanalizowania jego zawartości nosi nazwę analizy składniowej dokumentu. Testowanie kodu
Potraktujmy testowanie kodu jako ćwiczenie. 1.
Ponieważ tworzymy dokument w ujęciu 1 naszego filmu, rozpoczniemy od wstawienia pustego ujęcia kluczowego w ujęciu 2.
Sami utworzyliśmy dokument źródłowy XML, więc znajdujemy się w stosunkowo niecodziennej sytuacji, ponieważ znamy dokładnie jego zawartość. Skorzystamy więc z tego i zaprojektujemy film z dokładną liczba pól tekstowych do wyświetlenia tej zawartości. 2.
Utwórz pole tekstowe z opcją Single Line gdzieś w pobliżu górnego lewego rogu filmu i nadaj mu nazwę zmiennej fcName (jest to skrót od wyrażenia „first child name” oznaczającego „nazwa pierwszego dziecka”). Dla tekstu wybierz opcję Dynamic Text i zaznacz pole wyboru Border/Bg. A oto panel Text Options z wszystkimi ustawieniami:
Rozdział 20-524
3.
Skoro mamy już pole tekstowe z wszystkimi potrzebnymi ustawieniami skopiujmy je, aby zaoszczędzić na czasie. W sumie potrzebujemy cztery zestawy po trzy pola testowe każdy, ponieważ chcemy wyświetlić nazwę elementu dla każdego węzła, jak również jego atrybuty imienia i nazwiska (firstname i lastname). Ja umieściłem wszystkie w pionie po lewej stronie filmu, jak na rysunku:
Teraz przechodzimy do odrobinę nudnego zadania zdefiniowania nazw zmiennych dla wszystkich pól tekstowych — na razie wszystkie pola tekstowe mają przypisaną nazwę fcName, lecz jest ona poprawna tylko dla górnego pola. 4.
Nazwij drugie pole tekstowe pFirstname, a trzecie pLastname. W tych zmiennych umieścimy dane z elementu PERSON zawierające informacje o imieniu i nazwisku danej osoby.
Do wyświetlenia elementów CHUM chcemy zastosować w nazwach zmiennych liczby, abyśmy mogli bez problemu uzyskać do nich dostęp w pętli. A oto kompletny rysunek:
Rozdział 20-525
Teraz potrzebujemy jeszcze kodu, który będzie nieco zmodyfikowaną wersją kodu podanego wcześniej. Omówimy go ponownie, abyś nie musiał wracać na początek rozdziału. A oto on:
W pierwszych trzech wierszach umieszczamy właściwość nodeName i atrybuty attributes elementu w odpowiednich zmiennych wyświetlania — jak na razie, to nic trudnego. Następnie, instrukcja if rozpoczyna się w taki sam sposób, jak poprzednio: sprawdzamy, czy węzeł PERSON posiada jakieś węzły dzieci, liczymy je i przechowujemy w zmiennej childNum. Pewnie myślisz, że wcale nie potrzebujemy instrukcji if, skoro wiemy już, że mamy trzy węzły dziecka. To prawda, lecz chciałem wykonać dwie rzeczy: przedstawić ci w tym prostym przykładzie tyle właściwości i metod ile jest to możliwe, i jednocześnie zachować ich realność. W innym przypadku nie wiedzielibyśmy z wyprzedzeniem ile dzieci posiada dany element i wówczas tego typu test byłby niezbędny.
Przechodzimy do pętli for: rozpoczynamy od zmiennej x o wartości 0 i powtarzamy pętlę tak długo, jak wartość x jest mniejsza od liczby węzłów dzieci elementu PERSON (pamiętaj, że numeracja kolekcji childNodes rozpoczyna się od zera). W pierwszym wierszu wewnątrz pętli for umieszczamy aktualnie obliczany obiekt węzła w zmiennej curNode, abyśmy nie musieli zbyt dużo pisać. Teraz następuje kolejna (najwyraźniej) niepotrzebna instrukcja if, lecz jeśli mielibyśmy więcej, niż jeden element, który mógłby być dzieckiem elementu PERSON, wówczas potrzebowalibyśmy jakiś sposób na odróżnienie ich. W następnym trzech linijkach wyświetlamy nazwę elementu, a także imiona i nazwiska dziecka x. Do tej pory definiowaliśmy zmienne za pomocą składni
Rozdział 20-526
variable = value, lecz wewnątrz omawianej pętli odnosimy się do zmiennych z zastosowaniem wyrażeń, więc konieczne jest użycie polecenia set. Jeśli wartość zmiennej x wynosi 0, wyrażenie “childName”+(x+1) równe jest elementowi childName1, którego powinieneś rozpoznać jako nazwę zmiennej przypisaną przez nas do pierwszego pola wyświetlania . Zatem, gdy wartość zmiennej x równa jest 0, polecenie: set ("childName"+(x+1), curNode.nodeName);
określa zmienną childName1 jako równą nazwie węzła nodeName pierwszego węzła CHUM, którą jest oczywiście CHUM. W podobny sposób, w poniższych wierszach: set ("chumFirstname"+(x+1), curNode.attributes.firstname); set ("chumLastname"+(x+1), curNode.attributes.lastname);
... definiujemy zmienne chumFirstname1 i chumLastname1. Dodajemy 1 do wartości zmiennej x, pierzemy, płuczemy, powtarzamy i otrzymujemy zestaw wszystkich zmiennych, a pola tekstowe są już pełne. Zwróć uwagę na polecenie stop() w ostatnim wierszu skryptu: nie chcemy spowodować żadnych przerw przy przełączanie się tam i z powrotem pomiędzy ujęciami 1 i 2, więc zatrzymamy film w ujęciu 2 po wykonaniu całego kodu. Jeśli teraz obejrzysz film, powinieneś zobaczyć ekran podobny do tego na rysunku, co z kolei powinno cię przekonać (mam nadzieję), że wszystko, co do tej pory powiedziałem, jest prawdą:
Ładowanie dokumentu XML Skoro wiesz już jak odczytuje się i pisze dokumenty w języku XML we Flashu, czas najwyższy na zastosowanie tej wiedzy. Wykonajmy kolejne ćwiczenie, w którym utworzymy książkę adresową we Flashu pobierającą adresy z zewnętrznego pliku w języku XML. Następnie wykonamy bazę danych Access dla adresów i załadujemy dokument XML ze strony ASP przeszukującej tą bazę danych. Czy jesteś już gotów? Nie martw się, wszystko będzie dobrze! Na tym etapie, gdy zamierzamy zastosować zewnętrzne pliki XML we Flashu musimy zdać sobie sprawę, że obsługa języka XML we Flashu nie jest jeszcze zupełnie taka, jaka powinna być. Zauważyliśmy wcześniej, że Flash wygenerował dokument XML, dane nie zostały Rozdział 20-527
rozmieszczone najlepiej. Nie przejęliśmy się jednak tym zbytnio, ponieważ zgodnie ze specyfikacją języka XML światło na stronie (czyli spacje, znaczniki i znaki powrotu karetki) pomiędzy elementami nie są istotne. Jeśli chcesz uzyskać ładny układ dokumentów, bardzo proszę, lecz dla języka XML nie stanowi to żadnej różnicy. Niestety, gdy przychodzi do czytania dokumentów w języku XML, Flash nie jest już taki agnostyczny. Ważne, aby wszystkie dokumenty przeznaczone do tego celu pozbawione były wszystkich znaczników i znaków powrotu karetki, ponieważ Flash nie odczytuje tak ładnie sformatowanego tekstu, jak poniższy:
Ten plik dostępny jest w przyjaznym Flashowi formacie (czyli wszystko w jednej linijce) na płycie CD-ROM dołączonej do książki, pod nazwą mydoc.xml. Użyjemy go jako pomoc w programowaniu i testowaniu naszej książki adresowej Flasha przed dodaniem jego bazy danych. Innymi słowy, wykonamy film Flasha, który potrafi otworzyć ten dokument w języku XML i wyświetlić jego zawartość. Ładowanie zewnętrznego dokumentu XML 1.
Otwórz Flasha, rozpocznij nowy film i nadaj mu nazwę xmlAddresses.fla. W międzyczasie upewnij się, że ustawienia w panelu Publish Settings obejmują formaty wyjściowe SWF i HTML.
Będzie to film składający się z jednego ujęcia i jednej warstwy — więc, gdy poproszę cię, abyś coś do niego dodał, zawsze będę miał na myśli jako lokalizację warstwę 1 w ujęciu 1. 2.
Najpierw musimy dodać siedem dynamicznych pól tekstowych i odpowiadające im statyczne etykiety. Postaraj się umieścić je u góry po lewej stronie filmu. Mój układ wygląda tak:
Rozdział 20-528
Etykiety po prawej stronie nie stanowią części formy Flasha — są to nazwy zmiennych związane z dynamicznymi pola tekstowymi znajdującymi się po ich lewej stronie. Dolna połowa filmu będzie zawierać dwa przyciski poleceń i różne pola wyświetlania zmiennych. Najpierw pokażę ci układ, jakiego przygotujemy, a potem wszystko wyjaśnię:
I w tym przypadku, etykiety po prawej stronie to nazwy zmiennych dynamicznych pól tekstowych umieszczonych po ich lewej stronie. Dwa niebieskie kółka natomiast stanowią integralną część filmu: są to symbole przycisków, dzięki którym użytkownik będzie mógł poruszać się pomiędzy rekordami w bazie danych. 3.
W tym celu w oknie Object Actions dodamy bardzo prosty kod dla każdego przycisku: on (release) { showNext(); } on (release) { showPrevious(); }
Za chwilę zajmiemy się poleceniami showNext i showPrevious, lecz powyższy kod wystarczy do wyświetlenia części filmu. 4.
Teraz otwórz edytora ActionScript dla ujęcia 1, przejdź do trybu Expert i wpisz poniższy kod: curRecord = 0;
Rozdział 20-529
W tym wierszu tworzymy zmienna o nazwie curRecord i przypisujemy jej wartość 0. Zmienna ta posłuży jako wskaźnik informujący nas, w którym rekordzie bazy danych aktualnie się znajdujemy. 5.
A teraz dodaj kolejny fragment kodu: // funkcja dla metody onLoad obiektu objXML function getLoaded (success) { if (success) { addressCount = this.firstChild.childNodes.length; setDisplay(1); } }
Jest to funkcja akceptująca parametr o nazwie success o wartości true lub false. Jeśli wartość parametru success wynosi true, przypiszemy zmiennej addressCount wartość równą elementowi this.firstChild.childNodes.length (którym zajmiemy się już za chwilę) i wywołamy funkcję setDisplay, przesyłając jej wartość 1 (którą zajmiemy się trochę później). 6.
Aby łatwiej ci było zrozumieć wiersz this, przyjrzyj się, co po nim następuje i dodaj kolejny fragment do istniejącego kodu: // deklaracja XML i pobieranie objXML = new XML(); objXML.onLoad = getLoaded; objXML.load(„mydoc.xml”);
Pierwsza część tego fragmentu nie powinna być dla ciebie niczym nowym: tworzymy nowy obiekt XML o nazwie objXML. W drugim wierszu przypisujemy funkcję getLoaded zdefiniowaną powyżej do specjalnej metody obiektu XML o nazwie onLoad. Metoda ta zostaje wywołana po tym, jak metoda load obiektu XML albo kończy swoje działanie, albo kończy się błędem w wyznaczonym czasie. Domyślne zastosowanie metody onLoad nie powoduje żadnej akcji, lecz możesz sam dodać do niej funkcjonalność poprzez napisanie własnej funkcji i wykonanie tego, co zrobiliśmy powyżej. Wyrażenie objXML=getLoaded powoduje uruchomienie funkcji getLoaded przy każdorazowej próbie załadowania zewnętrznego pliku w języku XML do obiektu objXML. W obrębie funkcji getLoaded możemy odnieść się do obiektu objXML jako this, ponieważ funkcja getLoaded stała się metodą wspomnianego obiektu objXML. W ostatnim z trzech wierszy, objXML.load("mydoc.xml"), ładujemy wykonany wcześniej zewnętrzny dokument XML o nazwie mydoc.xml. 7.
Teraz dodaj następny fragment skryptu: // funkcja uruchamiana przez przycisk "next" function showNext () { if (curRecord == addressCount) { loadnum = 1; } else { loadnum = curRecord+1; } setDisplay(loadnum); }
Ta funkcja jest dosyć prosta: będziemy przechodzić przez adresy i gdy dotrzemy do ostatniego rekordu, przeskoczymy do pierwszego aby być przyjaznym
Rozdział 20-530
użytkownikowi. Zmienna curRecord śledzi aktualnie wyświetlany rekord, zmienna addressCount zapisuje całkowitą liczbę adresów, a zmienna loadnum określa numer rekordu, jaki powinien zostać wyświetlony jako następny. Zatem, omawiana funkcja mówi: „Jeśli aktualnie wyświetlany rekord jest ostatnim rekordem, wyświetl jako następny rekord pierwszy. W innym przypadku wyświetl następny rekord w kolejności”. 8.
Teraz dodamy następną funkcję: // funkcja uruchamiana przez przycisk „previous” function showPrevious () { if (curRecord == 1) { loadnum = addressCount; } else { loadnum = curRecord-1; } setDisplay(loadnum); }
Jest ona prawie taka sama jak funkcja showNext(), tyle że sprawdza, czy znajdujesz się na początku rekordów, a jeśli tak, to przenosi cię do ostatniego rekordu. Nic wielkiego. 9.
I jeszcze ostatni fragment kodu: // funkcja do określenia nazw zmiennych/pól wyświetlania function setDisplay (recnum) { var nodeObj = objXML.firstChild.childNodes[recnum-1]; fName = nodeObj.attributes.fName; lName = nodeObj.attributes.lName; address1 = nodeObj.attributes.address1; address2 = nodeObj.attributes.address2; city = nodeObj.attributes.city; state = nodeObj.attributes.state; zip = nodeObj.attributes.zip; curRecord = recnum; }
Jest to najważniejsza funkcja w całym przykładzie. Akceptuje ona parametr o nazwie recnum, który oznacza rekord, który ma zostać wyświetlony. W pierwszym wierszu funkcji ponownie oszczędzamy na czasie: ustawiamy zmienną o nazwie nodeObj na element , jaki nas interesuje (pamiętaj, że numeracja kolekcji childNodes rozpoczyna się od zera, więc aby uzyskać odpowiedni węzeł stosujemy składnię recnum — 1). Następnie przypisujemy wszystkim zmiennym wyświetlania odpowiadające im wartości atrybutów obiektu nodeObj. Na koniec przyrównujemy wartość zmiennej curRecord do wartości zmiennej recnum, aby właściwie ustawić wyświetlanie i zapisujemy bieżący rekord dla funkcji showNext i showPrevious. 10. Opublikuj film w tym samym katalogu, w którym zapisałeś plik mydoc.xml, a następnie uruchom go. Powinieneś zobaczyć następujący ekran:
Rozdział 20-531
11. Powciskaj przyciski Next i Previous, a przekonasz się, że możesz efektywnie przenosić się pomiędzy trzema wpisanymi adresami. Jeśli nie uzyskasz żadnych rezultatów (lub więcej niż trzy) problem będzie tkwić prawdopodobnie w jakimś znaczniku lub znaku powrotu karetki w pliku XML, którego nie powinno tam być.
Na płycie CD-ROM dołączonej do książki znajdziesz plik FLA dla tego ćwiczenia, o nazwie xmlAddresses.fla. Skoro książkę adresową mamy już gotową, możemy zabrać się za przyłączenie do niej bazy danych.
Uzyskiwanie dostępu do bazy danych z zastosowaniem języka XML Możemy przenieść zawartość bazy danych w formacie XML do filmów Flasha na kilka sposobów, lecz postanowiliśmy zademonstrować tutaj zastosowanie stron ASP. Dla wyjaśnienia: Active Server Pages (ASP) jest technologią firmy Microsoft przeważnie stosowaną do tworzenia dynamicznie strony WWW (czyli w dokumencie HTML). Innymi słowy, zamiast tworzenia statycznego pliku zawierającego HTML przygotowujesz plik ze skryptem, który w locie generuje HTML z kodu. Gdy poprawnie zastosowana, technika ta umożliwia tworzenie stron WWW odzwierciedlających automatycznie dane wejściowe użytkownika, zmiany wprowadzone w danych lub wyniki obliczeń, bez twojej interwencji. Jednakże nie jest powiedziane, że technologia ASP musi generować język HTML, bynajmniej. Dla tej aplikacji, zamiast tworzyć dokument HTML przygotujemy dokument XML oparty na wynikach zapytań bazy danych. Do ukończenia tego przykładu będziesz potrzebować serwer IIS firmy Microsoft (Internet Information Server) lub PWS (Personal Web Server) zainstalowany na twoim serwerze lub komputerze. Jako bazę danych użyję program Microsoft Access. Ogólnie, a w szczególności w środowisku produkcyjnym, wolę stosować system Oracle lub SQL Server, lecz chciałbym aby ćwiczenie to było jak najbardziej użyteczne, a program Access przynajmniej jest ogólnie dostępny. Tworzenie bazy danych
Zanim nawet zaczniemy myśleć o wydobyciu informacji z bazy danych, powinniśmy się upewnić, czy w ogóle mamy bazę danych, z którą możemy pracować. Jeśli nie posiadasz aplikacji Microsoft Access, nie obawiaj się: możesz korzystać z pliku o nazwie address.mdb,
Rozdział 20-532
którego znajdziesz na płycie CD-ROM dołączonej do książki. Jeśli jednak masz ten program, postępuj zgodnie z instrukcjami aby przygotować szybką, bazę danych złożoną z jednej tabeli. 1.
Zaczniemy od otworzenia programu Access i utworzenia nowej bazy danych o nazwie address.mdb. Następnie w panelu Objects zaznacz pozycję Tables, wciśnij przycisk New i zaznacz pozycję Design View (możesz również dwukrotnie kliknąć na polecenie Create table in Design view).
Nasza nowa tabela będzie się składać z ośmiu pól. Siedem pól tekstowych będzie odpowiadać siedmiu polom wyświetlania w filmie Flasha i nadamy im takie same nazwy, aby się nie pomylić. Ósmemu polu przypiszemy typ „AutoNumber”, który tworzy oddzielny numer do identyfikacji każdego rekordu w bazie danych. Numer ten jest automatycznie generowany przez bazę danych po dodaniu każdego nowego rzędu. 2.
Poniższy rysunek przedstawia osiem pól, jakie mamy utworzyć:
Dla pól fName, lName i city możemy zachować ich domyślną długość wynoszącą 50 znaków, lecz dla pól address1 i address2 powinieneś wybrać długość 255 znaków, dla pola state 2, a dla pola zip 10. 3.
Następnie skonfiguruj wszystko w taki sposób, aby nie można było właściwościom wszystkich pól oprócz pola address2 przypisać wartość o długości 0 znaków. Teraz kliknij prawym klawiszem myszy w polu addressID i z menu kontekstowego wybierz pozycję Primary Key:
Rozdział 20-533
4.
Teraz zapisz nową tabelę pod nazwą myAddresses, a następnie kliknij prawym klawiszem myszy na pliku myAddresses w UI i z menu kontekstowego wybierz polecenie Open. Teraz wpisz do nowej bazy danych kilka rzędów danych:
Gdy już wpiszesz do bazy wystarczającą liczbę adresów, przejdziemy do udostępnienia jej ASP, abyśmy mogli wydobyć z bazy danych informacje za pomocą kodu. Udostępnianie bazy danych
W tym celu musimy utworzyć nazwę Data Source Name (DSN), która będzie wskazywać na plik bazy danych — wówczas ASP będzie mógł zastosować tą nazwę do uzyskania dostępu do bazy danych. 1.
W zależności od tego, czy pracujesz na platformie Windows 9x czy Windows 2000, wykonasz to zadanie w różnych miejscach. W pierwszym systemie, zastosuj polecenie Start|Ustawienia|Panel Sterowania i dwukrotnie kliknij na ikonie Źródła danych (ODBC). W przypadku Windows 2000 w ten sam sposób przejdź do Panelu Sterowania, otwórz folder Narzędzia Administracyjne i dwukrotnie kliknij na pozycji Źródła danych (ODBC). W wywołanym oknie dialogowym kliknij na zakładkę Systemowe DSN i wciśnij przycisk Dodaj:
2.
Zaznacz pozycję Microsoft Access Driver(*.mdb) i wciśnij przycisk Zakończ:
Rozdział 20-534
3.
Nadaj nowemu źródłu danych nazwę addressDSN i wpisz jego opis. Wciśnij przycisk Wybierz i przejdź do lokalizacji utworzonej przez nas bazy danych address.mdb:
4.
Wciskając przyciski OK powróć do Panelu Sterowania i wszystko powinno być już gotowe — z jednym wyjątkiem: jeśli pracujesz na Windows 2000 musisz zmienić zabezpieczenia bazy danych, aby udostępnić ją ASP. Porozmawiaj ze swoim administratorem systemu jeśli nie wiesz, jak należy to zrobić.
Jesteśmy już gotowi do pobrania właśnie wpisanych przez nas danych, a żebyśmy nie próbowali biec zanim nie nauczymy się chodzić, zapomnijmy na chwilę o Flashu i skoncentrujmy się na ASP.
Pisanie kodu ASP 1.
Utwórz nowy plik ASP o nazwie testSearch.asp za pomocą dowolnego programu (ja zazwyczaj używam albo Microsoft Visual InterDev albo Notatnika). Wpisz poniższy kod: <%@ Language=VBScript %> <%
Rozdział 20-535
Option Explicit Dim cn Dim cmd Dim rs Set cn = Server.CreateObject("ADODB.Connection") cn.ConnectionString = "addressDSN" cn.Open Set cmd = Server.CreateObject("ADODB.Command") cmd.ActiveConnection = cn cmd.CommandType = 1 cmd.CommandText = "SELECT fName, lName FROM myAddresses" Set rs = cmd.Execute %> No Title <% Do Until rs.EOF Response.Write rs("lName") & ", " & rs("fName") & " " rs.MoveNext Loop rs.Close cn.Close Set cn = Nothing Set rs = Nothing Set cmd = Nothing %>
Kod ten znajduje się na płycie CD-ROM dołączonej do książki, w pliku pod nazwą testSearch.asp. Prawdopodobnie ucieszysz się, że nie mam zamiaru przeprowadzić wykładu o ASP zaraz po kursie języka XML, lecz kod ten nie jest trudny do wytłumaczenia; zacznijmy więc od pierwszego wiersza: <%@ Language=VBScript %>
Gdy serwer WWW odczyta ten wiersz u góry strony, będzie wiedzieć, że omawiany kod został napisany w języku VBScript. Na stronie ASP, wszystko umieszczone pomiędzy ogranicznikami <% i %> oznacza skrypt i nie stanowi części dynamicznie wygenerowanego HTML, który jest wysyłany do klienta. Option Explicit Dim cn Dim cmd Dim rs
Obsługa bazy danych z kodu na stronie ASP nie różni się zbytnio od obsługi dokumentów XML z Flasha: wszystko sprowadza się do stosowania obiektów. W tym przykładzie będziemy potrzebować trzy: jeden reprezentujący samą bazę danych, jeden dla żądania, które wyślemy do bazy danych i jeden do przechowania zwróconych nam danych. Trzy zmienne utworzone przez powyższy kod zostaną zastosowane do przechowania tych obiektów; polecenie Dim języka VBScript zbliżone jest do polecenia var kodu ActionScript. Wiersz Option Explicit pomaga w debugowaniu: jeśli spróbujesz zastosować nazwę zmiennej, która nie
Rozdział 20-536
pojawiła się w instrukcji Dim, wygenerowany zostanie błąd. Zapobiega to przed używaniem nowych zmiennych „do woli”, co jest przepisem na zamieszanie w dużych plikach z kodem.
W następnych trzech wierszach kodu tworzymy obiekt ADODB.Connection, który będzie reprezentować łącze z bazą danych, a następnie wysyłamy go do nazwy źródła danych, jakie chcemy zastosować — jest to obiekt addressDSN, którego zdefiniowaliśmy wcześniej: Set cn = Server.CreateObject("ADODB.Connection") cn.ConnectionString = "addressDSN" cn.Open
W tym fragmencie, Server jest wbudowanym obiektem ASP, podobnie jak na przykład obiekty Math czy Date.ADODB.Connection kodu ActionScript we Flashu 5, lecz z drugiej strony jest to również nazwa obiektu dostarczanego przez technologię Windowsa o nazwie ActiveX Data Objects (ADO). Po utworzeniu połączenia otwieramy je wywołaniem metody Open obiektu Connection. Set cmd = Server.CreateObject("ADODB.Command") cmd.ActiveConnection = cn cmd.CommandType = 1 cmd.CommandText = "SELECT fName, lName FROM myAddresses"
W tej części kodu przypisujemy zmiennej cmd wartość równą nowemu obiektowi ADODB.Command, za pomocą tej samej techniki, którą zastosowaliśmy dla połączenia. Ten obiekt użyjemy do sformułowania żądania o dane. Po zbudowaniu polecenia ustawiamy jej właściwość ActiveConnection na cn w celu określenia, które połączenie mamy zastosować (w naszym kodzie dysponujemy tylko jednym połączeniem, lecz i tak dla tego polecenia należy je określić). Następną właściwością, jaką musimy zdefiniować jest CommandType, której przypisujemy wartość 1, wskazującą, że jest to zapytanie tekstowe. Na koniec właściwość CommandText zostaje ustawiona na tekst samego żądania. Zapytanie zostało napisane w języku o nazwie Structured Query Language (SQL) i jeśli nigdy go nie stosowałeś, pokrótce ci go wyjaśnimy. SELECT oznacza „Pobierz rekordy z bazy danych”. Po SELECT znajdują się nazwy dwóch pól z tabeli myAddresses. Potem wyraz kluczowy FROM, po którym następuje nazwa tabeli. Właściwość CommandText zmiennej cmd mówi: „Podaj mi zestaw rekordów zawierający pola fName i lName z wszystkich rekordów w tabeli myAddresses”. Set rs = cmd.Execute
Ten wiersz przypisuje zmiennej rs wartość równą zestawowi rekordów odzyskanego poprzez wywołanie metody Execute zmiennej cmd. Serwer zapytuje bazę danych i powraca do nas z odpowiedzią. Nie użyliśmy nigdy wywołania Server.CreateObject do uczynienia zmiennej rs zestawem rekordów, lecz po prostu nie musieliśmy: metoda Execute zwraca obiekt ADODB.Recordset podczas wykonywania zapytania SELECT. No Title
Rozdział 20-537
A to fragment w języku HTML do skonfigurowania strony, która zostanie wyświetlona użytkownikowi, włącznie z początkiem znacznika . <% Do Until rs.EOF Response.Write rs(„lName”) & „, „ & rs(„fName”) & „ ” rs.MoveNext Loop
W tym fragmencie kodu mamy pętlę, która przechodzi przez wszystkie rekordy w zestawie rekordów, które zostały nam zwrócone i umieszcza je w obiekcie ASP Response. Protokół HTTP oparty jest na zależności żądanie/odpowiedź: klient wysyła żądanie do serwera, który w odpowiedzi wysyła odpowiedź. Obiekt ASP Response umożliwia nam obsługę odpowiedzi serwera na kilka sposobów. Między innymi można go użyć do utworzenia dokumentu HTML, który zostanie dynamicznie wyświetlony w przeglądarce klienta, a to właśnie zamierzamy zrobić z zawartością zestawu rekordów. Metoda Write obiektu Response akceptuje ciąg parametrów i dodaje go do tekstu HTML. Odnośnik do zmiennej rs (“lName”) zwróci wartość kolumny lName bieżącego rzędu zestawu rekordów, podczas gdy rs (“fName”) zwraca wartość kolumny fName. Metoda MoveNext obiektu zestawu rekordów działa tak, jak się można tego spodziewać: zmienia bieżący rząd zestawu rekordów na odpowiedź przechodząc następnie do kolejnego rekordu i wpisując nowy rząd i tak dalej. Na koniec dochodzimy do ostatniego rekordu w zestawie rekordów, w którym to momencie właściwość EOF („end-of-file”, czyli „koniec pliku”) obiekt zestawu rekordów stanie się równa true. Nasza pętla skonstruowana jest w taki sposób, że kontynuuje działanie, aż właściwość EOF zmiennej rs będzie równa true. W taki sposób wygenerujemy wszystkie rekordy i wtedy opuścimy pętlę. rs.Close cn.Close Set cn = Nothing Set rs = Nothing Set cmd = Nothing %>
Pozostało nam jeszcze tylko sprzątanie. Podczas pracy nad bazami danych warto pozamykać a następnie usunąć wszystkie połączenia po zakończeniu stosowania ich i tym właśnie zajmuje się pierwszych pięć wierszy przedstawionego powyżej kodu. Następnie umieszczone są znaczniki kończące BODY i HTML, aby nasza odpowiedź znalazła się w dobrze sformułowanym dokumencie HTML. I to wszystko. Dzięki tym zabiegom będziemy potrafili uzyskać dane z bazy danych programu Access i umieścić je w odpowiedzi w dokumencie HTML. W moim katalogu inetpub\wwwroot utworzyłem katalog o nazwie AddressBook i umieściłem w nich wszystkie pliki, lecz ty możesz przenieść swoje w wybraną przez ciebie lokalizację. Poniższy rysunek przedstawia efekt naszych starań, ekran wyświetlony w przeglądarce:
Rozdział 20-538
A oto kod źródłowy HTML wygenerowany przez skrypt ASP: No Title Doe, John Kid, Billy
No dobrze. Udowodniliśmy, że dajemy sobie radę z technologią ASP, lecz teraz musimy jeszcze przetworzyć nasze wyniki do formatu XML (zamiast HTML), abyśmy mogli je wczytać bezpośrednio do Flasha. Generowanie języka XML z zastosowaniem ASP 1.
Utwórz kopię pliku testSearch.asp i nadaj mu nazwę addressSearch.asp. Następnie edytuj ten plik i zmień skrypt zgodnie z poniższym: <%@ Language=VBScript %> <% Option Explicit Dim cn Dim cmd Dim rs Dim sXML Dim q ' q jest szybszym sposobem na określenia podwójnego cudzysłowu q = chr(34) Set cn = Server.CreateObject("ADODB.Connection") cn.ConnectionString = "addressDSN" cn.Open Set cmd = Server.CreateObject(„ADODB.Command”) cmd.ActiveConnection = cn cmd.CommandType = 1 cmd.CommandText = "SELECT addressID,fName,lName,address1," & _ "address2,city,state,zip FROM myAddresses" Set rs = cmd.Execute Do Until rs.EOF sXML = sXML & "" rs.MoveNext Loop sXML = "" & sXML & ""
Rozdział 20-539
Response.Write sXML %>
Co to wszystko znaczy? No więc, zaczynając od góry, deklarujemy dwie zmienne, które przechowują ciągi danych. W zmiennej sXML tworzymy dokument XML, którego wyślemy do Flasha, natomiast zmienna q zawiera znak 34 kodu ASCII, odpowiadający podwójnemu cudzysłowowi (“). Zmienna q jest kolejnym „oszczędzaczem palców”: podwójny cudzysłów, w języku VBScript, służy do oznaczania ciągu, lecz również będziemy musieli w obrębie tego ciągu umieścić kolejny, również umieszczony w podwójnym cudzysłowie. Aby obejść ten problem za każdym razem, gdy będziemy potrzebować podwójny cudzysłów, dodamy do ciągu zmienną q. Następną zmianą, jaką wprowadziliśmy, jest rozszerzenie instrukcji SELECT do odzyskania wszystkich pól z tabeli myAddresses, a nie tylko pól z imionami i nazwiskami. Musieliśmy również zmodyfikować pętlę: zamiast wpisać bezpośrednio do obiektu Response, złączyliśmy duży ciąg. Każdy poszczególny rząd w zestawie rekordów zostanie przekształcony w element ADDRESS zawierający każde z pól z tego rzędu jako atrybuty (podkreślenia umieszczone na końcu wierszy w tej instrukcji wskazują analizatorowi składniowemu kodu VBScript, że ten jeden logiczny wiersz kodu składa się z kilku fizycznych wierszy). Po wykonaniu pętli następuje kilka elementów ADDRESS, po jednym dla każdego rzędu w zestawie rekordów. Następnie umieszczamy elementy ADDRESS wewnątrz elementu ADDRESSES i ciąg XML jest już gotowy. Powinienem wspomnieć, że potrzebujemy zewnętrzny znacznik ADDRESSES, ponieważ dokument XML może mieć tylko jeden element „górnego poziomu”. Jeślibyśmy mieli tylko trzy znaczniki ADDRESS w rzędzie, byłby to źle sformułowany dokument XML i Flash nie bardzo by nas za to lubił.
W ostatnim wierszu tej strony ASP wpisujemy zawartość zmiennej sXML do obiektu Response. Ponieważ wydobyliśmy kod HTML, tylko zawartość zmiennej sXML zostanie wysłana z powrotem do przeglądarki. 2.
Umieść stronę ASP gdzieś w ścieżce szukającej twojego serwera i otwórz ją z przeglądarki. Jeśli zobaczysz tylko pustą, białą stronę, prawdopodobnie wszystko działa — pamiętaj, że nie ma w niej żadnego kodu HTML, więc nie powinieneś się spodziewać, ze cokolwiek zobaczysz. Jeśli jednak oglądasz źródło z przeglądarki, sytuacja jest trochę inna. Powinno ono wyglądać mniej więcej tak:
Współdziałanie Flasha i ASP
Wydaje nam się, że tworzymy dokument XML z naszej strony ASP poprawnie, więc nadszedł już czas na spróbowania otworzyć go we Flashu.
Rozdział 20-540
1.
Utwórz kopię pliku xmlAddresses.fla i nadaj mu adres xmlAddressesConcat.fla (nazywamy tą wersję w taki sposób, ponieważ będzie ona się ładować ze strony ASP tworzącej dokument XML z zastosowaniem konkatenacji ciągu). Aby wszystko działało wprowadzimy do filmu Flasha tylko jedną zmianę. Zmień wiersz poniższy skryptu: objXML.load("mydoc.xml");
na: objXML.load("addressSearch.asp");
2.
Opublikuj film i skopiuj go do tego samego katalogu na serwerze, w którym znajduje się również plik addressSearch.asp.
3.
Następnie w przeglądarce przejdź do pliku xmlAddressesConcat.html i sprawdź go.
Wszystko powinno wyglądać dokładnie tak samo, jak po załadowaniu danych z pliku tekstowego, lecz my znamy różnicę: nie ma tutaj żadnego pliku tekstowego. Użyliśmy strony ASP jako źródła danych XML i, jak zobaczymy, technika ta daje cały zestaw nowych możliwości.
Ulepszanie kodu ASP Tworzenie dokumentu XML z zastosowaniem konkatenacji ciągu świetnie nadaje się do generowania małych fragmentów w tym kodzie, lecz szansa popełnienia niewielkiego błędu składniowego, co w efekcie doprowadzi do wielkiego zamieszania, jest dosyć oczywista. Gdybyśmy tylko mieli coś w stylu obiektu XML Flasha, którego moglibyśmy zastosować w ASP! Prawdę mówiąc, to mamy. Jeśli na twoim serwerze zainstalowana jest przeglądarka Internet Explorer 4 (lub nowsza), oznacza to, że analizator składni XML firmy Microsoft również się na nim znajduje. To świetnie, gdyż obiekt Microsoftu służący do analizowania składni XML korzysta z prawie identycznego zestawu właściwości i metod jak obiekt Macromedii. Nazwa obiektu, jakiego chcemy zastosować brzmi MSXML.DOMDocument. Ulepszanie kodu ASP 1.
Utwórz kopię pliku addressSearch.asp i nadaj mu nazwę properSearch.asp.
2.
Teraz utworzymy nasz dokument XML we właściwy sposób.
3.
Edytuj plik properSearch.asp i dokonaj w nim zmian zgodnie z poniższym przykładem: <%@ Language=VBScript %> <% Option Explicit Dim cn Dim cmd Dim rs Dim objXML Dim elm Set cn = Server.CreateObject("ADODB.Connection") cn.ConnectionString = "addressDSN" cn.Open Set cmd = Server.CreateObject("ADODB.Command") cmd.ActiveConnection = cn cmd.CommandType = 1 cmd.CommandText = "SELECT addressID,fName,lName,address1," & _ "address2,city,state,zip FROM myAddresses" Set rs = cmd.Execute Set objXML = Server.CreateObject("MSXML. DOMDocument) ' Określamy element górnego poziomu Set elm = objXML.createElement("ADDRESSES") objXML.appendChild elm
Rozdział 20-541
Do Until rs.EOF Set elm = objXML.createElement("ADDRESS") elm.setAttribute "id", rs("addressID") elm.setAttribute "fName", rs("fName") elm.setAttribute "lName", rs("lName") elm.setAttribute "address1", rs("address1") If IsNull(rs("address2")) Then elm.setAttribute "address2", "" Else elm.setAttribute "address2", rs("address2") End If elm.setAttribute "city", rs("city") elm.setAttribute "state", rs("state") elm.setAttribute "zip", rs("zip") objXML.firstChild.appendChild elm rs.MoveNext Loop Response.Write objXML.xml %>
Początek tego pliku zmienił się niewiele, chociaż nie ma już zmiennych sXML i q, które zostały zastąpione przez obiekty objXML i elm przeznaczone odpowiednio do przechowywania obiektów reprezentujących nasz dokument XML i elementów z tego dokumentu. Po otwarciu zestawu rekordów rs, pierwszy nowy fragment kodu definiuje obiekt objXML do przechowania nowego obiektu DOMDocument z zastosowaniem metody Server.CreateObject. następnie tworzymy element prawie w taki sam sposób jak zrobilibyśmy to we Flashu. Metoda createElement obiektu DOMDocument zwraca obiekt elementu, więc poniższy wiersz... Set elm = objXML.createElement("ADDRESS")
...ustawia obiekt elm na elementem o nazwie ADDRESSES. Teraz dołączamy nowy węzeł w obiekcie elm do naszego obiektu objXML z zastosowaniem metody appendChild. W pętli, która jest następna w kolejności, definiujemy obiekt elm, aby zawierał kolejny nowy element — tym razem o nazwie — i przechodzimy do przypisania wszystkim jego atrybutom wartości w zestawie rekordów. Ta część różni się odrobinę od jej odpowiednika w kodzie ActionScript, ponieważ zamiast bezpośrednio określać wartość atrybutu, wywołujemy metodę setAttribute, przesyłając jej jako parametry nazwę atrybutu i wartość. Zwróć uwagę na instrukcję If obsługującą atrybut address2. Ponieważ ustawiliśmy długość tego pola na 0, jest możliwe, że w zestawie rekordów będziemy mieli wartość zerową. IsNull jest wbudowaną funkcją skryptu VBScript, która zwraca True, jeśli wyrażenie wysłane do niej jest zero, a w innym przypadku False.
Po zdefiniowaniu wszystkich atrybutów elementu w obiekcie elm, musimy dołączyć go do naszego elementu z górnego poziomu, . Do tego służy skrypt zbliżony do kodu ActionScript we Flashu: objXML.firstChild.appendChild(elm);
Kod ten dołącza element w obiekcie elm jako dziecko elementu . Po wykonaniu pętli wpisujemy właściwość xml obiektu objXML do obiektu Response
Rozdział 20-542
— jest to po prostu reprezentacja dokumentu XML w formie ciągu. Dane wyjściowe tego strony ASP będą zatem identyczne z danymi wyjściowymi pliku addressSearch.asp, i z powodu naszego stosunkowo prostego przykładu, możesz sobie pomyśleć, że próbowaliśmy rozbić orzech młotem. Niemniej jednak, im bardziej skomplikowane staną się z czasem twoje dokumenty XML, tym bardziej będziesz doceniać korzyści uzyskiwane poprzez zastosowanie tej techniki. 4.
Aby obejrzeć wynik naszej pracy we Flashu, utwórz kopię pliku xmlAddressesConcat.fla i nadaj jej nazwę xmlAddressesProper.fla. I tym razem wystarczy zmienić tylko jeden wiersz kodu ładujący dokument XML. Powinien teraz wyglądać tak: objXML.load("properSearch.asp");
5.
Zapisz plik xmlAddressesProper.fla, opublikuj go, umieść we właściwym katalogu i w przeglądarce przejdź do pliku xmlAddressesProper.html aby podziwiać twoje najnowsze osiągnięcie. I w tym przypadku może ono wyglądać jak poprzednio, lecz pod osłoną dochodzimy coraz bliżej do naszego celu dynamicznego, dostępu do bazy pozwalającego na wyszukiwanie.
Dodawanie funkcjonalności przeszukiwania W ostatniej części przykładu dodamy możliwość poszukiwania w bazie danych określonego adresu, w oparciu o kilka prostych kryteriów. Rozpocznijmy tym razem po stronie Flasha, ponieważ musimy wprowadzić znaczne zmiany. Funkcjonalność wyszukiwania 1.
Utwórz kopię pliku xmlAddressesProper.fla i nadaj jej nazwę xmlAddressesParm.fla. Następnie przeciągnij ujęcie kluczowe z ujęcia 1 do ujęcia 2, a w ujęciu 1 wstaw nowe puste ujęcie kluczowe.
2.
Teraz wytnij cały kod ActionScript z ujęcia 2 i wklej go do ujęcia 1. Ponieważ chcemy przeprowadzić wyszukiwanie, nie potrzebujemy pobierać danych z bazy danych w trakcie odtwarzania filmu, więc usuniemy następujący wiersz kodu: objXML.load("properSearch.asp");
3.
Chcemy natomiast, aby użytkownik wybrał wartości, jakie mają zostać wyszukane i wówczas załadował dane. Poniżej kodu w ujęciu 1 dodaj następujący fragment: function doSearh (field, value) { objXML.load ("parameterSearch.asp?field="+field+"&value="+value); searchVal = ""; play (); } stop ();
Funkcja doSearch zostanie wywołana po kliknięciu przez użytkownika na przyciskach przeszukiwania, które dodamy w ujęciu 2. Jak widać, oprócz stosowania
Rozdział 20-543
kolejnej strony ASP (będzie ona miała nazwę parameterSearch.asp), parametr przesyłany do metody load stał się bardziej skomplikowany: "parameterSearch.asp?field="+field+"&value="+value
Co się tu dzieje? Przedstawiony ciąg nie jest tylko nazwą pliku — jest to adres URL, co oznacza, że możemy zastosować sztuczkę, jaką pewnie widziałeś już czasami w polu adresowym w oknie przeglądarki. Gdy w adresie URL pojawia się znak zapytania, wszystkie dane na prawo od niego stają się zestawem parametrów ładowanego pliku, którym w tym przypadku jest nasza strona ASP. Kod ten spowoduje udostępnienie na tej stronie dwóch zmiennych, field i value skryptowi VBScript; field oznacza nazwę pola bazy danych, a value jest wartością literalną, jakiej użytkownik będzie szukać. Powracając teraz do funkcji doSearch, przypiszemy zmienną searchVal do pola wejściowego, do którego użytkownik wpisze szukane wartości; ustawienie zmiennej searchVal na “” spowoduje wyczyszczenie pola wejściowego po wprowadzeniu danych przez użytkownika. Na końcu ujęcia 1 dodaliśmy polecenie stop. W tym samy ujęciu umieścimy również szablon wyszukiwania. Umieszczenie polecenia play w funkcji doSearch przeniesie nas do ujęcia 2 (gdzie znajdują się pola wyświetlania) do inicjacji wyszukiwania. Zauważ, że metoda load jest asynchroniczna, co oznacza, że Flash nie będzie czekać na zakończenie jej działania przez przejściem do kolejnego wiersza kodu. Zatem prawdopodobnie będziemy znajdować się w ujęciu 2 zanim dokument XML zostanie załadowany, lecz chociaż nie dodaliśmy obsługi błędu do wykrycia niepowodzenia metody load, będziesz wiedzieć, jeśli ona nie zadziała. 4.
Jeśli chodzi o szablon wyszukiwania, będzie się on składać z jednowierszowego wejściowego pola tekstowego, czterech przycisków takiego samego rodzaju, jakie zastosowaliśmy w innym ujęciu i czterech jednowierszowych statycznych pól, tekstowych. Nadaj zmiennej wejściowego pola tekstowego nazwę searchVal. Mój szablon wygląda następująco:
5.
Umieść poniższy kod w przycisku First Name: on (release) { doSearch ("fName", searchVal); }
6.
... ten kod w przycisku Last Name:
Rozdział 20-544
on (release) { doSearch ("lName", searchVal); }
7.
... ten kod w przycisku City: on (release) { doSearch ("city", searchVal); }
8.
... i ten kod w przycisku State: on (release) { doSearch ("state", searchVal); }
9.
Już prawie skończyliśmy. W ujęciu 2 dodamy jeszcze polecenie stop (nie chcemy przecież pokonać całej trasy do ujęcia 2 tylko po to, aby ponownie powrócić do ujęcia 1), odnajdź trochę pustego obszaru na scenie w ujęciu 2 i dodaj etykietę o treści Search, a także przycisk zawierający poniższe akcje: on (release) { gotoAndPlay(1); }
Dzięki temu przyciskowi użytkownik będzie mógł wykonać kolejne przeszukiwanie, po obejrzeniu wyników. Tyle jeśli chodzi o Flasha. Teraz jeszcze dokonamy pewnych zmian w pliku ASP i już będzie koniec. 10. Utwórz kopię pliku properSearch.asp i nadaj jej nazwę parameterSearch.asp. Następnie zmodyfikuj wiersz definiujący polecenie tekstowe cmd zgodnie z poniższym przykładem: cmd.CommandText = "SELECT addressID,fName,lName,address1," & _ "address2,city,state,zip FROM myAddresses " &_ "WHERE " & Request.QueryString("field”) &_ " = '" & Request.QueryString("value”) & "';"
Dodaliśmy wyrażenie WHERE do naszego zapytania SQL, które filtruje rekordy w tabeli myAddresses i wyszukuje tylko te, które odpowiadają naszym dodatkowym kryteriom. Jeśli film Flasha ładuje dokument XML z adresu jak poniżej: .../parameterSearch.asp?field=fName&value=John
wówczas nasze wyrażenie WHERE będzie wyglądać tak: ...WHERE fName = 'John';
Po wykonaniu tego zapytania wszystkie adresy ludzi o imieniu John zostaną dodane do dokumentu XML. 11. Gratulacje! Właśnie skończyliśmy. Opublikuj plik xmlAddressesParm.fla, umieść wszystkie elementy w tym samym katalogu na serwerze i w przeglądarce przejdź do pliku xmlAddressesParm.html.
Krytycznie oceniając nasz projekt, to powinniśmy dopracować jeszcze jego część graficzną, ponieważ na razie nie wygląda zbyt ładnie. Natomiast pod kątem funkcjonalności osiągnęliśmy to, co zamierzaliśmy na początku.
Rozdział 20-545
Zakończenie W tym rozdziale zapoznaliśmy cię z podstawami języka XML i sposobami zastosowania go w połączeniu z Flashem. Mamy nadzieję, że dzięki wykonanym tutaj ćwiczeniom zrozumiałeś, że język XML odgrywa ważną rolę w Sieci, i że każdy, kto chce tworzyć poważne aplikacje internetowe powinien znać zasady jego działania. Potencjał połączenia aplikacji Flasha z językiem XML jest potężny. Na razie udało nam się tylko omówić to zagadnienie bardzo pobieżnie, lecz wraz z rozprzestrzenianiem się obsługi Flasha i zastosowania języka XML, masz świetną okazję na poszerzenie swoich umiejętności i wiedzy. Wszystkie dane w języku XML tylko czekają na wyświetlenie w świetnie wyglądających i funkcjonalnych filmach Flasha...
Rozdział 20-546
Rozdział 21 Połączenie Flasha i HTML Filmy Flasha nie żyją w próżni. Bez przeglądarki, w której będziesz je mógł obejrzeć, bez strony, na której będziesz je mógł umieścić i bez witryny internetowej, która nada im odpowiedni kontekst, film Flasha jest tylko kolejnym plikiem komputerowym. Do zaprojektowania strony mądrze wykorzystującej Flasha, konieczne jest zrozumienie zasad architektury witryn internetowych. Wiedza ta obejmuje sposób umieszczenia filmów na witrynie, interakcję z innymi elementami na stronie i sposób wyświetlania strony w różnych przeglądarkach stron WWW na różnych platformach. Nawet najpiękniej wykonana animacja lub perfekcyjnie komunikacyjny projekt pozostaje niekompletny bez kontekstu. W najprostszych sytuacjach, tworzenie tego kontekstu sprowadza się do utworzenia i osadzenia filmu o odpowiednim rozmiarze. Lecz zadanie to może być również złożone co zastosowanie kilku filmów na kilku warstwach osadzonych w ramach HTHML o różnym rozmiarze, komunikujących się miedzy sobą za pomocą języka JavaScript czy Perl. Poprzez zrozumienie zagadnień związanych z oglądaniem online Flasha w różnych przeglądarkach, a nawet poprzez zrozumienie kilku zagadnień, znajdziesz się na właściwej drodze prowadzącej do tworzenia witryn internetowych używających Flasha w elegancki i kompletny sposób. Pierwszym etapem w projektowaniu dowolnej witryny internetowej powinno być ustanowienie tymczasowej architektury (zarysu) witryny. Architektura ta może ulec zmianie w trakcie pracy nad projektem, lecz bez przynajmniej wstępnego planu, podjęcie kluczowych decyzji będzie niemożliwe. Na przykład, powinniśmy się najpierw zdecydować, czy w ogól chcemy zastosować Flasha, czy nie. Oczywiście dla potrzeb tej książki, Flash jest niezbędny, lecz na nim projektowanie witryn internetowych na pewno się nie kończy. Można na stronie zrobić bardzo wiele rzeczy bez Flasha, więc po prostu zakładanie, że powinien zostać użyty, nie jest najlepszym pomysłem. Poniżej przedstawiliśmy kilka dobrych powodów, dla których warto zastosować Flasha: • Jeśli istotna jest możliwość skalowania — zdolność do zmiany rozmiaru obrazków bez utraty jakości, w celu wypełnienia większych monitorów i dopasowania się do mniejszych. • Jeśli zostaną zastosowane w projekcie wysokie poziomy interaktywności i animacji. • Jeśli dźwięk będzie bardzo istotny. Z drugiej jednak strony, jeśli na witrynie znajdzie się przede wszystkim zawartość tekstowa, lub w dużej mierze będzie oparta na bazie danych i nie będzie zawierać zbyt wielu animacji, wówczas Flash tylko utrudni projektowanie. Spodziewaną grupę użytkowników witryny również należy wziąć pod uwagę. Jeśli, na przykład, potencjalna publiczność jest bardzo obeznana z Siecią i oglądanie twojej witryny ma im sprawić przyjemność, wówczas możesz nalegać, aby posiadali (lub zostaną poproszeni o pobranie) wtyczki Flasha. Jeśli jednak, spodziewana publiczność posiada zróżnicowane Rozdział 21-547
doświadczenie z obsłudze komputera, lub też czujesz, że musisz walczyć o ich uwagę, wówczas zastosowanie Flasha nie będzie dobrym pomysłem. Gdyby witryna firmy Amazon została wykonana z zastosowaniem Flasha, wielu jej użytkowników, a zwłaszcza tych bez zainstalowanego programu, robiliby swoje zakupy gdzie indziej. Istnieje jeszcze wiele innych czynników związanych z wyborem Flasha (lub innej technologii firmowej) na witrynie internetowej, lecz ogólna zasada powinna być taka, że jeśli nie możesz wymyślić żadnego dobrego powodu, dla którego potrzebujesz wykorzystać tą technologię, wówczas prawdopodobnie nie powinieneś tego robić. Po podjęciu decyzji o zastosowaniu Flasha, następnym etapem jest zastanowienie się, czy oprócz zawartości Flasha na witrynie będzie również zawartość w języku HTML. Jeśli taka zawartość nie jest konieczna, należy wówczas przemyśleć, w jaki sposób będzie stosowany Flash. Czy wypełni on całe okno przeglądarki, czy tylko jego część? Czy będzie to tylko jeden film, czy też kilka połączonych filmów, lub też kilka stosowych filmów? Jak sobie z tym dadzą radę użytkownicy nie posiadający wtyczki Flasha? Jeśli na stronie będzie umieszczona zawartość w języku HTML, należy zastanowić się, w jaki sposób będzie ona współistnieć z Flashem — nagłówki Flasha, Flash jako wbudowane obrazki, czy strony Flasha połączone ze stronami HTML — możliwości jest wiele. Po podjęciu wszystkich koniecznych decyzji możesz przejść do obmyślania planu i projektowania strony. Przekonasz się, że kilka z pomysłów po rozpoczęciu pracy nad projektem zostanie zmienionych, lecz to, ile pozostanie z oryginalnego pomysłu, zależy to od ciebie lub twojego klienta. Łatwiej ci będzie zdecydować, gdy dowiesz się, jak film Flasha jest wyświetlany na stronie HTML.
Wprowadzenie do języka HTML i Flasha Do pełnego zrozumienia zagadnień związanych z osadzaniem i pracą z filmami Flasha w kontekście konieczna jest podstawowa znajomość języka HTML i ręcznego programowania stron internetowych. Aplikacje takie jak Dreamweaver, chociaż bardzo użyteczne dla nowicjuszy, mogą okazać się ograniczające dla profesjonalisty, który regularnie zmuszony jest do jednoczesnego radzenia sobie w różnych sytuacjach. We Flashu można również utworzyć własną stronę HTML do wyświetlania filmów w przeglądarce — dostęp do tej możliwości uzyskuje się przez menu Publish. Z powodu stosunkowej prostoty języka HTML i ograniczeń tych „pomocnych” narzędzi (czyli aplikacji Dreamweaver, funkcji publikującej Flasha itp.) warto poznać podstawy języka HTML i nauczyć się tworzenia własnych dokumentów HTML. W większości przypadków, dla potrzeb pracy z Flashem, złożony HTML i tajemnicze znaczniki nie są zbyt ważne, lecz podstawowa wiedza na ten temat zdecydowanie tak. Aby plik SWF można było wyświetlić w przeglądarce stron WWW, należy go osadzić na stronie — czyli, odnieść się do niego z wnętrza strony HTML. Po wejściu użytkownika na tą stronę, strona wysyła mu plik SWF. Kod HTML umieszczony na stronie kontroluje sposób wyświetlenia tego pliku. Na przykład, mamy tu prostą stronę HTML przedstawiającą osadzony film o nazwie mainpage.swf. Dla jasności sformatowaliśmy kod:
Każda informacja na tej stronie zostaje powtórzona, raz dla przeglądarki Internet Explorer, i raz dla Netscape — ta druga odczytuje zaznaczony fragment
