Laman

Minggu, 20 Maret 2011

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

10 komentar:

  1. kok imagelist gak bisa dipilih, ttp aja dia di none, itu gmna caranya

    BalasHapus
  2. After a massive All--Star Weekend packed with releases, Jordan Brand and Champs Sports are ready to serve up even more gems in the form of on--feet hardware and threads that perfectly match the gear. jordan 11 legend blue Presenting, the Jordan “Master” Collection; highlighted by the Air Jordan 12 Retro inspired by the original print--ad in 1997, the Air jordans shoes Jordan 12 “Master” opts for an all-black look with gold detailing, as does the Jordan 1 Flight 4 and the Jordan Air Jordan 11 Retro 72 10 t-shirts, shorts, and hats. Mix and match your favorite pieces from the Jordan “Master” Collection from The Game Plan by Champs jordans 2016 Sports cheap jordan shoes this Saturday, February 27th. The Launch Locator should pinpoint you to the nearest retail location, so make use of that tool and get your latest Jordan gear straight from Champs Sports.
    The big day is here and we know you’re all jordans for sale waiting to get a first look at the newest chapter of the Air Jordan legacy – the AJXXX. Sneaker News is jordan 13 currently in Chicago for the official event, but just so you don’t feel left out of the hoopla, Jordan Brand will be live-streaming the Air Jordan XXX unveiling at Jordan.com/30 at 12:00 PM EST. Tune in to get a first look at cheap jordans for sale the shoes as well as insight from Tinker Hatfield and Mark Smith and await official photos and release info here shortly cheap jordans after.

    BalasHapus