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




 
 
SEGÉDLETEK Effektus-trükk

Látványos képmegjelenítési hatás programozása
  feltöltve: 2005.11.14 | szerző: vizoli | olvasva: 26709 alkalommal

 
 

Egy olyan "maszkolási" technikát szeretnék bemutatni, amelynek segítségével könnyedén hozhatunk létre látványos képmegjelenítési hatást pl. fotógalériához. A technikával könnyedén készíthetünk hasonló áttűnéseket. Hogy a maszkolást miért tettem idézőjelek közé? Azért, mert mint azt látni fogjátok, a szó szoros értelmében nem használunk maszkot, helyette különböző réteg mélységeket veszünk igénybe. *Flash verzió: Macromedia Flash MX 2004

Nézzük meg, mit is fogunk elkészíteni

Vágjunk is bele:

1. lépés: Hozzunk létre, egy 500*500-as méretű mozit, 30-as fps-el és fekete háttérrel.

2. lépés: Mentsük el a mozit seged_maszk.fla néven.

3. lépés: Hozzunk létre 3 layert és nevezzük el őket fenről lefele as, negyzet és hatter néven.

 

4. lépés: Rajzoljunk a negyzet réteg első frame-re egy négyzetet, a Rectange tool segítségével.

5.lépés: A Properties palettán állítsuk a négyzet x és az y koordinátáit 0-ra, a szélességét és a magasságát 40-40-re. (a méretek ez esetben nem mérvadóak, mert kód segítségével szabályozzuk majd őket, csupán az a lényeg, hogy négyzet alakja legyen.

6. lépés: Jelöljük ki a négyzetünk, hívjuk elő a konvertáló menüt (F8), majd válasszuk a Movie Clip viselkedést és nevezzük el negyzet_mc-nek. Fontos, hogy a regisztrációs pontja középen legyen!

 

7. lépés: Jelöljük ki az immáron MovieClip viselkedésű négyzetünket, majd ismét nyomjuk meg az F8-at, konvertáljuk megint MovieClip-é, nevezzük el negyzet_anim_mc-nek és ezúttal válasszuk ki az Export for ActionScript lehetőséget (azért, mert erre fogunk hivatkozni a kódolás során). A Regisztrációs pont ismét középen legyen!

7.lépés: Az edit symbol menünél válasszuk ki a negyzet_anim_mc-t.

8.lépés: Látni fogjuk, hogy a MovieClip közepén, az első rétegen ott csücsül a mi kis negyzet_mc-nk. Ez így természetes, hisz abbol az mc-ből jött létre a negyzet_anim_mc. Nevezzük el azt a réteget negyzet_mc-nek, és fölé szúrjunk be egy plusz layert as névvel.

9.lépés: A negyzet_mc rétegnek a 15. frame-re szúrjunk be egy kulcskockát (F6), majd az első frame-re kattintva állitsuk a képkocka Tween-ét Motionra.

10.lépés: Adjunk az as rétegen a 2. a 3. és a 15. képkockákra kulcskockákat (F6).

 

Most pedig kódolgassunk

11.lépés: A negyzet_anim_mc, as rétegén a következő képkockákra az alábbi kódokat írjuk (F9 nyitjuk meg az Action palettát):

1. frame:
stop();
// ez azért kell, mert ha nem tennénk, akkor elindulna a MovieClip, anélkül, hogy mi utasítottuk volna

2. frame:
play();
// erre a képkockára fogunk hivatkozni a _root-ról

3.frame:
_root["negyzet" + _global.szamlalo++].gotoAndPlay(2);
// a fő moziban ott csücsül egy négyzet alakú MovieClip amelynek majd a negyzet instance nevet
// fogjuk adni. Létre fogunk hozni egy _global.szamlalo változót a _root-on. Ezzel a kóddal
// utasítjuk a _root-on levő összes negyzet1, negyzet2.. instance nevű példányt, hogy ugorjon a saját // idősíkján a 2. képkockára.

15.frame:
stop();
// erre azért van szükség, hogy ha idáig eljutott a futás, ne ugorjon vissza az első frame-re

 

12.lépés: Ezzel be is fejeztük a negyzet_anim_mc kódolását, ugorjunk vissza a fő mozinkra.

13.lépés: Jelöljük ki a bal felső sarokban várakozó négyzetünket, és instance névként adjuk neki a megbeszélt, negyzet nevet.

14.lépés: Az as réteg 1 frame-jére a következő kódot írjuk

szelesseg = Stage.width;
magassag = Stage.height;

//lekérdezzük a mozink szélességét és magasságát, és ezt eltároljuk a
//szelesseg, ill. a magassag változóba

fadeertek = 0;
//létrehozunk egy változót, amely 0-val egyenlo

negyzetszam_hor = 10;
negyzetszam_ver = 10;

//e két változó adja meg a négyzeteink darabszámát horizontálisan
//ill. vertikálisan

_global.szamlalo = 1;
//létrehozunk egy szamlalo nevu globális változót (nem szükséges
// globális, de hosszútávon hasznos lehet), amely kiterjed az egész
// mozinkra és 1 az értéke.

negyzet._width = szelesseg/negyzetszam_hor;
negyzet._height = magassag/negyzetszam_ver;

//meghatározzuk a négyzet instance nevu negyzet_anim_mc magasságát
//és hosszát. értelemszeruen pl. a magasságnak akkorának kell
//lennie, hogy a moznk magasságába pont annyiszor férjen bele
//a négyzetünk, ahány darabszámot megadtunk.

negyzet._x = negyzet._width/2;
negyzet._y = negyzet._height/2;

//a négyzetünk x ill. y koordinátáit határozzuk meg, értelemszeruen
//nem akarjuk, hogy kilógjon a mozinkról az alakzat, ezért el kell
//osztanunk 2-vel.

for (a=1; a<=negyzetszam_ver; a++) {
for (i=1; i<=negyzetszam_hor; i++) {
fadeertek++;
duplicateMovieClip(negyzet, "negyzet" add fadeertek, fadeertek);
mc = _root["negyzet"+fadeertek];
mc._x = ((negyzet._width)*i)-negyzet._width/2;
mc._y = ((negyzet._height)*a)-negyzet._height/2;
}
}

//for(változó = kezdoérték; amig a változó <= érté; addig a változó növekedjen)
//ez esetben létrehoztunk egy a változót, és addig növeljük amíg
//az nem lesz egyenlo a horizontálisan megadott értékkel.
//a fadeérték változót növeljük, majd többszörözzük a negyzet
//mc-t. létrehozunk egy mc-változót, aminek meghatározzuk az x és az y koordinátáit
//ha felcseréljük az i változót-t és az a változót-t, akkor
//függolegesen "maszkolunk".

this.negyzet.gotoAndPlay(2);
//a negyzet mc-nek a saját idosíkját utasítjuk, hogy ugorjon a 2. frame-re.

stop();
//bár nem létszükséges, de hosszútávon ez is hasznos lehet.

15.lépés: Ezek után már tetszés szerint rakhatunk bármit az alsó rétegekre, ez esetben egy képet tettem.

//------------------------------------------------------------------------------------------------

Remélem érthetően sikerült leírnom a példát, amennyiben kérdésetek, hozzászólásotok lenne a témához, csak bátran..!

Sok sikert!

 
 
 
 

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