You are on page 1of 627

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 <META> I KOD CHARAKTERYSTYCZNY DLA INNYCH WYSZUKIWAREK ......23-608
Co to jest znacznik <META>? ..................................................................................23-608
Znaczniki <META> 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 <META>......................................................................................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.

Adresy witryn internetowych poświęconych użyteczności


• 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 brak
TESKT/TŁO

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
„gniew”, następnie zapisz nastroje, kolory, uczucia, ludzie i tak dalej, wszystkie
rzeczy jakie kojarzysz z wybranym słowem.
2. 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.
3. 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.
4. 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.
5. 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 brak
KOMPOZYCJI

Rozdział 1-37
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 brak
KOLORÓW

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 brak
JASNE/CIEMNE

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ę. Czerwono-
pomarań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
KONTRAST brak
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 brak
JAKOŚCI

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 brak
ILOŚCIOWY

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 brak
KOLORÓW WE
FLASHU

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. brak
COM

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. brak
COM

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 brak
K.DK

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:

• Zabawa
• Jakość
• Zaufanie
• Oryginalność
• Przyjemność
• Czas wolny
• Rozrywka
• Przerwa
• Urlop
• Wspólnota
• Spokój
• Ukojenie
• Ciepło

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
PROTOTYP brak
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 brak
SCHEMAT
KOLORÓW

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 brak
KOLORÓW

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 brak
KOLORÓW
WITRYNY

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 brak
GRAFICZNY 1

Rysunek
PROFIL brak
GRAFICZNY 2

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
on (release, releaseOutside) {
stopDrag ();
dragging = false;
_root.s.stop();
}

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 CD-
ROM, 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:
pop@flashkit.com.

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śmio-
uję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ę czarno-
biał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);

Rozdział 6-170
_root.bg_color.mycolor[(slidername-1)] = this.vlm_slider1._y;

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
loud.setVolume(((yStage-_ymouse)/yStage)*100);
loud.setPan((((_xmouse*2)/xStage)*100)-100);

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:

3. Wypełnij kółko wielokolorowym gradientem liniowym...

MULTICOLOR
GRADIENT
(WIELOKOLORO
WY GRADIENT)

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<howmany; i++) {

Rozdział 8-208
if (ba[i]._y<-100) {
removeMovieClip (ba[i]);
ba.splice(i, 1);
howmany- -;
} else {ba[i]._y -= ba[i].rate;}
}

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<howmany; i++) {

if (ba[i]._y<-100) {
removeMovieClip (ba[i]);
ba.splice(i, 1);
howmany- -;
}
else {ba[i]._y -= ba[i].rate;
}

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<theText.length; i++) {
duplicateMovieClip (this.ball0, “ball”+i, i);
balls[i] = eval(“ball”+i);
balls[i].text = theText.charAt(i);
balls[i]._x = 20*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<theText.length;

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<theText.length; i++) {


duplicateMovieClip (this.ball0, “ball”+i, i);
balls[i] = eval(“ball”+i);
balls[i].text = theText.charAt(i);
balls[i]._x = 20*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<theText.length; i++) {


Xdiff = (balls[i-1]._x-balls[i]._x);
Ydiff = (balls[i-1]._y-balls[i]._y);
Xdiff += offset;

balls[i].x_rate += (Xdiff/speed);
balls[i].y_rate += (Ydiff/speed);
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);
}

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<theText.length; 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 += (Xdiff/speed);
balls[i].y_rate += (Ydiff/speed);
balls[i].x_rate *= friction;
balls[i].y_rate *= 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);

Rozdział 8-226
textArray[i] = eval(“text”+i);
textArray[i]._y = Counter;
textArray[i].text = 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;

Rozdział 9-236
}
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) {
if (eval(_droptarget) != _parent.target) {
_x = loc_x;
_y = loc_y;
}
stopDrag ();
clicked = false;
}
}

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:

<HTML>
<FRAMESET cols="175, *">
<FRAME src="SimpleMenu.html">
<FRAME src="home.html" name="target">
</FRAMESET>
</HTML>

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 groundLevel = ground._y;
var ballOffset = ball._height/2;
var gravity = 10;
var velocity = 0;

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<n;i++)
{
result *= x;
}
return result;
}

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(); //Aby ukryć istniejący wskaźnik
startDrag (“Head”, true);

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.

5. W ujęciu Initialize wpisz poniższy kod:

Rozdział 11-278
movie1.loadMovie("http://mysite.com/really_big.swf");
movie1.stop();
movie1._visible = false;

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 JASNOSZARY CIEMNOSZARY CZARNY


FFFFFF 999999 333333 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
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();

...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<itemsToDisplay && ((i + offset)<listItems.length);i++)
{
eval("textBox" + String(i+1)).value = listItems[offset+i];

Rozdział 11-303
eval("textBox" + String(i+1))._visible = true;
totalheight+=20;
}

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<itemsToDisplay;i++)
{
eval("textBox" + String(i+1))._visible = false;
}

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ą dwu-
uję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();

14. ...w ujęciu 3 następujący fragment:


gotoAndPlay(“refreshLoop”);

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();

8. ...podobny w ujęcie 3:
nextState = "list_up";
toggle_button.SetOrientation("up");
drop_down_list._visible = true;
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<num_balls; i++) {
duplicateMovieClip (this.ball0, "ball"+i, i);
balls[i] = eval("ball"+i);
balls[i].x_rate=0;
balls[i].y_rate=0;
balls[i]._xscale-=(i*10);
balls[i]._yscale-=(i*10);
}

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<num_balls, używa wartości w zmiennej num_balls jako górnej granicy
iteracji pętli. Pierwszy wiersz w samej pętli powiela klipy używając kopii ball0 jako
szablonu i przypisując nowemu klipowi filmowemu nowa nazwę i poziom. Obydwie z
tych dwóch ostatnich operacji wykorzystują wartość licznika pętli do określenia
właściwych wartości.
Następna instrukcja umieszcza nowy klip w tablicy w pozycji indeksowej i w tym
przypadku stosując bardzo praktyczną zmienną licznika pętli:
balls[i] = eval("ball"+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<num_balls; i++) {
duplicateMovieClip (this.ball0, "ball"+i, i);
balls[i] = eval("ball"+i);
balls[i].x_rate=0;
balls[i].y_rate=0;
balls[i]._xscale-=(i*10);
balls[i]._yscale-=(i*10);
}

startDrag ("ball0", true);

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<num_balls; i++) {

Xdiff=(balls[i-1]._x-balls[1]._x);
Ydiff=(balls[i-1]._y-balls[i]._y);

balls[i].x_rate+=(Xdiff/speed);
balls[i].y_rate+=(Ydiff/speed);

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<num_balls; i++) {

Xdiff=(balls[i-1]._x-balls[1]._x);
Ydiff=(balls[i-1]._y-balls[i]._y);

balls[i].x_rate+=(Xdiff/speed);
balls[i].y_rate+=(Ydiff/speed);

balls[i].x_rate*=friction;
balls[i].y_rate*=friction;

ball [i]._x+=balls[i].x_rate;
balls[i]._y+=balls[i].y_rate;

updateAfterEvent(mouseMove);

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<flame_num; i++) {
count++;

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<fireArray.length; i++){
if(fireArray[1] !=0){
removeMovieClip (fireArray[1]);
}
}
gotoAndPlay(1);
}

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; i<flame_num; i++){


count++;

duplicateMovieClip (particle, "fire"+count, count);

fireArray[count]=eval("fire"+count);
fireArray[count]._visible=true;
fireArray[count]._x=0;
fireArray[count]._y=0;
fireArray[count].myNum=count;
}

if(count>1000){
for(i=0; i<fireArray.length; i++){
if(fireArray[1] !=0){
removeMovieClip (fireArray[1]);
}

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;

Rozdział 12-320
} else if(Key.isDown(Key.LEFT)){
_parent.ball._x-=5;
} else if(Key.isDown(Key.UP)){
_parent.ball._y-=5;
} else if(Key.isDown(Key.DOWN)){
_parent.ball._y+=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<pointArray.length; i++) {
duplicateMovieClip ("line", "line" +i, i);
lines[i] = eval("line" +i);
lines[i].p1 = pointArray[i];

if (i == (pointArray.length -1)) {
lines[i].p2 = pointArray[0];
} else {
lines[i].p2 = pointArray[i+1];
}
}

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<lineArray.length; i++) {
lineArray[i]._x = lineArray[i].p1._x;
lineArray[i]._y = lineArray[i].p1._y;
lineArray[i]._xscale = lineArray[i].p2._x-lineArray[i].p1._x;
lineArray[i]._yscale = lineArray[i].p2._y-lineArray[i].p1._y;
}
}
CreateLines(points);
line._visible=false;
square._visible=false;

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<pointArray.length; i++) {
duplicateMovieClip (“line”, “line” +i, i);
lines[i] = eval(“line” +i);
lines[i].p1 = pointArray[i];

if (i == (pointArray.length -1)) {
lines[i].p2 = pointArray[0];
} else {
lines[i].p2 = pointArray[i+1];
}
}
}

function DrawLines (lineArray) {


for (i=0; i<lineArray.length; i++) {
lineArray[i]._x = lineArray[i].p1._x;
lineArray[i]._y = lineArray[i].p1._y;
lineArray[i]._xscale = lineArray[i].p2._x-lineArray[i].p1._x;
lineArray[i]._yscale = lineArray[i].p2._y-lineArray[i].p1._y;
}
}
CreateLines(points);
line._visible=false;
square._visible=false;

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<input_num; i++){
duplicateMovieClip (this.x0, "x"+i, i);
duplicateMovieClip (this.y0, "y"+i, (i+input_num));
input[i] = newArray();
input[i][0] = eval("x"+i);
input[i][1] = eval("y"+i);
input[i][0]._y += i*25;
input[i][1]._y += i*25;
input[i][0].text = i*50;
input[i][i].text = Math.pow (i*2, 2)*2;
}

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<imput_num-1); i++) {
duplicateMovieClip (this.line, "line" + i, (i + (input_num*2)));
lines[i] = eval("line"+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<imput_num-1); i++) {
duplicateMovieClip (this.point, "point" + i, (i + (input_num*3)));
points[i] = eval("point"+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<input_num; i++) {


pointArray[i]._x = inputArray[i][0].text;
pointArray[i]._y = inputArray[i][1].text;
pointArray[i]._y* =-1;
}
}
line._visible=false;
point._visible=false;
DrawLines (input, lines, points);

stop();

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;

Rozdział 13-346
}
if (BallY<10) {
BallY = 10;
Yspeed = Yspeed*-1;
Yspeed = Yspeed+((Math.random()*10)-5);
}
_x = BallX;
_y = BallY;

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 == 1) {
CreatureY = CreatureY-Speed;
_rotation = 0;
}
if (Direction == 2) {
CreatureY = CreatureY-Speed;
CreatureX = CreatureX+Speed;
_rotation = 45;
}
if (Direction == 3) {
CreatureX = CreatureX+Speed;
_rotation = 90;
}
if (Direction == 4) {
CreatureY = CreatureY+Speed;
CreatureX = CreatureX+Speed;
_rotation = 135;
}
if (Direction == 5) {
CreatureY = CreatureY+Speed;
_rotation = 180;
}
if (Direction == 6) {
CreatureY = CreatureY+Speed;
CreatureX = CreatureX-Speed;
_rotation = 225;
}
if (Direction == 7) {
CreatureX = CreatureX-Speed;
_rotation = 270;
}
if (Direction == 8) {
CreatureY = CreatureY-Speed;
CreatureX = CreatureX-Speed;
_rotation = 315;
}

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 (CreatureX<BlockX-40) {
if (CreatureY>BlockY-60) {
if (CreatureY<BlockY+60) {
_root.Creature._x = BlockX-70;
_root.Creature.gotoAndPlay(10);
}
}
}
}
if (CreatureX<BlockX+70) {
if (CreatureX>BlockX+40) {
if (CreatureY>BlockY-60) {
if (CreatureY<BlockY+60) {
_root.Creature._x = BlockX+70;
_root.Creature.gotoAndPlay(10);
}
}
}
}
if (CreatureY>BlockY-70) {
if (CreatureY<BlockY-40) {
if (CreatureX>BlockX-60) {
if (CreatureX<BlockX+60) {
_root.Creature._y = BlockY-70;
_root.Creature.gotoAndPlay(10);
}
}
}
}
if (CreatureY<BlockY+70) {
if (CreatureY>BlockY+40) {
if (CreatureX>BlockX-60) {
if (CreatureX<BlockX+60) {
_root.Creature._y = BlockY+70;
_root.Creature.gotoAndPlay(10);
}
}
}
}

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:

• PlayerShip (statek gracza)


• Enemy (wróg) — „zwyczajny” przeciwnik
• Mine (mina) — niezniszczalny wróg
• PlayerShot (pocisk gracza) — promień laserowy gracza
• Mover (wskaźnik) — kursor myszy
• ScoreMovie (klip z wynikiem) — przechowuje bieżący wynik gracza
• PlayerShipExplosion (wybuch statku gracza)
• Powerups (bonusy)

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ż klipem-
rodzicem, 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<PlayerShipX){
EnemyX=EnemyX+EnemySpeedX;
}

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 (EnemyX<PlayerShipX+20) {
if (EnemyX>PlayerShipX-20) {
if (EnemyY>PlayerShipY-20) {
if (EnemyY<PlayerShipY+20) {
if (_root.Shield == 0) {
_root.PlayerDeath = true;
}
}
}
}
}
gotoAndPlay (2);

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 (MineX<PlayerShipX) {
MineSpeedX = MineSpeedX+.3;
}
if (MineX>PlayerShipX) {
MineSpeedX = MineSpeedX-.3;
}
if (MineY<PlayerShipY) {
MineSpeedY = MineSpeedY+.3;
}
if (MineY>PlayerShipY) {
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 = MineX+MineSpeedX;
MineY = MineY+MineSpeedY;
this._x = MineX;
this._y = MineY;

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 (EnemyX<PlayerShipX+15) {
if (EnemyX>PlayerShipX-15) {
if (EnemyY>PlayerShipY-15) {
if (EnemyY<PlayerShipY+15) {
if (_root.Shield == 0) {
_root.PlayerDeath = true;
gotoAndStop (4);
}
}
}
}
}
gotoAndPlay (2);

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 (ShotX<EnemyX+15) {
if (ShotY>EnemyY-15) {
if (ShotY<EnemyY+15) {
if (Laser == 0) {
ShotDeath = true;
}
if (Laser == 1) {
ShotDeath = false;
}
if (_root["Enemy"+EnemyNum].Death == false) {
_root["Enemy"+EnemyNum].gotoAndPlay(4);
}
}
}
}
}
} while (EnemyNum<12);
if (ShotDeath == true) {
this._x = 600;
}

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 (MoverX<PlayerShipX) {
PlayerShipX = PlayerShipX-((PlayerShipX-MoverX)/CraftSpeed);
}
if (MoverY>PlayerShipY) {
PlayerShipY = PlayerShipY+((MoverY-PlayerShipY)/CraftSpeed);
}
if (MoverY<PlayerShipY) {
PlayerShipY = PlayerShipY-((PlayerShipY-MoverY)/CraftSpeed);
}
this._x = PlayerShipX;
this._y = PlayerShipY;
this._rotation = (MoverX-PlayerShipX)/3;

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 (MoverX<PlayerShipX) {
PlayerShipX = PlayerShipX-((PlayerShipX-MoverX)/CraftSpeed);
}
if (MoverY>PlayerShipY) {
PlayerShipY = PlayerShipY+((MoverY-PlayerShipY)/CraftSpeed);
}
if (MoverY<PlayerShipY) {
PlayerShipY = PlayerShipY-((PlayerShipY-MoverY)/CraftSpeed);
}
this._x = PlayerShipX;

Rozdział 14-380
this._y = PlayerShipY;
this._rotation = (MoverX-PlayerShipX)/3;
gotoAndPlay (1);

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 (PowerupX<PlayerShipX+20) {
if (PowerupX>PlayerShipX-20) {
if (PowerupY>PlayerShipY-20) {
if (PowerupY<PlayerShipY+20) {
gotoAndPlay (5);
}
}
}
}

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);

...zastąpiliśmy następującym:
Zpos = 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)

Obrót z:
Xpos = Xpos_Temp * sin(Zangle) + Ypos_Temp * cos(Zangle)
Ypos = Ypos_Temp * sin(Zangle) — Xpos_Temp * cos(Zangle)

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

Rozdział 15-404
Depth = 1 / (1 - (Zpos / perspective));

// rysuj
this["Point" + c]._x = (Xpos * Depth) + centerPoint._x;
this["Point" + c]._y = (Ypos * Depth) + centerPoint._y;
this["Point" + c]._xscale = this["Point" + c]._yscale = Depth * 100;

// sortowanie Z
this["Point" + c].swapDepths(Depth * 500);
}
}

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...

Równanie będzie takie:


StartX = 0, EndX = -8
StartY = 0, EndY = -10
_xscale = -8 — 0 = -8
_yscale = -10 — 0 = -10

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)<linSpeed) {
xVel = xVel+(thrust*_parent.sin[angle]);
}
if (Math.abs(yVel)<linSpeed) {
yVel = yVel-(thrust*_parent.cos[angle]);
}
}

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

Rozdział 16-429
this._rotation = angle;
this._x = xPos;
this._y = yPos;

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<y) {
// kwadrant 1
angle1 = 0;
} else {
// kwadrant 2
angle1 = 90;
}
} else {
if (k<y) {
// kwadrant 4
angle1 = 270;
} else {
// kwadrant 3
angle1 = 180;
}
}

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)<linSpeed) {
xVel = xVel+(thrust*_root.fn.sine(angle));
}
if (Math.abs(yVel)<linSpeed) {
yVel = yVel-(thrust*_root.fn.cosine(angle));
}

// modelujemy tarcie (rekuduje prędkość w czasie)


xVel = xVel*_parent.world.friction;
yVel = yVel*_parent.world.friction;

// obliczamy nowe pozycje statku


xPos = xPos+xVel;
yPos = yPos+yVel;

// animujemy obcego w oparciu o obliczone wartości.


this._rotation = angle;
this._x = xPos;
this._y = yPos;

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 “<Down>”) {
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=<A HREF="http://www.webryder.com"><FONT
COLOR="#0000ff">webryder.com</FONT></A> - <B>need some site updates ? Contact Us
today!</B>

No dobrze, może ci się to wydawać trochę tajemnicze, więc przeanalizujmy ten kod.
W tym fragmencie umieszczamy tekst w pierwszym dynamicznym polu tekstowym i
stosujemy na nim formatowanie HTML. A teraz szczegóły...

text_1.text= podaje wartość zmiennej text w kopii klipu filmowego text_1.


Zwróć uwagę na hiperłącze HTML <A HREF=http://www.webryder.com>
umożliwiające użytkownikom klikanie na tekście aby przejść do określonej witryny
internetowej znajdującej się pod danym adresem.

<FONT COLOR="#0000ff"> otwiera polecenie koloru czcionki z zastosowaniem


szesnastkowych wartości — w tym przykładzie jest to kolor niebieski. Dodajemy
tekst, który połączy się z właśnie zdefiniowanym adresem URL i stosujemy
oznaczenia </FONT> i </A> do zamknięcia znacznika czcionki i hiperłącza.

Znacznik <A> służy do zdefiniowania łącza pomiędzy różnymi zasobami, czy jest to
hiperłącze podobne do tego właśnie zastosowanego, czy też zakładka, która przeniesie
użytkownika do danej części strony z odpowiednim następującym znacznikiem: <A
NAME="Nazwa Łącza"></A>.

Chcemy, aby drugi tekst był pogrubiony, więc wokół tekstu stosujemy standardowe
znaczniki <B> </B>. W tym kontekście działają również oznaczenia standardowego
akapitu HTML (<P><P ALIGN="right"), kursywy (<I></I>) i podkreślenia
(<U></U>).

Można również zastosować oznaczenia <FONT FACE=" "></FONT> do


określenia czcionki, a także <FONT SIZE="+2"></FONT> lub <FONT
SIZE="6"></FONT> 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=<A HREF="http://www.webryder.com"><FONT

Rozdział 17-464
COLOR="#0000FF">groceryinsider.com</FONT></A> - <B><I>Our latest site-Grocery Products,
Careers and More !</I></B>
&go=1

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. Miejsca na produkty — nazwa kopii product.


2. Przycisk zamykania ekranu.
3. Pole tekstowe do przechowania nazwy produktu — nazwa zmiennej title.
4. Pole tekstowe do przechowania ceny produktu — nazwa zmiennej cost.
5. 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++) {

Rozdział 18-483
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++;
}

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/"

Trzecia i czwarta:
AddType application/x-tar .tgz
AddType application/x-httpd-php .php4
AddType application/x-httpd-php4 .php

I piąta:
# Format: Action media/type /cgi-script/location
# Format: Action handler-name /cgi-script/location
#
Action application/x-httpd-php4 "/php4/php.exe"

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
echo "Trying out some <B>PHP</B> 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:
<?php
...
?>

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:
<?php

$f=fopen("text_file.txt","a");

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");

fclose($f);

echo "<BR><BR><B>Submit successful!</B>";

?>

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 andyc@foed.com 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:
<?php

$f=fopen("text_file.txt","a");

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");

fclose($f);

echo "<BR><BR><B>Submit successful!</B>";

?>

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:
<?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:

Następny wiersz skryptu...


fwrite($f," E-Mail:\t\t$e\r\n\r\n");

...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 "<BR><BR><B>Submit successful!</B>";

... 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:
<A HREF="index.html">Go to the index</A>

...i wierszowi, jaki może pojawić się w dokumencie XML:


<BOOK isbn="1903450306">Flash 5 Studio</BOOK>
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 <BOOK>,
lecz na przykład <TOME> 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 <BOOK>,
podobnie jak twoja przeglądarka internetowa wie, że ma utworzyć hiperłącze gdy odczyta
znacznik <A>. Dzięki temu można przygotować spersonalizowany model danych do
zastosowania w każdej sytuacji.

Czemu w ogóle się przejmować?


Prawie całkowita elastyczność języka XML jest powodem bogatej listy zastosowań, jakie
wymieniłem na początku tego rozdziału. Jeśli przygotowujesz dokument do wydrukowania,
możesz zastosować znaczniki określające rozmiar i pozycję całego tekstu na stronie. Podczas
projektowania systemu operacyjnego możesz zastosować język XML do opisania informacji
przesyłanej z jednej aplikacji do drugiej. Wszystkie zastosowania języka XML sprowadzają
się przechowywania i przesyłania danych w sposób ułatwiający tworzenie danych i szybki do
nich dostęp.
Oczywiście potrzeba opisywania, przechowywania i przesyłania informacji nie jest niczym
nowym, a język XML nie jest pierwszą technologią tym się zajmującą. Istnieje wiele
popularnych formatów służących do przechowywania danych, a niektóre z nich stworzone
przez takie firmy jak Lotus i Microsoft do zastosowania w ich produktach stały się prawie że
„standardem” na własnych prawach. Jednakże, język XML góruje nad tymi rozwiązaniami w
kilku powodów:
• XML jest darmowy — nie musisz uiszczać żadnych opłat aby go używać.
• XML działa na dowolnej platformie i w oparciu o dowolną technologię — nie ważne, jaki masz
komputer, ani na jakim systemie operacyjnym pracujesz.
• XML jest łatwy do odczytania przez przeciętnego użytkownika — szybko zorientujesz się, czego dane
dotyczą, a nawet odnajdziesz proste błędy.

I na koniec najważniejsze:

• XML to tylko tekst. Jeśli chcesz, możesz utworzyć go jedynie za pomocą edytora tekstu i przesłać go
bez konieczności stosowania technik kodujących.

Przede wszystkim, XML przyjął się, do tego stopnia, że ludzie pracujący na podobnych
dziedzinach uzgodnili zestaw znaczników, które najlepiej opisują dane, jakimi się codziennie
zajmują, umożliwiając tym samym szybką i łatwą wymianę informacji pomiędzy takimi
organizacjami. Dowód tego typu operacji możemy znaleźć w działalności wydawniczej,
finansach, nauce, a nawet muzyce. Co więcej, firmy produkujące oprogramowanie bazy
danych coraz częściej wyposażają swoje programy w opcje ładowania i zapisywania danych
w formacie XML, poszerzając zastosowanie swoich produktów o nowe metody obsługi
informacji w formacie XML.
Oznacz to, że ilość danych w formacie XML zwiększa się z dnia na dzień i nic nie oznacza,
że sytuacja ta może ulec zmianie. W efekcie, potrzeba odczytywania i pisania tego typu
danych nadal rośnie, a obsługa danych w formacie XML jest niezbędna w każdej aplikacji

Rozdział 20-515
służącej do prezentacji i rozpowszechniania informacji. Na to zapotrzebowanie odpowiedziała
firma Macromedia rozszerzając Flash 5 o obsługę języka XML, co oznacza, że właśnie
nadszedł czas na naukę XML.

Natura bestii
Chociaż masz wolny wybór co do użycia znaczników w dokumencie XML, jednakże
struktura danych oparta jest na kilku surowych regułach, jak również składnia stosowana w
obrębie znaczników. Jest to kolejna różnica między językiem XML a HTML, który
charakteryzuje się swobodniejszymi zasadami umożliwiającymi przeglądarkom „zgadnięcie”,
co zamierzał autor, z różnym powodzeniem (na przykład, jeśli nie zakończysz tabeli HTML
znacznikiem <TABLE>, 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:
<DEPOSIT account="900411557000"
datetime="Fri Nov 17 16:11:29 EST 2000"
tran="123">
<CHECK num="123456">405.33</CHECK>
<CHECK num="123457">29.99</CHECK>

Nie byłoby dobrze, gdyby biuro obsługi doszło do wniosku, że teraz wystarczy tylko dopisać
kończący znacznik <DEPOSIT>. 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 </DEPOSIT>) 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:
<BOOK isbn="1903450306">Flash 5 Studio</BOOK>

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 <BOOK>, 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 <FONT czy
<TABLE jako początków poprawnych znaczników w języku HTML.
Następnie przechodzimy do fragmentu, który przywodzi na myśl język HTML. Po nazwie
elementu, lecz przed końcem otwierającego znacznika, mamy tekst isbn="1903450306".
Ten atrybut pojawia się w obrębie znacznika i zatem stanowi jego część — czyli podobnie
jak w języku HTML. Rozważmy wiersz typu <FONT face="arial" size="3"
color="black">. 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:
<BOOK isbn=”1903450306” title=”Flash 5 Studio”></BOOK>

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ć </book> i </Book> 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:
<BOOK isbn="1903450306" title="Flash 5 Studio" />

Umieszczenie prawego ukośnika przed znakiem > oznacza, że element ten nie posiada żadnej
zawartości i nie zastosujemy specjalnego znacznika zamykającego w formie </BOOK>.
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
<TR><TD></TD></TR>, gdzie element <TD> jest całkowicie umieszczony w elemencie
<TR>. Używamy takiej samej składni w języku XML, więc dodanie elementu w elemencie
<BOOK> będzie wyglądać tak:

<BOOK isbn="1903450306" title="Flash 5 Studio">


<CHAPTER number="1" name="Introduction" />
</BOOK>

Jak już powiedzieliśmy, element <CHAPTER> tworzy zawartość elementu <BOOK> 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:
<PERSON firstname="John" lastname="Doe">
<CHUM firstname="Billy" lastname="Kid" />
<CHUM firstname="Jane" lastname="Doe" />
<CHUM firstname="Harry" lastname="Carry" />
</PERSON>

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 <PERSON>, który jest również
rodzicem trzech elementów <CHUM> w nim zawartych. Zgodnie z zasadami przedstawionymi
powyżej, <PERSON> 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 <PERSON>, 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 <CHUM>, 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:
<PERSON firstname="John" lastname="Doe">
<CHUM firstname="Billy" lastname="Kid" />
<CHUM firstname="Jane" lastname="Doe" />
<CHUM firstname="Harry" lastname="Carry" />
</PERSON>

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 <PERSON> 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 <CHUM> — 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 <CHUM>? Podczas tworzenia
elementu <PERSON> dodaliśmy go do nowego dokumentu XML poprzez wywołanie metody
appendChild tego dokumentu, określając element <PERSON> jako pierwsze dziecko. Dla
trzech elementów <CHUM> wywołaliśmy metodę appendChild obiektu
xmlObj.firstChild, czyli elementu <PERSON> czyniąc każdy element <CHUM>
dzieckiem elementu <PERSON>.

Testowanie kodu XML


Obiecałem udowodnić ci, że kod odczytujący elementy <PERSON> i <CHUM> 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 <PERSON> 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 <CHUM>. 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:
<ADDRESSES>
<ADDRESS fName="John"
lName="Doe"
address1="1313 Mockingbird Lane"
address2=""
city="Springfield"
state="MA"
zip="12345-6789"/>
<ADDRESS fName="Billy"
lName="Kid"
address1="123 West St."
address2=""
city="Silver City"
state="NM"
zip="98765-4321"/>
<ADDRESS fName="Sam"
lName="Sham"
address1="123 Street Road"
address2=""
city="Philadelphia"
state="PA"
zip="12345-6789"/>
</ADDRESSES>

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 <ADDRESS>, 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
%>
<HTML>
<HEAD>
<TITLE>No Title</TITLE>
</HEAD>
<BODY>

<%
Do Until rs.EOF
Response.Write rs("lName") & ", " & rs("fName") & "<BR>"
rs.MoveNext
Loop

rs.Close
cn.Close
Set cn = Nothing
Set rs = Nothing
Set cmd = Nothing
%>

</BODY>
</HTML>

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.

<HTML>
<HEAD>
<TITLE>No Title</TITLE>
</HEAD>
<BODY>

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 <BODY>.

<%
Do Until rs.EOF
Response.Write rs(„lName”) & „, „ & rs(„fName”) & „<BR>”
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
%>

</BODY>
</HTML>

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:
<HTML>
<HEAD>
<TITLE>No Title</TITLE>
</HEAD>
<BODY>

Doe, John<BR>Kid, Billy<BR>


</BODY>
</HTML>

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 & "<ADDRESS id=" & q & rs("addressID") & q & _
" fName=" & q & rs("fName") & q & _
" lName=" & q & rs("lName") & q & _
" address1=" & q & rs("address1") & q & _
" address2=" & q & rs("address2") & q & _
" city=" & q & rs("city") & q & _
" state=" & q & rs("state") & q & _
" zip=" & q & rs("zip") & q & "/>"
rs.MoveNext
Loop

sXML = "<?xml version=" & q & "1.0" & q & "?><ADDRESSES>" & sXML & "</ADDRESSES>"

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
<ADDRESSES> 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 <ADDRESS> — 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 <ADDRESS> w obiekcie elm,


musimy dołączyć go do naszego elementu z górnego poziomu, <ADDRESSES>. 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 <ADDRESSES>. 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:
<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
WIDTH="100"
HEIGHT="100"
CODEBASE="http://active.macromedia.com/flash5/cabs/swflash.cab#version=
5,0,0,0">

<PARAM NAME="MOVIE" VALUE="mainpage.swf">


<PARAM NAME="PLAY" VALUE="true">
<PARAM NAME="LOOP" VALUE="true">
<PARAM NAME="QUALITY" VALUE="high">

Rozdział 21-548
<EMBED SRC="mainpage.swf"
WIDTH="100"
HEIGHT="100"
PLAY="true"
LOOP="true"
QUALITY="high"

PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?
P1_Prod_Version=ShockwaveFlash">

</EMBED>

</OBJECT>

Każda informacja na tej stronie zostaje powtórzona, raz dla przeglądarki Internet Explorer, i
raz dla Netscape — ta druga odczytuje zaznaczony fragment <EMBED>. Internet Explorer
zignoruje kod w obrębie znaczników <EMBED>, a Netscape potraktuje w taki sam sposób
sekcję zawartą pomiędzy znacznikami <OBJECT>. Może to wyglądać na marnowanie czasu i
rozmiaru pliku, lecz nie jest to jedyna niedogodność związana z pisaniem dla różnych
standardów przeglądarek. Nie jest to zły pomysł, gdyż większość instrukcji na każdej stronie
pozostanie taka sama. Jedynymi atrybutami, jakie będą się zmieniać z dokumentu do
dokumentu to plik źródłowy (SRC w <EMBED>, MOVIE w <OBJECT>) i czynniki skali
(WIDTH i HEIGHT w obydwu sekcjach).
Ramki są kolejnym aspektem HTML niezwykle ważnym podczas pracy z Flashem.
Umożliwiają one wyświetlanie dwóch lub więcej stron HTML jednocześnie w tym samym
oknie przeglądarki. Wysokość i szerokość ramki zawierającej każdą stronę jest kontrolowana
przez kolejny dokument HTML noszący nazwę zestaw ramek, który również nadzoruje inne
właściwości, takie jak paski przewijania. Ramki stanowią również jedyny sposób na
zapewnienie, że plik SWF wypełni ekran, bez względu na jakiej przeglądarce został
uruchomiony.
Poniżej przedstawiliśmy przykładowy zestaw ramek HTML dla strony wyświetlającej dwie
ramki:
<FRAMESET ROWS="80%, 20%"
MARGINWIDTH="0"
MARGINHEIGHT="0"
FRAMESPACING="0"
BORDER="0"
FRAMEBORDER="NO">

<FRAME NAME="flash"
SRC="flash.html"
SCROLLING="NO"
MARGINWIDTH="0"
MARGINHEIGHT="0"
FRAMESPACING="0"
BORDER="0"
FRAMEBORDER="NO">

<FRAME NAME="bottom"
SRC="bottom.html"
SCROLLING="NO"
MARGINWIDTH="0"
MARGINHEIGHT="0"
FRAMESPACING="0"
BORDER="0"
FRAMEBORDER="NO">

</FRAMESET>

W tym przykładzie określiliśmy, że okno przeglądarki użytkownika powinno zawierać dwie


ramki rozmieszczone w poziomych rzędach: jedna zajmująca 80% całkowitej wysokości okna
i druga zajmująca 20%. Górna ramka będzie wyświetlać stronę HTML o nazwie flash.html

Rozdział 21-549
(zawierającą elementy <EMBED> i <OBJECT> dla filmu Flasha), natomiast dolna ramka
będzie wyświetlać stronę o nazwie bottom.html (może to być puste miejsce, lub też z inną
zawartością, jak na przykład reklama czy kolejny film Flasha). Ten zestaw ramek na ekranie
użytkownika będzie wyglądać tak:

Ramki są niezwykle praktycznym i prostym sposobem na połączenie różnych technologii i


mediów na ekranie. Jak już jednak wcześniej powiedzieliśmy, ramki nie muszą zawsze dzielić
ekranu. Mogą tworzyć również zupełnie przeciwny efekt, jak również umożliwić zajęcie
całego ekranu przez jedną ramkę.

Osadzanie pełnego okna


Jednym z najbardziej popularnych i najefektywniejszych sposób na zastosowanie filmów
Flasha jest umieszczenie ich w całym oknie przeglądarki. Dzięki temu projektant może
kontrolować widok dostępny użytkownikowi. W środowisku HTML nie można zeskalować
zawartości aby dopasować ją do okna użytkownika i z tego względu nie można zaplanować
dokładnie, w jaki sposób dana strona zostanie wyświetlona.
Aby uzyskać przewidywalny, dobrze zaprojektowany i wyświetlony na pełnym oknie widok
filmu Flasha, należy wziąć pod uwagę kilka czynników. Pierwszym z nich jest błędne
rozumienie przez przeglądarkę terminu „pełne okno”. Jeśli po prostu osadzisz film na 100%
całkowitej wysokości i 100% całkowitej szerokości okna (co byłoby wyborem oczywistym,
zakładając, że masz zamiar wykorzystać 100% rozmiaru okna), przeglądarka zazwyczaj
umieszcza w oknie paski przewijania. Wszystkie przeglądarki zostawiają również puste
miejsce u góry lub wzdłuż prawej krawędzi strony.
Zestaw ramek składający się z 1-pikselowej ramki u góry lub u dołu okna przeglądarki
umożliwi osadzenie filmu na 100% rozmiaru okna (minus prawie niewidzialna 1-pikselowa
ramka). Umieszczenie w ten sposób filmu w ramce eliminuje paski przewijania i pozwoli na
przewidywalne osadzanie filmów Flasha we wszystkich przeglądarkach na wszelkich
platformach. Jeden utracony piksel jest prawie niezauważalny i jest to niewielka cena, jaką
warto zapłacić za dobrze zaprojektowaną stronę. Niewidoczną ramkę można również
wykorzystać do ukrycia na niej kodu takiego jak liczniki wizyt lub kod JavaScript.
A oto przykład zestawu ramek zawierającego pełnoekranowy film Flasha:
<FRAMESET ROWS="*, 1"
MARGINWIDTH="0"
MARGINHEIGHT="0"
FRAMESPACING="0"
BORDERS="0"
FRAMEBORDER="NO">

Rozdział 21-550
<FRAME NAME="flash"
SRC="flash.html"
SCROLLING="NO"
MARGINWIDTH="0"
MARGINHEIGHT="0"
FRAMESPACING="0"
BORDER="0"
FRAMEBORDER="NO">

<FRAME NAME="bottom"
SRC="bottom.html"
SCROLLING="NO"
MARGINWIDTH="0"
MARGINHEIGHT="0"
FRAMESPACING="0"
BORDER="0"
FRAMEBORDER="NO">

</FRAMESET>

Zwróć uwagę na kod ROWS="*,1" w otwierającym znaczniku <FRAMESET>. Umożliwia


on rozszerzenie górnej ramki (czyli zawierającej film Flasha) do dowolnej wysokości, na jaką
ustawione jest okno przeglądarki. Poniższy rysunek przedstawia stronę zaprojektowanej
przeze mnie witryny internetowej o nazwie Decontrol, którą przygotowałem właśnie z
zastosowaniem omawianej techniki:

Pierwszym etapem w planowaniu witryny Decontrol było zastanowienie się nad ogólnym
wyglądem głównej strony. Poprzednio witryna ta umieszczona była w całości w jednym
wyskakującym okienku, lecz ja nie chciałem powtarzać już tego formatu. Zależało mi, aby
wstępny wygląd witryny był odrobinę mniej irytujący — aby ulżyć użytkownikowi. Chciałem
również, aby strona maksymalnie wypełniła okno przeglądarki użytkownika. Oczywistym
wyborem było zastosowanie Flasha w standardowym oknie przeglądarki (nie wyskakującym)
i osadzenie go na 100% rozmiaru okna. Zanim nawet zabrałem się za projektowanie tej
strony, przygotowałem zestaw ramek i roboczy plik Flasha, którego następnie osadziłem w
górnej ramce. W ten sposób miałem już gotowe ogólne rozmieszczenie strony i mogłem
przejść do projektowania w obrębie określonych przeze mnie parametrów. Nie jest to tak
proste, jak może się wydawać, gdyż wystarczy, aby użytkownik zmienił rozmiar przeglądarki
i cała moja praca pójdzie na marne.

Rozdział 21-551
Proporcje filmu i okna
Gdyby filmy Flasha zawsze byłby oglądane w oknach przeglądarek wyświetlonych na całym
ekranie, kwestia właściwych proporcji byłaby prosta: wystarczyłoby skonstruować je z 4:3
współczynnika kształtu obrazu i umożliwić im dopasowanie się do dowolnego monitora, na
jakim będą wyświetlane. Niestety najczęściej dzieje się tak, że większość użytkowników
ogląda filmy nie na zmaksymalizowanym oknie przeglądarki, a to zmienia nie tylko rozmiar
widocznego obszaru oglądania, lecz również jego kształt (z poziomego prostokąta w kwadrat,
a nawet pionowy prostokąt). Jest również kolejny problem: jeśli użytkownik zmieni rozmiar
okna przeglądarki w trakcie odtwarzania filmu, wówczas film zeskaluje się i zmieni swoją
pozycję aby dopasować się do nowego rozmiaru i proporcji okna. Jako projektant, posiadasz
niewiele informacji o proporcjach okna przeglądarki, w jakim będzie oglądany twój film.
Oznacza to, że sprawa proporcji filmu należy do rozważań projektanckich a nie technicznych.
Takie czynniki jak kompozycja strony, czytelność i styl należy rozpatrzyć podczas określania
poprawnych proporcji sceny danego filmu. Z dogłębnym zrozumieniem mechanizmu
skalowania filmów i reakcji Flasha na różne sytuacje będziesz mógł podjąć mądre decyzje,
które również spełnią te kryteria projektu.
Gdy Flash wyświetla film, zawsze skaluje go w taki sposób, aby cała jego zawartość w
obrębie sceny była widoczna. Jeśli film jest osadzony w 100% szerokości i wysokości,
zostanie on zeskalowany w jeden z trzech sposobów — EXACTFIT (dopasowany),
NOBORDER (bez obramowania) i SHOWALL (pokaż wszystko) — w zależności od wybranej
opcji w parametrze SCALE znaczników <EMBED> i <OBJECT>, na przykład:

SCALE="showall" dla <EMBED>, lub:

<PARAM NAME="SCALE" VALUE="showall"> dla >OBJECT>

Jeśli nie zdefiniujesz wartość parametru SCALE w kodzie, zostanie on ustawiony na


domyślna wartość, czyli SHOWALL. Spowoduje to zachowanie proporcji filmu i dopasowanie
go do największego możliwego rozmiaru bez przycinania. Na przykład, jeśli rozmiar twojego
filmu wynosi 300 na 150 pikseli i chcesz wyświetlić go w oknie o rozmiarze 600 na 400
pikseli, wówczas Flash zeskaluje film do rozmiaru 600×300 pozostawiając 50 pikseli
brakujących u góry i u dołu strony. Jeśli wybierzesz opcję EXACTFIT, Flash rozciągnie film,
aby jego wysokość i szerokość dopasowała się do wymiarów okna, zniekształcając film, co
przeważnie nie jest pożądanym efektem. Po wybraniu opcji NOBORDER, Flash wypełni całe
okno przeglądarki filmem, przycinając go w razie potrzeby, aby go nie rozciągać. Taki układ
również jest daleki od ideału, ponieważ, zważając na to, jak trudno zaplanować dokładnie, w
jaki sposób film zostanie przycięty, metoda ta uniemożliwia poprawne rozmieszczenie ważnej
zawartości i zagwarantowanie, że będzie ona widoczna.
Opcja SHOWALL jako jedyna wyświetla cały film w jego poprawnych proporcjach i zatem
jest to preferowana metoda. Pod względem planowania filmu Flasha oznacza to, że należy
określić, co użytkownicy mogą oglądać w „martwym obszarze” poza krawędziami filmu:

Rozdział 21-552
Można sobie poradzić z martwym obszarem na kilka sposobów. Przy osadzaniu filmu na
100% rozmiaru okna, wszystkie elementy filmu, które znajdują się poza krawędziami sceny
będą widoczne, jeśli znajdzie się na stronie wystarczająco dużo miejsca. Jest to jeden z
najbardziej użytecznych aspektów osadzania w 100% rozmiaru, gdyż umożliwia on
projektantowi kontrolowanie widoku filmu w oknie prawie każdej przeglądarki.
Załóżmy, na przykład, że chcemy utworzyć film z rozmiarze sceny 600×300. Jeśli film ten ma
być wyświetlony w oknie z widocznym obszarem oglądania o rozmiarze 600×300, wówczas
użytkownik zobaczy dokładnie to, co znajduje się na scenie i nic ponadto. Jeśli film zostanie
wyświetlony w oknie z widocznym obszarem oglądania o rozmiarze 600×400, użytkownik
zobaczy dodatkowe 50 pikseli nad i pod sceną. Na szczęście, we Flashu można umieszczać
grafikę poza sceną, zatem możesz dokładnie zaplanować, w jaki sposób wprowadzisz te 50
pikseli do swojej strategii projektu. Najprostszym na to sposobem jest rozszerzenie kolorów
tła filmu poza scenę:

OVERFLOW ART
(WYPŁYWAJĄCE
ELEMENTY)

Rozdział 21-553
Inną metodą wykorzystującą tą właściwość „przepływania” jest utworzenie maski wokół
obszaru filmu, który ma być widoczny dla użytkowników. Zastosowanie maski umożliwia
ukrycie nierównych krawędzi animacji lub obszarów poza sceną, których nie chcesz, aby były
widoczne po osadzeniu filmu. Obejmuje to takie elementy jak animacje rozpoczynające się
poza scenę, czy klipy filmowe, które zastosujesz lub powielisz później. Maska ta jest po
prostu czarnym (lub białym, czy też innego koloru) obramowaniem wokół krawędzi filmu, na
umieszczonym najwyższej warstwie i przechodzącym przez wszystkie ujęcia. Oznacza to, że
wszystko, co użytkownik zobaczy na stronie z dodatkową wolną przestrzenią, to czarna
ramka. Nadal możesz umieścić obrazki poza krawędziami strony, lecz efekt wizualny będzie
inny:

Jest również możliwe wypełnienie martwego obszaru obrazkami z tła. Uważaj jednak podczas
stosowania tej metody, gdyż obrazek tła czasami bardzo trudno jest wyrównać poprawnie z
filmem Flasha, zwłaszcza na różnych przeglądarkach i platformach. Ponadto, nie daje to
większej korzyści (przynajmniej na pełnym ekranie) niż umieszczenie dodatkowych

Rozdział 21-554
elementów w samym filmie. Zatem, ogólna reguła jest taka, że w pełnoekranowych filmach
Flasha lepiej użyć płaskich kolorowych masek niż obrazków tła.
Podczas planowania rozmiaru sceny pełnoekranowego filmu warto rozpatrzyć jednakże jedną
kwestię, w zależności od sposobu, w jaki chcesz aby film był wyświetlany dla użytkowników.
Poprzez eksperymentowanie z różnymi proporcjami sceny i różnymi projektami, możesz
dosyć precyzyjnie kontrolować, co użytkownicy będą widzieć w swoich przeglądarkach, bez
względu na rozmiar poszczególnych okien przeglądarek. Najlepszym sposobem na
zrozumienie działania tego procesu jest utworzenie filmu i poeksperymentowanie z jego
rozmiarem (poprzez zdefiniowanie parametrów rozmiaru), aby przekonać się, jak będzie
wyglądać w oknach o różnych rozmiarach. Należy pamiętać, że dopóki nie wybierzesz dla
parametru SCALE wartości NOBORDERS, cała zawartość sceny będzie widoczna w oknie
przeglądarki, lecz widoczność zawartości poza sceną zależy wyłącznie od użytkownika.
Dla zilustrowania omawianych sytuacji zastosuj przykładowy kod przedstawiony powyżej do
utworzenia zestawu ramek zawierających pełnoekranowe filmy Flasha. Następnie utwórz film
Flasha, na którym widoczne będą krawędzie sceny. Spróbuj zmienić wysokość i szerokość
sceny i obejrzyj film (w twoim zestawie ramek) w przeglądarce. Zwróć uwagę, w jaki sposób
zmiana proporcji sceny wpłynie na ilość zawartości widocznej poza krawędziami sceny.
Ponadto, spróbuj również zmodyfikować rozmiar i kształt okna przeglądarki i zauważ, w jaki
sposób te zmiany wpływają na wygląd filmu na scenie. Poniżej przedstawiliśmy przykład z
zastosowaniem wspomnianej już witryny internetowej Decontrol:

Nie byłem pewien właściwych proporcji sceny dla głównej strony witryny Decontrol dopóki
po zakończeniu projektu nie obejrzałem strony w różnych przeglądarkach i w oknach o
różnych wymiarach. Chciałem, aby strona była tak duża jak to tylko możliwe, lecz co
ważniejsze, z powodu poziomego układu projektu, zależało mi, aby wypełniała ekran
poziomo. Aby uzyskać taki efekt wybrałem rozmiar strony, który będzie się dopasowywać do

Rozdział 21-555
poziomego współczynnika kształtu ekranu we wszystkich oprócz najszerszego z okien,
pozostawiając w większości przypadków pionowa przestrzeń. Pionowy obszar wypełniłem
obrazkami wewnątrz filmu Flasha, poza krawędziami sceny (głownie dużym szarym polem).
Czasami, z jakiegoś powodu, musisz utworzyć stronę (lub całą witrynę internetową) we
Flashu, której się nie da wyświetlać w pełnym oknie. Może twój film zawiera zbyt
skomplikowaną animację, która nie będzie dobrze działać w oknie o dużym rozmiarze, lub ze
względów estetycznych, będziesz nalegać, aby użytkownicy oglądali film w oknie o
określonym rozmiarze, lub w zależności od całkowitego rozmiaru okna. W takich
przypadkach masz do dyspozycji dwie opcje: osadzanie procentowe lub osadzanie o stałym
rozmiarze.

Osadzanie procentowe i o stałym rozmiarze


W przypadku osadzania procentowego, wybierasz, jaką część procentową całkowitego
rozmiaru okna ma zajmować film. Podczas gdy film osadzony w 100% będzie „wylewać” się
poza krawędzie okna, film w 90% zawsze będzie obramowany krawędzią równą 10%
całkowitego rozmiaru okna. Warto zauważyć, że sposób zachowania proporcji przez film jest
taki sam dla osadzania procentowego jak i osadzania pełnoekranowego — czyli, film zostanie
zeskalowany aby dopasować się do mniejszych wymiarów, nie dopuszczając do przycinania.
Osadzanie o stałym rozmiarze stanowi najprostszy sposób osadzania filmu. Jeśli określisz
rozmiar filmu na 600×400 pikseli, dokładnie w takim rozmiarze zostanie wyświetlone na
stronie, bez względu na rozmiar okna, jak również rozmiar sceny zastosowany podczas
tworzenia filmu. Ponieważ film taki nie może się zeskalować, działa on wówczas jako
wbudowany obrazek. Jeśli określony przez ciebie rozmiar jest większy od wymiarów okna,
okno będzie można przewijać jak w przypadku każdego zwykłego obrazka.
Problem związany z osadzaniem procentowym i o stałym rozmiarze jest taki, że wówczas
użytkownik nie będzie widzieć elementów umieszczonych poza krawędziami sceny. Trzeba
więc wówczas trochę bardziej wysilić się i zagospodarować obszar na stronie nie zajmowany
przez film — można na nim umieścić obrazki tła lub proste kolory tła. W zależności sposobu
umieszczenia filmu (z zastosowaniem języka HTML), możesz spędzić trochę czasu na
wyrównywaniu z nim obrazka tła. Formatowanie HTML w celu dokładnego wyrównania
filmu z obrazkiem tła nie jest oczywiście niemożliwe (prawdę mówiąc, technika ta stosowana
jest dosyć często), lecz może być trudne podczas przygotowania filmu na różne przeglądarki i
różne platformy. Przy formatowaniu HTML nie można ani wyśrodkować filmu i wyrównać
go poziomo z obrazkiem tła (ponieważ obrazki tła zawsze zaczynają się po lewej stronie
okna, nie istnieje żadna metoda na wyśrodkowanie obrazka w taki sposób, w jaki
wyśrodkowuje się film). Poniżej przedstawiliśmy przykład strony Decontrol procentowo
osadzonej w przeglądarce:

Rozdział 21-556
PERCENTAGE
EMBEDDING
(OSADZANIE
PROCENTOWE)

Jedyną różnicą w kodzie dla tej metody jest zastosowanie nowego znacznika <CENTER>,
który nakazuje przeglądarce wyśrodkowanie filmu na stronie, natomiast parametry HEIGHT i
WIDTH zostały zmienione aby odzwierciedlić rozmiar procentowy osadzonego filmu. W tym
przypadku ustawiliśmy je na 90%:
<BODY BGCOLOR="#CCFF00" MARGINHEIGHT="0"
MARGINWIDTH="0" TOPMARGIN="0"
LEFTMARGIN="0">

<CENTER>

<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
WIDTH="90%"
HEIGHT="90%"
CODEBASE="http://active.macromedia.com/flash5/cabs/swflash.cab#version=
5,0,0,0">

<PARAM NAME="MOVIE" VALUE="mainpage.swf">


<PARAM NAME="PLAY" VALUE="true">
<PARAM NAME="LOOP" VALUE="true">
<PARAM NAME="QUALITY" VALUE="high">
<PARAM NAME="SCALE" VALUE="showall"

<EMBED SRC="mainpage.swf"
WIDTH="90%"
HEIGHT="90%"
PLAY="true"
LOOP="true"
QUALITY="best"
SCALE="showall"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?
P1_Prod_Version=ShockwaveFlash">

</EMBED>
</OBJECT>

</CENTER>

Dzięki temu kodowi HTML uzyskamy wyśrodkowany osadzony film otoczony zieloną ramą.
Ten efekt jest bez zarzutu, jeśli podoba ci się rama, lecz jeśli chcesz wyświetlać swoje filmy
na 100% powierzchni na jeszcze mniejszym ekranie, lepiej przenieść się na ramki.

Osadzanie w ramkach
Jest możliwe wykorzystanie takich zalet osadzania przy 100%,jak na przykład zdolność do
oglądania elementów znajdujących się poza krawędziami sceny przy jednoczesnym nie

Rozdział 21-557
wykorzystaniu pełnego rozmiaru. Taki efekt uzyskuje się poprzez zastosowanie ramek.
Zestaw ramek można zaprojektować w taki sposób, aby zawierał wartość procentową
całkowitego rozmiaru okna, lub określony rozmiar, lecz sam film będzie osadzony w ramce w
100%. Na przykład, jeśli chcesz, aby film Flasha zajmował 40% całkowitej wysokości okna
przeglądarki, uzyskasz taki efekt poprzez zastosowanie poniższego zestawu ramek:
<FRAMESET ROWS="40%,60%" MARGINWIDTH="0"
MARGINHEIGHT="0" FRAMESPACING="0"
BORDER="0" FRAMEBORDER="NO">

<FRAME NAME="flash" SRC="flash.html"


SCROLLING="NO" MARGINWIDTH="0"
MARGINHEIGHT="0" FRAMESPACING="0"
BORDER="0" FRAMEBORDER="NO">

<FRAME NAME="bottom" SRC="bottom.html"


SCROLLING="auto" MARGINWIDTH="0"
MARGINHEIGHT="0" FRAMESPACING="0"
BORDER="0" FRAMEBORDER="NO">

</FRAMESET>

Zauważ, że zestaw ramek podzielony jest teraz na dwa rzędy — jeden rząd zajmuje 40%
całkowitej wysokości okna, a drugi 60%.

W pliku flash.html osadziłbyś film Flasha w 100%, co obecnie odpowiada 100% rozmiaru
ramki, a nie 100% całkowitego rozmiaru okna.
W przypadku pod-stron witryny Decontrol, początkowo zaprojektowałem je w taki sposób, że
umieszczałem nagłówek strony w oddzielnej ramce, a zawartość w ramce u dołu. Takie
rozwiązanie ułatwiało mi aktualizację ramki z zawartością HTML. Ponadto pozwalało ono
również na przewijanie ramki za pomocą zwyczajnych pasków przewijania przeglądarki. Na
koniec jednak postanowiłem zaprojektować pod-strony jako część tego samego filmu Flasha,
w którym znajduje się również główna strona. W ten sposób informacja o wizycie
użytkownika przenosiłaby się pomiędzy stronami wraz z odwiedzającymi, dając mi kontrolę
nad witryną i możliwość przyciemnienia elementów menu, które już zwiedzili.
Za pomocą ramek prawie zawsze możesz zachować 100% osadzanie filmów, zmuszając je do
zeskalowania się do rozmiaru procentowego bądź do stałych wymiarów. Z tego powodu
ramki często okazują się lepszym rozwiązaniem niż osadzanie procentowe, gdyż nie
ograniczają elastyczności projektu. Przy wyborze ramek należy jednak wziąć pod uwagę
pewne problemy z nimi związane. Zestaw ramek ładuje się odrobinę wolniej od standardowej
strony HTML, ponieważ w rzeczywistości pobierane są trzy lub więcej stron do wyświetlenia
tej samej informacji. Zastosowanie zestawu ramek utrudnia również tworzenie zakładek na
danej stronie. Nie jest to niemożliwe, lecz trzeba w to włożyć więcej wysiłku. Ponadto, użycie

Rozdział 21-558
zestawu ramek zwiększa liczbę używanych plików, co może spowodować logiczny problem
na bardzo dużych witrynach. Na przykład, witryna zawierająca 1000 stron będzie
potrzebować 3000 plików HTML, jeśli została zaprojektowana z wykorzystaniem ramek. Z
czysto estetycznego punktu widzenia, ramki często okazują się najlepszym wyborem, a ich
wady bardzo łatwo można przezwyciężyć. Istnieje jednak jeszcze jedna metoda wyświetlania
zawartości — wyskakujące okienka.

Wyskakujące okienka
Wyskakujące okienka są popularnym elementem często pojawiającym się na wielu witrynach
internetowych. Poprzez zastosowanie język JavaScript, do wyświetlenia zawartości projektant
może otworzyć nowe okno o odpowiednim rozmiarze. Inne aspekty nowego okna, takie jak
pasek menu, pasek lokalizacji, pasek stanu czy nawet lokalizacja okna na ekranie
użytkownika również można zdefiniować w kodzie JavaScript. Biorąc pod uwagę poziom
kontroli, jaką ma projektant nad środowiskiem oglądania w przypadku wyskakujących
okienek, w wielu przypadkach mogą się one okazać bardzo atrakcyjną opcją.
Warto zauważyć, że wiele osób nieprzychylnie wyraża się o wyskakujących okienkach. Uważają, że nowe
okno otwierające się przez starym jest drażniące i dezorientujące. Decyzja o zastosowaniu wyskakujących
okienek powinna zostać podjęta przez projektanta i oparta na oczekiwaniach publiczności. Z wyskakującymi
okienkami związane są również pewne zagadnienia kompatybilności z określonymi przeglądarkami i
kombinacjami platform, więc jak zawsze, konieczne jest dogłębne testowanie.

Poniżej przedstawiamy niewielki fragment kodu JavaScript otwierającego plik


popupwindow.html w nowym wyskakującym okienku:
<HTML>
<HEAD>

<TITLE>decon</TITLE>

<SCRIPT LANGUAGUE="JavaScript">

<!—Niedostępny dla starszych przeglądarek

function OpenPopup()
{
window.open('popupwindow.html','window','toolbar=0,location=0,
→directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=300');
}

//-->

</SCRIPT>
</HEAD>

<BODY TEXT="#FFFFFF" LINK="#EE7C0B"


VLINK="#7D0202" ALINK="#7D0202"
BGCOLOR="#000000" TOPMAGRIN="0">

<CENTER>
<!—A tutaj umieszczamy zawartość strony -->
</CENTER>

</BODY>
</HTML>

Jest to kod dla oryginalnej strony — dla tej, z której otworzy się wyskakujące okienko.
Poprzez umieszczenie kodu JavaScript w obrębie znaczników komentarza w języku HTML
(<!-- -- >) zapewniamy, że starcze przeglądarki nie rozumiejące języka JavaScript
zignorują go, podczas gdy większość przeglądarek rozumiejących ten kod otworzy

Rozdział 21-559
wyskakujące okienko. W zależności od tego, czy otwierasz okno z filmu Flasha czy tez
dokumentu HTML, kod łączący wyglądałby tak:
getURL("javascript:OpenPopup()");

...dla otwarcia okna z filmu Flasha lub tak:


<A HREF="javascript:OpenPopup()">

...dla otwarcia okna ze strony HTML. Możliwe jest również otwarcie okna automatycznie
zaraz po wejściu użytkownika na daną stronę. Można tego dokonać poprzez umieszczenie
polecenia OpenPopup w znaczniku ONLOAD umieszczonym w znaczniku BODY dla strony.
Kod wyglądałby tak:
<BODY ONLOAD="javascript:OpenPopup()">

Pod względem osadzania, zastosowanie Flasha w wyskakujących okienkach jest o wiele


prostszym rozwiązaniem niż umieszczenie ich w standardowym oknie przeglądarki. W takim
przypadku znasz dokładny rozmiar wyskakującego okienka, ponieważ sam je otwierasz za
pomocą kodu JavaScript, dzięki czemu możesz z łatwością zaplanować i dopasować rozmiar
filmu Flasha. Poniżej przedstawiliśmy przykład witryny internetowej Decontrol ilustrujący
zastosowanie wyskakującego okienka do wyświetlenia informacji:

Na witrynie Decontrol zastosowałem wyskakujące okienka do wyświetlenia całej jej bieżącej


zawartości. Okazało się to bardzo praktycznym rozwiązaniem, ponieważ większość
zawartości pochodzi od zewnętrznych współpracowników. Możemy powiedzieć im, że ich
pracę wyświetlimy w oknie o dowolnym rozmiarze i że okno otworzy się bezpośrednio z
głównego okna witryny. Wyskakujące okienko tworzy pół-autonomiczne środowisko, w
którym artyści mogą realizować swoje projekty z zachowaniem wskazówek dla użytkownika,
że nadal się znajduje na witrynie Decontrol. Jest to również sposób na natychmiastowe
poinformowanie użytkownika, jak się nazywa dane dzieło i pod jakim adresem się ono
znajduje.

Rozdział 21-560
Jeden film kontra kilka filmów
Kolejna decyzja do podjęcia podczas projektowani witryny Flasha dotyczy liczby filmów,
jakie zostaną zastosowane. Czy będzie to jeden duży film dla całej witryny, czy też kilka
filmów dla różnych sekcji witryny. Jak zwykle każda z opcji posiada wady i zalety. Przed
przystąpieniem do projektowania należy rozpatrzyć wszystkie aspekty, gdyż po rozpoczęciu
pracy trudno jest przekształcić witrynę z jednego filmu w kilka różnych. Omówmy więc
każdą z opcji bardziej szczegółowo.

Jeden film
Zastosowanie jednego filmu Flasha dla całej witryny może być nieporęczne. Ponieważ
rozmiar pliku prawdopodobnie będzie dosyć duży, na komputerach użytkowników nie
posiadających wystarczająco dużo pamięci RAM, witryna będzie działać bardzo powoli.
Ponadto, praca całego zespołu nad jednym plikiem również jest stosunkowo trudna. Na
przykład, jeśli pracujesz nad główną stroną danej witryny, a inny projektant pracuje nad
stroną sekcji, będziecie musieli najpierw pracować na oddzielnych plikach, a następnie
połączyć je w jednym głównym pliku poprzez skopiowanie ujęć czy symboli. Zadanie takie
jest już teraz o wiele łatwiejsze do wykonania dzięki nowej właściwości współdzielonej
biblioteki dostępnej we Flashu 5, lecz taka metoda współpracy nadal pozostaje daleka od
ideału i tworzy kilka problemów. Zauważ, że są to zagadnienia skierowane do projektanta, a
nie do samego użytkownika. W idealnej sytuacji projekt całej witryny powinien całkowicie
koncentrować się na samym użytkowniku, lecz w praktyce, takie zagadnienia jak przepływ
pracy, czy zarządzanie plikami, stają się niezwykle istotne.
Istnieje jednak kilka bardzo dobrych powodów, dla których warto poradzić sobie ze
wspomnianymi utrudnieniami i zaprojektować jeden film dla całej witryny. Jeśli witryna
zawiera się w jednym filmie, możesz kontrolować sposób ładowania go do komputera
użytkownika. Możliwość ta jest niezwykle cenna zwłaszcza wówczas, gdy twoi potencjalni
użytkownicy dysponują wolnymi połączeniami. Możesz wówczas wyświetlić interesujący
ekran wstępnego ładowania podczas pobierania głównej strony, wyświetlić główną stronę w
trakcie ładowania strony sekcji, i tak dalej.
Kolejną ważną zaletą stosowanie jednego filmu dla całej witryny jest możliwość tworzenia
przejść pomiędzy sekcjami i pod-sekcjami. Ponieważ nie istnieje żadna rzeczywista różnica
pomiędzy sekcjami, możesz zaprojektować animacje przenoszące użytkownika z jednej
strony na inną. Idąc o krok dalej, umieszczenie całej zawartości witryny w jednym filmie
pozwala na zrezygnowanie z tradycyjnej struktury witryny (czyli główna strona, sekcje, pod-
sekcje i tak dalej) na rzecz bardziej płynnej, nieliniowej konstrukcji. Części zawartości
otwierające się w różnych obszarach strony, pływające okna, trwałe narzędzia do obsługi
zawartości, etc. — oto możliwości projektu witryny internetowej umieszczonej w jednym
filmie.
Nie oznacza to jednak, że nie można stworzyć równie atrakcyjnej strony w oparciu o kilka
filmów. Owszem, jest to o wiele łatwiejsze z jednym filmem, lecz za chwilę omówimy, w jaki
sposób można uzyskać takie same efekty na witrynie internetowej złożonej z kilku filmów.

Kilka filmów
Podział witryny na kilka mniejszych filmów w oparciu o sekcje charakteryzuje się innymi
zaletami. Taka konstrukcja witryny ułatwia pracę kilku osób nad jednym projektem. Na
przykład, jeden projektant tworzy główną stronę w oddzielnym pliku, podczas gdy drugi
zajmuje się strona sekcyjną we własnym pliku — tych plików nie trzeba fizycznie łączyć w

Rozdział 21-561
jeden, chociaż, będą, oczywiście, musiały współpracować ze sobą podczas oglądania witryny.
Ponadto niewielki rozmiar plików nie obciąża tak znacznie procesorów, jak pojedynczy plik.
Wybór kilku filmów związany jest z podjęciem jeszcze kilku innych decyzji. Czy umieścisz
każdy film na oddzielnej stronie HTML, czy też osadzisz pierwszy film i będziesz
wywoływać kolejne do tej samej strony z zastosowaniem polecenia loadMovie? Jeśli
wszystkie filmu w witrynie będą osadzone w pełnym oknie, wówczas lepiej jest umieszczać
nowe filmy na tej samej stronie HTML. Dzięki temu oszczędzasz sobie tworzenie kilku
identycznych stron HTML jak również eliminujesz efekt „czkawki” pojawiający się podczas
przechodzenia do nowej strony. Pojawia się w łączących filmach — kolor tła strony zawsze
pozostaje na ekranie zanim załadowana zostanie nowa zawartość.
Jeśli musisz osadzić kilka filmów na różne sposoby, lub jeśli filmy posiadają różne rozmiary,
wówczas jedynym wyborem pozostaje ci użycie kilku stron HTML. Nie jest to bardzo zły
pomysł, ponieważ na oddzielnej stronie HTML z łatwością można utworzyć zakładki, czy też
wysłać z niej e-maila. Ponadto na oddzielnych stronach HTML zachowują swoją
funkcjonalność przyciski Back i Forward w przeglądarce użytkownika. Te dwie cechy bardzo
trudno zachować, gdy wszystkie filmy Flasha umieszczone są na jednej stronie HTML.
Chociaż każda z tych metod posiada swoje zalety i wady, masz do wyboru również sposób, na
połączenie cech charakterystycznych obydwu opcji.

Filmy stosowe
Możliwe jest utworzenie hybrydy łączącej obydwie omówione metody poprzez zastosowanie
kilku filmów „stosowych” — czyli takich, z których jeden ładowany jest obok drugiego.
Metody tej nie należy mylić z ładowaniem jednego filmu w miejsce innego, o czym
mówiliśmy w poprzedniej sekcji. Zazwyczaj, główny film osadzany jest najpierw na stronie, a
następnie ładuje poszczególne filmy witryny na warstwy umieszczone nad nim. Filmy te
można najpierw pobrać, po czym zastosować dopiero wtedy, kiedy będzie to konieczne. W
ten sposób możesz załadować filmy wtedy, gdy są potrzebne, wszystkie jednocześnie, a nawet
jako połączenie obydwu tych opcji. Na przykład, jeśli znajdujesz się na głównej stronie,
możesz załadować wszystkie strony sekcyjne (każda z nich umieszczona w innym filmie) na
oddzielne warstwy, aby były już gotowe, gdy użytkownik zechce przejść na którąś z nich.
W przypadku stosowych filmów można również tworzyć warstwy obecne w trakcie całej
wizyty zwiedzającego. Filmy załadowane na warstwy pozostają przezroczyste w pustych
miejscach na scenie, dzięki czemu istnieje możliwość oglądania dwóch lub więcej filmów w
tym samym czasie. Jeśli na przykład na poziomie 1 masz film przedstawiający boisko do
koszykówki, a na drugim film ze skaczącą piłką, użytkownik zobaczy piłkę skaczącą na
boisku do koszykówki. Filmy układane są w stos sekwencyjnie, w oparciu o numer ich
warstwy: wyższe numery znajdują się u góry stosu, niższe u dołu. Warto również pamiętać, że
stosowe filmy dziedziczą właściwości sceny filmu z najniższego poziomu, takie jak kolor tła,
prędkość odtwarzania i wymiary sceny.
Ponieważ nie wszystkie sekcje czy obszary witryny obecne są w tym samym czasie, nawet
jeśli znajdują się one w różnych filmach i na różnych poziomach, projektant potrafi utworzyć
zaplanowane przejścia pomiędzy sekcjami czy filmami. Jeśli witryna została odpowiednio
zaprojektowana, odtwarzanie filmów stosowych będzie działać równie płynnie jak
odtwarzanie jednego filmu. Filmy stosowe posiadają wszystkie zalety pojedynczego filmu,
bez niedogodności związanych z użyciem jednego dużego pliku. Poniżej przedstawiliśmy
stronę z witryny Decontrol, na której umieściliśmy stos czterech filmów rozmieszczonych na
oddzielnych warstwach i połączonych w jedną kompozycję:

Rozdział 21-562
Do uzyskania tego efektu zastosowałem kilka oddzielnych filmów umieszczonych jeden na
drugim. Wybór takiej metody został spowodowany tym, że programista pracował nad
funkcjonalnością strony w tym samym czasie, gdy ja zajmowałem się projektowaniem.
Poprzez zastosowanie oddzielnych filmów on mógł programować i testować swoją pracę
(czyli kod umieszczony u dołu filmu Controller) podczas gdy ja projektowałem i testowałem
stronę. Gdyby witryna składałaby się tylko z jednego pliku, wówczas jeden z nas musiałby
skończyć swoją część, aby drugi mógł zacząć pracę, co trwałoby dwa razy dłużej.
Po dokonaniu wszystkich decyzji i współpracy z najlepszym zespołem w tworzeniu
doskonałej witryny internetowej Flasha, czekasz zapewne teraz na niezliczone miliony już
nadchodzących gości. Lecz z jakiegoś powodu jest niepokojąco cicho. Aby zapewnić, że
twoją witrynę zwiedzi jak największa liczba ludzi, warto czasami umieścić w Sieci również
wersję witryny dla tych, którzy nie używają Flasha.

Wykrywanie Flasha i witryny internetowe Flasha


Chociaż większość internautów surfuje po Sieci z zainstalowaną wtyczką Flasha, nadal są i
tacy, którzy jej nie posiadają. Dla nich możesz dołączyć do witryny schemat wykrywania,
który określi, czy dany użytkownika posiada odpowiedni plug-in (a nawet określoną wersję
plug-inu, jeśli tego sobie życzysz) i odeśle go na alternatywną stronę bez zawartości Flasha,
jeśli takowej wtyczki nie ma zainstalowanej. Warto również umożliwić użytkownikom
dokonanie wyboru, czy chcą oglądać witryną Flasha czy też płaską witrynę. Zastosowanie
systemu wykrywania bądź pozostawienie wyboru użytkownikom zależy od ciebie, lecz na
twoją decyzję powinny wpłynąć takie czynniki jak spodziewana publiczność i funkcja
witryny. W niektórych przypadkach, zwłaszcza wówczas, gdy zawartość musi być
wyświetlona z zastosowaniem Flasha, płaska strona może zawierać tylko wiadomość
informującą użytkownika, że nie posiada potrzebnej wtyczki i że jeśli chce obejrzeć daną
stronę powinien plug-in pobrać. Warto umieścić na takiej stronie łącze do witryny firmy
Macromedia (skąd użytkownik może pobrać Flasha) będzie dobrym pomysłem.
Pozostawiając wybór użytkownikom, wszyscy zostają poinformowani i nikomu nie wyświetli
się komunikat o błędzie spowodowanym brakiem odpowiedniego plug-inu lub dwuznacznie
wyglądająca pusta strona. Warto zauważyć, że istnieje również możliwość wygenerowania

Rozdział 21-563
sekwencji obrazków z Flasha w miejsce filmu. Podczas gdy przy nieprawidłowym
zastosowaniu tej techniki uzyska się pokaźną liczbę plików, można ją wykorzystać do
tworzenia odpowiedników prostych animacji, takich jak logo, w formie obrazków GIF.
Najprostszą metodą na wykrycie Flasha jest zastosowanie w tym celu samego Flasha.
Tworzysz stronę z podstawowym filmem Flasha zawierającym tylko polecenie getURL do
twojej głównej witryny Flasha. Reszta strony będzie wersją HTML oryginału. W ten sposób,
jeśli na twoim komputerze zainstalowany jest Flash, automatycznie zostaniesz przeniesiony
do witryny z Flashem, a jeśli nie, pozostaniesz na podstawowej stronie. Ta metoda jest
niezawodna i bardzo prosta do zastosowania, lecz użytkownikowi może się wydać irytująca, z
powodu szybkiego przeskakiwania pomiędzy dwoma stronami przy wejściu na witrynę. Z
tego powodu może warto zainwestować w rozwiązanie oparte na kodzie JavaScript.
Przy zastosowaniu schematu wykrywania w języku JavaScript użytkownik często nawet nie
wie, że został „wykryty”, ponieważ proces wykrywania przebiega niezwykle szybko i
płynnie. Niestety, kod JavaScript dla precyzyjnego i niezawodnego wykrycia wtyczki Flasha
z czasem staje się coraz bardziej skomplikowany i zawiły wraz z pojawieniem się nowej
przeglądarki czy nowej wersji plug-ina. Nowe skrypty wykrywające pisane są prawie
codziennie w wielu większych studiach projektanckich i z tego powodu nie możemy
przedstawić tu wiarygodnych przykładów. Kilka stosunkowo stabilnych darmowych kodów
wykrywania można znaleźć na kilku witrynach internetowych — najlepiej zacząć od witryny
Macromedii.

Filmy Flasha można stosować na stronach dokładnie tak samo, jak statyczne obrazki, lecz
oferują one o wiele więcej interaktywności i możliwości projektanckich. W wielu
przypadkach pliki Flasha często okazują się mniejsze od ich odpowiedników w formatach
GIF czy JPEG. Flash, zatem, pod wieloma względami przewyższa statyczne obrazki, przy
prawie zupełnym braku wad.

Flash jako obrazek wbudowany


W wielu sytuacjach na witrynie konieczne jest zastosowanie prostego, samodzielnego
obrazka. Często jednak miło widziana jest również dodatkowa animacja czy interakcja. W
takich przypadkach niewiele znalazłoby się powodów na nie zastosowanie filmu Flasha —
chociaż, ogólnie mówiąc, warto dodać na stronie automatyczne wykrywanie dla wtyczki
Flasha i w razie potrzeby wymianę filmu na obrazek. Dzięki tej metodzie witryna działa

Rozdział 21-564
płynnie, a użytkownicy nawet nie wiedzą, że cokolwiek zostało wykryte czy zamienione; po
prostu otrzymują odpowiednią dla nich zawartość.
Wadą tej techniki jest taka, że użytkownicy mogą nie wiedzieć, że mieliby dostęp do bogatszych doświadczeń,
gdyby posiadali wtyczkę. Z tego powodu, obrazki często oznaczane są wiadomością w stylu: „Widzisz
statyczny obrazek w miejscu, gdzie mógłbyś oglądać film Flasha. Proszę, załaduj wtyczkę”, z łączem do
odpowiedniej witryny, z której można pobrać plug-in.

Filmów Flasha użytych w ten sposób na stronie nie można skalować. Jedynym sposobem na
skalowanie filmu Flasha wraz z zawartością strony byłoby utworzenie tabeli HTML ze
skalowanymi komórkami i osadzenie Flasha w jednej z tych skalowalnych komórek.
Osadzenie filmu w ten sposób jest jednak zawodne, zatem, filmy zazwyczaj osadza się z
zachowaniem stałego rozmiaru. Poniżej przedstawiliśmy przykład statycznego obrazka Flasha
połączonego ze standardową stronę HTML w taki sam sposób, jakby zostały połączone
obrazki w formacie GIF lub JPEG:

Nagłówki Flasha
Nagłówki stron i menu świetnie funkcjonują jako filmy Flasha. Na najprostszym przykładzie,
zmapowany rysunek umieszczony na stronie zostałby przekształcony w film Flasha o
podobnej funkcjonalności (czyli połączenia z innymi stronami tej samej witryny), lecz z
bardziej dynamiczną prezentacją tej funkcjonalności. Dźwięki, bardziej efektowne animacje,
dopracowane przyciski typu rollover, łatwe programowanie i mniejsze rozmiary plików są
dobrymi powodami na zastosowanie Flasha w nagłówkach stron i menu zamiast prostych
obrazków. Gdy poprawnie wykonane, jest to jedno z bardziej niezawodnych zastosowań
Flasha.
Stronę, na której znajdą się menu czy nagłówki Flasha można tak zaprojektować, jakby wcale
Flasha na niej nie było. Kompozycja, hierarchia i struktura to podstawowe zagadnienia
związane z układem strony, bez względu na to, czy jej elementy zostaną, czy też nie,
wykonane we Flashu. Nagłówki i menu osadzane są dokładnie w taki sam sposób (stały
rozmiar, wyrównane za pomocą tabeli i tak dalej), jakby nie zostały utworzone we Flashu.

Zastosowanie ram dla nagłówków Flasha


Jeszcze lepszym sposobem na zastosowanie filmu Flasha jako nagłówka strony jest użycie
ramek. Wówczas strona zostaje podzielona na dwie ramki: górna zawiera film Flasha, a dolna
zawartość. Jeśli poprawnie zaprojektujesz witrynę, być może nigdy nie będziesz musiał
ponownie ładować górnej ramki. Po wejściu na witrynę, użytkownicy uzyskują dostęp do

Rozdział 21-565
nagłówków Flasha i zawartości. Po wybraniu pozycji menu z górnej ramki, zmieni się tylko
zawartość dolnej ramki. Film Flasha może odzwierciedlać bieżącą zawartość poprzez
zastosowanie takich technik jak przyciemnianie lub podświetlanie określonych pozycji menu.
Czasami zaprojektowanie witryny o tak prostej strukturze okazuje się dosyć trudne. Wiele
witryn internetowych, a zwłaszcza te z przeważającą zawartością w języku HTML, powinno
posiadać główną stronę o innym wyglądzie i stylu (a co za tym idzie, również innej
architekturze) niż strony sekcyjne. W takiej sytuacji pojawia się pewien problem. Czy należy
przygotować oddzielne strony sekcyjne i zastosowanie na nich oddzielne filmy jako nagłówki
— co oznacza dla użytkownika konieczność ładowania nowego filmu przy każdorazowej
zmianie strony, czy też wystarczy użyć jeden film nagłówka dla wszystkich stron sekcyjnych?
Jednym interesującym rozwiązaniem jest zastosowanie skalowalnej głównej strony
wykonanej we Flashu z jednym filmem nagłówkiem dla wszystkich pod-stron. W ten sposób
użytkownik miałby dostęp do atrakcyjnej pełnoekranowej strony głównej z łatwo
aktualizowanymi stronami z zawartością napisanymi w języku HTML. Aby cały taki schemat
mógł zadziałać, na całej witrynie należy zastosować jeden niezmienny nagłówek. Problem
leży w połączeniu głównej strony Flasha z pod-stronami opartymi na Flashu i HTML.
Wszystkie pod-strony będą zawierać ten sam film z informacjami menu dla wszystkich sekcji
witryny. Podczas przechodzenia użytkownika z głównej strony do którejś z pod-stron,
konieczne będzie przekazanie komunikatu do nagłówka Flasha informującego, jaką
informację z sekcji menu ma wyświetlić.
Problem komunikacji pomiędzy filmami Flasha i innych stronami można rozwiązać na kilka
sposobów. Każda opcja charakteryzuje się pewnymi subtelnościami, które wpływają na inne
aspekty funkcjonalności witryny. Wszystkie metody mają jednakowy cel: ustanowienie
komunikacji z filmu Flasha do strony, a następnie z tej strony do kolejnej, a z tej drugiej
strony do następnego filmu Flasha.
Jedna technika sprawdza, czy posiadasz stała ramkę, która będzie znajdować się na głównej
stronie i we wszystkich sekcjach. Za pomocą języka JavaScript informujesz tą ramkę, gdzie
masz zamiar przejść po opuszczeniu głównej strony. Po załadowaniu nagłówka sekcji zapyta
on stałą ramkę, którą sekcję ma wyświetlić (poprzez zebranie informacji zawartej w kodzie
JavaScript dla tej ramki), a następnie wyświetli odpowiednie informacje z danej sekcji.
Wybór sposobu przekazywania wiadomości do ramki z zawartością informującej ją, jaką
zawartość ma wyświetlić, należy do ciebie.
Nagłówek Flasha może przejść, na przykład, do sekcji About i poinformować ramkę
zawartości do załadowania odpowiedniej strony About, lub też możesz mieć kilka
oddzielnych stron z zestawem ramek dla każdej możliwej sekcyjnej strony. Można również
załadować stronę About, która następnie skomunikuje się z nagłówkiem i przekaże mu, jaką
sekcję ma wyświetlić. Kolejna metoda może polegać na wysłaniu informacji do skryptu CGI,
który wówczas pokieruje ramkę zawartości i nagłówek Flasha i upewni się, że wszyscy
znajdują się na tej samej stronie. Każda z tych opcji jest równie wartościowa, lecz należy
pamiętać, że na wybraną metodę będą również miały wpływ takie czynniki jak spodziewany
ruch w Sieci (włącznie z obciążeniem serwera), zawartość strony (proste lub złożone strony) i
możliwości programowania.

Rozdział 21-566
Rozdział 21-567
Przeprowadziliśmy na witrynie Decontrol kilka testów z wykonaniem pod-stron jako
nagłówka z ramką zawartości (jak wspomnieliśmy poprzednio). Chcieliśmy przekazywać
informacje z głównej strony do nagłówków pod-strony wykonanych we Flashu.
Wypróbowaliśmy wiele różnych metod do uzyskania tego celu i w końcu doszliśmy do
wniosku, że wszystkie one były zbyt skomplikowane w stosunku do efektu, jakiego
zamierzaliśmy uzyskać. W tym przypadku o wiele bardziej praktycznym okazało się
przekształcenie pod-stron do formatu Flasha i umieszczenie ich w tym samym filmie, co
główna strona.

Strony Flasha ze stronami HTML


Kolejny sposób połączenia Flasha i HTML można zastosować na stronach wykonanych
całkowicie we Flashu i innych stronach utworzonych w całości w HTML (lub na stronach
HTML z wbudowanymi filmami Flasha).
Sytuacja taka może mieć miejsce wówczas, gdy chcesz wykonać całą witrynę we Flashu (z
takich powodów jak skalowalność filmów Flasha czy możliwości animacyjnych), lecz musisz
mieć kilka stron w całości utworzonych w języku HTML (jak na przykład tablica ogłoszeń
zaprogramowana w języku CGI lub obszar zawartości oparty na bazie danych). Jeśli
zamierzasz zaprojektować cześć witryny wykonanej we Flashu jako jeden duży film (lub
kilka filmów stosowych), będziesz musiał utworzyć łącze z nowa stroną zawierającą tablicę
ogłoszeń. Problem pojawia się wówczas, gdy użytkownik próbuje powrócić z tablicy
ogłoszeń do części witryny wykonanej we Flashu: po każdym powrocie będzie on musiał
ponownie załadować cały film Flasha. To utrudnienie odczują przede wszystkim użytkownicy
z wolniejszym połączeniami.
A oto kilka możliwych rozwiązań:
• Otwórz tablicę ogłoszeń w wyskakującym okienku — powinno to dosyć dobrze
działać i w ten sposób oddzielisz tablicę ogłoszeń od filmu Flasha.
• Utwórz połączenie od filmu Flasha do zwykłej strony HTML z umieszczoną na niej
tablicą ogłoszeń — powinno dobrze działać, lecz użytkownik będzie zmuszony do
ponownego ładowania całej witryny po powrocie z tablicy ogłoszeń.
• Podziel witrynę na mniejsze filmy tak, aby każda strona znalazła się w oddzielnym
filmie — wówczas nowy film będzie ładowany po każdej zmianie strony łagodząc
stres związany z ładowaniem całej witryny na raz, lecz zakłócając płynne działanie
witryny poprzez wymuszenie długotrwałego procesu pobierania przy każdym
przejściu na inną stronę.

Żadne z tych rozwiązań nie jest idealne, lecz różne czynniki, takie jak spodziewany odbiór
strony przez użytkownika (czy wyskakujące okienka będą dla niego irytujące), spodziewana
publiczność (szybkie czy wolne połączenia) i projekt witryny (czy zostaną zastosowane
przejścia pomiędzy sekcjami, które stracą się po podzieleniu witryny na kilka filmów),
wpłyną na wybór najlepszej metody.

Rozdział 21-568
Zakończenie
Podczas opracowywania architektury witryny internetowej należy wziąć pod uwagę wiele
różnych czynników. A oto najważniejsze z nich:
• Zawartość przeznaczona do wyświetlenia na witrynie — na przykład, witrynę
informacyjną projektuje się w zupełnie inny sposób niż witrynę poświęconą wyłącznie
rozrywce. Podczas projektowania witryny rozrywkowej należy skoncentrować się na
utworzeniu jak najbogatszej i jak najatrakcyjniejszej zawartości z zastosowaniem
pełnoekranowych filmów Flasha i dużych strumieniowych animacji, podczas gdy przy
tworzeniu witryny informacyjnej skupisz się na łatwości w użyciu oraz szybkiej i
spójnej prezentacji informacji. Takie zagadnienia, jak częstotliwość aktualizacji
witryny również wpływają na planowanie architektury. Jeśli witryna będzie stale
aktualizowana, dobrym pomysłem jest utworzenie części aktualizowanych w języku
HTML, a menu i inne niezmienne elementy we Flashu.
• Spodziewana publiczność witryny — witryna skierowana do projektantów na
potrzeby Sieci zostanie najprawdopodobniej inaczej skonstruowana niż witryna
przeznaczona dla hobbystów. Można spokojnie założyć, że programiści będą
wyposażeni w najnowsze wtyczki i będą mniej wrogo nastawieni na takie elementy
jak wyskakujące okienka, natomiast od publiczności mniej lub bardziej obytej z
Siecią, nie można wymagać posiadania najnowszych technologii. Dla tej drugiej
grupy, zagadnienia takie jak prostota w użyciu, nie poleganie na technologiach
firmowych (takich jak Flash) mogą okazać się bardzo istotne.
• Wizualny wystrój witryny — wystrój witryny, zależy oczywiście od dwóch
poprzednich czynników, zatem powinien wywrzeć wpływ na decyzje
architektoniczne. W gruncie rzeczy, architektura witryny stanowi część wizualnego
wystroju, więc oddzielanie tych dwóch zagadnień jest wręcz niewłaściwe.

Określenie architektury witryny internetowej jest jedną z najważniejszych, choć często


pomijanych, decyzji, jakie projektant musi podjąć. Zbyt powszechną praktyką jest założenie,
że dna witryna zostanie wykonana w całości we Flashu i przystąpienie do pracy, gdyż w ten
sposób omijamy bardzo istotny etap planowania. Takie zagadnienia jak zastosowanie Flasha
samego czy w połączeniu z HTML, o jakim rozmiarze należy osadzać filmy Flasha, czy też
ile należy zastosować oddzielnych filmów, są kluczowymi zagadnieniami, które
bezwzględnie należy uwzględnić podczas planowania architektury atrakcyjnej witryny
internetowej. Nawet po powzięciu decyzji o odpowiedniej architekturze dla danej witryny,
wciąż pozostaje pytanie, w jaki sposób takie założenie zostanie zrealizowane. Możliwości są
prawie że nieograniczone i zwiększają się każdego dnia wraz z pojawieniem się nowych
technologii i aktualizacjami oprogramowania. Z przynamniej praktyczną znajomością

Rozdział 21-569
możliwości dostępnych dla Flasha będziesz mógł podejmować rozsądne decyzje, które
pomogą ci w udoskonaleniu twojej witryny internetowej.

Rozdział 21-570
Rozdział 22 Wstępne ładowanie i
strumieniowanie
We Flashu możemy tworzyć udoskonalone aplikacje internetowe poprzez zastosowanie
dźwięków, obrazków i animacji, lecz większość kompuetrów internautów po prostu nie mogą
pomieścić dużych plików, które stanowią nieodłączną część wspomnianych mediów. W
obecnym środowisku programowania na potrzeby Sieci, gdzie przeważnie starasz się
przyciągnąć i zatrzymać tylu zwiedzających jak tylko jest to możliwe, należy dołożyć
wszelkich starań, aby użytkownicy o mniejszych możliwościach nie zostali pominięci. Wręcz
przeciwnie, oni powinni pozostawać w centrum rozważań projektanckich.
Jak na razie, 50 kilobajtów jest głównym wskaźnikiem rozmiaru, na podstawie którego należy
oceniać ogólną dostępność aplikacji internetowych. jakikolwiek plik o rozmiarze większym
od podanego, wystawi na próbę cierpliwość i przepustowość wielu użytkowników. Długi czas
pobierania frustruje populację użytkowników modemów o niskiej i średniej przepustowości i
wielu z nich opuści witrynę (część z nich już nigdy do niej nie wróci) jeśli dojdą do wniosku,
że ładowanie trwa już zbyt długo. Z drugiej strony, projektantowi często trudno jest
zrezygnować ze zdumiewającego potencjału mediów technologii Flasha i skoncentrować się
na tworzeniu aplikacji nie przekraczających podanego progu. Na szczęście istnieją techniki,
jakie możemy zastosować od przekroczenia granic i tworzenia aplikacji o większych
rozmiarach, które bez problemu będzie mogła pobrać również publiczność dysponująca
mniejszą przepustowością.
Wstępne ładowanie i strumieniowanie oferują przeróżne sposoby na rozpowszechnianie
mediów z optymalnym wykorzystaniem zasobów internauty. Techniki te dokonują tego
poprzez tworzenie hierarchii ważności elementów wymaganych na każdym etapie wizyty
użytkownika i poprzez zapewnianie, że przepływ danych do komputera użytkownika będzie
odbywał się w tempie jego przechodzenia przez aplikację internetową. Dzięki wstępnemu
ładowaniu i strumieniowaniu próg 50 kilobajtów może posłużyć do pełnego wykorzystania
potężnych możliwości integracji mediów we Flashu, bez dręczenia użytkownika zbyt długim
czasem ładowania. Wstępne ładowanie i strumieniowanie nie są, jednak, panaceum na
tworzenie olbrzymich filmów Flasha, które będą się szybko ładować w wąskiej przestrzeni
przepustowości. Media Flasha zawsze należy stosować w inteligentny i oszczędny sposób —
a to jest właśnie kwestia przemyślanego i rozważonego projektu.
Przejdźmy do bardziej szczegółowego omówienia strumieniowania i wstępnego ładowania.
Następnie zajmiemy się zastosowaniem tych technik we Flashu na przykładzie kilku ćwiczeń.

Co to jest strumieniowanie?
Strumień, w sensie stosowanym w projektowaniu na potrzeby Sieci i Internecie, oznacza
przepływ danych. Proces „strumieniowania” określa dynamikę i mechanikę przepływu
danych w danej przepustowości użytkownika. Termin przepustowość służy do opisywania

Rozdział 22-571
ilości danych, jakie można przesłać do danego urządzenia w jednostce czasu. Na przykład,
użytkownik siedzący na końcu linii telefonicznej z modemem o prędkości 56k, dysponuje
połączeniem o „niskiej przepustowości”, ponieważ ten rodzaj urządzenia może otrzymywać
dane ze stosunkowo niewielką prędkością (w tym przypadku wynosi ona około 56000 bitów
na sekundę. Porównaj ją z typową siecią biurową, która przesyła dane z prędkością pomiędzy
10 i 100 milionów bitów na sekundę).
Na przepustowość wpływa wiele czynników; przede wszystkim rodzaj połączenia do Internetu lub połączenia
sieciowego (modem, DSL, T1/T3, etc), ruch w Sieci, lokalizacja geograficzna, fizyczny skład linii
komunikacyjnych, jak również wiele innych technicznych czynników pozostających poza zakresem tego
rozdziału.

Poniżej przedstawiamy pomocną definicję procesu strumieniowania podaną prze firmę


Macromedia, w odniesieniu do technologii Flasha, jak również do tematu naszego rozdziału:

„Termin strumieniowanie, w doniesieniu do odtwarzacza Flash Player, oznacza normalny


przepływ danych z serwera połączeniem sieciowym do komputera klienta, który ich zażądał.
Najszybsza prędkość przenoszenia danych jest ograniczona do najwolniejszych połączeń,
którymi dane są przesyłane. Często, najwolniejszym punktem w połączeniu jest modem
użytkownika (o prędkości 28.8 kilobitów lub mniejszej).
Ponieważ wszystkie dane strumieniują poprzez połączenie do komputera użytkownika, co
czyni strumień filmu z odtwarzacza Flash Player innym od strumienia plików GIF lub JPEG?
Różnica polega na tym, że dane w filmie Flasha przechowywane są sekwencyjnie ujęcie po
ujęciu. Po otrzymaniu przez odtwarzacza Flash Player (kontrolowany przez wtyczkę lub
ActiveX) wszystkich danych dla jednego ujęcia, moje je natychmiast wyświetlić na ekranie bez
czekania na nadejście reszty danych. Odtwarzanie filmu Flasha będzie przebiegać płynnie
jeśli tylko odtwarzacz Flash Player może otrzymywać dane poprzez połączenie sieciowe z
prędkością porównywalną z tą, z jaką odtwarza on ujęcia na sekundę”.
Źródło: Macromedia Flash TechNote ID: 12085

Podsumowując, film Flasha odtwarzany online zostanie uruchomiony jak tylko jego ujęcia
załadują się na twój komputer, bez czekania na pobranie pozostałej części filmu. We Flashu,
ten proces właśnie nazwany jest „strumieniowaniem”. Zaleta strumieniowania jest taka, że
użytkownicy z dostępną dosyć ograniczoną przepustowością nie będą czekać na rozpoczęcie
oglądania filmu, którego odtwarzanie będzie przebiegać płynnie.
Istnieje jednak pewne niebezpieczeństwo związane z tego typu strumieniowaniem —
użytkownicy dysponujący niską i średnią przepustowością (dobrym przykładem tej
publiczności są użytkownicy posiadający modemy o prędkości 56k) zobaczą film Flasha w
trakcie pobierania go, lecz odtwarzanie filmu może został zakłócone ominiętymi ujęciami lub
pauzami. Taka sytuacja zachodzi wówczas, gdy połączenie internetowe użytkownika nie
nadąża za prędkością, z którą Flash wysyła dane do jego komputera. W przypadku, gdy ilość
danych wymagana do wyświetlenia każdego ujęcia Flasha jest niewielka, strumieniowanie
będzie działać efektywnie dla wszystkich użytkowników, lecz takie sytuacje nie są zbyt częste
— zwłaszcza, gdy projektant zastosował potężne możliwości integracji mediów we Flashu do
połączenia dźwięku, animacji, wideo i obrazków w tworzeniu bogatych aplikacji
internetowych. Tego typu media wymagają dużych plików, przy których strumieniowanie nie
jest dobrym wyborem dla bieżącej publiczności internetowej, z której nie jest w stanie pobrać
danych wymagających wysokiej przepustowości połączeń. Aby uporać się z tym problemem,
strumienie danych Flasha należy regulować i optymalizować. Do tego celu służy kod
ActionScript i proces o nawie wstępne ładowanie.

Rozdział 22-572
Co to jest wstępne ładowanie?
Wstępne ładowanie można w zasadzie uznać za przeciwieństwo strumieniowania. We
wstępnym ładowaniu elementy niezbędne dla pomyślnego odtwarzania ładowane są prze
przejściem do danego momentu w filmie, powstrzymując w ten sposób domyślne
strumieniowanie Flasha przez odtworzeniem filmu natychmiast po załadowaniu ujęć. Jest to
dobra technika do stosowania z dużymi plikami, które uniemożliwiają zastosowanie
strumieniowania.
Z technicznego punktu widzenia wstępne ładowanie obsługiwane jest przez właściwość
języka ActionScript, _framesloaded, która umożliwia określenie liczby elementów
zawartości jakie należy załadować przez wykonaniem innych akcji lub przejściem do
określonego momentu w filmie. Właściwość _framesloaded można wykorzystać na wiele
sposobów do optymalizacji aplikacji Flasha dla publiczności dysponującej zarówno wysoką
jak i niską przepustowością.
Typowy przykład wstępnego ładowania dotyczy stosunkowo dużej witryny internetowe
wykonanej we Flashu, o rozmiarze około od 50 do 100 kB, zawierającej obrazki map
bitowych, dźwięki i animacje. Wstępne ładowanie odbywa się w trakcie wyświetlania ekranu
„ładowania”, który jest pewnego rodzaju obszarem „poczekalni” dla użytkownika. Gdy
użytkownik czeka, w tle przebiega ładowanie mediów, po którym będzie można uzyskać
dostęp do filmu. Wstępne ładowanie stosowane jest w sytuacjach, w których strumień danych
zostaje umieszczony w obszar przepustowości, który nie może pomieścić rozmiaru danych.
Poprzez zmuszenie użytkownika do czekania na załadowanie się zawartości, strumień danych
„wyprzedza” przepustowość użytkownika, dzięki czczemu użytkownik uzyskuje dostęp do
filmu z pominięciem czynników związanych z transferem danych, wpływających na
efektywność odtwarzania.
Wadą wstępnego ładowania dużych plików jest oczywiście problem, od którego zaczęliśmy:
czas oczekiwania spowoduje frustrację użytkowników, którzy, podobnie jak i my, nie lubią
czekać na darmo. Jeśli ładowanie przekroczy ich cierpliwość, użytkownicy opuszczą twoją
aplikację lub witrynę internetową. Aby pomóc w rozwiązaniu tego problemu, ekrany
wstępnego ładowania powinny być jak najprzyjemniejsze, oferując różnorodną interakcję z
użytkownikiem, aby w jak największym stopniu umilić mu oczekiwanie. Ponadto,
jakiekolwiek wprowadzone przez ciebie opóźnienia nie powinny być dłuższe niż jest to
konieczne, i chociaż może się to wydawać radą oczywistą, istnieją techniki ograniczania
czasu oczekiwania w bardziej drastyczny sposób, niż można się spodziewać. Omówimy teraz
kilka z tych strategii.

Ekrany ładujące, taktyka różnorodności i reakcje


użytkownika
Widok ekranu ładującego złoży się na pierwsze wrażenie z oglądania twojej aplikacji,
jakiego doświadczy użytkownik. Pierwsze wrażenia zawsze stanowią krytyczny aspekt
pomyślnego, potężnego projektu, a często kształtują opinię użytkownika o całym produkcie.
Należy zrozumieć, że czekanie nigdy nie jest miłym doświadczeniem dla internauty,
zwłaszcza gdy zwiedza daną witrynę po raz pierwszy a jej zalety czy przeznaczenie wciąż są
mu nieznane. Zatem zadaniem najwyższej wagi jest zmniejszenie frustracji użytkownika w
trakcie tego okresu poprzez zaoferowanie mu jakiegoś zapewnienia, że na twoją witrynę
warto będzie odrobinę poczekać. Poprzez perfekcyjne opanowanie tworzenia ekranu
lądującego pomożesz użytkownikom zrozumieć, że liczysz się z ich potrzebami i dajesz im
posmakować tego, co zobaczą na witrynie.

Rozdział 22-573
Projektanci przeważnie stawiają czoła temu wyzwaniu poprzez zaprezentowanie
użytkownikowi ujmującej animacji, filmu lub interaktywnej zabawki, która będzie reagować
na ruchy użytkownika. Stosując dowolną z tych technik przyciągniesz uwagę użytkownika, co
z kolei zmieni ich postrzeganie czasu ładowania i wartości witryny. Użytkownik może tak się
zaangażować w grę z interaktywną zabawką, że witryna zostanie pobrana w całości zanim on
się zorientuje, że nie musi już czekać.
Zastosowanie pasków postępu jest techniką różniącą się od urozmaicenia i reakcji: dostarcza
ona użytkownikowi informacji i stanie witryny, jaką odwiedza. Paski postępu — a
przynajmniej te precyzyjne — wskazują wizualnie, jaka część aplikacji została już pobrana i
jak długo jeszcze użytkownik musi czekać. Ta metoda jest bardzo użyteczna, ponieważ
informuje użytkownika, że zawartość przesyłana jest do jego komputera i aplikacja nie
utknęła w jakimś martwym punkcie. Wielu użytkowników od razu zakładają, że dana
aplikacja internetowa jest uszkodzona, jeśli nie mogą obserwować jakiejkolwiek reakcji i w
rezultacie opuszczają daną stronę.
Ważną cechą Flasha, na jaką należy zwrócić uwagę jest to, że witryny wykonane w tym
programie różnią się od konwencjonalnych wzorów ładowania HTML, do których przywykli
użytkownicy. Na typowych stronach HTML ramki, tekst i obrazki ładowane są w sposób
kumulacyjny, budując stronę w określonym czasie. Na początku obrazki na stronach HTML
często wyświetlają się w postaci ikon z miejscami na obrazki, które zostają wypełnione po
załadowaniu odpowiedniego pliku. W ten sposób użytkownik nie tylko dowiaduje się, że
informacje pobierane są do jego komputera, lecz również posiada wizualne wskazówki
pokazujące, jaka część strony jest już kompletna. We Flashu, ładowanie stron wygląda
inaczej: strony często ładują się od stanu pustego aż do kompletnie wypełnionych, bez żadnej
wskazówki, co się dzieje w międzyczasie. Połączenie paska postępu z estetyczną rozrywką
często okazuje się najbardziej efektywną, profesjonalną metodą na wywołanie pozytywnej
reakcji użytkownika.

Wstęp do konstrukcji
Zanim przejdziemy do przykładów i omówienia kodu, warto zwrócić uwagę na fakt, że
techniki takie jak strumieniowanie i wstępne ładowanie powinno się traktować jako ostatni
etap w procesie optymalizacji aplikacji Flasha dla użytkowników. Nie są one substytutem
przemyślanego projektu, a we Flashu na wiele sposobów można ulepszyć wydajność twoich
filmów — inteligentne zastosowanie symboli, a także wybór odpowiednich formatów
obrazków i dźwięków pomoże znacznie zmniejszyć rozmiar plików i poprawić odbiór strony
przez użytkownika. Najlepsze rady w tej dziedzinie pochodzą od samej firmy Macromedia w
dokumencie zatytułowanym Using Flash 5, którego można pobrać z formacie PDF z centrum
obsługi Flasha, Flash Support Center, pod adresem www.macromedia.com. Polecam
zwłaszcza sekcję Optimizing Movies, poświęconą optymalizacji filmów.
Jedynie wówczas, gdy jesteś absolutnie pewien, że maksymalnie ulepszyłeś wydajność
filmów, a mimo to przy ich wymaganiach nadal niezbędne jest zastosowanie wstępnego
ładowania i strumieniowania, powinieneś opracować jak najlepsze zastosowanie ich w filmie.
Pamiętając o omówionych zagadnieniach, przejdźmy teraz do przeglądu kilku narzędzi
ułatwiających identyfikację sekcji filmów, w których należy zastosować prezentowane przez
nas rozwiązania.
Zastosowanie trybu „symulacji online” odtwarzacza Flasha i programu profilującego
przepustowość, Bandwidth Profiler, pomogą ci w zrozumieniu działania strumieniowania i
wstępnego ładowania, a także ułatwią ci wybór technik odpowiednich dla danego filmu.

Rozdział 22-574
Testowanie strumieniowanych filmów i Bandwidth Profiler
Flasha
Aby przetestować mechanizmy strumieniowania i wstępnego ładowania przykładowych
filmów, które będziemy tworzyć w tym rozdziale, z płyty CD-ROM otwórz plik FLA dla
dowolnego z nich (na przykład approximate.fla) i zastosuj polecenie Control|Test Movie. Po
otwarciu filmu w nowym oknie wywołaj polecenie View|Show Streaming, aby uruchomić
symulację ładowania online. W tym trybie będzie mógł obejrzeć działanie paska postępu,
wypełniającego się powoli wraz z „pozornym” ładowaniem danych Flasha z prędkością
typową dla normalnego połączenia z Internetem (jeśli wybierzesz tylko polecenie Test Movie,
Flash nie uruchomi tej symulacji online i ominie wyświetlanie procesu wstępnego ładowania
czy strumieniowania).
Inny aspekt symulacji online Flasha obsługuje narzędzie Bandwidth Profiler, do którego
uzyskuje się dostęp z menu View odtwarzacza Flasha:

Sekcja „stanu” okna dialogowego Bandwidth Profiles (po lewej stronie) zawiera informacje o
liczbie załadowanych ujęć, procencie pobranego filmu i rozmiarze aktualnie pobieranego
ujęcia. Informacje tego typu często przydają się w diagnostyce lub do rozwiązywania
problemów.
Po prawej stronie okna wyświetlany jest wykres strumienia danych Flasha zawierający
informacje o rozmiarach ujęć i plików. Zmiany widoku zależne są do tego, czy w menu View
wybrana została pozycja Frame By Frame Graph czy Streaming Graph. Po wybraniu
pierwszej opcji pozioma oś wykresu reprezentuje ujęcia, a pionowa rozmiar. Wysokie,
prostokątne bloki na wykresie przedstawiają ujęcia z dużym rozmiarze, a wszystkie bloki
wykraczające poza poziomą czerwona linię oznaczają ujęcia, przy których Flash przerwie
odtwarzanie, aż dane ujęcia zostaną w pełni pobrane. Linia ta odzwierciedla ustawienia
prędkości połączenia (14.4k, 28.8k, 56k i tak dalej) wybranej w menu Debug i będzie ona
zmieniać pozycję w zależności od przepustowości wybranej prędkości połączenia
internetowego.
Po aktywacji trybu Show Streaming, nad wykresem wyświetlany jest zielony pasek rosnący
od lewej do prawej (czasami z przerwami):

Rozdział 22-575
Pasek ten reprezentuje przepływ danych Flasha i całkowitą liczbę ujęć filmu załadowanych
do tej pory. Zależność pomiędzy zielonym paskiem i strzałką odtwarzania na nim
umieszczoną odzwierciedla dynamikę, z jaką wybrana przepustowość przyjmuje dane Flasha.
Jeśli strzałka odtwarzania nadąża za końcówką zielonego paska, wystąpią przerwy lub
upuszczone ujęcia, dostarczając w ten sposób wskazówki o sukcesie lub porażce techniki
wstępnego ładowania lub strumieniowania. W najlepszym ustawieniu prawa część zielonego
paska powinna znajdować się przed strzałka odtwarzania.
Jeśli uda ci się zidentyfikować problemy strumieniowania za pomocą omówionych narzędzi,
możliwymi rozwiązaniami mogą być zmniejszenie strumienia danych poprzez wyregulowanie
rozmiaru pliku mediów, zastosowanie dodatkowej kompresji lub obniżenie prędkości
odtwarzania ujęć filmu. W przypadku wstępnego ładowania mediów, przerwa może po prostu
oznaczać, że strzałka odtwarzania zatrzymała się na określonym ujęciu w oczekiwaniu na
załadowanie większej ilości mediów; wówczas strzałka przejdzie do następnego ujęcia.
Zanim twoja witryna zostanie uruchomiona „na żywo” konieczne jest oczywiście
przetestowanie jej w prawdziwym połączeniu internetowym — symulator Flasha jest dobry,
lecz nie doskonały.

Modyfikacja kolejności ładowania


Przy eksportowaniu lub publikowaniu filmów we Flashu można wybrać dwie opcje
kolejności ładowania, Load Order: z dołu do góry (Bottom up) i z góry na dół (Top down):

Opcje te kontrolują kolejność, w jakiej Flash ładuje warstwy pierwszego ujęcia filmu. Po
wybraniu opcji Bottom up z wolną prędkością połączenia, Flash pobierze dolne warstwy filmu
przed warstwami górnymi. Opcję tą można stosować jako podstawową technikę wstępnego

Rozdział 22-576
ładowania/strumieniowania, gdy obrazki umieszczone są w pierwszym ujęciu filmu. Dla
mediów można przygotować odpowiednią hierarchię ważności poprzez podział obrazków na
warstwy w zależności od tego co chcesz, aby użytkownik zobaczył na początku i wybierając
odpowiednią opcję Load Order:

Należy jednak pamiętać, że gdy użytkownik dysponuje szybkim połączeniem lub rozmiary
obrazków są niewielkie, media można wyświetlać symultanicznie. Innymi słowy, nie licz na
żadne wizualne „efekty” które uzyskasz poprzez wyregulowanie kolejności ładowania.

Generowanie raportów o rozmiarze


Flash charakteryzuje się również możliwością generowania plików tekstowych o nazwie size
report (raport o rozmiarze), zawierające analizę ilości zawartości i mediów w filmie Flasha.
Aby uzyskać taki raport należy opublikować film z zaznaczonym polem wyboru Generate
size report. Raporty o rozmiarze są nieocenionym narzędziem do uzyskania analizy ujęcie po
ujęciu rozmiaru pliku i ogólnego użycia mediów w filmie, w celu identyfikacji części filmu,
które mogą zwiększyć czas ładowania. Tworzenie raportów o rozmiarze ułatwia wskazanie
potencjalnych problematycznych miejsc i, co za tym idzie, dokonanie właściwego wyboru
techniki strumieniowania czy też wstępnego pobierania mediów.

Typowy raport o rozmiarze wygląda tak (podzieliliśmy go dla zachowania przejrzystości


treści):
Movie Report
------------

Frame # Frame Bytes Total Bytes Page


------- ----------- ----------- ---------------
1 131 131 Scene 1
2 3976 4107 2
3 301 4408 3

Rozdział 22-577
4 15 4423 4
5 2 4425 5
6 2 4427 6
7 270 4697 7
8 10 4707 8
9 39 4746 9
10 66386 71132 10
11 6 71138 11
12 43478 114616 12
13 1590 116206 13
14 2 116208 14
15 2 116210 15
16 2 116212 16
17 2 116214 17
18 2 116216 18
19 2 116218 19
20 81759 197977 20
21 2526 200503 21
22 2 200505 22
23 8762 209267 23
24 2 209269 24
25 2 209271 25
26 329 209600 26
27 6 209606 27
28 21374 230980 28
29 241 231221 29
30 117 231338 30

W powyższej sekcji, kolumna pierwsza zawiera numery ujęć, natomiast kolumna druga
rozmiar danego ujęcia podany w bajtach. W trzeciej kolumnie podany jest całkowity rozmiar
filmu, również w bajtach, a w czwartej sceny zawarte w danym ujęciu. Ta część raportu
ułatwia identyfikację dużych ujęć, które mogą spowodować opóźnienia w trackie ładowania.
A teraz druga sekcja:
Page Shape Bytes Text Bytes
--------- ----------- ----------
Scene 1 0 380

Embedded Objects 244 0

Symbol Shape Bytes Text Bytes


--------- ----------- ----------
g-image4 0 0
b-continue 35 44
g-acorn 223 0
g-bar border 39 0
g-image1 0 0
g-image2 0 0
g-image3 0 0
g-loadbar 38 0
g-tree 315 0
m-cover 39 0
n-loadbar 0 0

W drugiej sekcji raportu przedstawione są rozmiary bajtów kształtu (shape bytes) i bajty
tekstu (text bytes) dla symboli i scen zawartych w filmie. Bajty kształtu oznaczają ilość
pamięci zajętą przez kształt wektorowy, a bajty tekstu ilość pamięci zajętą przez tekst.
Zazwyczaj rozmiary bajtów kształtu są małe, chyba że zawierają wiele punktów kontrolnych
(dobrym przykładem będzie tutaj złożona śledzona mapa bitowa); w takich sytuacjach
rozmiar kształtu wektorowego może znacznie się zwiększyć.
I trzecia sekcja:
Bitmap Compressed Original Compression
--------- ---------- ---------- ------------
cloudicity.pct 21299 1500000 JPEG Quality=80
Bitmap 5 81684 1497000 JPEG Quality=80
Bitmap 3 43403 1497000 JPEG Quality=80

Rozdział 22-578
Bitmap 15 66311 1500000 JPEG Quality=80

Ta sekcja raportu przedstawia skompresowane i oryginalne rozmiary wszystkich map


bitowych zawartych w filmie, jak również ustawienia kompresji obrazków. Informacje te
przydają się podczas porównywania degradacji obrazków i ustawień kompresji z rozmiarem
pliku. Porównania rozmiaru pliku i ustawień kompresji ułatwi ci wybór najlepszego
ustawienia kompresji z zachowaniem jakości obrazka i rozsądnego rozmiaru pliku.
Event sounds: 11KHz Mono 16 kbps MP3

Sound Name Bytes Format


----------- ---------- -------
apollo1.aiff 8751 11KHz Mono 16 kbps MP3
crash2 2511 11KHz Mono 16 kbps MP3
hat open2 1575 11KHz Mono 16 kbps MP3

Czwarta sekcja raportu zawiera nazwy i rozmiaru wszystkich klipów dźwiękowych


umieszczonych w filmie Flasha, włącznie z ich formatami. Rozmiary plików dźwiękowych
różnią się w zależności od ich częstotliwości próbkowania, plików mono lub stereo i
typu zastosowane kompresji. Do strumieniowania dźwięku najlepiej nadaje się format mp3, a
ponadto zachowuje on niewielki rozmiar pliku z doba jakością dźwięku. Podobnie do sekcji z
ustawieniami jakości obrazków, ta część raportu przydaje się w porównywaniu jakości
dźwięku i ustawień kompresji z rozmiarem pliku.
Font Name Bytes Characters
------------ ---------- ------------
Helvetica 3478 %.0123456789abcdefgilmnoprstuy

Końcowa sekcja raportu zawiera nazwy wszystkich osadzonych w filmie czcionek, rozmiary
plików czcionek w bajtach i znaki zastosowane w filmie. Do osadzonych znaków zaliczane są
wszelkie pola tekstowe z włączoną opcją Embed Fonts, jak również symbole zawierające
tekst. Podobnie jak w przypadku kształtów wektorowych, rozmiar pliku zwiększa się wraz z
liczbą użytych punktów kontrolnych, zatem złożone czcionki, wiele czcionek lub czcionki z
pełnym zakresem osadzonych znaków (czyli z liczbami, znakami interpunkcyjnymi oraz
dużymi i małymi literami) będą zajmować więcej miejsca, gdyż zawierają one więcej
punktów kontrolnych i danych.

Demonstracja strumieniowania animacji i dźwięku


Jak już wspomnieliśmy na początku rozdziału, strumieniowanie mediów jest domyślnym
ustawieniem Flasha i związane z tym odtwarzanie ujęć filmu zaraz po załadowaniu ich. Film
o nazwie soundstream.fla, umieszczony na płycie CD-ROM, użyjemy do zademonstrowania
tego mechanizmu. Zawiera on prosty przykład strumieniowej animacji dźwięku i kształtów
wektorowych we Flashu. Aby zaobserwować działanie strumieniowania, należy obejrzeć film
w trybie online, lub w trybie strumieniowania odtwarzacza Flasha (w dalszej części rozdziału
zajmiemy się obsługą strumieniowania we Flashu, co również zostanie zaprezentowane z
wykorzystaniem tego filmu).
Film soundstream składa się tylko z trzech warstw: actions, na której umieszczony jest kod
ActionScript, sound/anime, zawierającej długi klip filmowy i krótką animację automatyczną i
static graphic, ze statycznymi obrazkami. A oto listwa czasowa tego filmu:

Rozdział 22-579
Jeśli obejrzysz ten film w trybie strumieniowania odtwarzacza Flasha, lub przez Internet,
zaobserwujesz następujące mechanizmy strumieniowania: Flash czeka na ujęcie 1 do
momentu osiągnięcia długości bufora dźwięku (zajmiemy się tym zagadnieniem za chwilę).
Gdy to się stanie, strzałka odtwarzania przechodzi do ujęcia 2, w którym rozpoczyna
odtwarzanie strumieniowego dźwięku po załadowaniu i udostępnieniu ujęć filmu. Po dojściu
strzałki do ujęcia 650, film odtwarza strumieniową animację wektorową i na koniec
zatrzymuje się w ujęciu 690, w którym umieszczone jest polecenie stop.
Przetestuj ten film z otwartym programem Bandwidth Profiler, przy połączeniu o prędkości 56.6k, 28.8k i 14.4.
Przy prędkości połączenia 14.4k będziesz mógł zaobserwować, co się dzieje z strumieniowanymi mediami
gdy przepustowość użytkownika nie jest w stanie przyjąć wystarczająco szybko transferu danych. Warto
również obserwować strzałkę odtwarzania i zielony pasek transferu danych przy różnych prędkościach
połączenia, aby opracować sobie model strumieniowania w odniesieniu do prędkości odtwarzania i transferu
danych.

Analiza filmu
Pierwsze ujęcie w naszym filmie zawiera poniższy istotny wiersz kodu ActionScript:
_root._soundbuftime = 0;

Wiersz ten kontroluje długość bufora dźwięku dla głównej listwy czasowej (_root),
właściwość odgrywającą kluczową rolę w przebiegu strumieniowania dźwięku. Na początku
procesu strumieniowania, Flash poczeka na pobranie wystarczającej ilości danych
umożliwiającej odtworzenie dźwięku przez kilka sekund, które zostały określone w
powyższym kodzie. Domyślnie, właściwość ta ustawiona jest na 5 sekund, lecz w wielu
przypadkach długość ta będzie nieodpowiednia. Poprzez przypisanie tej właściwości większej
lub mniejszej wartości, odtwarzanie Flasha można kontrolować bardziej efektywnie dla
publiczności z określoną „docelową przepustowością”.
Przetestuj film soundstream.fla z właściwością _soundbuftime ustawioną na zero, przy
prędkości połączenia wynoszącej 14,4 kb/s. Zauważysz, że strzałka odtwarzania szybko
osiąga prędkość transferu danych, w wyniku czego odtwarzanie dźwięku przerywane jest
licznymi przerwami i zakłóceniami. Dzieje się tak, ponieważ długość bufora została
ustawiona na zero, co oznacza, że odtwarzanie rozpoczyna się zaraz po załadowaniu
jakichkolwiek danych. Jeśli właściwości _soundbuftime przypiszemy wartość 17, przed
przystąpieniem do odtwarzania film poczeka na załadowanie 17 sekund dźwięku:

Rozdział 22-580
Poprzez zmuszenie strzałki odtwarzania do czekania na otrzymanie 17 sekund dźwięku (co
stanowi około 53% filmu) przesunięcie pomiędzy transferem danych i wskaźnikiem
odtwarzania staje się na tyle duże, że strzałka odtwarzania nie będzie w stanie nadążyć za
przesyłaniem danych i nie wystąpią żadne przerwy. Ten jeden wiersz kodu zapewnia
wygodny sposób kontrolowania możliwości odtwarzania i strumieniowania poprzez wstępne
ładowanie określonej ilości filmu, zapewniając, że pomiędzy strzałką odtwarzania i
transferem danych zachowana zostanie wystarczająca odległość uniemożliwiając ich
połączenie.
Oczywiście, jak już się pewnie zorientowałeś, każda opowieść ma dwie strony, podobnie jak
ta. Gdy przetestowałeś film z symulowanym połączeniem o prędkości 56 kb/s długość bufora
wynosząca zero była w zupełności wystarczająca — innymi słowy, w takich okolicznościach
domyślna długość bufora dźwięku wynosząca 5 sekund jest zbyt duża. Zmuszanie
użytkownika do czekania pięć sekund na pre-buforowany dźwięk jest bez sensu, gdy długość
bufora wynosząca zero poprawnie działa.
Istnieje jednak czynnik wyrównujący — fizyczne połączenia internetowe są często niestabilne
i niespodziewanie mogą nagle przyspieszyć lub zwolnić. Taką sytuację zawsze należy brać
pod uwagę podczas określania długości bufora dźwięku i czasami warto wybrać większą
długość, niż jest technicznie konieczna, aby wziąć pod uwagę okresy zastoju w Sieci,
zapewniając, że strumieniowanie zawsze będzie działać poprawnie. Najlepszą długość bufora
można określić przede wszystkim przez eksperymentowanie, a kombinacje ustawień i
zawartości należy testować z różnymi prędkościami połączeń (jak również poprzez
prawdziwe połączenie internetowe), aby wybrać najefektywniejsze ustawienia.

Strumieniowe animacje wektorowe we Flashu


Zanim przejdziemy do następnej części rozdziału omówimy jeszcze pokrótce dodatkowe
zagadnienia związane ze specyfika strumieniowania animacji i dźwięków i sformułujemy
kilka ogólnych konkluzji. Po pierwsze, animacja wektorowa we Flashu przeważnie działa
poprawnie, bez względu na dostępną przepustowość — zwłaszcza, gdy zawiera proste
kształty bez zbyt dużej liczby automatycznie animowanych kształtów, ujęć kluczowych czy
obiektów. Animacja wektorowa odtwarzana jest wraz ze strumieniowymi dźwiękami —
oznacza to, że przy przerwie w odtwarzaniu spowodowanej problemami przepustowością,
animacja wektorowa również zatrzyma się wraz z dźwiękiem.

Rozdział 22-581
Strumieniowanie dźwięku we Flashu
Po drugie, jak już pewnie się zorientowałeś, strumieniowanie dźwięku we Flashu wymaga w
panelu Sound zastosowania synchronizacji (Sync) z opcją strumieniowania (Stream):

Strumieniowych dźwięków nigdy nie należy umieszczać w pętlach, ponieważ rozmiar pliku
filmu zostanie zwiększony o zakres ujęć strumieniowanego dźwięku, pomnożony przez
określoną liczbę pętli. Przy eksportowaniu filmów warto również poeksperymentować z
ustawieniami prędkości bitowej i jakości kompresji mp3, aby zmniejszyć rozmiar pliku bez
zbytniego obniżania jakości dźwięku.
Po omówieniu zagadnień teoretycznych możemy przejść do naszego pierwszego przykładu.

Podstawowa technika wstępnego ładowania


W tym ćwiczeniu przygotujemy dla użytkownika coś, na co będzie mógł patrzeć w trakcie
ładowania zawartości w tle. Uniemożliwimy również użytkownikowi przejście do dalszej
części filmu bez naszej zgody, czyli przed załadowaniem odpowiedniej zawartości.
Ten rodzaj prostego wstępnego ładowania zalicza się do najbardziej podstawowej techniki
kontrolowania strumienia danych Flasha. Funkcjonuje ona poprzez zastosowanie właściwości
_framesloaded Flasha w instrukcji warunkowej, która sprawdza, czy załadowane już
zostało dane ujęcie i dokładnie to zobaczysz po uruchomieniu filmu basicpreload.fla z płyty
CD-ROM dołączonej do książki.

Rozdział 22-582
Ten film składa się tylko z dwóch warstw: na jednej umieszczona jest zawartość, a na drugiej
kod ActionScript. Naszym zamiarem jest załadowanie czterech elementów na warstwie
zawartości przed udostępnieniem użytkownikom naszej witryny, aby, gdy już się na niej
znajdą, nie musieli już na nic czekać. W tym celu w pierwszych dwóch ujęciach na warstwie
kodu umieściliśmy kilka bardzo prosto wyglądających poleceń:

Ujęcie 1:
if (_framesloaded >= 30) {
gotoAndPlay ("content");
}

Ujęcie 2:
gotoAndPlay (1);

Kod w ujęciu 1 sprawdza czy ujęcie 30 (ostatnie ujęcie z zawartością) zostało załadowane, a
jeśli tak, to Flash przechodzi do ujęcia 10 (z etykietą content). Jednakże, koniecznie należy
zwrócić uwagę na fakt, że w ujęciu 2 zawarty jest kod kluczowy dla efektu, jakiego chcemy
uzyskać. Gdybyśmy nie zastosowali kodu z ujęcia 2, a ujęcie 30 nie zostałoby załadowane
przed dotarciem wskaźnika odtwarzania do ujęcia 1, odtwarzanie byłoby kontynuowane do
ujęcia 2, 3, 4 i tak dalej, aż dotarłoby do końca filmu (lub natrafiło na ujęcie z innymi
poleceniami kodu ActionScript). Poprzez dodanie kodu do ujęcia 2 Flash zostaje zmuszony
do wykonania pętli z powrotem do ujęcia 1 aż instrukcja warunkowa stanie się prawdziwa.
Można zauważyć ogólne błędne przekonanie odnośnie działania kodu ActionScript w połączeniu ze
wskaźnikiem odtwarzania we Flashu. Flash odtwarza wszystkie filmy w porządku liniowym, od początku do
końca, chyba że zostanie poinstruowany aby odtwarzać je w inny sposób. Wskaźnik odtwarzania odgrywa niezwykle
istotną rolę w nadzorowaniu kodu ActionScript — jak zostaje wykonany, w jakiej kolejności i w jaki sposób jest
kontrolowany.

ActionScript Flasha różni się od innych języków programowania, w których instrukcje warunkowe mogą
tworzyć pętlę lub być wykonywane automatycznie. W przypadku Flasha, niezbędne jest poinstruowanie go,
kiedy ma sprawdzić zmienne czy instrukcje warunkowe poprzez umieszczeni ujęcia, które przeprowadza
wskaźnik odtwarzania do lokalizacji kodu sprawdzającego. Właściwość ta przydatna jest zwłaszcza w
sytuacjach, kiedy zmienną lub instrukcję warunkową należy przeliczyć lub sprawdzić kilkakrotnie.

Rozdział 22-583
W tym przykładzie zastosowaliśmy klip filmowy obejmujący ujęcia 1 i 2 animujący słowo
„loading” (ładowanie), aby użytkownik wiedział, że zawartość filmu nadal pobierana jest do
jego komputera. Po załadowaniu danych strzałka odtwarzacza przechodzi do ujęcia o nazwie
content w ujęciu 10:

Ujęcie 10 zawiera mapę bitową i akcję stop, lecz w normalnej aplikacji moglibyśmy
umieścić tutaj początek głównego filmu. Podobnie, ujęcia 20 i 30 zawierają mapy bitowe
reprezentujące dowolny rodzaj zawartości, jaki chciałbyś zastosować.
Przedstawiona tutaj prosta technika stosowana jest w wielu aplikacjach/scenariuszach
internetowych i powinno się ją traktować jako podstawowych składnik konstrukcji bardziej
skomplikowanych technik strumieniowania i wstępnego ładowania, które omówimy w dalszej
części rozdziału — rozpoczynając już od następnego przykładu.

Przybliżony pasek wstępnego ładowania


Przybliżony pasek wstępnego ładowania najlepiej nadaje się do zastosowania w aplikacjach,
w których należy podać jakąś informację po pobieraniu zawartości Flasha, lecz absolutna
dokładność nie jest wymagana. Pasek generowany jest poprzez zastosowanie wbudowanych
właściwości Flasha, _framesloaded i _totalframes; jest to najbardziej elementarna
do wykonania i zaprogramowania forma paska wstępnego ładowania. Poniższy przykład
posłuży jako materiał przygotowawczy do tworzenia bardziej skomplikowanych pasków.
Poniższy rysunek przedstawia zrzut ekranu kompozycji filmu approximate.fla, którego
oczywiście znajdziesz na płycie CD-ROM dołączonej do książki:

Rozdział 22-584
Film ten sprawia wrażenie dosyć skomplikowanego, ponieważ składa się z sześciu warstw,
lecz wkrótce przekonasz się, że dzieli on wiele właściwości z prostym programem wstępnego
ładowania, którego omówiliśmy przed chwilą. Na przykład, górna warstwa, preload actions,
zawiera (prawie) cały potrzebny nam kod ActionScript, natomiast na warstwie media assets
umieściliśmy tekst, jakiego będziemy wyświetlać użytkownikowi, jak również wiele innych
„zasobów”, które będziemy ładować w tle. Na warstwie continue button/sign znajduje się
tylko jeden przycisk.
Dolne trzy warstwy tworzą odrębny zestaw. Warstwa bar border/text zawiera większość
elementów, jakie będziemy wyświetlać użytkownikowi w trakcie ładowania zawartości (patrz
pola i etykiety na rysunku), oprócz samego klipu paska wstępnego ładowania, preload bar,
który umieszczony jest na warstwie o tej samej nazwie. Na warstwie cache coverup znajduje
się klip filmowy o nazwie cover, który zawiera obrazek białego pola zajmującego całą scenę
(w rzeczywistości kolor klipu został dopasowany do koloru tła filmu Flasha):

Rozdział 22-585
Białe pole zastosowaliśmy aby powstrzymać użytkowników, których przeglądarki wcześniej
przechowały film, przez oglądaniem paska wstępnego ładowania (i związanych z nim
rysunków) po raz drugi, gdyby powrócili na naszą witrynę lub wcisnęli przycisk odświeżania
Refresh.
Przeglądarki internetowe „buforują” dane, co oznacza, że określona ilość ostatnio udostępnionych danych
przechowywana jest na dysku twardym komputera. W ten sposób przeszukiwanie Sieci zostaje
przyspieszone, ponieważ można „powrócić” do ostatnio zwiedzanych witryn bez konieczności ponownego ich
ładowania. W przypadku Flasha przeglądarki buforują pliki SWF, dlatego też konieczne jest oczyszczenie
schowka po odwiedzeniu danej strony więcej niż jeden raz, a chcesz ponownie obejrzeć działanie paska
wstępnego ładowania. Większość buforów przeglądarek można oczyszczać z menu Preferences lub Settings.

Szczegóły działania tej sztuczki przedstawimy w dalszej części rozdziału.

Analiza filmu
Jedyna rzecz, jaka się dzieje w ujęciu 1, to załadowanie klipu filmowego cover, gotowego do
użycia. Prawdziwa akcja zaczyna się w ujęciu 2, w którym znajduje się poniższy wiersz kodu
ActionScript:
wscale = loadbar._width / 100;

Wiersz ten przypisuje zmiennej wscale wartość 1% szerokości klipu filmowego loadbar,
podanej w pikselach. Celem tego kodu jest ustanowienie czynnika skalowania, jaki zostanie
zastosowany w ujęciu 3 do określenia szerokości paska. Pasek ma osiągnąć maksymalną
szerokość w momencie załadowania 100% filmu. W tym przypadku szerokość klip
filmowego loadbar wynosi 250 pikseli, zatem wartość zmiennej wscale będzie równa 2.5.
Określenie tej zmiennej umożliwia zmianę pełnej szerokości klipu loadbar na jakąkolwiek
inną, które według ciebie najlepiej się prezentuje na ekranie, bez konieczności wprowadzania
innych modyfikacji aby zapewnić, że kod zeskaluje klip prawidłowo. Musisz jednak
pamiętać, że krawędź paska powinna być równa szerokości klipu loadbar, aby pasek

Rozdział 22-586
wypełniał swoje krawędzie w trakcie ładowania zawartości. Efekt taki można ustawić w
panelu Info:

Ujęcie 3 o etykiecie calculation zawiera większość kodu ActionScript tego filmu, który
odpowiada nie tylko za wygląd paska wstępnego ładowania, lecz również za czynności
wykonywane po zakończeniu ładowania. A oto on:
framesloaded = _framesloaded;
totalframes = _totalframes;

percentloaded = Math.floor(framesloaded/totalframes*100);
pload = percentloaded+"% completed";
loadbar._width = percentloaded*wscale;
if (percentloaded == 100) {
gotoAndPlay ("continue");
} else if (percentloaded<100) {
cover._visible = 0;
}

To całkiem dużo jak na jeden raz, więc przeanalizujmy go wiersz po wierszu, zaczynając od
góry:
framesloaded = _framesloaded;
totalframes = _totalframes;

Pierwszym zadaniem tego kodu jest zdefiniowanie wartości dla pól tekstowych
framesloaded i totalframes umieszczonych na warstwie bar border/text. Zmiennej
_framesloaded używaliśmy już wcześniej, natomiast zmienna _totalframes zwraca
całkowitą liczbę ujęć w bieżącym filmie lub klipie filmowym. Jednakże, zmienne te są
potrzebne również w naszych obliczeniach „załadowanej wartości procentowej”:
percentloaded = Math.floor(framesloaded/totalframes*100);

Ten fragment kodu przedstawia procedurę matematyczną paska wstępnego ładowania.


Wyrażenie w nawiasie reprezentuje dokładną proporcję ujęć załadowanych do tej pory jako
wartość procentową, a funkcja Math.floor zaokrągla w dół tą wartość do najbliższej
liczby całkowitej (zatem wartość 33.33 zostanie zaokrąglona do 33, 0.5 do 0, a 9.99 do 9).
Zatem, zmiennej percentloaded przypisujemy wartość całkowitą.
A teraz kolejny wiersz:

Rozdział 22-587
pload = percentloaded+"% completed";

W tym wierszu, pload jest trzecim polem tekstowym umieszczonym na ekranie — znajduje
się ono tuż nad paskiem wstępnego ładowania. Powyższy kod tworzy ciąg podający
numeryczną informację oczekującemu użytkownikowi, oprócz wizualnej informacji
przedstawianej przez sam pasek:

Nie jest to niezbędny element interfejsu użytkownika, lecz ładnie się prezentuje i pomoże w
zatrzymaniu użytkowników po twojej stronie (i na twojej stronie).
Następnie mamy:
loadbar._width = percentloaded*wscale;

Ten wiersz ustawia szerokość klipu loadbar podaną w pikselach na procent obliczony
powyżej powielony przez wartość zmiennej wscale. Należy pamiętać, że do poprawnego
działania nasz rysunek paska wstępnego ładowania musimy być umieszczony po prawej
stronie znacznika początkowego w klipie filmowym m-loadbar. Dzięki temu zapewnimy, że
pasek wstępnego ładowania będzie rósł od lewej do prawej:

Na ostatnią część kodu w tym ujęciu składa się instrukcja warunkowa służąca do określenia,
co stanie się potem:
if (percentloaded == 100) {
gotoAndPlay ("continue");
} else if (percentloaded<100) {

Rozdział 22-588
cover._visible = 0;
}

Jeśli wartość zmiennej percentloaded równa jest 100 (co oznacza, że ładowanie filmu
zakończyło się) Flash zostaje skierowany poleceniem gotoAndPlay do ujęcia oznaczonego
etykietą continue (czyli ujęcia 7). To ujęcie zawiera przycisk continue przenoszący
użytkownika do zawartości rozpoczynającej się w ujęciu 30. Jeśli, jednak, wartość zmiennej
percentloaded jest mniejsza od 100, wówczas widoczność klipu filmowego cover zostaje
ustawiona na zero, odkrywając elementy znajdujące się na warstwach pod nim.
Domyślnie widoczność klipu filmowego cover ustawiona jest na jeden, co oznacza, że
wszystko elementy pod nim są ukryte, chyba że instrukcje podane w kodzie ActionScript
będą inne. W przypadku pełnego załadowania filmu lub przechowania, lub wciśnięcia
przycisku odświeżania Refresh w oknie przeglądarki, Flash przeskoczy bezpośrednio do
ujęcia continue, i użytkownik nie zobaczy pasku wstępnego ładowania ani związanych z nim
obrazków.
Od tego momentu przykład staje się dosyć prosty. Jeśli ujęcia od 7 do 30 nie zostały jeszcze
załadowane, mamy taką samą sytuację jak w poprzednim przykładzie i kod ActionScript z
ujęcia 4 przesyła strzałkę odtwarzania z powrotem do ujęcia 3:
gotoAndPlay ("calculation");

Pętla będzie trwać w ten sposób do momentu, gdy nasza instrukcja warunkowa prześle Flasha
do ujęcia 7 (continue) zawierającego mapę bitową, przycisk i polecenie stop:

Na koniec w przycisku continue znajduje się poniższy kod przenoszący użytkownika na


początek właściwej zawartości — w tym przypadku do kolejnej kombinacji mapy bitowej i
akcji stop:

on (release) {
gotoAndPlay ("content");
}

Rozdział 22-589
Końcowe przemyślenia
Ten pasek oblicza swoją wartość „pobranego procentu” w oparciu o liczbę załadowanych ujęć
i całkowitą liczbę ujęć w filmie. Jednakże, chociaż dzięki tej metodzie dowiadujemy się o
dokładnej ilości załadowanych ujęć, nie mówi ona nic o tym, jaka część pliku SWF została
już przesłana. Na przykład, wyobraź sobie, że ujęcia od 1 do 99 nie posiadają żadnej
zawartości, natomiast ujęcie 100 zawiera obrazek o rozmiarze 100 kB. W takim przypadku
pierwsze 99% naszego paska wypełnią się natychmiast, informując użytkownika, że pobrane
już zostało 99% filmu, lecz podczas ładowania obrazka w ujęciu 100 (co może trwać dosyć
długo) nastąpi przerwa. Użytkownik będzie się zastanawiać, skąd ta przerwa, skoro 99%
ładowania poszło tak szybko. Rozwiązaniem tego problemu przy stosowaniu omówionej tutaj
techniki jest w miarę równe rozprowadzenie mediów w objętości ujęcia w taki sposób, aby
liczba załadowanych ujęć ściślej wiązała się z ilością danych przesłanych do tej pory.
Aby przejść dalej musimy znaleźć sposób na dostarczenie użytkownikowi bardziej
precyzyjnych informacji o faktycznie pobranej ilości pliku SWF do komputera, jak również o
ilości, która pozostała jeszcze do załadownia.

Bardziej precyzyjny pasek wstępnego ładowania


Na szczęście Flash 5 umożliwia zastosowanie bardziej precyzyjnej metody z wykorzystaniem
funkcji kodu ActionScript, MovieClip.getBytesLoaded i
MovieClip.getBytesTotal. Jednakże, te dwie funkcje pracują tylko w klipach
filmowych, do których ładowane są zewnętrzne pliki SWF, co będzie wymagało dokonania
pewnych zmian w naszym rozwiązaniu.
W tym przykładzie główna zawartość witryny internetowej Flasha znajduje się w klipie
filmowym main.swf. plik ten dostępny jest na płycie CD-ROM w formacie FLA i SWF i jeśli
przetestujesz go, zauważysz, że podobnie jak inne przykłady zawartości zastosowane do tej
pory w niniejszym rozdziale, jest on jedynie miejscem na zawartość, niż samą zawartością.
Film main.swf składa się tylko z jednego ujęcia zawierającego dużą mapę bitową i akcję
stop. Mechanizm wstępnego ładowania umieszczony został w drugim filmie o nazwie
accurate.fla i to właśnie do klipu filmowego w tym filmie zostanie załadowana zawartość.

Rozdział 22-590
Z powodu dwu etapowego mechanizmu ładowania, nie możemy już stosować Bandwidth Profiler do
realistycznego testowania, gdyż pasek wstępnego ładowania po prostu się nie pokaże. Gdy nadejdzie czas,
będziesz musiał umieścić trzy pliki, accurate.html, accurate.swf i main.swf na serwerze WWW i obejrzeć je w
prawdziwej przeglądarce stron WWW. Aby kilkakrotnie obejrzeć działanie paska wstępnego ładowania,
będziesz musiał za każdym razem czyścić bufor przeglądarki (w rozdziale poświęconym Flashowi i PHP
znajdziesz informacje o konfiguracji serwera WWW Apache na twoim komputerze).

Z prawdziwą zawartością przechowywaną gdzie indziej, plik accurate.fla stanowi prostszą


propozycję od filmu z poprzedniego przykładu. Jak widać na rysunku, składa się on tylko z
czterech warstw:

A co lepsze, powinieneś przyzwyczajać się już do struktury tego typu rozwiązań pod kątem
rozmieszczenia poszczególnych elementów na warstwach. Konstrukcja i zachowanie warstw
coverup i loadbar, na przykład, jest prawie takie samo jak ich odpowiedników w filmie
„przybliżonego pasku wstępnego ładowania”, natomiast warstwa actions zawiera kod
ActionScript, którego już za chwilę omówimy. Na warstwie content (w ujęciu 2) znajduje się
docelowy klip filmowy (o nazwie loadtarget), który ostatecznie będzie przechowywać naszą
zawartość, jak również (w ujęciu 5) tekst do wyświetlenia dla użytkownika.

Analiza filmu
I w tym przypadku możemy potraktować kod na warstwie actions jako wskazówkę i
przeanalizować cały film ujęcie po ujęciu.
Jak poprzednio wszystko zaczyna się dziać w ujęciu 2:
loadMovie("main.swf", loadtarget);
wscale = loadbar._width / 100;
totalbytes = -1;

Pierwszy wiersz kodu ładuje zewnętrzny film Flasha o nazwie main.swf do pustego
docelowego klipu filmowego, loadtarget. Zwróć uwagę, że ten drugi film umieszczony jest w
lewym górnym rogu sceny filmu Flasha (x = 0.0, y = 0.0), zapewniając, że jakiekolwiek
umieszczone rysunki w filmie main.swf będą odpowiadać współrzędnym sceny w naszym
wstępnie ładowanym filmie (accurate.swf).

Rozdział 22-591
Drugi wiersz powyższego kodu definiuje zmienną wscale jako czynnik skalowania dla
klipu filmowego loadbar, dokładnie tak jak poprzednio, lecz po nim następuje kolejny
fragment kodu w tym samym ujęciu:
totalbytes = -1;

Kod ten przypisuje zmiennej totalbytes wartość -1, bezsensowną wartość, której
przeznaczenie stanie się jasne po przeanalizowaniu kodu w ujęciu 3 oznaczonym etykietą
calculation:

A oto kod:
if (loadtarget.getBytesTotal() == totalbytes) {

percentloaded = Math.floor(loadtarget.getBytesLoaded() totalbytes * 100);


pload = percentloaded + "% completed";
loadbar._width = percentloaded * wscale;

if (percentloaded == 100) {
gotoAndPlay ("content");
} else if (percentloaded < 100) {
cover._visible = 0;
}
}

totalbytes = loadtarget.getBytesTotal();

Rozdział 22-592
Jak pewnie zauważyłeś, ten kod jest dokładnie taki sam jak w poprzednim przykładzie oprócz
trzech wierszy zawierających tajemniczą nową zmienną totalbytes. Najprostszym do
wyjaśnienia fragmentem powyższego kodu jest wiersz, w którym zmienna
percentloaded ustawiona zostaje na wynik naszego wywołania skierowanego do funkcji
Math.floor: obliczenia przeprowadziliśmy tutaj w bajtach a nie w ujęciach, dokładnie tak,
jak powiedzieliśmy na początku. Bardziej interesujące są nowe wiersze, które dla ułatwienia
oddzieliliśmy od reszty kodu, jak poniżej:
if (loadtarget.getBytesTotal() == totalbytes) {

//...reszta kodu

totalbytes = loadtarget.getBytesTotal();

Problem polega na tym, że kiedy ładujesz zewnętrzne pliki we Flashu 5 i stosujesz funkcje
MovieClip.getBytesLoaded i MovieClip.getBytesTotal, pojawia się
niefortunna kwestia „bycia na czasie”, czy też „aktualności”. Czasami, a zwłaszcza po
rozpoczęciu ładowania filmu, funkcje te mogą zwracać bezużyteczne wartości z powodu
czasu, jakiego Flash potrzebuje do przetworzenia polecenia getBytesTotal. Nie trzeba
chyba mówić, że może to być bardzo irytujące, ponieważ zbędne dane mogą kolidować z
właściwymi operacjami i spodziewaną wydajnością aplikacji. Musimy zapewnić, że
podajemy do naszego skryptu poprawne obliczenia polecenia getBytesTotal.
Dodatkowa instrukcja warunkowa zastosowana w tym kodzie ma pomóc w uniknięciu takich
problemów. Gdy strzałka odtwarzania dojdzie do tego ujęcia po raz pierwszy, sprawdza, czy
liczba podana przez funkcję loadtarget.getBytesTotal jest taka sama jak wartość
zmiennej totalbytes. Oczywiście w ujęciu 2 przypisaliśmy zmiennej totalbytes
wartość -1, zatem warunek ten nie będzie spełniony przy pierwszym wykonaniu tej instrukcji
przez program. Ponieważ warunek jest błędny, Flash wykonuje wszystkie polecenia poza
nawiasami, przypisując zmiennej totalbytes wartość, która teraz zwracana jest przez
funkcję loadtarget.getBytesTotal.
Zgodnie z naszym zwyczajem kod ActionScript w ujęciu 4 tworzy pętlę bezpośrednio do
omawianego ujęcia, gdzie ponownie przeprowadzane jest sprawdzanie. Proces trwa dopóki
instrukcja okaże się prawdziwa, a problem „aktualności” zostanie rozwiązany: zmienna
totalbytes nie odzwierciedla już żadnej niewłaściwej czy zmieniającej się wartości.
Wszystkie instrukcje w nawiasach można wówczas wykonać, a główna procedura naszego
programu staje się operacyjna.
Gdy wartość zmiennej percentloaded jest równa 100, a ładowanie filmu zostało
zakończone, strzałka odtwarzania przechodzi do ujęcia oznaczonego etykietą content (ujęcie
5), gdzie zostanie uruchomiona główna zawartość tego filmu. W tym filmie, wstępnie
załadowana zawartość nigdy nie będzie widoczna, ponieważ klip filmowy loadtarget nie
znajduje się w ujęciu 5. Zamiast tego sygnałem informującym, że wszystko poszło zgodnie z
planem jest ekran przedstawiony na poniższym rysunku (pamiętaj, że aby uzyskać pełny efekt
musisz oglądać ten film w przeglądarce):

Rozdział 22-593
Końcowe przemyślenia
Wprowadzenie we Flashu 5 funkcji MovieClip.getBytesLoaded i
MovieClip.getBytesTotal stanowi niezastąpione narzędzie do tworzenia
precyzyjnych pasków ładowania, które informują użytkownika o faktycznym stanie transmisji
danych.
Jedyną wadą stosowania tych funkcji jest wspomniany problem „aktualności” i to, że funkcje
te działają tylko podczas ładowania zewnętrznych plików Flasha. Chociaż sytuacja ta jest
wielce niekorzystna, jednak nieuchronnie prowadzi cię do projektowania systemów i
interfejsów zachowujących się w modularny sposób poprzez odzyskiwanie plików i danych
wówczas, kiedy są one potrzebne. Do pewnego stopnia, ten przykładowy film sam w sobie
stanowi modularny system, ponieważ zewnętrzny film (main.swf) ładowany jest do filmu
głównego (accurate.swf).
Dobrym przykładem modularnego systemu jest witryna internetowa skonstruowana we
Flashu. Powłoka witryny i właściwości menu istnieją jako jeden film Flasha, podczas gdy
obszary zawartości i artykuły jako oddzielne pliki SWF Flasha, które pobierane są na żądanie.
Gdy użytkownik włącza poszczególne pozycje menu na witrynie, zewnętrzne pliki ładowane
są do pustych klipów filmowych lub poziomów zawartych w głównym filmie Flasha.
Zastosowanie tego typu systemu nie tylko ułatwia organizację i podział plików, lecz również
zastosowanie funkcji MovieClip.getBytesLoaded i
MovieClip.getBytesTotal. Modularne systemy świetnie działają we Flashu, a już w
następnej części rozdziału zajmiemy się rozbudowanym przykładem takiego właśnie systemu.

Modularna witryna internetowa Flasha


W tym końcowym przykładzie zastosujemy potężną, hybrydową technikę łącząco precyzyjny
pasek wstępnego ładowania z funkcjonalnością strumieniowania. Dobrym przykładem
zastosowania wspomnianej techniki jest witryna internetowa, w której konieczne jest wstępne
ładowanie tylko podstawowych elementów interfejsu (aby zmniejszyć czas ładowania),
następnie drugorzędne strumieniowane elementy takie jak dźwięk i animacja będą dodane
dopiero po uzyskaniu przez użytkownika dostępu do interfejsu. Film ilustrujący tą technikę

Rozdział 22-594
(hybrid.fla) uruchamia precyzyjny pasek ładowania poprzez wstępne ładowanie zewnętrznego
filmu (cloudicity.swf) dla ujęć od 1 do 12, lecz strumieniuje pozostałe ujęcia (13 do 411).

Analiza filmu
Chociaż stosowane przez nas techniki stają się coraz bardziej złożone, nasze filmy sprawiają
wrażenie, jakby stawały się coraz prostsze! Wraz z filmem hybrid.fla powracamy do struktury
trójwarstwowej, a scena filmu wygląda tak:

Warstwy actions i loadbar spełniają te same funkcje co w poprzednich przykładach, a i tym


razem przeanalizujemy pokrótce kod ActionScript. W tym przykładzie nie zastosowaliśmy
warstwy cover, ponieważ do ukrycia w razie potrzeby paska wstępnego ładowania
wykorzystaliśmy alternatywną metodę.
Warstwa content zawiera docelowy klip filmowy dla filmu cloudicity.swf i przycisk, którym
wszystko uruchomimy. Tym razem użytkownik będzie całkowicie kontrolować moment
rozpoczęcia odtwarzania filmu.
Skro mamy już przycisk do kontrolowania filmu, kod ActionScript w pierwszym ujęciu filmu
hybrid.fla zawiera jedynie polecenie stop, zatrzymujące strzałkę odtwarzania w ujęciu 1.
Poniżej przedstawiliśmy interesujący kod dołączony do przycisku:
on (press) {
loadMovie ("cloudcity.swf", loadtarget);
gotoAndPlay (2);
}

Po wciśnięciu przycisku Flash rozpoczyna proces ładowania pliku cloudicity.swf do klipu


filmowego loadtarget, który ponownie znajduje się w lewym górnym rogu sceny. Ponadto
restartuje on strzałkę odtwarzania poprzez przesunięcie jej do ujęcia 2, gdzie umieszczony jest
następujący kod:
wscale = loadbar._width / 100;
totalbytes = -1;

Jest to dokładnie taki sam kod, jakiego zastosowaliśmy w poprzednim przykładzie, więc nie
musimy go już omawiać, zwłaszcza gdy w ujęciu 3, i tym razem oznaczonym etykietą
calculation, czeka na nas wiele nowych i interesujących rzeczy do odkrycia:

Rozdział 22-595
if (loadtarget.getBytesTotal() == totalbytes) {
percentloaded = Math.floor(loadtarget.getBytesLoaded() / preloadchunksize*100);

if (percentloaded>=100) {
_root.pbox.pload = "100% completed";
loadbar._width = 100*wscale;
gotoAndPlay ("content");
} else if (percentloaded<100) {
loadbar._alpha = 100;
barborder._alpha = 100;
pbox._alpha = 100;
_root.pbox.pload = percentloaded+"% completed";
loadbar._width = percentloaded*wscale;
}
}

preloadchunksize = 17688;
totalbytes = loadtarget.getBytesTotal();

Jest to główna procedura programistyczna dla naszego paska wstępnego ładowania, i jak
zapewne się spodziewasz, w dużym stopniu przypomina procedurę zastosowaną w filmie
accurate.fla — przynajmniej jej struktura powinna być ci już znajoma. Są jednak również
pewne różnice, a ich analizę rozpoczniemy od zmiennej preloadchunksize,
umieszczonej w pierwszym wierszu kodu w obrębie instrukcji if:

if (loadtarget.getBytesTotal() == totalbytes) {
percentloaded = Math.floor(loadtarget.getBytesLoaded() / preloadchunksize*100);

Ta zmienna reprezentuje liczbę bajtów filmu cloudicity.swf, które zamierzamy wstępnie


załadować przez strumieniowaniem pozostałej jego zawartości (pamiętaj, że chcemy wstępnie
załadować tylko ujęcia od 1 do 12, natomiast strumieniować resztę). Nową zmienną
stosujemy zamiast funkcji MovieClip.getBytesTotal, która zwraca całkowity rozmiar
pliku filmu, nie o to nam tu chodzi. Dlatego podjęliśmy decyzję o wstępnym ładowaniu tej
sekcji filmu, ponieważ zawiera ona dużą mapę bitową i animację, których nie dałoby się
płynnie strumieniować przy przepustowości połączeń modemowych 56k. Do pobrania
dźwięku wykorzystywanego w filmie możemy zastosować technologię strumieniowania,
ponieważ przepustowość dostępna dla naszych użytkowników poradzi sobie z przepływem
danych potrzebnym dla tego celu.
Wartość zmiennej preloadchunksize uzyskaliśmy poprzez wygenerowanie raportu o
rozmiarze w którym podany jest rozmiar pliku dla wybranego zakresu ujęć, który w tym
przypadku obejmuje ujęcia od 1 do 12:

Rozdział 22-596
Patrząc na wartość całkowitych bajtów, Total Bytes, dla ujęcia 12, widać jasno, że łączny
rozmiar ujęć od 1 do 12 w filmie cloudicity.swf wynosi 17688 bajtów i taką właśnie wartość
przypiszemy zmiennej preloadchunksize. Obliczenie definiujące wartość zmiennej
percentloaded stosuje wspomnianą wartość do określenia ilości części filmu wstępnie
ładowanego, jaka została już pobrana.
Pasek wstępnego ładowania osiągnie 100% pojemności, gdy liczba załadowanych bajtów
będzie równa rozmiarowi wstępnie ładowanej części, którego właśnie zdefiniowaliśmy.
Zauważ, że 17688 bajtów stanowi jedynie około jedną czwartą całkowitego rozmiaru pliku
filmu cloudicity.swf, gdyż łączna suma ujęć od 1 do 441 wynosi 64071 bajtów:

Pozostałe trzy czwarte filmu będą strumieniowane i w ten sposób zapewnimy przyzwoitą
równowagę ładowania. Równowaga ładowania zależy głównie od przepustowości dostępnej
dla docelowej publiczności, a eksperymentowanie jest niezbędne do wybrania rozwiązań
odpowiednich dla twojego projektu i możliwości użytkowników.
Zauważ, że zmienna preloadchunksize nie jest (i nie może być) wyprowadzone przez wbudowane funkcje
Flasha i musimy być aktualizowana po każdej modyfikacji filmu — liczba na pewno ulegnie zmianie po
dodaniu nowego skryptu czy graficznych elementów. Jeśli zmienna preloadchunksize jest niewłaściwa,
pasek wstępnego ładowania nie odzwierciedli faktycznych wartości i w efekcie film może pobrać niewłaściwą
ilość zawartości.

Po zastosowaniu kodu „anty-aktualnościowego”, zajmiemy się teraz instrukcją warunkową


zmieniającą wygląd paska wstępnego ładowania. Ponieważ już dawno nie widzieliśmy tego
kodu na stronie, przypominamy go poniżej:
if (percentloaded>=100) {
_root.pbox.pload = "100% completed";
loadbar._width = 100*wscale;
gotoAndPlay ("content");
} else if (percentloaded<100) {
loadbar._alpha = 100;
barborder._alpha = 100;
pbox._alpha = 100;
_root.pbox.pload = percentloaded+"% completed";
loadbar._width = percentloaded*wscale;
}
}

Po zakończeniu wstępnego ładowania, musimy być ostrożni — jak zauważyłeś, sprawdzamy


teraz, czy wartość zmiennej percentloaded jest równa lub większa od 100. podczas
wstępnego ładowania całych filmów, nie było to istotne, gdyż nie dało się po prostu
przekroczyć wartości 100%. Tutaj jednak, skoro wybraliśmy tylko pewną liczbę bajtów do

Rozdział 22-597
załadowania, może się tak zdarzyć, że przekroczyliśmy już ten limit w trakcie
przeprowadzania testu. Wspominana zmiana w kodzie rozwiązuje ten problem.
W podobny sposób, gdybyśmy osiągnęli docelową liczbę bajtów do wstępnego ładowania,
upewniamy się, że wartości zmiennych pload i loadbar równe są 100% i nie przekraczają
tego limitu. Gdy już się z tym uporamy, możemy, jak zwykle, za pomocą polecenia
gotoAndPlay, przejść i odtworzyć ujęcie 5.
Jeśli wstępne ładowanie jeszcze się nie zakończyło, dochodzimy do drugiej części instrukcji
warunkowej, rozpoczynającej się od ustawienia przezroczystości (_alpha) klipów loadbar,
barborder i pbox na 100. Domyślnie elementy te są ukryte poprzez ustawienie ich
parametrów Alpha na 0, aby uniemożliwić użytkownikom, których przeglądarki poprzednio
przechowały film, ponowne oglądanie paska wstępnego ładowania i związanych z nim
rysunków:

W poprzednich przykładach uzyskaliśmy ten efekt poprzez zastosowanie warstwy cover; jest
to po prostu inny środek prowadzący do tego samego celu. Kod zatem kończy się na
ustawieniu klipów pload i loadbar.
Na koniec umieszczamy w ujęciu 4 nieuchronną pętlę powracającą do ujęcia 3, podczas gdy
w ujęciu 5 oznaczonym etykietą content znajduje się poniższy kod:
with (loadtarget) {
gotoAndPlay (2);
}
stop ();

Instrukcja with, za pomocą polecenia gotoAndPlay przenosi klip filmowy do ujęcia 2, w


którym w filmie cloudicity.swf rozpoczyna się animacja. Dzięki pozostałemu kodowi
upewniamy się, że zewnętrzny film zostanie odtworzony dopiero po wstępnym załadowaniu
ujęć od 1 do 12 i po zniknięciu paska wstępnego ładowania i jego rysunków.

Konstrukcja: cloudicity.swf
Na zakończenie analizy tego przykładu przyjrzymy się jeszcze filmowi, którego z takim
trudem udało się nam efektywnie załadować. A oto jego listwa czasowa:

Rozdział 22-598
Film ograniczony jest poleceniami stop — jezdnym w ujęciu 1 i drugim w ujęciu 441.
Pierwsze polecenie uniemożliwia rozpoczęcie odtwarzania filmu zanim nie nakaże mu tego
film hybrid.swf, natomiast drugie sprowadza wszystkie elementy do uporządkowanego końca.
W ten sposób pozostaje jeszcze kod w ujęciu 13, który określa długość bufora dźwięku tego
filmu, podobnie jak w pierwszym przykładzie tego rozdziału (w części Demonstracja
strumieniowania animacji i dźwięku):
soundbuff = 2;
_root._soundbuftime = soundbuff;

Od tego momentu wszystko przebiega już łatwo, oczywiście w porównaniu z innymi


analizowanymi przez nas przykładami! Warstwa soundstream zawiera, od ujęcia 13 do 441,
strumieniowany plik dźwiękowy o nazwie an intro.aiff, z opcją Sync ustawioną na Stream:

W tym samym zakresie ujęć warstwa sign zawiera linijkę tekstu o następującej treści:
„Graphics are now loaded, but a sound is streaming in the background...” informujący
użytkownika o zakończeniu ładowania grafiki i kontynuacji obierania w tle dźwięków. Na
warstwie tej umieszczone jest również dynamiczne pole tekstowe wyświetlające zmienną
soundbuff, którą zdefiniowaliśmy w powyższym kodzie ActionScript.

Rozdział 22-599
Ostania warstwa, anime, zawiera animację mapy bitowej odtwarzanej od ujęcia 2 do 12, która
pozostaje statyczna prze pozostałą część filmu. Jest to fragment wstępnie pobrany przez film
hybrid.swf.
W trakcie ładowania tego filmu przez przycisk w filmie hybrid.swf, wstępnie załadowane
zostaje pierwsze 12 ujęć. Wówczas rozpoczyna się odtwarzanie animacji mapy bitowej do
momentu, gdy wskaźnik odtwarzania dojdzie do ujęcia 13, w którym rozpoczyna się
strumieniowanie i odtwarzanie dźwięku kończące się w ujęciu 441 z akcją stop.

Końcowe przemyślenia
Tą technikę można modyfikować i dopasowywać do wielu aplikacji — wszystko zależy od
twojej wyobraźni, zamiarów i sposobu nawigacji po twojej aplikacji przez użytkownika.
Równoważenie wstępnego ładowania i strumieniowania stanowi niezwykle efektywną
metodę, która może połączyć publiczności dysponujące niską i wysoką przepustowością, z
jednoczesnym informowaniem użytkownika o przebiegu procesu ładowania. Jedyną wadą
metody omówionej w tej części rozdziału jest konieczność (ponownego) ładowania
zewnętrznych plików Flasha w celu zastosowania precyzyjnego paska wstępnego ładowania,
jak również zapewnienie, że zmienna preloadchunksize zawsze będzie odzwierciedlać
właściwą wartość. Jednakże, nie jest to zbyt wysoka cena za optymalizację doświadczenia
użytkownika.

Zakończenie
Wstępne ładowanie i strumieniowanie oferuje szeroką gamę rozwiązań dla zróżnicowanych
potencjalnych przepustowości dostępnych użytkownikom. Jednakże, techniki te zawsze
powinno się traktować jako rozwiązania drugorzędne, stawiając na pierwszym miejscu
tworzenie małych, przemyślanych i wydajnych filmów Flasha. Obecna publiczność
internetowa nie dysponuje jeszcze wysoką przepustowością, która, według wielu
programistów sieciowych, zagościła już w każdym domu — podobnie jak ja, wy też pewnie
odwiedzaliście już takie witryny, które wyświetlały informację o ładowaniu 780 kilo, a wtedy
wy myśleliście, że „może jednak nie tym razem...”.
Bez względu na zdumiewające możliwości Flasha w obsłudze mediów, 50 kilo nadal
pozostaje idealnym limitem, którego nie powinna przekroczyć aplikacja internetowa, jeśli ma
być dostępna dla szerokiej publiczności. Jeśli dostępność użytkownika stawia się na

Rozdział 22-600
pierwszym miejscu, media we Flashu zawsze należy wykorzystywać w oszczędny i
przemyślany sposób.
Mamy nadzieję, że przeanalizowane i omówione tutaj techniki dały ci pewne wytyczne
przydatne w stosowaniu ładowania i strumieniowania w twoich własnych filmach
wykonanych we Flashu, jak również pomogą ci w znalezieniu kompromisu pomiędzy twoimi
planami jako projektanta i dostępną przepustowością twojej potencjalnej publiczności.

Rozdział 22-601
Rozdział 23 Optymalizacja Flasha
dla wyszukiwarek
Po zakończeniu pracy nad twoim dziełem Flashowym i opublikowaniu go w Internecie,
wkrótce zorientujesz się, że nie jest to bynajmniej koniec twoich wysiłków. Po niezliczonych
godzinach projektowania witryny internetowej, testowania jej i uruchomienia, w procesie
tworzenia witryny nadal pozostaje jeszcze jeden etap: wprowadzenie na rynek! Samo
umieszczenie witryny w Internecie nie sprowadzi od razu do niej zwiedzających. Marketing
internetowy jest szybko rozwijającą się dziedziną wymagającą znacznych umiejętności i
wiedzy, jak również dogłębnego zrozumienia twoich produktów, usług i celów.
Jednym z najszybszych i najtańszych sposobów na skierowanie internautów na twoją witrynę
jest zastosowanie wyszukiwarek. W tym rozdziale poświęcimy zagadnieniom optymalizacji
witryny internetowej, a w szczególności witryny internetowej wykonanej we Flashu dla
wyszukiwarek. Wprowadzimy również terminy i metody umożliwiające umieszczenie twojej
witryny internetowej na pierwszym miejscu w liście rezultatów wyszukiwania.

Typy wyszukiwarek
Obecnie w Internecie dostępnych jest tysiące różnych wyszukiwarek, a będzie ich jeszcze
więcej. Samo śledzenie ich wszystkich wystarczyłoby na pełnoetatową pracę, a przecież nie
będziemy się tym zajmować. Na szczęście, większość ruchu użytkowników w Sieci odbywa
się wokół głównych wyszukiwarek, więc koncentrując się właśnie na nich uzyskasz najlepsze
rezultaty przy najmniejszym nakładzie finansowym, a już na pewno uda ci się zwiększyć ruch
na twojej witrynie.
Pod względem funkcjonalności, wyszukiwarki można podzielić na dwa główne typy:
• Katalogi. Są to filtrowane witryny internetowe, na których pracownicy (tak tak,
prawdziwi ludzie) przeglądają każdą zgłoszoną stronę i decydują, czy można ją
umieścić w listingu. Zazwyczaj katalogi podzielone są na kategorie i podkategorie
umożliwiające użytkownikom zagłębianie się w ich strukturze. Do popularnych
serwisów katalogowych można zaliczyć Yahoo, Open Directory Project (czyli
www.dmowz.org) i LookSmart.
• Wyszukiwarki. Te serwisy programatycznie aktualizują bazy danych witryn i stron
internetowych. przeważnie wyszukiwarki obsługiwane są przez pająka (szperacza
lub robota), który podąża za łączami w Internecie i zapisuje dane o nowych stronach.
Do popularnych wyszukiwarek możemy zaliczyć AltaVistę, Google i Excite.

Prawdopodobnie istnieją również wyszukiwarki łączące w sobie wymienione technologie,


które trudno byłoby w jakikolwiek sposób zaklasyfikować. Ponadto, wiele serwisów
wyszukiwania korzysta z technik innych serwisów. AltaVista, na przykład, posiada
katalogowy serwis wyszukiwania opracowany z zastosowaniem struktury obsługiwanej przez

Rozdział 23-602
system LookSmart. W dalszej części rozdziału omówimy różne wyszukiwarki w bardziej
szczegółowy sposób, jak również relacje pomiędzy nimi. Więcej informacji o
wyszukiwarkach i ich powiązaniach znajdziesz pod adresem www.searchenginewatch.com i
www.searchengineworld.com.

Pająki WWW
Pająki, szperacze, roboty — nazw jest wiele, są to automatyczne programy wyszukujące w
Internecie zawartość, jaką można dodać do baz danych wyszukiwarek. Kryteria wyboru
strony do zindeksowania są inne dla każdego pająka i zmieniają się one co pewien czas w
zależności od przeznaczenia danej wyszukiwarki. To, co pająk zauważa, oparte jest na
informacjach umieszczonych na danej stronie i może zostać zmodyfikowane w zależności od
konfiguracji pająk przez administratora witryny. Chociaż nie można zagwarantować, że
strona zostanie i indeksowana lub obejrzana przez określonego pająka projektowanie
„przyjaznych dla pająków” witryn internetowych znacznie zwiększa szansę rozpoznania
strony i możliwość zlokalizowania jej za pomocą wyszukiwarek. Więcej informacji o świecie
pająków WWW znajdziesz pod adresem
http://info.webcrawler.com/mak/projects/robots/tobots.html.

Planowanie witryny przyjaznej wyszukiwarce


Metoda optymalizacji dla wyszukiwarek zależy od struktury twojej witryny. Pod tym
względem znaczną elastycznością charakteryzuje się witryna internetowa składająca się z
niewielkich fragmentów zawartości Flasha, która jednak przede wszystkim oparta jest na
języku HTML. Natomiast witryny internetowe o kompletnej zawartości wykonanej we Flashu
wymagają większej pomysłowości. Rozpocznijmy od omówienia kilku podstawowych
zgadnie związanych z naszym tematem.
Obecnie nie istnieją żadne wyszukiwarki z możliwością bezpośredniego odczytywania zawartości filmu
Flasha, chociaż może się to zmienić w niedalekiej przyszłości. Firma Atomz (www.atomz.com) posiada
produkt umożliwiający odwiedzającym twojej witryny wyszukiwanie tekstu zawartego w filmach Flasha i
wkrótce na pewno zostaną rozważone rozszerzenie tej funkcjonalności na całą Sieć.

Wyszukiwarki indeksują strony w oparciu o treść zawartą w dokumencie HTML. Wszystkie


elementy dokumentu HTML nie będące tekstem nie są zauważane przez pająka — obrazek
PNG zawierający logo, nazwę i adres firmy, na przykład, zostanie rozpoznany przez pająka
jak nic więcej prócz pliku z nazwą. Pod kątem optymalizacji dla wyszukiwarki witryny
internetowe możemy podzielić na dwie następujące kategorie:

• Witryny oparte na języku HTML zawierają kilka obrazków i innych typów


zawartości, lecz przede wszystkim są one po prostu dokumentami HTML. Na tych
stronach możesz znaleźć niewielkie animacje Flasha czy menu wykonane we Flashu,
lecz główna zawartość została zaprogramowana w języku HTML.
• W witrynach multimedialnych, do których należą również witryny Flasha,
zawartość umieszczana jest przeważnie w obrębie jakiegoś programu wykonywalnego
lub innego pakietu wymagającego posiadania odpowiedniej wtyczki do wyświetlenia
jej.

Często, zwłaszcza przy stosowaniu ramek HTML, witryna internetowa przekształca się w
hybrydę omówionych typów, obsługując różne rodzaje zawartości. Podczas optymalizacji

Rozdział 23-603
witryny internetowej dla wyszukiwarek (najlepiej jakby proces ten odbył się przed
zaprojektowaniem witryny), konieczne jest określenie układu witryny, jak również jej treści.

Strony wejściowe
Strony wejściowe służą do przyciągania pająków wyszukiwarek i do przekazywania im
informacji o witrynie. Strony te powinny zawierać jak największą liczbę informacji o witrynie
podanej w przystępnej formie — to właśnie pająki lubią najbardziej. Gdy użytkownicy,
podążając za łączem wyświetlonym w wyszukiwarce, znajdą się na tego typu stronie
wejściowej, powinni bez problemu dać sobie radę z przejściem do innych obszarów Internetu.
Gdy niewłaściwie wykonane, strony wejściowe mogą dezorientować użytkowników, lecz
dobry projektant witryn internetowych zaprojektuje je w taki sposób, aby były pomocne
zarówno dla ludzi jak i maszyn. Przy omawianiu poszczególnych rodzajów witryn i
zawartości zajmiemy się również plusami i minusami stosowania w każdym z nich stron
wejściowych.
Na rynku dostępnych jest obecnie wiele narzędzi ułatwiających tworzenie stron wejściowych.
Na witrynie internetowej www.firstplacesoftware.com dostępne jest, na przykład, narzędzie o
nazwie Page Generator, służące właśnie do tego celu. Więcej informacji na temat stron
wejściowych znajdziesz pod adresem http://spider-food.net/doorway-pages.html.

Obsługa standardowych witryn HTML


Standardowe witryny internetowe HTML najłatwiej poddają się optymalizacji dla
wyszukiwarek, które opierają swe rankingi na rozpoznanej przez nie zawartości strony. W
dalszej części rozdziału przedstawimy kilka sztuczek, które umożliwią ci zwiększenie
punktacji stron bez względu na ich kompozycję. Metody te można bez problemu stosować
przy „standardowej” zawartości, a dla innych rodzajów zawartości są one prawie że
niezbędne.
Jeśli jesteś zainteresowany sposobem, w jaki pająk widzi stronę WWW, przyjrzyj się symulatorowi Search
Engine Spider Simulator znajdującemu się pod adresem www.searchengineworld.com/cgi-bin/sim_spider.cgi.

Witryny internetowe z ramkami


Witryny obsługujące ramki są trudniejsze w optymalizacji. Problem polega na tym, że pająki
nie rozpoznają struktury ramek, więc albo indeksują twoje strony niekompletnie, ale po prostu
ignorują je. W przypadku witryn internetowych z ramkami zastosowanie stron wejściowych i
witryny „cienia” nie korzystających z ramek jest podstawowym sposobem na zwabienie
pająków.
Problem z ramkami jest taki, że gdy użytkownik podąża za łączem w wyszukiwarce może
dotrzeć do twojej witryny przez stronę, która stanowi tylko jeden składnik w całym zestawie
ramek. W najlepszym razie użytkownik zobaczy niekompletnie wygenerowaną witrynę; w
najgorszym przypadku, wyświetlony zostanie komunikat o błędzie. Pająki nie wiedzą, które
„strony” na danej witrynie internetowej należy oglądać w połączeniu z innymi więc nie
zwracają na to żadnej uwagi.
Najprostszym sposobem na rozwiązanie tego problemu jest wykluczenie strony z ramkami
twojej witryny internetowe z indeksowania przez pająki (omówimy dokładniej ta procedurę w
części Wykluczanie stron z wyszukiwarek) i utworzenie oddzielnych stron wejściowych dla
każdej strony zawartości ze strukturą ramek. Do obsługi witryn internetowych z ramkami
godne polecenia są również techniki kodowania w języku JavaScript.

Rozdział 23-604
Więcej informacji o obsługiwaniu ramek i związanych z nimi zagadnieniach znajdziesz pod adresem
http://search.enginewatch.internet.com/webmasters/frames.html.

Witryny internetowe Flasha/Multimedialne


Należy zwrócić szczególną uwagę na witryny posiadające jako zawartość jedynie plik SWF,
jeśli chcesz, aby zostały zindeksowane przez wyszukiwarki. Pojedynczy plik obejmujący całą
zawartość witryny można efektywnie publikować i zarządzać nim, lecz z perspektywy
wyszukiwarki nie ma w nimi zbyt wiele do oglądania. Pamiętaj: pająki nie potrafią czytać
danych zawartych w plikach SWF Flasha. W ramach rekompensaty za tą niedogodność
możesz zastosować poniższe metody:
• Chociaż może to utrudnić proces publikacji, podzielenie zawartości na podsekcje
będzie korzystne zarówno dla użytkownika jak i pająków wyszukiwarek. Metoda ta
umożliwia użytkownikowi wejście na stronę, a także pobranie (lub zaznaczenie
zakładką) wyłącznie interesujących go sekcji, bez konieczności przechodzenia przez
inne poziomy witryny. Ponadto, zastosowanie oddzielnych sekcji pozwala na użycie
stron wejściowych połączonych z każdą sekcją, w miejsce jednej tylko strony
wejściowej dla całej witryny.
• Jeśli danej witryny nie da się podzielić na sekcje, lub czujesz, że utrudniłoby to
projektowanie jej, kolejnym najlepszym rozwiązaniem jest utworzenie stron
wejściowych wskazujących na główną stronę i zoptymalizowanie tej właśnie strony
tak efektywnie, jak będzie to tylko możliwe.

Wybór słów kluczowych i docelowego natężenia


ruchu w Sieci
Zanim nawet zabierzesz się za optymalizację witryny dla wyszukiwarek musisz dokładnie
określić rodzaj publiczności, jaką twoja witryna ma przyciągać. Pierwszym etapem w tym
procesie jest dobór słów kluczowych. W terminologii internetowej słowa kluczowe są to
dowolne wyrazy czy wyrażenia, jakie użytkownik może wpisać do wyszukiwarki w celu
odnalezienie informacji na podany temat. Wybranie właściwych słów kluczowych dla twojej
witryny jest niezwykle ważne, ponieważ przyczyniają się one do zwiększenia ruchu na twojej
witrynie.
Podczas dobierania słów kluczowych należy zwrócić uwagę na poniższe zagadnienia:

• Zrozumienie twoich produktów, usług i zawartości


• Zrozumienie docelowego rynku
• Zrozumienie konkurencji

Zrozumienie twoich produktów i usług jest bardzo ważnym etapem w procesie selekcji słów
kluczowych i powinieneś uważać, aby twoje doświadczenie w danej dziedzinie nie wpłynęło
na końcowy rezultat. Często, administratorzy witryn internetowych zanurzenie są codziennie
po uszy w żargonie charakterystycznym dla ich dziedziny i zapominają, że przeciętny
użytkownik może go nie znać. Zastosowanie żargonu może okazać się korzystne gdy
kierujesz daną witrynę w stronę użytkowników obytych z Siecią, lecz w innym przypadku
zastosowanie słów kluczowych specyficznych dla danej gałęzi przemysłu czy nawet firmy nie
przyniesie wielu rezultatów. Tutaj powinieneś myśleć tak, jak użytkownik twojej witryny.
W miarę możliwości spotkaj się z grupą typowych użytkowników i razem zastanówcie, się,
jakich słów szukaliby, gdyby chcieli znaleźć twoją witrynę internetową poprzez

Rozdział 23-605
wyszukiwarkę. Możesz nawet poprosić o opinię użytkowników z różnych regionów
demograficznych, których może przyciągnąć twoja witryna. Często zdarza się, że każdy
użytkownik postrzega dane informacje w inny sposób. Jeśli posiadasz wystarczająco duży
budżet, w celu wybrania słów kluczowych zalecamy przeprowadzenie ankiety wśród
klientów.
Innym sposobem na znalezienie odpowiednich słów kluczowych, które zwiększą ruch na
twojej witrynie, jest przyjrzenie się twojej konkurencji. Nie chodzi to o zwiedzenie
konkurencyjnej strony i pobranie z niej informacji, lecz zaobserwowanie różnych technik
przyciągania podobnej publiczności do twojej. Lecz pamiętaj, że twoja konkurencja również
będzie mieć na ciebie oko, często wykorzystując te same słowa kluczowe co ty. Prawo
dżungli panuje nawet w Internecie...
Administratorzy wypróbowują różne metody skierowania tłumów z wyszukiwarek na ich
witryny internetowe lecz, jak wkrótce się o tym przekonasz, zastosowanie ich może być dosyć
czasochłonne, a tobie przecież nie należy na projektowaniu stron do wyłapywania
wyszukiwania słów, których nikt nie szuka. Z drugiej jednak strony, gdy w ciągu miesiąca
danego wyrażenia szukają jedynie cztery osoby, lecz wszystkie one odwiedzają twoją
witrynę, możesz uznać, że twoja praca nie poszła na marne. Szacowanie liczby wyszukiwań
danego słowa kluczowego może pomóc ci w określeniu ilości czasu i wysiłku, jakich należy
poświęcić na dobór słów kluczowych. Chociaż nie da się zbyt dokładnie określić liczby
przeprowadzonych wyszukiwań danego słowa kluczowego, są pewne sposoby, dzięki którym
zyskasz podstawy do takich obliczeń.
GoTo, wyszukiwarka działająca na zasadzie „płacisz za wyniki”, oferuje spis umożliwiający
określenie przez administratorów witryn internetowych częstotliwości wyszukiwania danych
słów kluczowych. Chociaż dane te tworzone są tylko na podstawie witryny www.goto.com,
możesz je wykorzystać do obliczenia liczby wyszukiwań tych samym słów kluczowych na
większych wyszukiwarkach. Narzędzie GoTo Suggestion Tool (dostępne pod adresem
http://inventory.go2.com/inventory/Search_Suggestion.html) również ułatwi ci wybranie
odpowiednich słów kluczowych. Najlepiej wpisać w SuggestionTool wszystkie słowa
kluczowe i zastosować zwrócone informacje do określenia słów kluczowych, nad jakimi się
skupisz najpierw (możesz również wyszukać inne słowa kluczowe, które zostaną skierowane
w stronę określonej grupy demograficznej użytkowników).
Istnieją również narzędzia i witryny internetowe takie jak Metapsy (www.metapsy.com) i Excite Voyeur
(www.excite.com/search/voyeur) umożliwiające obserwowanie w czasie rzeczywistym, czego użytkownicy
szukają. Te witryny nie przydadzą się może w określeniu spodziewanego ruchu w Sieci dla danego słowa
kluczowego, lecz pomogą ci w zrozumieniu sposobów myślenia użytkowników — czasami jest to bardzo
przerażające!

Inne rozważania związane z procesem wyboru


słów kluczowych
Po dokonaniu wyboru odpowiednich słów kluczowych, nadal możesz przedsięwziąć różne
kroki do zwiększenia ruchu na twojej witrynie. Na przykład możesz dołączyć do swojej listy
powszechnie stosowane błędne formy zapisu słów kluczowych — jest to często stosowana
sztuczka, którą można zaobserwować nawet w niektórych adresach internetowych. Wiele firm
zakupuje popularne błędne formy nazw ich witryn internetowych w nadziei na zwiększenie
ruchu na ich stronach.
Jeśli twoje produkty i usługi ograniczone są do danej lokalizacji, zastosuj ja również jako
słowo kluczowe. Na przykład, jeśli firma świadczy usługi samochodowe w Phoenix, w
Arizonie, wówczas skierowana ona jest wyłącznie do użytkowników z tego właśnie regionu.

Rozdział 23-606
Pamiętaj, że naszym celem jest dostarczenie właściwym użytkownikom właściwych
informacji. Na sprzedawaniu lodu Eskimosom na pewno dobrze nie wyjdziesz.

Gdy już wybrałeś słowa kluczowe


Po wybraniu słów kluczowych następnym etapem jest optymalizacja stron dla pająków
wyszukiwarek i zapewnienie, że twoje witryna internetowa na pewno zostanie wymieniona z
określonymi przez ciebie słowami kluczowymi. Ten proces również może być czasochłonny,
więc zanim przejdziemy do szczegółów dodawania i optymalizacji słów kluczowych na
twoich stronach, zwróćmy uwagę na pewne wytyczne, które pomogą ci w ocenie, czy dobrze
wykonałeś swoje zadanie.
A oto czynniki wspomagające optymalizację stron internetowych dla wyszukiwarek:
• Umieszczenie słowa kluczowego
• Ranga słowa kluczowego
• Częstotliwość słowa kluczowego
• Całkowita liczba słów
• Ciężar słowa kluczowego

Jak już się wkrótce dowiesz, różne wyszukiwarki oceniają strony internetowe podług różnych
kryteriów. Jednakże, postępowanie zgodnie z powyższymi wytycznymi pomoże ci w
uzyskaniu lepszej pozycji na liście rezultatów wyszukania w większości z nich, a co za tym
idzie, w zwiększeniu prawdopodobieństwa odnalezienia twojej witryny internetowej przez jej
docelową publiczność.

• Umieszczenie słowa kluczowego odnosi się do miejsca, w którym dane słowo


kluczowe zostanie umieszczone na stronie HTML. Im bliżej górnej części dokumentu,
tym lepiej. Przeważnie wyszukiwarki wyżej oceniają strony zawierające słowa
kluczowe w tytule i/lub pierwszej linijce tekstu na stronie.
• Ranga słowa kluczowego zależy od tego, jak blisko początku sekcji znajduje się dane
słowo kluczowe, gdzie sekcja stanowi część dokumentu HTML pomiędzy
znacznikami takimi jak <TITLE>, <H1>, czy <BODY>. Aby dane słowo kluczowe
uzyskało jak najwyższą rangę, powinno być umieszczane na początku jak największej
liczby sekcji (trudno będzie tego dokonać na witrynach internetowych całkowicie
wykonanych we Flashu, ponieważ nie zawierają one żadnych dokumentów HTML).
Na przykład, gdyby naszym słowem kluczowym było wyrażenie „części
samochodowe” przykład A uzyskałby wyższą pozycję niż przykład B, ponieważ w
pierwszym słowo kluczowe pojawia się bliżej początku:

Przykład A: <TITLE>Europejskie części samochodowe i akcesoria


</TITLE>
Przykład B: <TITLE>Akcesoria dla europejskich samochodów i
części samochodowych </TITLE>

• Częstotliwość słowa kluczowego odnosi się do liczby zastosowanych słów


kluczowych w dokumencie HTML lub sekcji. W tym przypadku najlepszą radą jest
umiar. Nie uzyskasz dobrego wyniku częstotliwości poprzez zbyt częste używanie
słów kluczowych — po prostu staraj się, aby naturalnie pojawiały się w zdaniach.
Uzyskanie wysokiej częstotliwości występowania słów kluczowych jest trudniejsze na

Rozdział 23-607
witrynach internetowych Flasha, ponieważ nie wszędzie można wstawić tekst. W
dalszej części rozdziału omówimy kilka sposobów rozwiązania tego problemu.
• Całkowita liczba słów oznacza liczbę słów na stronie, bez znaczników HTML i
innych znaków tego typu. Ocena witryn Flasha pod tym względem nie wypada
najlepiej, gdyż przeważnie zawartością jest plik Flasha, lecz tym też się zajmiemy w
dalszej części rozdziału.
• Ciężar słowa kluczowego oznacza wartość procentową słów kluczowych w
dokumencie HTML w porównaniu do wszystkich innych słów. I w tym wypadku nie
należy za wszelką cenę dążyć do uzyskania jak największej wartości procentowej słów
kluczowych. Staraj się zachować naturalny i czytelny styl zawartości.

Znaczniki <META> i kod charakterystyczny dla


innych wyszukiwarek
Skoro wiemy już, jak należy wybierać słowa kluczowe, przejdźmy teraz do omówienia kilku
technik umieszczania słów kluczowych na stronach internetowych. oczywiście najprostszym
sposobem jest dołączenie ich do tekstu na stronach, lecz co zrobić jeśli (na przykład) twoja
witryna wykorzystuje wyłącznie Flasha i nie posiada prawdziwej zawartości tekstowej w
HTML?
Podczas przeglądania strony przeznaczonej do indeksowania pająk wyszukiwarki może
zwrócić uwagę na wiele różnych rzeczy; każdy pająk koncentruje się na czymś innym, w
zależności od profilu jego wyszukiwarki. Przeważnie pająki zwracają uwagę podczas
indeksowania strony na znaczniki <TITLE> i <META>. Zajmiemy się teraz informacjami, na
których koncentrują się pająki, jak również metodami dostosowania tych elementów w celu
polepszenia rankingu naszych witryn.

Co to jest znacznik <META>?


Chociaż nie istnieją żadne reguły zmuszające pająki do wyszukiwania określonego elementu
strony, wielu z nich pomagają w zrozumieniu zawartości znaczniki <META>. Znaczniki
<META> zawierają metadane, czyli dane o danych, dotyczące twoich stron HTML. Innymi
słowy, przechowują one informacje opisujące zawartości (czyli dane) utworzonych przez
ciebie witryn internetowych.
Znaczniki <META> służą do pisywania prawie wszystkiego — nie tylko zawartości strony,
lecz również takich rzeczy jak nazwisko autora czy numer wersji pliku. Jeśli do tworzenia
plików HTML używasz programu Microsoft FrontPage, zapewne zauważyłeś, że aplikacja ta
automatycznie dodaje poniższy znacznik <META>:

<META name="GENERATOR" content="Microsoft FrontPage 4.0">

Ten znacznik informuje nas, że „generatorem” (czyli narzędziem tworzącym) tego dokumentu
był program Microsoft FrontPage 4.0 — lecz jest bardzo powierzchowny przykład
zastosowania tego znacznika.
Przyjrzymy się bardziej szczegółowemu zestawowi metadanych: poniższy dokument jest
pustą stroną HTML ze znacznikami <META> opisującymi jej końcową zawartość:

<HTML>
<HEAD>
<TITLE>Moja Strona Samochodowa </TITLE>
<META http-equiv="Content Type" content="text/html;
charset=windows-1252">

Rozdział 23-608
<META name="GENERATOR" content="Microsoft FrontPage 4.0">
<META name="ProgId"
content="FrontPage.Editor.Document">
<META name="Keywords" content=”samochody, samochód, auto">
<META name="Description" content="Informacje o samochodach.">
<META name="Author" content="Andrew Zack">
<META name="Copyright" content="2000 ZTech Consulting">
<META name="Date" content="2000-12-26">
</HEAD>

<BODY>
</BODY>
</HTML>

Jak widać, metadane zawsze umieszcza się pomiędzy znacznikami <HEAD>. Nie przejmuj
się, jeśli nie rozumiesz znaczenia niektórych znaczników w tym przykładzie — chciałem po
prostu zilustrować ci różne rodzaje informacji jakie możesz wprowadzić pomiędzy znaczniki
<META>. Jak widzisz, opisaliśmy środowisko tworzenia, stwierdziliśmy, że słowa kluczowe,
czyli Keywords mają związek ze stroną, zamieściliśmy opis, Description, zawartości,
jak również informacje o jej autorze i datę wykonania
Znaczniki <META> można stosować do kontrolowania sposobu zachowania się strony. Na
przykład, poniższy kod HTML zmusi stronę zawierającą ten kod do automatycznego
załadowania kolejnej strony:
<META http-equiv="Refresh" content="0; URL=frame.htm">

Natomiast następny fragment kodu HTML utworzy na stronie efekt „pudełka” w przeglądarce
Microsoft Internet Explorer:
<META http-equiv="Page-Enter"
content="revealTrans(Duration=5.0, Transition=0)">

Więcej informacji o znacznikach <META> znajdziesz pod adresem http://vancouver-webpages.com/META.

Znaczniki <META> i słowa kluczowe


Skoro wiemy już, co to są znaczniki <META> możemy zająć się teraz elementami, na które
zwracając uwagę wyszukiwarki. Dobra wiadomość jest taka, że istnieją tylko dwie odmiany
znaczników <META>, które należy znać: znaczniki słów kluczowych, name=”Keywords” i
znaczniki opisu, name=”Description”.
W znaczniku <META> Keywords umieszczamy słowa kluczowe odpowiednie dla naszego
dokumentu. Jak już wspomnieliśmy, należy uważnie dobierać słowa kluczowe i zapewnić, że
w pełni odzwierciedlają one zawartość strony. Nie powtarzaj tego samego słowa kluczowe w
nadziei na uzyskanie lepszych rezultatów, gdyż wiele wyszukiwarek nie pochwala takiego
zachowania. Struktura słów kluczowych w znacznikach <META> Keywords powinna
wyglądać mniej więcej tak:
<META name="Keywords" content="samochody, auto, samochód, książki o samochodach,
podręczniki o samochodach">

W obrębie znacznika Description <META> umieszczamy krótki opis zawartości witryny


internetowej (lub danej strony). Tekst ten zazwyczaj wyświetlany jest w wynikach
wyszukiwania, więc powinien być napisany w taki sposób, aby przyciągnął potencjalnych
gości internetowych. Najlepiej, aby tekst był krótki (przeważnie do 25 wyrazów). Podczas
tworzenia opisu strony/witryny powinieneś skoncentrować się na trzech celach:

Rozdział 23-609
• Opis musi być przykuwać uwagę i zachęcać użytkowników do kliknięcia na nim
• W opisie należy skoncentrować się na ważności słowa kluczowego
• Opis powinien być dopasowany do tytułu strony

Połączenie tych trzech celów może być wyzywające, lecz bądź twórczy i nie zapominaj o
użytkownikach. Chcesz, aby informacje o twojej stronie były efektywnie wyświetlane w
wyszukiwarce, a użytkownicy wyszukiwarek pod wpływem treści opisu kliknęli na twoim
łączu. Aby dowiedzieć się, jak to działa, przyjrzymy się końcowym wynikom z perspektywy
użytkowników.
Zazwyczaj, w rezultatach wyszukiwania wyświetlane są informacje ze znacznika <TITLE>,
po których następuje tekst pobrany ze znacznika <META> Description. Często
wyszukiwarki wyświetlają tylko określoną liczbę znaków z tytułu i opisu. W idealnych
warunkach chcielibyśmy oczywiście, aby nasza witryna została wyświetlona na pierwszej
pozycji i przyciągnęła użytkownika. Poniżej przedstawiliśmy przykład dobrego łącza (dla
osób zainteresowanych kijami golfowymi):

1. Kije golfowe i inne akcesoria golfowe


Posiadamy pełną ofertę kijów golfowych i akcesoriów golfowych, która zaspokoi
wszystkie twoje golfowe potrzeby.
Adres: www.twojawitynagolfowa.com

W tym przykładzie wyrażenie Kije golfowe i inne akcesoria golfowe najprawdopodobniej


stanowi zawartość znacznika <TITLE> w dokumencie HTML, natomiast tekst Posiadamy
pełną ofertę kijów golfowych i akcesoriów golfowych, która zaspokoi wszystkie twoje golfowe
potrzeby pochodzi ze znacznika <META>. Ta pozycja powinna się znaleźć stosunkowo na
liście rezultatów wyszukiwania do słowa „golf”, ponieważ wyraz ten pojawia się dwukrotnie
w tytule i trzykrotnie w opisie (za każdym razem stanowi ono część wyrazów golfowe i
golfowych).

Komentarze HTML
Komentarze na stronach HTML umieszczane są zazwyczaj przez programistów w celu
dokumentacji ich kodu. Nie są one wyświetlane podczas oglądania strony w przeglądarce,
lecz niektóre wyszukiwarki mogą je rozpoznać. Struktura znacznika komentarza jest otwarta,
zatem nie istnieją w zasadzie żadne wskazówki, według których można je stosować jako
technikę optymalizacji wyszukiwania. Najlepiej oczywiście nie powtarzać słów kluczowych
zbyt często, lecz stosować je do wspierania zawartości strony. W miarę możliwości należy
stosować te same zasady co dla znaczników <META>.
Komentarze HTML otwieramy symbolami <!- i zamykamy znakami ->. Pomiędzy tymi
dwoma ogranicznikami możesz umieszczać dowolny tekst. Nie istnieją żadne ograniczenia co
do długości komentarzy, lecz lepiej nie przesadzać. Tutaj, na przykład, przedstawiliśmy
komentarz wspierający przykładową stronę o samochodach:
<!- Ta strona zawiera informacje o podręcznikach samochodowych, samochodach, częściach
samochodu, akcesoriach samochodowych i przewodnikach samochodowych. ->

W tym przykładzie staraliśmy się podkreślić wybrane dla strony słowa kluczowe z
jednoczesnym zachowaniem jasności treści i dobrze sformułowanego zdania komentarza.
Komentarze można umieszczać w dowolnym miejscu w dokumencie HTML, więc możesz
robić nawet takie rzeczy:

Rozdział 23-610
<HTML>
<HEAD>

...kod jak poprzednio...

<!—Moja strona o samochodach jest twoim najlepszym źródłem zawierającym informacje


o częściach samochodów.-->
</HEAD>
<BODY>
<!- Ta strona zawiera informacje o podręcznikach samochodowych, samochodach,
częściach samochodu, akcesoriach samochodowych i przewodnikach samochodowych. ->
</BODY>
</HTML>

Ukryte pola wejściowe


Inną techniką pozwalającą na dodanie więcej informacji ze słowami kluczowymi do twojej
strony internetowej jest zastosowanie ukrytych pól wejściowych. Są one przeważnie
wykorzystywane przez programistów do przesyłania informacji pomiędzy stronami, lecz dla
celów optymalizacji wyszukiwania możesz wpisać słowa kluczowe do atrybutów name i
value, aby zwiększyć ważność słów kluczowych na twojej stronie. A oto przykład:

<INPUT type="Hidden" name="auto" value="podręczniki o samochodach, podręczniki


samochodowe, części samochodowe, akcesoria samochodowe">

Ukryte pola należy umieszczać w głównej części dokumentu; nie są one wyświetlane przez
wszystkie nowe wersje przeglądarek i nie wpłyną one w żaden sposób na wygląd strony.
A oto kolejny przykład z dwoma ukrytymi pola wejściowymi:
<HTML>
<HEAD>

...kod jak poprzednio...

</HEAD>
<BODY>
<!- Ta strona zawiera informacje o podręcznikach samochodowych, samochodach,
częściach samochodu, akcesoriach samochodowych i przewodnikach samochodowych. ->
<INPUT type="Hidden" name="auto"
value=" podręczniki o samochodach, podręczniki
samochodowe, części samochodowe, akcesoria samochodowe">
<INPUT type="Hidden" name="samochod"
value="akcesoria samochodowe, części samochodowe, sklep samochodowy,
podręczniki samochodowe, akcesoria">
</BODY>
</HTML>

Znaczniki obrazków
Następnym tematem naszej dyskusji będzie atrybut alt znacznika <IMG>, służący do
wyświetlania obrazka w dokumencie HTML. Typowy znacznik <IMG> wygląda tak:

<IMG border="0" src="czescisamochodowe.jpg" width="246" height="259">

W tym przykładzie mamy znacznik <IMG> określający plik do zastosowania, jak również
wysokość, szerokość i rozmiar obramowania, z którym obrazek ten będzie wyświetlany. Ze
znacznikiem <IMG> można stosować o wiele więcej różnych atrybutów, lecz my się
skoncentrujemy na atrybucie alt. W tym kontekście, alt jest skrótem od angielskiego
słowa alternative (alternatywa) i oznacza tekst, który zostanie wyświetlony zamiast obrazka
podczas ładowania obrazka lub wówczas, gdy użytkownik wyłączył w swojej przeglądarce
opcję wyświetlania obrazków. W przeglądarce Microsoft Internet Explorer atrybut alt

Rozdział 23-611
wyświetlany jest jako „wskazówka” wyświetlana po umieszczeniu kursora myszy nad
obrazkiem:

A oto znacznik <IMG> z atrybutem alt o treści przygotowanej dla przykładowej strony o
samochodach:
<IMG border="0" src="czescisamochodowe.jpg" width="246" height="259" alt="podręczniki
samochodowe">

Atrybuty alt znaczników <IMG> często odczytywane są przez pająki internetowe i stanowią
kolejny sposób na zwrócenie uwagi na słowa kluczowe. Jeśli na twojej stronie internetowej
nie ma żadnych obrazków, możesz spróbować dodać kontur wokół filmu Flasha lub
przyłączyć obrazek o rozmiarze 1x1 piksel do dokumentu HTML. Jak pewnie zauważyłeś,
wyraz samochód pojawia się również w nazwie pliku obrazka.

Nazwy plików, adresy internetowe i łącza


Treść nazw plików i adresów internetowych, włącznie z nazwą pliku w formacie SWF,
również może pomóc ci w optymalizacji wyszukiwania. Jeśli tylko możesz, umieszczaj słowa
kluczowe w nazwach plików, katalogów, łączy i innych, a na pewno wyjdzie ci to na korzyść.
Większość wyszukiwarek zwraca uwagę na te elementy, więc jeśli będziesz stosować tą
strategię, na pewno zwiększysz ranking twojej witryny w wyszukiwarce. Nazwanie strony
auto.html na pewno przyczyni się do umieszczenia jej na wyższej pozycji na liście rezultatów
wyszukiwania dla słowa kluczowego auto. Taką samą technikę możesz zastosować w
nazwach plików obrazków (auto.gif), a nawet katalogów (/auto/auto.gif).
Omówiliśmy już wszystkie techniki przydatne przy ładowaniu dokumentu ze słowami
kluczowymi bez wpływu na jego wygląd. Pod koniec tego rozdziału zastosujemy je wszystkie
w przykładzie demonstrującym użycie przedstawionych metod na typowej witrynie
internetowej wykonanej we Flashu. Zanim jednak do tego przejdziemy musimy
przedyskutować jeszcze wiele innych rzeczy, włącznie z podjęciem decyzji, czy mamy
pozwolić pająkom w ogóle na przeglądanie danego dokumentu. Ta decyzja i wpływające na
nią czynniki, stanowią temat kolejnej części niniejszego rozdziału.

Rozdział 23-612
Wykluczanie stron z wyszukiwarek
Pomimo tego wszystkiego, co powiedzieliśmy do tej pory, istnieją pewne powody przeciwko
indeksowaniu twoich stron przez wyszukiwarki. Tego typu strony przeważnie można
zaklasyfikować w następujący sposób:

• Strony administracyjne. Są one używane przez administratora witryny do zmiany


lub modyfikacji witryny. Zaproszenie użytkowników do przeglądania tych stron
spowodowałoby natychmiastowe wyświetlenie komunikatu o braku uprawnień
użytkownika do wejścia na daną stronę (źle) bądź dopuszczenie ich do danych, do
których nie powinni mieć dostępu (jeszcze gorzej).
Bardzo ważne strony zawierający zastrzeżone informacje, etc, powinny być umieszczane w bezpiecznych
katalogach.

• Strony wyników. Wyświetlają one wyniki z zapytania lub formularza. Indeksowanie


stron wyników przez wyszukiwarkę na pewno nie da ci żadnych korzyści, a przy
okazji może zrobić nienajlepsze wrażenie na gościach na twojej witrynie internetowej.
• Dynamicznie generowane strony. Wielu administratorów witryn stosuje technologie
typu PHP czy ASP do generowania stron dynamicznie. Mogą one wymagać uprzednio
wprowadzonych przez użytkownika danych wejściowych, lub specjalnego kodu, który
będzie przesyłany z odpowiedniego hiperłącza. Strony tego typu nie powinny być
indeksowane, ponieważ wyświetlałyby niekompletne informacje i zniechęcały
użytkowników do przeglądnięcia innych łączy z twojej witryny.
• Niekompletne lub niepublikowane jeszcze strony. Na wielu serwerach WWW
znajdują się katalogi, w których przechowuje się strony przez umieszczeniem ich w
Internecie. Pająki mogą tam zajrzeć w dowolnej chwili, i jeśli masz taki katalog na
twojej witrynie internetowej, takie strony mogą zostać przedwcześnie indeksowane.
Uważaj jednak przy zabranianiu wstępu na te strony, gdyż możesz skończyć na
tworzeniu stron tymczasowo wykluczonych z indeksowania, z których, po
opublikowaniu ich w Sieci, zapomnisz usunąć tego zabraniającego kodu. O wiele
lepszą metodą jest rozwiązanie tego problemu na poziomie katalogów, czy nawet
znalezienie innego komputera do przechowywania twojej pracy!
• Strony sekwencyjne. Możliwe, że posiadasz zestaw stron, jakie należy oglądać
według określonej kolejności aby uzyskać odpowiednią reakcję użytkownika — może
to być jakaś prezentacja, czy linearne opowiadanie. W takich przypadkach należy
umożliwić pająkowi indeksowanie pierwszej strony lecz wykluczyć pozostałe.

Jak należy zabezpieczyć pewne strony przed pająkami? Istnieją do tego celu dwie
podstawowe techniki, lecz powinieneś wiedzieć, że chociaż są one rozpoznawane przez
większość wyszukiwarek, nie są jednak odporne na głupotę. Jeśli na pewno nie chcesz, aby
dana strona została indeksowana przez pająka, upewnij się, że znajduje się w bezpiecznym
katalogu, do którego pająki po prostu nie mają dostępu.
A do wspomnianych technik należy zastosowanie pliku robots.txt i specjalna wersja
znacznika <META>.

Plik robots.txt
Użycie pliku robots.txt jest najwygodniejszym metodą dla administratorów witryn
internetowych na powstrzymanie pająków przed indeksowaniem ich witryn. Plik ten korzysta

Rozdział 23-613
z protokołu Robots Exclusion Protocol, który w prosty sposób tłumaczy pająkowi (alias
robot), gdzie nie może wchodzić.
Więcej informacji o protokole Robots Exclusion Protocol znajdziesz pod adresem
http://info.webcrawler.com/mak/projects/robots/exclusion.html. Jako wprowadzenie polecam moje
streszczenie informacji dostępnych w dokumentach na wspomnianej stronie.

Na danej witrynie może zastosować tylko jeden plik robots.txt, który powinien znajdować się
w głównym folderze. Po wejściu pająka na twoją witrynę (o adresie, powiedzmy,
www.mojaprzykładowawitryna.com) zacznie przeszukiwanie od pliku
www.mojaprzykładowawitryna.com/robots/txt. Ponieważ adresy internetowe czasami
rozróżniają duże i małe litery, pamiętaj, aby do nazwania pliku użyć małych liter.
A oto przykład podstawowego pliku robots.txt:
# robots.txt dla http://www.mojaprzykładowawitryna.com

User-agent: *
Disallow: /leftnavbar.htm
Disallow: /code.htm
Disallow: /backup/ # wyłącznie dla celów kopii zapasowej
Disallow: /images/ # zawiera wyłącznie obrazki
Disallow: /includes/ # wyłącznie załączniki

Pierwszy wiersz w tym przykładzie to komentarz:


# robots.txt dla http://www.mojaprzykładowawitryna.com

Komentarz oznaczony jest symbolem # i informuje nas o przeznaczeniu tego pliku. Twoje
pliki robots.txt również powinny zawierać taki wiersz. Pozostałe wiersze w przykładzie
ilustrują, że komentarze można umieszczać w dowolnym miejscu w pliku — stosowanie
komentarzy jest powszechnie uznane za dobrą praktykę.
Następny wiersz określa typy pająków, jakie powinny zapoznać się z plikiem robots.txt:
User-agent: *

Symbol * oznacza, że zawartość tego pliku przeznaczona jest dla wszystkich pająków.
Pozostałe wiersze w pliku (rozpoczynające się wyrazem Disallow:) informują pająki,
jakie pliki są wykluczone z ich przeszukiwania. W tym przykładzie pająk ominie dokumenty
leftnavbar.htm, code.htm, a także katalogi backup, images i includes.
Poniżej przedstawiliśmy kilka innych przykładów plików robots.txt. Pamiętaj, że jeśli
chciałbyś zobaczyć jeszcze więcej przykładów, wystarczy przejść na dowolną witrynę
internetową i wpisać nazwę pliku, czyli robots.txt, do przeglądarki — jak pamiętasz, plik ten
zawsze powinien się znajdować w głównym folderze.
Aby wykluczyć wszystkie roboty z całej witryny:
# robots.txt dla http://www.mojaprzykładowawitryna.com
User-agent: *
Disallow: /

Aby udostępnić całą witrynę wszystkim robotom:


# robots.txt dla http://www.mojaprzykładowawitryna.com
User-agent: *
Disallow:

Aby wykluczyć określonego robota:

Rozdział 23-614
User-agent: evilBot
Disallow: /

Roboty i znacznik <META>


Innym sposobem na uniemożliwienie pająkom indeksowania twoich stron jest zastosowania
znacznika <META> Robots, o takiej samej strukturze jak omówione już znaczniki
Keywords i Description. Poprzez dodanie wspomnianego znacznika pomiędzy
znaczniki <HEAD> możesz powstrzymać pająka przed przeglądaniem danej strony. Znacznik
<META> oferuje użytkownik, którzy nie mogą kontrolować pliku robots.txt, sposób na
uniemożliwienie wyszukiwarkom indeksowania ich stron. A oto prosty przykład:
<HEAD>
<TITLE>Strona której nie chcę umieścić w wyszukiwarkach</TITLE>
<META name="Robots" content="NOINDEX">
</HEAD>

Znacznik <META> Robots można stosować do określania następujących opcji:

• NOINDEX — informuje pająka aby nie indeksował danej strony, lecz również
pozwala mu na podążanie za łączami na stronie:
<META name="Robots" content="NOINDEX">

• INDEX — pozwala pająkowi na dołączenie danej strony do wyszukiwarki:


<META name="Robots" content="INDEX">

Obecnie, nie istnieje żaden powód dla którego należałoby wierzyć, że zwiększy to szanse strony na
umieszczenie jej w wykazie, lecz warto spróbować.

• NOFOLLOW — pozwala pająkowi na indeksowanie strony, lecz uniemożliwia


podążanie za łączami na stronie:
<META name="Robots" content="NOFOLLOW">

• FOLLOW — zaleca pająkowi podążanie za łączami na danej stronie:


<META name="Robots" content="FOLLOW">

• NONE — nakazuje pająkowi aby całkowicie zignorował daną stronę. Strony nie należy
indeksować, a łączy nie wolno używać:
<META name="Robots" content="NONE">

Monitorowanie ruchu w Sieci i listingi


W trakcie procesu optymalizacji twojej witryny dla wyszukiwarek powinieneś monitorować
ruch na twojej witrynie. Jeśli witryna ta jest nowa, nie będziesz miał zbyt wiele pracy, lecz
jeśli istnieje już w Sieci od pewnego czasu, raporty z ruchu na witrynie pomogą ci w
określeniu czynników, które zachęcają (lub zniechęcają) internautów do zwiedzania twojej
witryny. Wraz ze wzrostem doświadczenia w optymalizacji wyszukiwania, analityczne
narzędzia stosowania do monitorowania ruchu w Sieci staną się dla ciebie jednymi z
najcenniejszych aplikacji.

Rozdział 23-615
Na rynku znajdziesz obecnie wiele narzędzi pomocnych w monitorowaniu wizyt na twojej
witrynie. Częściowo w oparciu o właściwości i precyzyjność wspomnianych narzędzi, różnią
się one cenowo od darmowych do tysięcy dolarów. Zazwyczaj narzędzia te odczytują pliki
dziennika generowane przez twój serwer i w oparciu o informacje w nich zapisane
przygotowują raporty. Typ zarejestrowanych informacji zależy od konfiguracji i rodzaju
serwera.
Programy te są zazwyczaj również dobre jak informacje zapisane przez serwer. Często serwer nie potrafi
zapisać informacji użytkownika, więc mogą one być niekompletne. Nie można w żadne sposób obejść tego
problemu — jest to po prostu część procesu.

Większość pakietów analizujących ruch w Sieci tworzą raporty pomocne w optymalizacji


witryn internetowych. Przeważnie będziesz zainteresowany poniższymi typami raportów:

• Raporty o adresach internetowych


• Raporty o wyszukiwarkach
• Raporty o wyszukiwarkach według słowa kluczowego
• Raporty o głównych stronach wejściowych (czyli stronach, przez które najczęściej
użytkownicy wchodzą na twoją witrynę)

Po zapoznaniu się z tymi raportami stopniowo nauczysz się rozpoznawać w nich pewne
tendencje i ich związki z wyszukiwarkami. Nie zniechęcaj się, jeśli będziesz musiał trochę
poczekać na wyniki: twoja cierpliwość zostanie nagrodzona, gdy twoja witryna znajdzie się
na pierwszej pozycji na liście wyników wyszukiwania. Śledź najczęściej odwiedzane strony i
zastanawiaj się, jak można je ulepszyć. Często odkryjesz strony na twojej witrynie, które są
wymieniane w listach wyszukiwarek nawet bez twojej wiedzy!
A oto dwa najpopularniejsze narzędzia do przeprowadzania statystyk w Internecie:

• WebTrends (dostępne pod adresem www.webtrends.com). Jest to najczęściej


stosowane narzędzie na rynku, dostępne w wielu wersjach. Należy je zainstalować na
twoim serwerze WWW.
• LiveStats (dostępne pod adresem www.mediahouse.com). Oferuje wiele właściwości
charakterystycznych również dla WebTrends, jak również statystyki prowadzone w
czasie rzeczywistym.

Oprócz tych produktów pracujących na serwerach, dostępnych jest wiele produktów


sieciowych wymagających wyświetlenia banera reklamowego na twojej witrynie i dodanie
kodu do każdej strony. W zależności jednak od stanu twojego budżetu, usługi te mogą okazać
się bardzo przydatne. Do darmowych produktów monitorujących ruch w Sieci należą:
• HitBox (www.hitbox.com)
• StatTrack (www.stattrack.com)

Powinieneś zajrzeć na ich strony internetowe i sprawdzić, czy któryś z tych produktów (jeśli
w ogóle) przyda się do twoich celów. Jakby na to nie patrzeć, są one przydatne dopiero
wówczas, gdy twoja witryna przeciąga już zwiedzających, a jedynym sposobem na dojście do
takiego etapu jest postaranie się, aby została ona umieszczona w listach wyszukiwarek na
pierwszej pozycji! Tym właśnie problemem zajmiemy się za chwilę.

Rozdział 23-616
Zgłaszanie stron do wyszukiwarek
Dostarczanie swoich stron wyszukiwarkom może być dosyć wyczerpujące. W Internecie
istnieje wiele serwisów oferujących tanie usługi zgłaszania twoich stron do wielu witryn
internetowych, lecz w większość przypadków są to witryny o wątpliwej wartości. Proces
zgłaszania jest bardzo istotny i warto poświęcić trochę czasu na zgłoszenie strony do każdej z
głównych wyszukiwarek osobiście.
Pamiętaj, że ponad 90% całego ruchu w Sieci odbywa się w głównych wyszukiwarkach, zatem #1 listing w
dowolnej z mniejszych wyszukiwarek będzie warty mniej niż (powiedzmy) #25 listing w wyszukiwarce
AltaVista.

Należy wziąć jednak pod uwagę pewien cel zastosowania tych narzędzi masowego
zgłaszania. Mimo, że większość wyszukiwarek dostępnych we wspomnianych serwisach
same nie zwiększą ruchu na twojej witrynie, lecz jeśli zostaną zindeksowane przez główne
wyszukiwarki, popularność twojego łącza może się zwiększyć. Nie jest to najważniejsze, lecz
jeśli ciężko pracujesz nad zwiększeniem ruchu na twojej stronie, warto przemyśleć
zastosowanie jednego ze wspomnianych serwisów lub produktów. Do dobrych pakietów tego
typu zalicza się program SubmitWolf firny Trellian Software (www.trellian.com) dla systemu
Windows i Be Found firmy VBE (wwww.vse-online.com) dla Macintosha.
Dla przypomnienia: jeśli próbujesz produkty lub usługi, które zagaszają twoje strony na wielu witrynach, nie
pozwalaj im na zgłaszanie do głównych wyszukiwarek. Warto poświęcić czas na wykonanie naprawdę ważnej
pracy ręcznie.

Szczegóły dotyczące poszczególnych wyszukiwarek


Każda wyszukiwarka stosuje własne kryteria akceptowania, indeksowania i wyświetlania
stron internetowych. skoro przedstawiliśmy już podstawowe działanie ogólnych technik
pomagających w indeksowaniu witryn internetowych, przejdziemy teraz do omówienia
głównych wyszukiwarek i katalogów, abyś zapoznał się ze sposobem ich funkcjonowania.
Wykaz ten na pewno nie będzie kompletny, lecz przedstawimy kilka głównych serwisów
wyszukiwarek dostępnych w Internecie.

Yahoo
Yahoo, krótko mówiąc, jest najpopularniejszą wyszukiwarką w całym Internecie. Główne
rezultaty wyszukiwania Yahoo pochodzą z jej własnej bazy danych filtrowanej przez
pracowników i są wyświetlane w następującej kolejności:

• Categories (kategorie; z bazy danych Yahoo)


• Web sites (witryny internetowe; z bazy danych Yahoo)
• Web pages (strony internetowe; z wyników dostarczanych przez portal Google.com)

Rozdział 23-617
Listing witryn internetowych na Yahoo jest prawdopodobniej największym atutem tej
wyszukiwarki. Zanim jednak nawet rozpoczniesz proces zgłaszania, musisz wybrać
odpowiednią kategorię dla twojej witryny. Warto dokładnie przestudiować strukturę
katalogów Yahoo przed rozpoczęciem zgłaszania. Aby ci w tym pomóc, pod adresem
http://docs.yahoo.com/info/suggest/appropriate.html znajdziesz przewodnik zgłaszania strony
do wyszukiwarki Yahoo.
Po wybraniu odpowiedniej kategorii dla twojej witryny przejdź na dół strony kategorii i
kliknąć na łącze Suggest a Site. Wówczas Yahoo zapisuje twoją pozycję w obrębie tej
struktury katalogu, kiedy zgłaszasz twoją stronę. Następnie musisz uzbroić się w cierpliwość i
poczekać na wyniki. Na Yahoo rzadko udaje się wysłać kilka stron z tej samej witryny, a ty
przecież nie chcesz zostać uznany przez Yahoo za szkodnika!
W trakcie procesu zgłaszania będziesz mógł podać tytuł, adres internetowy i opis swojej
witryny. Uważaj, aby do tych informacji nie wkradły się błędy i staraj się zachować jasność
tekstu jednocześnie umieszczając w nim słowa kluczowe twojej witryny. Pamiętaj, że jest to
jedynie sugerowane łącze, i recenzent Yahoo może je odrzucić, przenieść, a nawet zmienić
opis. Rady odnośnie zgłaszania stron na Yahoo znajdziesz pod adresem
http://help.yahoo.com/help/url.
Nie zgłaszaj stron wejściowych do Yahoo; wyślij wyłącznie swoją stronę domową.

Usługa ekspresowego zgłaszania Business Express


Yahoo oferuje ekspresową usługę zgłaszania o nazwie Business Express za $199. Jeśli cena ta
zawiera się w twoim budżecie, polecamy skorzystanie z tej usługi: gwarantuje ona, że w ciągu
siedmiu dni dokonana zostanie recenzja twojej witryny i otrzymasz pisemną odpowiedź, jeśli
nie zostanie ona zaakceptowana do listingu.

Sposób wyświetlania rezultatów


Gdy twoja strona pojawi się w wynikach wyszukiwania Yahoo zazwyczaj wyświetlana jest w
taki sposób, w jaki ją wysłałeś, jednakże recenzent Yahoo może wprowadzić pewne zmiany.

Szukanie witryny internetowej na Yahoo


Aby zlokalizować twoja witrynę w wyszukiwarce Yahoo nie trzeba uciekać się do żadnych
sztuczek. Możesz ją odnaleźć szukając według tytułu, adresu internetowego lub kategorii.

Rozdział 23-618
Popularność łączy
Niektóre wyszukiwarki zapisują częstotliwość podążania za danymi łączami w nich
zawartymi i przesuwają najpopularniejsze na górę listy. Yahoo nie stosuje jednak tej techniki.

Strona na dodanie adresu internetowego


Opcja ta zależy od wybrane kategorii.

AltaVista
AltaVista jest jedną ze starszych wyszukiwarek i przez cały czas konsekwentnie była jednym
z największych serwisów indeksujących strony. Jest obsługiwana przede wszystkim przez
pająka o nazwie Scooter i posiada kilka innych podobnych pająków koncentrujących się na
poszczególnych zadaniach (takich jak przeglądanie istniejących łączy aby upewnić się, że
nadal są aktualne). Oprócz własnej bazy danych, AltaVista oferuje wyszukiwania oparte o
katalogi obsługiwane przez LookSmart i „sponsorowane” listingi dostarczane przez
wyszukiwarkę GoTo.com, które wyświetlane są poniżej wyników AltaVisty na pierwszej
stronie rezultatów każdego wyszukiwania:

AltaVista jest kolejną witryną służącą poradami dotyczącymi zgłaszania łączy. Więcej
informacji o tej wyszukiwarce znajdziesz pod adresem
http://doc.altavista.com/adv_search/ast_haw_index.html.

Sposób wyświetlania rezultatów


AltaVista wyświetla w rezultatach wyszukiwania tytuł dokumentu HTML w oddzielnej
linijce, po którym następuje opis zawarty w znacznikach <META>. Jeśli do danej witryny nie
dostarczono takiego opisu wyświetlane są pierwsze linijki tekstu znajdującego się na stronie.

Kryteria stosowane do indeksowania


AltaVista jest prawdziwą wyszukiwarką, która indeksuje strony w oparciu o różne kryteria.
Podczas zgłaszania lub tworzenia strony dla AltaVisty warto wziąć pod uwagę następujące
wskazówki:
• Poczekaj, aż AltaVista odnajdzie twoją witrynę. Uważa się, że AltaVista lepiej ocenia
strony, które znajduje sama. Jeśli nie masz czasu na czekanie, możesz pozwolić, aby

Rozdział 23-619
główna strona została znaleziona przez AltaVistę, lecz zgłoś stronę wejściową, lub
jakąś inną, która zawiera łącza do wielu innych stron na twojej witrynie.
• Przy klasyfikacji witryn, AltaVista zwraca uwagę na popularność łączy.
• Umieść słowa kluczowe w tytule strony, i jeśli jest to możliwe, również w adresie
internetowym.
• AltaVista zwraca większą uwagę na dłuższe strony, więc jeśli możesz umieść
wystarczającą ilość tekstu na stronach wejściowych.
• AltaVista bezwzględnie walczy ze spamem, zatem zapoznaj się z regułami
obowiązującymi w tej wyszukiwarce zanim wyślesz na nią strony. Informacje o
polityce spamowej AltaVisty znajdziesz pod adresem
http://doc.altavista.com/adv_search/ast_haw_spam.html.

Wyszukiwanie stron witryny internetowej przez AltaVista


Na AltaViście można w wygodny sposób wyszukać stron w jej indeksie. Aby sprawdzić, czy
dana witryna znajduje się na liście, dokonaj wyszukiwania zgodnie z poniższym wzorem:

adres internetowy: www.twojawitryna.com

Wówczas AltaVista wyświetli wszystkie strony z podanej witryny, które znajdują się obecnie
w indeksie.

Popularność łączy
AltaVista wykorzystuje popularność łączy do zwiększenia rankingu danej strony. Aby
sprawdzić popularność twojego łącza dokonaj wyszukiwania zgodnie z poniższym wzorem:

łącze: www.twojawitryna.com

W Internecie dostępne są również narzędzia pomagające w sprawdzeniu popularności daje


witryny na różnych witrynach. Ja wypróbowałem dwa, znajdujące się pod adresami
www.linkpopularitycheck.com i www.searchengineworld.com/cgi-bin/linkage.cgi.

Strona na dodanie adresu internetowego


http://doc.altavista.com/addurl

Google
Google jest jednym z nowszych graczy w przemyśle wyszukiwarek i szczyci się jedną z
największych baz danych łączy (obecnie zawiera ona grubo ponad milion adresów).
Wyszukiwarka Google związała się z Yahoo, ustanawiając ją drugorzędnym dostawcą
wyników zamiast Inktomi. Google oferuje również wyszukiwanie katalogowe, obsługiwane
przez dmoz.org. Obecnie, po wejściu na witrynę wyszukiwarki Google, pierwszym
wyświetlonym łączem będzie łącze sponsorowane. Następnie pojawią się odpowiednie
kategorie katalogów i na koniec rezultaty własnego wyszukiwania:

Rozdział 23-620
Sposób wyświetlania rezultatów
W wynikach wyszukiwania Google wyświetlany jest tytuł dokumentu HTML, a następnie
opis napisany w oparciu o słowa pojawiający się w pobliżu słów kluczowych na twojej
stronie. Zazwyczaj jest to jedna z pierwszych linijek tekstu zawierająca szukane słowo
kluczowe. Wygląda na to, że do tego celu Google nie korzysta ze znaczników <META>.

Kryteria stosowane do indeksowania


Google indeksuje strony korzystając z pająka o nazwie Googlebot i jest obecnie jedną z
najszybszych witryn indeksujących nowe strony. Podczas zgłaszania lub tworzenia strony dla
Google’a warto rozważyć poniższe wskazówki:
• Mechanizm wyszukiwania Google nie rozróżnia dużych i małych liter.
• Aby dana strona została wymieniona w wynikach wyszukiwania, wszystkie słowa
umieszczone w zapytaniu muszą znajdować się na tej samej stronie.
• Google wyżej ocenia witryny o znacznej popularności łączy.
• Umieść słowa kluczowe w tytule strony, a jeśli to możliwe również w adresie
internetowym.

Wyszukiwanie stron witryny internetowej przez Google


Obecnie, wyszukanie witryny na Google’u nie jest łatwe. Jednym ze sposób, który pomaga w
zrozumieniu działania tego mechanizmu jest poeksperymentowanie z darmową usługą
wyszukiwania witryn dostępną pod adresem http://serivces.google.com/cobrand/free_select.
Narzędzie to umożliwia dodanie do twojej witryny funkcjonalności wyszukania Google,
włącznie z wyszukiwaniem specyficznym dla witryny. Nie musisz koniecznie korzystać z tej
usługi, lecz podasz swoją nazwę domeny w pierwszym etapie procesu, Google zwróci
całkowitą liczbę łączy dla tego domeny. Inną techniką jest zastosowanie zaawansowanego
wyszukiwania i wyszukanie słowa znajdującego się na każdej stronie twojej witryny (na
przykład nazwa twojej firmy) określając domenę tak, jak zwykle to robisz.

Popularność łączy
Podobnie jak AltaVista Google wykorzystuje popularność łączy do zwiększenia rankingu
danej strony. Aby sprawdzić popularność twojego łącza zastosuj wyszukiwanie zgodnie z
poniższym wzorem:

łącze: www.twojawitryna.com

Rozdział 23-621
Strona na dodanie adresu internetowego
http://www.google.com/addurl.html

Dmoz.org — The Open Directory Project


Open Directory Project (www.dmoz.org) jest to usługa wyszukiwania katalogów
internetowych prowadzona przez woluntariuszy, którzy wyrazili zgodę na utrzymywanie
poszczególnych obszarów zawartości witryny. Aby wysłać witrynę należy wykonać takie
same czynności jak w wyszukiwarce Yahoo. Uzyskanie dobrego listingu jest tutaj bardzo
ważne, ponieważ wykorzystywany jest one przez wiele głównych wyszukiwarek. W
momencie publikacji niniejszej książki, Google, HotBot, Netscape i AOL Search korzystały z
projektu Open Directory Project.

Sposób wyświetlania rezultatów


Wyniki wyszukiwania na Open Directory Project wyświetlane są zazwyczaj w taki sposób, w
jaki je wysłałeś, chociaż recenzent może wprowadzić w nich pewne zmiany.

Popularność łączy
Ponieważ Open Directory Project nie korzysta z pająka, popularność łączy nie jest brana pod
uwagę.

Strona na dodanie adresu internetowego


Opcja ta zależy od wybranej kategorii.

Inktomi
Inktomi jest wewnętrznym dostawcą usług wyszukiwania wykorzystywanych przez wiele
popularnych witryn. Obecnie ponad 100 portali internetowych używa Inktomi jako głównego
lub drugorzędnego dostawcę wyników wyszukiwania. Do tych portali należą między innymi
iWon, AOL Search, HotBot, GoTo i NBCi (poprzednio Snap).
Inaczej niż w przypadku wielu innych wyszukiwarek, Inktomi nie posiada żadne
„zewnętrznego” serwisu— rezyduje ona tylko za kulisami wielu jej partnerów wyszukiwarek.
Większość z nich korzysta z tej samej bazy danych, lecz stosują różne kryteria dla wyników,
co w efekcie daje podobne lecz nie identyczne rankingi, w zależności od danej wyszukiwarki.
Pająk Inktomi zwraca szczególną uwagę na słowa kluczowe w tytule strony, jak również na
tekst zawarty między znacznikami <META>. Zgłoszenie do Inktomi należy realizować przez
jednego z jej partnerów. HotBot, na przykład, znajdziesz od adresem
http://hotbot.lycos.com/addurl.asp.

Płatne zgłaszanie
Program płatnego zgłaszania Inktomi umożliwia zgłaszanie i dołączenie stron internetowych
za opłatą. Usługa jest płatna w zależności od liczby stron, jakie chcesz dołączyć do bazy
danych i obejmuje ponowne indeksowanie co 48 godzin aby zachować ciągłą aktualizację
twojej witryny. Jeśli dysponujesz wystarczającym budżetem, dzięki tej usłudze twoja witryna
zostanie rozpoznana szybko prze wiele głównych wyszukiwarek. Więcej informacji o tej
usłudze znajdziesz pod adresem
http://www.inktomi.com/products/search/pagesubmission.html.

Wyszukiwanie stron witryny internetowej przez wyszukiwarki Inktomi


Aby wyszukać strony twojej witryny internetowej na wyszukiwarkach obsługiwanych przez
Inktomi, wystarczy wpisać adres internetowy twojej witryny. O zlokalizowaniu jednego z

Rozdział 23-622
łączy do twojej witryny, będzie mógł obejrzeć więcej rezultatów z tej samej witryny. Poprzez
zastosowanie tej opcji, wyświetlone zostają wszystkie rezultaty dla tej witryny.

GoTo.com
Ostatnią wyszukiwarką, jaką omówimy, jest GoTo.com, która jest największą wyszukiwarką
działającą na zasadzie opłata za kliknięcie. Administratorzy WWW mają możliwość
licytowania prowadzących w rankingu miejsc w systemie czasu rzeczywistego — innymi
słowy, mogą kupować ruch w sieci w zależności od popularności danego słowa kluczowego.
Wyniki z wyszukiwarki GoTo.com wyświetlane są w wielu głównych wyszukiwarkach
(takich jak AltaVista, America Online, Lycos i HotBot) zazwyczaj jako „witryna
sponsorowana” lub „sponsor”.

Ćwiczenie
Wreszcie omówiliśmy wszystkie zagadnienia teoretyczne, jakie powinieneś znać, aby móc
podejmować rozsądne decyzje o sposobie rozpowszechnienia twojej witryny internetowej w
zmiennym morzu światła, jakim jest Internet. Przed zakończeniem tego rozdziału spróbujemy
zastosować świeżo zdobytą wiedzę na świeżo wyprodukowanej witrynie internetowej Flasha.
W naszym przykładzie wykonamy witrynę sprzedającą części i akcesoria dla pojazdów z
napędem na cztery koła. Zawartość przygotujemy całkowicie we Flashu, więc nie będzie
żadnych widocznych elementów utworzonych w języku HTML.
Po dokonaniu analizy zdecydowałem, że naszymi głównymi słowami kluczowymi będą
napęd na cztery koła, 4 koła, części do ciężarówek i akcesoria dla ciężarówek. Główna strona
witryny nosi nazwę index.html i będzie ona zawierać mała prezentację Flasha informującą
użytkowników o witrynie. Omówimy teraz proces optymalizacji tej strony.
Prawdopodobnie zastanawiasz się nad dodatkowymi słowami kluczowymi, które można by tutaj zastosować
— na myśl przychodzą słowa cztery i kierować — lecz poprzez zachowanie niewielkiej liczby słów unikniemy
(miejmy nadzieję) powtarzania. Zobaczysz, że jeślibyśmy chcieli, włączenie dodatkowych słów kluczowych nie
byłoby wcale trudne.

Po wykonaniu doskonałego filmu następnym etapem jest opublikowanie pliku Flasha. Opcje
w oknie dialogowym Publish Settings mogą pomóc ci w optymalizacji pliku.
Administrator naszego serwera poinformował nas, że domyślna strona domowa musi nosić
nazwę index.html, lecz nie powstrzymuje nas to przez zmianą nazwy pliku SWF na 4-
kolka.swf, umieszczając w ten sposób, przy pierwszej okazji, jedno z naszych słów
kluczowych w dokumencie:

Rozdział 23-623
Po dokonaniu tych zmian, opublikowaniu filmu i otworzeniu dokumentu index.html w
edytorze tekstu powinieneś w nim znaleźć fragment kodu zbliżony do poniższego listingu,
którego sformatowaliśmy dla zachowania przejrzystości:
<HTML>
<HEAD>
<TITLE>4-kółka</TITLE>
<HEAD>
<BODY bgcolor="#FFFFFF">
<!- adresy zastosowane w filmie ->
<!- tekst zastosowany w filmie ->
<!- Trzymaj się z daleka ->
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=5,0,0,0"
width="221" height="56">
<PARAM name="movie" VALUE="4-kolka.swf">
<PARAM name="quality" VALUE="high">
<PARAM name="bgcolor" VALUE="#FFFFFF">

<EMBED src="4-kolka.swf" quality="high" bgcolor="#FFFFFF"


width="221" height="56"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/shockwave/download/
index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT>
</BODY>
</HTML>

Następnie chcemy zmodyfikować znacznik <TITLE>. Jak już wspomnieliśmy w tym


rozdziale jest to niezwykle ważne, ponieważ jest to przeważnie główna informacja
wyświetlana o stronie w wyszukiwarce i często przepełniona jest słowami kluczowymi. Skoro
nasza strona poświęcona jest częściom i akcesoriom dla czterech kółek, a nazwa naszej firmy
brzmi XYZ, postanowiliśmy nadać tytuł „XYZ — Części i Akcesoria dla Ciężarówek o
napędzie na 4 koła”. W edytorze tekstu zmieniliśmy znacznik <TITLE> na:
<TITLE>XYZ — Części i Akcesoria dla Ciężarówek o napędzie na 4 koła</TITLE>

Ten nowy tytuł zawiera wiele z naszych słów kluczowych, takich jak 4 koła, części dla
ciężarówek i akcesoria dla ciężarówek (chociaż wyrażenie Akcesoria dla ciężarówek nie jest
najważniejsze, wiele pająków je wybierze, ponieważ pojawiają się w niej obydwa słowa),
części XYZ, akcesoria dla 4 kółek i wiele innych kombinacji słów kluczowych również mogą
zostać zaindeksowane.
Teraz zajmiemy się znacznikami <META>. W tym przykładzie nie interesują nas ani
informacje o autorze, ani dana publikacji. Zamiast tego skoncentrujemy się na różnych
elementach, na które pająk może zwrócić uwagę: tych tworzących słowa kluczowe,
Keywords i opis, Description. Pierwszy z elementów powinien wziąć pod uwagę
wszystkie nasze słowa kluczowe i ich wariacje. Po chwili zastanowienia postanowiliśmy
zastosować następujący kod HTML:
<META name="keywords"
content="napęd na 4-kółka, części dla ciężarówek, 4 koła, akcesoria dla ciężarówek,
części dla 4 kółek, akcesoria dla 4 kółek">

Opracowaliśmy nasze słowa kluczowe w oparciu o te wymyślone w poprzedniej dyskusji, jak


również dołączyliśmy kilka wariacji na podany temat (w nadziei na zwiększenie
częstotliwości słów kluczowych i zastosowanie wyszukiwaczy wyrażeń podobnych do
naszych słów kluczowych). Wybór słów kluczowych nie należy jednak do nauk ścisłych i

Rozdział 23-624
wyszukiwarka podejdzie do nich w inny sposób. Wraz z poszerzeniem wiedzy i
doświadczenia o wyszukiwarkach, będziesz już wiedział, co one wyszukują i jak odpowiednio
powinieneś zmodyfikować swoje znaczniki słów kluczowych Keywords <META>.
W przypadku znacznik opisu, Description <META>, należy zauważyć, że pająki również
mogą go przeglądać w poszukiwaniu słów kluczowych. Musimy jednak zachować
równowagę pomiędzy umieszczaniem słów kluczowych a czytelnym i przyciągającym
opisem, gdyż często wyszukiwarki wyświetlają właśnie ten tekst. Dla tej strony dodamy
następujący opis, który zawiera słowa kluczowe i dobre objaśnienie naszej witryny
internetowej Flasha:
<META name="description"
content="XYZ jest twoim źródłem części dla ciężarówek z napędem na 4 koła,
akcesoriami i więcej.
XYZ jest sklepem, który zaspokoi wszystkie twoje 4-kołowe potrzeby.">

Opis informuje użytkownika, czego może się spodziewać po naszej witrynie, jak również
podaje pająkowi słowa kluczowe (ponownie): 4 koła, 4-kołowy, części dla ciężarówek i
akcesoria.
Wszystkie znaczniki <META> umieszczone są pomiędzy znacznikami <HEAD> dokumentu
HTML. Wraz z dodanymi nowi elementami, które tutaj omówiliśmy, nasz dokument HTML
powinien wyglądać tak:
<HTML>
<HEAD>
<TITLE>XYZ — Części i Akcesoria dla Ciężarówek o napędzie na 4 koła</TITLE>
<META name="keywords"
content="napęd na 4-kółka, części dla ciężarówek, 4 koła, akcesoria dla
ciężarówek, części dla 4 kółek, akcesoria dla 4 kółek">
<META name="description"
content="XYZ jest twoim źródłem części dla ciężarówek z napędem na 4 koła,
akcesoriami i więcej.
XYZ jest sklepem, który zaspokoi wszystkie twoje 4-kołowe potrzeby.">
</HEAD>
<BODY bgcolor="#FFFFFF">

...jak poprzednio...

</BODY>
</HTML>

Mamy teraz dokument HTML z kilkoma słowami kluczowymi i dużą dawką informacji dla
odwiedzającego go pająka. Następnym etapem będzie dodanie kilku znaczników komentarza.
Jak wiesz, znaczniki komentarza można umieszczać w dowolnym miejscu dokumentu
HTML, gdyż nie są one odczytywane przez wyszukiwarki, lecz mogą być rozpoznawane
przez pająki. Znaczniki komentarza powinny zawierać informacje dla programistów, więc aby
nasze znaczniki wzbudzały zaufanie, wypróbujmy poniższe:
<EMBED src="4-kolka.swf" quality="high" bgcolor="#FFFFFF"
width="221" height="56"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/shockwave/download/
index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT>
<!- Ta strona zawiera informacje o ciężarówkach z napędem na 4 koła, częściach,
akcesoriach i inne związane wiadomości. ->
</BODY>
</HTML>

W ten sposób, z całej listy technik optymalizacji strony dla wyszukiwarki zostały nam jeszcze
tylko dwie: ukryte pola wejściowe i znaczniki <IMG>. Jak już wspomnieliśmy, w ukrytych

Rozdział 23-625
polach wejściowych można umieścić zawartość, która nie będzie wyświetlana przez
przeglądarkę, lecz może zostać rozpoznana przez pająki. Zgodnie z naszą aktualną strategią,
dodamy dwa ukryte znaczniki wejściowe powtarzając odrobinę zmodyfikowane wersje
znaczników <META> Keywords i Description.
Pola te umieścimy w głównej części dokumentu:
<INPUT type="Hidden" name="4 kolka"
value="4-kołowy, części dla ciężarówek, 4 koła, akcesoria dla ciężarówek, części
dla 4 kółek, akcesoria dla 4 kółek">
<INPUT type="Hidden" name="4-kolowy"
value="XYZ jest twoim źródłem części dla ciężarówek z napędem na 4 koła,
akcesoriami i więcej.
XYZ jest sklepem, który zaspokoi wszystkie twoje 4-kołowe potrzeby.">

Zauważ, że wszystkie elementy, jakie do tej pory dodaliśmy do strony, są niewidoczne.


Wszystkie obrazki jakie zastosujemy, będą „widoczne”, lecz jeśli chcemy, możemy tak je
zaprogramować, aby nie były wdziane przez użytkowników. Ponieważ tło tej strony jest w
kolorze białym, wykonamy obrazki w tym samym kolorze co tło, aby nie rozpraszały one
uwagi użytkowników.
Dla tego przykładu przygotowaliśmy obrazek o wysokości 1 i długości 10 pikseli, w takim
samym kolorze jak tło. Nadaliśmy mu nazwę 4-kółka.gif, aby pasowała do naszych słów
kluczowych. Ponieważ pliku tego nie będzie można łatwo zobaczyć, umieścimy go w
ostatnim wierszu głównej części dokumentu HTML aby nie kolidował z innym kodem, nad
którym będziemy pracować w przyszłości. W atrybucie alt znacznika <IMG> również
dodaliśmy, po raz kolejny, słowa kluczowe. A oto przykład:
<IMG border="0" src="4-kolka.gif"
width="10" height="1"
alt="części i akcesoria dla 4 kółek">

I już! Mamy już zoptymalizowaną stronę, gotową do wyszukania przez pająki i


zindeksowania według naszych słów kluczowych. Pamiętaj jednak, że jest to bezustannie
zmieniający się proces, a w tym rozdziale pracowaliśmy tylko na przykładzie. Aby uzyskać
jak największą efektywność, trzeba eksperymentować z różnymi technikami dla różnych
wyszukiwarek. Poniżej przedstawiliśmy końcowy kod dla naszego przykładu:
<HTML>
<HEAD>
<TITLE>XYZ — Części i Akcesoria dla Ciężarówek o napędzie na 4 koła</TITLE>
<META name="keywords"
content="napęd na 4-kółka, części dla ciężarówek, 4 koła, akcesoria dla
ciężarówek, części dla 4 kółek, akcesoria dla 4 kółek">
<META name="description"
content="XYZ jest twoim źródłem części dla ciężarówek z napędem na 4 koła,
akcesoriami i więcej.
XYZ jest sklepem, który zaspokoi wszystkie twoje 4-kołowe potrzeby.">
</HEAD>
<BODY bgcolor="#FFFFFF">
<!- adresy zastosowane w filmie ->
<!- tekst zastosowany w filmie ->
<!- Trzymaj się z daleka ->
<INPUT type="Hidden" name="4 kolka"
value="4-kołowy, części dla ciężarówek, 4 koła, akcesoria dla ciężarówek,
części dla 4 kółek, akcesoria dla 4 kółek">
<INPUT type="Hidden" name="4-kolowy"
value="XYZ jest twoim źródłem części dla ciężarówek z napędem na 4 koła,
akcesoriami i więcej.
XYZ jest sklepem, który zaspokoi wszystkie twoje 4-kołowe potrzeby.">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=5,0,0,0"
width="221" height="56">
<PARAM name="movie" VALUE="4-kolka.swf">

Rozdział 23-626
<PARAM name="quality" VALUE="high">
<PARAM name="bgcolor" VALUE="#FFFFFF">

<EMBED src="4-kolka.swf" quality="high" bgcolor="#FFFFFF"


width="221" height="56"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/shockwave/download/
index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT>
<!- Ta strona zawiera informacje o ciężarówkach z napędem na 4 koła, częściach,
akcesoriach i inne związane wiadomości. ->
<IMG border="0" src="4-kolka.gif"
width="10" height="1"
alt="części i akcesoria dla 4 kółek">
</BODY>
</HTML>

Zakończenie
Pamiętaj, że tworzenie witryny internetowej to dopiero początek. Skoro rozumiesz już teraz,
w jaki sposób należy wprowadzić swoją witrynę internetową na rynek internetowy
powinieneś już dać sobie radę ze znalezieniem wielu metod na zwiększenia ruchu na twojej
witrynie. Miejmy nadzieję, że proste techniki opisane w tym rozdziale pomogą ci zwrócić
uwagę internautów na twoją witrynę, zwiększyć liczbę gości, zwłaszcza liczbę odpowiednich
gości, czyli twojej docelowej publiczności.
Wraz ze wzrostem popularności wyspecjalizowanego świata Flasha i poszukiwań witryn
internetowych wykonanych we Flashu nie tylko z powodu świetnych właściwości Flasha, lecz
ze względu na ich zawartość, zasady omówione przez nas na pewno ci się przydadzą.
Będziesz poruszać w technologiach indeksowania i śledzić ruchy twojej publiczności. Gdyż,
kto w końcu chciałby prowadzić witrynę internetową, o której nikt nigdy nie słyszał!

Rozdział 23-627

You might also like