Tutorial Gesture (kontrol layar dengan jari) pada Adobe Air

Gesture merupakan fasilitas yang disediakan oleh smartphone untuk mempermudah operasi pada layar dengan menggunakan kombinasi sentuhan 2 buah jari. Gesture yang paling terkenal adalah zoom dengan menggunakan 2 jari pada layar yang kemudian jari ini di jauhkan posisinya sesuai besar zoom yang diinginkan. Kali ini juga akan dibahas mengenai gesture rotate/putar serta swipe/geser.

(klik pada gambar dibawah untuk memperjelas)

Tutorial kali ini dimulai dengan mengcopy paste gambar pada library , sebaiknya jika menggunakan gambar dari luar menggunakan format PNG yang memudahkan penampakan transparansi dari gambar. Contoh yang diberikan berupa gambar robot android, yang kemudian movieclipnya diberikan nama instance "robo".

Letakkan gambar robot ditengah layar /stage utama dan kemudian buatlah "layer" untuk menyisipkan actionscript. Untuk gesture zoom dan rotate sangatlah mudah seperti pada contoh script berikut:

Multitouch.inputMode = MultitouchInputMode.GESTURE;
stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);
stage.addEventListener(TransformGestureEvent.GESTURE_ROTATE, onRotate);

function onZoom(evt:TransformGestureEvent):void {
 
 
robo.scaleX *= evt.scaleX;
robo.scaleY *= evt.scaleY;
 
}

function onRotate(evt:TransformGestureEvent):void {
robo.rotation += evt.rotation;

}

Terlihat betapa simplenya script yang digunakan untuk membuat efek zoom dan rotate dan langsung bisa diaplikasikan untuk merubah scale atau pembesaran serta rotation dari posisi x dan y pada instance "robo".

Baiklah kita lanjutkan dengan pembahasan yg lebih lanjut yaitu gesture swipe. Gesture swipe biasanya ditemui ketika membaca majalah digital contohnya saat membalik halaman pada tablet/handheld. Nilai yang dihasilkan dari proses swipe ini adalah angka yang tetap, yaitu -1 untuk swipe dari kanan ke kiri atau atas ke bawah, sedangkan sebaliknya akan menghasilkan angka 1.

Untuk itu kita butuh membuat robot android satu lagi dan kita namakan robo2, dan robot android cewek ini akan kita berikan classname sendiri, bukan dengan instance name seperti contoh sebelumnya

Class name yang kita buat adalah robo1 dan robo2 dimana nantinya akan dipanggil ke dalam stage menggunakan script seperti berikut

import flash.display.MovieClip; //class otomatis ditambahkan pada CS5.5

Multitouch.inputMode = MultitouchInputMode.GESTURE;
stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);
stage.addEventListener(TransformGestureEvent.GESTURE_ROTATE, onRotate);
stage.addEventListener(TransformGestureEvent.GESTURE_SWIPE, onSwipe);

var t:Timer = new Timer(1); //timer untuk animasi gerak
t.addEventListener(TimerEvent.TIMER, onTimer); 


var robot:MovieClip; //variable untuk movieclip robo
var pilihan:Number = 1;
var step:Number = 1;
//awal tampilan
robot= new robo1;
addChild(robot);
robot.x=160;
robot.y=240;




function onZoom(evt:TransformGestureEvent):void {
 
 
robot.scaleX *= evt.scaleX;
robot.scaleY *= evt.scaleY;
 
}

function onRotate(evt:TransformGestureEvent):void {
robot.rotation += evt.rotation;

}


//perlakuan terhadap hasil swipe ke animasi
 
function onTimer(event:TimerEvent):void{
robot.x -=5;
if(robot.x < (-robot.width/2)     )  {
 removeChild(robot);
    robot=null;
 if(pilihan == 1){
 robot=new robo2;
 pilihan=2;
 step=2;
 }
 else{
 robot=new robo1;
 pilihan=1;
 step=2;
 }
 
 addChild(robot);
 robot.x=350;
 robot.y=240;
}
if(step == 2 && robot.x <= 161){
 t.stop();
 step=1;
}

event.updateAfterEvent();
}
 
 


function onSwipe(evt:TransformGestureEvent):void {

 if(evt.offsetX == -1){
 
 t.start();

 
 }




}

Simple dan sangat powerful !! hanya itu kata yang dapat saya berikan kepada adobe air, dan hasilnya dapat dilihat pada video berikut :






Jangan lupa untuk membaca tutorial sebelumnya jika ingin melihat cara publish ke handheld android kamu. Source code untuk tutorial ini dapat di download disini

SELAMAT MENCOBA