Membuat Efek Geser Objek pada Touch Screen Menggunakan Tehnik Motion Tween dan Swipe

Bagi pengguna Android, menggeser layar untuk menmpilkan gambar-gambar sudah tidak asing lagi. Kali ini kita akan membuat efek tersebut dengan tehnik sederhana memanfaatkan motion tween dan Gesture Swipe. Jika layar digeser ke bawah atau ke atas maka Motion Tween didalam movie Clip akan berjalan. Untuk membuatnya, pertama kita buat dahulu sebuah movieclip bernama ‘objek’ yang didalamnya kita buat motiontween (menggunaan Classic Tween).

Gambar di atas menunjukkan Classic Tween yang menggerakkan objek dari frame 1 ke frame 10 (gerak ke bawah). Motion dari frame 11 sampai frame 20 akan menggerakkan objek ke atas. Tuliskan script stop() pada frame 1 dan frame 10.

Keluar dari lembar kerja movieclip dan pada salah satu frame di lembar kerja utama tuliskan script dibawah ini:

Multitouch.inputMode=MultitouchInputMode.GESTURE;

function geser(g:TransformGestureEvent):void

{

     if(g.offsetY==1)

     {

           objek.gotoAndPlay(2);

     }

     else

     {

           objek.gotoAndPlay(11);

     }

}

stage.addEventListener(TransformGestureEvent.GESTURE_SWIPE,geser);

Hanya ada dua nilai untuk offsetY atau offsetX yakni 1 atau -1. Nilai offsetY akan bernilai 1 jika layar di geser dari atas ke bawah dan sebaliknya jika digeser dari bawah ke atas maka offsetY akan bernilai -1. Nilai ini yang kita gunakan dalam kondisional if untuk menjalankan tween pada movieclip. Cobalah lakukan test movie dan aktifkan Touch Screen untuk Gesture Swipe.

Menyempurnakan Efek Swipe

Jika kita perhatikan, aplikasi sebelumnya belum sempurna. Jika dilakukan geser ke bawah maka movie clip akan bergerak dari frame satu dan berhenti di frame 10. Jika dilakukan geser ke bawah lagi maka akan mengulang animasi sebelumnya. Ini menjadi tidak bagus. Yang kita inginkan adalah jika posisi objek sudah geser ke bawah maka perintah untuk geser ke bawah menjadi tidak aktif demikian sebaliknya. Nah, kita akan perbaiki kekuarangan tersebut.

Pertama, masuklah kedalam lembar kerja movieclip ‘objek’. Pada frame 1 tambahkan script berikut:

stop();

var geser:Boolean=false; // script tambahan

Pada frame 10, tambahkan juga variable Boolean untuk geser yang bernilai true:

stop();

geser=false; // script tambahan

Jika sudah, keluar dari lembar kerja movieclip dan lakukan sedikit perubahan pada script sebelumnya:

Multitouch.inputMode=MultitouchInputMode.GESTURE;

function geser_layar(g:TransformGestureEvent):void

{

     if(g.offsetY==1&&!objek.geser) // script tambahan

     {

           objek.gotoAndPlay(2);

     }

     else if(g.offsetY==-1&&objek.geser) // script perubahan

     {

           objek.gotoAndPlay(11);

     }

}

stage.addEventListener(TransformGestureEvent.GESTURE_SWIPE,geser_layar);

Nah, sekarang lakukan test movie. Maka perintah geser ke bawah hanya akan aktif jika objek belum digeser ke bawah. Selamat mencoba, semoga bermanfaat.