Drag & Drop tutorial

Tutorial srednje težine za Flash MX & MX 2004.

Korak 1!
Za početak treba napraviti 3 mala kruga sa lijeve strane te 3 veća kruga sa desne strane, svi oni se trebaju nalaziti unutar zasebnih leyera.

Korak 2!
Svaki od tih 6 krugova treba predstavljati zaseban movie clip.U ovom slučaju tri mala kruga (kod mene crvene boje) se mogu zvati bilokako, dok tri velika kruga (kod mene plave boje) moraju imati instance imena (instance name) po redu - dropZone1, dropZone2, dropZone3.

Znači selektiramo prvi mali krug, onda Modify > Convert to symbol > Movie clip. Isto proces ponovimo i za ostala dva mala i tri velika kruga, uz to što ćemo za velike krugove opredijeliti njihove instance - selektirajte prvi veliki krug i u dnu u tabu Properties u polje Instance Name upišite dropZone1. Ovaj korak ponovite i sa drugim i trećim krugom, naravno mijenjajući zadnju znamenku na 2 i 3.

Obratite pažnju da dropZone selektirate jednu po jednu, pa zatim Modify > Arange > Send to back da bi bili sigurni da ce one po redosledu biti iza clipova koji se mogu micati kada ih korisnik prebaci na isti prostor.

Korak 3!
Slijedeći korak je dodjela koda clipovima sa lijeve strane (u ovom slučaju će samo oni biti nosioci koda!). Dakle, selektirajte prvi mali krug, potom stisnite F9 (Window > Development Panels > Actions)

Sada dolazi teži i interesantniji dio, a to je natjerati Flash da shvati koja skraćenica pripada kojem elementu.

Korak 4!
U Actions Panelu pišemo ovaj kod:

onClipEvent (load) {
origX = this._x;
origY = this._y;
}

što znaći da kada se klip učita, originalna pozicija klipa je zapisana u varijablama origX i origY te ako se ne nalazi iznad odgovarajuće zone prebacivanja _x i _y lokacije se resetiraju na ove početne vrijednosti.
Slijedeći korak je kod koji podešava lokaciju klipa na centar zone prevlaćenja ukoliko se klip nalazi iznad odgovarajuće zone prebacivanja:

onClipEvent (mouseDown) {
if (this.hitTest(_root._xmouse, _root._ymouse)) {
this.startDrag();
}
}
onClipEvent(mouseUp) {
if (this.hitTest(_root._xmouse, _root._ymouse)) {
this.stopDrag();

Nadalje, moramo provijeriti da li dropZone sadrži centar ovog klipa:

if (_parent.dropZone2.hitTest(this._x,this._y,true)) {
onda sledi centriranje na dropZone klip:
this._x = _parent.dropZone2._x;
this._y = _parent.dropZone2._y;
} else {

Ukoliko to nije konačna lokacija prebacivanja, tada resetiramo koordinate klipa na početne:

this._x = origX;
this._y = origY;
}
}
}

To je kraj koda. Možete zatvoriti panel Actions (F9).

Korak 5!
Isti ovaj postupak ponovite sa ostala dva klipa malih krugova koji su ostali , menjajuci sve tri vrednosti na dropZone2 i konacno dropZone3.

Korak 6!
Testirajte film da vidite da li ste negdje pogriješili - Ctrl + Enter ili Control -> Test Movie.

Voila!
End. Download -> Swf i Source