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




 
 
SEGÉDLETEK Navigáció, Scroll

Gombok egyedi egérmutatóval és effektussal
  feltöltve: 2005.11.02 | szerző: grizzly | olvasva: 15863 alkalommal

 
 

Ez a segédlet azt mutatja be egyszerűen, hogy hogyan lehet 1-2 az egérrel és mozgásával kapcsolatos trükköt megvalósítani. Aki még nem látott Actionscript kódot, de mégis idetévedt, az ne menjen el, megpróbálom úgy leírni a témát, hogy tényleg érthető legyen a kezdőbbeknek is.

Nos, a segédlet tulajdonképpen 3 viszonylag egyszerű dolgot mutat be: Az első: van 3 db gomb,az egér föléér az egyiknek (ezt hívják rollover állapotnak), és a gombnak a színe fokozatosan elsötétedik. A második: megjelenik egy kis téglalap ebben a rollover állapotban, amin egy kis szöveg olvasható, attól függően, hogy melyik gombra vittük az egeret. A harmadik pedig annyi, hogy rajzolunk egy egeret és ezután ezt használjuk egérnek.

Na, lássuk is, hogy miről van szó:

A flash felállítása a programozás előtt

Nyissunk egy új flash mozit, melynek a mérete: 300*300, az FPS (Frame per second) legyen 35. 2 db layer-re lesz szükség, így készitsünk még 1-et, és nevezzük el az alsót: gomboknak, a felsőt pedig as-nek. Nem nehéz kitalálni hova mi fog kerülni. Az alsó layer legyen kijelölve, és rajzoljunk egy gombot, majd ezt konvertáljuk Movie Clip-pé (mc). A képen 3 gombot láttok, ebből elég lesz egyenlőre egy is:

Ezután nyissuk meg a könyvtárat, és az immár belekerült gombot szerkesszük (jobb gomb->edit). Itt is csináljunk a meglévő layer fölé egy másikat, az alsó neve: graf, a felsőé txt, de az elnevezés nem számít csak segít kiigazodni. Az alsó rétegen csináljunk egy tween-t, ami lehet akármi, én egy egyszerű sötétedést választottam, a felső rétegen pedig legyen egy szövegdoboz (dinamikus, legyen beágyazva a font(properties paletta->character(flash 8-ban embed)-> lower case, és numeral-ra lesz szükség)).

A szövegdobozra rákattintva a properties palettán írjuk be a variables-be, hogy felirat. Ezzel tulajdonképpen azt érjük el, hogy az ebben az mc-ben előforduló felirat nevű változót mindig látni fogjuk. Fontos, hogy a szövegdoboz is odáig érjen mint az alsó tween. Amit most készitettünk az lesz a gomb mozgása oda-visszafelé attól függően, hogy rajta van-e az egér.

Na most lépjünk vissza a Stage-re és a könyvtárból húzzunk még 2 db gombot a színpadra. A gombok instance nevei (ezek a properties palettán vannak, és arra jók, hogy actionscriptből ezen a néven lehet rájuk hivatkozni): g1_btn, g2_btn, g3_btn. Ne zavarjon minket, hogy a gombok valójában nem gombok, hanem mc-k, és a nevük mégiscsak btn, ez csak azért van, hogy a funkcióját ismerjük. A gyakorlatban sokszor inkább mc-ket érdemes használni gombok helyett.

A következő lépés annak a kis effektnek a létrehozása, ami akkor jelenik meg, ha a gombok fölé visszük az egeret. A Stage-en vagyunk tehát-> Insert-> New Symbol->Movie Clip. Most megintcsak 2 layerre lesz szükség így alkossunk még egyet. Az alsó neve: tégla, a felsőé:txt vagy szöveg is lehet. Rajzoljunk egy téglalapot kerekített sarkokkal mondjuk. Rakjuk ezt a 10.képkockára kb, és hozzunk létre egy motion tweent az egyesből a 10-esbe, majd a 10esből a 20asig is egyet. Az elsőnek a méretét állítsuk be 1,1 -re ( Width(szélesség)=1,Height(magasság)=1). Így azt az érzetet keltjük, hogy a semmiből előjön egy téglalap. A 10.től a 20.képkockáig semmi ne történjen ezen a layeren. A fenti txt layeren a 10.képkockától a 20.ig legyen egy szövegdoboz, melynek effektfelirat legyen a változója (properties->variables). A 20.-ig a 10.képkockától egy motion tween-t hozunk létre, mégpedig úgy hogy a 10.-en az alpha =0, a 20.on az alpha = 100. Igy a szövegünk is fokozatosan fog előtűnni. A szöveget itt is be kell ágyazni!

Az utolsó dolog egy egér megrajzolása, ez legyen tetszőleges, a lényeg, hogy a funkciónak megfeleljen, akár lehet benne egyszerűbb mozgás is. Az mcben a 0. x és y koordináta lesz az, ahol a kattintás, és az egyéb egér-események érzékelődni fognak, erre kell figyelni.

Mostmár csak annyi dolgunk van, hogy belinkeljük a kellékeket, s így elérhetővé tesszük azokat a programozás számára:

A most elkészített egeret linkage-eljük 'eger' néven: ezt úgy tudjuk megtenni, hogy a libraryt megnyitjuk (ctrl-L), majd jobb gomb a linkage-elendő mc-re (jelen esetben az egérre), és ott az Identifier-hez beírjuk, hogy 'eger'. Ugyanezt megtesszük az effekt mc-vel-> identifier: 'effekt'.

Actionscript!

Azt kell mondjam, hogy az unalmas résznek vége, végre jön az izgalmas programozás. Aki lusta az kupipásztézza be az alábbi kódot a Stage 'as' nevű rétegén az első (és egyetlen) képkockára, és gondolja azt hogy ő most megcsinálta a feladatot, és mivel kész, nem is kell megértenie hogy miért írtam azt, amit...

//GOMBOK LEÁLLÍTÁSA
gombok = new Array(g1_btn, g2_btn, g3_btn);
for (var i = 0; i<gombok.length; i++) {
gombok[i].stop();
}
//FELIRATOZÁS
for (i=1; i<4; i++) {
this["g"+String(i)+"_btn"].felirat = "gomb"+i;
this["g"+String(i)+"_btn"].sorszam = i;
this["g"+String(i)+"_btn"].onRollOver = function() {
//ROLLOVER
this.onEnterFrame = function() {
if (this._currentframe == this._totalframes) {
delete this.onEnterFrame;
} else {
this.nextFrame();
}
};
effektezes(this.sorszam, "rollover");
};
this["g"+String(i)+"_btn"].onRollOut = function() {
//ROLLOUT
effektezes(this.sorszam, "rollout");
this.onEnterFrame = function() {
if (this._currentframe == 1) {
delete this.onEnterFrame;
} else {
this.prevFrame();
}
};
};
}
onMouseMove = function () {
effekt._x = _xmouse+40;
effekt._y = _ymouse+40;
};
e = this.attachMovie("effekt", "effekt", this.getNextHighestDepth());
//EFFEKT MC
e.stop();
effekt._visible = false;
function effektezes(valtozo, v2) {
//EFFEKTEZÉS FÜGGVÉNY
effekt._visible = true;
effekt.effektfelirat = "Ez itt a "+valtozo+".gomb.";
effekt.onEnterFrame = function() {
if (v2 == "rollover") {
if (this._currentframe != this._totalframes) {
this.nextFrame();
} else {
delete this.onEnterFrame;
}
}
if (v2 == "rollout") {
if (this._currentframe != 1) {
this.prevFrame();
} else {
delete this.onEnterFrame;
this._visible = false;
}
}
};
}
//EGÉR BEÁLLÍTÁSA
Mouse.hide();
attachMovie("eger", "eger", this.getNextHighestDepth());
eger.onMouseMove = function() {
this._x = _xmouse;
this._y = _ymouse;
};
//EGÉR LENYOMÁSÁRA ELTÜNTETÉS
onMouseDown = function () {
Mouse.hide();
};

...de aki okos az tartson velem, és ha nem érti értse meg, hogy hogyan is működik ez az egész. Egyáltalán nem bonyolult.:)

Boncoljuk végig az egészet, és minden világos lesz:

gombok = new Array(g1_btn, g2_btn, g3_btn);
for (var i=0; i<gombok.length; i++) {
gombok[i].stop();
}

Itt semmi nem történik csak leállítjuk az összes gombot, mivel azokra nem tettünk stop()-ot.Ha ezt nem tennénk, akkor folyamatosan újrajátszaná magát minden gomb. Megtehetnénk úgy is hogy egyenként beírjuk, hogy g1_btn.stop(), g2_btn.stop(), de így most egy kicsit gyakoroljuk a tömbök kezelését for ciklussal. A lényeg a következő: létrehozunk egy tömböt gombok néven, melynek elemei:g1_btn, g2_btn, g3_btn. A tömb 0.elemmel kezdődik, tehát a g2btn az az első eleme a tömbnek. Utána lefutattunk egy for ciklust. A for ciklus lényege:

for(valtozo=kezdoertek;valtozo< ertek; valtozo+=novekedes)

Ez azt jelenti, hogy létrehozunk egy valtozo-t jelen esetünkben ennek a neve i, ezt deklaráljuk, vagyis megadunk neki egy kezdőértéket. Ezzel az érékkel keződik a for ciklus, utána megnézi, hogy ez az érték teljesíti-e a következő feltételt-> esetünkben i<gombok.length, ez még teljesül, hiszen i=0. A legutolsó részben pedig megadjuk az i növekedési mértékét: i++. Ez egyenlő ezzel a kifejezéssel: i+=1, vagyis i-hez hozzáadunk egyet, minden ciklusban. A kezdőérték megadása kivételével a dolgok ismétlődnek, mindig ellenőrzi a ciklus, hogy teljesítve van e a feltétel, és hogyha igen, akkor végrehajta a { és a } jelek közti utasításokat, valamint hozzáad egyet i-hez. Esetünk tipikus példája a tömbok for ciklusokkal való kezelésének, vagyis a kezdőelemtől kezdve (ez a 0.), végrehajtunk egy utasítást mindegyik elemen. Mivel a tömb hosszúsága (gombok.length) a feltétel, így mindegyik elemen végrehajtódik a stop() utasítás. Gondoljunk csak bele: a mi esetünkben a tömb tagjainak száma 3 mivel 3 gomb van. Viszont az utolsó tag sorszáma csak 2 hiszen 0-tól kezdődik az elemek sorszáma.

for (i=1; i<4; i++) {
this["g"+String(i)+"_btn"].felirat = "gomb"+i;
this["g"+String(i)+"_btn"].sorszam = i;
this["g"+String(i)+"_btn"].onRollOver = function() {

Ebben a részben is for ciklust használunk, viszont nem tömböt kezelünk vele, hanem több gombot. Mivel a gombok nevei: g1_btn, g2_btn, g3_btn, így miért is ismételnék ugyanazt a rollover utasítást mindegyik gomb-bal amikor a gombok neveiben van egy szám, ami növekszik egyesével. mivel az első gomb-ban 1-es van az utolsóban 3-mas így i=0;i<4-t kell használnunk a for ciklusban hiszen ugye az első érték 1 az utolsó pedig 3, ami kisebb mint 4. Természetes, hogy i++-t írunk a ciklus növekedésére, hiszen egyesével nőnek a számok. Remélem ez így érthető:)

Minden gombba létrehozunk egy sorszam nevű változót, ami a gomb sorszáma lesz (pl g1_btn-nak 1 lesz a sorszáma). Hogy erre miért van szükség? Mert a for ciklus hatásköre nem terjed ki a rollOver állapotra, vagyis amikor az egeret a gomb fölé visszük. Az onRollOver azt jelenti hogy végrehajtódik minden, ami a 2 kapcsos zárójel között van, hogyha a gomb fölé ér az egér. Nézzük meg, hogy mi is ez:

this.onEnterFrame = function() {
if (this._currentframe == this._totalframes) {
delete this.onEnterFrame;
} else {
this.nextFrame();
}
};

A this remek módszer arra, hogy ne kelljen mégegyszer kiírni a nevet, hanem a RollOver-en belül már ezzel is hivatkozhatunk a gombra magára. Az onEnterFrame eseménykezelő egy népszerű módszer arra, hogy folyamatosan lejátszódó mozgásokat mutassunk flashben.Meg lehet hívni függvényeket adott időközönként is, de itt sokkal egyszerűbben az adott mc-t vizsgáljuk meg, hogy mi történik ha belépünk egy újabb képkockába.Észrevehetjük, hogy stop() van az mc-ken de ennek ellenére az onEnterFrame lefut! Megnézi, hogy this.-nek vagyis annak a gombnak, amire épp rávittük az egeret, a jelenlegi képkockája egyenlő-e az összes képkockák számával, vagyis, hogy az utolsó képkockán áll-e az adott mc. Hogyha igen akkor töröljük az onEnterFrame-et, hogy ne egye fölöslegesen a CPU-nkat. else, vagyis hogyha az if-hez rendelt feltétel nem teljesül, akkor eggyel tovább léptetjük az mc-t, ezt így is írhattuk volna: this.gotoAndStop(this._currentframe+1), viszont ennek van egy egyszerűbb formája, a this.nextFrame().

effektezes(this.sorszam, "rollover");
};

Meghívjuk az effektezés nevű függvényt, az adott sorszámmal, és a "rollover" sztring-gel (vagyis szöveggel). A függvények egyik definiálási módja (ezt névtelen függvényeknek nevezzük):

FuggvenyNev = function (valtozok) {}

vagy:

function FuggvenyNev(valtozok) {}

Meghívni, vagyis végrehajtatni pedig leggyakrabban így:

FuggvenyNev(valtozok)

Használható ez a függvénymeghívás is:

Esemény = FuggvenyNev

Ilyenkor az esemény bekövetkeztekor (pl onRelease) hajtódik végre a függvény, és nincs () a függvény neve után. Mi ezekből most csak azt használjuk, hogy egyszerűen meghívunk egy függvényt, melynek neve effektezes, 2 változóval. Ezekre később kitérünk, hogy mi lesz a jelentősége.

this["g"+String(i)+"_btn"].onRollOut = function() {
//ROLLOUT
effektezes(this.sorszam, "rollout");
this.onEnterFrame = function() {
if (this._currentframe == 1) {
delete this.onEnterFrame;
} else {
this.prevFrame();
}
};
};
}

Ezek a sorok ugyanazok, mint az onRollOver állapotban lejátszódóak, azzal a különbséggel, hogy nextFrame() helyett PrevFrame() van, vagyis visszafele "tekerjük" az mc-t, és azt vizsgáljuk minden egyes képkockába (frame-be) való belépéskor, hogy az adott mc már elérte-e az egyes képkockát, vagyis teljesen visszaállt-e már az eredeti állapotába.

onMouseMove = function () {
effekt._x = _xmouse+40;
effekt._y = _ymouse+40;
};

Itt csak beállítjuk, hogy az effekt x és y koordinátája az egér x és y koordinátájától +40 távolságra helyezkedjen el, vagyis, hogy egy kicsit alrébb toljuk az effektet. Az onMouseMove azt jelenti, hogy mindig lefut a kapcsoszárójelek közti rész, hogyha megmozdítjuk az egeret. Fölösleges lenne minden egyes képkockafrissítésnél (onEnterFrame) beállítani az effekt nevű mc x és y koordinátáit, hiszen csak akkor változnak ha mozog az egér.

e = this.attachMovie("effekt", "effekt", this.getNextHighestDepth());

Amit még az elején linkage-eltünk effekt azonosító névvel, azt itt most csatoljuk, és egy változóhóz rendeljük. Igazából nem kötezelő változóhoz rendelni, de így kétféleképpen hivatkozhatunk rá: vagy a változó nevével, vagy pedig az attachMovie() metódusban megadott 'effekt' névvel. Az attachMovie() szintakszisa a következő:

attachMovie(mit,milyennéven,milyen mélységre)

A mit azt jelenti, hogy mi a linkage neve az adott mc-nek, a milyennéven azt jelenti, hogy adunk egy nevet ami ezek után a már csatolt mc neve lesz, a mélység pedig az, hogy milyen mélységbe helyezzük el az mc-t. Érdemes a this.getNextHighestDepth()-et alkalmazni ilyenkor, hiszen így mindig a már meglévő mélységek felé rakja az mc-t így az mindenképpen látszani fog.

e.stop();
effekt._visible = false;

Itt látható mind a két hivatkozási mód a frissen csatolt mc-re. Azért állítjuk a ._visible értékét false-ra, hogy az láthatatlan legyen. Emlékezzünk vissza, amikor a tween-t csináltuk az effekt mc-ben: az első képkockán egy 1x1-es nagyságú kiskocka van. Ha nem lenne láthatatlan, akkor egy kis pontnyi szürke bigyó keserítené meg a látványt. (Megoldható úgyis a a probléma, hogy az effekt mc-ben az első képkocka üres). A stop() nem szorul magyarázkodásra...ugye?:)

function effektezes(valtozo, v2) {

Itt hozzuk létre az effektezes függvényt, 2 változóval (valtozo és v2). Egy függvényben érdemes változókat használni, hiszen így jól le tudjuk rövidíteni a scriptet. Gondoljunk csak bele: attacholni akarunk sok sok mc-t. Akkor nem ezt fogjuk írni, hogy:

this.attachMovie("mc1", "mc1", this.getNextHighestDepth())

this.attachMovie("mc2", "mc2", this.getNextHighestDepth())

stb, hanem egyszerűen létrehozunk egy függvényt, egy változóval, amely változó megmutatja, hogy mit akarunk csatolni. Tehát ennél a példánál maradva:

function attacholas(mit) {

this.attachMovie(mit,mit,this.getNextHighestDepth())

}

attacholas("mc1")

attacholas("mc2")

Mennyivel egyszerűbb nem?

A mi scriptünket folytatva:

effekt._visible = true;
effekt.effektfelirat = "Ez itt a "+valtozo+".gomb.";

Az effekt láthatóságát igazra változtattuk, vagyis amikor meghívódik ez a függvény, akkor az effekt nevű mc látható lesz, és a benne lévő effektfelirat változó ezt kapja: "Ez itt a "+valtozo+".gomb..stb" A lényeg az, hogy a valtozo az, amit a függvény meghívásakor adunk meg (emlékezzünk vissza:effektezes(this.sorszam, "rollover");) Tehát a sorszámot behelyettesíti. Igy a második gomb esetében a következő lesz a felirat: Ez itt a második gomb. Mivel van az effekt nevű mc-n belül egy dinamikus szövegdoboz effektfelirat változóval, így az meg is kapja a megfelelő értéket.

effekt.onEnterFrame = function() {
if (v2 == "rollover") {
if (this._currentframe != this._totalframes) {
this.nextFrame();
} else {
delete this.onEnterFrame;
}
}
if (v2 == "rollout") {
if (this._currentframe != 1) {
this.prevFrame();
} else {
delete this.onEnterFrame;
this._visible = false;
}
}

Azt hiszem ez nem szorul sok magyarázatra. Eldönti az elején, hogy előre vagy visszafele kell tekerni az effekt-et, és a már fentebb említett módon onEnterFrame, nextFrame(), és prevFrame() segítségével ezt el is végzi. Természetesen töröljük az onEnterFrame-et a kellő időben, hogy az ne terhelje fölöslegesen a processzorunkat. Amit még jó, hogy megjegyzünk, hogy false-ra állítjuk az effekt láthatóságát (._visible), pont a már korábban említett ok miatt: hogy ne legyen zavaró az első képkocáján lévő szürke pötty.

Mouse.hide();
attachMovie("eger", "eger", this.getNextHighestDepth());
eger.onMouseMove = function() {
this._x = _xmouse;
this._y = _ymouse;
};

Az utolsó sorok: elrejtjük az egeret (Mouse.hide(), újra előhozni a Mouse.show()-val lehetne. Csatoljuk az egeret úgy mint korábban az effektet csatoltuk. onMouseMove-ot használnuk ismét, viszont ezt most az eger nevű mc-hez rendeljük. Hogy miért? Mert ha nem rendelnénk semmihez, akkor ütközne a már korábban használt onMouseMove-val és így amint az egeret a gombok felé vinnénk, már nem követné az _x és _ymouse-t a csatolt, általunk rajzolt egér.

onMouseDown = function () {
Mouse.hide();
};

A végére még be kellett szúrni ezt (minden egyes egérkattintásra elrejti az egeret, hiszen hogyha valaki jobb klikkel az swf-en, akkor enélkül visszajön az eredeti egér).

Nem tudom mennyire látszik/sikerült, de próbáltam mindent az alapoktól kezdve magyarázni, természetesen ez csak 3 viszonylag egyszerű dolog az egerezéssel kapcsolatban. Akinek valami nem megy, vagy van ötlete ennek a segédletnek a folytatására az szóljon!

 
 
 
 

© 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 >>> : .. .