Animasi gambar pada button saat diklik di C# (C Sharp)

 Animasi kadang diperlukan untuk memperindah, mempercantik atau untuk  menunjukan tema dari software yang dibuat. Tutorial ini tentang bagaimana cara membuat suatu button menjadi lebih indah dan lebih menarik. Seperti biasanya, sebelumnya  memulai menulis source code silahkan sipakan project kosong. Selanjutnya ikuti langkah demi langkah berikut ini. Sebelum melanjutkan, alangkah baiknya jika membaca tutorial tentang cara menambahkan event di C# disini karena ini akan sangat membantu dalam memahami turorial ini

Gambar 1. Preview desain aplikasi 

langkah 1 : Tambahkan tiga button pada form yang telah disiapkan sebelumnya. Atur agar tampilannya seperti pada gambar diatas

langlah 2 : tambahkan dua komponen imegeList, dimana komponen ini nanti akan berfungsi untuk menampilkan gambar di ketiga button. Pada imageList satu dan ImageListDua tambahkan gambar yang diinginkan (pada contoh tutorial ini digunakan gambar palu, gambar orang dan gambar kunci)

langkah 3 : Pada masing masing button atur property imageListnya agar masing masing button muncul gambarnya

langkah 4 : Tambahkan event mouse_Enter dan event Mouse_Leave pada button satu. Untuk cara menambahkan event-event diatas silahkan baca tutorial tentang menambahkan event pada suatu komponen disini. Setelah event mouse_Enter dan event mouse_leave terbentuk, masukan source untuk animasi, sehingga source lengkapnya untuk mouse_Enter dan mouse_Leave seperti berikut ini

private void button1_MouseEnter(object sender,EventArgs e)                                         
  button1.ImageIndex = 0;                             
  button1.UseVisualStyleBackColor = true;             
  button1.BackColor=SystemColors.GradientActiveCaption;
 }

private void button1_MouseLeave(object sender, EventArgs e)       {                                                       
   button1.ImageIndex = 2;                             
   button1.UseVisualStyleBackColor = false;            
   button1.BackColor = SystemColors.Control;             

}  

 

langkah 5 : lakukan hal yang sama untuk button dua dan button tiga. Sehingga source lengkapnya seperti berikut ini

private void button2_MouseEnter(object sender, EventArgs e)
{
  button2.BackColor=SystemColors.GradientActiveCaption;
  button2.ImageIndex=1;                                           }                                                       
private void button2_MouseLeave(object sender,EventArgse)                                                      {                                                       
   button2.BackColor = SystemColors.Control;           
   button2.ImageIndex = 0;                             
}

source lengkap pada button dua

private void button3_MouseEnter(object sender, EventArgs e)      
{
     button3.BackColor=SystemColors.GradientActiveCaption;
     button3.ImageIndex = 3;
}                                                        
private void button3_MouseLeave(object sender, EventArgs e)
{                                                        
     button3.BackColor = SystemColors.Control;            
     button3.ImageIndex = 2;                              
}        

langkah 6 : Done, Program selesai dibuat, sekarang silahkan running hasil program yang telah dibuat.

Jika langkah langkah diatas dilakukan dengan benar, maka saat program dijalankan program akan menampilakan tiga buah button dimana jika masing masing button tersebut disorot oleh  mouse (mouse_Enter dan mouse_Leave) button tersebut melakukan animasi. Berikut ini contoh preview program yang telah dirunning

Gambar 2 Hasil preview program saat running

untuk memudahkan dalam memahami tutorial ini silahkan download contoh programnya disini dan download contoh projectnnya disini. Sedangkan file file data pendukung program seperti gambar orang, gambar palu dan gambar kunci bisa didownload selengkapnya dibawah ini

Gambar Orang Download disini

Gambar Kunci  Download disini

Gambar Palu Download disini

Contoh Program Download disini

Project Program Download disini

for more information contact informasi@csharp-indonesia.com

pandauan download : klik link download yang disediaan diatas, setelah itu akan muncul halaman adf.ly, tunggu beberapa detik sampai pada pojok kanan atas muncul tulisan skip ad. klik tombol tersebut ,setelah itu akan muncul halaman ziddu, silahkan klik pada button download yang muncul pada halaman ziddu

NB : Semua program dalam tutorial ini ditulisa menggunakan IDE Visual studio 2010. dengan target framework 3.5.Sehingga minimal komputer harus terinstal windows vista untuk bisa menjalankan program *.exe nya, Atau windows xp yang sudah di instal netFrameWork 3.5

Artikel Terkait

• Membuat Animasi Gambar di button di C# ( C Sharp ) 
• Memutar Video SWF di C# (C-Sharp)
• Menambahkan gambar pada button di C# (C Sharp) 
• Button dinamis antar form di C# (C Sharp) 
• Membuat Animasi Gambar di button di C# ( C Sharp ) 
• membuat button di dataGridView di C# C Sharp 
• Membuat button DELETE dan SELECT MYSQL di dataGridView di ...