Dinamikus gombok cserélhető effekttel és paranccsal
feltöltve: 2004.06.03 | szerző: chrss | olvasva: 19653 alkalommal
Bár egyre nagyobb az oldalak mérete kb-ban azért érdemes olyan dinamikus gombokat készíteni amelyeket könnyen paraméterezhetünk. Az alábbi segédletben ennek a fortélyait próbálom bemutatni. A végeredménynek itt ez a 8kb-os swf:
A cél az, hogy olyan gombot hozzunk létre, amelynek megadjuk, hogy mi legyen a szöveg rajta és az, hogy mi történjen, ha lenyomjuk az adott gombot.
1) Először hozzuk létre magát a gombot, amely egy moziklip objektum lesz, nem gomb. A moziklipben négy darab layer lesz.
Az alsó layer az alap. Ezen van a gomb fix része, jelen esetben egy 250 pixel széles és 17 pixel magas, fehér téglalap.
Az "anim" layeren van az animáció amely szintén egy moziklip, hogy ez mit tartalmaz, azt később vesézzük ki.
A szöveg layeren van a gomb szövege, amely egy dinamikus szövegmező, a font pedig egy pixelfont.
A gomb layeren található maga a gomb, amely érzékeli az egérmőveleteket.
2) Akkor menjünk sorban a layereken. Az "alap" layeren nincs semmi extra.
Viszont az "anim"-on már van egy moziklip szimbólumunk. A mérete ugyanakkora, mint az alap téglalapé, tehát 250x17 pixel. A neve legyen: "rollovereffect". Figyeljünk arra hogy a regisztrációs pontja bal oldalt legyen, erre az animáció miatt van szükség. A moziklip 3 darab frame-et és két layert fog tartalmazni. Az "also" layer tartalmaz egy moziklippet, amely regisztrációs pontja a bal felső sarokban van. A tint tulajdonsággal adunk neki egy színt és elnevezzük "animacio"-nak
Az első frame-ben értéket adunk a "mekkora" változónak: mekkora=0
Ez a változó fogja meghatározni az "animacio" moziklip szélességét.
A második frame üres, a harmadikban az alábbi kód van: if (mekkora<animacio._width){
animacio._width-=(animacio._width-mekkora)/3
}
if (mekkora>animacio._width){
animacio._width+=(mekkora-animacio._width)/3
}
gotoAndPlay(_currentframe-1)
A kód ismerős lehet a dinamikus mozgások segédletekből. Ez a kód változatja az "animacio" nevő movieclip szélességét, ha annak a mérete eltér a "mekkora" változó értékétől. Ezzel a rollover effektünk már meg is van. Mivel az "animacio" nevő moziklippünknek a nyitó szélessége 250 pixel, így amikor a gomb betöltődött a fő idősíkra akkor egy nyitó animáció is történni fog.
3) A "szoveg" layer-re egy dinamikus szövegmezőt raktunk. A Var: mezőbe adjunk meg egy változónevet, jelen esetben ez "gombszoveg". Így "gombszoveg" változó értékét fogja a dinamikus szövegmező megjeleníteni. Jelen esetben pixelfonttal dolgozunk, így ügyeljünk arra, hogy a szövegmező és a kész gomb is egész koordinátákon legyen.
Ne felejtsük el a Character beállításainál az Embed Font Outlinest All Characters-re állítani. Különben kellemetlen meglepetésekben lehet részünk, ha nincs meg az adott font azon a gépen, ahol nézik az oldalt.
4) A "gomb" layeren található az "átlátszó gombunk" amely nem tartalmaz semmi mást, csak a hit részében egy 250x17 pixeles, fekete téglalapot. Így a gombunk semmiféle animációt nem csinál, csak az egérműveleteket érzékeli.
A gomb actionscript kódja a következő: // Ha fölötte van az egér akkor a "rollovereffekt" moziklipben a "mekkora" vátozó értékét 230-ra módosítjuk. on (rollOver) {
rollovereffekt.mekkora = 230;
} // Ha elvisszük az egeret a gombról, akkor a "rollovereffekt" movieclipben a "mekkora" vátozó értékét 0-ra módosítjuk. A releaseOutside és DragOut azért kell, hogy levédjünk minden lehetőséget az egérrel kapcsolatban. on (releaseOutside, rollOut, dragOut) {
rollovereffekt.mekkora = 0;
} // Ha lenyomtuk és felengedtük az egérgombot (még ha felengedés a gombon kivül történik is), akkor meghívja a gomblenyomás eljárást a "melyik" paraméterrel. on (release,releaseOutside){
_root.gomblenyomas(melyik)
}
És gombunk már mőködik is...
5) Már majdnem megvagyunk, csak meg kell írni az eljárást, és értéket adni a gombunkban lévő változóknak.
Kezdjük az értékadással, amely igen egyszerő.
Ezt írjuk a gomb actionscript-jébe: onClipEvent (load) {
this.gombszoveg = "elsogomb neve jon ide";
this.melyik=1
}
Ugye a "gombszoveg" változó az, amit a dinamikus szövegdobozunk megjelenít. A "melyik" pedig az a paraméter, amellyel meghívjuk az eljárásunkat, ha lenyomták a gombot. Ha több gombot akarunk, mint ahogy a letölthető fla-ban is van, akkor csak duplikáljuk a gombot és a változóknak más értéket adunk.
És most jöjjön az eljárásunk, amelyet a root-ban hozunk létre. Preloader-t nem tettem hozzá a mérete miatt.
function gomblenyomas(mitortenjen){
switch (mitortenjen) {
case 1: lenyomott="Az elso gombot nyomtad le.";break;
case 2: lenyomott="A masodik gombot nyomtad le.";break;
case 3: lenyomott="A harmadik gombot nyomtad le.";break;
case 4: lenyomott="A negyedik gombot nyomtad le.";break;
case 5: lenyomott="Az otodik gombot nyomtad le.";break;
case 6: lenyomott="A hatodik gombot nyomtad le.";break;
case 7: lenyomott="A hetedik gombot nyomtad le.";break;
case 8: lenyomott="A nyolcadik gombot nyomtad le.";break;
}
}
Ezt az eljárást fogjuk meghívni, amikor a gombot valaki lenyomja. Az eljárás nem csinál mást, mint egy változónak értéket ad attól függően, hogy mi a bemenő paraméter.
És, hogy lássuk az eredményt létrehozunk a root-ban egy dimamikus szövegdobozt melynek a Var: mezőjében megadjuk hogy "lenyomott" változó értékét.
Tehát sikerült írnunk egy olyan dinamikus gombot, amelynek az animációját bármikor könnyedén megváltoztathatjuk, és hogy mi történjen a gomb lenyomásakor azt szintén igen egyszerű módosítani.
XML és duplicatemovieclip alkalmazásával teljesen dinamikus adatbázissal együtt működő weboldalakat hozhatunk létre. A dinamikus gombjaink már megvannak hozzá. :)