Tworzenie dynamicznego i estetycznego menu

~ pozostałe przykłady ~



Tutorial ten przedstawia jak stworzyć dynamiczne menu z pokazującymi się po najechaniu podkategoriami danych działów.

Możesz pobrać gotowy projekt menu t1058.zip (1 KB)


  1. Uruchom program Flash Designer.

  2. Ustaw rozmiar całości menu wybierając z menu polecenia:
    "Ramka" > "Rozmiar ramki" i ustaw wartości 600 i 60.

  3. W oknie z listą ramek po prawej stronie okna programu zaznacz opcję "Matryca"

  4. Z palety narzędziowej wybierz "Przycisk" i przeciągając kursor myszki narysuj po lewej stronie okna animacji przycisk. Umieść go w górnej części ramki, tak aby pozostawić miejsce dla podmenu, które znajdzie się poniżej.

  5. Kliknij na narysowanym przycisku prawym klawiszem myszki i z rozwijanego menu wybierz "Rozmiar".
    Odznacz opcję "Proporcjonalnie" i ustaw wartości 68 i 23. Zatwierdź klikając OK.

  6. Z menu wybierz "Obiekt" > "Przejście tonalne". Z rozwijanej listy wybierz "Pionowy". Klikając na kwadrat z kolorem ustaw kolor górny z palety kolorów standardowych (kliknij na przycisk "Kolory standardowe") na biały, a kolor dolny na kolor #FF8F3A. Dla lepszego efektu graficznego dodamy jeszcze jeden kolor do gradientu. Kliknij na przycisk "Dodaj kolory". Zaznacz opcję "Punkt 3". Ustaw kolor o wartości #C65C00. Zatwierdź klikając OK.

  7. Następnie aby utworzyć identycznych wymiarów kolejne pięć przycisków menu z górnego menu programu wybierz "Edycja" > "Powiel". Chcemy zachować przyciski na jednym poziomie, zatem "Krok Y" (przesunięcie w pionie) ustawiamy na wartość "0", natomiast "Krok X" (przesunięcie w poziomie) ustawiamy takie jak szerokość powielanego przycisku (68), dzięki czemu kolejne z nich będą do siebie przylegać. Chcemy dodać 5 przycisków, zatem w polu "Powiel" wpisujemy wartość "5".

  8. Aby zmienić tekst na przyciskach, klikamy na każdy z nich dwukrotnie i w oknie, które się otworzy, na górze, wpisujemy wyświetlany tekst na przycisku. W tym samym oknie możemy zmienić kolor tekstu klikając na kwadrat po lewej od słów "Kolor tekstu". Następnie klikamy na przycisk "Kolory standardowe" i wybieramy kolor biały. Zatwierdzamy klikając OK. Czynność powtarzamy dla każdego przycisku.

  9. Teraz w menu zostaną ustawione zdarzenia po kliknięciu. Klikamy na jeden z przycisków aby go zaznaczyć. Z menu wybieramy "Akcja" > "Kliknięcie". Zaznaczyć należy opcję "Otwórz URL" i podać adres docelowy (adres http://www.nazwa.pl bądź ścieżkę do pliku). Czynność należy powtórzyć dla pozostałych przycisków w menu.

  10. Teraz zostaną stworzone podmenu na kolejnych warstwach. Z menu "Ramka" wybierz "Nowa". Utwórz tyle ramek ile jest przycisków, lub tyle, dla ilu przycisków zamierzasz stworzyć podmenu. Na liście ramek powinna być ramka "Master Frame" i 5 kolejnych ramek. Na jednej ramce znajdować się będzie podmenu dla jednego przycisku.

  11. Przejdź do ramki "Master Frame" i kliknij prawym przyciskiem myszy na jednym z przycisków. Wybierz z rozwijanego menu "Najechanie". Zaznacz opcję "Skok do ramki" i z rozwijanej listy wybierz nazwę ramki. Czynność powtórz dla pozostałych przycisków. Do każdego przycisku musi być przypisana inna ramka.

  12. Przejdź do jednej z ramek, na której znajdować się będzie submenu. Wybierz narzędzie "Tekst". Wpisz tekst i ustaw dla niego kolor #FF8C00. Kliknij OK. Wpisz kolejno 4 różne pozycje jakie znajdą się w danym podmenu.

  13. Kliknij prawym przyciskiem myszy na tekście i z rozwijanego menu wybierz "Kliknięcie". Wpisz podobnie jak wcześniej - adresy stron internetowych bądź nazwy plików. Czynność powtórz dla wszystkich pozycji w podmenu i dla pozostałych podmenu na 4 kolejnych ramkach także.

  14. Aby zmienić kolor tekstu po najechaniu na niego myszką kilknij na tekście, z menu wybierz "Akcja" > "Kolor najechania" i ustaw np. kolor niebieski: #6100FF.

  15. Wyeksportuj menu używając polecenia "Plik" > "Eksport strony HTML".



Pobierz program Flash Designer

Chcesz skomentować ten tutorial?

Jeśli chcesz skomentować krótko ten artykuł, możesz napisać komentarz poniżej (długość do 255 znaków): *


Twój email: (tylko jeśli oczekujesz odpowiedzi)


W pole poniżej wpisz wynik działania matematycznego, cyfrę: 4+2+2 (podpowiedź: osiem).
Jest to zabezpieczenie przed spamem.

* pole wymagane

| Strona główna | Zamówienie | Pobierz | O programie | Wsparcie | Przykłady |
Copyright © 1999-2017 Selteco Flash Software. All rights reserved.