03-Membuat SlideShow Gambar
03-Membuat SlideShow Gambar
Membuat
SlideShow Gambar
S u h a r i a n R a madi
Membuat SlideShow Gambar
Pada E-Trik ini kita akan membuat program yang bisa menampilkan
SlideShow Gambar. Berikut deskripsi program yang akan kita buat.
• Program berguna untuk menampilkan slideshow gambar; menampilkan
gambar secara berurutan.
• Kecepatan perpindahan gambar bisa diatur.
• Proses menampilkan gambar bisa diulangi lagi. Karena pada kondisi
default jika gambar yang ingin ditampilkan habis, maka program akan
berhenti dengan sendirinya.
• Proses menampilkan gambar bisa dimulai dari gambar yang paling
pertama atau gambar yang paling akhir.
• Program menggunakan icon yang kita buat sendiri dengan Visual C#
2005.
• Tujuan pembuatan program, untuk mengenalkan komponen-komponen
seperti, ImageList, Timer, PictureBox, dan CheckBox.
2
Membuat SlideShow Gambar
PictureBox
CheckBox
ImageList
Timer
Catatan :
Untuk komponen ImageList dan Timer, akan secara otomatis diletakan
pada bagian bawah Form1, bukan di dalam Form1.
3
E-trik Visual C# 2005
Form1 itu sendiri. Untuk mengetahui komponen dan properties yang
mana yang akan diubah, dan apa nilainya, silahkan Anda lihat pada tabel
di bawah ini.
Tabel 1. Properties dan Value yang Akan Diubah
Nama Kontrol Nama Properties Value / Nilai
Form1 FormBorderStyle FixedSingle
MaximizeBox False
Size 373, 385
StartPosition CenterScreen
Text Slide Show Gambar
groupBox1 (Name) groupBox1
Font style Bold
Location 22, 197
Size 225, 134
Text MENU
label1 (Name) lbl_noUrutGambar
Font style Bold
Location 93, 14
Text (dikosongkan)
label2 Location 18, 40
Text Pilihan Kecepatan
comboBox1 (Name) comboPilKecepatan
Font style Regular
Items Lambat
Sedang
Cepat
Location 132, 32
Size 75, 21
Text Lambat
checkBox1 (Name) cekUlangi
Location 21, 70
Text Ulangi Slide Show
4
Membuat SlideShow Gambar
5
E-trik Visual C# 2005
Members:. Untuk lebih jelasnya lihat Gambar 3.
6. Ulangi langkah 5 paling tidak hingga jumlah gambar yang akan di-slide
sebanyak 3 buah gambar.
2. Setelah Gambar
Dipilih, Akan
Tampil Disini
1. Klik di sini
2. Pilih ini
6
Membuat SlideShow Gambar
2. Pada kotak dialog tersebut, pilih Icon dan isi dengan nama IkonSendiri.
ico, klik Add.
3. Klik Add
2. Isi Nama Icon
3. Maka akan muncul editor icon, yang berguna untuk mendesain ikon,
mewarnai ikon, menentukan ukuran ikon, dan lain-lain.
4. Masih pada editor icon, klik kanan pada area kosong, akan muncul
popup. Pilih Delete Image Type. Karena secara default, program akan
menyiapkan dua tipe ikon (16x16 dan 32x32), maka kita perlu menghapus
salah satunya. Dalam hal ini yang kita hapus adalah yang tipe 32x32. Lihat
gambar di bawah ini.
Ini adalah dua buah tipe
ikon yang disiapkan oleh
program, begitu kita
1. Pilih ini
membuat ikon baru
5. Dengan dihapusnya ikon tipe 32x32 tersebut, maka akan tampil ikon tipe
yang satunya lagi, yaitu ikon tipe 16x16.
6. Klik kanan pada area kosong lagi, pada popup pilih Delete, untuk
membersihkan ikon dari gambar yang sudah ada. Lihat Gambar 7.
7
E-trik Visual C# 2005
2. Maka tampilan ikon akan bersih
1. Pilih Delete
9. Kemudian, pada bagian Colors pilih warna biru. Lalu goreskan pula warna
biru tersebut pada area ikon sehingga membentuk gambar seperti tampak
pada Gambar 10.
8
Membuat SlideShow Gambar
1. Buat jadi sepeti ini
11. Lalu, kembali ke Form1, pada bagian properties Icon, klik tombol .
12. Pada kotak dialog yang muncul, cari ikon yang kita buat tadi. Biasanya
terletak pada direktori, ...\e-Trik_3\membuatSlideShowGambar\
membuatSlideShowGambar\
9
E-trik Visual C# 2005
13. Jika sukses, maka tampilan ikon pada Form1 akan terlihat seperti pada
gambar berikut ini.
Tampilan icon pada Form1
B. Coding Program
Langkah-langkah melakukan coding program adalah sebagai berikut:
1. Klik satu kali pada Form1, lalu tekan tombol F7, ketikkan kode yang
berwarna merah seperti dibawah ini.
1 int no_urut_gbr = 0;
2 Boolean berhenti = false;
3 public Form1()
4 {
5 InitializeComponent();
6 }
Keterangan Program:
- Baris 1: mendeklarasikan variabel bertipe Integer dengan nama no_urut_
gbr.
- Baris 2: mendeklarasikan variabel bertipe boolean dengan nama
berhenti.
- Baris 3-6: baris ini tidak perlu diketik, karena baris ini sudah ada dengan
sendirinya pada saat kita membuat project baru.
2. Kembali ke designer form, klik dua kali pada Form1. Ketikan kode ini.
1 private void Form1_Load(object sender, EventArgs e)
2 {
3 lbl_noUrutGambar.Text = Convert.ToString(1);
4 listGambar.Draw(picBoxGambar.CreateGraphics(), 0, 0, 0);
5 }
10
Membuat SlideShow Gambar
Keterangan Program:
- Baris 3: men-set teks dari komponen lbl_noUrutGambar dengan angka
1.
- Baris 4: menghubungkan komponen listGambar dengan picBoxGambar,
sehingga picBoxGambar siap untuk menampilkan gambar dari
listGambar sesuai dengan urutan/indeks gambarnya.
3. Klik ganda pada komponen Timer dengan nama timer1, kemudian ketikan
kode berikut ini.
1 private void timer1_Tick(object sender, EventArgs e)
2 {
3 if (berhenti == false)
4 {
5 if (cekMundur.Checked == true)
6 {
7 if (no_urut_gbr >= 0)
8 {
9 lbl_noUrutGambar.Text = Convert.ToString(no_urut_
gbr + 1);
10 listGambar.Draw(picBoxGambar.CreateGraphics(), 0,
0, no_urut_gbr);
11 no_urut_gbr--;
12 }
13 else { berhenti = true; }
14 }
15 else
16 {
17 if (no_urut_gbr < 5)
18 {
19 lbl_noUrutGambar.Text = Convert.ToString(no_urut_
gbr + 1);
20 listGambar.Draw(picBoxGambar.CreateGraphics(), 0,
0, no_urut_gbr);
11
E-trik Visual C# 2005
21 no_urut_gbr++;
22 }
23 else { berhenti = true; }
24 }
25 }
26 else
27 {
28 if (cekUlangi.Checked == true)
29 {
30 if (cekMundur.Checked == true)
31 { no_urut_gbr = 4; }
32 else { no_urut_gbr = 0; }
33 berhenti = false;
34 }
35 else
36 {
37 berhenti = true;
38 cmdMulai.Enabled = true;
39 cmdStop.Enabled = false;
40 cmdKeluar.Enabled = true;
41 comboPilKecepatan.Enabled = true;
42 cekUlangi.Enabled = true;
43 cekMundur.Enabled = true;
44 timer1.Enabled = false;
45 }
46 }
47 }
Keterangan Program:
- Baris 3: periksa apakah isi variabel berhenti sama dengan false. Jika
benar maka baris 5-24 akan dieksekusi, jika salah baris 28-45 yang akan
dieksekusi.
12
Membuat SlideShow Gambar
13
E-trik Visual C# 2005
4. Setelah itu klik ganda lagi pada komponen Button dengan nama cmdMulai.
Dan ketikan kode berikut ini.
14
Membuat SlideShow Gambar
30 timer1.Interval = intervalKecepatan;
31 timer1.Enabled = true;
32 }
Keterangan Program:
- Baris 3: mengambil pilihan seberapa cepat transisi antar gambar yang
diingikan oleh user, melalui komponen ComboBox comboPilKecepatan.
Lalu hasilnya disimpan ke dalam variabel pilKecepatan.
- Baris 4: mendeklarasikan variabel dengan tipe data integer, dengan nama
intervalKecepatan.
- Baris 5: set variabel berhenti menjadi false.
- Baris 6-8: periksa apakah komponen CheckBox dengan nama cekMundur
dicentang. Jika benar maka isi variabel no_urut_gbr dengan angka 4, jika
salah isi variabel no_urut_gbr dengan angka 0.
- Baris 9-23: menentukan berapakah isi variabel intervalKecepatan,
tergantung dari pilihan user yang tersimpan di dalam variabel
pilKecepatan.
- Baris 24-26: disable komponen Button cmdMulai dan cmdKeluar. Serta
enable komponen cmdStop.
- Baris 27: disable komponen ComboBox comboPilKecepatan.
- Baris 28 dan 29: disable komponen CheckBox cekUlangi dan
cekMundur.
- Baris 30: set Interval komponen timer1 dengan isi dari variabel
intervalKecepatan.
- Baris 31: enable komponen timer1.
15
E-trik Visual C# 2005
5 cmdStop.Enabled = false;
6 cmdKeluar.Enabled = true;
7 comboPilKecepatan.Enabled = true;
8 cekUlangi.Enabled = true;
9 cekMundur.Enabled = true;
10 timer1.Enabled = false;
11 }
Keterangan Program:
- Baris 3: men-set variabel berhenti menjadi true, artinya proses
menampilkan gambar dihentikan.
- Baris 4-6: enable komponen Button cmdMulai dan cmdKeluar. Serta
disable komponen cmdStop.
- Baris 7: enable komponen ComboBox comboPilKecepatan.
- Baris 8 dan 9: enable komponen CheckBox cekUlangi dan
cekMundur.
- Baris 10: disable komponen Timer timer1.
6. Dan untuk yang terakhir, klik ganda komponen cmdKeluar. Dan ketikkan
kode berikut, yang berguna untuk keluar dari aplikasi.
7. Setelah itu tekan tombol F6, untuk melakukan Build Solution. Jika ada
error, coba Anda teliti lagi apakah ada kode yang terlewat atau salah dalam
pengetikannya. Jika tidak ada error, tekan tombol F5. Maka program akan
dijalankan.
16
Membuat SlideShow Gambar
C. Ujicoba Program
Langkah-langkah melakukan ujicoba program adalah sebagai berikut:
1. Setelah program dijalankan, tekan tombol Mulai.
2. Maka gambar akan ditampilkan dengan kecepatan transisi Lambat, dan
setelah gambar yang ditampilkan habis, program akan berhenti dengan
sendirinya.
3. Sekarang coba ubah Pilihan Kecepatan ke Sedang, dan centang
CheckBox Ulangi Slide Show, tekan tombol Mulai.
4. Maka gambar akan ditampilkan dengan kecepatan transisi Sedang, dan
setelah gambar yang ditampilkan habis, gambar yang akan ditampilkan
dimulai lagi dari awal.
5. Tekan tombol Stop, untuk menghentikan slide.
6. Kemudian, hapus tanda centang CheckBox Ulangi Slide Show dan beri
tanda centang pada CheckBox Mundur, tekan tombol Mulai.
7. Maka gambar akan ditampilkan dengan kecepatan transisi Sedang. Gambar
yang ditampilkan dimulai dari gambar yang paling akhir, karena penulis
menggunakan 5 buah gambar, maka gambar yang akan ditampilkan
dimulai dari gambar 5 sampai 1. Lalu setelah gambar yang ditampilkan
habis, program akan berhenti dengan sendirinya.
8. Tekan tombol Keluar, untuk keluar dari aplikasi.
17