Flash menu u html-u

Ponukan mnogobrojnim uputima kako napraviti flash menu u html-u, a da ostane oznaceno ono na sto smo kliknuli makar se taj isti menu ponovo otvori (reloada) u novoj html stranici napraviti cu ovaj tutorijal. Pokazari cu Vam dva primjera - flash menu sa FlashVars i flash menu sa SharedObjects. Svaki od njih ima prednosti i nedostataka.

Prvi primjer je flash menu sa FlashVars. Temu FlashVars sam vec obradio - pogledajte tu. Klikom na sliku otvoriti ce vam se primjer.
Flash menu sa FlashVars



Download Source mozete skinuti ovdje Cool

Nedostatak menija sa FlashVars je to sto moramo intervenirati u html kod. Prednost je jednostavan Actionscript i ispravno prikazivanje menija i kad se klikne u browseru na dugmic Back odnosno Next.
Poceti cu sa Flash dijelom, a na kraju cu se osvrnuti na html dio. Otvorite Adobe Flash i nacrtajte oblik jednog dugmica u normalnom stanju (kad nije oznacen). U mom slucaju to izgleda ovako:
Flash menu sa FlashVars - crtanje dugmica
Selektirajte nacrtano i stisnite F8 (Convert to Symbol). Odaberite MovieClip i imenujte ga (rubrika Name) - mom slucaju to je dugmic1. Stinite OK. Dvostrukim klikom na nacrtano ulazite u taj MovieClip. Stisnite F6 (new Keyframe) tri puta tako da dobijete 4 framea. U svakom tom promijenite izgled dugmica jer ce svaki freme biti jedan polozaj:

  • frame 1 - normalan neoznacen polozaj
  • frame 2 - polozaj kada predemo misem preko dugmica
  • frame 3 - polozaj kada kliknemo na dugmic (ali samo onaj trenutak dok je dugmic kliknut misem)
  • frame 4 - oznacen polozaj dugmica tj. dugmic je selektiran

Flash menu sa FlashVars - frameovi

Klikom na svaki od tih frameova (1 do 4) postavite Frame name (upisuje se u Properties prozoru u donjem lijevom uglu -default mjesto) u:

  • frame 1 - normal_frame
  • frame 2 - roll_frame
  • frame 3 - press_frame
  • frame 4 - selekt_frame

Ako ste ispravno unijeli trebalo bi izgledati ovako:

Flash menu sa FlashVars - imenovanje frameova

Gotovi smo sa ovim dijelom. Napravite novi Layer: Insert>Timeline>Layer. Kliknite na prvi frame tog layera i otvorite Actionscript konzolu (tipka F9). Upisite stop(); Gotovi smo sa ovim layerom.
Napravite novi layer. Na njemu napisite text dugmica. U mom primjeru to je VIJESTI. Gotov je i ovaj layer.
Ponovo napravite novi layer. Kopirajte grafiku dugmica iz prvog layera u ovaj layer (Paste in place). Zabiljezite tu kopirano grafiku i pretvorite je u MovieClip (tipka F8). Postavite u Properties prozoru Color na Alpha 0%. otidite na frame 4 tog istog layera i izbrisite taj 4. frame - desni klik>Remove Frames. Pitate se zasto? Zato da bi onemogucili klikanje na vec selektirani dugmic. Nakon svega ovoga trebalo bi izgledati ovako:
Flash menu sa FlashVars - pregled frameova i layera

Kliknite na dugmic i otvorite Actionsctipt konzolu. Upiste sljedece:

  • on(rollOver) {
    _parent.gotoAndStop(”roll_frame”);
    }
    on(rollOut) {
    _parent.gotoAndStop(”normal_frame”);
    }
    on(press) {
    _parent.gotoAndStop(”press_frame”);
    }
    on(release) {
    getURL(”vijesti.html”);
    }

Otidite u Library (ako ga ne vidite otvorite ga sa CTRL+L). Desni klikn na dugmic1 i odaberite Duplicate. Promijenite Name u dugmic2. Tako napravite i za dugmic 3 i 4. Kad ste gotovi dvostrukim klikom na te nove dugmice (dugmic2, dugmic3, dugmic4) udite u taj MovieClip i promijenti Actionscript - tj. predzadnji redak promijenite u getURL(”sport.html”); za dugmic2, getURL(”novac.html”); za dugmic3, getURL(”vrijeme.html”); za dugmic4.

Kad ste gotovi s time odvucite dugmice iz Librarya na Stage tako da formiraju menu. Na prvoj slici gore vidite kako izgleda moj meni. Postavite svakom dugmicu na Stageu Instance name - dugmic1, dugmic2, dugmic3, dugmic4. Jeste?

Jos malo pa smo gotovi!

Kliknite bilo gdje na stageu ali ne na dugmice. Otvorite Actionscript konzolu (F9). Upisite:

  • _root[”dugmic”+_root.selektiraj].gotoAndStop(”selekt_frame”);

Ovaj kod moram objasniti jer je zapravo on pokretac svega. Dakle ovim kodom dugmic koji je odreden varijablom _root.selektiraj (koju cemo poslati putem FlashVars-a preko html) ce otici na frame koji se zove “selekt_frame”. Zato je potrebno postaviti instance name na svaki dugmic (dugmic1 do dugmic4) i imenovati svaki frame u dugmicu.

Idemo na html kod. Ubacite flash menu u html. Html kod koji se odnosi na flash bi trebao po defaultu izgledati nekako ovako:

  • <object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0″ width=”450″ height=”50″>
    <param name=”movie” value=”meni_sa_FV.swf” />
    <param name=”quality” value=”high” />
    <embed src=”meni_sa_FV.swf” quality=”high” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”450″ height=”50″></embed>
    </object>

Vi samo morate dodati plavi dio (za vijesti selektiraj=1, za sport selektiraj=2, za novac selektiraj=3 i za vrijeme selektiraj=4)

  • <object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0″ width=”450″ height=”50″>
    <param name=”movie” value=”meni_sa_FV.swf” />
    <param name=”quality” value=”high” />
    <PARAM NAME=FlashVars value=”selektiraj=1″>
    <embed src=”meni_sa_FV.swf” quality=”high” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”450″ height=”50″ FlashVars=”selektiraj=1″></embed>
    </object>

Pogledajte moj primjer pa ce vam sve biti jasno


Ako pak koristite SWFObject tada je posao jos laksi. Trebate samo dodati ovu liniju u html unutar skripte za SWFObject :

  • so.addVariable(”selektiraj”, “1″);

Da rezimiram. Kad koristite menu sa FlashVarsom morate na svaku html stranicu postaviti kod koji vidite gore (plavi dio) i mijenjati vrijednost selektiraj u ovisnosti na kojoj stranici upisujete kod. Ovo je i jedini nedostatak ovakve metode i mislim da je bolja ako je moguce unositi ove dijelove u kod.
Na sljedecoj strani pogledajte flash menu sa SharedObjects.

Pages: 1 2

Komentari

Verification Image

Unesite slova sa slike.