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

 
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: 5.0/5 (1 vote cast)
Jak stworzy膰 menu we flashu?, 5.0 out of 5 based on 1 rating

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

  • 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!

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>

Wyra偶am zgod臋 na przetwarzanie danych osobowych przez firm臋 GDAQ.PL Multimedia S艂awomir Gdak. Zgoda mo偶e zosta膰 anulowana w dowolnym momencie. Szczeg贸艂owe informacje dotycz膮ce danych osobowych s膮 umieszczone na stronie polityki prywatno艣ci.

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.

Wyra偶am zgod臋 na przetwarzanie danych osobowych przez firm臋 GDAQ.PL Multimedia S艂awomir Gdak. Zgoda mo偶e zosta膰 anulowana w dowolnym momencie. Szczeg贸艂owe informacje dotycz膮ce danych osobowych s膮 umieszczone na stronie <a href="https://gdaq.pl/polityka-prywatnosci/" target="_blank">polityki prywatno艣ci</a>.