. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .




 
 
SEGÉDLETEK Navigáció, Scroll

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

 
 
 

© Devnet.hu. A segédletek semmilyen formában nem másolhatók, publikálhatók a Devnet.hu és a szerzők közös írásos engedélye nélkül.
 
. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .