MENU SO SILUETOU KRACAJUCEHO MUZA as3 |
Tento tutorál vám ukáže ako vytvoriť pekne vyzerajúce menu s animovanou siluetou kráčajúceho muža. Pokaždé keď kliknete na niektoré z tlačidiel menu,
tá vkráča dnu a zapne zodpovedajúcu žiarovku nad daným tlačidlom, toto by malo reprezentovať označenú časť menu. Samozrejme je len na vás čo táto silueta urobí potom ako je aktivovaná. Na konci by sme mali dostať
niečo podobné ako je tento príklad dole:
Budeme potrebovať actionscript 3.0 flash dokument. Najťažšou časťou tohto tutoriálu je animácia kráčajúcej siluety samozrejme. Odporúčam vám pracovať s už predpripravenými movieclipami použitými na vytvorenie tohto príkladu
ktoré sú obsiahnuté v zdrojovom súbore k stiahnutiu na konci tejto stránky. Pokial si ju chcete vytvoriť sami, môžete použiť časti tela tiež obsiahnuté v fla súbore spolu s bone tool na animovanie pohybu tak ako sa vám páči. Keď budete hotový, odporúčam vám
prerobiť tento pohyb na frame by frame animáciu a skonvertovať na jeden veľký movieclip pre jednoduchšiu manipuláciu. Teraz keď už máme animáciu siluety hotovú, budeme potrebovať niake tlačidlá na spustenie akcií na scéne. Použil som tri priehľadné tlačidlá
umiestnené nad lankami ktoré rozsvecujú žiarovky, keďže tie sú moc tenké na pohodlné klikanie, spravte tieto tlačidlá širšie. Do ich koloniek instance name napíšte btn_1, btn_2, btn_3. Pre žiarovky som použil movieclip ktorý má prvý frame prázdny
a na druhom frame je samotná rozsvietená žiarovka. Vložením stop() scriptu na prvý frame sme zamedzili jej blikaniu. Namiesto toho použijeme na jej rozsvietenie actionscript. Skopírujte tento movieclip ešte dva razy a pomenujte ich
LB1, LB2, LB3. Rovnaký princíp bol použitý pre text reprezentujúci priesvitné tlačidlá. Na prvom frame je text tmavý so stop() scriptom a na druhom je svetlý. Tieto movieclipy nazveme home, news, about.
Teraz otvorte actions okno a vložte tento actionscript kód:
btn_1.addEventListener(MouseEvent.CLICK, btnclick1); function btnclick1(ev:MouseEvent):void { short_walk.gotoAndPlay(2); } stage.addEventListener(Event.ENTER_FRAME, detectCollision1); function detectCollision1(event:Event) { if (short_walk.hitTestPoint(78.3,58.0,true)) { LB1.gotoAndStop(2); home.gotoAndStop(2); LB2.gotoAndStop(1); LB3.gotoAndStop(1); news.gotoAndStop(1); about.gotoAndStop(1); } } btn_2.addEventListener(MouseEvent.CLICK, btnclick2); function btnclick2(ev:MouseEvent):void { medium_walk.gotoAndPlay(2); } stage.addEventListener(Event.ENTER_FRAME, detectCollision2); function detectCollision2(event:Event) { if (medium_walk.hitTestPoint(176.8,59,true)) { LB2.gotoAndStop(2); news.gotoAndStop(2); LB1.gotoAndStop(1); LB3.gotoAndStop(1); home.gotoAndStop(1); about.gotoAndStop(1); } } btn_3.addEventListener(MouseEvent.CLICK, btnclick3); function btnclick3(ev:MouseEvent):void { long_walk.gotoAndPlay(2); } stage.addEventListener(Event.ENTER_FRAME, detectCollision3); function detectCollision3(event:Event) { if (long_walk.hitTestPoint(280.8,59,true)) { LB3.gotoAndStop(2); about.gotoAndStop(2); LB1.gotoAndStop(1); LB2.gotoAndStop(1); news.gotoAndStop(1); home.gotoAndStop(1); } }
Ako môžete vidieť script sa opakuje pre všetky tlačidlá rovnako. Vysvetlím ho na prvom tlačidle. Riadok čislo jeden priradí funkciu prvému tlačidlu a spustí ju po kliknutí naň.
Táto funkcia spustí pohyb siluety ako možno vidieť na riadku 3. Riadky 5-15 sú funkciou pre detekciu kolízie siluety a určitého bodu na scéne. V tomto prípade je tento bod na spodku prvého lanka.
Potom ako movieclip so siluetou prejde týmto bodom, táto funkcia zapne žiarovku číslo jeden a vypne všetky ostatné ak niektorá znich svietila. To isté sa stane s text movieclipmi. Samozrejme ak chcete
aby menu fungovalo tak ako má, treba pridať ešte niaky script na presmerovanie na požadovanú stránku či frame scény pre každé tlačidlo.
|