DRAGOsystems

: index | programowanie | webmastering | algorytmika | download | projekty | słownik | grafika | flash | linki :

    

f l a s h > tutorials > przycisk z podpowiedzią

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |


autor: Maciej Jarosz
źródło: webhelp.pl



p o b i e r z    ź r ó d ł o


PRZYCISK Z PODPOWIEDZIĄ


Podczas tworzenia interfejsu możesz spotkać się z sytuacją, że na małym obszarze musisz zamieścić kilka ważnych dla projektu elementów nawigacyjnych. Dysponując małą przestrzenią przeznaczoną dla systemu nawigacji projektanci często zamiast tekstu zamieszczają różnorodne symbole zrozumiałe dla odbiorcy. Jako przykład mogę podać symbol domu kojarzony ze stroną główną (home), czy słuchawkę telefoniczną odbieraną jako kontakt.

Aby być pewnym, że znaczenie danego symbolu zostanie odebrane właściwie, zaprezentuję rozwiązanie, które sprawi, że użytkownik po najechaniu kursorem myszy na określony symbol zobaczy podpowiedź w postaci tekstu określającą informację, jaką przekazuje dany symbol.

Aby wykonać ćwiczenie:
  1. Otwórz Flasha i stwórz film z dwiema warstwami (Insert > Layer). Pierwszą warstwę nazwij button, a drugą title.

  2. Na warstwie button narysuj kwadrat, a następnie przekonwertuj go do symbolu typu button (Insert > Convert to Symbol) nadając mu nazwę button. Powstały przycisk (button), za pomocą panela Align, wyrównaj tak, aby znajdował się w centralnej części filmu.

  3. Przejdź do trybu edycji symbolu button, dodaj jedną warstwę (Insert > Layer) i na dodanej warstwie narysuj symbol (np. słuchawkę telefonu).

  4. Na warstwie title narysuj figurę geometryczną, przypominająca kształtem znane z komiksów "dymki". Narysowaną figurę przekonwertuj do symbolu typu movie clip (Insert > Convert to Symbol) nadając mu nazwę title i wyrównaj go do centralnej części sceny.

  5. Przejdź do trybu edycji sceny, zaznacz klip filmowy title i w panelu Instance (Window > Panels > Instance) w polu name wpisz title.

  6. Przejdź do trybu edycji klipu filmowego title i przesuń go względem środka symbolu tak, jak to pokazano na rysunku poniżej:









  7. Będąc dalej w trybie edycji klipu filmowego title, dodaj jedna warstwę (Insert > Layer) i na dodanej warstwie napisz jakiś tekst, który będzie określał znaczenie symbolu narysowanego wcześniej (np. Kontakt).

  8. Przejdź z powrotem do trybu edycji sceny Scene 1, zaznacz klon klipu filmowego title, otwórz okno Actions (Window > Actions) i wpisz następujący skrypt:
    onClipEvent (load) {
           _visible=false;
    }
    
    Skrypt ten powoduje, że bezpośrednio po załadowaniu klipu filmowego title, będzie on niewidoczny w filmie. Możesz to teraz sprawdzić naciskając klawisze "Ctrl" i "Enter".

  9. Zaznacz symbol button, otwórz okno Actions (Window > Actions) i wpisz następujący skrypt:
    on (rollOver) {
        _root.title._visible = true;
        _root.title.startDrag(true);
    }
    on (rollOut) {
        _root.title._visible = false;
    }
    
Aby projekt był funkcjonalny, musisz oczywiście jeszcze dodać jakąś akcję do symbolu button.


 z wyrazami podziękowań [ds] 2003

 
 
 Powrót do MainPage

DRAGOsystems 2003

kontakt e-mail