Kreasi Slider Gambar Pada Delphi Form

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 :)

Read More