Professional Documents
Culture Documents
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.
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){
Rozdział 1-14
Część 1. Preludium
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.
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ą.
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.
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.
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?
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.
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
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ą?
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.
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.
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
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.
Rysunek
brak
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
Rysunek
brak
Rysunek
KONTRAST brak
TESKT/TŁO
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.
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
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
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
Pola i obszary
Rysunek
brak
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
Równowaga
Rysunek
brak
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
Rysunek
brak
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ą:
Wartość i jasność
Wartość jasności, czyli zawartość jasności w kolorze.
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
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
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
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...
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.
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ę.
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.
Rysunek
49 brak
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
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
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
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ą
Rysunek
WIZYTÓWKA 1 brak
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
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ą.
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):
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:
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:
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.
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]);
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:
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:
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.
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;
}
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;
}
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ć.
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;
}
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";
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;
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:
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;
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");
Rozdział 2-75
on (release, releaseOutside) {
stopDrag ();
dragging = false;
_root.s.stop();
}
Rozdział 2-76
Część 2. Tworzenie zawartości
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.
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.
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.
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.
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.
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.
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:
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...
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.
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.
CASTLE
COMPONENTS
(ELEMENTY
ZAMKU)
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.
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)
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
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.
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.
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:
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.
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:
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:
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:
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.
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:
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:
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.
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.
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:
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.
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:
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:
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ć.
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.
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.
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:
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.
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.
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.
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:
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.
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ą.
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:
Rozdział 6-159
5. Otwórz klip filmowy vlm_slider i umieść lewą górną punkturę obrazka w pozycji 0,–
5.
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 ();
}
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);
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:
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.
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);
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.
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)
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();
Rozdział 6-170
_root.bg_color.mycolor[(slidername-1)] = this.vlm_slider1._y;
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.
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);
WysokoscSceny − WysokoscMyszy
Glosnosc = × 100
WysokoscSceny
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);
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.
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;
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);
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.
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:
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:
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:
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ę.
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ąć.
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%
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ę.
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.
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.
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:
Rozdział 7-192
7. Teraz opublikuj film i obejrzyj go w przeglądarce.
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:
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...
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:
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:
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:
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:
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:
Rozdział 8-203
Color wheel — koło kolorów
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).
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:
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.
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:
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++;
}
howmany++;
duplicateMovieClip (bubble, “bubble”+howmany, howmany);
ba[howmany] = this[“bubble”+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;
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.
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.
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:
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.
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:
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.
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;
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);
...
i<theText.length;
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);
balls[i]._x = 20*i;
balls[0] = ball0;
balls[0] = ball0;
balls[0].text = theText.charAt(0);
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;
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);
}
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:
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);
-balls[i]._x
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;
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);
}
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
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:
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;
}}
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 );
}
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ą...
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.
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:
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.
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.
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.
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;
}
}
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.
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.
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.
<HTML>
<FRAMESET cols="175, *">
<FRAME src="SimpleMenu.html">
<FRAME src="home.html" name="target">
</FRAMESET>
</HTML>
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:
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.
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!
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.
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”;
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...
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:
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;
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;
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;
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:
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;
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:
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”.
i=0;
while(i<5 {
print “hello”;
i++;
}
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);
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.
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:
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;
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ść
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;
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;
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
}
Rozdział 10-267
n = Math.ceil(halfi);
while (halfi == n)
{
halfi /=2;
n = Math.ceil(halfi);
}
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);
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);
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;
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;
}
...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;
}
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.
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:
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.
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.
Rozdział 11-278
movie1.loadMovie("http://mysite.com/really_big.swf");
movie1.stop();
movie1._visible = false;
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();
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.
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.
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.
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);
• 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 = {
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();
Rozdział 11-286
}
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:
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) {
...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;
Pamiętaj, że obiekt col jest kopią wbudowanego we Flashu obiektu Color, który
wskazuje bieżący — this — klip filmowy po inicjalizacji funkcji:
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();
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ę.
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ę.
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.
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:
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.
Interfejs wejściowy
SetOrientation(orientation)
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);
}
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;
}
}
Rozdział 11-296
on (rollOut) {
onButtonUp();
}
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") ();
}
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:
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();
}
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);
}
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();
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();
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;
}
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);
}
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]
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ę:
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);
}
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);
}
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);
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;
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);
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.
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
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:
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);
}
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);
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:
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:
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;
}
}
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.
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:
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:
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!
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;
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);
Rozdział 12-325
kern[67]=15//C
kern[68]=15//D
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;
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;
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();
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:
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;
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:
}
_parent.h_offset=_parent.letters[_parent.num_chars].hoffset;
removeMovieClip(_parent.letters[_parent.num}chars]);
_parent.num_chars--;
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 ();
}
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;
if (i == (pointArray.length -1)) {
lines[i].p2 = pointArray[0];
} else {
lines[i].p2 = pointArray[i+1];
}
}
}
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:
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.
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:
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();
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;
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;
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:
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;
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:
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;
Rozdział 13-344
Yspeed = Yspeed*-1;
}
_x = BallX;
_y = BallY;
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.
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.
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;
}
Rozdział 13-347
Yspeed powracają do swoich oryginalnych wartości za pomocą zmiennych
Xspeedsave i Yspeedsave.
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:
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);
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;
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.
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);
}
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;
}
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ę:
Rozdział 13-354
8. Następnie dodaj poniższe akcje w ujęcie 2 na warstwie Code:
CreatureX = _x;
CreatureY = _y;
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;
Rozdział 13-356
}
if (Pause <=2) {
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 ();
}
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 ();
}
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;
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:
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ż.
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.
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:
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.
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");
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 ();
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);
PlayerShot._visible = 0;
EnemyNum=-1;
EnemySpeed=2;
GameScore=0;
Enemy.gotoAndStop(31);
PlayerShip.CraftSpeed=10;
Mover.Laser=0;
Shield=0;
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);
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);
}
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:
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;
}
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...
...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.
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;
if (MineSpeedX>MineMax) {
MineSpeedX = MineMax;
Rozdział 14-375
}
if (MineSpeedX<-MineMax) {
MineSpeedX = -MineMax;
}
if (MineSpeedY>MineMax) {
MineSpeedY = MineMax;
}
if (MineSpeedY<-MineMax) {
MineSpeedY = -MineMax;
}
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);
}
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;
}
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
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);
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);
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;
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);
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:
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;
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 ();
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ń.
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.
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)
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:
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;
}
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();
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.
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.
// 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;
}
...zastąpiliśmy następującym:
Zpos = Radius * Math.sin (Angle);
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;
}
// 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.
// perspektywa
Depth = 1 / (1 - (Zpos / perspective));
// rysuj
Point._x = centerPoint._x;
Point._y = (Ypos * Depth) + centerPoint._y;
Point._yscale = Point._xscale = Depth * 100;
}
Nasza kula sprawia teraz wrażenie jakby obracała się wokół osi x, przybliżając się i oddalając
podczas obrotu.
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:
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;
Point._visible = 0;
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;
}
}
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:
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)
// 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:
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)
// 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.
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;
}
}
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.
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.
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).
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.
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;
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.
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ść”.
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.
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!
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.
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:
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:
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;
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:
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;
xSize = _parent._width;
ysize = _parent._height;
if (xSize>ySize) {
size = xSize;
} else {
size = ySize;
}
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:
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.
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;
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):
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:
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");
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:
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.
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ć.
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
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.
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...”.
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:
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 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:
on (release) {
loadVariables("c:/Testing/Flash/news.txt", "_root.textMovie");
Rozdział 17-451
{
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...
...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:
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:
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.
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.
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:
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.
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);
}
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:
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...
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>).
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:
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.
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:
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.
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:
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.
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 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:
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:
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.
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.
Jeśli sformatujemy je w bardziej „ludzki” sposób, a „nie odczytywany przez Flasha”, staną się
one bardziej zrozumiałe:
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;
_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...
... 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;
}
...ł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;
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++;
}
var n = 1;
... 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++)
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:
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;
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:
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.
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.
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();
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.
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:
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.
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.
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.
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:
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
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");
}
on (release) {
loadVariables("www.mysite.com/content.php", 0);
}
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.
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:
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.
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...
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:
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.
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.
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.
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:
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:
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");
}
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);
?>
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);
?>
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");
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.
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.
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);
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>
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.
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>
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:
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.
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.
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:
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>.
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:
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:
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.
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);
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ę:
on (release) {
showNext();
}
on (release) {
showPrevious();
}
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:
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:
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ę:
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:
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.
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:
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.
Rozdział 20-535
Option Explicit
Dim cn
Dim cmd
Dim rs
Set cn = Server.CreateObject("ADODB.Connection")
cn.ConnectionString = "addressDSN"
cn.Open
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 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
<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>
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:
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
sXML = "<?xml version=" & q & "1.0" & q & "?><ADDRESSES>" & sXML & "</ADDRESSES>"
Rozdział 20-539
Response.Write sXML
%>
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:
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.
Rozdział 20-541
Do Until rs.EOF
If IsNull(rs("address2")) Then
elm.setAttribute "address2", ""
Else
elm.setAttribute "address2", rs("address2")
End If
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")
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.
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");
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:
stop ();
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:
on (release) {
doSearch ("fName", searchVal);
}
Rozdział 20-544
on (release) {
doSearch ("lName", searchVal);
}
on (release) {
doSearch ("city", searchVal);
}
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);
}
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.
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>
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:
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>
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:
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.
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">
<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">
</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.
<TITLE>decon</TITLE>
<SCRIPT LANGUAGUE="JavaScript">
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>
<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 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()">
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.
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.
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.
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.
Ż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.
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.
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.
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.
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.
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
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
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.
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.
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.
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.
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.
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);
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:
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.
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).
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) {
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.
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:
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);
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.
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 ();
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;
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.
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.
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.
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.
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!
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.
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ść.
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.
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)">
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):
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>
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>
</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:
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.
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:
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
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: /
Rozdział 23-614
User-agent: evilBot
Disallow: /
• 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">
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ć.
• 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">
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.
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:
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.
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:
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ą.
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.
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.
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.
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
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>.
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
Popularność łączy
Ponieważ Open Directory Project nie korzysta z pająka, popularność łączy nie jest brana pod
uwagę.
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.
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">
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">
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.">
Rozdział 23-626
<PARAM name="quality" VALUE="high">
<PARAM name="bgcolor" VALUE="#FFFFFF">
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