BAB 12 ANIMASI DAN GRAPHIC

BAB 12 ANIMASI DAN GRAPHIC Penulis yakin tidak ada yang tidak suka bab ini, semua orang pasti suka berkerja dengan animasi dan graphic. Hal ini dapat memberi aksen tertentu pada suatu aplikasi yang diciptakan agar tampak menarik dan tidak terlalu polos dan membosankan. Seorang programmer yang professional mampu menempatkan gambar dengan efektif dan efisien sesuai dengan ketuhan dan tujuan aplikasi tersebut. Programmer juga harus mampu dan mengerti cara memberi aksen tertentu tanpa harus membuat sebuah program aplikasi terasa norak, karena penggunaan animasi dan graphic yang berlebihan. Bab ini akan membahas pembuatan Animasi dengan berbagai cara, bisa dengan Control-control (Objects) animasi, Object Timer dan Operasi String serta algoritma yang yang bisa menghasilkan animasi (tampilan yang bisa bergerak / melayang / berpindah tempat atau berubah-rubah bentuk). Dan juga membahas pembuatan grafik dengan berbagai metode, bisa dengan Object Graphic atau objects sejenisnya,

12.1 ANIMASI Kata Animasi : berarti “menghidupkan” mempunyai pengertian : Usaha untuk mengerakan sesuatu yang tidak dapat bergerak sendiri.Dengan meng animasikan sebuah object kita dpt menambahkan dimensi Wkt (Object Timer) pada object tersebut, sehingga dapat meningkatkan jumlah informasi yang dapat disampaikan melalui animasi tersebut. Secara garis besar animasi computer dapat dibagikan menjadi 2 katagori : 1. Computer Assisted Animation (CAA) 2. Computer Generated Animation (CGA)

Computer Assisted Animation (CAA) Pada Katagori ini : Animasi komputer pada sistem animasi 2 (dua) dimensi yaitu : Untuk mengkomputerisasi proses animasi tradisional yang menggunakan gambaran tangan, penyisipan atau penambahan diantara bentuk-bentuk dasar dari sebuah animasi satu-satunya penggunaan algoritmis dalam sebuah produksi animasi. Selebihnya penggunaaan warna, penerapan virtual kamera dan Menata data yang digunakan dalam sebuah animasi.

Computer Generated Animation (CGA) Pada katagori ini : Animasi komputer pada sistem 3 dimensi terbadi dalam 2 katagori yaitu : Teknik taraf rendah & Teknik Taraf Tinggi

Teknik taraf rendah Yaitu : Teknik yang memberikan fasilitas kepada pembuat animasi (Animator) untuk menentukan gerakan sendiri yang diinginkan secara mendetail. Contohnya : Shape interpolation algorthm (in-betweening) yang membantu animator dalam menentukan informasi tentang gerakan yang cukup, biasanya animator mempunyai sebuah ide yang sangat specifik tentang gerakan yang diinginkan.

Teknik Taraf Tinggi Yaitu teknik yg digunakan utk menentukan gerakan secara umum, biasanya menggunakan model dan algoritma tertentu utk membuat suatu gerakan dg menset aturan dan batasan. Misalnya animator menentukan aturan model, memilih algoritma yang tepat serta menentukan batasan yang diperlukan, setelah semua ditentukan, Sistem komputer akan membuat gerakan dari suatu objet segingga dapat berjalan (bergerak) atau bersuara (berbicara)

12.2 IMPLEMENTASI ANIMASI Untuk membuat animasi tidak lepas dari penggunaan Image, Picture, Timer, dan Object animasi serta algorithm dan caracara laiinya untuk membuat Object dapat bergerak , berpindah tempat dan berubah-ubah bentuk.

Object Image : Berfungsi untuk menampilkan file gambar pada aplikasi anda, seperti untuk tujuan hiasan, logo, pelengkap data, dan sebagainya.

Object PictureBox : Berfungsi menampilkan file gambar pada aplikasi anda, tetapi dengan ini bisa menerapkan lebih banyak properti dan metode untuk kontrol Picture Box.

Object Timer Object Timer disamping berfungsi menampilkan jam digital juga berfungsi utk menganisasi sbh object, membuat object bergerak sesuai dgn properti interval yg disetting

Propertie PictureBox : •

Align

• • • • • • •

Menentukan perataan gambar Appearance Tampilan objek apakah biasa atau 3D AutoSize Ukuran kontrol secara otomatis menyesuaikan ukuran objek didalamnya BackColor Warna Latar belakang picture box BorderStyle Jenis bingkai disekiling Picture Box FillStyle Pola Arsiran di dalam picture box Picture Gambar yang ditaruh didalam picture box ScaleMode Satuan pengukuran untuk grafik

VB 6 mendukung format gambar yang umum Seperti : BMP, CUR, EMF, GIF, ICO, JPG, WMF Apabila ingin menampilkan gambar ini melalui kode program, gunakan sintaks dibawah ini : namaKontrol.Picture = LoadPicture (“namafile”)

Keterangan ; -

Namakontrol : nama dari kontrol image Picture : properti Picture dari kontrol image LoadPicture : fungsi yang berguna me-load gambar Namafile : nama dan path file gambar yang ingin ditampilkan. Misalnya : imgGambarku.Picture = LoadPicture(“D:\Gambar\File gambarku.jpg)

12.2.1 ANIMASI DENGAN TIMER & IMAGE I . Buka project baru, disain form seperti tampak dibawah ini, untuk mendapatkan hasil disain form1 seperti Gbr 12.1. dibawah ini, Lakukan langkah-langkah berikut ini : 1. a. Control Image lalu seting property BorderStyle = 1-Fixed Single, stretch = true dan picture = File gambar.jpg sesuai keinginan/selera. b. Object Frame captionya = MAINKAN IMAGE c. Command1 dan command2 setting propertie Stely = Grafik, Caption serta picture= File gambar.jpg d. Timer setting propertie Interval = 500 atau sesukanya tapi tidak boleh negative dan nol Form1 setting propertie : StartUpPosition = 2 CentreScreen

Gbr 12.1 Disain Form Image 3. Buka Jendela Code dan pada bagian Code Editor ketikkan kode program nya seperti berikut ini :

4. Simpanlah Project1 tersebut. Dengan nama : Project-Animasi.vbp dan namaformnya : Form-Animasi1. Kemudian Cobalah jalankan Project-Animasi | Click Start (►) yang terdapat pada toolbar. Dan clicklah Tombol Sembunyikan lalu click lagi, maka gambar image akan Hilang dan Muncul, lihat Gbr 12.2, gbr 12.3 dan 12.4, 12.5

Gbr 12.2 click tombol ditampilkan

Gbr 12.3 click tombol Sembunyikan

Gbr 12.4 click tombol Tampilkan

Gbr 12.5 click tombol sembunyikan

Catatan : Perhatikan dengan seksama baris perbaris Code diatas dan amati juga Hasilnya setiap Operasi dan juga disain form diatas !

Silahkan dicoba dan modifikasilah dengan Load Pecture yang bervariasi/lebih dari satu lagi. Jadi setiap diclick tombol tampilkan gambarnya berganti-ganti terus !. II. Buka Project-Animasi.vbp diatas, tambahkan form2 lalu disain form2 seperti Gbr 12.6. maka Lakukan langkah2 berikut ini :

seperti tampak dibawah ini, untuk mendapatkan hasil disain

1. Image1, Image2, …, image9 setting propertie visible menjadi false semua, kecuali image1. dan object Timer setting propertie intervalnya = 500 2. PictureBox didalamnya Image9, dan Object Frame captionya = COBA MAINKAN LAGI serta Object Command1, command2 dan Command3 Setting propertie Stely = Gaphic, Backcolor = VbOrange dan Captionnya seperti yg terlihat :

PictureBox

Gbr 12.6 Disain image1...Image9 3. Buka Jendela Code dan pada bagian Code Editor ketikkan kode program nya seperti berikut ini : Kode utk menjalan kan form permainan image diatas adalah sbb: Dim GAYA As Integer

Private Sub Command1_Click() berhenti Label1.Caption = "CAPEK YA !!!" End Sub Private Sub Command2_Click() Timer1.Enabled = True Label1.Caption = "AYO JUMPING LAGI SAMPAI LELAH" End Sub Private Sub Command3_Click()

HSL = MsgBox("ANDA YAKIN MO KELUAR DARI PERMAINAN INI !", 1, "PERINGATA")

If HSL = vbOK Then Unload Me End If End Sub Private Sub Timer1_Timer()

'Form1.Caption = "IMAGE & " & Time GAYA = GAYA + 1 If GAYA = 1 Then Image1.Visible = True ImageAw.Visible = False ElseIf GAYA = 2 Then Image1.Visible = False Image2.Visible = True ElseIf GAYA = 3 Then 'Timer1.Interval = 3000 Then Image2.Visible = False Image3.Visible = True ElseIf GAYA = 4 Then 'Timer1.Interval = 4000 Then Image3.Visible = False Image4.Visible = True ElseIf GAYA = 5 Then 'Timer1.Interval = 5000 Then Image4.Visible = False Image5.Visible = True ElseIf GAYA = 6 Then 'Timer1.Interval = 5000 Then Image5.Visible = False Image6.Visible = True ElseIf GAYA = 7 Then 'Timer1.Interval = 5000 Then Image6.Visible = False Image7.Visible = True ElseIf GAYA = 8 Then 'Timer1.Interval = 5000 Then Image7.Visible = False Image8.Visible = True Else GAYA = 0 ImageAw.Visible = True berhenti Label1.Caption = "AYO JUMPING LAGI !!!. CLICK TOMBOL ACTIVE" End If End Sub Private Sub berhenti()

Image8.Visible = True Image8.Picture = Nothing Timer1.Enabled = False

End Sub Private Sub Form_Load() Form1.Caption = " [ Belajar VB 6.0 ] " End Sub

Private Sub Timer2_Timer() a = Left(Form1.Caption, 1) b = Len(Form1.Caption) c = Right(Form1.Caption, b - 1) Form1.Caption = c + a warna End Sub Private Sub warna() Form1.BackColor = RGB(Rnd * 255, Rnd * 255, Rnd * 255) Label1.ForeColor = RGB(Rnd * 255, Rnd * 255, Rnd * 255) End Sub

4. Simpanlah Project-Animasi.vbp dan beri nama form2 : Form-Animasi2. Langkah selanjutnya, tentukan StartUp Objek, yaitu : Dari menu Project | pilih Project1Propertie | Tentukan StartUp Object ke Form2 5. Kemudian Cobalah jalankan Project-Animasi | Click Start (►) yang terdapat pada toolbar. setelah dirun kelihatan image tersebut main loncat-loncatan, dan permainan berakhir bila image masuk kandang, tapi bisa dimainkan lagi dengan mengclick tombol active, dan bisa juga diberhentikan dengan mengclick tombol Stop, dan seterusnya. hasilnya lihat Gbr 12.7, gbr 12.8 dan 12.9, 12.10

Gbr 12.7 Iage lagi jumping

Gbr 12.9 Click Active, loncat lagi

Gbr 12.8 Click STOP image1...Image9

Gbr 12.10 Image masuk kandang

II. Animasi dengan Manfaatkan object PictureClip Serta timer & image, Object atau Control PictureClip merupakan salah satu object visualbasic dengan nama Microsoft PictureClip Control 6.0, dimana control ini memanfaatkan file control PICCLP32.OCX yang ada di folder windows\system. Prinsip kerja control ini adalah gambar yang digunakan hanya satu yang kemudian dibagi dlam bbrp cel dengan cara membagi gambar dalam kolom dan baris, cel – cel itu lah yang akan dimainkan satu persatu dengan bantuan control timer. Tambahkan dulu pada toolbox Object PictureClip, dengan cara berikut : 1. Click Project pada menu Bar | Pilih component | lihat tampilan dibawah ini :

2. Pilih microsoft PictureClip, click sampai muncul tanda Check | Click OK | Disain kan pada form kemudian lengkapi disan form dengan setting propertie object dalam tabel berikut : Control

Propertie

Setting

Form1

Name Caption starupposition Name stetch Name Interval Picture Name

Animasipic Animasi dengan PictureClip 2-CenterScreen Image1 true Timer1 300 Sesuaikan Gambar dgn selera PictureClip1

Image1 Timer PictureClip1

3. Hasil disain form seperti tampak dibawah ini :

4. Kemudian ketikan code berikut ini : Dim N As Integer Private Sub Command1_Click() End End Sub Private Sub Form_Load() Image1.Picture = PictureClip1.GraphicCell(0) End Sub Private Sub Timer1_Timer() N=N+1 If N = 4 Then N=0 End If Form7.BackColor = vbBlack „Image1.Picture = PictureClip1.GraphicCell(Index) Image1.Picture = PictureClip1.GraphicCell(N) End Sub

5. Save Project tsb. Coba run dan lihat hasilnya : gambar 1 dan 2 dibawah ini :

Gambar 1. pada saat Run

Gambar 2. perubahan gamabr sesuai interval timer

Dimana : Dalam menggunakancontrol PictureClip terdapat beberapa propertie dan metode penting berkaitang dengan bentuk animasi yang akan dihasilkan, yaitu : a. GraphicCell : Ini adalah metode lihat gambar a1, a2 dan a3 bawah. Metode ini digunkan unjtuk menentukan sel yang akan dimainkan. Dengan menggunkan parameter berupa intdex dengan nilai awal nol (0) yang merupakan cel paling pojok kiri atas. Dan kemudian bertambah satu-satu dari kiri ke kanan Selanjutnya bila berpindah baris maka index akan bertambah satu dan memulai dari cel paling kiri.

Gambar a1. Metode Object PictureClip1

Gambar a2. Metode Object PictureClip1 selanjutnya

Gambar a2. Metode Object PictureClip1 selanjutnya b. Col : Ini adalah properti tapi juga ada di metode lihat gbr b1 dan b2 bawah. Propertie ini digunakan untuk menentukan jml kolom pembagi gambar. c. Row : Ini juga properti dan juga merupakan metode, propertie atau metode ini digunakan untuk menentukan jml baris pembagi gambar.

Gambar b1 dan b2. Propertie Object PictureClip1

12.2.2 ANIMASI DENGAN METODE LAIN I . Buka project baru, untuk mendapatkan hasil form1 seperti Gbr 12.1. dibawah ini, yaitu : menampilkan bintik-bintik warna secara acak pada suatu Form Lakukan langkah-langkah berikut ini : a.Desain form1 untuk menampilkan titik-titik yang berwarna-warni seperti yang anada lihat pada gambar dibawah, dengan kontrol CommandButton Dan Setting masing-masing obyek sebagai berikut : Form/Control

Properti

Setting

Form1

Name Caption BackColor StarUpPositon WIndowState Name Caption BackColor Font Style

FRM_BINTANG Animasi Warna dengan PSet &H80000007& CenterScreen Normal CMD_ULTAH SELAMAT ULANG TAHUN &H00FFFFFF& Braggadicio Graphical

Command1

b.Buka Jendela Code dan pada bagian Code Editor ketikkan kode program nya seperti berikut ini : Dim SW As Integer Private Sub Command1_Click() Dim XPos, YPos If SW = 0 Then SW = 1 DrawWidth = 2 ForeColor = QBColor(4) Do XPos = Rnd * ScaleWidth YPos = Rnd * ScaleHeight PSet (XPos, YPos), QBColor(Rnd * DoEvents) Loop Else End End If End Sub Private Sub Command2_Click() Form4.ForeColor = RGB(Rnd * 255, Rnd * 255, Rnd * 255) Form4.BackColor = RGB(Rnd * 255, Rnd * 255, Rnd * 255) End Sub Private Sub Command3_Click() Form4.Cls End Sub

c. Simpanlah Prj-Animasi.vbp dan beri nama form : Frm-Animasi01.frm Coba jalankan Prj-Animasi | Click Start (►) yang terdapat pada toolbar Kemudian Clik tombol “SELAMAT ULANG TAHUN” untuk menampilkan titik-titik seperti bintang di langit. Setelah itu click sekali lagi pada tombol “SELAMAT ULANG TAHUN” dan program akan berakhir. Untuk membersihkan titik-titik tersebut, klik tombol clear, Dan untuk mengganti backcolor form click tombol BackColor, Lihat Hasilnya pada gambar 12.2a dan 12.2b dibawah ini.

Gbr 12.2a Disan Form

Gbr 12.2b hasil animasi Warna

II.a. Buka Project : Prj-Animasi.vbp diatas, tambahkan form2 lalu disain gunakan object Label, Textbox, Timer dan commandButton :

seperti tampak pada gambar 12.2c dan 12.2d, yaitu :

Gbr 12.2b running form Animasi Warna b. Buka Jendela Code dan pada bagian Code Editor ketikkan kode program nya seperti berikut ini : Gbr 12.2c Disan Form

Private Sub CMDWARNABACK_Click() Timer2.Interval = 260 Timer2.Enabled = True End Sub Private Sub Form_Load()

Form3.Caption = " [ Ayo Belajar Konsep Pemrog.Visual (VB6.0) ] " & Text2.Text Label1.Caption = " [AYO BELAJAR KONSEP VISUAL] " & Text2.Text Text3.Text = " [SERIUSLAH DALAM BELAJAR PASTI BISA] " & Text2.Text WarnaText

End Sub Private Sub Command1_Click()

Label1.Caption = " [AYO BELAJAR KONSEP VISUAL ] " & Text2.Text Text3.Text = " [SERIUSLAH DALAM BELAJAR PASTI BISA] " & Text2.Text Form3.Caption = " [ Ayo Belajar Konsep Pemrog.Visual (VB6.0) ] " & Text2.Text Timer2.Interval = 0 Timer2.Enabled = False Timer3.Interval = 60 Timer3.Enabled = True

End Sub Private Sub Timer1_Timer()

a = Left(Form3.Caption, 1) b = Len(Form3.Caption) c = Right(Form3.Caption, b - 1) Form3.Caption = c + a a1 = Left(Label1.Caption, 1) b1 = Len(Label1.Caption) c1 = Right(Label1.Caption, b1 - 1) Label1.Caption = c1 + a1 a2 = Left(Text3.Text, 1) b2 = Len(Text3.Text) c2 = Right(Text3.Text, b2 - 1) Text3.Text = c2 + a2

End Sub Private Sub WarnaText() Form3.ForeColor = RGB(Rnd * 255, Rnd * 255, Rnd * 255) Label1.ForeColor = RGB(Rnd * 255, Rnd * 255, Rnd * 255) Text3.ForeColor = RGB(Rnd * 255, Rnd * 255, Rnd * 255) End Sub

Private Sub WarnaBack() Form3.BackColor = RGB(Rnd * 255, Rnd * 255, Rnd * 255) Label1.BackColor = RGB(Rnd * 255, Rnd * 255, Rnd * 255) Text3.BackColor = RGB(Rnd * 255, Rnd * 255, Rnd * 255) End Sub

Private Sub Command2_Click() End End Sub Private Sub Timer2_Timer() WarnaBack End Sub Private Sub Timer3_Timer() WarnaText End Sub

c. Simpanlah Prj-Animasi.vbp dan beri nama form2 : Frm-Animasi02.frm Langkah selanjutnya, tentukan StartUp Objek, yaitu : Dari menu Project | pilih Project1Propertie | Tentukan StartUp Object ke Form2 Coba jalankan program Prj-Animasi | Click Start (►) yang terdapat pada toolbar. Kemudian masukan nama Anda pada masukan text, Click tombol Animasi Text, lalu click tombol Animasi Warna, perhatikan hasilnya pada gambar 12.2e, 12.2f, dan pahami juga code nya diatas.

Gbr 12.2e Masukan text, click Animasi Text

Gbr 12.2f Click tombol animasi warna

III. a. Buka Project : Prj-Animasi.vbp diatas, tambahkan form3 lalu disain seperti tampak pada gambar 12.2g, yaitu : Desain suatu program untuk menampil kan gambar dengan cara terbalik kiri-kanan dan atas-bawah : b. Kemudian Setting masing-masing Objet/Control sebagai berikut : Object

Properti

Setting

Form1

Name Caption StartUpPosition Name Caption Name Caption Name Caption Name Caption Name Picture

Form1 Membuat Gambar CenterScreen Frame1 Gambar ASLI Frame2 Flip HORICONTAL Frame3 Flip VERTICAL Frame4 Flip HORICONTAL Pic_Asli C:\ProgramFile\Microsoft Office\Clipart\Popular\Car.wmf Pic_Hor

Frame1 Frame2 Frame3 Frame4 Picture1 Picture2 Picture3 Command1 Command2 Command3 Command4

Name Picture Name Picture Name Caption Name Caption Name Caption Name Caption

Pic_Ver Cmd_Asli Gambar ASLI Cmd_Hor Flip HORIZONTAL Cmd_Ver Flip VERTICAL Cmd_Selesai Selesai

Lihat hasil disain form3 tersebut dibawah ini :

Gbr 12.2g Disan Form3 c. Buka Jendela Code dan pada bagian Code Editor ketikkan kode program berikut ini. Ketentuan-ketentuan dari program yang harus dilakukan adalah : 1. Buat suatu prosedur dengan nama “Kosong” dimana listing programnya sebagai berikut : Sub Kosong() Pic_Hor.Picture = Nothing Pic_Ver.Picture = Nothing End Sub

2. Coding pada tombol “Gambar ASLI” dan ketik listing program berikut. Private Sub Cmd_Asli_Click() Kosong Pic_Hor.Picture = Pic_Asli.Picture Pic_Ver.Picture = Pic_Asli.Picture End Sub

3. Coding pda tombol “FlipHORIZONTAL” dan ketikan listing program berikut. Private Sub Cmd_Hor_Click() Pic_Hor.Picture = Nothing Pic_Hor.PaintPicture Pic_Asli.Picture, Pic_Hor.ScaleWidth, 0, -1*Pic_Hor.ScaleWidth, Pic_Hor.ScaleHeight End Sub

4. Coding pada tombol “Flip VERTICAL” dan ketik listing program berikut. Private Sub Cmd_Ver_Click() Pic_Ver.Picture = Nothing Pic_Ver.PaintPicture Pic_Asli.Picture,0, Pic_Ver.ScaleHeight, Pic_Ver.Width, -1* Pic_Ver.ScaleHeight End Sub

d. Simpanlah Prj-Animasi.vbp dan beri nama form3 : Frm-Animasi03.frm Langkah selanjutnya, tentukan StartUp Objek, yaitu : Dari menu Project | pilih Project1Propertie | Tentukan StartUp Object ke Form3 Coba jalankan program Prj-Animasi | Click Start (►) yang terdapat pada toolbar. Kemudian Click tombolFlip HORIZONTAL dan click juga tombol Flip VERTICAL Lihat hasilnya sebagai berikut :

Gbr 12.2h Hasil Click Tombol Flip Harizonta dan Flip Vertical

IV. a. Buka Project : Prj-Animasi.vbp diatas, tambahkan form4 lalu disain dengan setting propertie object dalam table ini Control

Properti

Setting

Form1

Name Caption

Form1 Animasi Teks dengan Timer

Frame1

Name Caption Name Text Name Caption Font Name Alignment Caption Font Name Alignment BackColor Caption Font Name Alignment Caption Font Name Enabled Interval Name Enabled Interval Name Enabled Interval Name Caption Font Name Caption Font

Frame1

Label1 Label1 Label2

Label3

Label4

Timer1 Timer2 Timer3 Command1 Command2

Txt_Isian Label1 Text Times New Roman Bold Lbl_Animasi1 0 - Left Justify Animasi 1 Times New Roman Bold Lbl_Animasi2 2 - Center &H00FFFFFF& Animasi 2 Times New Roman Bold Lbl_Animasi3 0 – Right Justify Animasi 3 Times New Roman Bold Timer1 False 100 Timer2 False 100 Timer3 False 100 Cmd_Animasi Jalankan Animasi Times New Roman Bold Cmd_Selesai Selesai Times New Roman Bold

Hasil disainya seperti tampak pada gambar 12.2i dan 12.2j dibawah ini :

Gbr 12.2i Hasil disain Form

Gbr 12.2j Hasil Run object timer tidak kelihatan

b. Buka Jendela Code dan pada bagian Code Editor ketikkan kode program berikut ini. Dim Ket1, Ket3 As String Dim N As Integer, K As Integer Private Sub Command1_Click() N=1 Ket1 = "" Ket3 = " * " & Txt_ISIAN.Text Timer1.Enabled = True Timer2.Enabled = True Timer3.Enabled = True End Sub Private Sub Command2_Click() End End Sub Private Sub Timer1_Timer() Ket1 = Ket1 & Mid(Txt_ISIAN.Text, N, 1) Lb1_ANIMASI1.Caption = Ket1 If N = Len(Txt_ISIAN.Text) Then Ket1 = "" N=1 Else

N=N+1 End If End Sub Private Sub Timer2_Timer() Lb1_ANIMASI2.Caption = Left(Txt_ISIAN, K) If N = Len(Txt_ISIAN.Text) Then Ket = 1 Else K=K+1 End If Ket1 = Ket1 & Right(Txt_ISIAN.Text, 1) Lb1_ANIMASI2.Caption = Ket1 End Sub Private Sub Timer3_Timer() Ket1 = Ket1 & Right(Txt_ISIAN.Text, 1) Lb1_ANIMASI3.Caption = Ket1 End Sub

c. Simpanlah Prj-Animasi.vbp dan beri nama form4 : Frm-Animasi04.frm Langkah selanjutnya, tentukan StartUp Objek, yaitu : Dari menu Project | pilih Project1Propertie | Tentukan StartUp Object ke Form4 d. Coba jalankan program Prj-Animasi | Click Start (►) yang terdapat pada toolbar. Kemudian Isikanlah sembarang kalimat pada object Text | Click tombol Jalankan animasi | coba ganti Kalimat pada object text lalu click lagi ombol jalankan animasi Hasilnya lihat gambar 12.2k, gambar 12.2l gambar 12.2m dan gambar 12.2n dibawah ini

Gbr 12.2k Hasil disain Form

Gbr 12.2l Hasil disain Form

Gbr 12.2d Hasil disain Form

Gbr 12.2m Hasil disain Form

Gbr 12.2n Hasil disain Form

V. a. Buka Project : Prj-Animasi.vbp diatas, tambahkan baru (form5) lalu disain dengan setting propertie object dalam table ini :

Control

Properti

Setting

Form1

Name Caption StartUpPosition Name Caption Name Caption Name Caption Name Caption Index Font Name Caption Index Font Name Caption Index Font Name

Form1 Animasi SpeedoMeter 2 CentreScreen Cmd_Mulai MULAI Cmd_Selesai SELESAI Cmd_Mulai MULAI Lbl_Nomor 0 1 Arial Size : 35 Bold Lbl_Nomor 0 2 Arial Size : 35 Bold Lbl_Nomor 0 3 Arial Size : 35 Bold Lbl_Nomor

Command1 Command2 Command1 Label1

Label1

Label1

Label1

Caption Index Font

0 4 Arial Size : 35 Bold

Dan Hasil disainya seperti tampak pada gambar 12.2o berikut :

Gbr 12.2o Hasil disain Form

Perhatikan : Buat obyek berindex untuk kontrol program label tempat menampilkan angka (Lbl_Nomor) sebanyak empat label. b. Kemudian Jendela Code dan pada bagian Code Editor ketikkan kode program berikut ini. Deklarasikanlah variabel N1, N2, N3, dan N4 di general. Dim N1, N2, N3, N4, As Single Private Sub Form_Load() N1 = 0 N2 = 1 N3 = 1 N4 = 1 End Sub Private Sub Cmd_Mulai_Click() Cmd_Mulai.Enabled = False Do While N4 < 10 If N1 > = 9 Then N1 = 0 Lb1_Nomor(2).Caption = N2 N2 = N2 + 1 End If If N2 > = 9 Then N2 = 0 Lb1_Nomor(32).Caption = N3 N3 = N3 + 1 End If If N3 > = 9 Then N3 = 0 Lb1_Nomor(4).Caption = N4 N4 = N4 + 1 Beep End If Lb1_Nomor(1).Caption = N1 N1 = N1 + 1 DoEvents Loop Frame1.BackColor = &H0& Form1.BackColor = &H0& End Sub Private Sub Cmd_Selesai_Clic() End End Sub

c. Simpanlah Prj-Animasi.vbp dan beri nama form5 : Frm-Animasi05.frm Langkah selanjutnya, tentukan StartUp Objek, yaitu : Dari menu Project | pilih Project1Propertie | Tentukan StartUp Object ke Form5 Coba jalankan program Prj-Animasi | Click Start (►) yang terdapat pada toolbar. Click tombol Mulai perhatikan hasinya, untuk memberhentikanya Click tombol selesai. VI. a. Buka Project : Prj-Animasi.vbp diatas, tambahkan baru (form6) lalu disain dengan setting propertie object dalam table ini :

Control

Properti

Setting

Form1

Name Caption

Form1 Animasi ProgressBar dengan For … Next 2 CentreScreen Lbl_Prosen Label1 ProgressBar1 1 ccScrollingSmooth

Label1 ProgressBar1

StartUpPosition Name Caption Name Scrolling

Command1

Name Caption

Cmd_Proses PROSES

Perhatikan tampilan form berikut ini.masing-masing terdiri dari Label. ProgressBar dan Command Button. Bentuk kontrol dari ProgressBar yaitu :

b. Kemudian Jendela Code dan pada bagian Code Editor ketikkan coding pada object command button (PROSES) berikut ini. Private Sub Cmd_Proses_Click() ProgressBar1.Min = 0 ProgressBar1.Max = 100 For G = ProgressBar1.Min To ProgressBar1.Max ProgressBar1.Value = G lb1_Prosen.Caption = G & “%” DoEvents Next G End Sub c. Simpanlah Prj-Animasi.vbp dan beri nama form6 : Frm-Animasi06.frm Langkah selanjutnya, tentukan StartUp Objek, yaitu : Dari menu Project | pilih Project1Propertie | Tentukan StartUp Object ke Form6 Coba jalankan program Prj-Animasi | Click Start (►) yang terdapat pada toolbar. Click tombol Proses perhatikan hasinya, pada gambar 12.2 dibawah ini :

12.3 GRAPHIC Untuk membuat data-data, akan lebih menarik dan informatik jika digunakan grafik atau kurva. VB6 menyediakan sarana beberapa kontrol Graph, MSChart dan ChartFX. Agak berbeda dengan kontrol lainnya, kontrol ini tidak cukup hanya diatur dengan propertinya, sebab menyangkut pengaksesan data. Untuk itu diperlukan penulisan kode, dengan mengaktifkan metode-metode yang telah disediakan VB6. Dengan penulisan kode maka grafik bisa menampilkan data-data yang bisa berubah setiap saat, sesuai proses yang dipantai. Demikian juga bentuk grafik atau kurva bisa diubah agar menguntungkan sesuai keadaan. Ketiga kontrol tersebut tergolong ke dalam Common Control, sehingga harus dipasang lebih dulu ke toolbox sebelum memakainnya. Graphic dengan Object/Kontrol Graph •

Untuk memasang Graph, klik kanan toolbox lalu klik Component. Pada kotak dialog Component pilihan Pinnaple-BPS Graph Control.

Graphic dengan metode Pset & Cls : •

Buka project baru disain form nya dgn PictureBox dan command1 seting propertienya sepertie terlihat pada gbr1 dan hasil runnnya gbr2.

Graphic dengan metode METODE LINE • • •

Digunakan utk membuat garis, persegi atau mengisi kotak, Bentuk penulisan metode line : Object.Line [Step] (x1, y1) [Step] (x2, y2), [color], [B][F]

Graphic dengan METODE CIRCLE •

Metode Circle digunakan untuk menggambarkan lingkaran, ellips atau garis lengkung. Bentuk penulisan dari metode Circle, sebagai berikut :

Object. Circle [Step] (x, y), Radius, [color, start, end, aspect]

12.3.1 METODE GRAPHIC 12.3.1.1 Graphic metode Pset & Cls : 1.a. Buka project baru disain form nya dgn PictureBox dan command1 seting propertienya sepertie terlihat pada gbr12.11 dan hasil runnnya gbr12.12 :

Gbr 12.11 Disain PictureBox

Gbr 12.12 Click Tampilkan Kurva

b. Kemudian buka Jendela ViewCode untuk mengetikan code berikut ini, Agar kurva diatas bisa ditampilkan ketika diClick Tombol Kurva pada saat Running Private Sub Command1_Click() Dim X, Y As Integer Picture1.Cls Picture1.BackColor = RGB(0, 0, 255) For X = 50 To 3500 Y = 1000 - 700 * Cos(X / 500) Picture1.PSet (X, Y), QBColor(14) Next X End Sub c. Simpanlah Project1, dengan namaProject-Graphic.vbp dan beri nama form1 : Form-graphic1. Kemudian Cobalah jalankan Project- Graphic.vbp | Click Start (►) yang terdapat pada toolbar.

12. 3.1.2 GRAPHIC METODE CIRCLE a. Ingat Metode Circle digunakan untuk menggambarkan lingkaran, ellips atau garis lengkung. Bentuk penulisan dari metode Circle, sebagai berikut : Object. Circle [Step] (x, y), Radius, [color, start, end, aspect] b. Sekarang akan membuat suatu program untuk membuat pola lingkaran yang berwarna-warni pada Form.Bukalah ProjectGraphic.vbp diatas, tambahkan form2, untuk mendapatkan hasil running form2 seperti Gbr 12.13. maka Settinglah propertie form2 tersebut sebagai berikut : Setting masing-masing kontrol sebagai berikut : Control Properti Setting Form2 Name Form2 Caption Metode Circle BackColor &H00E0E0E0& StarUpPosition CircleCenterScreen c. Kemudian buka Jendela ViewCode untuk mengetikan code berikut, agar pada saat running muncul Circle berwarna-warni pada form. ketilah coding berikut pada form click : Private Sub Form_Click() Dim CX, CY, Radius, Limit ScaleMode = 3 CX = ScaleWidht / 2 CY = ScaleHeight / 2 If CX > CY Then Limit = CY Else Limit = CX For Radius = 0 To Limit Circle (CX, CY), Radius, RGB(Rnd * 255, Rnd * 255, Rnd * 255) Beep Beep Next Radius End Sub d. Simpanlah Project-Graphic.vbp dan beri nama form2 : Form-graphic2.. Langkah selanjutnya, tentukan StartUp Objek, yaitu : Dari menu Project | pilih Project1Propertie | Tentukan StartUp Object ke Form2

Kemudian Cobalah jalankan Project- Graphic.vbp | Click Start (►) yang terdapat pada toolbar dan click bidang form dan Hasilnya sebagai berikut :

Gbr 12.13 Clicklah Bidang Form 12. 3.1.3 GRAPHIC DENGAN METODE LINE a. Ingat metode Line digunakan untuk membuat garis, persegi atau mengisi kotak, Bentuk penulisan metode line : Object.Line [Step] (x1, y1) [Step] (x2, y2), [color], [B][F] b. Sekarang akan membuat suatu program untuk mengukir/megambar pola berbentuk garis lurus pada Form.Bukalah ProjectGraphic.vbp diatas, tambahkan form3, untuk mendapatkan hasil running form3 seperti Gbr 12.14. maka : -Setting propertie form StartUpPosition = 2 CentreScreen -Tambahkan Object Command1 dan command2 dengan setting propertie seperti anda lihat pada tampilan form Gbr 12.14. c. Kemudian buka Jendela ViewCode untuk mengetikan code berikut, agar pada saat running form bisa di diukir. dengan cara Click tahan drag pada bidang form, ketilah coding berikut pada form click : Dim x1, y1 Dim sw As Integer

Private Sub Form_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single) If sw = 1 Then x1 = X y1 = Y sw = 0 Else sw = 1 End If End Sub Private Sub Form_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single) If sw = 1 Then Line (x1, y1)-(X, Y), RGB(0, 0, 255) End If End Sub Private Sub Form_Paint() Dim A For A = 0 To ScaleHeight Step ScaleHeight \ 16 Line (-1, A - 1)-(ScaleWidth, A + ScaleHeight \ 16), RGB(255, 255, 255 - A * 255 \ ScaleHeight), BF Next A End Sub Private Sub Command2_Click() HSL = MsgBox("ANDA YAKIN MO KELUAR DARI PERMAINAN INI !", 1, "PERINGATAN") If HSL = vbOK Then Unload Me End If End Sub Private Sub Timer1_Timer() Form4.Caption = " ANIMASI & " & Time End Sub Private Sub Command1_Click() Cls Form_Paint End Sub

d. Simpanlah Project-Graphic.vbp dan beri nama form3 : Form-graphic3.. Langkah selanjutnya, tentukan StartUp Objek, yaitu : Dari menu Project | pilih Project1Propertie | Tentukan StartUp Object ke Form3 Kemudian Cobalah jalankan Project- Graphic.vbp | Click Start (►) yang terdapat pada toolbar. Click Mouse pada bidang form tahan drag, bila ingin menghapus ukiran yang telah jadi Click Tombol Clear dan hasilnya lihat tampilan Gbr 11.14, 11.15 dan Gbr 11.16, 11.18 dibawah ini :

Gbr 12.14 Form Running

Gbr 12.14 click clear

Gbr 12.15 Click Tahan Drag

Gbr 12.15 Click Tahan Drag

12.4 GRAPHIC DENGAN CONTROL CHART & GRAPH 12.4.1 Memasang Kontrol Chart Untuk memasang Control Graph pada toolBox, klik kanan mouse pada toolbox lalu klik Component (atau Click Menu project lalu click component, perhatikan Gambar 12.16 dan gambar 12.17) akan muncul kotak dialog componen lihat gambar 16.18 dibawah ini. Pada kotak dialog Component Click menu Tab Insertable Objects, pilih Ms Graph Chart click sampai muncul tanda check lalu click Tombol OK, control Chart akan tampil pada toolBox. Kemudian click Object Chart tersebut pada toolbox yang tampak dalam lingkaran pada gambar 12.19 dibawah ini dan disainlah pada form lihat hasilnya pada gambar 12.120 disampingnya.

Gbr.12.16 Click kanan mouse

Gbr.12.18 Jendela Component Component

Gbr.12.17 Click Project | Component

Gbr.12.19 Control Chart

Gbr.12.20 Control Chart disain ke form

Perhatikan gbr 12.19 dan 12.20 diatas, click Control chart pada toolbox lihat gbr12.19 dan disain pada form lihat gbr 12.20. Pada saat control chart didisain pada form langsung aktif juga ada tabel menu data dari chart, yang bisa diganti/dirubah datanya, maka chart tersebut juga berubah sesuai dengan perubahan data yang dilakukan.

Gbr.12.21 Disain Control tidak aktif

Gbr.12.22 MengActikan Disain ControlChart Control

Perhatikan gambar 12.21 & 12.22 diatas. Gbr.12.21 Disain Control tidak aktif dan Gbr.12.22

MengActikan Disain

ControlChart serta Gambar 12.23 disain Control char pada form dalam keadaan / sedang aktif. Bila Disain control chart dalam keadaan aktif menuBar akan berganti dengan menu yang dimiliki Ms Graph Chart, yang dapat digunakan untuk memodifikasi graphChart dan tabel datanya. Tapi bila disain control graphchart pada form tidak dalam keadaan aktif maka menuBar akan berganti/merubah ke menuBar Visaul basic. Untuk mengaktifkan disain control chart pada form : click disain Control Chart | click kanan Mouse (lihat gambar 12.22) | click Edit maka disain control chart tersebut akan aktif, hasilnya lihat gambar 12.23 dibawah ini,

Gbr.12.23 Disain control Chart Aktif, mimilih Type Chart

Perhatikan gambar 12.23 diatas, kita bisa memilih type chart yang disukai : | click Chart pada MenuBar | Click Chart Type, muncul jendela Chart Type lihat gambar 12.24a menu tab Standar type dan gambar 12.24b menu Tab CustomType dibawah ini :

Gbr.12.24a Jendelal Chart Type | Tab Standard Type

Gbr.12.24a Jendelal Chart Type | Tab CustomType

Pada gambar 12.24a diatas, adalah jenis-jenis graphchart Area, pilih jenis chart area misalnya area Block | click Tombol OK Atau ingin melihat Pilihan chart area yang beraneka ragam, click menu Tab custom Type seperti terlihat gbr 12.24a diatas, disini dapat melihat berbagai jenis graphChart serta gambar dan namanya. Setelah melakukan pilihan click OK, lihat hasilnya gbr 12.25 dibawah ini.

Gbr.12.25 Chart yang pilih tampil pada Form

Sekarang pada tampilan diatas Pilih Chart pada menuBar | Click Chart Option | Tampil jendela Chart Option lihat gambar 12.26 dibawah ini :

Gbr.12.26 Pilih Chart Options

Disini kita juga bisa memilih tampilan graphcahart yang kita pilih, dalam bentuk tiga dimensi, pada gambar 12.26 diatas clicklah 3-D View. Pada jendela Chart Option dibawah ini, kita dapat memberi judul/title Chart. untuk memberi nama data sumbu x dan memberi nama data sumbu y serta memberi nama data sumbu z Bila sudah selesai click Tombol OK, hasilnya perhatikan gambar 12.28

Gbr.12.27 Jendel Chart Options

Dibawah ini adalah hasil dari Graphchart area yang telah diberi title :

Gbr.12.28 Hasil GraphChart Area

Bisa juga memilih jenis graphchart yang lain yaitu jenis Line lihat hasilnya dibawah ini :

Gbr.12.29 Jendel Chart Type

Memilih jenis GraphChart Line, hasilnya lihat gambar 12.30 dibawah ini :

Gbr.12.30 Jendel Chart Options

Masih banyak yang dapat kita setting pada Jendela Chart Option untuk memperlengkap tampilan grafik : label, style dan lain-lain yang bisa kita manfaatkan antara lain :     

GridStyle untuk membuat kisi-kisi, dengan nilai 0 (tanpa grid), 1 (horizontal), 2 (vertikal) dan 3 (horizontal dan vertikal). FontTitle untuk membuat teks judul LegendText untuk membuat teks legenda (keterangan) LeftTitle untuk judul sebelah kiri grafik BottomTitle untuk judul sebelah bawah

  

LabelText untuk membuat teks jajaran data FontUse untuk menentukan font yang digunakan. Nilainya adalah 0 (teks judul), 1 (judul kiri dan bawah), 2 (Label jajaran), 3 (Legenda), 4 (seluruh teks di grafik) Khusus untuk pengaturan font, ada beberapa metode yang bisa digunakan Yaitu FontSize, FontFamily, FontStyle dan FontGround.

12.3.2 Memasang Kontrol Graph Pinnaple-BPS Graph Control adalah Control yang akan digunakan pada aplikasi Grafik berikut ini, dimana Aplikasi Grfik : “Pinnaple-BPS Graph Control” tidak disediakan oleh VB untuk itu kita perlu install dulu File program file “Pinnaple-BPS Graph Control”. Bila sudah baru kita bias memasangnya pada toolbox. Untuk memasang Control Graph sama caranya dengan memasang GraphChart diatas, klik kanan mouse pada bagian toolbox yang kosong lalu klik Component. tampil kotak dialog Component pilihlah Pinnaple-BPS Graph Control. Maka akan terlihat control ini toolbox. Kemudian click Object Pinnaple-BPS Graph tersebut pada toolbox yang tampak dalam lingkaran pada gambar dibawah ini dan disainlah pada form lihat hasilnya pada form disamping.

Gbr 12.31 Disain Object Pinnaple-BPS Graph pada Form

Perbedaan Pinnaple-BPS Graph Control dengan GraphChart control Pinnaple-BPS Graph Control Object/control ini Memiliki metode serta Jenis-jenis Grafik yang dapat dipanggil dalam pengkodean atau penulisan code / program, khusus jenis grafik memmiliki nilai yang dapat digunakan untuk memanggil type grafik yang di inginkan sama halnya seperti nilai parameter pasa MsgBox. GraphChart control Sedangkan Control / Object GraphChart tidak mensoport pemanggilan metode dan type graphic pada pengkodean. Metode dan type graphic hanya bisas diseting pada saat perancangan. Metode dan Jenis Graphic yang terdapat pada Pinnaple-BPS Graph Control. Metode graphtype yang disediakan control Graph ini memiliki fungsi yang berbeda-beda diantara nya :  NumPoints untuk menentukan jumlah data  ThisPoints untuk penentuan lokasi  GraphData untuk pengisian data  DrawMode untuk mengaktifkan grafik  NumSets untuk menentukan jumlah jajaran data  ThisSets untuk menandai jajaran yang akan diisi data. Kita bisa menentukan jenis grafik dengan metode GraphType. Jenis grafiknya ditentukan dari nilainya seperti tercantum pada Tabel dibawah ini.

Tabel. Variasi Grafik Nilai

Jenis Grafik

1 2 3 4 5 6 7 8 9 10 11

Lingkaran 2 dimensi Lingkaran 3 dimensi Batang 2 dimensi (default) Batang 3 dimensi Gantt Garis Logaritma Areal Scatter Polar High Low Close

Contoh dan Implementasi Control Graph Pinnaple-BPS Graph 1. a Tambahkanlah Object Command1, command2 pada Rancangan form1 gambar 12.31 diatas, setting property Caption Command1 = Satu Baris dan Caption command2 = Dua Baris Lihat hasilnya pada gambar 12.16 dibawah ini.

Gbr 12.32 Control Graph Pinnaple-BPS Command1, Command2

b. Perhatikan gambar diatas terdiri dari : sebuah kontrol graph dan dua buah tombol, yaitu tombol Satu Baris dan Dua Baris. Dimana : Tombol Satu baris adalah : utnuk menampilkan data graphic satu baris metode yang dignakan adalah : NumPoint adalah Jumlah Data. ThisPoint adalah Penentuan lokasi. GraphData adalah Pengisian data. Metode ini hanya dituliskan pada code satu kali saja. Perhatikan code dibawah ini. Tombol Dua baris adalah : untuk menampilkan data graphic dua baris Kita bisa menggunakan jajaran data lebih dari satu, untuk ini kita harus menggunakan metode tambahan, yaitu :  Numsets untuk menentukan jumlah jajaran data  ThisSet untuk menandai jajaran yang akan diisi data. c. Kemudian buka Jendela ViewCode untuk mengetikan code berikut, agar pada saat running Grafik satu baris dan grafik dua baris bisa dilaksanakan ketiklah coding dibawah ini :

Code Command1 atau tombol satu baris Private Sub Command1_Click() With Graph1 .NumPoint =5 .ThisPoint =1 .GraphData = 4 .ThisPoint =2 .GraphData = 1 .ThisPoint =3 .GraphData = 2 .ThisPoint =4 .GraphData = 1 .ThisPoint =5 .GraphData = 3 .DrawMode = 2 End With End Sub

‘Jumlah Data ‘Penentuan lokasi ‘Pengisian data

‘Pengaktifan Grafik

Code Command2 atau tombol Dua baris Private Sub Command2_Click() With Graph1 .NumSets = 2 .NumPoint = 5 .ThisSet =1 .ThisPoint= 1 .GraphData= 4 .ThisPoint= 2 .GraphData= 1 .ThisPoint= 3 .GraphData= 2 .ThisPoint= 4 .GraphData= 1 .ThisPoint= 5 .GraphData= 3 .ThisSet = 2 .ThisPoint =1 .GraphData = 2 .ThisPoint =2 .GraphData =4 .ThisPoint =3 .GraphData =1 .ThisPoint =4 .GraphData =4 .ThisPoint =5 .GraphData =2 .DrawMode =2 End With End Sub

d. Simpanlah project dengan nama : Project-Graphic.vbp dan beri nama form1 : Form-graphic. Langkah selanjutnya Cobalah jalankan Project- Graphic.vbp | Click Start (►) yang terdapat pada toolbar dan click tombol satu baris kemudian click tombol dua baris. Lihat hasilnya Gambar 12.33 dan 12.34 dibawah ini dan Perhatikan perbedaannya. Kemudian bandingkan kode kedua tombol tersebut.:

Gbr 12.33 Hasil Graph Satu Baris

Gbr 12.34 Hasil Graph dua baris e. Sekarang modifikasilah disain Form1 tersebut, tambahkan disain object Option1 dan option2 kemudian setting properti

Captionya GRAFIK POLAR atau GRAFIK LINGKARAN dan GRAFIK GARIS Kedua option ini untuk menentukan jenis grafik dengan metode GraphType. Jenis grafiknya ditentukan dari nilai Grafik yang kita gunakan/panggil dalam pengkodean. Untuk memilih nilai grafik yang akan digunakan lihat Tabel Variasi Grafik diatas. f. Kemudian buka Jendela ViewCode untuk mengetikan code berikut, agar pada saat running Garafik polar dan grafik garis bisa dilaksanakan. Untuk itu tuliskan code dibawah ini : Option1 untuk menghasilkan grafik Polar atau Grafik Lingkaran, yaitu Private Sub Option1_Click() Graph1.GraphType = 10 End Sub

Sedangkan Option2 untuk menghasilkan grafik Garis, yaitu : Private Sub Option1_Click() Graph1.GraphType = 6 End Sub

g. Simpanlah Project-Graphic.vbp untuk menyimpan modifikasi form-graphic. Coba jalankan Project- Graphic.vbp | Click Start (►) yang terdapat pada toolbar dan Click Option Grafik Polar atau Grafik Lingkaran | click tombol satu baris | dan click tombol dua baris. Lihat hasilnya pada gambar 12.35 dan gambar 12.36

Gbr 12.35 Hasil Grafik Polar Dua Baris

Gbr 12.36 Hasil Graph Polar Satu Baris Kemudian Click Option Grafik Garis | click tombol satu baris | dan click tombol dua baris. Lihat hasilnya pada gambar 12.37 dan gambar 12.38 dibawah ini :

Gbr 12.36 Hasil Graph Garis Satu Baris

Gbr 12.38 Hasil Graph Garis Dua Baris

12.4 LATIHAN SOAL 1. Aktifkan VB6 melalui tombol Start. Buka project baru, disain form1 dengan setting property object dalam table berikut :

Control

Properti

Setting

Form1

Name Caption StartUpPosition Name Caption Name Picture Stretch Name Caption Name Caption Name Caption Name Caption Caption

Form1 Mengecat Form dgn Image CenterScreen Frame1 Kosongkan Image1 D:\Yw\Gambar\ filename-gbr.jpg True Cmd_Besar Ukuran BESAR Cmd_Sedang Ukuran SEDANG Cmd_Kecil Ukuran KECIL Cmd_Selesai SELESAI BackColor

Frame1 Image1 Command1 Command2 Command3 Command4 Command4

Perhatikan D:\Yw\Gambar\filename-gbr.jpg pada Picture dari Image1 adalah nama file Gambar, sebulumnya sudah discan dulu foto anda atau gambar lainnya, lalu dipanggil/digunakan pada saat setting properti picture object image1 Dan hasil disain form1 seperti berikut :

Gbr 12.4a Click BackColor Setelah selesai disain form1 diatas. Buka Jendela Code dan pada bagian Code Editor, ketikan kode seperti berikut : Private Sub Cmd_Besar_Click() Form1 .PaintPicture Image1, 0, 0, 5000, 5500 End Sub Private Sub Cmd_Sedang_Click() Form1.PaintPicture Image1, 0, 0, 2500, 3000 End Sub Private Sub Cmd_Kecil_Click() Form1.PaintPicture Image1, 0, 0, 1000, 1500 End Sub

Kemudian Lengkapilah program diatas agar rancangan form bisa dilaksanakan, bila diclick tombol Ukuran besar, click Ukuran Sedang, Click Ukuran Kecil akan tampil gambar pada Image1 dengan ketiga ukuran. Dan bila diclick Tombol BackColor warna Backcolor form1 berubah. Bila selesai Simpanlah Project tersebut. Bila di jalankan hasilnya sebagai berikut.

Gbr 12.4b Click Semua tombol Ukuran

Gbr 12.4c Click BackColor

2. Aktifkan VB6 melalui tombol Start. Buka project baru, disain form1 dengan ketentuan dibawah ini : 1. Masukan label, picturbox, combobox, dan timer ke dalam form5 2. Masukan sebuah objek shape ke dlm picturebox yg dibuat pd langkah kedua 3. Aturlah property masing2 object sbb:

OBJECT

PROPERTI NILAI

Form1 Label1 Label2 ComboBox1

Caption Caption Caption Name Text Style Name Name Shape Interval

PictureBox1 Shape1 Timer1

Latihan Pilih Bentuk Gambar Cbo-Pilih 2-Drop Pct_Satu Shp_Satu 0_Rectangle 100

Setelah disain form1 selesai Buka Jendela Code dan pada bagian Code Editor ketikan kode berikut ini pada Form-load seperti tampak dibawah ini Private Sub Form_Load() Cbo_pilih.List(0) = "0-Rectangle" Cbo_pilih.List(1) = "1-Square" Cbo_pilih.List(2) = "2-Oval" Cbo_pilih.List(3) = "3-Circle" Cbo_pilih.List(4) = "4-Rounded Rectangle" Cbo_pilih.List(5) = "5-Rounded Square" End Sub

Lengkapilah program diatas agar rancangan form bias dilaksanakan, bila dipilih bentuk gamabar pada combobox, akan dilaksanakan : “berganti-ganti bentuk shap 0-rectangle s/d 5-Rounded Square“ dalam pictureBox (diputar dalam pictureBox) Click Tombol Stop, Putara/gerakan shp tersebut akan berhenti. berhenti. Bila selesai Simpanlah Project tersebut. Coba jalankan Bagaimana hasilnya. 2. Buatlah disain form dg seting property berikut :

Control

Propertie

Setting

Form1

Caption BackColor StartUpPosition WindowState Caption Backcolor style

Animasi warna dgn Pset &H8000000& CentreScreen Normal SELAMAT ULANG TAHUN &H00FFFFFF& graphical

Command1

Setelah selesai mensetting form dangan object dalam tabel diatas maka bukalah Jendela Code dan pada bagian Code Editor ketikan kode/program berikut ini : Dim SW As Integer Private Sub Command1_Click() Dim XPos, YPos If SW = 0 Then Sw = 1 DrawWidth = 2 ForeColor = QBColor(4) Do Xpos=Rnd * ScaleWidth

YPos = Rnd * ScalehHigt Pset (XPos, YPos), QBColor(Rnd*15 DoEvents Loop Else End End if End Sub

Bila selesai Simpanlah Project tersebut. Coba jalankan, Click tombol selamat ulang tahun, Perhatikan Bagaimana hasilnya. 3. a. Buatlah disain form berikut ini, object ShockWaveFlash1, ShockWaveFlash2 dan Command1 seperti berikut ini :

Gbr 12.4d Disain form

b. Setinglah peropertinya sesua yang terdapat dalam table diabawah ini :

Control

Propertie

Setting

Form1

BackColor StartUpPosition WindowState Caption Backcolor style caption

&H8000000& CentreScreen Normal PROSES &H00FFFFFF& graphical kosongkan

caption

kosongkan

Command1 ShockWaveFlash 1 ShockWaveFlash 2

Catatan : Untuk menggunakan object ShockWaveFlash1, munculkan dulu pada toolbox, dengan cara, Click Project pada menubar | Click Components, muncul jendela component seprti terlihat dibawah ini | kemudian cari ShockWaveFlash click sampai muncul tanda Check pada kotak Checkbox di depanya, | Click OK | Lihat dibawah ini :

Begitu juga untuk object yang lainnya bila akan dibunakan munculkan dulu pada toolBox, dengan cara yang sama seperti diatas. c. Setelah selesai mensetting form dangan object dalam tabel diatas maka bukalah Jendela Code dan pada bagian Code Editor, ketikan dan modifikasi/lengkapilah kode/program berikut ini : Private Sub Command1_Click() ShockwaveFlash1.Movie = App.Path & "\SPOTLIGHT MASK.SWF" ShockwaveFlash2.Movie = App.Path & "\EXIT.SWF" End Sub

d. Bila selesai mengetikan/melengkapi code tersebut Simpanlah Project ini. Coba jalankan, Click tombol Proses, Perhatikan Bagaimana hasilnya !

4. Buatlah disain form dibawah ini gunakan Control Animasi, Label1 captionya :”Program menjalankan File”, serta label2 captionya di kosongkan, Commandbutton1 dan CommonDialog1. seperti berikut :

Gbr 12.4e Disan form

c. Setelah selesai merancang form dangan object diatas maka bukalah Jendela Code dan pada bagian Code Editor, ketikan dan modifikasi / lengkapilah kode/program berikut ini : Private Sub Command1_Click() CommonDialog1.DialogTitle = "Memilih file animasi" CommonDialog1.Filter = "File-File Animasi(*.avi|*.avi" CommonDialog1.ShowOpen Animation1.Open CommonDialog1.FileName Label1.Caption = CommonDialog1.FileName Animation1.Play End Sub

d. Bila selesai mengetikan/melengkapi code tersebut Simpanlah Project ini. Coba jalankan, Click tombol Mainkan Animasi, Perhatikan Bagaimana hasilnya ! 5. Sama dengan no.1 diatas. Aktifkan VB6 melalui tombol Start. Buka project baru, Buatlah disain Form dengan setting property object dalam table berikut ini :

Control

Properti

Setting

Form1

Name Caption StartUpPosition Name Caption Name Picture Stretch Name Caption Name Caption Name Caption Name Caption

Form1 Mengecat Form dgn Image CenterScreen Frame1 Kosongkan Image1 D:\Yw\Gambar\ filename-gbr.jpg True Cmd_Besar Ukuran BESAR Cmd_Sedang Ukuran SEDANG Cmd_Kecil Ukuran KECIL Cmd_Selesai SELESAI

Frame1 Image1 Command1 Command2 Command3 Command4

Perhatikan D:\Yw\Gambar\ filename-gbr.jpg

pada Picture dari Image1 adalah nama file Gambar, Ambil lah Foto tokoh favorit kamu dari internet, simpan ke suatu file di flashdisk mu, kemudian gunakan pada latihan ini Dan hasil disain form1 tersebut sebagai berikut :

Gbr 12.4f disain form

Setelah selesai disain form1 diatas. Buka Jendela Code dan pada bagian Code Editor, ketikanlah kode atau program yang telah anda coba buat dengan lengkap pada soal no1. diatas. Setelah itu Save. Coba dijalankan Lihat hasilnya

Gbr 12.4g Hasil runing form

Kemudian klik pada tombol “Ukuran BESAR”, “Ukuran SEDANG”, dan “Ukuran KECIL” secara urut. Perhatikan bagaimana form tersebut di cat dengan gambar yang ada di kontrol image dengan berbagai ukuran, seperti terlihat pada gambar 12.4g diatas dan Klik tombol “SELESAI” untuk mengakhiri program. 6. Animasi dengan Manfaatkan object PictureClip a. Tambahkan dulu pada toolbox Object PictureClip, dengan cara yang telah diberikan diatas. b.Pada tampilan jendela Component | Pilih microsoft PictureClip, click sampai muncul tanda Check | Click OK | Kemudian Disainlah pada form lalu lengkapi disan form dengan setting propertie object dalam tabel berikut Control

Propertie

Setting

Form1

Name Caption starupposition Name stetch Name Interval Picture Name

Animasipic Animasi dengan PictureClip 2-CenterScreen Image1 true Timer1 300 Sesuaikan Gambar dgn selera PictureClip1

Image1 Timer PictureClip1

7. Buatlah disain form dgn setting properties seperti berikut : Form/Control Form1

Frame1 Image1 Image2 Image3 Image4 Image5

Properti

Setting

Name Caption

Form1 Membuat background pada form CenterScreen

StartUpPosition Name Caption Name Stretch Picture Name Stretch Picture Name Stretch Picture Name Stretch Picture Name Stretch Picture

Frame1 Macam-macam Bentuk Backgroun Image1 True (pada contoh motif tegel) Image2 True (pada contoh motif daun) Image3 True (pada contoh motif dinding) Image4 True (pada contoh motif dinding) Img_Dasar True None

Dan Desain awal dari kontrol form tsb sbb:

Selanjutnya buat suatu prosedur Dinding dengan listing program sbb : Sub Dinding() Dim intX As Integer Dim intY As Integer Dim sngWidth As Single Dim sngHeight As Single sngWidth = Img_Dasar.Width sngHeight = Img_Dasar.Height For intX = 0 To 4 For intY = 0 To 3 Form1.PaintPicture Img_Dasar.Picture, intX *sngWidth, intY * sngHeight, sngWidth, sngHeight, 0, 0 Next Next End Sub

Coding pada kontrol Image1 dan ketik listing program berikut ini. Private Sub Image1_Click() Img_Dasar.Picture = Image1.Picture Call Dinding End Sub

Kemudian Gandakan (copy) prosedur Image1_Click dan ganti nama kontrolnya menjadi Image2, Image3 dan Image4. Bentuk listingnya sebagai berikut : Private Sub Image2_Click() Img_Dasar.Picture = Image2.Picture Call Dinding End Sub Private Sub Image3_Click() Img_Dasar.Picture = Image3.Picture Call Dinding End Sub Private Sub Image4_Click() Img_Dasar.Picture = Image4.Picture Call Dinding End Sub

Save dan Jalankan programnya,lakukan klik pada salah satu gambar secara bergantian. Jika gambar ke empat (Image4) di klik maka tampilan dari form seperti berikut ini.