Kesempatan kali ini adalah giliran kami untuk berbagi mengenai eksplorasi properti dari komponen image. Hasil eksplorasi ini dapat menghasilkan gerakan yang fantastis dengan kolaborasi pergerakan mouse. Lebih lanjut selamat mengikuti tutorial singkat yang kami sajikan.
1. Buat sebuah form baru, ukuran bebas. Pilih
File-New-Form pada menu bar.
2. Atur pewarnaan untuk tampilan form, pada
object inspector buka properti
color. Sesuaikan dengan selera anda.
3. Tambahkan beberapa
shape yang bisa anda dapatkan pada palette
additional dan untuk variasi properti dapat anda otak-atik pada
object inspector.
4. Tambahkan beberapa komponen
image yang bisa anda temukan pada palette
additional.
Tempel beberapa gambar, untuk melakukannya cari properti
picture pada
object inspector. Dalam tutorial ini menggunakan 4 buah komponen image (jumlah sesuai selera).
5. Tempel dua buah komponen
image diatas komponen
shape. properti
picture biarkan kosong (default). Fungsinya nanti kedua komponen ini (disebelah kiri dan kanan) akan digunakan sebagi pendeteksi gerakan mouse.
6. Buka jendela code melalui menu
View-Code Explorer. Deklarasi 2 buah
procedure pada bagian
public. Ketik menyerupai procedure di bawah ini. variabel
i merupakan nilai incremental yang akan bertambah sesuai gerakan mouse nantinya.
i:integer;
procedure SlidePrevious;
procedure SlideNext;
7. Inisialisasi variabel
i bernilai 3 (besar angka yang diinisialisasi akan menentukan kecepatan sliding) Deskripsi procedure seperti listing dibawah ini:
procedure TForm1.SlidePrevious;
begin
i:=3;
img1.left:=img1.left-i;
img2.left:=img2.left-i;
img3.left:=img3.left-i;
img4.left:=img4.left-i;
end;
8. Listing yang serupa pada procedure
SlideNext namun incremental dilakukan dengan operator '+' Deskripsi procedure seperti listing dibawah ini:
procedure TForm1.SlideNext;
begin
i:=3;
img1.left:=img1.left+i;
img2.left:=img2.left+i;
img3.left:=img3.left+i;
img4.left:=img4.left+i;
end;
9. Panggil procedure
SlideNext pada komponen
image yang disebelah kanan (lihat kembali ke tahapan no.5) dan procedure
SlidePrevious pada komponen
image yang disebelah kiri. Penempatan procedure dilakukan pada properti
Event-OnMouseMove yang bisa ditemukan pada
object inspector.
Setelah langkah-langkah diatas selesai, tekan F9 untuk melihat hasilnya. gerakan mouse anda pada komponen
image yang terisi dengan prosedur tadi.
Referensi dapat didownload
disini.
Selamat Mencoba :)