Jumat, 31 Mei 2013

Membuat Galeri dengan Efek Geser Layar pada Andoid dengan Adobe Flash CS6 (AS3)


Jika pada tutorial yang lalu kita sudah sedikit menyinggung soal GESTURE.SWIPE untuk menjalankan tween didalam movieClip. Nah, sekarang kita akan membuat simple gallery untuk aplikasi Android yang bisa anda gunakan untuk menampilkan berbagai konten. Oke, langsung saja buka lembar kerja Flash Anda!
Pertama, buat lembar kerja AIR for Android. Buatlah movieClip dengan ketentuan sebagai berikut:



Jika objek sudah jadi, klik kanan dan convert to symbol. Pilih movie clip. setelah itu, masuklah kedalam lembar kerja movie clip yang baru saja kita buat. Kita akan menambahkan konten-konten baru! perhatikan ilustrasi berikut:

Pada contoh ini, kita akan memakai 5 konten! Jadi, buatlah 5 konten didalam movieclip dengan cara seperti tergambar di atas. Jika sudah, keluar dari lembar kerja movieclip dengan cara doble klik di luar objek atau cukup dengan klik Scene 1 yang berada di samping Symbol 1. Berikan nama movie clip tersebut dengna nama “container”.



Setelah itu, tuliskan script berikut pada frame 1:

import flash.events.TransformGestureEvent;

var item_tampil:Number = 1;// pertama ditampilkan item ke-1..
var total_item:Number = 4;// jumlah konten yang kita buat..
Multitouch.inputMode = MultitouchInputMode.GESTURE;
function geser_layar(event:TransformGestureEvent):void
{
      if (event.offsetX == 1)
      {
            if (item_tampil>1)
            {
                  item_tampil--;
                  trace("geser kanan");
            }

      }else if(event.offsetX==-1)
      {
            if(item_tampil<total_item)
            {
                  item_tampil++;
                  trace("gser kiri");
            }
      }
}
stage.addEventListener(TransformGestureEvent.GESTURE_SWIPE,geser_layar);

Sampai disini, lakukan test movie dan aktifkan Touch Screen untuk GESTURE SWIPE. Jika benar, maka ketika dilakukan geser maka akan muncuk kalimat “Geser Kanan” atau “geser kiri” pada output.
Oke, kita lanjutkan ke penulisan script selanjutnya. Tambahkan fungsi berikut:

// fungsi  gser kiri
function geser_kiri()
{
     container.addEventListener(Event.ENTER_FRAME,galeri_geser_kiri);
}
function geser_kanan()
{
     container.addEventListener(Event.ENTER_FRAME,galeri_geser_kanan);
}
var timer:Number=0;// membuat variable timer dan memberikan nilai 0..
function galeri_geser_kiri(event:Event):void
{
     container.x-=50;
     timer++;
     trace(timer);
     if(timer==16)
     {
           container.removeEventListener("enterFrame",galeri_geser_kiri);
           timer=0;
     }
}
function galeri_geser_kanan(event:Event):void
{
     container.x+=50;
     timer++;
     trace(timer);
     if(timer==16)
     {
           container.removeEventListener("enterFrame",galeri_geser_kanan);
           timer=0;
     }
}

Jika sudah, masukkan fungsi geser_kanan() dan geser_kiri() kedalam kondisi swipe di awal tadi. Sehingga script perubahannya menjadi:

import flash.events.TransformGestureEvent;
import flash.events.Event;


var item_tampil:Number = 1;// pertama ditampilkan item ke-1..
var total_item:Number = 4;// jumlah konten yang kita buat..
Multitouch.inputMode = MultitouchInputMode.GESTURE;
function geser_layar(event:TransformGestureEvent):void
{
      if (event.offsetX == 1)
      {
            if (item_tampil>1)
            {
                  item_tampil--;
                  geser_kanan(); // script tambahan
                  trace("geser kanan");
            }

      }else if(event.offsetX==-1)
      {
            if(item_tampil<total_item)
            {
                  item_tampil++;
                  geser_kiri(); // script tambahan
                  trace("gser kiri");
            }
      }
}
stage.addEventListener(TransformGestureEvent.GESTURE_SWIPE,geser_layar);

Nah, sekarang Anda bisa mencobanya! Lakukan test movie.

Cara Kerja Script:
Pertama, berikan nilai timer=0 sebagai pengendalinya. Ketika nilai offsetX untuk swipe adalah -1 (layar digeser dari kanan ke kiri) maka fungsi geser_kiri() akan dijalankan. Dimana fungsi geser_kiri() berisi perintah untuk menjalankan fungsi galeri_geser_kiri(). Nah, saat fungsi galeri_geser_kiri() berjalan maka nilai timer akan selalu bertambah 1 sementara nilai x untuk movieClip ‘container’  akan selalu berkurang 50px (bergerak ke kiri). 


Ketika timer=16 maka fungsi galeri_geser_kiri() dihentikan oleh container.removeEventListener("enterFrame",galeri_geser_kiri);sedangkan nilai timer dikembalikan ke timer=0.

Download File FLA