IDZ DO
IDZ DO
PRZYKŁADOWY ROZDZIAŁ
PRZYKŁADOWY ROZDZIAŁ
Flash MX. Vademecum
SPIS TRE CI
SPIS TRE CI
profesjonalisty
KATALOG KSIĄŻEK
KATALOG KSIĄŻEK
Autorzy: Jody Keating, Fig Leaf Software
KATALOG ONLINE
KATALOG ONLINE Tłumaczenie: Marek Binkowski, Marek Korbecki
ISBN: 83-7197-916-9
Tytuł oryginału: Inside Flash MX
ZAMÓW DRUKOWANY KATALOG
ZAMÓW DRUKOWANY KATALOG
Format: B5, stron: 618
TWÓJ KOSZYK
TWÓJ KOSZYK
Książka omawia niezwykłą technologię. Flash MX łączy piękno projektowania
graficznego z wygodą programowania zorientowanego obiektowo, wprowadzając nową
DODAJ DO KOSZYKA
DODAJ DO KOSZYKA
jako ć do wiata aplikacji internetowych. W książce tej zawarto wszystkie informacje
pozwalające w pełni wykorzystać możliwo ci Flasha MX. Jest ona adresowana do
dwóch grup odbiorców: artystów i programistów. Wiadomo, że nie każdy artysta chce
CENNIK I INFORMACJE
CENNIK I INFORMACJE
zostać programistą, podobnie jak nie każdy programista posiada uzdolnienia
artystyczne. Tre ć niniejszej książki będzie jednak użyteczna zarówno dla jednych,
ZAMÓW INFORMACJE
ZAMÓW INFORMACJE
jak i drugich. Tworzenie za pomocą Flasha wymaga bowiem połączenia obu dziedzin,
O NOWO CIACH
O NOWO CIACH
za w przypadku Flasha MX zasada ta ma jeszcze głębsze znaczenie niż dotychczas.
Flash MX. Vademecum profesjonalisty to kompletne ródło informacji, począwszy
ZAMÓW CENNIK
ZAMÓW CENNIK
od wiadomo ci podstawowych, poprzez omówienie twórczych technik, aż po
wyczerpujące omówienie języka ActionScript.
" Dowiedz się, jakie zmiany wprowadzono w sposobie pracy i funkcjonowania
CZYTELNIA
CZYTELNIA
interfejsu Flasha
FRAGMENTY KSIĄŻEK ONLINE " Użyj nowych rozwiązań Named Anchors i Shared Objects, usprawniających
FRAGMENTY KSIĄŻEK ONLINE
współpracę Flasha z przeglądarką
" Wykorzystaj animacjach Flasha materiały wideo, korzystając z nowych
możliwo ci importowania cieżek wideo
" Skorzystaj z komponentów Flasha, by przyspieszyć proces tworzenia
rozbudowanych aplikacji internetowych
" Użyj nowych poleceń ActionScript, umożliwiających rysowanie na obrazie
za pomocą skryptów
" Zastosuj w filmie Flasha prawa fizyki tak, by obiekty poruszały się w naturalny
sposób
Jody Keating jest dyrektorem pomocniczym do spraw mediów interaktywnych w firmie
Fig Leaf Software (jednej z czołowych firm programistycznych intensywnie
Wydawnictwo Helion
korzystających z technologii Flash) oraz ekspertem i instruktorem certyfikowanym przez
ul. Chopina 6
firmę Macromedia. Nad książką pracował zespół specjalistów pod przewodnictwem
44-100 Gliwice
Jody, każdy z nich podzielił się wiadomo ciami z dziedziny, w której się specjalizuje.
tel. (32)230-98-63
e-mail: helion@helion.pl
Rozdział 1.
Zmiany na listwie czasowej......................................................................................... 21
Przybornik i panel Properties....................................................................................... 24
Zmiany na panelach.................................................................................................... 26
Zmiany na panelu Color Mixer.................................................................................... 28
Zmiany na panelu Actions........................................................................................... 29
Krótka charakterystyka komponentów ......................................................................... 32
Funkcja rozmieszczania obiektów na warstwach........................................................... 33
Podsumowanie........................................................................................................... 34
Rozdział 2.
Korzystanie z funkcji liczenia elementów..................................................................... 36
Tworzenie nowych symboli, korzystanie z folderów i rozwiązywanie konfliktów nazw.... 37
Uaktualnianie elementów zgromadzonych w bibliotece ................................................. 38
Przyłączanie i współużytkowanie bibliotek................................................................... 40
Tworzenie i wykorzystanie symboli czcionek ............................................................... 46
Jak uchronić się przed przykrymi niespodziankami........................................................ 48
Tworzenie własnych bibliotek stałych .......................................................................... 49
Podsumowanie........................................................................................................... 49
Rozdział 3. I
Optymalizacja map bitowych ...................................................................................... 53
Konwertowanie map bitowych na obrazy wektorowe .................................................... 56
Importowanie obrazów wektorowych........................................................................... 60
Importowanie obrazów utworzonych w innych programach ........................................... 62
Importowanie obrazów utworzonych w programie Adobe Illustrator ......................... 62
Importowanie obrazów utworzonych w programie Adobe Photoshop........................ 63
Importowanie obrazów utworzonych w programie Macromedia FreeHand................. 64
Importowanie plików przygotowanych w programie Macromedia Fireworks ............. 66
Importowanie obrazów utworzonych w programie Toon Boom Studio ...................... 68
Aączenie bitmap z obrazami wektorowymi ................................................................... 70
Niewłaściwe połączenie bitmapa obraz wektorowy............................................. 70
Monitorowanie obciążenia procesora...................................................................... 71
Czy ten plik można zapisać?.................................................................................. 72
Bandwidth Profiler................................................................................................ 74
Tworzenie raportu o wielkości pliku ............................................................................ 78
Rozwiązywanie problemów za pomocą narzędzi diagnostycznych ............................ 79
Dzielenie dużego filmu na kilka mniejszych............................................................ 81
Podsumowanie........................................................................................................... 82
6 Flash MX. Vademecum profesjonalisty
Rozdział 4.
Teoria dzwięku .......................................................................................................... 84
Dzwięk kontra obraz............................................................................................. 85
Częstotliwość próbkowania i głębia bitowa............................................................. 85
Zachowanie niewielkiej objętości plików: mowa a muzyka ...................................... 86
Importowanie plików dzwiękowych do filmu................................................................ 87
Odtwarzanie strumieniowe a zdarzenia dzwiękowe ....................................................... 89
Układanie dzwięków na warstwach.............................................................................. 90
Synchronizacja dzwięków na warstwach ...................................................................... 91
Edycja dzwięku we Flashu.......................................................................................... 93
Dodawanie efektów.................................................................................................... 94
Kompresja dzwięku.................................................................................................... 97
Synchronizacja dzwięku z prostą animacją ................................................................... 99
Ścisz ten hałas.......................................................................................................... 103
Wstępne ładowanie dzwięku i animacji ...................................................................... 109
Podsumowanie......................................................................................................... 111
Rozdział 5.
Podstawy programowania ......................................................................................... 113
Zmienne ............................................................................................................ 114
Składnia kropkowa ............................................................................................. 120
Składnia kropkowa i zmienne listwy czasowej ...................................................... 121
Bezpośrednie odwołania do obiektów......................................................................... 125
Zmienne globalne ............................................................................................... 126
Zmienne lokalne................................................................................................. 127
Składnia wywołania metody ................................................................................ 128
Inne kluczowe elementy programowania .................................................................... 128
Tablice .............................................................................................................. 129
Nawiasy klamrowe ............................................................................................. 129
Pętle.................................................................................................................. 130
Komentarze ....................................................................................................... 132
Funkcje ułatwiające eliminowanie błędów ............................................................ 132
Podsumowanie......................................................................................................... 134
Rozdział 6. I
Identyfikowanie klatek w filmie Flasha ...................................................................... 136
Co się dzieje za kulisami........................................................................................... 138
Nieliniowy dostęp do filmu ....................................................................................... 140
Obiekty SharedObject......................................................................................... 140
Analiza kodu ActionScript................................................................................... 141
Niekompatybilność przeglądarek ............................................................................... 145
Podsumowanie......................................................................................................... 145
Rozdział 7.
Krótki opis efektu maskowania.................................................................................. 147
Klipy filmowe i symbole graficzne jako maski ...................................................... 148
Prosta maska ........................................................................................................... 149
Zmiękczanie krawędzi maski o prostych kształtach ..................................................... 152
Zmiękczanie krawędzi masek o nieregularnych kształtach............................................ 154
ActionScript i maskowanie........................................................................................ 157
Dodawanie akcji................................................................................................. 162
Sterowanie maskowanym filmem za pomocą ActionScript ..................................... 164
Podsumowanie......................................................................................................... 171
Spis treści 7
Rozdział 8.
Podstawowe informacje dotyczące kompresji plików wideo......................................... 174
Podstawowe informacje dotyczące importu ................................................................ 175
Aączenie importowanych klipów wideo z plikami zewnętrznymi.................................. 176
Osadzanie klipów wideo w filmach Flasha.................................................................. 177
Jakość ............................................................................................................... 178
Keyframe Interval............................................................................................... 180
Scale ................................................................................................................. 181
Synchronize video to Macromedia Flash document frame rate................................ 182
Number of Video Frames to Encode..................................................................... 183
Import Sound..................................................................................................... 183
Jakie ustawienia są najwłaściwsze? ...................................................................... 184
Osadzanie klipów wideo i manipulowanie nimi w klipach filmowych ........................... 184
Manipulowanie klipami wideo za pomocą metody loadMovie().................................... 188
Wykorzystanie programu Sorenson Squeeze for Flash MX
w procesie przetwarzania wideo.............................................................................. 196
Podsumowanie......................................................................................................... 200
Rozdział 9.
Podstawy programowania ......................................................................................... 202
Metodologia programowania ............................................................................... 202
Obiekty, właściwości i metody............................................................................. 203
Języki obiektowe oparte na klasach lub prototypach............................................... 204
Tworzenie i używanie obiektów................................................................................. 204
Obiekty statyczne ............................................................................................... 209
Notacja tablicowa ............................................................................................... 209
Rozszerzanie możliwości obiektów ...................................................................... 211
Rozszerzanie możliwości obiektów prototypowych ............................................... 212
Przesyłanie argumentów przez wartość i przez odniesienie..................................... 213
Tworzenie własnych obiektów prototypowych............................................................ 214
Projektowanie obiektów we Flashu............................................................................ 221
Zdarzenia ................................................................................................................ 221
Zastępowanie detektorów zdarzeń........................................................................ 222
Sondy................................................................................................................ 223
Wyszukiwanie i usuwanie błędów.............................................................................. 224
Akcja trace......................................................................................................... 225
Panel Debugger .................................................................................................. 225
Podsumowanie......................................................................................................... 229
Rozdział 10.
Metody związane z rysowaniem ................................................................................ 231
Rysowanie kwadratu ................................................................................................ 233
Rysowanie krzywych za pomocą skryptów................................................................. 236
Rysowanie okręgów za pomocą skryptów .................................................................. 242
Tworzenie wypełnień za pomocą skryptów................................................................. 244
Jednolite wypełnienia.......................................................................................... 244
Wypełnienia gradientowe .................................................................................... 246
Rysowanie za pomocą skryptów praktyczne zastosowanie....................................... 249
Podsumowanie......................................................................................................... 253
Rozdział 11.
Prosta interaktywność typu przeciągnij i upuść ........................................................ 256
Upuszczenie obiektu na innym obiekcie ..................................................................... 259
Tworzenie własnego kursora myszy........................................................................... 266
8 Flash MX. Vademecum profesjonalisty
Tworzenie suwaka ................................................................................................... 272
Przewijalne pola tekstowe......................................................................................... 278
Mechanizm wstępnego pobierania danych.................................................................. 284
Tworzenie paska postępu .................................................................................... 285
Podsumowanie......................................................................................................... 288
Rozdział 12.
Co to są komponenty................................................................................................ 289
Do czego służą komponenty ................................................................................ 290
Dlaczego komponenty......................................................................................... 290
Stosowanie komponentów......................................................................................... 291
Standardowe komponenty Flasha MX .................................................................. 292
Współpraca komponentów ze skryptami..................................................................... 295
Aktywacja komponentów za pomocą skryptów..................................................... 296
Przesyłanie informacji do i z bazy danych............................................................. 299
Modyfikowanie wyglądu komponentu........................................................................ 302
Pozyskiwanie komponentów z innych zródeł .............................................................. 303
Tworzenie własnych komponentów ........................................................................... 307
Podsumowanie......................................................................................................... 308
Rozdział 13.
Programowanie prostego ruchu.................................................................................. 310
Sterowanie ruchem obiektu za pomocą przycisku .................................................. 312
Sterowanie ruchem obiektu za pomocą klawiatury................................................. 317
Operacja rzucania obiektem przez użytkownika .......................................................... 319
Ruch uwzględniający bezwładność obiektu................................................................. 323
Detekcja kolizji........................................................................................................ 326
Metoda hitTest()................................................................................................. 327
Kolizje a odległości między obiektami.................................................................. 329
Rzucanie piłki i odbijanie jej od ścian................................................................... 331
Definiowanie krawędzi........................................................................................ 331
Przeszkody ........................................................................................................ 336
Podsumowanie......................................................................................................... 344
Rozdział 14.
Oprogramowanie pośredniczące i aplikacje serwerowe.................................................... 345
Macromedia ColdFusion ..................................................................................... 346
ASP.NET (Microsoft .NET)................................................................................ 348
Java Servlet/JSP (J2EE)...................................................................................... 350
PHP procesor hipertekstu................................................................................ 351
ColdFusion czy PHP? ASP.NET czy JSP?............................................................ 353
Modele danych udostępnianych przez serwer.............................................................. 353
Baza danych ...................................................................................................... 354
Dostęp do bazy danych za pośrednictwem skryptu ColdFusion ............................... 358
Komunikacja Flasha z serwerem................................................................................ 360
Obiekty kategorii Client/Server we Flashu MX ..................................................... 362
Obiekt loadVars.................................................................................................. 362
Akcja loadVariables() ......................................................................................... 365
Przesyłanie zmiennych w adresie URL ................................................................. 366
Akcja getURL().................................................................................................. 367
Tworzenie aplikacji korzystającej z obiektu loadVars .................................................. 367
Analiza aplikacji................................................................................................. 368
Interfejs utworzony we Flashu ............................................................................. 368
Skrypty Flasha ................................................................................................... 370
Spis treści 9
Skrypt serwerowy ColdFusion ............................................................................. 375
Gotowy skrypt ColdFusion.................................................................................. 379
Dane XML.............................................................................................................. 380
Definicje DTD i schematy................................................................................... 381
Flash i XML ...................................................................................................... 382
Pobieranie i wysyłanie dokumentów XML............................................................ 382
Przetwarzanie danych XML ................................................................................ 387
Podsumowanie......................................................................................................... 388
Rozdział 15.
Podstawowe wiadomości .......................................................................................... 390
Oprogramowanie serwera współpracujące z usługą Flash Remoting........................ 391
Flash usługi serwerowe................................................................................... 391
Usługi Flash Remoting w postaci komponentów CFC............................................ 392
Komunikacja Flasha MX z serwerem usług Flash Remoting......................................... 397
Tworzenie połączenia.......................................................................................... 399
Tworzenie detektora _Result ............................................................................... 405
SSAS serwerowe skrypty ActionScript............................................................. 409
Technologia DataGlue......................................................................................... 410
Umieszczanie usług serwerowych w edytorze skryptów Flasha MX........................ 413
Narzędzie NetConnect Debugger ......................................................................... 414
Podsumowanie......................................................................................................... 415
Rozdział 16.
Akcje Flasha umożliwiające komunikację z przeglądarką ............................................ 417
Akcja loadVariables() ......................................................................................... 418
Akcja getURL().................................................................................................. 418
Model DOM ...................................................................................................... 420
Wywoływanie funkcji JavaScript za pomocą akcji getURL().................................. 421
Tworzenie cookies za pomocą akcji getURL()....................................................... 425
Akcja FSCommand() .......................................................................................... 435
Projektor Flasha ................................................................................................. 438
Metody obiektu Flash w języku JavaScript ................................................................. 439
Pakiet Macromedia Dreamweaver JavaScript Integration Kit........................................ 443
Podsumowanie......................................................................................................... 447
Dodatek A
Obiekty ................................................................................................................... 449
Słowniczek.............................................................................................................. 450
Obiekt Accessibility ................................................................................................. 451
Obiekt Arguments .................................................................................................... 451
Obiekt Array............................................................................................................ 451
Obiekt Boolean ........................................................................................................ 453
Obiekt Button .......................................................................................................... 453
Obiekt Capabilities................................................................................................... 455
Obiekt Color............................................................................................................ 456
Obiekt CustomActions.............................................................................................. 456
Obiekt Date ............................................................................................................. 457
Obiekt Function ....................................................................................................... 461
Obiekt Key.............................................................................................................. 461
Obiekt LoadVars...................................................................................................... 463
Obiekt Math ............................................................................................................ 465
Obiekt Mouse .......................................................................................................... 467
10 Flash MX. Vademecum profesjonalisty
Obiekt MovieClip..................................................................................................... 468
Obiekt Number ........................................................................................................ 474
Obiekt Object .......................................................................................................... 475
Obiekt Selection....................................................................................................... 477
Obiekt System ......................................................................................................... 478
Obiekt Sound........................................................................................................... 479
Obiekt Stage ............................................................................................................ 480
Obiekt String ........................................................................................................... 481
Obiekt TextField ...................................................................................................... 483
Obiekt TextFormat................................................................................................... 488
Obiekt XML............................................................................................................ 490
Obiekt XMLSocket .................................................................................................. 494
Dodatek B
Akcje ...................................................................................................................... 497
Akcje sterujące odtwarzaniem filmu..................................................................... 497
Akcje realizujące komunikację z przeglądarką i serwerem...................................... 499
Akcje sterujące klipami filmowymi ...................................................................... 501
Akcje zarządzające zmiennymi i obiektami........................................................... 503
Wyrażenia warunkowe i pętle .............................................................................. 504
Akcje umożliwiające drukowanie......................................................................... 507
Akcje związane z funkcjami użytkownika............................................................. 510
Inne akcje.......................................................................................................... 511
Operatory................................................................................................................ 512
Operatory standardowe ....................................................................................... 512
Operatory arytmetyczne...................................................................................... 513
Operatory przypisania ......................................................................................... 514
Operatory bitowe................................................................................................ 516
Operatory porównania......................................................................................... 518
Operatory logiczne.............................................................................................. 520
Inne operatory.................................................................................................... 520
Funkcje................................................................................................................... 522
Funkcje konwertujące typy danych ...................................................................... 523
Funkcje matematyczne........................................................................................ 524
Stałe........................................................................................................................ 525
Właściwości ............................................................................................................ 525
Komponenty Flasha.................................................................................................. 529
Komponent CheckBox (pole wyboru opcji)........................................................... 529
Komponent ComboBox (rozwijana lista) .............................................................. 531
Komponent ListBox (przewijana lista).................................................................. 536
Komponent PushButton (przycisk)....................................................................... 541
Komponent RadioButton (wybór jednej z kilku opcji)............................................ 543
Grupa komponentów RadioButton............................................................................. 546
Komponent ScrollBar (pasek przewijania) ............................................................ 548
Komponent ScrollPane (przewijane pole).............................................................. 551
Obiekt FStyleFormat (formatujący komponenty)................................................... 553
Dodatek C
Zestaw skrótów Macromedia Standard....................................................................... 559
Narzędzia przybornika ........................................................................................ 559
Polecenia menu .................................................................................................. 560
Skróty klawiszowe w środowisku testowym.......................................................... 564
Skróty klawiszowe w edytorze skryptów .............................................................. 565
Spis treści 11
Zestaw skrótów programu Flash 5 ............................................................................. 567
Narzędzia przybornika ........................................................................................ 567
Skróty klawiszowe w środowisku testowym.......................................................... 572
Skróty klawiszowe w edytorze skryptów .............................................................. 573
Zestaw skrótów programu Fireworks 4....................................................................... 575
Narzędzia przybornika ........................................................................................ 575
Polecenia menu .................................................................................................. 576
Zestaw skrótów programu FreeHand 10..................................................................... 579
Narzędzia przybornika ........................................................................................ 580
Polecenia menu .................................................................................................. 580
Zestaw skrótów programu Illustrator 10 ..................................................................... 583
Narzędzia przybornika ........................................................................................ 584
Zestaw skrótów programu Photoshop 6...................................................................... 588
Narzędzia przybornika ........................................................................................ 588
Rozdział 10.
n
Jedną z fascynujących nowości wprowadzonych we Flashu MX jest rysowanie za
pomocą skryptów podstawowych kształtów wektorowych, takich jak linie czy wieloboki,
w trakcie odtwarzania filmu. Udostępniony interfejs programistyczny pozwala sterować
wszystkimi parametrami kształtów wektorowych, takimi jak kolor, grubość linii, wypeł-
nienie i inne. Można je też z łatwością modyfikować. Rysowanie za pomocą skryptów
otwiera nowy, ekscytujący rozdział w historii grafiki tworzonej we Flashu po raz
pierwszy możesz rysować na ekranie kształty wektorowe sterowane kodem, rezygnując
tym samym z powielania setek klipów filmowych czy stosowania innych pośrednich i mało
efektywnych rozwiązań. Nowy interfejs programistyczny, wykorzystujący skrypty, służy
do tworzenia wszelkiego rodzaju grafiki, od wykresów po proste funkcje grafiki trójwy-
miarowej.
W tym rozdziale omówimy następujące zagadnienia:
Praca z wirtualnym piórem
Zmiany stylu rysowania
Rysowanie linii prostych
Rysowanie linii krzywych
Rysowanie okręgów
Wypełnienia
Tworzenie gradientów
Rysowanie i wypełnianie dynamicznie pracującego przycisku
Wszystkie te operacje wykonasz, nie dotykając ani jednego narzędzia rysowniczego Flasha!
n n
Wszystkie metody związane z rysowaniem za pomocą skryptów są metodami obiektu
MovieClip. Oznacza to, że możesz tworzyć rysunki wektorowe w dowolnym klipie filmo-
wym, łącznie z główną listwą czasową i klipami filmowymi tworzonymi dynamicznie. Należy
232 Flash MX. Vademecum profesjonalisty
jednak zwrócić uwagę na to, że ze względu na specyfikę działania tych metod wszelkie
utworzone za ich pomocą wektory pojawiają się na najniższej pozycji (czyli jako najniższa
warstwa) w stosie warstw danego klipu filmowego.
Zanim rozpoczniemy rysowanie za pomocą skryptów, poznajmy służące do tego metody:
przemieszcza wirtualne pióro, nie rysując niczego. Metoda ta przyjmuje
dwa argumenty współrzędną X i współrzędną Y w układzie współrzędnych,
którego środek leży w punkcie odniesienia klipu filmowego. Przykładem zastosowania
tej metody może być polecenie .
określa styl linii, które zostaną narysowane. Metoda ta przyjmuje
trzy argumenty: (grubość), (kolor w kodzie RGB) oraz
(parametr krycia). Grubość linii jest podawana w punktach i argument ten może
przyjmować wartość z zakresu od 0 do 255. W przypadku kiedy wartość argumentu
wynosi 0, linia ma grubość włosową ( ), czyli jest najcieńszą możliwą
linią przy danej skali i rozdzielczości, która nigdy nie staje się grubsza przy
zwiększeniu skali. Kolor linii określamy w kodzie szesnastkowym; domyślnie
jest ustawiony kolor czarny o kodzie . Argument może przyjmować
wartości od 0 do 100, przy czym wartość 0 oznacza linię zupełnie przezroczystą,
z kolei wartość 100 linię całkowicie kryjącą. Przykładem zastosowania tej metody
może być polecenie . (W przykładzie nie podaliśmy wartości
trzeciego argumentu jest on opcjonalny, podobnie zresztą jak drugi argument).
przesuwa wirtualne pióro w nowe miejsce, rysując linię prostą. Metoda
ta przyjmuje dwa argumenty współrzędną X i współrzędną Y w układzie
współrzędnych, którego środek leży w punkcie odniesienia klipu filmowego.
Są to współrzędne punktu docelowego, do którego przesuwa się wirtualne pióro,
zostawiając ślad w postaci linii rozpoczynającej się od aktualnego położenia.
Przykładem zastosowania tej metody może być polecenie .
przesuwa wirtualne pióro w nowe miejsce, rysując linię krzywą.
Ta metoda wymaga podania czterech argumentów: , ,
i . Pierwsze dwa argumenty decydują o krzywiznie rysowanej linii, zaś
dwa kolejne określają położenie końcowego punktu krzywej względem punktu
odniesienia klipu filmowego. Przykładem zastosowania tej metody może być
polecenie .
usuwa z aktualnego klipu filmowego utworzoną przez skrypt grafikę
wektorową. Wszelkie elementy graficzne utworzone za pomocą standardowych
narzędzi graficznych Flasha pozostają nienaruszone. Przykładem zastosowania tej
metody jest polecenie .
rozpoczyna tworzenie nowego jednolitego wypełnienia. Metoda ta
przyjmuje dwa argumenty: oraz . Pierwszy z nich określa kolor wypełnienia
i jest podawany w postaci szesnastkowego kodu RGB. Na przykład kod
to jednolite czarne wypełnienie. Drugi argument jest opcjonalny i określa parametr
krycia. Jego wartość powinna mieścić się w przedziale od 0 do 100, zaś domyślnie
przyjmowana jest wartość 100 (całkowite krycie). Polecenie powinno
się pojawić przed wszelkimi poleceniami lub , rysującymi dany
wypełniony kształt. Rysowanie tego kształtu powinno kończyć polecenie .
Przykładem zastosowania metody może być polecenie
.
Rozdział 10. Rysowanie za pomocą skryptów 233
rozpoczyna tworzenie nowego wypełnienia gradientowego.
Ta metoda wymaga podania aż pięciu argumentów (typ wypełnienia),
(kolory), (parametry krycia), (pozycje kolorów) oraz
(macierz przekształceń gradientu). Pierwszy argument, , może przyjąć
wartość (gradient liniowy) lub (gradient radialny). Drugi,
, jest tablicą szesnastkowych kodów kolorów, wchodzących w skład gradientu.
Trzeci argument, , jest tablicą wartości procentowych, reprezentujących
parametry krycia poszczególnych kolorów zawartych w tablicy . Czwarty
argument, , również jest tablicą zawarte w niej wartości określają
położenia poszczególnych kolorów z tablicy w gradiencie. Wartość 0
odpowiada początkowi gradientu, zaś wartość 255 reprezentuje najbardziej oddalony
punkt gradientu. Nieco trudniejsze jest funkcjonowanie argumentu . Jedną
z dopuszczalnych postaci tego argumentu jest macierz o wymiarach 33, określająca
przekształcenia, jakim ma być poddane wypełnienie gradientowe. Jeśli miałeś
do czynienia z algebrą liniową, wiesz, jak wygląda macierz przekształceń. Jeśli nie
spotkałeś się wcześniej z tym terminem, nie martw się funkcjonowanie argumentu
wyjaśnimy w dalszej części rozdziału. Przykładem zastosowania metody
może być polecenie
, przy czym wartości argumentów , ,
i są wcześniej określone.
kończy tworzenie wypełnienia. Przykładem zastosowania tej metody
jest polecenie .
Jak z pewnością zauważyłeś, kilkakrotnie pojawił się termin wirtualne pióro. Co to takiego?
Na tym pojęciu bazuje cały mechanizm rysowania za pomocą skryptów. Przesuwając wir-
tualne pióro po płaszczyznie obrazu za pomocą poleceń i , rysujesz kolejne
segmenty linii i kształtów wektorowych. Domyślnym, początkowym położeniem wirtu-
alnego pióra jest punkt odniesienia klipu filmowego. Jeśli rysujesz na głównej listwie
czasowej, to punkt ten znajduje się w lewym górnym narożniku obrazu (0, 0). Aby przesunąć
wirtualne pióro w inne miejsce obrazu, bez rysowania linii, możesz użyć polecenia .
Wirtualne pióro porusza się w układzie współrzędnych klipu filmowego gdy klip
filmowy się przemieszcza, rysunek przemieszcza się wraz z nim.
Najłatwiejszym sposobem opanowania zasad działania wirtualnego pióra jest praktyczne
wypróbowanie jego możliwości.
n
Rozpocznijmy eksperyment od narysowania kwadratu. W pierwszej kolejności ustal styl
linii. Kwadrat narysujemy za pomocą czarnej linii o grubości 2 punktów i kryciu 50%.
Oto definicja takiego stylu linii:
Gdy wiesz już, jaką linią będziesz rysował kwadrat, ustal położenie punktu, od którego
rozpoczniesz rysowanie. Jeśli chcesz, aby był to punkt, w którym aktualnie znajduje się
wirtualne pióro, mógłbyś pominąć ten krok. Domyślnie wirtualne pióro znajduje się w punk-
cie odniesienia klipu filmowego (w przypadku głównej listwy czasowej jest to lewy górny
narożnik obrazu). Przyjmijmy jednak, że chcesz rozpocząć rysowanie w jakimś innym
miejscu, zatem powinieneś przesunąć pióro za pomocą metody .
234 Flash MX. Vademecum profesjonalisty
Jak wiesz, metoda ta przyjmuje dwa argumenty współrzędne X i Y punktu, w którym ma
się znalezć wirtualne pióro. Aby umieścić pióro w punkcie oddalonym o 10 pikseli w dół
i 10 pikseli w prawo względem początku układu współrzędnych, użyj takiego polecenia:
Pióro zostało już umieszczone w pozycji startowej i ustaliliśmy styl linii, zatem możemy
rozpocząć rysowanie. Działanie sprowadza się do podania w odpowiedniej kolejności współ-
rzędnych narożników kwadratu. To nie będzie trudne. Po prostu zdecyduj, w którym kierunku
chcesz obrysować kwadrat i jaka ma być długość boku kwadratu. Użyj metody ,
przesuwając pióro do kolejnych narożników. Aby rozpocząć od poziomej linii, zwiększ war-
tość współrzędnej X o długość boku; współrzędną Y pozostaw niezmienioną (równą 10).
Następnie narysuj pionowy bok kwadratu nową współrzędną X pozostaw niezmienioną,
zaś współrzędną Y zwiększ o długość boku. W podobny sposób narysuj pozostałe dwa boki,
odejmując odpowiednie długości od współrzędnych. Jeśli przyjąłeś długość boku równą 20,
sekwencja poleceń powinna wyglądać tak:
Rysunek 10.1 przedstawia kwadrat narysowany za pomocą tych poleceń (dla ułatwienia
nanieśliśmy siatkę).
Za pomocą skryptu
narysowaliśmy
kwadrat
To nie było trudne. Nie wierz mi na słowo. Poświęć kilka chwil i wykonaj ćwiczenie, aby
opanować podstawowe zasady rysowania linii prostych za pomocą skryptów.
Wiesz już, jak można narysować kwadrat za pomocą skryptu. Teraz narysuj własny.
Rozdział 10. Rysowanie za pomocą skryptów 235
. Utwórz nowy film Flasha1. W nim utwórz klip filmowy o nazwie (kwadrat).
Umieść klon tego klipu na obrazie i nadaj mu taką samą nazwę klonu, .
. Zaznacz pierwsze ujęcie na głównej listwie czasowej i wyświetl edytor skryptów
(naciśnij klawisz F9).
. Ustal styl linii. Tym razem niech to będzie 2-punktowa, czarna linia o parametrze
krycia 100%. W edytorze skryptów wpisz taki wiersz:
. Ustal położenie punktu, od którego rozpoczniesz rysowanie. Niech to będzie punkt
(40, 30). Dodaj następujący wiersz:
. Teraz zacznie się prawdziwa zabawa. Będziesz mógł sprawdzić, jak postępuje
rysowanie. Utworzymy kwadrat, którego bok ma długość 50 pikseli. Rozpocznij
od poziomego boku:
. Przetestuj film. Na obrazie powinna się pojawić czarna, pozioma linia (rysunek 10.2).
Za pomocą wpisanego
do tej pory kodu można
narysować pojedynczą,
czarną poziomą linię
o długości 50 pikseli
Teraz wystarczy, byś dodał pozostałe trzy boki kwadratu. Pamiętaj, że w tym momencie
wirtualne pióro znajduje się w punkcie (90, 30).
. Aby narysować pierwszy pionowy bok kwadratu, nie zmieniaj współrzędnej X
wirtualnego pióra, a jego współrzędną Y zwiększ o 50 pikseli. Dopisz do skryptu
poniższy wiersz:
. Zapisz i ponownie przetestuj film.
1
Jeśli chcesz, by kwadrat był rysowany na tle siatki, możesz otworzyć plik grid.fla, zapisany na płycie CD-ROM
w katalogu Przyklady/Rozdzial_10 przyp. tłum.
236 Flash MX. Vademecum profesjonalisty
Teraz zastanów się, jak powinny wyglądać dwa pozostałe wiersze. Śmiało,
eksperymentuj. Jeśli pojawią się problemy, zajrzyj do listingu 10.1. Film powinien
wyglądać tak, jak pokazano na rysunku 10.3. Pamiętaj, by zapisać plik.
I I Kompletny kod rysujący kwadrat
Używając
wyłącznie kodu,
możesz narysować
na obrazie kwadrat
Nie poprzestawaj na narysowaniu kwadratu. Poeksperymentuj, zmieniając parametry
w skrypcie. Sprawdz, jak wpływają na wygląd rysunku.
Oprócz linii prostych możesz również rysować linie krzywe, korzystając z polecenia
. Aby zrozumieć, jak za pomocą skryptu rysować krzywe, najpierw powinieneś
zapoznać się z kilkoma ogólnymi informacjami na temat krzywych we Flashu.
n h
W większości wektorowych programów ilustracyjnych, takich jak FreeHand czy Illustrator,
występują krzywe nazywane krzywymi Beziera drugiego stopnia. Ich kształt jest określany
za pomocą czterech punktów dwa z nich to wierzchołki rysowanej krzywej (linii), zaś
dwa pozostałe są wierzchołkami stycznych. Wierzchołki krzywej znajdują się oczywiście
na obu jej końcach, z kolei za pomocą stycznych można regulować jej krzywiznę (styczne
zwykle są wyposażone w przeciągalne uchwyty, będące zarazem wierzchołkami stycznych).
Rozdział 10. Rysowanie za pomocą skryptów 237
Tego typu krzywe można kształtować intuicyjnie, zwłaszcza gdy są wyświetlane dyna-
micznie na ekranie komputera. Istnieje jeszcze inny typ krzywych, tak zwane krzywe
Beziera drugiego stopnia, które są wewnętrznie wykorzystywane przez Flasha. Rysując
krzywe za pomocą skryptów, posługujemy się właśnie krzywymi Beziera drugiego stopnia.
W uproszczeniu można powiedzieć, że krzywe Beziera drugiego stopnia są uproszczoną
postacią krzywych trzeciego stopnia uproszczoną w ten sposób, że wierzchołki obu
stycznych są połączone w jeden wierzchołek, czyli obie styczne łączą się w jednym punkcie.
Z tego uproszczenia wynika, że krzywe drugiego stopnia nie pozwalają uzyskać niektórych
krzywizn na przykład wypukłości. Z drugiej strony, opis krzywej drugiego stopnia wy-
maga o 25% mniej danych niż opis krzywej trzeciego stopnia (rysunek 10.4). Właśnie dlatego
Flash wewnętrznie przechowuje wszystkie informacje o krzywych w postaci krzywych
drugiego stopnia. Również dlatego metoda korzysta z tego rodzaju krzywych.
W krzywych Beziera drugiego
stopnia obie styczne mają
wspólny wierzchołek;
w krzywych Beziera trzeciego
stopnia każda ze stycznych
posiada własny wierzchołek.
krzywa Beziera drugiego stopnia krzywa Beziera trzeciego stopnia
Flash potrafi pracować
z reprezentacją krzywych
Beziera trzeciego stopnia,
lecz wewnętrznie opisuje je
jako krzywe drugiego stopnia
Stosowanie metody jest proste przyjmuje ona cztery argumenty: współrzędne
X i Y wierzchołka stycznych oraz współrzędne X i Y końcowego wierzchołka krzywej
(pozycję początkowego wierzchołka krzywej wyznacza aktualna pozycja wirtualnego pióra).
Składnię metody można zatem zapisać tak:
Wykonując ćwiczenie 10.2, zobaczysz, jak wyglądają krzywe rysowane za pomocą poleceń
. Utworzymy mechanizm, który pozwoli użytkownikowi przeciągać zarówno
oba wierzchołki krzywej drugiego stopnia, jak i wierzchołek jej stycznych wszystko
wyłącznie za pomocą kodu ActionScript!
To ćwiczenie jest bardziej skomplikowane od poprzedniego, więc uzbrój się w cierpliwość
i zaparz sobie kawę.
. Rozpocznij od utworzenia nowego, pustego dokumentu Flasha. Otwórz edytor
skryptów (panel Actions).
. Utwórz trzy puste klipy filmowe dwa dla wierzchołków krzywych oraz jeden
dla uchwytu stycznej. W edytorze skryptów wpisz następujący kod:
238 Flash MX. Vademecum profesjonalisty
Aby narysować uchwyty, zastosujemy pewną sztuczkę. Dla każdego z klipów
filmowych zdefiniujemy styl linii o grubości 10 pikseli i korzystając z tego stylu,
narysujemy linię o długości 1 piksela. Uzyskamy w ten sposób kropkę, która
kształtem przypomina koło.
. Pod kodem, który znajduje się w 2. punkcie, dopisz następne wiersze (zwróć uwagę,
że wierzchołki krzywej będą czarne, zaś wierzchołek stycznych niebieski):
Jeśli w tym momencie przetestujesz film, zobaczysz na obrazie tylko pojedynczą
niebieską kropkę. To dlatego że pozostałe dwie czarne kropki znajdują się w tym
samym miejscu i są zasłaniane przez niebieską.
. Przemieść klipy filmowe:
. Zapisz i przetestuj film. Powinien wyglądać tak jak na rysunku 10.5.
Po rozmieszczeniu
klipów filmowych
za pomocą skryptu,
niebieski uchwyt
powinien się
znajdować w górnym
wierzchołku trójkąta,
zaś czarne uchwyty
u jego podstawy
W następnych krokach zdefiniujemy funkcję rysującą krzywą w głównym filmie
i korzystającą przy tym z pozycji klipów filmowych (uchwytów).
Rozdział 10. Rysowanie za pomocą skryptów 239
. Pod wprowadzonym już kodem rozpocznij definicję funkcji o nazwie :
. Ustal styl linii dla głównej listwy czasowej grubość włosowa i kolor czerwony.
W tym celu pomiędzy nawiasami klamrowymi funkcji wpisz poniższy kod:
. W definicji funkcji dopisz wiersz, który umieszcza wirtualne pióro w miejscu
pierwszego wierzchołka (klipu filmowego ):
. Następnie, korzystając z polecenia , narysuj krzywą, biegnącą do drugiego
klipu filmowego, , o krzywiznie określonej przez położenie klipu filmowego
. Wreszcie wywołaj akcję , aby wymusić odświeżenie
obrazu Flasha. Dopisz w definicji funkcji następujący kod:
Gdy użytkownik przeciągnie jeden z uchwytów na obrazie, zostanie wywołana
funkcja , która z kolei wywoła akcję . Chcemy,
aby przeciąganie uchwytów i aktualizacja kształtu krzywej było działaniem jak
najbardziej płynnym, dlatego za pomocą tej akcji wymuszamy odświeżanie obrazu
pomiędzy klatkami. Listing 10.2 przedstawia kompletną definicję funkcji .
I I Kompletna definicja funkcji drawCurve()
. Funkcja jest już gotowa, jednak film jeszcze nie. Musimy zdefiniować metodę
(reagującą na wciśnięcie klawisza myszy) dla każdego z klipów
filmowych reprezentujących uchwyty. Gdy użytkownik umieści kursor nad klipem
i wciśnie klawisz myszy, powinno rozpocząć się przeciąganie klipu.
Wówczas każdy ruch myszy (powodujący przeciągnięcie uchwytu) powinien
wywoływać funkcję , która od nowa narysuje krzywą. W tym celu
metodzie klipu przypiszemy zdefiniowaną przed chwilą
funkcję . Pod definicją funkcji umieść dalszy ciąg kodu:
. Przetestuj film. Możesz kliknąć niebieski uchwyt i przeciągnąć go. Gdy to zrobisz,
zmieni się kształt krzywej (rysunek 10.6).
240 Flash MX. Vademecum profesjonalisty
Po dodaniu
funkcji obsługującej
zdarzenie onPress,
możesz kliknąć
i przeciągnąć
niebieski uchwyt,
aby zmienić
kształt krzywej
Istnieje jednak pewien problem gdy klikniesz i przeciągniesz uchwyt, nie możesz
go już upuścić. Teraz zajmiemy się tą kwestią. Musimy zdefiniować, co się ma
wydarzyć po zwolnieniu klawisza myszy. Innymi słowy, musimy zdefiniować
metodę .
. Przede wszystkim trzeba zakończyć przeciąganie klipu filmowego przycisku.
Następnie wywołamy metodę , aby odświeżyła krzywą. Jeśli nie
zrobilibyśmy tego, krzywa mogłaby się dziwnie zachować w przypadku energicznego
przeciągania, a następnie szybkiego zwolnienia klawisza myszy. I wreszcie,
przypiszemy metodzie wartość (niezdefiniowana) gdy
nie jest przeciągany żaden uchwyt, krzywa nie powinna być modyfikowana. Gdybyś
nie zlikwidował definicji metody , Flash nadal śledziłby ruchy
myszy, mimo że nie byłoby to konieczne i jedynie obciążałoby procesor.
Aby zrealizować opisane zadania, dopisz w edytorze skryptów następujący kod:
. W czasach, gdy zdarzenia myszy mogły być powiązane wyłącznie z przyciskami,
projektanci zawsze sprawdzali zdarzenia i
(czyli odpowiednio: zwolnienie klawisza myszy nad przyciskiem i zwolnienie go
poza przyciskiem). Również w tym przypadku musimy to zrobić. Te same operacje,
które są wykonywane w reakcji na zdarzenie , powinny być wykonane
również po wykryciu zdarzenia . Można to osiągnąć, przypisując
metodzie metodę , w taki sposób:
Rozdział 10. Rysowanie za pomocą skryptów 241
. Zapisz i przetestuj film.
Utworzyłeś zgrabny film, który w elegancki sposób demonstruje funkcjonowanie
krzywych Beziera drugiego stopnia. Mógłbyś na tym poprzestać, lecz byłoby to
mało twórcze. W prosty sposób możesz skopiować utworzone metody i przypisać
je pozostałym dwóm klipom filmowym, reprezentującym początek i koniec krzywej.
Dzięki temu zabiegowi użytkownik będzie mógł przeciągać każdy z trzech uchwytów.
. Skopiujemy teraz metody klipu , przypisane detektorom poszczególnych
zdarzeń myszy i przypiszemy je pozostałym dwóm klipom. Zrealizujemy to za
pomocą takiego prostego kodu:
. Na końcu skryptu umieść wywołanie funkcji , aby krzywa pojawiła się
od razu po uruchomieniu filmu, a nie dopiero po przeciągnięciu któregoś z uchwytów:
. Zapisz i przetestuj film.
Teraz film jest rzeczywiście gotowy i w pełni funkcjonalny (rysunek 10.7). I co najciekawsze,
żadnego elementu nie narysowaliśmy na obrazie za pomocą tradycyjnych narzędzi ilustra-
cyjnych Flasha. W przypadku jakichkolwiek wątpliwości lub problemów porównaj swój
kod z listingiem 10.32.
Ostateczna postać
filmu rysującego
interaktywną krzywą
Beziera drugiego
stopnia
2
Możesz też porównać swój plik z plikiem bezierCurve_final.fla, zapisanym na płycie CD-ROM w katalogu
Przyklady/Rozdzial_10 przyp. tłum.
242 Flash MX. Vademecum profesjonalisty
I I Kompletny skrypt rysujący krzywe
Już wiesz, jak rysować krzywe za pomocą skryptów. Czy potrafiłbyś jednak narysować
okrąg? Jak myślisz, czy to trudne?
n
Często używanym rodzajem krzywych są okręgi. Flash nie udostępnia bezpośredniej metody
rysowania okręgów za pomocą skryptów, dlatego operacja ta może być utrudniona. Prawdę
mówiąc, ze względu na naturę krzywych Beziera drugiego stopnia nie jest możliwe nary-
sowanie idealnego okręgu. Jednak możesz narysować kształt na tyle zbliżony do okręgu, że
nikt nie dostrzeże różnicy. Co więcej, okręgi rysowane za pomocą narzędzia ilustracyjnego
Oval Tool Flasha tak naprawdę również są jedynie przybliżeniami.
Rozdział 10. Rysowanie za pomocą skryptów 243
Wyprowadzanie wzorów matematycznych, umożliwiających przybliżenie okręgu serią
krzywych, byłoby żmudne i zniechęcające. Dla ułatwienia zdefiniujemy ostateczną postać
funkcji, która pozwala narysować okrąg o dowolnym promieniu w dowolnym miejscu
obrazu. Definiując tę funkcję jako wewnętrzną metodę obiektu ,
będziesz mógł skorzystać z niej w każdym klipie filmowym w filmie.
W funkcji korzystamy jedynie z metod i oraz z dwóch współczynników
o wartościach wynikających ze skomplikowanych obliczeń, których nie będziemy tu przy-
taczać. Prototypowa funkcja przyjmuje trzy argumenty i (współrzędne
środka okręgu) oraz (promień okręgu).
Listing 10.4 przedstawia definicję funkcji . Przepisz ten kod do filmu lub skopiuj
go ze skryptu zapisanego na płycie CD-ROM w pliku circle.as, w katalogu Przyklady/
Rozdzial_10.
I I Funkcja prototypowa rysująca okręgi
Gdy funkcja jest zdefiniowana, wystarczy, byś określił styl linii ( ) dla danego
klipu filmowego i wywołał metodę , podając konkretne wartości argumentów
, i .
Zdefiniowaliśmy już funkcję rysującą okrąg, wystarczy więc jej użyć w klipie filmowym,
aby w dowolnym miejscu narysować okrąg o dowolnym promieniu.
. Utwórz nowy film Flasha i otwórz edytor skryptów.
. W pierwszym ujęciu filmu umieść prototypową funkcję rysującą okrąg.
. Utwórz na obrazie nowy pusty klip filmowy, umieszczając w skrypcie wiersz:
. Kiedy utworzysz film, możesz przystąpić do rysowania. Pierwszym etapem jest
jak zwykle ustalenie stylu linii. Następnie możesz wywołać metodę ,
podając współrzędne środka okręgu i jego promień. Aby narysować okrąg za pomocą
2-punktowej, czarnej linii, o środku w punkcie (50, 50) i promieniu 20, wpisz kod:
244 Flash MX. Vademecum profesjonalisty
. Zapisz i przetestuj film. Powinieneś uzyskać rezultat taki jak na rysunku 10.8.
Okrąg (niemalże
idealny) narysowany
za pomocą skryptu
W podobny sposób narysuj jeszcze kilka okręgów. Za każdym razem powtórz 3. i 4. krok,
zmieniaj nazwę klonu ( , itd.), zwiększaj numer poziomu warstwy
i zmieniaj argumenty metody . Masz do dyspozycji 16 000 poziomów warstwy
wykorzystaj przynajmniej ich niewielką część!
W następnym podrozdziale dowiesz się, jak za pomocą skryptów można tworzyć wypełnienia.
n n
Gdy się nad tym zastanowić, tworzenie wypełnień za pomocą skryptów powinno być łatwe
i rzeczywiście tak jest! Używając skryptów, możesz tworzyć dwa rodzaje wypełnień
jednolite i gradientowe. Rozpoczniemy od pierwszego, prostszego rodzaju, a następnie
przejdziemy do bardziej skomplikowanego, czyli gradientowego.
Aby rozpocząć tworzenie wypełnienia, wystarczy umieścić w skrypcie akcję :
Tak jak w przypadku innych metod rysujących wektory parametr jest szesnast-
kowym kodem koloru, zaś parametr wartością procentową, okre-
ślającą stopień krycia koloru (czyli odwrotność przezroczystości), z przedziału od 0 (całko-
wita przezroczystość) do 100 (pełne krycie).
Aby utworzyć wypełniony kształt, umieść wirtualne pióro w miejscu, w którym chcesz
rozpocząć rysowanie. Następnie użyj polecenia , po którym umieść w skrypcie
sekwencję poleceń i , rysujących kształt. Na końcu sekwencji umieść
polecenie , zamykające wypełniony kształt. Spróbujmy zastosować to w praktyce.
Rozdział 10. Rysowanie za pomocą skryptów 245
To ćwiczenie będzie dla Ciebie wyjątkowo łatwe niemal wszystkie polecenia występujące
w kodzie poznałeś już wcześniej.
. Utwórz nowy dokument Flasha i zapisz go na dysku twardym w pliku fill.fla.
. W pierwszym ujęciu filmu umieść skrypt rysujący pusty kwadrat:
. Aby skrypt rysował kwadrat wypełniony jednolitym kolorem czerwonym, dodaj
jeden wiersz kodu bezpośrednio po poleceniu i jeden na końcu skryptu.
Dla ułatwienia dodane wiersze umieściliśmy pomiędzy komentarzami z gwiazdek:
. Zapisz i przetestuj film (rysunek 10.9).
Dodając dwa
proste wiersze
do kodu rysującego
kwadrat, możesz
z łatwością wypełnić
go jednolitym kolorem
Jeśli chciałbyś uzyskać jednolity kwadrat bez krawędzi, po prostu pomiń wiersz definiujący
styl linii, .
246 Flash MX. Vademecum profesjonalisty
Rozumiesz już, na czym polega tworzenie wypełnień za pomocą skryptów. Zajmijmy się
teraz bardziej skomplikowanymi wypełnieniami gradientowymi. Wypełnienie gradien-
towe za pomocą skryptu wymaga zastosowania kilku tablic. Jeśli nie oswoiłeś się jeszcze
z pojęciem tablicy we Flashu, niezbędne informacje znajdziesz w rozdziale 5.
Oto składnia metody , za pomocą której rozpoczyna się rysowanie wy-
pełnienia gradientowego:
Metoda ta wymaga podania wszystkich argumentów: jeśli któryś z nich pominiesz lub
jego postać będzie niepoprawna, gradient nie pojawi się na obrazie.
Pierwszy argument, , może przyjąć wartość tekstową (gradient
liniowy) lub (gradient radialny). W gradiencie liniowym kolejne kolory pojawiają
się w postaci równoległych, płynnie przechodzących pasm, w gradiencie radialnym kolory
rozchodzą się w postaci koncentrycznych kół.
Argumenty , i są tablicami, które muszą mieć taką
samą długość (czyli wszystkie trzy muszą zawierać tyle samo wartości). Tablica
zawiera szesnastkowe kody kolorów, które znajdą się w gradiencie. Tablica
zawiera wartości z przedziału od 0 do 100, reprezentujące krycie poszczególnych
kolorów gradientu poszczególne parametry krycia z tej tablicy są przyporządkowane
kolorom z tablicy o takim samym indeksie. Tablica określa pozycje
poszczególnych kolorów w gradiencie. Jej komórki mogą przyjmować wartości z przedziału
od 0 (początek gradientu) do 255 (koniec gradientu).
Przypuśćmy, że chcesz utworzyć gradient rozpoczynający się od koloru czerwonego, następ-
nie przechodzący w biel i wreszcie kończący się kolorem niebieskim. Poszczególne kolory
gradientu mają być równomiernie rozmieszczone i półprzezroczyste. W takim przypadku
omawiane argumenty przyjmą następującą postać:
Najbardziej skomplikowany jest ostatni argument, . Może on
przyjmować jedną z dwóch postaci złożoną lub prostszą. W skomplikowanej postaci
argument jest obiektem o dziewięciu właściwościach, noszących odpowiednio nazwy:
, , , , , , , , . Właściwości te reprezentują macierz przekształceń o wymiarach 33:
Jeśli jest Ci znana algebra liniowa, wiesz, jak funkcjonują i jak powinny wyglądać ma-
cierze przekształceń. W przeciwnym razie powinieneś użyć prostszej postaci argumentu
.
Rozdział 10. Rysowanie za pomocą skryptów 247
W prostszej postaci argument również jest obiektem, lecz
tym razem o sześciu właściwościach, noszących następujące nazwy: , , , ,
oraz . Właściwość zawsze powinna przybierać wartość tekstową
w ten sposób Flash pozna, że korzystasz z prostszej postaci argumentu
. Właściwości i określają współrzędne lewego górnego narożnika wypełnienia
gradientowego. Właściwości i to odpowiednio szerokość i wysokość wypełnienia gra-
dientowego. Wreszcie właściwość określa kąt obrotu wypełnienia gradientowego, jej
wartość jest podawana w radianach.
Aby kąt podany w stopniach przeliczyć na radiany, zastosuj taki wzór:
Zmienna przechowuje kąt podany w stopniach, zmienna kąt
podany w radianach, zaś właściwość reprezentuje stałą matematyczną Ą.
W ćwiczeniu wypełnimy gradientem dynamicznie rysowany okrąg, a za pomocą metody
uzyskamy iluzję podświetlenia sfery.
To ćwiczenie jest tylko nieco bardziej skomplikowane od poprzedniego i tylko dlatego,
że korzystamy w nim ze złożonego kształtu wektorowego i kilku tablic.
. Utwórz nowy dokument Flasha i zapisz go w pliku o nazwie gradient.fla.
. Otwórz edytor skryptów i zaimportuj skrypt z pliku circle.as, zapisanego na płycie
CD-ROM w katalogu Przyklady/Rozdzial_10.
. Aby uzyskać iluzję podświetlonej sfery, wypełnimy okrąg gradientem radialnym,
rozpoczynającym się od bieli (w centralnej części gradientu), szybko przechodzącym
w kolor sfery, który następnie ciemnieje i wreszcie przy samym końcu rozjaśnia
się, symulując odbicie światła od podłoża. Taki gradient naśladuje grę światła
i cienia na powierzchni sfery o określonym kolorze.
W gradiencie użyjemy trzech kolorów: białego ( ), niebieskiego ( )
oraz ciemnoniebieskiego ( ). Każdy z kolorów będzie w 100% kryjący.
Wpisz kod, tworzący opisany gradient:
. Okrąg będzie miał promień 50 pikseli i jego środek znajdzie się w punkcie (100, 100).
Aby odbicie światła pojawiło się w lewej górnej części sfery , gradient umieścimy
w punkcie (50, 50). Zarówno szerokość, jak i wysokość gradientu wyniesie 70,
tak aby był on w całości widoczny wewnątrz okręgu.
Wpisz kod:
. Należy jeszcze rozpocząć wypełnianie, narysować okrąg i zakończyć wypełnianie.
Dopisz następujący kod:
248 Flash MX. Vademecum profesjonalisty
Gdy zapiszesz i przetestujesz film, powinieneś zobaczyć ładnie oświetloną niebieską sferę
(rysunek 10.10). W przypadku problemów porównaj swój kod z listingiem 10.5.
Podświetlona sfera
utworzona wyłącznie
za pomocą skryptu
I I Kompletny kod tworzący podświetloną sferę
Poznałeś kilka podstawowych przykładów rysowania kształtów wektorowych za pomocą
skryptów. W następnym podrozdziale zajmiemy się praktycznym zastosowaniem oma-
wianych możliwości skryptów.
Rozdział 10. Rysowanie za pomocą skryptów 249
n
n n
Rozdział ten zakończymy przykładem praktycznego wykorzystania możliwości rysowania
za pomocą skryptów. Często opracowując różnego rodzaju projekty, potrzebujemy pro-
stego mechanizmu tworzenia standardowych przycisków, przypominających te znane
z systemu operacyjnego szare, trójwymiarowe przyciski, do których od dawna jesteśmy
przyzwyczajeni.
Co powinieneś zrobić, aby utworzyć taki przycisk? Przyciski zwykle mają napisy, z tego
wniosek, że powinna istnieć możliwość podania tekstu, jaki pojawi się na przycisku. Każdy
przycisk znajdzie się w oddzielnym klipie filmowym, zatem powinieneś mieć możliwość
określenia nazwy klonu i poziomu warstwy, na którym się znajdzie. Wreszcie, tworzona me-
toda powinna być dostępna we wszystkich klipach filmowych w filmie, dlatego warto dodać
ją do obiektu .
Widać, że mamy dużo do zrobienia. Najlepiej od razu zabierzmy się do pracy.
Rozpoczniemy od zdefiniowania funkcji tworzącej przycisk.
. Utwórz nowy dokument Flasha i zapisz go na dysku twardym pod nazwą button.fla.
. Otwórz edytor skryptów (panel Actions) i zaznacz pierwsze ujęcie na głównej
listwie czasowej.
. Rozpocznij definicję funkcji, wpisując wiersz:
Jak widać, definicja funkcji zawiera trzy argumenty , oraz .
Pierwszy z nich będzie tekstem wyświetlanym na przycisku, drugi nazwą
nowego klipu filmowego, zaś trzeci będzie określał numer poziomu warstwy,
na którym znajdzie się przycisk.
. Na początku definicji funkcji wpisz kod, który utworzy nowy klip filmowy:
Pierwszy z wierszy tworzy nowy, pusty klip filmowy o podanej nazwie, umieszczając
go na wskazanym poziomie warstwy. Drugi przypisuje zmiennej odnośnik
do utworzonego klipu.
. Teraz zajmijmy się utworzeniem pola tekstowego, w którym wyświetlimy napis,
jaki pojawi się na przycisku. Do klipu przycisku odniesiemy się za pomocą odnośnika
zawartego w zmiennej . Wewnątrz nawiasów klamrowych definicji funkcji
dopisz następujący kod:
250 Flash MX. Vademecum profesjonalisty
Jaką rolę pełni ten kod? Pierwszy wiersz tworzy wewnątrz klipu pole tekstowe
o nazwie , umieszcza je na poziomie 1., w pozycji o współrzędnych (0, 0)
i przypisuje jego szerokości i wysokości wartość 1. W następnych wierszach
ustalamy wartości kilku właściwości pola tekstowego: , i .
Gdy właściwość pola tekstowego ma wartość , wymiary pola są
automatycznie dopasowywane do wyświetlanego tekstu. Wartość właściwości
powoduje, że użytkownik nie może zaznaczyć tekstu w polu. Wreszcie
właściwość pola tekstowego reprezentuje tekst wyświetlany w tym polu.
. Następnym naszym krokiem jest sformatowanie tekstu w polu. W definicji funkcji
dopisz następujące wiersze:
Powyższy kod tworzy obiekt TextFormat o nazwie . Obiekt tego typu
umożliwia formatowanie tekstu w polu tekstowym. Za pomocą właściwości
wybieramy systemową czcionkę bezszeryfową . Ostatni wiersz kodu oznacza,
że formatowanie za pomocą obiektu zostało zastosowane wobec pola
tekstowego .
. Musimy także ustalić, jakie są wymiary pola tekstowego (automatycznie
dopasowującego się do tekstu), aby dobrać odpowiednie wymiary samego przycisku.
Wpiszemy je do dwóch zmiennych (szerokość tekstu) i
(wysokość tekstu). Wpisz kod:
. Nadszedł wreszcie czas, aby narysować przycisk. Szerokość przycisku będzie o 4
piksele większa od szerokości pola tekstowego, aby napisowi w przycisku nie było
zbyt ciasno . Utwórz funkcję, która narysuje przycisk w położeniu górnym:
Dwa pierwsze polecenia powyższej funkcji ustalają położenie pola tekstowego,
tak aby było wyśrodkowane w stosunku do przycisku. Następnie za pomocą
polecenia oczyszczamy klip filmowy z grafiki i rysujemy przycisk zgodnie
z ustaloną wcześniej szerokością i wysokością pola tekstowego. Lewa i górna
krawędz przycisku jest biała, zaś prawa i dolna czarna, w efekcie powstaje
wrażenie trójwymiarowości przycisku. Wnętrze przycisku zostało wypełnione
kolorem jasnoszarym, do którego jesteśmy przyzwyczajeni przez system operacyjny.
Rozdział 10. Rysowanie za pomocą skryptów 251
. Narysowaliśmy przycisk w położeniu górnym. Przydałby się również rysunek
przycisku w położeniu dolnym. Funkcja jest niemal identyczna z funkcją
, jedynie krawędzie przyjmują kolory na odwrót, dzięki czemu przycisk
sprawia wrażenie wciśniętego. Wpisz poniższy kod:
. Teraz umieść w skrypcie polecenia, które uruchomią odpowiednią funkcję
po wciśnięciu lub zwolnieniu przycisku:
Zwróć uwagę na to, że oprócz rysowania odpowiedniej postaci przycisku metoda
wywołuje metodę o nazwie . Za jej pomocą będziesz mógł
pózniej wykonywać kod w reakcji na kliknięcie przycisku.
. Narysuj przycisk w początkowym stanie i zamknij definicję funkcji:
. Aby uruchomić świeżo utworzoną funkcję, umieść poza nią następujący wiersz kodu:
Jeśli chcesz prześledzić reakcję przycisku na kliknięcie, dodaj następujący kod:
Zapisz i przetestuj film. Po jego uruchomieniu ekran Flasha powinien wyglądać tak jak
na rysunku 10.11. Jeśli coś się nie zgadza, porównaj swój kod z listingiem 10.6.
I I Kompletny kod rysujący przycisk
252 Flash MX. Vademecum profesjonalisty
Trójwymiarowy
przycisk utworzony
wyłącznie za pomocą
skryptu
Rozdział 10. Rysowanie za pomocą skryptów 253
n
W tym rozdziale poznałeś wprowadzoną we Flashu MX możliwość rysowania na ekranie
za pomocą skryptów. Wprawdzie udostępniane przez program metody ograniczają się do
rysowania linii prostych i krzywych oraz jednolitych i gradientowych wypełnień, jednak
rozwiązanie to daje projektantowi programiście ogromne możliwości i w znacznym
stopniu zwiększa swobodę jego działania.
Wyszukiwarka
Podobne podstrony:
Flash MX 2004 ActionScript cwiczenia praktyczne cwf4asC Vademecum profesjonalisty ksiazka Podziękowania, O autorachPHP Zaawansowane programowanie Vademecum profesjonalistyJava Uslugi WWW Vademecum profesjonalisty jtswwwC Programowanie zorientowane obiektowo Vademecum profesjonalistyFlash MX Programowanie fmxproDreamweaver 4 Vademecum profesjonalistyC Vademecum profesjonalisty ksiazka Skrócony spis treściJezyk C Wskazniki Vademecum profesjonalisty cwskvpwięcej podobnych podstron