4
115
Zaawansowane przyciski i interakcja z użytkownikiem
Przyciski i interakcja z użytkownikiem
Wykorzystanie Flasha do tworzenia grafiki i animacji to tylko połowa zabawy. Możesz jeszcze wprowadzić interakcję z użytkownikiem za pomocą przycisków i języka ActionScript, pozwalających mu sprawować kontrolę nad ową grafiką i animacją. Interaktywność ma zasadnicze znaczenie w nawigowaniu po sieci i witrynach komercyjnych, jak również w procesie tworzenia gier, internetowych samouczków czy czegokolwiek innego, co wymaga od użytkownika dokonywania wyborów.
Co czyni film interaktywnym? Interaktywność opiera się na obustronnej komunikacji pomiędzy użytkownikiem i filmem. W przypadku filmu Flasha, użytkownik może reagować wykonaniem akcji polegającej na przesunięciu wskaźnika myszy, kliknięciu jej przycisku czy naciśnięciu określonego klawisza na klawiaturze. Akcja taka wywoła odpowiedź ze strony filmu, który z kolei może zażądać od użytkownika wykonania kolejnego działania. To właśnie reakcja użytkownika na rzeczy dziejące się na ekranie – we Flashu nazywane zdarzeniami – wprowadza do projektu interaktywność. Do zarządzania zdarzeniami – Flash używa kombinacji skryptów akcji przypisywanych do ujęć, klonów przycisków i obiektów, grupując je w wyrażeniach nazywanych manipulatorami zdarzeń.
W tym rozdziale na początek zajmujemy się symbolami przycisków i ich bardziej zaawansowanymi zastosowaniami. Nauczysz się powiększać funkcjonalność tych elementów, tworząc niewidzialne przyciski, sekwencje animacji klonów przycisków, jak również w pełni animowane przyciski. Omówimy też zagadnienia związane z tworzeniem bardziej złożonych przycisków, w rodzaju menu rozwijanych, zawierających różne zdarzenia związane z obsługą myszy, opcje śledzenia i klipy filmowe. Na koniec zobaczysz, w jaki sposób nadzorować reakcje użytkownika posługującego się klawiaturą za pośrednictwem zdarzeń klawiaturowych powiązanych z klonami przycisków i obiektem Key. Oprócz zdarzeń związanych z obsługą myszy oraz zdarzeń klawiaturowych, istnieje jeszcze jeden typ zdarzeń – filmowe, które są też bardzo ważne dla kontrolowania interakcji z użytkownikiem. Jako że zdarzenia filmowe są związane z klipami filmowymi, omówimy je w rozdziale 5., którego treść koncentruje się właśnie na klipach filmowych oraz posługiwaniu się listwą czasową.
Niewidzialne przyciski
Dwa klony tego samego symbolu niewidzialnego przycisku
W programie Flash można zdefiniować cztery specjalne ujęcia kluczowe symbolu przycisku, które opisują wygląd przycisku i sposób jego reakcji na ruch myszą. Są to stany przycisku – o nazwach Up, Over, Down i Hit. Stan Up określa wygląd przycisku w momencie, kiedy wskaźnik myszy jest poza jego granicami. Over ukazuje wygląd przycisku w momencie, kiedy wskaźnik myszy znajduje się bezpośrednio nad przyciskiem. W stanie Down określa się wygląd przycisku w momencie, kiedy wskaźnik myszy znajduje się nad przyciskiem i wciśnięto klawisz myszy. Ostatni stan, Hit, określa aktywny obszar przycisku (rys. 4.1).
Możesz zwiększyć elastyczność przycisków Flasha, definiując tylko niektóre stany. Zostawiając puste ujęcia kluczowe we wszystkich stanach, z wyjątkiem stanu Hit, otrzymasz w rezultacie niewidzialny przycisk. Niewidzialny przycisk posiada tylko stan Hit, definiujący obszar reagujący na wskaźnik myszy (rys. 4.2). Tego typu przyciski są szczególne użyteczne przy tworzeniu złożonych, uniwersalnych obszarów aktywnych, którym można przypisać konkretne akcje. Można umieszczać klony niewidzialnych przycisków nad obszarem grafiki, co oznacza, że właściwie dowolny element sceny może posłużyć za przycisk. Na przykład, jeśli utworzyłeś kilka bloków tekstowych, które użytkownik ma przeczytać jeden po drugim, mógłbyś zrobić tak, żeby kliknięcie myszą jednego z nich otwierało kolejny akapit. Zamiast więc tworzyć oddzielne przyciski dla każdego bloku tekstowego, przygotuj tylko jeden niewidzialny przycisk i dopasuj jego klony do każdego z bloków. Przypisz akcje wszystkim klonom niewidzialnego przycisku, umieszczonym nad obszarami bloków tekstowych (rys. 4.3).
Kiedy przeciągniesz klon niewidzialnego przycisku na scenę, pojawi się obszar aktywny, przedstawiony w postaci przezroczystego niebieskiego kształtu, pozwalający precyzyjnie umieścić przycisk na scenie. Wybierz Control/ Enable Simple Buttons, a przycisk zniknie.
Rys. 4.1. Cztery ujęcia kluczowe symbolu przycisku
Rys. 4.2. Niewidzialny przycisk uzyskasz definiując tylko stan Hit
Rys. 4.3. Klony niewidzialnego przycisku umieszczone nad blokami tekstowymi
Rys. 4.4. Symbol niewidzialnego przycisku. Prostokątny kształt w ujęciu kluczowym Hit definiuje obszar aktywny przycisku
1. Z menu Insert wybierz New Symbol. Pojawi się okno dialogowe Symbol Properties.
2. Wpisz nazwę przycisku i w polu Behavior zaznacz opcję Button. Kliknij OK. W bibliotece zostanie utworzony nowy symbol przycisku i uruchomi się tryb edycji symbolu.
3. Zaznacz ujęcie kluczowe Hit.
4. Z menu Insert wybierz Keyframe. Wówczas zostanie utworzone nowe ujęcie kluczowe, odpowiadające stanowi Hit.
5. Mając zaznaczone ujęcie kluczowe Hit, narysuj uniwersalny kształt, który posłuży jako obszar aktywny twojego niewidzialnego przycisku (rys. 4.4).
6. Powróć do głównej listwy czasowej.
7. Tak jak w przypadku każdego symbolu przycisku, przeciągnij klon symbolu z biblioteki na scenę. Przezroczysty niebieski kształt, który pojawił się na scenie, oznacza stan Hit (obszar aktywny) twojego niewidzialnego przycisku.
8. Przesuń, wyskaluj i obróć klon niewidzialnego przycisku, aby pokrywał się z wybraną grafiką.
9. Na palecie Actions przypisz akcję klonowi przycisku. Kiedy wybierzesz Control/ Enable Simple Buttons, przezroczysty niebieski obszar zniknie, ale wskaźnik przyjmie postać rączki, wskazując tym samym na obecność przycisku.
Rys. 4.6. Jeżeli dla niewidzialnego przycisku zdefiniujesz tylko stan Over, będzie się on pojawiał tylko wtedy, kiedy wskaźnik myszy spocznie na aktywnym obszarze
Etykietki narzędziowe czy pojawiające się komunikaty także można tworzyć za pomocą niewidzialnych przycisków. Wystarczy przygotować taką krótką informację w stanie Over niewidzialnego przycisku, a następnie rozmieścić klony wszędzie tam, gdzie informacja ma się pojawiać (rys. 4.5).
1. Utwórz niewidzialny przycisk w sposób przedstawiony w poprzednim ćwiczeniu.
2. Zaznacz stan Over i wstaw nowe ujęcie kluczowe.
3. W stanie Over dodaj grafikę, która wyświetla informacje o konkretnym elemencie pojawiającym się na scenie lub w filmie (rys. 4.6).
4. Powróć do głównej listwy czasowej filmu i rozmieść klony niewidzialnego przycisku w potrzebnych punktach.
Wskazówki
n Zachowaj ostrożność, kiedy obracasz lub skalujesz klon, ponieważ działania te mają wpływ także na stan Over przycisku (rys. 4.7).
n Musisz mieć świadomość tego, w jaki sposób niewidzialne przyciski są umieszczane w warstwach, a także pamiętać, że zachowują porządek określony stosem. Przycisk znajdujący się nad innym przyciskiem jest wobec niego nadrzędny i w rezultacie dezaktywuje przypisaną mu akcję.
Rys. 4.5. Stan Over tego niewidzialnego przycisku zawiera dymek z instrukcją skorzystania ze słowniczka. Można wykorzystać kilka klonów do zaznaczenia różnych słów
Rys. 4.7. Klon umieszczony nad słowami „muscle contraction” został rozciągnięty. Spowodowało to także rozciągnięcie stanu Over przycisku w podobny sposób
Animowane przyciski
Sekwencje animacji ruchu klonu przycisku
Akcja gotoAndPlay(1)
Rys. 4.8. Akcja przypisana do tego klonu przycisku w kształcie balonika powoduje przejście do etykiety happy birthday i rozpoczęcie odtwarzania
Rys. 4.9. Ten balonik unosi się i opada w niekończącej się pętli animacji
Skoro przyciski są rodzajem symbolu, to znaczy, że można je animować – tak jak każdy inny klon symbolu. Wprawienie przycisków w ruch stwarza możliwość projektowania poruszających się menu czy elementów interfejsu, które oczywiście reagują na wskaźnik myszy i wykonują przypisane im akcje.
1. Z menu Insert wybierz New Symbol i utwórz symbol przycisku.
2. Powróć do głównej listwy czasowej i przeciągnij klon przycisku na scenę.
3. Zaznacz klon i otwórz paletę akcji w trybie Normal Mode. Przypisz akcję twojemu klonowi (rys. 4.8).
4. Utwórz animację ruchu, tak samo, jak dla zwykłego klonu symbolu graficznego. Wstaw nowe ujęcia kluczowe, przesuń poszczególne klony lub dokonaj ich transformacji, a następnie wybierz Motion Tween w palety Frames.
5. Na końcu animacji ruchu dodaj akcję gotoAndPlay(1). Flash utworzy niekończącą się pętlę animacji dla twojego przycisku (rys. 4.9).
6.
7.
Akcje przypisane do klonu przycisku w tym ujęciu kluczowym będą obowiązywać do następnego ujęcia kluczowego
8. Utwórz na listwie czasowej punkt, do którego akcja przypisana do klonu przycisku przenosi użytkownika.
9. Przetestuj swój film. W czasie odtwarzania animacji klon przycisku jest aktywny i reaguje na wskaźnik myszy.
Wskazówka
n Animowane klony przycisków używają akcji przypisanych do pierwszego ujęcia kluczowego sekwencji animacji ruchu (rys. 4.10). Dobrym pomysłem jest najpierw przypisanie akcji do klonu przycisku, a dopiero potem wykonanie animacji. W ten sposób wszystkie wstawiane później ujęcia kluczowe będą zawierać ten sam klon, z tymi samymi akcjami.
Rys. 4.10. Akcje przypisane animowanym klonom. W sekwencji animacji wykonywane są akcje przypisane do pierwszego klonu
Przyciski i symbol klipu filmowego
Wszystkie 10 klatek symbolu klipu filmowego wciąż mogą być odtwarzane
Klon klipu filmowego z motylem rezyduje w pojedynczej klatce na głównej listwie czasowej
Rys. 4.11. Klipy filmowe posiadają niezależne listwy czasowe
Animowane przyciski wyświetlają animację w jednym z trzech pierwszych ujęć kluczowych (Up, Over i Down) symbolu przycisku. Na przykład, przycisk mógłby wirować w momencie „najechania” na niego wskaźnikiem myszy, jako że stan Over zawiera animację wirującego przycisku. Ale jak wpasować animację w jedno tylko ujęcie kluczowe symbolu przycisku? Odpowiedzią jest wykorzystanie klipu filmowego.
Klipy filmowe stanowią specjalny rodzaj symbolu, który umożliwia przechowywanie animacji odtwarzanych, niezależnie od ich położenia czy liczby klatek zajmowanych przez klon symbolu. Jest to możliwe dlatego, że listwa czasowa klipu filmowego jest niezależna od pozostałych listew, łącznie z listwami czasowymi innych klipów, jak również głównej listwy czasowej, w której klip może rezydować. Niezależność ta oznacza, że w przypadku wprowadzenia do sceny klonu symbolu, będą odtwarzane wszystkie klatki animacji klipu filmowego, niezależnie od jej umiejscowienia. Umieszczenie klonu klipu filmowego w ujęciu kluczowym symbolu przycisku sprawia, że klip filmowy będzie odtwarzany za każdym razem po wyświetleniu tego ujęcia kluczowego. Opisane zagadnienia to podstawy działani...
A-n-i-t-a