W tym artykule dowiesz się jak skutecznie stosować MovieClipy zamiast Buttonów w Twoich projektach. Ten sposób da Ci większą elastyczność w projektowaniu nawigacji w prezentacjach czy stronach WWW.
MovieClip jako przycisk
Zwykle tworząc stronę internetową czy prezentację we Flash’u, korzystamy z wielu symboli typu Button, tymczasem dużo wygodniejszą formą tworzenia przycisków jest zamknięcie ich w obiekcie MovieClip. Kiedy stosować MC a kiedy Button?
- Obiek Button stosujemy do prostych przycisków, w których nie chcemy stosować zaawansowanych animacji. Mimo, że możemy w przycisku tworzyć wiele warstw, a w klatce DOWN czy OVER umieszczać np. MovieClip’y, jeśli chcemy stworzyć skomplikowany przycisk często jest to tylko utrudnienie. Obiekt Button nadaje się natomiast, kiedy tworzymy niewidoczne przyciski, z wypełnioną jedynie klatką HIT – np. w przypadku tworzenia bannerów i linkowania z poziomu tego typu przycisków.
- MovieClip jako przycisk warto zastosować wówczas, kiedy chcemy stworzyć w przycisku bardziej skomplikowaną animację i mieć nad nią większą kontrolę.
Jak stworzyć MovieClip, który będzie jednocześnie przyciskiem?
-
Uruchamiamy nowy plik Flasha dla ActionScript 3
- Tworzymy nowy obiekt typu MovieClip wybierając Ctrl+F8 lub Insert > New Symbol, z wywołanego okienka wybieramy typ MovieClip i nadajemy nazwę, np. Przycisk
- Przygotowujemy strukturę przycisku, osobiście najczęściej pierwszą warstwę przeznaczam na akcje, kolejną na zachowanie przycisku – statyczny przycisk, akcję po najechaniu (on), oraz akcję po zjechaniu(off). Kolejną warstwę przeznaczam na „obszar klikalny”, nazywam ją zwykle hit. W pierwszej klatce warstwy akcje dodaję polecenie stop(); (w panelu akcji – F9). Całość prezentuje się następująco:
2.
3.
- Dodajemy przycisk, w pierwszej klatce warstwy zachowanie, kiedy już stworzymy grafikę, obowiązkowo zamykamy ją w symbolu typu Graphic (F8), w ten sposób kolejne modyfikacje przycisku będą skutkowały zmianą grafiki w każdym etapie animacji.
- Umieszczamy klatkę kluczową w drugiej klatce i tworzymy animację (rightclick na pierwszej klatce i polecenie Create Classic Tween). Kolejne klatki kluczowe wstawiamy w klatce 11, 12 oraz 22. Na warstwie z akcjami, umieszczamy klatkę kluczową w klatce 11 i dodajemy w niej akcję stop(); Struktura przedstawia się następująco:
- Przypisujemy klatkom 2 oraz 12 warstwy zachowanie odpowiednie labele – on oraz off w panelu Properties.
.gif)
- W klatkach 2-11 tworzymy animację, która pojawi się po najechaniu na przycisk, w klatkach 12-22 animację pojawiającą się po zjechaniu z przycisku.
- Ostatnim elementem jest „obszar klikalny”, stworzymy go na warstwie hit i będzie to po prostu kształt, którego krycie dla koloru wypełnienia ustawimy na 0% czyniąc go przezroczystym. Kształt oczywiście ma się znajdować nad przyciskiem. Kształt jest w zasadzie konieczny tylko wtedy, jeśli obszar klikalny ma mieć większe spektrum niż sam przycisk, ew. jeśli podczas animacji przycisk będzie znikał czy zmniejszał się, lub jeśli robimy rozwijane menu które pojawi się w tym samym klipie pod przyciskiem.
.jpg)
8.
- Z pomocą F5 przedłużamy czas trwania pierwszej klatki warstwy hit do końca klipu, czyli do klatki 22.
10. Pozostała nam do zapisania akcja, która obsłuży cały przycisk. Dodajemy ją w klatce pierwszej na warstwie akcje. Wystarczy zapisać:
stop();this.buttonMode = true;this.addEventListener(MouseEvent.MOUSE_DOWN, klikniety);this.addEventListener(MouseEvent.MOUSE_OVER, najechany);this.addEventListener(MouseEvent.MOUSE_OUT, zjechany);function klikniety(event:MouseEvent):void { navigateToURL(new URLRequest("http://www.eduweb.pl"));}function najechany(event:MouseEvent):void { gotoAndPlay(2);}function zjechany(event:MouseEvent):void { gotoAndPlay(12);}
Objaśnienie: Posługujemy się oczywiście określonymi funkcjami , które następnie przypisujemy do klipu nasłuchując konkretne akcje:
· MOUSE_DOWN – kliknięcie przycisku
· MOUSE_OVER – najechanie kursorem nad przycisk
· MOUSE_OUT – zjechanie z przycisku
Wykorzystujemy także jeszcze jedno polecenie:
this.buttonMode = true;
Uzyskujemy dzięki temu zmianę kursora myszy na łapkę, w momencie najechania na klip.
To wszystko! Nie zapomnij powrócić na scenę i z biblioteki (Ctrl + L) przeciągnąć klipu Przycisk na scenę. Następnie możesz już przetestować (Ctrl+Enter) oraz opublikować film (Shift +F12).
Przykładowe pliki źródłowe znajdziesz
Więcej informacji w na .
