Up – gdy puszczamy przycisk myszki na obiekcie, over – gdy przesuwamy myszkę nad przyciskiem, down



Pobieranie 22.63 Kb.
Data07.05.2016
Rozmiar22.63 Kb.
PRZYCISK + elementy ActionScript

Lekcja oparta o ActionScript w wersji 2.0. Przycisk składa się z czterech klatek: UP, OVER, DOWN, HIT, na których projektujemy, co się stanie, gdy zajdzie zdarzenie związane z myszką. UP – gdy puszczamy przycisk myszki na obiekcie, OVER – gdy przesuwamy myszkę nad przyciskiem, DOWNgdy wciskamy przycisk, HIT - obszar działania przycisku czyli, w które miejsce można kliknąć (aktywny obszar). Z reguły trzy pierwsze klatki są bardzo podobne do siebie. Klatka HIT może zawierać tylko np. prostokątny obszar.
PLIK W WERSJI AS2

Z
menu wybieramy: Plik / Nowy / Plik Flash (ActionScript 2.0)


TWORZENIE PRZYCISKU

p
o kliknięciu w przycisk otworzymy stronę WWW, a po najechaniu myszą odtworzymy animację


  • z menu: Wstaw / Nowy obiekt / Przycisk

  • nazwa PRZYCISK

  • wybieramy klatkę UP i rysujemy przycisk złożony z prostokątów

  • na przycisku tworzymy napis: TEST

  • na pozostałe trzy klatki wstawiamy klatki kluczowe

na klatce HIT można narysować tylko sam prostokąt – aktywny obszar
AKCJA PO KLIKNIĘCIU W PRZYCISK (UP)

  • wracamy do Sceny 1

  • przenosimy z biblioteki na scenę PRZYCISK

  • zaznaczamy przycisk

  • z
    on (release) {

    getURL ("http://www.zso.bobowa.eu");



    }
    menu wybieramy: Okno / Operacje

pojawia się okienko skryptów

  • wpisujemy tekst skryptu (ramka obok)

  • uruchamiamy animację CTRL+ENTER

po kliknięciu – pojawi się strona WWW




ANIMACJA PO NAJECHANIU (OVER)

  • edytujemy przycisk z biblioteki

  • wybieramy klatkę OVER

  • zaznaczamy przycisk i zmieniamy wypełnienie na czerwone

po wskazaniu przyciski kolor przycisku zmienia się na czerwony
AKCJA PO WCIŚNIĘCIU (DOWN)

  • edytujemy przycisk z biblioteki

  • wybieramy klatkę DOWN

  • grupujemy elementy

  • minimalnie zwiększamy wymiary

po naciśnięciu zwiększy się rozmiar, gdy puścimy przycisk myszy – wszystko wraca do normy
AKTYWNY OBSZAR (HIT)

teraz aktywnym obszarem są tylko same litery
ANIMACJA NA PRZYCISKU

  • tworzymy nowy symbol: klip filmowy o nazwie FILM

kółko porusza się prostokątnej ścieżce

  • edytujemy PRZYCISK i wybieramy klatkę OVER

  • przenosimy symbol FILM (kółko) na klatkę OVER i ustawiamy w rogu przycisku

po wskazaniu tekstu na przycisku tło zmienia kolor na czerwony

i animowane kółko przelatuje naokoło przycisku

PODPOWIEDZI W PRZYCISKACH

Animacje we flash zajmują z reguły niewiele przestrzeni na ekranie. Jeżeli jest to animacja interaktywna konieczne jest umieszczenie w odpowiednich miejscach podpowiedzi dla użytkownika. Bardzo często stosuje się w tym celu przyciski z „wyskakującymi” tekstami. Nie chcemy jednak, aby podpowiedź wyskakiwała za każdym razem, gdy użytkownik wskaże przycisk (wystarczy wtedy dodać tekst w polu OVER), ale tylko, gdy „zastanawia się” – przez jakiś czas myszka wskazuje przycisk. Zamiast zwykłego tekstu w polu OVER umieścimy klip filmowy.
Po wskazaniu przycisku POMOC przez sekundę nic się nie dzieje, po czym napis POMOCY zamienia się na nowy.




  • narysuj prostokąt z napisem „POMOCY”

  • przekonwertuj go na przycisk o nazwie HELP

  • w pozostałych klatkach przycisku utworz klatki kluczowe

  • wybierz klatkę OVER

  • zaznacz całość

  • przekonwertuj na klip filmowy

  • edytuj klip

  • utwórz nową warstwę

  • w klatkach 1-13 obu warstw wstaw rysunek z tekstem POMOCY

  • w klatce 13 warstwy 1 utwórz animację ruchu – zanikanie tekstu POMOCY

  • w klatce 13 warstwy 2 utwórz animację ruchu – pojawianie się tekstu „Szkolna strona www...”

Przycisk powinien działać w taki sposób, aby po wyświetleniu się tekstu pomocy animacja się zatrzymała. Dokonamy tego stosując proste polecenie języka skryptowego.

  • wybierz ostatnią klatkę animacji w klipie filmowym

  • klawisz F9 – okno operacji

  • wpisz polecenie:

stop();
PROSTE MENU

Menu, to uporządkowany zbiór przycisków. Nie musi być imponujący ani błyskotliwy, powinien jednak być użyteczny.

  • powiel przycisk HELP – nowy o nazwie DOM

  • usuń klatki OVER, DOWN i HIT

  • zmień napis na DOM

  • wstaw trzy klatki kluczowe

  • w podobny sposób utwórz przyciski PRACA i SZKOŁA

  • ustaw cztery przyciski w kolumnie (patrz rysunek)


WYSKAKUJĄCE MENU

Jeżeli menu na animacji zajmuje zbyt dużą powierzchnię można je chować i pokazywać w odpowiednim momencie. Dołożymy jeszcze do tego możliwość przeciągania menu po obszarze animacji.

  • zaznacz cztery przyciski na ekranie

  • przekonwertuj je na symbol – klip filmowy o nazwie NOWE_MENU

  • edytuj symbol NOWE_MENU

  • zmień nazwę warstwy na MENU

  • w klatce 2 wstaw klatkę kluczową

  • usuń wszystkie przyciski z klatki 1

  • utwórz dwie nowe warstwy: TŁO i PRZYCISKI

  • przesuń warstwę TŁO na dół listy

  • w klatce 2 warstwy PRZYCISKI wstaw klatkę kluczową

  • utworz w niej dwa małe przyciski nad menu: większy PRZESUŃ

i mniejszy OTWÓRZ (patrz rysunek)

  • wklej je w tym samym miejscu w klatce 1 warstwy PRZYCISKI

  • do klatki 2 warstwy TŁO wstaw klatkę kluczową

  • w klatce 2 warstwy TŁO narysuj przeźroczysty prostokąt obejmujący całe menu

  • w klatce 1 warstwy TŁO narysuj przeźroczysty prostokąt obejmujący górne przyciski




Dodajemy polecenia skryptowe

  • zaznacz przycisk PRZESUŃ na warstwie PRZYCISKI w klatce 1

  • wpisz polecenie

on (press) { startDrag ("", false); }

on (release) { stopDrag (); }

Jeśli wciśniemy przycisk myszy (PRESS) na przycisku PRZESUŃ będzie można przesuwać całe menu po obszarze klipu (STARTDRAG). Jeżeli przycisk myszy zwolnimy (RELEASE) kończymy przesuwanie menu (STOPDRAG).


on (release) { gotoAndStop (1); }

Jesteśmy w klatce 2 – widać więc całe menu. Zwolnienie przycisku myszy na przycisku OTWÓRZ spowoduje, że przesuniemy się do klatki 1 – widoczny będzie tylko górny pasek


  • w klatce 1 zaznacz przycisk OTWÓRZ

  • wpisz polecenie

on (release) { gotoAndStop (2); }

Jesteśmy w klatce 1 – widać tylko górny pasek. Zwolnienie przycisku myszy na przycisku OTWÓRZ spowoduje, że przesuniemy się do klatki 2 – widoczne będzie całe menu


stop();

To nie jest animacja, która może kręcić się wkoło. Wszystkim sterują przyciski menu, dlatego po każdej klatce zatrzymujemy akcję

Po uruchomieniu animacji przechodzimy do klatki 1 – widać tylko dwa górne przyciski: PRZESUŃ i OTWÓRZ. Klikanie w przycisk OTWÓRZ spowoduje skok do klatki 2, w której widać całe menu, a przycisk OTWÓRZ ma już inne polecenie – skok do klatki 1.


widok menu z pozycji klatki 1 i klatki 2 pokazują poniższe rysunki


©absta.pl 2016
wyślij wiadomość

    Strona główna