Część 4.
Przekształcanie grafiki i dźwięku
Części składowe języka HTML
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. |
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
|
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
Rys. 7.2. Wybierz zdarzenie (Event) Press dla manipulatora on przypisanego do niewidzialnego przycisku w twoim klipie filmowym
|
Rys. 7.3. Wpisanie słowa kluczowego this w polu Target sprawia, że akcja startDrag będzie oddziaływać na bieżący klip filmowy
|
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.
Ponieważ przycisk wewnątrz klipu filmowego używa wyrażenia względnego this, niepotrzebne jest nazywanie klonu klipu filmowego.
|
Pojawi się wyrażenie on (release).
Wskazówki
|
Rys. 7.4. Przypisz akcję stopDrag do manipulatora zdarzenia on (release)
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
|
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
Wskazówka
|
W celu ograniczenia obszaru przeciągania klipu filmowego:
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. |
Rys. 7.7. Opcja Constrain to rectangle umożliwia ustawienie lewej (L), prawej (R), górnej (T) i dolnej (B) krawędzi
Wskazówka
|
|
Ustawianie właściwości 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. |
|
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. |
|
|
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
|
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
Rys. 7.10. Dla współrzędnej x klipu filmowego eyepair na głównej listwie czasowej ustalono wartość 123
Rys. 7.11. Dla współrzędnej y klipu filmowego eyepair na głównej listwie czasowej ustalono wartość 85
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 celu zmiany położenia
|
W celu ustawienia
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).
|
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
Rys. 7.14. Akcja evaluate pozwala przypisać nową wartość właściwości klipu filmowego za pomocą jednej tylko linii skryptu
|
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
|
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 = 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).
|
Rys. 7.16. Jedna z opcji menu rozwijanego palety Mixer umożliwia zobrazowanie wartości składowych koloru RGB za pomocą liczb szesnastkowych
Rys. 7.17. Kod szesnastkowy jest wyświetlany w polu widocznym obok ikony podglądu koloru
|
Rys. 7.18. Funkcja konstruktora new Color jest używana do tworzenia nowego obiektu koloru
Rys. 7.19. Nowy obiekt koloru nosi nazwę myColorObject i jest skojarzony z klipem filmowym shirt
Rys. 7.20. Metoda setRGB posiada parametr oxRRGGBB będący szesnastkową reprezentacją koloru
Rys. 7.21. Użyj akcji setRGB z różnymi wartościami szesnastkowymi argumentu do zmiany koloru tego klipu filmowego shirt
|
W celu ustawienia
|
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). |
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 |
|
|
|
|
|
Rys. 7.23. Tworzymy nowy obiekt koloru o nazwie myNewColor dla klipu filmowego shirt
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
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
W ten sposób otrzymałeś klon nowego obiektu transformacji koloru (rys. 7.24).
|
Kompletny skrypt powinien wyglądać podobnie do pokazanego na rys. 7.28.
Wskazówka
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.
|
Rys. 7.26. Metoda setTransform wymaga argumentu cxform, gdzie cxform oznacza obiekt przechowujący informacje o przekształceniu koloru
Rys. 7.27. Metoda setTransform używa obiektu myColorTransform do zmiany obiektu koloru myNewColor
Rys. 7.28. Kompletny skrypt zmienia kolor i poziom przezroczystości klipu filmowegoshirt za kliknięciem przycisku
|
|
Zmiana kolejności 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.
|
|
Rys. 7.29. Przypisz akcję swapDepths do manipulatora zdarzenia on (press). Akcja ta zmienia kolejność ułożenia klipów filmowych w stosie
Rys. 7.30. Bieżący klip filmowy oraz klip o nazwie puzzle2 zamienią się kolejnością ułożenia
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 |
Rys. 7.32. Bieżący klip filmowy zamieni się miejscami w stosie z tym, który jest na poziomie głębokości 2
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
Wskazówka
|
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"
|
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ą
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)
Rys. 7.36. Ten hamburger zniknie, kiedy upuścisz go nad koszem
|
W celu wykrycia
Będzie to docelowy klip filmowy dla klipu przeciąganego.
Poniżej wyrażenia stopDrag pojawi się wyrażenie if.
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.
Skonstruowałeś właśnie końcowe wyrażenie warunkowe (rys. 7.34).
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. |
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).
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.
|
Rys. 7.37. Akcja else wprowadza alternatywę dla warunku if
Rys. 7.38. Współrzędna x ma wartość 150
|
Rys. 7.39. Akcje tworzące efekt odsyłania do pozycji wyjściowej są przypisane do warunku else
|
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.
Wskazówki
Eval(_root.draggableMovieClip. _droptarget)==_root. destinationMovieClip
|
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).
|
|
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ć
Rys. 7.41. onClipEvent (enterFrame) jest idealnym manipulatorem zdarzenia do nieustannego sprawdzania warunku
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
|
Wskazówki
this.hitTest(_root.target) _root.target.hitTest(this)
W celu wykrycia kolizji pomiędzy klipem filmowym i punktem:
_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).
|
Rys. 7.43. Konsekwencją przecięcia jest wykonanie akcji nextFrame
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ę
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
|
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 i 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:
W obramowanie tego klipu filmowego zostanie wpasowany przeciągany klip filmowy.
To będzie przeciągany klip filmowy.
|
W polu Value, za ścieżką dostępu do klipu filmowego, pojawi się metoda getBounds z podświetlonym argumentem targetCoordinateSpace (rys. 7.47).
Przeciągany klip filmowy jest wpasowywany względem współrzędnych, które metoda getBounds zwraca i umieszcza w obiekcie obramowania.
|
Rys. 7.47. Metoda getBounds wymaga podania argumentu targetCoordinateSpace
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
Rys. 7.49. Blok edycji parametrów akcji startDrag. Właściwości obiektu myBounds są umieszczane w polach Constrain to rectangle
|
|
Powielanie i usuwanie 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. |
W oknie skryptu, poniżej zdarzenia on (release) pojawi się akcja duplicateMovieClip (rys. 7.50).
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.
|
Rys. 7.50. Przypisz akcję duplicateMovieClip do zdarzenia myszy on (release) utworzonego przycisku
Rys. 7.51. Klip filmowy o nazwie nerdCopy umieszczony na poziomie głębokości 2 jest kopią klipu filmowego nerd
|
Rys. 7.52. Klip filmowy nerdCopy został przesunięty o 40 pikseli w prawo od klipu filmowego nerd
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
|
Wskazówki
|
Poniżej zdarzenia on (release) pojawi się akcja removeMovieClip.
Pierwszy z przycisków powoduje utworzenie duplikatu klipu filmowego. Drugi przycisk usuwa duplikat ze sceny (rys. 7.55). Wskazówka
|
Rys. 7.54. Akcja removeMovieClip usuwa duplikat klonu o nazwie nerdCopy
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)
|
Rys. 7.56. Opcja Linkage w menu rozwijanym biblioteki
Rys. 7.57. Okno dialogowe Symbol Linkage Properties
|
Przyłączanie 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
Ten klon będzie oryginalnym klipem filmowym, klonem-rodzicem, do którego przyłączysz inny klip filmowy.
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. |
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.
|
Rys. 7.58. Metoda attachMovie wymaga podania argumentów idName, newName i depth.
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
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)
|
|
Wskazówki
|
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).
|
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
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
|
Rys. 7.63. Metoda hide obiektu Mouse nie wymaga utworzenia klonu
|
Zmiana 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:
Kiedy uruchomisz testowanie filmu, wskaźnik myszy stanie się niewidoczny. Wskazówka
|
W celu utworzenia
|
Rys. 7.64. Metoda show obiektu Mouse przywraca widok wskaźnika myszy
Rys. 7.65. Wskaźnik myszy zniknie po wczytaniu klipu filmowego
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
|
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
Teraz Flash będzie odświeżał grafikę po każdym poruszeniu wskaźnika, dając w efekcie bardziej płynne ruchy. Wskazówka
|
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
|
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ę
|
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
Rys. 7.71. Warunek sprawdza, czy wskaźnik przecina się z klonem klipu filmowego cat
Rys. 7.72. Klip filmowy cat przechodzi do następnego ujęcia na jego listwie czasowej
|
_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ą”.
_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).
|
|
Rys. 7.73. Powyższe parametry akcji setProperty zmieniają nazwę klipu filmowego cat na youLoseMessage
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