r07-04(1), Informacje dot. kompa


Część 4.

Przekształcanie grafiki i dźwięku

0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic

0x08 graphic

Części składowe języka HTML


0x08 graphic
Klip filmowy jest bardzo potężnym obiektem. Flash pozwala nadzorować jego wygląd i zachowanie. Takie właściwości klipu filmowego jak pozycja, skalowanie, rotacja, przezroczystość, kolor, a nawet nazwa klonu, mogą być ustawiane za pomocą języka ActionScript. W rezultacie otrzymujesz możliwość tworzenia elementów interaktywnych wzorowanych na grach zręcznościowych, zmieniających się w odpowiedzi na wprowadzane przez użytkownika dane lub preferencje. Wyobraź sobie na przykład grę Tetris stworzoną od początku do końca we Flashu. Każda figura geometryczna będzie klipem filmowym, którego rotację i pozycję kontroluje użytkownik za pomocą klawiatury. W grze w stylu Asteroids możemy mieć do czynienia z obcym statkiem kosmicznym, poruszającym się w zależności od zachowania statku sterowanego przez użytkownika. Tego typu animacje nie opierają się na automatycznie animowanych sekwencjach, które zazwyczaj tworzysz, pracując nad filmem we Flashu. Są to raczej dynamiczne serie obrazów, „przygotowywane” na bieżąco w czasie odtwarzania. Opanowanie zasad kontrolowania właściwości klipu filmowego jest więc pierwszym krokiem na drodze do zrozumienia sposobu tworzenia animacji w całości za pomocą ActionScript.

Ponadto Flash umożliwia użytkownikom przesuwanie klipu filmowego za pośrednictwem akcji przeciągnij-i-upuść. Wykorzystaj przeciągane klipy filmowe do stworzenia układanki, w której użytkownik prawdziwie sięga po kolejne elementy i układa je na właściwych miejscach, lub też zaprojektuj bardziej wciągający interfejs internetowego sklepiku, gdzie użytkownik będzie wybierał artykuły i wrzucał je do koszyka. Nauczysz się tworzyć przeciągane klipy filmowe, a także metody pozwalające określić miejsce ich upuszczania na scenie, Dowiesz się również, jak kontrolować kolizje klipów i nakładanie się z innymi klipami filmowymi. Potem zajmiemy się powielaniem złożonych klipów filmowych i przeciąganiem ich z biblioteki na scenę w trakcie odtwarzania.

Na koniec zobaczysz, jak z pomocą klipu filmowego zaprojektować własny kursor. Zamiast bowiem używać domyślnej strzałki lub „rączki”, możesz tworzyć kształty odpowiadające unikalnej zawartości twojego filmu. Dla przykładu, przygotuj ikonę lornetki lub krzyżyka w grze o polowaniu lub dłoń szkieletu, prowadzącą użytkownika przez gabinet grozy.

0x08 graphic
0x08 graphic
Przeciąganie klipu filmowego

Mechanizm przeciągnij-i-upuść pozwala tworzyć najbardziej bezpośredni rodzaj interakcji pomiędzy użytkownikiem i filmem Flasha. Nie ma nic bardziej satysfakcjonującego niż możliwość przeciągnięcia grafiki na ekran, przesuwania jej z jednego miejsca w drugie, a na końcu - porzucenia zupełnie gdzie indziej. Jest to naturalny sposób na interakcję użytkownika z obiektami, a w dodatku bardzo łatwy do wykorzystania. Tworzenie mechanizmów przeciągnij-i-upuść we Flashu zamyka się w dwóch podstawowych krokach: przygotowaniu klipu filmowego i zaprojektowaniu przycisku wewnątrz klipu, wyzwalającego akcję przeciągania.

Zwykle przeciąganie rozpoczyna się w momencie, kiedy użytkownik naciśnie klawisz myszy. Później, po zwolnieniu klawisza, przeciąganie zostaje przerwane. Stąd akcja rozpoczęcia przeciągania związana jest ze zdarzeniem myszy on (press), a akcja zakończenia przeciągania - ze zdarzeniem on (release).

W celu rozpoczęcia przeciągania
klipu filmowego:

  1. Utwórz symbol klipu filmowego, umieść jego klon na scenie i nadaj mu nazwę.

  2. Utwórz niewidzialny przycisk, tak jak to opisano w rozdziale 4., a następnie umieść jego klon wewnątrz klipu filmowego (rys. 7.1).

  3. Zaznacz klon przycisku i otwórz paletę akcji.

  4. Wybierz Actions/on (Esc + on). W oknie skryptu pojawi się wyrażenie on (press).

  5. W bloku edycji parametrów usuń zaznaczanie pola wyboru Release i zaznacz pole wyboru Press (rys. 7.2). Wyrażenie on (press) zostanie zastąpione przez wyrażenie on (release).

0x01 graphic

Rys. 7.1. Te oczy są częścią symbolu klipu filmowego. W trybie edycji przeciągnij ikonę niewidzialnego przycisku nad oczy, żeby przypisać akcję startDrag do niewidzialnego przycisku

0x01 graphic

Rys. 7.2. Wybierz zdarzenie (Event) Press dla manipulatora on przypisanego do niewidzialnego przycisku w twoim klipie filmowym

0x08 graphic
0x01 graphic

Rys. 7.3. Wpisanie słowa kluczowego this w polu Target sprawia, że akcja startDrag będzie oddziaływać na bieżący klip filmowy

  1. Wybierz Actions/startDrag (Esc + dr). Poniżej zdarzenia myszy on (press) pojawi się akcja startDrag.

  2. W polu Target bloku edycji parametrów wpisz this i zaznacz pole Expression (rys. 7.3).

Słowo kluczowe this odnosi się do bieżącego klipu filmowego. Zaznaczenie pola wyboru Expression usuwa cudzysłów zamykający to słowo, dzięki czemu Flash traktuje je właśnie jako słowo kluczowe, a nie łańcuch znakowy.

  1. Przeciągnij klon klipu filmowego z biblioteki na scenę.

Ponieważ przycisk wewnątrz klipu filmowego używa wyrażenia względnego this, niepotrzebne jest nazywanie klonu klipu filmowego.

  1. Przetestuj film. Jeśli naciśniesz klawisz myszy w obrębie klipu filmowego, będziesz mógł go przeciągnąć.

0x08 graphic
W celu zakończenia
przeciągania klipu filmowego:

  1. Pracując dalej nad plikiem utworzonym w poprzednim ćwiczeniu, zaznacz klamrę zamykającą w oknie skryptu.

  1. Wybierz Actions/on.

Pojawi się wyrażenie on (release).

  1. Wybierz Actions/stopDrag (Esc + sd). Pojawi się wyrażenie stopDrag bez żadnych parametrów (rys. 7.4).

  2. Przetestuj film. Jeśli naciśniesz klawisz myszy w obrębie klipu filmowego, będziesz mógł go przeciągnąć. Kiedy zwolnisz klawisz, zakończysz przeciąganie (rys. 7.5).

Wskazówki

  • Możesz także przypisać akcję startDrag do manipulatora zdarzenia klipu filmowego onClipEvent i nie przejmować się osadzonym niewidzialnym przyciskiem. Skorzystaj z tego sposobu, jeśli masz tylko jeden klip filmowy, który odbiorca może przyciągać, i kiedy nie potrzebujesz korzystać z cech niewidzialnego przycisku. Jeśli, na przykład, przypiszesz akcję startDrag do zdarzenia onClipEvent (load), Flash automatycznie wprowadzi możliwość przeciągania tego klipu filmowego. Kiedy przypiszesz akcję startDrag do zdarzenia onClipEvent (mouseDown), klip będzie można przeciągać po uprzednim kliknięciu myszą gdziekolwiek na scenie.

  • Możliwe jest przeciąganie tylko jednego klipu filmowego na raz. Właśnie dlatego akcja stopDrag nie posiada żadnych parametrów; jest wykonywana tylko w odniesieniu do pliku aktualnie przeciąganego.

0x01 graphic

Rys. 7.4. Przypisz akcję stopDrag do manipulatora zdarzenia on (release)

0x01 graphic

Rys. 7.5. Każdy z trzech elementów twarzy - widocznych po prawej - jest klipem filmowym, zawierającym niewidzialny przycisk z przypisanym skryptem widocznym w ramce powyżej. Te trzy klipy mogą być przeciągnięte nad ziemniaczaną twarz i upuszczone w odpowiednich pozycjach

0x08 graphic
0x01 graphic

Rys. 7.6. Opcja Lock mouse to center wymusza przeciąganie klipu filmowego za punkt początkowy

Być może wolałbyś, żeby w czasie przesuwania klipu filmowego do wskaźnika myszy przyciągany był jego środek, a nie punkt, w którym kliknął użytkownik.

W celu wyśrodkowania
przeciąganego klipu filmowego:

  1. W bloku edycji parametrów palety akcji zaznacz pole wyboru Lock mouse to center (rys. 7.6). Kiedy klikniesz myszą klip filmowy, który zamierzasz przeciągnąć, punkt początkowy klipu zostanie przyciągnięty do wskaźnika myszy.

Wskazówka

  • Jeśli zaznaczysz opcję Lock mouse to center, upewnij się, że twój niewidzialny przycisk pokrywa punkt początkowy klipu filmowego. W przeciwnym razie, po przyciągnięciu do niego klipu, wskaźnik nie będzie już dłużej znajdował się nad niewidzialnym przyciskiem i Flash nie wykryje momentu przerwania akcji przeciągania.

0x08 graphic
Być może chciałbyś również ograniczyć obszar, po którym użytkownik może przeciągać klipy filmowe.

W celu ograniczenia obszaru przeciągania klipu filmowego:

  1. Zaznacz pole wyboru Constrain to rectangle i wprowadź współrzędne (w pikselach) do wszystkich czterech pól, reprezentujących krańcowe położenia punktu początkowego przeciąganego klipu filmowego (rys. 7.7).

L: krańcowe położenie w kierunku lewego marginesu (minimalna współrzędna X), jakie może osiągnąć punkt początkowy klipu filmowego;

R: krańcowe położenie w kierunku prawego marginesu (maksymalna współrzędna X), jakie może osiągnąć punkt początkowy klipu filmowego;

T: krańcowe położenie w kierunku górnego marginesu (minimalna współrzędna Y), jakie może osiągnąć punkt początkowy klipu filmowego;

B: krańcowe położenie w kierunku dolnego marginesu (maksymalna współrzędna X), jakie może osiągnąć punkt początkowy klipu filmowego;

lub

Współrzędne są względne w stosunku do listwy czasowej, w której rezyduje klip filmowy. Jeśli przeciągany klip filmowy znajduje się na głównej listwie czasowej, współrzędne odpowiadają punktom na scenie, np. L=0, T=0 to lewy górny róg sceny. Jeśli przeciągany klip filmowy zawiera się wewnątrz innego klipu, L=0, T=0 odpowiada punktowi początkowemu klipu filmowego-rodzica.

0x01 graphic

Rys. 7.7. Opcja Constrain to rectangle umożliwia ustawienie lewej (L), prawej (R), górnej (T) i dolnej (B) krawędzi

Wskazówka

  • Parametrów opcji Constrain to rectangle możesz użyć do ograniczenia ruchu przeciągania tylko wzdłuż poziomej lub pionowej ścieżki, tak jak w przypadku pasków przewijania. Ustaw te same wartości w polach L i R, żeby ograniczyć się do ruchu w pionie, lub wprowadź identyczne ustawienia pól T B, jeśli przeciąganie ma się odbywać tylko w prawo lub lewo.

0x08 graphic

Ustawianie właściwości
klipu filmowego

Wiele spośród właściwości klipu filmowego - jak rozmiar, przezroczystość, pozycja, rotacja i jakość - definiują wygląd filmu. Korzystając z akcji setProperty, możesz wskazać dowolny klip filmowy i zmienić którąś z wymienionych charakterystyk w czasie odtwarzania. Poniższa tabela przedstawia właściwości dostępne dla akcji setProperty. Niektóre z tych właściwości mają charakter globalny, co oznacza, że odnoszą się do całego filmu, a nie jedynie pojedynczego klipu filmowego.

Tabela 7.1. Właściwości ustawiane za pomocą akcji setProperty

Właściwość Wartość Opis

_alpha (Alpha)

Liczba od 0 do 200

Określa przezroczystość, gdzie 0 oznacza całkowicie przezroczysty, a 100 - kryjący.

_visible (Visibility)

Prawda lub fałsz

Określa widzialność klipu filmowego.

_name (Name)

Nazwa

Określa nazwę nowego klonu klipu filmowego.

_rotation (Rotation)

Liczba

Określa stopień obrotu zgodnie z ruchem wskazówek zegara, np. wartość 45 obraca klip filmowy w prawo.

_height (Height)

Liczba (w pikselach)

Określa rozmiar w pionie.

_width (Width)

Liczba (w pikselach)

Określa rozmiar w poziomie.

_x (X Position)

Liczba (w pikselach)

Określa pozycję w poziomie punktu początkowego klipu filmowego.

_y (Y Position)

Liczba (w pikselach)

Określa pozycję w pionie punktu początkowego klipu filmowego.

_xscale (X Scale)

Liczba

Określa procent rozmiaru w poziomie oryginalnego symbolu klipu filmowego.

_yscale (Y Scale)

Liczba

Określa procent rozmiaru w pionie oryginalnego symbolu klipu filmowego.

_focusrect (Show focus rectangle)

Prawda lub fałsz

Określa, czy wokół przycisków lub pól pojawia się żółty prostokąt, kiedy używasz klawisza Tab do nawigowania pomiędzy tymi przyciskami lub polami. Jest to właściwość globalna, odnosząca się do całego filmu, a nie poszczególnych klipów.

Tabela 7.1. Właściwości ustawiane za pomocą akcji setProperty (ciąg dalszy)

Właściwość Wartość Opis

_highquality (High quality)

Liczba 0, 1 lub 2

Określa stopień wygładzania krawędzi obiektów w czasie odtwarzania filmu. 2 = najlepszy: pełne wygładzanie wszystkich obiektów. 1 = wysoki: wygładzanie tylko w przypadku braku animacji. 0 = niski: bez wygładzania. Jest to właściwość globalna, odnosząca się do całego filmu, a nie poszczególnych klipów.

0x08 graphic
_quality (_quality)

LOW (niska), MEDIUM (średnia), HIGH (wysoka) lub BEST (najlepsza)

Określa stopień wygładzania krawędzi obiektów w czasie odtwarzania filmu. BEST = pełne wygładzanie wszystkich obiektów. HIGH = wygładzanie tylko w przypadku braku animacji. MEDIUM = wygładzanie niskiej jakości. LOW = bez wygładzania. Jest to właściwość globalna, odnosząca się do całego filmu, a nie poszczególnych klipów.

_soundbuftime (Sound buffer time)

Liczba

Określa czas (liczbę sekund), po którym film rozpoczyna odtwarzanie dźwięku. Wartość domyślna to 5. Jest to właściwość globalna, odnosząca się do całego filmu, a nie poszczególnych klipów.

0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
Wskazówki

  • Istnieje różnica pomiędzy właściwością Alpha ustawioną na 0 i Visibility ustawioną na fałsz (False), mimo iż rezultaty mogą wyglądać podobnie. Jeśli właściwość Visibility ma wartość False, to klip filmowy jest prawdziwie niewidoczny. Umieszczone w nim przyciski nie odpowiadają i jakiekolwiek akcje, odnoszące się do tego klipu filmowego, nie działają. Natomiast w przypadku Alpha ustawionego na 0 wszystkie przyciski i akcje klipu filmowego wciąż funkcjonują.

  • Współrzędne przestrzeni x i y dla głównej listwy czasowej zachowują się inaczej, niż w przypadku listew czasowych klipów filmowych. W głównej listwie czasowej oś x rozpoczyna się od lewej krawędzi i rośnie w kierunku krawędzi prawej. Oś y zaczyna się od górnej krawędzi i zmierza do dolnej krawędzi. Tak więc x = 0 i y = 0 wyznaczają lewy górny róg sceny. W przypadku klipów filmowych, te same wartości współrzędnych odnoszą się do punktu początkowego (krzyżyka).

0x01 graphic

Rys. 7.8. Współrzędne x i y w głównej listwie czasowej (u góry) są wyśrodkowane względem lewego górnego rogu sceny, a w przypadku klipu filmowego (u dołu) - względem punktu początkowego

0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x01 graphic

Rys. 7.9. Przypisz akcję setProperty do manipulatora zdarzenia on (release). Akcja ta zmienia właściwości klipu filmowego oraz niektóre ustawienia globalne

0x01 graphic

Rys. 7.10. Dla współrzędnej x klipu filmowego eyepair na głównej listwie czasowej ustalono wartość 123

0x01 graphic

Rys. 7.11. Dla współrzędnej y klipu filmowego eyepair na głównej listwie czasowej ustalono wartość 85

0x01 graphic

Rys. 7.12. Przycisk przenosi klip filmowy z oczami w nowe miejsce, w obrębie ziemniaka

Wartość x wzrasta na prawo od punktu początkowego i zmniejsza się do wartości ujemnych na lewo od tego punktu. Wartość y odpowiednio wzrasta w dół i zmniejsza się w górę (rys. 7.8).

  • Właściwości X Scale oraz Y Scale określają procent rozmiaru pierwotnego symbolu klipu filmowego, który może się różnić w stosunku do tego, co widać na scenie. Jeśli np. umieścisz klon klipu filmowego na scenie i zmniejszysz go o 50%, a potem, w czasie odtwarzania, nadasz właściwościom X Scale oraz Y Scale wartości 100, twój klip filmowy powiększy się dwukrotnie.

W celu zmiany położenia
klipu filmowego:

  1. Utwórz symbol klipu filmowego, umieść jego klon na scenie i nadaj mu nazwę.

  1. Utwórz symbol przycisku, umieść jego klon na scenie, zaznacz go i otwórz paletę akcji.

  2. Wybierz Actions/setProperty (Esc + sp). Poniżej manipulatora zdarzenia on (press) pojawi się wyrażenie setProperty (rys. 7.9).

  3. Z menu rozwijanego Property w bloku edycji parametrów wybierz _x (X Position).

  4. Wprowadź ścieżkę dostępu do klipu filmowego w polu Target lub posłuż się przyciskiem Insert a target path u dołu okna.

  5. W polu Value wprowadź współrzędną x i zaznacz pole Expression, jako że wpisana liczba reprezentuje wartość (rys. 7.10).

  6. Ponownie wybierz Actions/setProperty. Drugie wyrażenie setProperty pojawi się poniżej pierwszego.

  7. W polu Property wybierz _y (Y Position), w polu Target wprowadź ścieżkę dostępu, a w polu Value wprowadź współrzędną y. Zaznacz też pole Expression (rys. 7.11).

  8. Przetestuj film. Kiedy klikniesz utworzony przycisk, klip filmowy zostanie przeniesiony w nowe miejsce, zdefiniowane za pomocą dwóch akcji setProperty (rys. 7.12).

0x08 graphic
Alternatywną metodą ustawiania właściwości klipu filmowego jest napisanie skryptu według szablonu: root.movieclip.property= value. Użyj akcji set variable lub evaluate do przypisania wartości do właściwości wybranego klipu filmowego.

W celu ustawienia
właściwości klipu filmowego
za pomocą skryptu:

  1. W oknie palety akcji, wybierz Actions/set variable (Esc + sv). W polu Variable wprowadź ścieżkę dostępu do klipu filmowego, którego właściwości chcesz zmodyfikować. Wpisz kropkę, a następnie wybraną właściwość. W polu Value wpisz właściwy argument (rys. 7.13).

lub

W oknie palety akcji, wybierz Actions/evaluate (Esc + ev). W polu Expression wpisz ścieżkę dostępu do klipu filmowego, dalej kropkę i na końcu właściwość, którą chcesz ustawić. Wprowadź znak równości, a potem wartość, którą chcesz przypisać właściwości (rys. 7.14).

0x01 graphic

Rys. 7.13. Użyj akcji set variable do wprowadzenia właściwości klipu filmowego w polu Variable i jej nowej wartości w polu Value

0x01 graphic

Rys. 7.14. Akcja evaluate pozwala przypisać nową wartość właściwości klipu filmowego za pomocą jednej tylko linii skryptu

0x08 graphic
0x01 graphic

Rys. 7.15. Wyrażenie setProperty zmienia nazwę klonu klipu filmowego z movieClipInstance na newInstanceName

Zmiana nazwy klipu filmowego pozwala udostępnić go lub ukryć dla odwołujących się do niego akcji. Załóżmy, że przycisk wywołuje metodę _root.myDisplay.gotoAnd Stop(2). Teraz zmieniasz nazwę z myDisplay na yourDisplay. W efekcie przycisk nie będzie w stanie odnaleźć klonu.

W celu zmiany nazwy
klipu filmowego:

  1. Utwórz symbol klipu filmowego, umieść jego klon na scenie i nadaj mu nazwę.

  1. Utwórz symbol przycisku, umieść jego klon na scenie, zaznacz go i otwórz paletę akcji.

  2. Wybierz Actions/setProperty. Poniżej manipulatora zdarzenia on (release) pojawi się wyrażenie setProperty.

  3. Z menu rozwijanego Property w bloku edycji parametrów wybierz _name (Name).

  4. Wprowadź ścieżkę dostępu do klipu filmowego w polu Target lub posłuż się przyciskiem Insert a target path u dołu okna.

  5. W polu Value wpisz nową nazwę klonu. Pole Expression pozostaw niezaznaczone, jako że jest to właściwa nazwa. Kompletne wyrażenie ActionScript pojawi się w oknie skryptu (rys. 7.15). Kiedy będziesz testował film i wciśniesz przycisk, zmieni się nazwa klonu klipu filmowego.

0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
Zmiana koloru
klipu filmowego

Jednym z najbardziej widocznych braków na liście właściwości klipu filmowego udostępnianych przez akcję setProperty jest kolor. Mimo to możesz skorzystać z obiektu Color (predefiniowanej klasy), który pozwala ustawić lub zmienić kolor klipu filmowego.

Na początek trzeba przygotować klon nowego obiektu koloru za pomocą funkcji konstruktora:

nameofColorObject =
new Color(movieClipInstance)

gdzie nameofColorObject stanowi nazwę twojego nowego obiektu koloru, a movieClipInstance jest ścieżką dostępu do klipu filmowego, który chcesz edytować.

Następnie możesz użyć nowego obiektu koloru do ustawienia wartości RGB koloru klipu filmowego za pomocą metody setRGB. Definiując nowy kolor,używaj szesnastkowych odpowiedników każdego ze składowych koloru (czerwonego, zielonego i niebieskiego) według szablonu: 0xRRGGBB. Być może widziałeś już podobny, sześciocyfrowy kod w dokumentach HTML, w liniach definiujących kolor tła witryny sieciowej. Takie cyfrowe oznaczenia kolorów możesz znaleźć na palecie Mixer. W menu rozwijanym opcji palety wybierz Hex jako tryb reprezentacji kolorów (rys. 7.16), a w oknie palety pojawią się szesnastkowe oznaczenia każdego ze składowych koloru. Te sześciocyfrowe kody widoczne są także obok próbek kolorów w menu rozwijanym próbek Stroke Color i Fill Color (rys. 7.17).

0x01 graphic

Rys. 7.16. Jedna z opcji menu rozwijanego palety Mixer umożliwia zobrazowanie wartości składowych koloru RGB za pomocą liczb szesnastkowych

0x01 graphic

Rys. 7.17. Kod szesnastkowy jest wyświetlany w polu widocznym obok ikony podglądu koloru

0x08 graphic
0x01 graphic

Rys. 7.18. Funkcja konstruktora new Color jest używana do tworzenia nowego obiektu koloru

0x01 graphic

Rys. 7.19. Nowy obiekt koloru nosi nazwę myColorObject i jest skojarzony z klipem filmowym shirt

0x01 graphic

Rys. 7.20. Metoda setRGB posiada parametr oxRRGGBB będący szesnastkową reprezentacją koloru

0x01 graphic

Rys. 7.21. Użyj akcji setRGB z różnymi wartościami szesnastkowymi argumentu do zmiany koloru tego klipu filmowego shirt

W celu ustawienia
koloru klipu filmowego:

  1. Utwórz symbol klipu filmowego, umieść jego klon na scenie i nadaj mu nazwę.

  1. Utwórz symbol przycisku, umieść jego klon na scenie, zaznacz go i otwórz paletę akcji.

  2. Wybierz Actions/set variable.

  3. W polu Variable wprowadź nazwę nowego obiektu koloru.

  4. Kliknij myszą w polu Value i wybierz Objects/Color/new Color. Zaznacz pole wyboru Expression widniejące obok pola Value. W polu Value pojawi się wyrażenie new Color z podświetlonym argumentem target (rys. 7.18).

  5. Zastąp podświetlony argument w postaci słowa target ścieżką dostępu do twojego klipu filmowego, ewentualnie posłuż się przyciskiem Insert a target path w prawym dolnym rogu palety. Pierwsze wyrażenie ActionScript jest kompletne. Powoduje ono utworzenie klonu nowego obiektu koloru (rys. 7.19).

  6. Wybierz Actions/evaluate. W polu Expression wprowadź nazwę nowo utworzonego obiektu koloru.

  7. Wybierz Objects/Color/setRGB. Metoda setRGB pojawi się w polu Expression w bloku edycji parametrów przed nazwą twojego obiektu koloru. Podświetlony zostanie argument 0xRRGGBB (rys. 7.20).

  8. W nawiasach stojących przy metodzie setRGB wpisz 0x, a następnie sześciocyfrowy kod szesnastkowy nowego koloru (rys. 7.21).

  9. Przetestuj film. Kiedy klikniesz przycisk, utworzony zostanie klon obiektu koloru wywołującego metodę setRGB. Klipowi filmowemu skojarzonemu z obiektem koloru zostanie przypisana nowa wartość RGB.

0x08 graphic
Używanie
obiektu transformacji koloru

Za pomocą metody setTransform można przekształcać kolor dowolnego klipu filmowego. Metoda ta pozwala zdefiniować procentowe lub liczbowe wartości składowych RGB, jak również poziomu przezroczystości. Parametry te są dostępne na palecie Instance w menu rozwijanym Advanced (rys. 7.22).

Żeby móc użyć metody setTransform wobec obiektu koloru, trzeba najpierw utworzyć inny obiekt, który w rzeczywistości będzie przechowywał informacje o przekształceniach koloru w postaci parametrów ra, rb, ga, gb, ba, bb, aa, ab (Tabela 7.2). Obiekt transformacji koloru jest tworzony na podstawie standardowej predefiniowanej klasy o nazwie Object. Kiedy już zdefiniujesz obiekt transformacji koloru, możesz używać go z metodą setTransform twojego obiektu koloru. Być może jest tu trochę zamieszania, ale podstawowa idea jest następująca: tam, gdzie zwykle widzisz liczby lub łańcuchy znakowe jako parametry metody - np. cyfra 5 w metodzie gotoAndStop(5) - będziesz od teraz używał obiektu w postaci np. set Transform(myColorTransformObject).

0x01 graphic

Rys. 7.22. Opcje efektów klonu, dostępne w menu rozwijanym Advanced, pozwalają określić wartości procentowe lub liczbowe składowych RGB lub poziomu przezroczystości

Tabela 7.2. Parametry metody setTransform

Parametr Wartość

ra

Procent (-100 do 100) składowej czerwonej

rb

Wartość (-255 do 255) składowej czerwonej

ga

Procent (-100 do 100) składowej zielonej

gb

Wartość (-255 do 255) składowej zielonej

ba

Procent (-100 do 100) składowej niebieskiej

bb

Wartość (-255 do 255) składowej niebieskiej

aa

Procent (-100 do 100) poziomu przezroczystości

ab

Wartość (-255 do 255) poziomu przezroczystości

0x08 graphic
0x01 graphic

Rys. 7.23. Tworzymy nowy obiekt koloru o nazwie myNewColor dla klipu filmowego shirt

0x01 graphic

Rys. 7.24. Utwórz nowy podstawowy obiekt o nazwie newColorTransform za pomocą funkcji konstruktora newObject. Obiekt ten będzie przechowywał informacje o składowych RGB i poziomie przezroczystości

0x01 graphic

Rys. 7.25. Wartości składowych koloru i poziomu przezroczystości są ustawiane przy pomocy serii wyrażeń set variable

W celu przekształcenia koloru
i poziomu przezroczystości
klipu filmowego:

  1. Utwórz symbol klipu filmowego, umieść jego klon na scenie i nadaj mu nazwę.

  1. Utwórz symbol przycisku, umieść jego klon na scenie, zaznacz go i otwórz paletę akcji.

  2. Wybierz Actions/set variable.

  3. Przygotuj klon nowego obiektu koloru w sposób opisany w poprzednim ćwiczeniu (rys. 7.23).

  4. Ponownie wybierz Actions/set variable.

  5. W polu Variable wpisz nazwę obiektu transformacji koloru.

  6. Kliknij w polu Value i wybierz Objects/ Object/new Object. Zaznacz pole Expression widniejące obok pola Value.

W ten sposób otrzymałeś klon nowego obiektu transformacji koloru (rys. 7.24).

  1. Wybierz Actions/set variable. W polu Variable wprowadź nazwę twojego obiektu transformacji koloru, kropkę, a dalej jeden z parametrów. W polu Value wpisz liczbę. Zaznacz pole Expression widniejące obok pola Value. Powtórz czynności dla wszystkich ośmiu parametrów (rys. 7.25). W ten sposób zdefiniowałeś parametry twojego obiektu transformacji koloru.

  2. Wybierz Actions/evaluate. W polu Expression wpisz nazwę twojego obiektu koloru.

  1. 0x08 graphic
    Wybierz Objects/Color/setTransform. Metoda setTransform pojawi się za obiektem koloru w polu Expression z podświetlonym argumentem cxform w nawiasach. Termin cxform jest skrótem od „color transform” (przekształcenie koloru) (rys. 7.26).

  1. Zastąp podświetlony argument cxform nazwą twojego obiektu transformacji koloru (rys. 7.27).

Kompletny skrypt powinien wyglądać podobnie do pokazanego na rys. 7.28.

  1. Przetestuj film. Kiedy klikniesz utworzony przycisk, wprowadzone zostaną klony obiektu koloru oraz obiektu transformacji koloru. Obiekt koloru wywołuje metodę setTransform, używającą obiektu transformacji koloru jako argumentu. Klip filmowy skojarzony z obiektem koloru zmieni kolor i poziom przezroczystości.

Wskazówka

  • Zamiast tworzyć osiem oddzielnych wyrażeń definiujących parametry obiektu transformacji koloru, wystarczy napisać jedno, zawierające je wszystkie. Użyj składni:

myColorTransform = { ra: '100', rb: '150', ga: '75', gb: '200', ba: '20', bb: '188', aa: '50', ab: '255'}

gdzie parametry oddzielone są ich wartościami i dwukropkiem, a zestawienia parametr/wartość oddzielone są przecinkami.

0x01 graphic

Rys. 7.26. Metoda setTransform wymaga argumentu cxform, gdzie cxform oznacza obiekt przechowujący informacje o przekształceniu koloru

0x01 graphic

Rys. 7.27. Metoda setTransform używa obiektu myColorTransform do zmiany obiektu koloru myNewColor

0x01 graphic

Rys. 7.28. Kompletny skrypt zmienia kolor i poziom przezroczystości klipu filmowegoshirt za kliknięciem przycisku

0x08 graphic

Zmiana kolejności
ułożenia klipów filmowych

Gdy będziesz miał do czynienia ze złożonymi przeciąganymi klipami filmowymi, zauważysz, że obiekty zachowują swoją kolejność ułożenia nawet w momencie, gdy są przeciągane, a to może wyglądać nieco dziwnie. Zwykle spodziewamy się, że przeciągany obiekt trafi na szczyt stosu. Można osiągnąć taki efekt przy pomocy akcji swapDepths, która umożliwia przemieszczanie klipów filmowych w stosie w sposób dynamiczny. Używając tej akcji, można zamienić miejscami dwa sąsiadujące w stosie klipy filmowe o podanej nazwie lub też wybrany klip z dowolnym innym, po wskazaniu poziomu, na którym jest umieszczony. Tak zwany poziom głębokości (depth level) jest liczbą określającą pozycję klipu filmowego w stosie. Klipy o wyższych wartościach poziomu głębokości będą nakładały się na te o poziomach niższych, podobnie jak ma to miejsce w przypadku poziomów doczytywanych filmów. Niezwykłą cechą akcji swapDepths jest to, że działa ona na wskroś warstw, tak więc klip filmowy w dolnej warstwie może się zamienić poziomami z klipem umieszczonym w najwyższej warstwie.

0x08 graphic
W celu zmiany ułożenia
dwóch klipów filmowych:

  1. Utwórz dwa przeciągane klipy filmowe, w sposób opisany wcześniej w tym rozdziale. Powinny to być dwa różne symbole.

  1. Umieść klony obu klipów filmowych na scenie, w tej samej warstwie. Nadaj klipom nazwy, posługując się paletą Instance.

  2. Przejdź do trybu edycji symbolu pierwszego klipu filmowego i zaznacz niewidzialny przycisk umieszczony w tym klipie.

  3. Otwórz paletę akcji i zaznacz wyrażenie startDrag. Wybierz Actions/evaluate. W polu Expression wpisz this.

  4. Wybierz Objects/Movie Clip/swapDepths. W polu Expression, za wyrażeniem this pojawi się metoda swapDepths, z podświetlonym słowem target (rys. 7.29).

  5. W polu Expression wstaw w miejsce słowa target ścieżkę dostępu do drugiego klipu filmowego (rys. 7.30).

  6. Przejdź do trybu edycji symbolu drugiego klipu filmowego i dodaj podobne wyrażenie swapDepths do jego niewidzialnego przycisku. Podaj dla wyrażenia swapDepths ścieżkę dostępu do pierwszego klipu filmowego. Skrypty napisane dla obydwu przycisków w tych dwóch różnych klipach filmowych powinny wyglądać podobnie jak skrypty na rys. 7.31.

  7. Przetestuj film. Kiedy przeciągniesz pierwszy z klipów filmowych, zamieni się on miejscem w stosie z drugim klipem filmowym - i odwrotnie.

0x01 graphic

Rys. 7.29. Przypisz akcję swapDepths do manipulatora zdarzenia on (press). Akcja ta zmienia kolejność ułożenia klipów filmowych w stosie

0x01 graphic

Rys. 7.30. Bieżący klip filmowy oraz klip o nazwie puzzle2 zamienią się kolejnością ułożenia

0x01 graphic

Rys. 7.31. Metoda swapDepths została skojarzona z akcją startDrag. Przycisk z akcjami, jak te przypisane na górze, znajduje się w klipie filmowym puzzle1. Przycisk z akcjami, jak te przypisane na dole, znajduje się w klipie filmowym puzzle2. Obydwa klipy filmowe po przeciągnięciu zmienią kolejność ułożenia w stosie

0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x01 graphic

Rys. 7.32. Bieżący klip filmowy zamieni się miejscami w stosie z tym, który jest na poziomie głębokości 2

0x01 graphic

Rys. 7.33. Wymiana poziomów głębokości jest idealna w sytuacjach, gdy masz do czynienia z wieloma przeciąganymi klipami filmowymi, tak jak te fragmenty układanki

W celu wymiany poziomu głębokości
klipu filmowego:

  1. Kontynuuj pracę z plikiem utworzonym w poprzednim ćwiczeniu.

  1. Przejdź do trybu edycji symbolu pierwszego klipu filmowego i zaznacz jego niewidzialny przycisk.

  2. W miejsce ścieżki dostępu w argumencie swapDepths wprowadź liczbę określającą poziom głębokości (rys. 7.32).

  3. Przejdź do trybu edycji symbolu drugiego klipu filmowego i w miejsce ścieżki dostępu w argumencie swapDepths wprowadź liczbę określającą ten sam poziom głębokości.

  4. Przetestuj film. Pierwszy klip filmowy, który przeciągniesz, zostanie umieszczony na podanym poziomie głębokości. Drugi przeciągany klip zostanie zastąpiony jakimkolwiek innym klipem, aktualnie znajdującym się na tym poziomie (rys. 7.33).

Wskazówka

  • Różnica pomiędzy używaniem ścieżki dostępu a stosowaniem numeru poziomu głębokości w argumencie swapDepths zależy od twoich potrzeb. Ścieżki dostępu użyj do prostej zamiany dwóch klipów o podanych nazwach, gdzie klip przykrywający inny klip filmowy zostanie ustawiony za nim. Jeśli przeciągany klip filmowy ma zawsze znajdować się ponad innymi klipami, użyj poziomów głębokości do ustalenia jego pozycji zawsze na wierzchu stosu.

0x08 graphic
Wykrywanie
upuszczonych
klipów filmowych

Skoro potrafisz stworzyć klip filmowy, który można przeciągać po scenie, chciałbyś na pewno wiedzieć, gdzie użytkownik upuszcza poszczególne klipy. Jeśli klipami filmowymi są np. fragmenty układanki, powinieneś wiedzieć, czy te fragmenty są przeciągane i upuszczane w należnych im miejscach. Jednym z najprostszych sposobów na określenie lokalizacji upuszczonego klipu filmowego jest skorzystanie z właściwości klipu o nazwie _droptarget. Właściwość ta zwraca bezwzględną ścieżkę dostępu do innego klipu filmowego, znajdującego się w miejscu upuszczenia klipu przeciąganego. Ten drugi klip filmowy jest więc właściwie miejscem przeznaczenia dla przeciąganego klipu filmowego. Użyj wyrażenia warunkowego do sprawdzenia, czy właściwość _droptarget przeciąganego klipu jest identyczna ze ścieżką dostępu do docelowego klipu filmowego. Wykonaj odpowiednie akcje w zależności od tego, czy warunek jest spełniony, czy też nie.

Powszechną praktyką w przygotowywaniu klipów filmowych z mechanizmami przeciągnij-i-upuść jest tworzenie zachowań przyciągnij-do oraz efektów odsyłania do pozycji wyjściowej.

Kiedy użytkownik upuszcza klip filmowy blisko właściwej lokalizacji, możesz to wykryć za pomocą właściwości _droptarget, a następnie ustawić lub przyciągnąć ten klip do precyzyjnie wyznaczonej pozycji za pomocą akcji setProperty, ustalającej współrzędne x i y tej pozycji. Jeśli użytkownik upuści klip filmowy w nieprawidłowym miejscu, możesz wykryć to również za pomocą właściwości _droptarget, a następnie odesłać klip do jego pierwotnej lokalizacji za pomocą akcji setProperty.

Należy zwrócić uwagę, że w przypadku używania składni z ukośnikiem właściwość _droptarget zwraca bezwzględną ścieżkę dostępu. Właściwość ta wywodzi się z czwartej wersji programu, używającej tylko składni z ukośnikiem. Żeby więc sprawdzić, czy właściwość _droptarget odpowiada ścieżce dostępu do docelowego klipu filmowego, skonstruuj wyrażenie warunkowe podobne do tego:

_root.przeciąganyKlipFilmowy. _droptarget == "/docelowyKlipFilmowy"

0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x01 graphic

Rys. 7.34. Ten warunek sprawdza, czy bieżący klip filmowy został upuszczony w miejscu zajmowanym przez klip filmowy o nazwie destination. Ukośnik (/) oznacza główną listwę czasową

0x01 graphic

Rys. 7.35. Jeśli przeciągany klip filmowy zostanie upuszczony na klip filmowy o nazwie destination, argument jego właściwości visibility zostanie ustawiony na false (fałsz)

0x01 graphic

Rys. 7.36. Ten hamburger zniknie, kiedy upuścisz go nad koszem

W celu wykrycia
upuszczonego klipu filmowego:

  1. Utwórz przeciągany klip filmowy, umieść jego klon na scenie i nadaj mu nazwę za pomocą palety Instance.

  1. Utwórz kolejny klip filmowy, umieść jego klon na scenie i nadaj mu nazwę.

Będzie to docelowy klip filmowy dla klipu przeciąganego.

  1. Przejdź do trybu edycji symbolu przeciąganego klipu filmowego i zaznacz umieszczony w nim niewidzialny przycisk.

  2. Zaznacz akcję stopDrag i wybierz Actions/if (Esc + if).

Poniżej wyrażenia stopDrag pojawi się wyrażenie if.

  1. W polu Condition wpisz this. Następnie wprowadź kropkę.

  2. Wybierz Properties/_droptarget.

  3. Wpisz dwa znaki równości.

Para znaków równości sprawdza, czy jedna wartość jest taka sama, jak druga. Pojedynczy znak równości jest używany do przypisywania jednej zmiennej do innej.

  1. Wprowadź ścieżkę dostępu do docelowego klipu filmowego, ujętą w cudzysłów, korzystając ze składni z ukośnikiem.

Skonstruowałeś właśnie końcowe wyrażenie warunkowe (rys. 7.34).

  1. Wybierz akcję, która będzie wykonywana, gdy warunek zostanie spełniony. Kompletny skrypt powinien wyglądać podobnie do tego na rys. 7.35.

  2. Przetestuj film (rys. 7.36).

Kiedy upuścisz przeciągany klip filmowy, Flash sprawdzi, czy jego właściwość _droptarget odpowiada ścieżce dostępu do drugiego klipu filmowego. Jeśli tak, właściwości _visibility przeciąganego klipu filmowego zostaje przypisany argument prawda (true) i klip znika.

0x08 graphic
W celu utworzenia
efektu odsyłania
do pozycji wyjściowej:

  1. Kontynuuj pracę z plikiem utworzonym w poprzednim ćwiczeniu.

  1. Przejdź do trybu edycji symbolu przeciąganego klipu filmowego i zaznacz umieszczony w klipie niewidzialny przycisk.

  2. Zaznacz ostatnią akcję w wyrażeniu if i wybierz Actions/else (Esc + el).

Pojawi się wyrażenie else. Daje ci ono możliwość wybrania alternatywnego działania w przypadku niespełnienia warunku wyrażenia if (rys. 7.37).

  1. Wybierz Actions/setProperty. Z menu rozwijanego Property wybierz X Position, wpisz this w polu Target i wprowadź pierwotną wartość współrzędnej x w polu Value. Zaznacz obydwa pola Expression (rys. 7.38).

To wyrażenie setProperty zmienia współrzędną x położenia przeciąganego klipu filmowego, jeśli nie został upuszczony nad docelowym klipem filmowym.

0x01 graphic

Rys. 7.37. Akcja else wprowadza alternatywę dla warunku if

0x01 graphic

Rys. 7.38. Współrzędna x ma wartość 150

0x08 graphic
0x01 graphic

Rys. 7.39. Akcje tworzące efekt odsyłania do pozycji wyjściowej są przypisane do warunku else

  1. Wybierz Actions/setProperty. Z menu rozwijanego Property wybierz Y Position, wpisz this w polu Target i wprowadź pierwotną wartość współrzędnej y w polu Value. Zaznacz obydwa pola Expression.

To wyrażenie setProperty zmienia współrzędną y położenia przeciąganego klipu filmowego, jeśli nie został upuszczony nad docelowym klipem filmowym. Kompletny skrypt powinien wyglądać jak na rys. 7.39.

  1. Przetestuj film. Jeśli przeciągany klip filmowy nie zostanie upuszczony nad docelowym klipem filmowym, Flash ustawi wartości współrzędnych x i y, które odeślą klip do jego pierwotnego miejsca.

Wskazówki

  • Użyj akcji eval do oszacowania właściwości _droptarget i przekonwertowania jej z postaci łańcucha znakowego w składni z ukośnikiem do postaci ścieżki dostępu w konstrukcjach opartych na składni z kropką. Mógłbyś, na przykład, napisać wyrażenie warunkowe podobne do tego:

Eval(_root.draggableMovieClip. _droptarget)==_root. destinationMovieClip

  • Flash ustala lokalizację upuszczonego klipu filmowego w jego punkcie początkowym. Jeśli punkt początkowy upuszczonego klipu filmowego nie znajdzie się w obrębie obszaru graficznego docelowego klipu filmowego, przeciągany klip nie zostanie rozpoznany, nawet jeśli częściowo pokrywa klip docelowy.

0x08 graphic
Detekcja kolizji
klipów filmowych

Kolejnym warunkiem, który możesz sprawdzać, jest określenie, czy klip filmowy przecina się z innym klipem filmowym. Przykładowo, w grze w stylu Pong występuje detekcja kolizji pomiędzy piłką, rakietkami i ścianą, a wszystkie te elementy są klipami filmowymi. Detekcja kolizji klipów filmowych może też być przydatna na wyszukanych witrynach handlu elektronicznego. Powiedzmy, że przygotowujesz stronę pozwalającą dokonywać zakupów w sieci, umożliwiającą klientom przenoszenie wybranych towarów do koszyka. Możesz wykryć moment, w którym przeciągany obiekt pokrywa się z koszykiem i wyzwolić jakąś interakcję, polegającą np. na podświetleniu koszyka lub wyświetleniu ceny produktu, zanim użytkownik upuści go na koszykiem.

Detekcja kolizji wykorzystuje metodę klipu filmowego hitTest. Metody tej używa się na dwa sposoby. Pierwszy z nich polega na sprawdzeniu, czy obramowania dwóch dowolnych klipów filmowych przecinają się. Obramowanie klipu filmowego to najmniejszy obszar w kształcie prostokąta, w którym może się zmieścić grafika klipu. Ta metoda jest idealnym rozwiązaniem w przypadkach, kiedy następuje kolizja dwóch grafik, np. piłki z rakietką, statku kosmicznego z asteroidą albo książki z koszykiem. Wystarczy po prostu wprowadzić ścieżkę dostępu do klipu filmowego jako argument metody hitTest - np. hitTest(_root.target).

0x08 graphic
0x08 graphic
0x08 graphic
0x01 graphic

Rys. 7.40. Jeśli parametr shapeflag ma wartość prawda (u góry), to znaczy, że dwa obiekty nie przecinają się. Jeśli parametr shapeflag ma wartość fałsz (u dołu), to znaczy, że dwa obiekty będą się przecinać

0x01 graphic

Rys. 7.41. onClipEvent (enterFrame) jest idealnym manipulatorem zdarzenia do nieustannego sprawdzania warunku

0x01 graphic

Rys. 7.42. Ten warunek sprawdza, czy bieżący klip filmowy przecina się z klipem filmowym asteroid

Drugi sposób wykorzystania metody polega na sprawdzeniu, czy określony punkt o współrzędnych x, y przecina się z grafiką. Tutaj wykorzystuje się odniesienie do punktu, metoda ta nadaje się więc tylko do sprawdzania, czy punkt początkowy grafiki lub wskaźnik myszy przecinają się z klipem filmowym. Argumentami metody hitTest są wówczas wartości x, y oraz parametr shapeflag, np. hitTest(x, y, shapeflag). Parametr shapeflag może przyjmować wartość prawda lub fałsz. Determinuje to, czy chodzi o obramowanie klipu filmowego (fałsz, false), czy też po prostu o kształt grafiki (prawda, true) (rys. 7.40).

W celu wykrycia
kolizji dwóch klipów filmowych:

  1. Utwórz klip filmowy, umieść jego klon na scenie i nadaj mu nazwę.

  1. Utwórz przeciągany klip filmowy, umieść jego klon na scenie i nadaj mu nazwę.

  2. Zaznacz przeciągany klip filmowy i otwórz paletę akcji.

  3. Wybierz Actions/onClipEvent (Esc + oc). W bloku edycji parametrów, w polu Event wybierz EnterFrame. Pojawi się wyrażenie onClipEvent (enterFrame). Zdarzenie to występuje zgodnie z prędkością odtwarzania filmu, co czyni je idealnym do nieustannego sprawdzania warunku hitTest (rys. 7.41).

  4. Wybierz Actions/if.

  5. W polu Condition wpisz this.

  6. Wybierz Objects/Movie Clip/hitTest.

  7. Wprowadź ścieżkę dostępu do pierwszego z klipów filmowych, umieszczając ją w nawiasach wyrażenia hitTest.

  8. Wpisz podwójny znak równości, a potem słowo true (rys. 7.42).

  1. 0x08 graphic
    Wybierz akcję, która ma zostać wykonana po spełnieniu warunku. Kompletny skrypt powinien wyglądać jak na rys. 7.43.

  2. Przetestuj film (rys. 7.44).

Wskazówki

  • W przypadku warunków typu: prawda lub fałsz (znanych jako boole'owskie), jak te w ćwiczeniu, można tylko zapisać warunek i opuścić ostatnią część wyrażenia, == true (prawda). Flash zwraca wartość prawdy lub fałszu po wywołaniu metody hitTest, a wyrażenie if automatycznie sprawdza, czy warunek jest spełniony. Więcej o wyrażeniach warunkowych dowiesz się z części V, „Praca z informacją”.

  • Nie jest ważne, czy porównujesz ruchomy klip filmowy z obiektem docelowym, czy też obiekt z klipem. Poniższe dwa wyrażenia wykrywają ten sam typ kolizji:

this.hitTest(_root.target)

_root.target.hitTest(this)

  • Jeśli obiektem docelowym metody hitTest jest klip filmowy zawierający ruchomą grafikę, to obramowanie tego klipu zostanie zmienione w taki sposób, by dopasować je do animacji.

W celu wykrycia kolizji pomiędzy klipem filmowym i punktem:

  1. Kontynuuj pracę z plikiem utworzonym w poprzednim ćwiczeniu.

  1. Zaznacz przeciągany klip filmowy i otwórz paletę akcji.

  2. Zaznacz wyrażenie if. W polu Condition zmień wyrażenie na następujące:

_root.asteroid.hitTest(this._x,

this._y, true)

Teraz metoda hitTest sprawdza, czy współrzędne x i y bieżącego przeciąganego klipu filmowego przecinają się z kształtem klipu filmowego o nazwie asteroid, rezydującego w głównej listwie czasowej (rys. 7.45).

  1. Przetestuj film.

0x01 graphic

Rys. 7.43. Konsekwencją przecięcia jest wykonanie akcji nextFrame

0x01 graphic

Rys. 7.44. Przeciągnięcie klipu filmowego spaceship do obramowania klipu filmowego asteroid powoduje przeskok klipu spaceship do następnego ujęcia, wyświetlającego eksplozję

0x01 graphic

Rys. 7.45. Powyższy fragment skryptu (u góry) sprawdza, czy punkt początkowy klipu filmowego spaceship przecina się z dowolnym kształtem klipu filmowego asteroid. Zwróć uwagę, że klip spaceship nie wchodzi w kolizję, ponieważ jego punkt początkowy znajduje się wciąż w szczelinie pomiędzy krawędziami asteroidy

0x08 graphic
0x01 graphic

Rys. 7.46. Obramowanie wyśrodkowanego klipu filmowego można zdefiniować za pomocą jego właściwości X Position, Y Position, Height i Width

Wyznaczanie krawędzi obszarów klipów filmowych

Znajomość granic obszaru klipu filmowego jest użyteczna zwłaszcza wtedy, gdy zachodzi potrzeba wpasowania przeciąganego klipu filmowego w obszar innego klipu. Zwykle takie dopasowywanie klipu filmowego łączy się z jego centrowaniem, dlatego też górna i dolna oraz boczne krawędzie mogą być definiowane za pomocą właściwości X Position (współrzędna x), Y Position (współrzędna y), Height (wysokość) i Width (szerokość) (rys. 7.46). Jeśli jednak klip filmowy nie został wyśrodkowany, niemożliwe jest ustalenie granic obramowania za pomocą jego właściwości. Zamiast tego używa się metody getBounds. Metoda ta określa minimalne i maksymalne rozmiary obramowania klipu filmowego i dołącza taką informację do obiektu posiadającego właściwości xMin, xMax, yMin yMax. Za pomocą wartości tych właściwości możesz wpasować przeciągany klip filmowy do innego klipu.

W celu wpasowania klipu filmowego w obramowanie innego klipu:

  1. Utwórz klip filmowy, umieść jego klon na scenie i nadaj mu nazwę.

W obramowanie tego klipu filmowego zostanie wpasowany przeciągany klip filmowy.

  1. Utwórz kolejny klip filmowy, umieść jego klon na scenie i nadaj mu nazwę.

To będzie przeciągany klip filmowy.

  1. Zaznacz klon drugiego klipu filmowego i otwórz paletę akcji.

  2. Wybierz Actions/onClipEvent. Zaznacz zdarzenie Load.

  3. Wybierz Actions/set variable. W polu Variable wpisz nazwę obiektu, w którym będą przechowywane informacje o obramowaniu.

  1. 0x08 graphic
    W polu Value wprowadź ścieżkę dostępu do klipu filmowego, którego obramowanie chcesz wykorzystać. Wybierz Objects/ MovieClip/getBounds.

W polu Value, za ścieżką dostępu do klipu filmowego, pojawi się metoda getBounds z podświetlonym argumentem targetCoordinateSpace (rys. 7.47).

  1. W miejsce argumentu targetCoordinateSpace wprowadź ściekę dostępu do listwy czasowej, której współrzędne przestrzeni mają służyć jako odnośnik dla informacji o obramowaniu (rys. 7.48).

  2. Wybierz Actions/startdrag.

  3. W polu Target w bloku edycji parametrów wpisz this. Zaznacz pole Expression.

  4. Zaznacz pola wyboru Constrain to rectangle oraz Lock mouse to center.

  5. W polach L, T, R i B w bloku edycji parametrów wpisz właściwości xMin, yMin, xMax i yMax twojego obiektu obramowania (rys. 7.49).

  6. Przetestuj film.

Przeciągany klip filmowy jest wpasowywany względem współrzędnych, które metoda getBounds zwraca i umieszcza w obiekcie obramowania.

0x01 graphic

Rys. 7.47. Metoda getBounds wymaga podania argumentu targetCoordinateSpace

0x01 graphic

Rys. 7.48. Metoda getBound zwraca wartości minimum x (xMin), minimum y (yMin), maksimum x (xMax) i maksimum y (yMax) klipu filmowego o nazwie square względem współrzędnych listwy czasowej _root, a następnie przechowuje tę informację w obiekcie obramowania o nazwie myBounds

0x01 graphic

Rys. 7.49. Blok edycji parametrów akcji startDrag. Właściwości obiektu myBounds są umieszczane w polach Constrain to rectangle

0x08 graphic

Powielanie i usuwanie
klipów filmowych

Tworzenie „w locie” wielu klonów istniejących klipów filmowych umożliwia akcja duplicateMovieClip. Powielane klony klipu filmowego otrzymują swoje własne, unikalne nazwy, podobnie jak poziom głębokości, determinujący kolejność ich ułożenia w stosie (w przypadku klipów filmowych ustalany za pomocą właściwości swapDepths). Po zduplikowaniu klipu filmowego możesz zmieniać dowolne z jego właściwości, nawigować po jego listwie czasowej i ogólnie używać tak, jak każdego innego klipu filmowego. Powielanie klipów filmowych jest przydatne zwłaszcza w dynamicznym tworzeniu grafiki. Przykładowo, powielając krótkie fragmenty linii lub standardowe kształty, a później edytując ich właściwości (jak pozycja, skala, rotacja), możesz tworzyć animacje lub nawet symulować głębię obiektów 3D i to na bieżąco (choć wymaga to dużo matematyki). Gdybyś chciał, żeby towar w twoim internetowym sklepie nigdy nie znikał z półek, możesz powielać dany artykuł za każdym razem, kiedy klient przeciągnie go do koszyka. W grze Asteroids natomiast, rozkruszenie jednej dużej asteroidy na kilka mniejszych można zrealizować właśnie poprzez powielanie klipu filmowego asteroidy.

Powszechną praktyką jest powielanie klipów filmowych z użyciem zapętlonych funkcji, które dodają kolejne numery do nazw klonów i automatycznie przypisują poziomy głębokości. Na przykład, klip filmowy asteroid może być powielany w ten sposób, że kolejne klony otrzymywałyby następujące oznaczenia: asteroid1 na poziomie głębokości 1 (Depth Level 1), asteroid2 na poziomie głębokości 2, asteroid3 na poziomie głębokości 3, itd. Zajrzyj do rozdziału 9., „kontrolowanie przepływu informacji”, z którego dowiesz się o działających w pętli akcjach, uzupełniających proces powielania klipów filmowych.

0x08 graphic
W celu powielenia klonu
klipu filmowego:

  1. Utwórz symbol klipu filmowego, umieść go na scenie i nadaj mu nazwę.

  1. Utwórz symbol przycisku i umieść jego klon na scenie.

  2. Zaznacz przycisk i otwórz paletę akcji.

  3. Wybierz Actions/duplicateMovieClip (Esc + dm).

W oknie skryptu, poniżej zdarzenia on (release) pojawi się akcja duplicateMovieClip (rys. 7.50).

  1. W polu Target wprowadź ścieżkę dostępu do klipu filmowego. Zaznacz pole Expression.

  2. W polu New Name wpisz nazwę dla powielonego klipu filmowego. Pole Expression pozostaw niezaznaczone.

  3. W polu Depth wpisz liczbę większą od 0, określającą poziom głębokości (czyli pozycję w stosie) zduplikowanego klipu filmowego (rys. 7.51).

W tym momencie, jeśli odtworzysz swój film, akcje przypisane do przycisku spowodują powielenie klipu filmowego nerd, jednak nowy klon pojawi się w miejscu oryginału, tak więc właściwie trudno dostrzec, czy cokolwiek się stało. Żeby zobaczyć powielony klon, musisz go przesunąć lub zmienić w jakiś inny sposób, odróżniający go od oryginału.

  1. Wybierz Actions/setProperty.

  2. Z menu rozwijanego Property wybierz X Position.

0x01 graphic

Rys. 7.50. Przypisz akcję duplicateMovieClip do zdarzenia myszy on (release) utworzonego przycisku

0x01 graphic

Rys. 7.51. Klip filmowy o nazwie nerdCopy umieszczony na poziomie głębokości 2 jest kopią klipu filmowego nerd

0x08 graphic
0x01 graphic

Rys. 7.52. Klip filmowy nerdCopy został przesunięty o 40 pikseli w prawo od klipu filmowego nerd

0x01 graphic

Rys. 7.53. Pokazany skrypt (u góry) został przypisany do klonu przycisku na dole sceny. Po zduplikowaniu oryginalnego klipu filmowego (z lewej), kopia może być edytowana tak, jak każdy inny klip (z prawej). W tym przykładzie powielony klip filmowy o nazwie nerdCopy ma zmodyfikowane właściwości X Position, X Scale i Y Scale

  1. W polu Target wprowadź ścieżkę dostępu do powielonego klipu filmowego. Zaznacz pole Expression.

  2. W polu Value wpisz wyrażenie, które dodaje 40 do właściwości X Position oryginalnego klipu filmowego (rys. 7.52). Zaznacz pole Expression.

  3. Dodaj więcej wyrażeń setProperty w celu przekształcenia zduplikowanego klipu filmowego (rys. 7.53).

  4. Przetestuj film.

Wskazówki

  • Na jednym poziomie głębokości może znajdować się tylko jeden klip filmowy. Jeśli powielisz kolejny klon z już zajmowanego poziomu, kopia zajmie miejsce oryginału.

  • Zduplikowane klipy filmowe przejmują właściwości oryginalnego klonu. Jeśli więc oryginał ma np. przezroczystość ustawioną na 50 procent, kopia zachowa to ustawienie. Jednakże powielone klony zawsze zajmują pozycję wyjściową w ujęciu pierwszym, nawet jeśli oryginalny klip filmowy w momencie powielania zajmował inne ujęcie.

  • Poziom głębokości odpowiada poziomowi w metodzie klipu filmowego swapDepths, dlatego używaj tej metody do zmiany kolejności ułożenia w stosie powielonych klipów filmowych.

0x08 graphic
W celu usunięcia duplikatu
klipu filmowego:

  1. Kontynuuj pracę nad plikiem utworzonym w poprzednim ćwiczeniu. Umieść na scenie nowy klon przycisku.

  1. Zaznacz nowy klon przycisku i otwórz paletę akcji.

  2. Wybierz Actions/removeMovieClip (Esc + rm).

Poniżej zdarzenia on (release) pojawi się akcja removeMovieClip.

  1. W bloku edycji parametrów palety akcji, w polu Target wprowadź ścieżkę dostępu do zduplikowanego klipu filmowego. Pozostaw pole Expression niezaznaczone (rys. 7.54).

  2. Przetestuj film.

Pierwszy z przycisków powoduje utworzenie duplikatu klipu filmowego. Drugi przycisk usuwa duplikat ze sceny (rys. 7.55).

Wskazówka

  • Nie można użyć akcji removeMovieClip do usunięcia ze sceny klonu oryginalnego klipu filmowego. W takim przypadku trzeba wstawić nowe ujęcie kluczowe i wtedy usunąć klon klipu filmowego.

0x01 graphic

Rys. 7.54. Akcja removeMovieClip usuwa duplikat klonu o nazwie nerdCopy

0x01 graphic

Rys. 7.55. Oryginalny klip filmowy (z lewej) jest powielany za pomocą akcji duplicateMovieClip, przypisanej do pierwszego z przycisków (w środku). Zduplikowany klon nosi nazwę nerdCopy. Akcja removeMovieClip, przypisana do drugiego przycisku, usuwa duplikat klonu (z prawej)

0x08 graphic
0x01 graphic

Rys. 7.56. Opcja Linkage w menu rozwijanym biblioteki

0x01 graphic

Rys. 7.57. Okno dialogowe Symbol Linkage Properties

Przyłączanie
klipów filmowych

Technika powielania istniejących klipów filmowych jest wspaniała. Co jednak zrobić w sytuacji, gdy musisz w dynamiczny sposób przenieść klip filmowy z biblioteki na scenę? W takim przypadku można posłużyć się metodą attachMovie. Pozwala ona na utworzenie nowych klipów filmowych z biblioteki i przyłączenie ich do obecnych już na scenie klonów klipów filmowych. Przyłączony klip filmowy nie zajmuje miejsca oryginału, ale w zasadzie staje się częścią obiektu klipu filmowego w relacji rodzic-dziecko. Jeśli oryginalny klon na scenie nosi nazwę parentInstance, to ścieżka dostępu do przyłączonego klipu filmowego mogłaby wyglądać następująco:

_root.parentInstance. attachedInstance.

W celu przyłączenia
klipu filmowego z biblioteki:

  1. Utwórz symbol klipu filmowego, umieść go na scenie i nadaj mu nazwę przy pomocy palety Instance.

Ten klon będzie oryginalnym klipem filmowym, klonem-rodzicem, do którego przyłączysz inny klip filmowy.

  1. Utwórz kolejny symbol klipu filmowego.

  2. Z menu rozwijanego Options palety Library wybierz Linkage (rys. 7.56). Pojawi się okno dialogowe Symbol Linkage Properties.

  3. W pozycji Linkage wybierz opcję Export this symbol, a w polu Identifier wpisz identyfikator twojego klipu filmowego. Kliknij OK (rys. 7.57).

Wprowadzony identyfikator umożliwia odwoływanie się za jego pomocą do klipu filmowego w czasie pisania skryptu i przyłączanie tego klipu do klonu znajdującego się na scenie.

  1. 0x08 graphic
    Utwórz przycisk i przeciągnij jego klon na scenę.

  2. Zaznacz przycisk i otwórz paletę akcji.

  3. Wybierz Actions/evaluate. W polu Expression wprowadź ścieżkę dostępu do klipu filmowego na scenie.

  4. Wybierz Objects/MovieClip/attachMovie. Metoda attachMovie pojawi się w polu Expression, zaraz za ścieżką dostępu do klonu klipu filmowego (rys. 7.58).

  5. W nawiasach stojących przy metodzie attachMovie wpisz identyfikator klipu filmowego z biblioteki, nazwę przyłączanego klonu i poziom głębokości (rys. 7.59).

  6. Przetestuj film.

Kiedy klikniesz utworzony przycisk, klip filmowy zidentyfikowany w bibliotece zostanie przyłączony do klonu na scenie i nałożony na niego. Punkt początkowy tego klipu filmowego pokryje się z punktem początkowym klonu-rodzica (rys. 7.60).

Kiedy używasz metody attachMovie, masz do czynienia z kilkoma nazwami, których nie wolno mylić. W powyższym przykładzie nazwa symbolu klipu filmowego w bibliotece to apple movie clip. Identyfikatorem jest apple, a nazwa przyłączonego klonu to attachedApple.

0x01 graphic

Rys. 7.58. Metoda attachMovie wymaga podania argumentów idName, newName i depth.

0x01 graphic

Rys. 7.59. Ta metoda attachMovie przyłącza klon klipu filmowego o nazwie apple do klonu plate na poziomie głębokości 2 i nadaje przyłączonemu klonowi nazwę attachedApple

0x01 graphic

Rys. 7.60. Klon klipu filmowego o nazwie plate znajduje się na scenie (u góry). Akcje przypisane do przycisku powodują przyłączenie klonu klipu filmowego apple z biblioteki (z prawej) do klonu plate (u dołu)

0x08 graphic

Wskazówki

  • Przyłączony klip filmowy przejmuje właściwości klonu klipu filmowego-rodzica. Jeśli więc klon oryginalnego klipu filmowego jest obrócony o 45 stopni, to przyłączony klip filmowy też zostanie obrócony o 45 stopni.

  • Przyłączaj klip filmowy do klonu na scenie z pustym pierwszym ujęciem. Dzięki temu klon-rodzic zachowa się jak pusty pojemnik, gotowy pomieścić dowolny klip filmowy z biblioteki.

  • Możesz przyłączać kilka klipów filmowych do jednego klonu rodzica, o ile podasz oddzielne poziomy głębokości. Jednak każdy poziom głębokości może przechowywać już tylko jeden klip filmowy.

  • Możliwe jest też przyłączanie klipów filmowych do innego przyłączonego klipu filmowego. Ścieżka dostępu do pierwszego przyłączonego klipu filmowego przyjmie wtedy postać: _root.klonRodzic. przyłączonyKlon1. Tymczasem ścieżka dostępu do kolejnego przyłączonego klipu filmowego będzie wyglądać tak: przyłączonyKlon1. przyłączonyKlon2 itd.

  • Po przyłączeniu klipu filmowego z biblioteki do klonu, znajdującego się na scenie, możesz modyfikować właściwości klonu-rodzica, np. _root.klonRodzic. _alpha = 50, a jednocześnie zmienione zostaną właściwości wszystkich dołączonych do niego klipów filmowych.

0x08 graphic
W celu usunięcia
przyłączonego klipu filmowego:

  1. Użyj akcji removeMovieClip. Wybierz Actions/removeMovieClip (Esc + rm). W polu Target palety akcji wprowadź ścieżkę dostępu do przyłączonego klipu filmowego (rys. 7.61).

lub

Użyj akcji unloadMovie. Wybierz Actions/unloadMovie (Esc + um). Z menu rozwijanego Location palety akcji wybierz Target i wprowadź ścieżkę dostępu do przyłączonego klipu filmowego (rys. 7.62).

0x01 graphic

Rys. 7.61. Ścieżka dostępu do klipu filmowego attachedApple musi zawierać nazwę klipu, do którego klip o tej nazwie został przyłączony

0x01 graphic

Rys. 7.62. Akcja unloadMovie, przeznaczona do usuwania zewnętrznych plików SWF, może posłużyć do usunięcia przyłączonych klipów filmowych

0x08 graphic
0x01 graphic

Rys. 7.63. Metoda hide obiektu Mouse nie wymaga utworzenia klonu

Zmiana
wyglądu wskaźnika myszy

Skoro wiesz już, jak kontrolować klip filmowy, możesz przejść do projektowania własnych wskaźników myszy. Pomyśl teraz o wszystkich typach kursora, jakie możesz zobaczyć we Flashu. Kiedy wybierasz narzędzia z palety narzędziowej - wiadro z farbą, pipetę czy ołówek - wskaźnik myszy zmienia się tak, by pomóc ci zrozumieć i zastosować te narzędzia. Podobnie i ty możesz wprowadzać w swoich projektach różne formy wskaźnika, pasujące do aktualnie wybranej funkcji.

Proces przygotowania własnego wskaźnika zaczyna się od ukrycia domyślnego kursora myszy. Potem trzeba dopasować lokalizację nowej grafiki do pozycji zajmowanej przez ukryty (ale wciąż aktywny) wskaźnik myszy. W tym celu ustawia się właściwości klipu filmowego X Position oraz Y Position w ten sposób, aby odpowiadały współrzędnym położenia kursora myszy x i y. Te współrzędne definiuje się przy pomocy właściwości _xmouse oraz _ymouse.

W celu ukrycia wskaźnika myszy:

  1. Zaznacz pierwsze ujęcie kluczowe i otwórz paletę akcji. Wybierz Objects/Mouse/hide (rys. 7.63).

Kiedy uruchomisz testowanie filmu, wskaźnik myszy stanie się niewidoczny.

Wskazówka

  • Ukrywanie wskaźnika myszy jest użyteczną cechą w przypadku filmów będących czystymi animacjami, pozbawionymi interaktywności. Pozwala to zapobiec rozpraszaniu uwagi przez niechciany widok wskaźnika, który mógłby przecież pojawiać się dopiero w momencie, kiedy użytkownik spróbuje kliknąć jakiś przycisk dostępny w oknie filmu.

0x08 graphic
0x08 graphic
W celu przywrócenia widoku wskaźnika myszy:

  1. Na palecie akcji wybierz Objects/Mouse/ show (rys. 7.64).

W celu utworzenia
własnego wskaźnika myszy:

  1. Utwórz symbol klipu filmowego, umieść go na scenie i nadaj mu nazwę przy pomocy palety Instance. Ten klip filmowy będzie twoim nowym wskaźnikiem.

  1. Zaznacz klon klipu filmowego i otwórz paletę akcji.

  2. Wybierz Action/onClipEvent (Esc + oc). Zaznacz zdarzenie Load.

  3. Wybierz Objects/Mouse/hide. Poniżej wyrażenia onClipEvent (load) pojawi się metoda Mouse.hide(). Kiedy klip filmowy zostanie wczytany, wskaźnik myszy zniknie (rys. 7.65).

  4. Zaznacz klamrę zamykającą manipulatora onClipEvent (load). Wybierz Actions/onClipEvent. Zaznacz zdarzenie Mouse move. Poniżej manipulatora onClipEvent (load) pojawi się manipulator zdarzenia onClipEvent (mouseMove).

  5. Wybierz Actions/setProperty.

  6. Z menu rozwijanego Property wybierz X Position. W polu Target wpisz this. W polu Value wpisz _root, następnie kropkę i wybierz Properties/_xmouse. Zaznacz obydwa pola Expression.

  7. Ponownie wybierz Actions/setProperty.

  8. Z menu rozwijanego Property wybierz Y Position. W polu Target wpisz this. W polu Value wpisz _root, następnie kropkę i wybierz Properties/_ymouse. Zaznacz obydwa pola Expression (rys. 7.66).

  9. Przetestuj film (rys. 7.67).

0x01 graphic

Rys. 7.64. Metoda show obiektu Mouse przywraca widok wskaźnika myszy

0x01 graphic

Rys. 7.65. Wskaźnik myszy zniknie po wczytaniu klipu filmowego

0x01 graphic

Rys. 7.66. Wyrażenia setProperty ustawiają wartości współrzędnych położenia bieżącego klipu filmowego - zgodnie ze współrzędnymi położenia wskaźnika myszy - za każdym razem, gdy wskaźnik zostanie przesunięty w nowe miejsce

0x01 graphic

0x08 graphic
0x01 graphic

Rys. 7.68. Wprowadź akcję updateAfterEvent, żeby zmusić Flasha do odświeżenia obrazu i uzyskania bardziej płynnego ruchu

Użyj funkcji updateAfterEvent, żeby zmusić Flasha do odświeżenia ekranu niezależnie od prędkości odtwarzania filmu. Pozwala to wyeliminować efekt migotania towarzyszący przesuwaniu grafiki po ekranie z szybkością większą niż szybkość odświeżania ekranu przez Flasha. Jest to szczególnie ważne, jeśli używasz własnego kształtu wskaźnika. Akcja updateAfterEvent może być wykorzystywana z następującymi zdarzeniami klipu filmowego: mouseMove, mouseUp, keyDown oraz keyUp. Używaj tych zdarzeń jako argumentów dla metody updateAfterEvent.

W celu
odświeżenia grafiki na ekranie:

  1. Kontynuuj pracę nad plikiem utworzonym w poprzednim ćwiczeniu. Zaznacz klip filmowy przedstawiający szkło powiększające i otwórz paletę akcji.

  1. Zaznacz ostatnie wyrażenie setProperty poniżej linii z manipulatorem onClipEvent (mouseMove).

  2. Wybierz Actions/evaluate. W oknie skryptu pojawi się nowa linia wyrażenia, a w bloku edycji parametrów - pole Expression.

  3. Wybierz Functions/updateAfterEvent. W polu Expression pojawi się funkcja updateAfterEvent.

  4. W nawiasach przy funkcji updateAfterEvent wprowadź zdarzenie mouseMove (rys. 7.68).

Teraz Flash będzie odświeżał grafikę po każdym poruszeniu wskaźnika, dając w efekcie bardziej płynne ruchy.

Wskazówka

  • Spróbuj używać kilku klipów filmowych do zobrazowania kształtu wskaźnika. Przykładowo, pionowa linia ustawiana według współrzędnej _xmouse oraz linia pozioma, przyjmująca współrzędne _ymouse, tworzą razem kursor w kształcie krzyżyka.

0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
0x08 graphic
Tworzenie animacji
za pomocą języka ActionScript

Akcje, które omówiliśmy dotychczas w tym rozdziale, skrypty pozwalające kontrolować i sprawdzać właściwie wszystkie aspekty klipu filmowego - wygląd, lokalizację, możliwość przeciągania, kolizje, poziom głębokości, duplikaty - stanowią podstawowe narzędzia do tworzenia animacji w całości za pomocą ActionScript. Podczas gdy automatyczne animacje ruchu i kształtu tworzy się przed ich odtworzeniem, animacja skryptowa jest generowana w czasie odtwarzania, dzięki czemu może reagować na działania użytkownika.

Poniższe ćwiczenie obejmuje wykonanie we Flashu prostej gry na zasadach dziecięcego berka. Jest to świetny przykład, który pokazuje sposób animowania obiektów w ActionScript w zależności od działań podejmowanych przez użytkownika. Utworzysz klip filmowy podążający za wskaźnikiem myszy. Jeśli klip „złapie” poruszany przez ciebie wskaźnik, przegrasz.

W celu przygotowania gry
„łapanie kursora”:

  1. Utwórz symbol klipu filmowego z dwoma ujęciami kluczowymi. Pierwsze ujęcie kluczowe powinno zawierać grafikę i akcję stop, drugie będzie wyświetlać komunikat „You lose” („przegrałeś”) (rys. 7.69).

  1. Umieść klon klipu filmowego na scenie. Nadaj mu nazwę za pomocą palety Instance. W tym przykładzie nazwą jest cat (kot).

  2. Zaznacz klon i otwórz paletę akcji.

  3. Wybierz Actions/onClipEvent. Jako zdarzenie (Event) zaznacz Enter frame.

  4. Wybierz Actions/set variable.

  5. W polu Variable palety akcji wprowadź bezwzględną ścieżkę dostępu do klipu filmowego, kropkę, a następnie właściwość X Position. Wyrażenie powinno wyglądać tak: _root.cat._x

0x01 graphic

Rys. 7.69. Ten klip filmowy o nazwie cat wyświetla obrazek kota w ujęciu kluczowym 1. w czasie „gonitwy” za kursorem oraz drugą, inną grafikę w ujęciu kluczowym 2., jeśli przegrasz grę

0x08 graphic
0x01 graphic

Rys. 7.70. Współrzędne x i y położenia klipu filmowego cat zmieniają się w zależności od położenia wskaźnika

0x01 graphic

Rys. 7.71. Warunek sprawdza, czy wskaźnik przecina się z klonem klipu filmowego cat

0x01 graphic

Rys. 7.72. Klip filmowy cat przechodzi do następnego ujęcia na jego listwie czasowej

  1. W polu Value wpisz:

_root.cat._x + (_root._xmouse - _root.cat._x)/10

Zaznacz pole Expression obok pola Value.

To wyrażenie zaczyna się od wprowadzenia współrzędnej x położenia klipu filmowego cat i dodania różnicy pomiędzy położeniem wskaźnika myszy i położeniem klipu cat. Jeśli wskaźnik jest na prawo od klipu filmowego, dodawana jest wartość dodatnia. Jeśli wskaźnik znajduje się na lewo od klipu filmowego, dodawana jest wartość ujemna. W każdym przypadku „kot” zbliża się do „myszy”, czyli wskaźnika. Dzielenie przez 10 zapobiega natychmiastowemu umieszczeniu klipu filmowego w miejscu położenia wskaźnika myszy. Przyrost wartości jest mały (jedna dziesiąta odległości), więc „kot” niespecjalnie nadąża za „myszą”.

  1. Wybierz Actions/set variable. Wpisz jednakowe wartości współrzędnych x i y w polach Variable oraz Value (rys. 7.70).

  2. Wybierz Actions/if.

  3. W polu Condition wpisz:

_root.cat.hitTest(_root._xmouse, _root._ymouse, true)

To wyrażenie używa metody hitTest do sprawdzenia, czy współrzędne x i y położenia wskaźnika myszy przecinają się z klipem filmowym cat. Argument shapeflag ma wartość true (prawda), przez co brany jest pod uwagę wyłącznie kształt samej grafiki, a nie całego obramowania (rys. 7.71).

  1. Wybierz Actions/evaluate. Wprowadź ścieżkę dostępu do klipu filmowego cat, kropkę i na końcu metodę nextFrame(). Jeśli warunek metody hitTest zostanie spełniony (true, prawda), klip filmowy cat przejdzie do kolejnego ujęcia, wyświetlając komunikat „You lose” („przegrałeś”) (rys. 7.72).

  1. 0x08 graphic
    Wybierz Actions/setProperty.

  2. Z menu rozwijanego Property wybierz Name. W polu Target wprowadź bezwzględną ścieżkę dostępu do klipu filmowego cat. Zaznacz pole Expression. W polu Value wpisz nową nazwę (rys. 7.73). Nazwa klonu klipu filmowego cat zostanie zmieniona, zapobiegając zaprzestaniu przemieszczania klipu filmowego przez pierwszą grupę wyrażeń akcji.

  3. Przetestuj film (rys. 7.74).

0x01 graphic

Rys. 7.73. Powyższe parametry akcji setProperty zmieniają nazwę klipu filmowego cat na youLoseMessage

0x01 graphic

Rys. 7.74. Skrypt napisany dla klonu klipu filmowego cat (u góry) odpowiada za interaktywność w grze. Klip filmowy cat „goni” wskaźnik myszy (z lewej) i wyświetla komunikat ukryty w drugim ujęciu listwy czasowej klipu w momencie przecięcia ze wskaźnikiem (z prawej)

Rozdział 7.

234

233

Kontrolowanie klipów filmowych

7

Kontrolowanie
klipów filmowych

Docelowy klip filmowy

Kod szesnastkowy

Stara pozycja

Wartości ujemne x

Wartości ujemne y

Wartości dodatnie y

Wartości dodatnie x

Wartości dodatnie x

Wartości dodatnie y

Nowa pozycja

Ikona podglądu koloru

Wartość szesnastkowa składowej czerwonej (B)

Wartość szesnastkowa składowej czerwonej (G)

Wartość szesnastkowa składowej czerwonej (R)

Kolor bieżący

Docelowy klip filmowy

Przeciągany klip filmowy

Klip filmowy na poziomie głębokości 0

Klip filmowy na poziomie głębokości 0

Aktualnie przeciągany klip filmowy jest na poziomie głębokości 2

Aktualnie przeciągany klip filmowy jest na poziomie głębokości 2

Obramowanie klipu filmowego

Rys. 7.67. To szkło powiększające jest klipem filmowym ustawionym według współrzędnych x i y wskaźnika myszy. Postaraj się tworzyć pomocne kształty kursora, odpowiadające wybranym funkcjom

Ujęcie kluczowe 1.

Ujęcie kluczowe 2.

Akcja stop

Kontrolowanie klipów filmowych

Przeciąganie klipu filmowego

Przeciąganie klipu filmowego

Ustawianie właściwości klipu

Ustawianie właściwości klipu

Ustawianie właściwości klipu

Zmiana koloru klipu filmowego

Zmiana koloru klipu filmowego

Zmiana kolejności ułożenia klipów

Zmiana kolejności ułożenia klipów

Wykrywanie upuszczonych klipów

Wykrywanie upuszczonych klipów

Detekcja kolizji klipów filmowych

Wyznaczanie krawędzi obszrów

Powielanie i usuwanie klipów

Powielanie i usuwanie klipów

Przyłączanie klipów filmowych

Przyłączanie klipów filmowych

Zmiana wyglądu wskaźnika myszy

Zmiana wyglądu wskaźnika myszy

Tworzenie animacji

Przeciąganie klipu filmowego

Przeciąganie klipu filmowego

Przeciąganie klipu filmowego

Ustawianie właściwości klipu

Ustawianie właściwości klipu

Zmiana koloru klipu filmowego

Zmiana koloru klipu filmowego

Zmiana koloru klipu filmowego

Zmiana kolejności ułożenia klipów

Wykrywanie upuszczonych klipów

Wykrywanie upuszczonych klipów

Detekcja kolizji klipów filmowych

Detekcja kolizji klipów filmowych

Wyznaczanie krawędzi obszrów

Powielanie i usuwanie klipów

Powielanie i usuwanie klipów

Przyłączanie klipów filmowych

Przyłączanie klipów filmowych

Zmiana wyglądu wskaźnika myszy

Tworzenie animacji

Tworzenie animacji



Wyszukiwarka

Podobne podstrony:
r12-04(1), Informacje dot. kompa
r03-04(1), Informacje dot. kompa
r10-04(1), Informacje dot. kompa
r07-02(1), Informacje dot. kompa
R07-05(3), Informacje dot. kompa
R04-05(2), Informacje dot. kompa
06(1), Informacje dot. kompa
r18-05(1), Informacje dot. kompa
r08-02(1), Informacje dot. kompa
01(1), Informacje dot. kompa
r04-03(1), Informacje dot. kompa

więcej podobnych podstron