Drag dan Drop pada Macromedia flash 8

Sesuai dengan judul saya Drag dan drop kita akan coba belejar membuat drag dan drop pada Macromedia Flash 8 atau Flash CS, sekilas tetang keterangan dari drag dan drop ini  dimana object yang kita buat saling berpasangan jika kita mendrag sebuah object tidak sesuai dengan pasangannya maka object akan kembali ke posisi awal, dan jika benar maka object yang kota drag tadi akan lengket dan berubah warna! gak ngeri ya..? ,, untuk lebih jelasnya ayoo kita bahas disini

1.  jadi disini saya anggap sobat sudah paham dan mengerti dengan maksud saya pada tutorial ini bisa dibilang  sudah tingkat menengah
seperti biasa  buat sebuah dokumen baru dan buatlah object seperi gambar dibawah ini dimana ada

  2. setelah langkah 1 sudah siap, convert semua object menjadi movie clip dan jangan lupa beri Instance name nya

3. dan untuk langkah terakhir KOPAS code berikut masukkan ke actionscriptnya atau pencet f9

stop();
jw1.onPress = function()
{
    startDrag(this);
};
jw2.onPress = function()
{
    startDrag(this);
};

jw3.onPress = function()
{
    startDrag(this);
};

jw4.onPress = function()
{
    startDrag(this);
};

jw5.onPress = function()
{
    startDrag(this);
};

jw6.onPress = function()
{
    startDrag(this);
};

jw1.onRelease = jw1.onReleaseOutside = function ()
{
    stopDrag();
    if (this._droptarget == "/j1")
    {
        this.onTarget = true;
        _root.jw1.gotoAndStop(2);
        jw1._x = 79;
        jw1._y = 362;
    }
    else
    {
        this.onTarget = false;
        _root.jw1.gotoAndStop(1);
    }
};


jw2.onRelease = jw2.onReleaseOutside = function ()
{
    stopDrag();
    if (this._droptarget == "/j2")
    {
        this.onTarget = true;
        _root.jw2.gotoAndStop(2);
        jw2._x = 79;
        jw2._y = 308;
    }
    else
    {
        this.onTarget = false;
        _root.jw2.gotoAndStop(1);
    }
};

jw3.onRelease = jw3.onReleaseOutside = function ()
{
    stopDrag();
    if (this._droptarget == "/j3")
    {
        this.onTarget = true;
        _root.jw3.gotoAndStop(2);
        jw3._x = 79;
        jw3._y = 241;
    }
    else
    {
        this.onTarget = false;
        _root.jw3.gotoAndStop(1);
    }
};

jw4.onRelease = jw4.onReleaseOutside = function ()
{
    stopDrag();
    if (this._droptarget == "/j4")
    {
        this.onTarget = true;
        _root.jw4.gotoAndStop(2);
        jw4._x = 79;
        jw4._y = 182;
    }
    else
    {
        this.onTarget = false;
        _root.jw4.gotoAndStop(1);
    }
};

jw5.onRelease = jw5.onReleaseOutside = function ()
{
    stopDrag();
    if (this._droptarget == "/j5")
    {
        this.onTarget = true;
        _root.jw5.gotoAndStop(2);
        jw5._x = 79;
        jw5._y = 121;
    }
    else
    {
        this.onTarget = false;
        _root.jw5.gotoAndStop(1);
    }
};

jw6.onRelease = jw6.onReleaseOutside = function ()
{
    stopDrag();
    if (this._droptarget == "/none")
    {
        this.onTarget = true;
        _root.jw6.gotoAndStop(2);
        jw6._x = 79;
        jw6._y = 362;
    }
    else
    {
        this.onTarget = false;
        _root.jw6.gotoAndStop(1);
    }
};

x1 = jw1;
x2 = jw2;
x3 = jw3;
x4 = jw4;
x5 = jw5;
x6 = jw6;

x1.onMouseDown = function()
{
    betul = true;
};
x1.onMouseUp = function()
{
    betul = false;
};
x1.myHomeX = x1._x;
x1.myHomeY = x1._y;
x1.onEnterFrame = function()
{
    if (betul == false && this.onTarget == false)
    {
        this._x -= (this._x - this.myHomeX) / 5;
        this._y -= (this._y - this.myHomeY) / 5;
    }
};
x2.onMouseDown = function()
{
    betul = true;
};
x2.onMouseUp = function()
{
    betul = false;
};
x2.myHomeX = x2._x;
x2.myHomeY = x2._y;
x2.onEnterFrame = function()
{
    if (betul == false && this.onTarget == false)
    {
        this._x -= (this._x - this.myHomeX) / 5;
        this._y -= (this._y - this.myHomeY) / 5;
    }
};
x3.onMouseDown = function()
{
    betul = true;
};
x3.onMouseUp = function()
{
    betul = false;
};
x3.myHomeX = x3._x;
x3.myHomeY = x3._y;
x3.onEnterFrame = function()
{
    if (betul == false && this.onTarget == false)
    {
        this._x -= (this._x - this.myHomeX) / 5;
        this._y -= (this._y - this.myHomeY) / 5;
    }
};
x4.onMouseDown = function()
{
    betul = true;
};
x4.onMouseUp = function()
{
    betul = false;
};
x4.myHomeX = x4._x;
x4.myHomeY = x4._y;
x4.onEnterFrame = function()
{
    if (betul == false && this.onTarget == false)
    {
        this._x -= (this._x - this.myHomeX) / 5;
        this._y -= (this._y - this.myHomeY) / 5;
    }
};
x5.onMouseDown = function()
{
    betul = true;
};
x5.onMouseUp = function()
{
    betul = false;
};
x5.myHomeX = x5._x;
x5.myHomeY = x5._y;
x5.onEnterFrame = function()
{
    if (betul == false && this.onTarget == false)
    {
        this._x -= (this._x - this.myHomeX) / 5;
        this._y -= (this._y - this.myHomeY) / 5;
    }
};
x6.onMouseDown = function()
{
    betul = true;
};
x6.onMouseUp = function()
{
    betul = false;
};
x6.myHomeX = x6._x;
x6.myHomeY = x6._y;
x6.onEnterFrame = function()
{
    if (betul == false && this.onTarget == false)
    {
        this._x -= (this._x - this.myHomeX) / 5;
        this._y -= (this._y - this.myHomeY) / 5;
    }
    else if (betul == false && this.onTarget == true)
    {
        this._x -= (this._x - this.myFinalX) / 5;
        this._y -= (this._y - this.myFinalY) / 5;
    }

};

lumayan panjang scriptnya, tapi sebenarnya cukup mudah untuk dipahami, berikut penjelasan beberapa script diatas

jw1.onPress = function()
{
    startDrag(this);
};

perintah untuk drag object, inti dari penggalan script diatas adalah startDrag(this); untuk menunjukkan object yang didrag sementara  jw1 adalah Instance name objectnya.

dan selanjutnya script

 jw1.onRelease = jw1.onReleaseOutside = function ()
{
    stopDrag();
    if (this._droptarget == "/j1")
    {
        this.onTarget = true;
        _root.jw1.gotoAndStop(2);
        jw1._x = 79;
        jw1._y = 362;
    }
    else
    {
        this.onTarget = false;
        _root.jw1.gotoAndStop(1);
    }
};

script diatas merupakan primernya dimana pada bagian ini object diberi target pasangan
stopDrag(); sudah pasti untuk mematikan perintah drag

if (this._droptarget == "/j1")
    {
        this.onTarget = true;
        _root.jw1.gotoAndStop(2);
        jw1._x = 79;
        jw1._y = 362;
    }
object memilih targetnya dimana target dari objectnya adalah  j1  kemudian  this.onTarget = true; ini menunjukkan bahwa object yang namanua  j1 benar sementara  _root.jw1.gotoAndStop(2); adalah frame pada object jw1 dimana warna object akan berubah jika target object tersebut benar dan
jw1._x = 79;
        jw1._y = 362;
adalah posisi dari object targetnya 

dan yang terakhir adalah
x1 = jw1; adalah script yg mewakili jw1
 dan

 x1.onMouseDown = function()
{
    betul = true;
};
x1.onMouseUp = function()
{
    betul = false;
};
x1.myHomeX = x1._x;
x1.myHomeY = x1._y;
x1.onEnterFrame = function()
{
    if (betul == false && this.onTarget == false)
    {
        this._x -= (this._x - this.myHomeX) / 5;
        this._y -= (this._y - this.myHomeY) / 5;
    }
};

dimana script diatas bekerja apa bila target object benar, maka object yg di drag akan lengket dan jika salah object yg di drag akan kembali ke posisi awal

jika masih belum mengerti silakan download DEMO

Share on Google Plus

About Budi Setiawan

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.