W tym tutorialu postaram się przybliżyć temat tworzenia prostego, aczkolwiek ciekawego efektu menu we flashu. Na pasku z linkami do podstron poruszać się będzie ramka. Jej pozycja będzie zależna od pozycji myszki.
Na początek..
tworzymy prostokąt (R) szeroki na 40px, a wysoki na 550px.
usuwamy ramkę. Tworzymy wypełnienie typu linear.
a następnie obracamy o 90 stopni.
Dlaczego obracamy prostokąt, a nie narysowaliśmy od razu w odpowiednich rozmiarach? Bo kolor wypełnienia zmieniałby się wtedy wszerz, a my chcemy wzdłuż 🙂
Teraz przekonwertujemy prostokąt w movie clip. W tym celu zaznaczamy utworzony wcześniej obiekt i naciskamy F8, a okienku dialogowym wpisujemy nazwę klipu – pasek, zaznaczamy opcję movie clip i klikamy OK.
Następnie tworzymy button (Ctrl + F8).
W buttonie mamy 4 klatki
- Up – w tej klatce tworzymy wygląd buttona w stanie spoczynku
- Over – ta klatka zawiera wygląd przycisku przy najechaniu na niego myszką
- Down – klatka down decyduje o wyglądzie buutona podczas naciśnięcia lewego przycisku myszy na jego obszarze
- Hit – ta klatka nie jest wyświetlana, decyduje, jaki obszar buttona jest aktywny
W każdej klatce button tworzymy klatkę kluczową (F6). W trzech pierwszych klatkach tworzymy tekst. Możemy zmienić jego kolor w poszczególnych klatkach lub dodać jakieś elementy. Natomiast w klatce Hit tworzymy prostokąt wielkości napisu.
Właśnie stworzyliśmy pierwszy przycisk. Otwieramy biblioteką (Ctrl + L) następnie dwukrotnie klikamy na mc pasek i przeciągamy na scenę. Następnie w ten sam sposób tworzymy kilka takich przycisków, ile nam w danej chwili jest potrzebne i także przeciągamy do mc pasek Otwieramy okienko align i zaznaczamy wszystkie przyciski, które przenieśliśmy do mc oraz klikamy na 
i 
.
Menu jest gotowe, ale dodamy jeszcze klika bajerów.
A więc tworzymy nowy mc (Ctrl + F8) a w nim rysujemy kwadrat i usuwamy wypełnienie, tak, aby została tylko ramka. Przypisujemy temu mc taką akcje:
| onClipEvent (enterFrame) { //w każdej klatce if (_root.pasek.hitTest(_root._xmouse, _root._ymouse, true)) { //jeśli kursor jest na pasku menu //ustaw zmienną pozycji x kursora mx = _root._xmouse; |
Na pierwszy rzut oka może wyglądać trochę skomplikowanie, ale cała filozofia polega na tym, że jeśli kursor znajduje się na pasku zapisujemy nową zmienną docelową – mx. Następnie obliczamy odległość w poziomie kursora od ramki i dzielimy ją, przez 5 aby uzyskać efekt ślizgu. Poza tym musimy ustawić instance movie clipa pasek na pasek, abyśmy mogli się do niego odwoływać w action script-cie.Więcej o _xmouse możesz przeczytać w naszym tutorialu pt. Własny kursor
Na koniec dodałem jeszcze do każdego przycisku akcje:
| on(release) { _root.tekst = „nazwa_działu”; } |
oraz na pole tekstowe które zmienia swą zawartość podczas naciśnięcia button.
To już koniec. A teraz nie czekaj tylko zmieniaj, modyfikuj i dodawaj do swojej strony nowe menu, aby wyglądała rewelacyjnie…
Powodzenia…
