[metaslider id=11287] Jak stworzyć menu we flashu? | SEO Blog

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

menu we flashu

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”).

menu we flashu

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.

menu we flashu

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).

menu we flashu

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ą

menu we flashu

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.

menu we flashu

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();”.

menu we flashu

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.

menu we flashu

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”.

menu we flashu

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.

menu we flashu

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”);
}

menu we flashu

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.

menu we flashu

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.

VN:F [1.9.22_1171]
Rating: 2.3/5 (3 votes cast)
Jak stworzyć menu we flashu?, 2.3 out of 5 based on 3 ratings

o autorze

Slawomir Gdak

Od 2009 prowadzi owego seo bloga i dzieli się swoją wiedzą z zakresu seo.

Autor publikacji/produktów z zakresu seo m.in.: znanych list katalogów i profili, ebooków, szkoleń, artykułów w miesięczniku SEMspecialist.
Gościnnie trener w Mieście Szkoleń oraz na Search Marketing Week.

19 komentarzy

napisz komentarz
  • Witam. Ostatni krok jest dla mnie najtrudniejszy. Nie moge zrobic kolejnych przyciskow wg. metody, jaka opisales. Albo jestem ciemny, albo czegos nie wiem. Jak zduplikuje mc i zmienie nazwe to w poprzednim mc nazwa takze sie zmienia. Nie rozumiem. Mysle, ze punkt 12 nalezy rozwinac, bo nie mozna zrozumiec. Pozdrawiam

  • Witam. Ja mam problem z przypisaniem „??Instance name”. Nie wiem, gdzie i jak…
    Zrobił?e?m całą? grafikę?, ale nic nie dział?a, chyba dlatego, że nie wpisał?em „??Instance name”
    Bardzo proszę? o odpowiedź
    Z góry dzięki.
    Pozdrawiam

  • Witam!
    Ja też mam problem, ale z umieszczeniem „Instance name”. Nie wiem jak i gdzie? Zrobiłem całą grafikę i button mi nie działa – pojawiają sie błędy to chyba z powodu nie wpisanego „Instance name”.
    Bardzo proszę o odpowiedź.
    Pozdrawiam

  • ja tam mam nastepujacy problem jestem poczatkujacym w flashu i chcialbym wiedziec jak rozszerzyles ten pasek bo mi jakos sie to nei udaje a jak usuwam go z klatki 15 i tworze nowy to nic mi sie tam nie zmienia T_T pomocy

  • oki doszedlem do rozszerzenia ale teraz nastepny problem jak daje „montion” to pasek nie zmienais ie wogule nie powieksza i tak trwa do 14 klatki a na 15 wskakuje juz powiekszony

  • oki wszystko zrobione psza jednym moj niby prstokat nie ejst nim dokonca ma zaokraglone konce i ty moje pytanie jak sie ich pozbyc??

  • KUWA MAć STARY TO NIE DZIAłA!!! MOZESZ POWIEDZIEć O CO CHODZI?
    **Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 9: This type of quotation mark is not allowed in ActionScript. Please change it to a standard (straight) double quote.
    getURL(„?http://www.gdaq.pl/?page=onas„);

    **Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 10: ?)? or ?,? expected
    }

    **Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 8: Statement block must be terminated by ?}?
    on (release) {

    **Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 10: Syntax error.
    }

    Total ActionScript Errors: 4 Reported Errors: 4

  • Witam mam problem z 11pkt. mianowicie nie moge w tym buttonie dodac akcji… pisze ze niemozna.

  • I merely much like the very helpful facts you provide to the articles. I most certainly will bookmark your blog post as well as analyze all over again the following usually. We’re slightly i will probably be shared with a lot of new material right here! All the best for!

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Wszelkie prawa zastrzeżone. Zabrania się wykorzystywania jakichkolwiek treści bez zgody autora.

Sławek Gdak Specjalista ds. seo
Jeśli potrzebujesz mojej pomocy, masz jakiekolwiek pytanie wypełnij poniższy formularz.