Flash MX. Vademecum profesjonalisty

Wydawnictwo Helion

ul. Chopina 6

44-100 Gliwice

tel. (32)230-98-63

e-mail: [email protected]

PRZYK£ADOWY ROZDZIA£PRZYK£ADOWY ROZDZIA£

IDZ DOIDZ DO

ZAMÓW DRUKOWANY KATALOGZAMÓW DRUKOWANY KATALOG

KATALOG KSI¥¯EKKATALOG KSI¥¯EK

TWÓJ KOSZYKTWÓJ KOSZYK

CENNIK I INFORMACJECENNIK I INFORMACJE

ZAMÓW INFORMACJEO NOWO�CIACH

ZAMÓW INFORMACJEO NOWO�CIACH

ZAMÓW CENNIKZAMÓW CENNIK

CZYTELNIACZYTELNIA

FRAGMENTY KSI¥¯EK ONLINEFRAGMENTY KSI¥¯EK ONLINE

SPIS TRE�CISPIS TRE�CI

DODAJ DO KOSZYKADODAJ DO KOSZYKA

KATALOG ONLINEKATALOG ONLINE

Flash MX. Vademecumprofesjonalisty Autorzy: Jody Keating, Fig Leaf Software

T³umaczenie: Marek Binkowski, Marek Korbecki

ISBN: 83-7197-916-9

Tytu³ orygina³u: Inside Flash MX

Format: B5, stron: 618

Ksi¹¿ka omawia niezwyk³¹ technologiê. Flash MX ³¹czy piêkno projektowania

graficznego z wygod¹ programowania zorientowanego obiektowo, wprowadzaj¹c now¹

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

zostaæ programist¹, podobnie jak nie ka¿dy programista posiada uzdolnienia

artystyczne. Tre�æ niniejszej ksi¹¿ki bêdzie jednak u¿yteczna zarówno dla jednych,

jak i drugich. Tworzenie za pomoc¹ Flasha wymaga bowiem po³¹czenia obu dziedzin,

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

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

interfejsu Flasha

• U¿yj nowych rozwi¹zañ Named Anchors i Shared Objects, usprawniaj¹cych

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

korzystaj¹cych z technologii Flash) oraz ekspertem i instruktorem certyfikowanym przez

firmê Macromedia. Nad ksi¹¿k¹ pracowa³ zespó³ specjalistów pod przewodnictwem

Jody, ka¿dy z nich podzieli³ siê wiadomo�ciami z dziedziny, w której siê specjalizuje.

http://helion.pl/view/2547w



http://helion.pl/add/2547w/flmxvp




mailto:[email protected]

http://helion.pl/view/2547w/flmxvp.htm

http://www.amazon.com/exec/obidos/ASIN/0735712549

��

��

Rozdział 1. �� Zmiany na listwie czasowej......................................................................................... 21Przybornik i panel Properties....................................................................................... 24Zmiany na panelach.................................................................................................... 26Zmiany na panelu Color Mixer .................................................................................... 28Zmiany na panelu Actions........................................................................................... 29Krótka charakterystyka komponentów ......................................................................... 32Funkcja rozmieszczania obiektów na warstwach........................................................... 33Podsumowanie........................................................................................................... 34

Rozdział 2. �� !�!��!�!��"#�$�� %Korzystanie z funkcji liczenia elementów..................................................................... 36Tworzenie nowych symboli, korzystanie z folderów i rozwiązywanie konfliktów nazw.... 37Uaktualnianie elementów zgromadzonych w bibliotece ................................................. 38Przyłączanie i współużytkowanie bibliotek ................................................................... 40Tworzenie i wykorzystanie symboli czcionek ............................................................... 46Jak uchronić się przed przykrymi niespodziankami........................................................ 48Tworzenie własnych bibliotek stałych .......................................................................... 49Podsumowanie........................................................................................................... 49

Rozdział 3. &��'��(��"��)��*�� %�Optymalizacja map bitowych ...................................................................................... 53Konwertowanie map bitowych na obrazy wektorowe .................................................... 56Importowanie obrazów wektorowych........................................................................... 60Importowanie obrazów utworzonych w innych programach ........................................... 62

Importowanie obrazów utworzonych w programie Adobe Illustrator ......................... 62Importowanie obrazów utworzonych w programie Adobe Photoshop........................ 63Importowanie obrazów utworzonych w programie Macromedia FreeHand................. 64Importowanie plików przygotowanych w programie Macromedia Fireworks ............. 66Importowanie obrazów utworzonych w programie Toon Boom Studio ...................... 68

Łączenie bitmap z obrazami wektorowymi ................................................................... 70Niewłaściwe połączenie bitmapa — obraz wektorowy............................................. 70Monitorowanie obciążenia procesora...................................................................... 71Czy ten plik można zapisać? .................................................................................. 72Bandwidth Profiler................................................................................................ 74

Tworzenie raportu o wielkości pliku ............................................................................ 78Rozwiązywanie problemów za pomocą narzędzi diagnostycznych ............................ 79Dzielenie dużego filmu na kilka mniejszych............................................................ 81

Podsumowanie........................................................................................................... 82

6 Flash MX. Vademecum profesjonalisty

Rozdział 4. ��+��,�� - Teoria dźwięku .......................................................................................................... 84

Dźwięk kontra obraz............................................................................................. 85Częstotliwość próbkowania i głębia bitowa............................................................. 85Zachowanie niewielkiej objętości plików: mowa a muzyka ...................................... 86

Importowanie plików dźwiękowych do filmu................................................................ 87Odtwarzanie strumieniowe a zdarzenia dźwiękowe ....................................................... 89Układanie dźwięków na warstwach.............................................................................. 90Synchronizacja dźwięków na warstwach ...................................................................... 91Edycja dźwięku we Flashu.......................................................................................... 93Dodawanie efektów.................................................................................................... 94Kompresja dźwięku.................................................................................................... 97Synchronizacja dźwięku z prostą animacją ................................................................... 99Ścisz ten hałas.......................................................................................................... 103Wstępne ładowanie dźwięku i animacji ...................................................................... 109Podsumowanie......................................................................................................... 111

Rozdział 5. ��(,��.�� Podstawy programowania ......................................................................................... 113

Zmienne ............................................................................................................ 114Składnia kropkowa ............................................................................................. 120Składnia kropkowa i zmienne listwy czasowej ...................................................... 121

Bezpośrednie odwołania do obiektów......................................................................... 125Zmienne globalne ............................................................................................... 126Zmienne lokalne ................................................................................................. 127Składnia wywołania metody ................................................................................ 128

Inne kluczowe elementy programowania .................................................................... 128Tablice .............................................................................................................. 129Nawiasy klamrowe ............................................................................................. 129Pętle.................................................................................................................. 130Komentarze ....................................................................................................... 132Funkcje ułatwiające eliminowanie błędów ............................................................ 132

Podsumowanie......................................................................................................... 134

Rozdział 6. &��*�� %Identyfikowanie klatek w filmie Flasha ...................................................................... 136Co się dzieje za kulisami........................................................................................... 138Nieliniowy dostęp do filmu ....................................................................................... 140

Obiekty SharedObject ......................................................................................... 140Analiza kodu ActionScript................................................................................... 141

Niekompatybilność przeglądarek ............................................................................... 145Podsumowanie......................................................................................................... 145

Rozdział 7. /*�� 0�Krótki opis efektu maskowania.................................................................................. 147

Klipy filmowe i symbole graficzne jako maski ...................................................... 148Prosta maska ........................................................................................................... 149Zmiękczanie krawędzi maski o prostych kształtach ..................................................... 152Zmiękczanie krawędzi masek o nieregularnych kształtach............................................ 154ActionScript i maskowanie........................................................................................ 157

Dodawanie akcji ................................................................................................. 162Sterowanie maskowanym filmem za pomocą ActionScript ..................................... 164

Podsumowanie......................................................................................................... 171

Spis treści 7

Rozdział 8. �� Podstawowe informacje dotyczące kompresji plików wideo......................................... 174Podstawowe informacje dotyczące importu ................................................................ 175Łączenie importowanych klipów wideo z plikami zewnętrznymi .................................. 176Osadzanie klipów wideo w filmach Flasha.................................................................. 177

Jakość ............................................................................................................... 178Keyframe Interval............................................................................................... 180Scale ................................................................................................................. 181Synchronize video to Macromedia Flash document frame rate................................ 182Number of Video Frames to Encode..................................................................... 183Import Sound..................................................................................................... 183Jakie ustawienia są najwłaściwsze? ...................................................................... 184

Osadzanie klipów wideo i manipulowanie nimi w klipach filmowych ........................... 184Manipulowanie klipami wideo za pomocą metody loadMovie().................................... 188Wykorzystanie programu Sorenson Squeeze for Flash MXw procesie przetwarzania wideo.............................................................................. 196

Podsumowanie......................................................................................................... 200

Rozdział 9. ��)��)��!�� 1�Podstawy programowania ......................................................................................... 202

Metodologia programowania ............................................................................... 202Obiekty, właściwości i metody............................................................................. 203Języki obiektowe oparte na klasach lub prototypach............................................... 204

Tworzenie i używanie obiektów................................................................................. 204Obiekty statyczne ............................................................................................... 209Notacja tablicowa ............................................................................................... 209Rozszerzanie możliwości obiektów ...................................................................... 211Rozszerzanie możliwości obiektów prototypowych ............................................... 212Przesyłanie argumentów przez wartość i przez odniesienie ..................................... 213

Tworzenie własnych obiektów prototypowych............................................................ 214Projektowanie obiektów we Flashu............................................................................ 221Zdarzenia ................................................................................................................ 221

Zastępowanie detektorów zdarzeń........................................................................ 222Sondy................................................................................................................ 223

Wyszukiwanie i usuwanie błędów.............................................................................. 224Akcja trace......................................................................................................... 225Panel Debugger .................................................................................................. 225

Podsumowanie......................................................................................................... 229

Rozdział 10. 2��3��"�� Metody związane z rysowaniem ................................................................................ 231Rysowanie kwadratu ................................................................................................ 233Rysowanie krzywych za pomocą skryptów................................................................. 236Rysowanie okręgów za pomocą skryptów .................................................................. 242Tworzenie wypełnień za pomocą skryptów................................................................. 244

Jednolite wypełnienia.......................................................................................... 244Wypełnienia gradientowe .................................................................................... 246

Rysowanie za pomocą skryptów — praktyczne zastosowanie....................................... 249Podsumowanie......................................................................................................... 253

Rozdział 11. /��*�(�� %%Prosta interaktywność typu „przeciągnij i upuść” ........................................................ 256Upuszczenie obiektu na innym obiekcie ..................................................................... 259Tworzenie własnego kursora myszy........................................................................... 266


Tworzenie suwaka ................................................................................................... 272Przewijalne pola tekstowe......................................................................................... 278Mechanizm wstępnego pobierania danych.................................................................. 284

Tworzenie paska postępu .................................................................................... 285Podsumowanie......................................................................................................... 288

Rozdział 12. 4�� -5Co to są komponenty................................................................................................ 289

Do czego służą komponenty ................................................................................ 290Dlaczego komponenty......................................................................................... 290

Stosowanie komponentów......................................................................................... 291Standardowe komponenty Flasha MX .................................................................. 292

Współpraca komponentów ze skryptami..................................................................... 295Aktywacja komponentów za pomocą skryptów..................................................... 296Przesyłanie informacji do i z bazy danych............................................................. 299

Modyfikowanie wyglądu komponentu........................................................................ 302Pozyskiwanie komponentów z innych źródeł .............................................................. 303Tworzenie własnych komponentów ........................................................................... 307Podsumowanie......................................................................................................... 308

Rozdział 13. 6�7��7��8��*�� 15Programowanie prostego ruchu.................................................................................. 310

Sterowanie ruchem obiektu za pomocą przycisku .................................................. 312Sterowanie ruchem obiektu za pomocą klawiatury ................................................. 317

Operacja rzucania obiektem przez użytkownika .......................................................... 319Ruch uwzględniający bezwładność obiektu................................................................. 323Detekcja kolizji ........................................................................................................ 326

Metoda hitTest()................................................................................................. 327Kolizje a odległości między obiektami.................................................................. 329Rzucanie piłki i odbijanie jej od ścian................................................................... 331Definiowanie krawędzi........................................................................................ 331Przeszkody ........................................................................................................ 336

Podsumowanie......................................................................................................... 344

Rozdział 14. 4��(�� 0%Oprogramowanie pośredniczące i aplikacje serwerowe.................................................... 345

Macromedia ColdFusion ..................................................................................... 346ASP.NET (Microsoft .NET)................................................................................ 348Java Servlet/JSP (J2EE) ...................................................................................... 350PHP — procesor hipertekstu................................................................................ 351ColdFusion czy PHP? ASP.NET czy JSP?............................................................ 353

Modele danych udostępnianych przez serwer.............................................................. 353Baza danych ...................................................................................................... 354Dostęp do bazy danych za pośrednictwem skryptu ColdFusion ............................... 358

Komunikacja Flasha z serwerem................................................................................ 360Obiekty kategorii Client/Server we Flashu MX ..................................................... 362Obiekt loadVars.................................................................................................. 362Akcja loadVariables() ......................................................................................... 365Przesyłanie zmiennych w adresie URL ................................................................. 366Akcja getURL().................................................................................................. 367

Tworzenie aplikacji korzystającej z obiektu loadVars .................................................. 367Analiza aplikacji................................................................................................. 368Interfejs utworzony we Flashu ............................................................................. 368Skrypty Flasha ................................................................................................... 370

Spis treści 9

Skrypt serwerowy ColdFusion ............................................................................. 375Gotowy skrypt ColdFusion .................................................................................. 379

Dane XML.............................................................................................................. 380Definicje DTD i schematy................................................................................... 381Flash i XML ...................................................................................................... 382Pobieranie i wysyłanie dokumentów XML............................................................ 382Przetwarzanie danych XML ................................................................................ 387

Podsumowanie......................................................................................................... 388

Rozdział 15. 9�#�)��2��) �� -5Podstawowe wiadomości .......................................................................................... 390

Oprogramowanie serwera współpracujące z usługą Flash Remoting ........................ 391Flash — usługi serwerowe................................................................................... 391Usługi Flash Remoting w postaci komponentów CFC............................................ 392

Komunikacja Flasha MX z serwerem usług Flash Remoting......................................... 397Tworzenie połączenia.......................................................................................... 399Tworzenie detektora _Result ............................................................................... 405SSAS — serwerowe skrypty ActionScript............................................................. 409Technologia DataGlue......................................................................................... 410Umieszczanie usług serwerowych w edytorze skryptów Flasha MX........................ 413Narzędzie NetConnect Debugger ......................................................................... 414

Podsumowanie......................................................................................................... 415

Rozdział 16. 4��(��(3��3 �� 0��Akcje Flasha umożliwiające komunikację z przeglądarką ............................................ 417

Akcja loadVariables() ......................................................................................... 418Akcja getURL().................................................................................................. 418Model DOM ...................................................................................................... 420Wywoływanie funkcji JavaScript za pomocą akcji getURL() .................................. 421Tworzenie cookies za pomocą akcji getURL()....................................................... 425Akcja FSCommand() .......................................................................................... 435Projektor Flasha ................................................................................................. 438

Metody obiektu Flash w języku JavaScript ................................................................. 439Pakiet Macromedia Dreamweaver JavaScript Integration Kit........................................ 443Podsumowanie......................................................................................................... 447

Dodatek A �!��(,��.�� 005Obiekty ................................................................................................................... 449Słowniczek.............................................................................................................. 450Obiekt Accessibility ................................................................................................. 451Obiekt Arguments .................................................................................................... 451Obiekt Array............................................................................................................ 451Obiekt Boolean ........................................................................................................ 453Obiekt Button .......................................................................................................... 453Obiekt Capabilities ................................................................................................... 455Obiekt Color ............................................................................................................ 456Obiekt CustomActions.............................................................................................. 456Obiekt Date ............................................................................................................. 457Obiekt Function ....................................................................................................... 461Obiekt Key.............................................................................................................. 461Obiekt LoadVars ...................................................................................................... 463Obiekt Math ............................................................................................................ 465Obiekt Mouse .......................................................................................................... 467


Obiekt MovieClip..................................................................................................... 468Obiekt Number ........................................................................................................ 474Obiekt Object .......................................................................................................... 475Obiekt Selection....................................................................................................... 477Obiekt System ......................................................................................................... 478Obiekt Sound........................................................................................................... 479Obiekt Stage ............................................................................................................ 480Obiekt String ........................................................................................................... 481Obiekt TextField ...................................................................................................... 483Obiekt TextFormat ................................................................................................... 488Obiekt XML............................................................................................................ 490Obiekt XMLSocket .................................................................................................. 494

Dodatek B :��(,��.�� 05�Akcje ...................................................................................................................... 497

Akcje sterujące odtwarzaniem filmu..................................................................... 497Akcje realizujące komunikację z przeglądarką i serwerem...................................... 499Akcje sterujące klipami filmowymi ...................................................................... 501Akcje zarządzające zmiennymi i obiektami ........................................................... 503Wyrażenia warunkowe i pętle .............................................................................. 504Akcje umożliwiające drukowanie......................................................................... 507Akcje związane z funkcjami użytkownika............................................................. 510Inne akcje .......................................................................................................... 511

Operatory ................................................................................................................ 512Operatory standardowe ....................................................................................... 512Operatory arytmetyczne ...................................................................................... 513Operatory przypisania ......................................................................................... 514Operatory bitowe................................................................................................ 516Operatory porównania......................................................................................... 518Operatory logiczne.............................................................................................. 520Inne operatory.................................................................................................... 520

Funkcje ................................................................................................................... 522Funkcje konwertujące typy danych ...................................................................... 523Funkcje matematyczne........................................................................................ 524

Stałe........................................................................................................................ 525Właściwości ............................................................................................................ 525Komponenty Flasha.................................................................................................. 529

Komponent CheckBox (pole wyboru opcji)........................................................... 529Komponent ComboBox (rozwijana lista) .............................................................. 531Komponent ListBox (przewijana lista).................................................................. 536Komponent PushButton (przycisk)....................................................................... 541Komponent RadioButton (wybór jednej z kilku opcji)............................................ 543

Grupa komponentów RadioButton............................................................................. 546Komponent ScrollBar (pasek przewijania) ............................................................ 548Komponent ScrollPane (przewijane pole).............................................................. 551Obiekt FStyleFormat (formatujący komponenty)................................................... 553

Dodatek C .��"�� %%5Zestaw skrótów Macromedia Standard....................................................................... 559

Narzędzia przybornika ........................................................................................ 559Polecenia menu .................................................................................................. 560Skróty klawiszowe w środowisku testowym.......................................................... 564Skróty klawiszowe w edytorze skryptów .............................................................. 565

Spis treści 11

Zestaw skrótów programu Flash 5 ............................................................................. 567Narzędzia przybornika ........................................................................................ 567Skróty klawiszowe w środowisku testowym.......................................................... 572Skróty klawiszowe w edytorze skryptów .............................................................. 573

Zestaw skrótów programu Fireworks 4....................................................................... 575Narzędzia przybornika ........................................................................................ 575Polecenia menu .................................................................................................. 576

Zestaw skrótów programu FreeHand 10..................................................................... 579Narzędzia przybornika ........................................................................................ 580Polecenia menu .................................................................................................. 580

Zestaw skrótów programu Illustrator 10 ..................................................................... 583Narzędzia przybornika ........................................................................................ 584

Zestaw skrótów programu Photoshop 6...................................................................... 588Narzędzia przybornika ........................................................................................ 588

.�� %5

Rozdział 10.

��

Jedną z fascynujących nowości wprowadzonych we Flashu MX jest „rysowanie” zapomocą 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ówotwiera nowy, ekscytujący rozdział w historii grafiki tworzonej we Flashu — po razpierwszy możesz rysować na ekranie kształty wektorowe sterowane kodem, rezygnująctym samym z powielania setek klipów filmowych czy stosowania innych pośrednich i małoefektywnych rozwiązań. Nowy interfejs programistyczny, wykorzystujący skrypty, służydo 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!

��

Wszystkie metody związane z rysowaniem za pomocą skryptów są metodami obiektuMovieClip. 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


jednak zwrócić uwagę na to, że ze względu na specyfikę działania tych metod wszelkieutworzone za ich pomocą wektory pojawiają się na najniższej pozycji (czyli jako najniższawarstwa) 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 przyjmujedwa 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 zastosowaniatej metody może być polecenie ��.

� � �� — określa styl linii, które zostaną narysowane. Metoda ta przyjmujetrzy argumenty: �� (grubość), �� (kolor w kodzie RGB) oraz ��(parametr krycia). Grubość linii jest podawana w punktach i argument ten możeprzyjmować wartość z zakresu od 0 do 255. W przypadku kiedy wartość argumentuwynosi 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 przyzwiększeniu skali. Kolor linii określamy w kodzie szesnastkowym; domyślniejest 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 metodymoże być polecenie � ��. (W przykładzie nie podaliśmy wartościtrzeciego argumentu — jest on opcjonalny, podobnie zresztą jak drugi argument).

� � �� — przesuwa wirtualne pióro w nowe miejsce, rysując linię prostą. Metodata przyjmuje dwa argumenty — współrzędną X i współrzędną Y w układziewspół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 krzywiźnie rysowanej linii, zaśdwa kolejne określają położenie końcowego punktu krzywej względem punktuodniesienia 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ą standardowychnarzędzi graficznych Flasha pozostają nienaruszone. Przykładem zastosowania tejmetody jest polecenie ��.

� �� # �� — rozpoczyna tworzenie nowego jednolitego wypełnienia. Metoda taprzyjmuje dwa argumenty: �� oraz ��. Pierwszy z nich określa kolor wypełnieniai jest podawany w postaci szesnastkowego kodu RGB. Na przykład kod ��to jednolite czarne wypełnienie. Drugi argument jest opcjonalny i określa parametrkrycia. Jego wartość powinna mieścić się w przedziale od 0 do 100, zaś domyślnieprzyjmowana jest wartość 100 (całkowite krycie). Polecenie �� # �� powinnosię pojawić przed wszelkimi poleceniami � �� lub ��, rysującymi danywypeł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ącychparametry krycia poszczególnych kolorów zawartych w tablicy ��. Czwartyargument, �� , również jest tablicą — zawarte w niej wartości określająpołożenia poszczególnych kolorów z tablicy �� w gradiencie. Wartość 0odpowiada początkowi gradientu, zaś wartość 255 reprezentuje najbardziej oddalonypunkt gradientu. Nieco trudniejsze jest funkcjonowanie argumentu �� . Jednąz dopuszczalnych postaci tego argumentu jest macierz o wymiarach 3×3, określającaprzekształ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 niespotkał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 metodyjest 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łaszczyźnie obrazu za pomocą poleceń � �� i ��, rysujesz kolejnesegmenty 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 listwieczasowej, 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 klipfilmowy się przemieszcza, rysunek przemieszcza się wraz z nim.

Najłatwiejszym sposobem opanowania zasad działania wirtualnego pióra jest praktycznewypróbowanie jego możliwości.

��

Rozpocznijmy eksperyment od narysowania kwadratu. W pierwszej kolejności ustal styllinii. 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óregorozpoczniesz 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órnynarożnik obrazu). Przyjmijmy jednak, że chcesz rozpocząć rysowanie w jakimś innymmiejscu, zatem powinieneś przesunąć pióro za pomocą metody ��.


Jak wiesz, metoda ta przyjmuje dwa argumenty — współrzędne X i Y punktu, w którym masię znaleźć 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żemyrozpocząć 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 kierunkuchcesz 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łatwieniananieśliśmy siatkę).

��Za pomocą skryptu

narysowaliśmykwadrat

To nie było trudne. Nie wierz mi na słowo. Poświęć kilka chwil i wykonaj ćwiczenie, abyopanować podstawowe zasady rysowania linii prostych za pomocą skryptów.

��

Wiesz już, jak można narysować kwadrat za pomocą skryptu. Teraz narysuj własny.


�� 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 parametrzekrycia 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ępujerysowanie. Utworzymy kwadrat, którego bok ma długość 50 pikseli. Rozpocznijod 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 momenciewirtualne pióro znajduje się w punkcie (90, 30).

�� Aby narysować pierwszy pionowy bok kwadratu, nie zmieniaj współrzędnej Xwirtualnego pióra, a jego współrzędną Y zwiększ o 50 pikseli. Dopisz do skryptuponiż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.


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 powinienwyglądać tak, jak pokazano na rysunku 10.3. Pamiętaj, by zapisać plik.

�� 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 parametryw skrypcie. Sprawdź, 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.

��

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ślanyza 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ściena obu jej końcach, z kolei za pomocą stycznych można regulować jej krzywiznę (stycznezwykle są wyposażone w przeciągalne uchwyty, będące zarazem wierzchołkami stycznych).


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 krzyweBeziera drugiego stopnia, które są wewnętrznie wykorzystywane przez Flasha. Rysująckrzywe 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 obustycznych 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órychkrzywizn — 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 dlategoFlash wewnętrznie przechowuje wszystkie informacje o krzywych w postaci krzywychdrugiego 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 trzeciegostopnia każda ze stycznych

posiada własny wierzchołek.

Flash potrafi pracować

z reprezentacją krzywych

Beziera trzeciego stopnia,

lecz wewnętrznie opisuje je

jako krzywe drugiego stopnia

krzywa Beziera drugiego stopnia krzywa Beziera trzeciego stopnia

Stosowanie metody �� jest proste — przyjmuje ona cztery argumenty: współrzędneX 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ównooba wierzchołki krzywej drugiego stopnia, jak i wierzchołek jej stycznych — wszystkowyłą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 edytorskryptów (panel Actions).

�� Utwórz trzy puste klipy filmowe — dwa dla wierzchołków krzywych oraz jedendla uchwytu stycznej. W edytorze skryptów wpisz następujący kod:

��!��)�*�+��,��*�-��!��$�!- ��!��)�*�+��,��*�-��!��$�!- ��!��)�*�+��,��*�-��.��$�!- ��


Aby narysować uchwyty, zastosujemy pewną sztuczkę. Dla każdego z klipówfilmowych 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órakształ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 tymsamym miejscu i są zasłaniane przez niebieską.

�� Przemieść klipy filmowe:

��.��$�!�$��0��.��$�!�$�0��!��$�!�$��0��!��$�!�$�0��!��$�!�$��0��!��$�!�$�0��

�� 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 filmiei korzystającą przy tym z pozycji klipów filmowych (uchwytów).


�� Pod wprowadzonym już kodem rozpocznij definicję funkcji o nazwie $��*+��:

1��!��.��',��23

�� 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 miejscupierwszego wierzchołka (klipu filmowego ��,��):

$��$��!��$�!�$� �$��!��$�!�$��

� Następnie, korzystając z polecenia ��, narysuj krzywą, biegnącą do drugiegoklipu filmowego, ��, o krzywiźnie określonej przez położenie klipu filmowego��$��,��. Wreszcie wywołaj akcję ��$��-��.��, aby wymusić odświeżenieobrazu Flasha. Dopisz w definicji funkcji następujący kod:

$��!��$��.��$�!�$� �$��.��$�!�$ �$��!��$�!�$� $��!��$�!�$��*.��41��)��

Gdy użytkownik przeciągnie jeden z uchwytów na obrazie, zostanie wywołanafunkcja $��*+��, która z kolei wywoła akcję ��$��-��.��. Chcemy,aby przeciąganie uchwytów i aktualizacja kształtu krzywej było działaniem jaknajbardziej płynnym, dlatego za pomocą tej akcji wymuszamy odświeżanie obrazupomiędzy klatkami. Listing 10.2 przedstawia kompletną definicję funkcji $��*+��.

�� Kompletna definicja funkcji drawCurve()

1��!��.��',��2��$��!��$�� //��$��$��!��$�!�$� �$��!��$�!�$��$��!��$��.��$�!�$� �$��.��$�!�$ �$��!��$�!�$� $��!��$�!�$��*.��41��)��3

�� Funkcja jest już gotowa, jednak film jeszcze nie. Musimy zdefiniować metodę��/�� (reagującą na wciśnięcie klawisza myszy) dla każdego z klipówfilmowych 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) powinienwywoływać funkcję $��*+��, która od nowa narysuje krzywą. W tym celumetodzie ��0��0�� klipu ��$��,�� przypiszemy zdefiniowaną przed chwiląfunkcję $��*+��. Pod definicją funkcji $��*+�� umieść dalszy ciąg kodu:

��.��$�!��5��0�1��!��2��6��7��+��+��0�$��.��',��3

�� Przetestuj film. Możesz kliknąć niebieski uchwyt i przeciągnąć go. Gdy to zrobisz,zmieni się kształt krzywej (rysunek 10.6).


��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żeszgo już upuścić. Teraz zajmiemy się tą kwestią. Musimy zdefiniować, co się mawydarzyć po zwolnieniu klawisza myszy. Innymi słowy, musimy zdefiniowaćmetodę ��1��.

�� Przede wszystkim trzeba zakończyć przeciąganie klipu filmowego przycisku.Następnie wywołamy metodę ��0��0��, aby odświeżyła krzywą. Jeśli niezrobilibyśmy tego, krzywa mogłaby się dziwnie zachować w przypadku energicznegoprzeciągania, a następnie szybkiego zwolnienia klawisza myszy. I wreszcie,przypiszemy metodzie ��0��0�� wartość ��$�� $ (niezdefiniowana) — gdynie jest przeciągany żaden uchwyt, krzywa nie powinna być modyfikowana. Gdybyśnie zlikwidował definicji metody ��0��0��, Flash nadal śledziłby ruchymyszy, 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:

��.��$�!��8��0�1��!��2��*6��7��+��+��+��+��0��.�1��.�3

�� W czasach, gdy zdarzenia myszy mogły być powiązane wyłącznie z przyciskami,projektanci zawsze sprawdzali zdarzenia �� i ��2�� $��(czyli odpowiednio: zwolnienie klawisza myszy nad przyciskiem i zwolnienie gopoza przyciskiem). Również w tym przypadku musimy to zrobić. Te same operacje,które są wykonywane w reakcji na zdarzenie ��1��, powinny być wykonanerównież po wykryciu zdarzenia ��1��2�� $�. Można to osiągnąć, przypisującmetodzie ��1��2�� $� metodę ��1��, w taki sposób:

��.��$�!��8��9��.��0��.��$�!��8��


�� Zapisz i przetestuj film.

Utworzyłeś zgrabny film, który w elegancki sposób demonstruje funkcjonowaniekrzywych Beziera drugiego stopnia. Mógłbyś na tym poprzestać, lecz byłoby tomał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ólnychzdarzeń myszy i przypiszemy je pozostałym dwóm klipom. Zrealizujemy to zapomocą takiego prostego kodu:

��!��$�!��5��0��!��$�!��5��0��.��$�!��5��!��$�!��8��0��!��$�!��8��0��.��$�!��8��!��$�!��8��9��.��0��!��$�!��8��9��.��0��.��$�!��8��

�� 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ójkod z listingiem 10.32.

��Ostateczna postać

filmu rysującego

interaktywną krzywą

Beziera drugiego

stopnia

2Moż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.


�� Kompletny skrypt rysujący krzywe

��!��)�*�+��,��*�-��!��$�!- ��!��)�*�+��,��*�-��!��$�!- ��!��)�*�+��,��*�-��.��$�!- ��

��!��$�!�� !��$�!�� .��$�!�� //��

��!��$�!�� !��$�!�� .��$�!��

��.��$�!�$��0��.��$�!�$�0��

��!��$�!�$��0��!��$�!�$�0��

��!��$�!�$��0��!��$�!�$�0��

1��!��.��',��2��$��!��$�� //��$��$��!��$�!�$� �$��!��$�!�$��$��!��$��.��$�!�$� �$��.��$�!�$ �$��!��$�!�$� $��!��$�!�$��*.��41��)��3

��.��$�!��5��0�1��!��2��6��7��+��+��0�$��.��',��3

��.��$�!��8��0�1��!��2��*6��7��+��+��+��+��0��.�1��.�3

��.��$�!��8��9��.��0��.��$�!��8��!��$�!��5��0��!��$�!��5��0��.��$�!��5��!��$�!��8��0��!��$�!��8��0��.��$�!��8��!��$�!��8��9��.��0��!��$�!��8��9��.��0��.��$�!��8��.��',��

Już wiesz, jak rysować krzywe za pomocą skryptów. Czy potrafiłbyś jednak narysowaćokrąg? Jak myślisz, czy to trudne?

��

Często używanym rodzajem krzywych są okręgi. Flash nie udostępnia bezpośredniej metodyrysowania 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, żenikt nie dostrzeże różnicy. Co więcej, okręgi rysowane za pomocą narzędzia ilustracyjnegoOval Tool Flasha tak naprawdę również są jedynie przybliżeniami.


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 miejscuobrazu. Definiując tę funkcję jako wewnętrzną metodę obiektu 0�� +� �3��,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ówo 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 skopiujgo ze skryptu zapisanego na płycie CD-ROM w pliku circle.as, w katalogu Przyklady/Rozdzial_10.

�� Funkcja prototypowa rysująca okręgi

��,��*�*��*��.��',��!��0�1��!�� 2��0��:��;��<�0��:��=�=��;= ��>� ��!��>� �?� ��>< �?<��!��>� �?� �� ?��!��?� �?� ��?< �?<��!��?� �?� ��?� ��!��?� �>� ��?< �><��!��?� �>� �� >��!��>� �>� ��>< �><��!��>� �>� ��>� ��3

Gdy funkcja jest zdefiniowana, wystarczy, byś określił styl linii (� ��) dla danegoklipu 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 jestjak 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:

!��!��$�!$�� !��!��$�!$��.��',��!��


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

��

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ępnieprzejdziemy do bardziej skomplikowanego, czyli gradientowego.

��

Aby rozpocząć tworzenie wypełnienia, wystarczy umieścić w skrypcie akcję �� # ��:

<�7��/��"&��% �"*��$&�!��%��

Tak jak w przypadku innych metod rysujących wektory parametr 4��5 jest szesnast-kowym kodem koloru, zaś parametr 4��,�� 5 — 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 chceszrozpocząć rysowanie. Następnie użyj polecenia �� # ��, po którym umieść w skrypciesekwencję poleceń � �� i ��, rysujących kształt. Na końcu sekwencji umieśćpolecenie ��$# ��, zamykające wypełniony kształt. Spróbujmy zastosować to w praktyce.


�� !�� "��

To ćwiczenie będzie dla Ciebie wyjątkowo łatwe — niemal wszystkie polecenia występującew 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, dodajjeden 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:

�� @@:::::::::::::::::::::::::::::��<�7��/��//��@@:::::::::::::::::::::::::::::�� @@:::::::::::::::::::::::::::::��./��@@:::::::::::::::::::::::::::::

�� Zapisz i przetestuj film (rysunek 10.9).

��Dodając dwa

proste wierszedo 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ącystyl linii, � ��.


��

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ę jeszczez 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:

��A��.��/��"�*$7��.��% �"&��% �"*��$&�!��% �"*�#!(�% "��!��#$*�#�&�#��B!�C%��

Metoda ta wymaga podania wszystkich argumentów: jeśli któryś z nich pominiesz lubjego postać będzie niepoprawna, gradient nie pojawi się na obrazie.

Pierwszy argument, 4��,��$ ��5, może przyjąć wartość tekstową (� ��( (gradientliniowy) lub (��$ ��( (gradient radialny). W gradiencie liniowym kolejne kolory pojawiająsię w postaci równoległych, płynnie przechodzących pasm, w gradiencie radialnym koloryrozchodzą się w postaci koncentrycznych kół.

Argumenty 4��5, 4��,�� 5 i 4��6��7�5 są tablicami, które muszą mieć takąsamą długość (czyli wszystkie trzy muszą zawierać tyle samo wartości). Tablica 4��5zawiera szesnastkowe kody kolorów, które znajdą się w gradiencie. Tablica 4��,�� 5 zawiera wartości z przedziału od 0 do 100, reprezentujące krycie poszczególnychkolorów gradientu — poszczególne parametry krycia z tej tablicy są przyporządkowanekolorom z tablicy 4��5 o takim samym indeksie. Tablica 4��6��7�5 określa pozycjeposzczególnych kolorów w gradiencie. Jej komórki mogą przyjmować wartości z przedziałuod 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 kolorygradientu mają być równomiernie rozmieszczone i półprzezroczyste. W takim przypadkuomawiane argumenty przyjmą następującą postać:

&��0�D��//�� ////// ��//E�*��$&�!��0�D�� E�*�#!(��0�D� ��= ��E�

Najbardziej skomplikowany jest ostatni argument, 4�� 6,��6��6��8��95. Może onprzyjmować jedną z dwóch postaci — złożoną lub prostszą. W skomplikowanej postaciargument jest obiektem o dziewięciu właściwościach, noszących odpowiednio nazwy:�, �, �, $, �, �, �, �, . Właściwości te reprezentują macierz przekształceń o wymiarach 3×3:

� � �

$ � �

� �

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 argumentu4�� 6,��6��6��8��95.


W prostszej postaci argument 4�� 6,��6��6��8��95 również jest obiektem, lecztym 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 4�� 6,��6��:�6��8��95. Właściwości � i � określają współrzędne lewego górnego narożnika wypełnieniagradientowego. 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, jejwartość jest podawana w radianach.

Aby kąt podany w stopniach przeliczyć na radiany, zastosuj taki wzór:

��.��0��*��:�+��5F�@� ��

Zmienna �� przechowuje kąt podany w stopniach, zmienna ��$ �� — kąt

podany w radianach, zaś właściwość 0��3/; 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łycieCD-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ącymw kolor sfery, który następnie ciemnieje i wreszcie przy samym końcu rozjaśniasię, symulując odbicie światła od podłoża. Taki gradient naśladuje grę światłai 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:

!��0�D��////// ��;;�� ;; ��;;��E��*��0�D�� E��0D� �;� �� E�

�� 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ścimyw 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:

��0�2��*�G-<��- ��G�� G�� 'G=� ��G=� ��G�3�

�� Należy jeszcze rozpocząć wypełnianie, narysować okrąg i zakończyć wypełnianie.Dopisz następujący kod:


��<�7��A��.��/��-��.��- �!�� *�� .��',��!�� ./��

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 sferautworzona wyłącznie

za pomocą skryptu

�� Kompletny kod tworzący podświetloną sferę

��,��*�*��*��.��',��!��0�1��!�� 2��0��:��;��<�0��:��=�=��;= ��>� ��!��>� �?� ��>< �?<��!��>� �?� �� ?��!��?� �?� ��?< �?<��!��?� �?� ��?� ��!��?� �>� ��?< �><��!��?� �>� �� >��!��>� �>� ��>< �><��!��>� �>� ��>� ��3!��0�D��////// ��;;�� ;; ��;;��E��*��0�D�� E��0D� �;� �� E��0�2��*�G-<��- ��G�� G�� 'G=� ��G=� ��G�3��<�7��A��.��/��-��.��- �!�� *�� .��',��!�� ./��

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ł ten zakończymy przykładem praktycznego wykorzystania możliwości rysowaniaza pomocą skryptów. Często opracowując różnego rodzaju projekty, potrzebujemy pro-stego mechanizmu tworzenia „standardowych” przycisków, przypominających te znanez systemu operacyjnego — szare, trójwymiarowe przyciski, do których od dawna jesteśmyprzyzwyczajeni.

Co powinieneś zrobić, aby utworzyć taki przycisk? Przyciski zwykle mają napisy, z tegowniosek, że powinna istnieć możliwość podania tekstu, jaki pojawi się na przycisku. Każdyprzycisk 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 �� +� �3��.

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łównejlistwie czasowej.

�� Rozpocznij definicję funkcji, wpisując wiersz:

+��,��*�*��*��!��H��0�1��!�� .�*��2

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:

��!��)�*�+��,��*�� .�*��<��$�!�0��D��E�

Pierwszy z wierszy tworzy nowy, pusty klip filmowy o podanej nazwie, umieszczającgo na wskazanym poziomie warstwy. Drugi przypisuje zmiennej ��,�� odnośnikdo 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śnikazawartego w zmiennej ��,��. Wewnątrz nawiasów klamrowych definicji funkcjidopisz następujący kod:

<��$�!�!��/��.�-<��$��- �� <��$�!�<��$��#��0��<��$�!�<��$��!��<��0�1��<��$�!�<��$��0��


Jaką rolę pełni ten kod? Pierwszy wiersz tworzy wewnątrz klipu ��,�� pole tekstoweo 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 wierszachustalamy wartości kilku właściwości pola tekstowego: �� 6�, �� i ��.

Gdy właściwość �� 6� 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. Wreszciewłaściwość �� pola tekstowego reprezentuje tekst wyświetlany w tym polu.

�� Następnym naszym krokiem jest sformatowanie tekstu w polu. W definicji funkcjidopisz następujące wiersze:

��<��$�1�0��'��/��<��$�1�1��0�-$��-�<��$�!�<��$��/��<��$�1��

Powyższy kod tworzy obiekt TextFormat o nazwie ��,��. Obiekt tego typuumoż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 polatekstowego ��,��.

�� Musimy także ustalić, jakie są wymiary pola tekstowego (automatyczniedopasowującego się do tekstu), aby dobrać odpowiednie wymiary samego przycisku.Wpiszemy je do dwóch zmiennych — ��= $�� (szerokość tekstu) i ��>� ��(wysokość tekstu). Wpisz kod:

<��$�!��I�.��0�<��$�!�<��$��$'�.��>��<��$�!��J��7��0�<��$�!�<��$��$��7��

� Nadszedł wreszcie czas, aby narysować przycisk. Szerokość przycisku będzie o 4piksele większa od szerokości pola tekstowego, aby napisowi w przycisku nie byłozbyt „ciasno”. Utwórz funkcję, która narysuje przycisk w położeniu górnym:

<��$�!�.��'K*�0�1��!��2��<��$��$��0��<��$��$�0��!��I�.�� <�7��/��,,,,,,�� I�.�� J��7�� J��7�� //////�� I�.�� ./��3

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 zgodniez ustaloną wcześniej szerokością i wysokością pola tekstowego. Lewa i górnakrawędź przycisku jest biała, zaś prawa i dolna — czarna, w efekcie powstajewrażenie trójwymiarowości przycisku. Wnętrze przycisku zostało wypełnionekolorem jasnoszarym, do którego jesteśmy przyzwyczajeni przez system operacyjny.


� Narysowaliśmy przycisk w położeniu górnym. Przydałby się również rysunekprzycisku w położeniu dolnym. Funkcja $��*?�*� jest niemal identyczna z funkcją$��*@�, jedynie krawędzie przyjmują kolory na odwrót, dzięki czemu przycisksprawia wrażenie wciśniętego. Wpisz poniższy kod:

<��$�!�.��'6�'��0�1��!��2��<��$��$��0��<��$��$�0��!��I�.�� <�7��/��,,,,,,�� //////��I�.�� J��7�� J��7�� I�.�� ./��3

�� Teraz umieść w skrypcie polecenia, które uruchomią odpowiednią funkcjępo wciśnięciu lub zwolnieniu przycisku:

<��$�!��5��0�<��$�!�.��'6�'��<��$�!��8��0�1��!��2��.��'K*��H��3<��$�!��8��9��.��0�<��$�!�.��'K*�

Zwróć uwagę na to, że oprócz rysowania odpowiedniej postaci przycisku metoda��1�� wywołuje metodę o nazwie ��A��. Za jej pomocą będziesz mógłpóźniej wykonywać kod w reakcji na kliknięcie przycisku.

�� Narysuj przycisk w początkowym stanie i zamknij definicję funkcji:

��<��$�!�.��'K*��3

�� Aby uruchomić świeżo utworzoną funkcję, umieść poza nią następujący wiersz kodu:

��!��H��-+L(�*�#!��&- �-�H��$�!- ��

Jeśli chcesz prześledzić reakcję przycisku na kliknięcie, dodaj następujący kod:

�H��$�!��H��0�1��!��2��!��-M��N�&��&�OB��L(�*�#!��&P-��3

Zapisz i przetestuj film. Po jego uruchomieniu ekran Flasha powinien wyglądać tak jakna rysunku 10.11. Jeśli coś się nie zgadza, porównaj swój kod z listingiem 10.6.

�� Kompletny kod rysujący przycisk

+��,��*�*��*��!��H��0�1��!�� .�*��2��!��)�*�+��,��*�� .�*��<��$�!�0��D��E�


��Trójwymiarowy

przycisk utworzony

wyłącznie za pomocą

skryptu

��<��$�!�!��/��.�-<��$��- �� <��$�!�<��$��#��0��<��$�!�<��$��!��<��0�1��<��$�!�<��$��0��

��<��$�1�0��'��/��<��$�1�1��0�-$��-��<��$�!�<��$��/��<��$�1��

��<��$�!��I�.��0�<��$�!�<��$��$'�.��>��<��$�!��J��7��0�<��$�!�<��$��$��7��

��<��$�!�.��'K*�0�1��!��2��<��$��$��0��<��$��$�0��!��I�.�� <�7��/��,,,,,,�� I�.�� J��7�� J��7�� //////�� I�.�� ./��3

��<��$�!�.��'6�'��0�1��!��2��<��$��$��0��<��$��$�0��!��I�.�� <�7��/��,,,,,,�� //////��I�.�� J��7��


�� J��7�� I�.�� ./��3

��<��$�!��5��0�<��$�!�.��'6�'��<��$�!��8��0�1��!��2��.��'K*��H��@@''�B�(��1��&!(Q�#�'��(O!O��&!(Q��!� �#��(.�(O!O��Q�*��R�(��3��<��$�!��8��9��.��0�<��$�!�.��'K*�

��<��$�!�.��'K*��3��!��H��-+L(�*�#!��&- �-�H��$�!- ��H��$�!��H��0�1��!��2��!��-M��N�&��&�OB��L(�*�#!��&P-��3

��

W tym rozdziale poznałeś wprowadzoną we Flashu MX możliwość rysowania na ekranieza pomocą skryptów. Wprawdzie udostępniane przez program metody ograniczają się dorysowania linii prostych i krzywych oraz jednolitych i gradientowych wypełnień, jednakrozwiązanie to daje projektantowi — programiście ogromne możliwości i w znacznymstopniu zwiększa swobodę jego działania.

Technology

Flash MX. Vademecum profesjonalisty