Jak stworzyć menu we flashu?

Na przykładzie strony GDAQ.PL pokażę krok po kroku jak stworzyć menu we flashu. Będzie to menu pionowe umieszczone w headzie strony.

Do stworzenia takiego menu potrzeba podstawowej wiedzy na temat Flasha.

1. Tworzymy nowy dokument o rozmiarach 214x200px

2. Tworzymy napis jaki ma się znaleźć na buttonie i klikając prawym przyciskiem myszki przekształcamy go w symbol graficzny, aby móc wykonywać na nim efekty. Następnie tę grafikę przekształcamy w MovieClip w celu umieszczenia w nim animacji. Proponuję nazywać symbole w odpowiedni sposób, aby móc się połapać później w tym co mamy w bibliotece np.: G_onas (co oznacza symbol graficzny “o nas”).

3. Klikamy w nasz MoviClip 2 razy w celu wejścia w niego. Na scenie aktualnie mamy tylko nasz napisz “o nas” i tak samo nazwijmy warstwę (layer) na, której się on znajduje naciskając na nią 2 razy. Po lewej stronie napisu narysowałem strzałkę, którą przekształciłem w symbol graficzny i umieściłem na oddzielnej warstwie.

4. Pod tym przyciskiem będą znajdowały się także inne dlatego na dole przycisku umieszczę kreskę, która będzie oddzielała je od siebie. Kreskę zamieniam w symbol graficzny. Na nowej warstwie “tło” umieszczam pomarańczowy prostokąt o wymiarach width=158.0 height=0.2 idący od środka strzałki wzdłuż napisu (także zamieniamy w symbol).

5. Teraz zajmiemy się animacją. Rozciągamy każdą z warstw do 15 klatki. Przechodzimy do klatki nr. 15 i na każdej warstwie w tej klatce klikamy F6 w celu stworzenia nowej klatki kluczowej. Następnie w 15 klatce na każdej warstwie zmieniamy wygląd symbolu dzięki tej operacji będziemy mieli inaczej wyglądający symbol w klatce 1 i inaczej w klatce 15.

a) nasz cienki prostokąt rozciągamy na wysokość height=33.6,

b) klikamy na napis i na dole w “properties” w “color” zaznaczamy “tint” i ustawiamy 100% koloru białego,

c) tak samo robimy ze strzałką

6. Zaznaczamy pierwszą klatkę i w “properties” > “tween” klikamy “Motion” (animacja symboli). W ten sposób uzyskujemy animację. Po kliknięciu Enter możemy ją zobaczyć. Aby animacja była szybsza i bardziej efektowna należy zmienić ilość klatek w filmie, ja ustawiłem na 46. Tak jak na poniższym screenie powinien wyglądać teraz twój ekran.

7. Dla ozdoby napis podczas animacji cofa się. W połowie 15 klatek należy przycisnąć przycisk F6 zaznaczyć napis i strzałką przesunąć go. Aby animacja nie zapętlała się cały czas, w klatce numer 1 i numer 20 ustawiłem akcję stop filmu. Należy rozwinąć paletę “actions” i wpisać “stop();”.

8. Następnie, aby na końcu filmu nie pozostały puste klatki na każdej warstwie w klatce nr.20 klikamy F5. Aby nadać smaku przyciskowi dodałem do niego przelatujące przez niego linie i błysk.

W tym celu stworzyłem biały prostokąt o wymiarach 158×4,8 następnie umieściłem go na środku wzdłuż przycisku w klatce nr.15 (zamieniamy na symbol graficzny). W klatce nr.20 przyciskiem F6 stworzyłem nową klatkę kluczową i umieściłem w niej ten sam prostokąt tylko powyżej przycisku w “properties” w “color” zaznaczamy “tint” i ustawiamy 0% koloru białego. Dzięki temu po ustawieniu w klatce 15 “properties” > “tween” > “Motion” tworzy się animacja przelatującego prostokąta znikającego na końcu. W celu lepszego efektu dodałem jeszcze jedną dość cienką linię na tej samej zasadzie co opisałem powyżej.

9. Posiadamy już pełną animację, która ma być odgrywana podczas najechania na przycisk, teraz zajmiemy się animacj, która ma być odtwarzana podczas zjazdu z przycisku. Jest to ta sama animacja tylko stworzona od drugiej strony. Zatem musimy zrobić odbicie lustrzane wszystkich klatek, które stworzyliśmy do tej pory. Każda pojedyncza animacja ma być odwrócona (najlepiej i najszybciej jest kopiować istniejące już klatki w odpowiednie miejsca). Na ostatniej klatce w warstwie action nie ustawiamy żadnej akcji. Patrz obrazek poniżej. Wracamy na scenę główną klikając na przycisk “Scene 1”.

10. Do działania naszego przycisku potrzebujemy nałożyć na nasz MovieClip button. Tworzymy prostokąt o rozmiarach 158×34 następnie zamieniamy go na symbol “Button” i klikamy w niego 2 krotnie. Aby przez button było widać naszą animację robimy go przezroczystego poprzez przesunięcie prostokąta tylko do pola “HIT” klikamy tam F6 i usuwamy prostokąt z pozostałych pól. Po powrocie na scene ujrzymy prześwitujący o kolorze morskim button.

11. Do powyższego przycisku przypisujemy akcje w panelu “Action”. W naszym MovieClipie ustawiliśmy w pierwszej klatce “stop”, aby przycisk od razu po wyświetleniu nie uruchamiał animacji. Akcja w przycisku informuje iż po najechaniu na niego ma odtwarzać animację od klatki nr.2 na klatce 20 animacja się zatrzymuje gdyż tam ustawiliśmy “stop” dalej w przycisku jest zapisana informacja, iż po zjechaniu z niego ma się odtwarzać nasz MC od klatki nr. 21. Na końcu podany jest link do przycisku.

“button_onas” – oznacza nasz przycisk, tę nazwę należy przypisać w “Instance name” naszego MC (nie przycisku a MC).

Akcja przycisku:

on (rollOver){
_root.button_onas.gotoAndPlay(2);
}
on (rollOut){
_root.button_onas.gotoAndPlay(21);
}

on (release) {
getURL(“http://www.gdaq.pl/?page=onas”);
}

 
12. Nasz przycisk jest już GOTOW. W celu stworzenia innych przycisków, wybieramy w bibliotece nasz MovieClip prawym przyciskiem klikamy “Duplicate” i zmieniamy nazwę na MC_oferta. W przycisku dalej widnieje nazwa “O nas”, aby to zmienić należy kliknąć 2 razy na nowy Movie Clip i zamiast symbolu graficznego “G_onas” wstawić nowy z “G_oferta” z napisem “Oferta”. W ten sposób należy postępować z każdym przyciskiem.

13. Ja w swoim menu zrobiłem 5 przycisków dodałem logo oraz cień do menu. Poniżej przedstawiam efekt mojej pracy. Życzę powodzeni, a w razie wątpliwości czekam na komentarze z pytaniami lub e-maile.