Interaktív gombok tömegesen

Ez a segédlet arra hivatott, hogy megismertesse, hogy tudsz olyan Flash animációt létrehozni, ami több ugyanolyan MovieClipből áll és mindegyik ugyanolyan tulajdonságokkal rendelkezik, de nem hozol kézzel létre semmit.

Ilyenünk lesz

Első lépésként létrehozunk egy üres MovieClip (MC) objektumot:

1

_root.createEmptyMovieClip ("ball_mc", 1);

Ezek után létrehozunk ebben az MC-ben egy alakzatot:

1
2
3
4
5
6
7
8
9

MovieClip.prototype.circleDraw=function(x, y, radius, cWidth, innerCol, outerCol){
this.lineStyle(radius,otherCol,100)
this.moveTo(x,y)
this.lineTo(x,y+.15)
this.lineStyle(radius-cWidth,innerCol,100)
this.moveTo(x,y)
this.lineTo(x,y+.15)
}
ball_mc.circleDraw(0,0,30,0,0x000000)

vagy létrehozhatunk egy egyszerűbbet is

1
2
3
4
5
6

ball_mc.beginFill (0x000000);
ball_mc.lineTo (29, 0);
ball_mc.lineTo (29, 29);
ball_mc.lineTo (0, 29);
ball_mc.lineTo (0, 0);
ball_mc.endFill ();

Ezt eltüntetjük mivel erre nem lesz szükségünk, valamint beállítjuk a b változót ami a mélység és a számozása a duplikált MC-nek.

1
2

ball_mc._visible=false
b = 2;

Két ciklusban duplikáljuk a létrehozott MC-t. (Tipikus mátrix készítés for ciklussal.)
Mindegyiknek beállítjuk az x és az y koordinátáját, és aktíváljuk a „fadeInOut()” függvényt minden MC-re (amit később elmagyarázok).

1
2
3
4
5
6
7
8
9

for (i=0; i<9; i++) {
for (j=1; j<10; j++) {
ball_mc.duplicateMovieClip ("ball"+(b), b);
this["ball"+(b)]._x = 30*j;
this["ball"+(b)]._y = 30*i;
this["ball"+(b)].fadeInOut ();
b++;
}
}

Az eseménykezelő prototype meghatározása:

1
2
3
4
5
6
7
8
9
10
11
12

MovieClip.prototype.fadeInOut = function () {
this.onRollOver = function () {
this.iner = true;
if (this.iner) {
this.setid = setInterval (this, "fade", 30);
}
};
 
this.onPress = function () {
getURL("http://","_blank")
};
};

És végül a fade esemény függvénye (prototype) ami egyértelmű, ha mégsem kérdezzetek:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

MovieClip.prototype.fade = function () {
if ((this._alpha>10) && (this.iner)) {
this._alpha -= 5;
if (this._alpha<12) {
this.iner = false;
}
} else if (this._alpha<100) {
this._alpha += 5;
if (this._alpha == 100) {
this.iner = true;
clearInterval (this.setid);
}
}
};

A teljes kód:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

//kifédeljük majd vissza
 
MovieClip.prototype.fade = function () {
if ((this._alpha>10) && (this.iner)) {
this._alpha -= 5;
if (this._alpha<12) {
this.iner = false;
}
} else if (this._alpha<100) {
this._alpha += 5;
if (this._alpha == 100) {
this.iner = true;
clearInterval (this.setid);
}
}
};
 
//Eseménykezelős prototype
 
MovieClip.prototype.fadeInOut = function () {
this.onRollOver = function () {
this.iner = true;
if (this.iner) {
this.setid = setInterval (this, "fade", 30);
}
};
 
//RollOver vége
 
this.onPress = function () {
getURL ("http://utazas.single-x.hu", "_blank");
};
};
MovieClip.prototype.circleDraw=function(x, y, radius, cWidth, innerCol, outerCol){
this.lineStyle(radius,otherCol,100)
this.moveTo(x,y)
this.lineTo(x,y+.15)
this.lineStyle(radius-cWidth,innerCol,100)
this.moveTo(x,y)
this.lineTo(x,y+.15)
}
 
//a duplikálandó mozi létrehozása
 
_root.createEmptyMovieClip ("ball_mc", 1);
ball_mc.circleDraw(0,0,30,0,0x000000)
 
/*ball_mc.beginFill (0x000000);
ball_mc.lineTo (29, 0);
ball_mc.lineTo (29, 29);
ball_mc.lineTo (0, 29);
ball_mc.lineTo (0, 0);
ball_mc.endFill ();*/
 
ball_mc._visible=false
 
//eltüntetjük az eredetit
 
b = 2;
 
//mélység és név számláló
//dupla ciklus a "mátrix" elkészítéséhez. Minden mozi külön szintre kerül és mindenmozinál aktíváljuk a fadeInOut tulajdonságát
 
for (i=0; i<9; i++) {
for (j=1; j<10; j++) {
ball_mc.duplicateMovieClip ("ball"+(b), b);
this["ball"+(b)]._x = 30*j;
this["ball"+(b)]._y = 30*i;
this["ball"+(b)].fadeInOut ();
b++;
}
}

Amennyiben kérdésetek lenne az elhangzottakkal kapcsolatban a Dodder.hu-n bármikor kérdezhettek.

Tutorial.hu Szerkesztőség
Tutorial.hu Szerkesztőség
http://www.dody.hu

KAPCSOLÓDÓ CIKKEKTÖBB A SZERZŐTŐL

5 HOZZÁSZÓLÁS

  1. Az interaktív gombokon töröm már jó ideje a búrámat, de nem tudtam kiokoskodni, hogy ez hogyan is működik, valamint, hogy milyen fájlt kell létrehozni. A történet a következő. Van egy gomb, normál állapotban. A második fázisra akkor vált, amikor az egérmutató fölé áll. A harmadik pedig akkor ha ténylegesen rá is kattint valaki. Én egy egyszerűbbre gondoltam, hogy tudniilik gifként hozom létre a három képkockából álló gombot. A baj ezzel mindössze annyi, hogy nem tudom vezérelni, hogy csak akkor váltson a kettes kockára, amikor fölötte áll az egér, a harmadikra pedig megnyomáskor. Flash progim sajnos nincsen ((nem is futja rá), és nem is értem ezeknek a kódoknak az értelmezését. Nem tudom, hogy a gifet nem lehetne-e ilyen parancsokkal vezérelni. Esetleg úgy, hogy a három fázist három külön képként mentem el, és hol egyik jelenik meg, hol a másik.

    Erről szeretnék valamilyen egyszerűbb felvilágosítást kapni, ha egyáltalán létezik „egyszerű” megoldás.

  2. Hali
    Négy napja kapálok mindenfelé, de nem sikerül megfelelően működő fade out effektet szereznem/átírnom/szerkesztenem. …Persze találtam egy halomnyit, de egyszerűen nem tudtam jól alakalmazni őket. …vlm onExitFrame szerü dolgot keresek..

    vlm ilyesmit szeretnék elérni:
    http://www.ilovedust.com/

    és ez a pillanatnyi helyzet:
    http://sathrark.uw.hu/

    Üdv!
    R

  3. Helló Ricsi,

    Azthiszem te az onEnterFrame -et kicsit félreértetted. :)
    Ez csak azt takarja hogy minden alkalommal lefut a függvény amikor az adott frame lefut. Ami neked kell csak egy if függvény. :)
    Például:
    Ugye ráteszel egy mc-re egy onEnterFrame-et. Fade-in -nél az alpha 0-ról kezdődik és minden lefutáskor például egyet hozzáadsz (egy ideiglenes változóhoz). Közben csekkolod hogy ez a változó kisebb e mint 100 vagy 99 (flashmx-ben inkább 99 mert akkor transzformáláskor nincs bug) és eltávolítod az onEnterFrame-et. Így kész is a fade-in -ed.
    De ennél vannak sokkal szebb megoldások is. Ha idő, azaz milisec-ben akarod megadni a fase effekted lefutását akkor jobb ha setInterval -t használsz.

    Szerintem ebből már valahogy kisilabizálod, de ha nem akkor kérdezz bátran akár egy konkrét példával is.

    Üdv

  4. Heló!

    Köszönöm! Igazából ez a válaszod kapcsolta fel a villanyt.. :D -hogy gondolkozni kéne :D ..és igazából nem tudtam mit visszaírni erre..
    Viszont azóta sikerült némi információt magamba szívnom, letöltenem a Fuse nevü csodát, és eljutnom egy kicsit tovább. De most ismét úgyérzem, hogy mogyoró nagyságúra zsugorodott az agyam.. :D
    Körülbelül az összes fórumot, meg tutorialt (… de legalábbis sokat,) végig böngésztem és nem igazán találom amire szükségem lenne.
    A fedeOut effekt, (részemről most már inkább a Fuse alphaTo() varázslata :D ), valahogy nem volt igazán érdekelt dolog az általam talált turorialokban..
    A másik jelenlegi problémám, hogy gőzöm sincs hogy, hogy szóljak a kettő tájmlájnnal lejjebb lévő mc-hez tartozó parancsok közt lévő funkciókhoz..
    mc.onPress = function(){
    ugyanazon-tájmlájnon-lévő_mc.alatta-lévő_mc.és-itt-lenne-a-parancs( vagy nem. … ??)
    }
    ehunn: http://sathrark.uw.hu/
    Ilyeneken és ehhez hasonlókon tökölök. Ehhez is szeretnék némi segítséget kérni, (már ha bármit is me lehet érteni a foglamazásomból :D…) és az is nagoyn érdekelne, hogy hol találok (lehetőlegminél)részletesebb leírást az actionscript írásról. Az adobe szupport lapján és az eddigi dolgokat ‘belémtápláló’ gotoandlearn.com-on kívül. Szeretnék még szép fles lapokat csinálni. :)
    Lehetőleg próbálok mindent magamtól megérteni felfogni, remélem nem vagyok túl gyopár és idegesítő! :D

    Üdv!

  5. Ricsi:

    Hy,
    Hmm… én nem mondtam olyat hogy gondolkozni kéne. :)
    Én nem nagyon használok ilyen „csoda” bigyulákat mert szerintem ha magad készíted el sokkal többet tanulsz belőle.

    Én a következőket ajánlom: http://www.swf.hu, http://www.friendsofed.com (NAGYON jó könyveik vannak), http://www.dody.hu (ez még elég kezdetleges tartalommal rendelkezik)… :)

    Milyen Flash alatt fejlesztesz? CS3, 8, mx, mx 2004, 5? AS2, AS3, AS1 ? Elég lényeges mert ha AS2 akkor teljesen más lehet a végeredmény mint ha AS3-ban írsz valamit. (Ez utóbbi kicsit jobb, de a megrendelők többsége inkább a legalacsonyabb verziószámot kéri és az bizony 5-6-7 (hálistennek a 7-est már elfogadják:) ).

    E-mail elérhetőséget találsz a dody.hu -n (egy form).

    Üdv

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét