BAB 12 ANIMASI DAN GRAPHIC - Gunadarma Universitybufahnun.staff.gunadarma.ac.id/Downloads/files/31180/visualbasic12... · Seorang programmer yang professional mampu menempatkan gambar

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 cara-cara 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

3. Buka Jendela Code dan pada bagian Code Editor ketikkan kode program nya seperti berikut ini :

Gbr 12.1 Disain Form Image

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

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 seperti tampak dibawah ini, untuk mendapatkan hasil disain

form2 seperti Gbr 12.6. maka Lakukan langkah2 berikut ini :

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 :

Gbr 12.3 click tombol Sembunyikan Gbr 12.2 click tombol ditampilkan

Gbr 12.5 click tombol sembunyikan Gbr 12.4 click tombol Tampilkan

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


ElseIf GAYA = 3 Then 'Timer1.Interval = 3000 Then


















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

PictureBox

Gbr 12.6 Disain image1...Image9

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

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 :

Gbr 12.8 Click STOP image1...Image9

Gbr 12.7 Iage lagi jumping

Gbr 12.9 Click Active, loncat lagi Gbr 12.10 Image masuk kandang

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

Animasipic Animasi dengan PictureClip 2-CenterScreen

Image1 Name stetch

Image1 true

Timer Name Interval

Timer1 300

PictureClip1 Picture Name

Sesuaikan Gambar dgn selera 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

FRM_BINTANG Animasi Warna dengan PSet &H80000007& CenterScreen Normal

Command1 Name Caption BackColor Font Style

CMD_ULTAH SELAMAT ULANG TAHUN &H00FFFFFF& Braggadicio Graphical

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.

II.a. Buka Project : Prj-Animasi.vbp diatas, tambahkan form2 lalu disain seperti tampak pada gambar 12.2c dan 12.2d, yaitu :

gunakan object Label, Textbox, Timer dan commandButton :

b. Buka Jendela Code dan pada bagian Code Editor ketikkan kode program nya seperti berikut ini : 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


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

Gbr 12.2a Disan Form Gbr 12.2b hasil animasi Warna

Gbr 12.2c Disan Form Gbr 12.2b running form Animasi Warna

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.

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

Form1 Membuat Gambar CenterScreen

Frame1 Name Caption

Frame1 Gambar ASLI

Frame2 Name Caption

Frame2 Flip HORICONTAL

Frame3 Name Caption

Frame3 Flip VERTICAL

Frame4 Name Caption

Frame4 Flip HORICONTAL

Picture1 Name Picture

Pic_Asli C:\ProgramFile\Microsoft Office\Clipart\Popular\Car.wmf


Pic_Hor


Pic_Ver

Command1 Name Caption

Cmd_Asli Gambar ASLI


Cmd_Hor Flip HORIZONTAL


Cmd_Ver Flip VERTICAL


Cmd_Selesai Selesai

Lihat hasil disain form3 tersebut dibawah ini :

Gbr 12.2e Masukan text, click Animasi Text Gbr 12.2f Click tombol animasi warna

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.2g Disan Form3

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

Frame1

Label1 Name Text

Txt_Isian

Label1 Name Caption Font

Label1 Text Times New Roman Bold

Label2 Name Alignment Caption Font

Lbl_Animasi1 0 - Left Justify Animasi 1 Times New Roman Bold

Label3 Name Alignment BackColor Caption Font

Lbl_Animasi2 2 - Center &H00FFFFFF& Animasi 2 Times New Roman Bold

Label4 Name Alignment Caption Font

Lbl_Animasi3 0 – Right Justify Animasi 3 Times New Roman Bold

Timer1 Name Enabled Interval

Timer1 False 100


Timer2 False 100


Timer3 False 100

Command1 Name Caption Font

Cmd_Animasi Jalankan Animasi Times New Roman Bold

Command2 Name Caption Font

Cmd_Selesai Selesai Times New Roman Bold

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

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

Gbr 12.2j Hasil Run object timer tidak kelihatan Gbr 12.2i Hasil disain Form

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


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

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


Form1 Name Caption StartUpPosition

Form1 Animasi SpeedoMeter 2 CentreScreen


Cmd_Mulai MULAI


Cmd_Selesai SELESAI


Cmd_Mulai MULAI

Label1 Name Caption Index Font

Lbl_Nomor 0 1 Arial Size : 35 Bold





Label1 Name Lbl_Nomor

Gbr 12.2k Hasil disain Form Gbr 12.2l Hasil disain Form

Gbr 12.2n Hasil disain Form

Gbr 12.2d Hasil disain Form

Gbr 12.2m Hasil disain Form

Caption Index Font

0 4 Arial Size : 35 Bold

Dan Hasil disainya seperti tampak pada gambar 12.2o berikut :

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


N3 = N3 + 1

End If

If N3 > = 9 Then

N3 = 0


N4 = N4 + 1

Beep

End If


N1 = N1 + 1

DoEvents

Loop

Frame1.BackColor = &H0&

Form1.BackColor = &H0&

End Sub

Private Sub Cmd_Selesai_Clic()

End

End Sub


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 :



Form1 Animasi ProgressBar dengan For … Next 2 CentreScreen

Label1 Name Caption

Lbl_Prosen Label1

ProgressBar1 Name Scrolling

ProgressBar1 1 ccScrollingSmooth

Gbr 12.2o Hasil disain Form


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 :

b. Kemudian buka Jendela ViewCode untuk mengetikan code berikut ini, Agar kurva diatas bisa ditampilkan ketika diClick Tombol Kurva pada saat Running


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 Project- Graphic.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

Gbr 12.12 Click Tampilkan Kurva Gbr 12.11 Disain PictureBox

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

Hasilnya sebagai berikut :

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 Project- Graphic.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.13 Clicklah Bidang Form

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.15 Click Tahan Drag Gbr 12.14 Form Running

Gbr 12.14 click clear Gbr 12.15 Click Tahan Drag

Gbr.12.16 Click kanan mouse Gbr.12.17 Click Project | Component

Gbr.12.18 Jendela Component Component

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.

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.19 Control Chart Gbr.12.20 Control Chart disain ke form

Gbr.12.21 Disain Control tidak aktif Gbr.12.22 MengActikan Disain ControlChart Control

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 :

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.23 Disain control Chart Aktif, mimilih Type Chart

Gbr.12.24a Jendelal Chart Type | Tab CustomType

Gbr.12.24a Jendelal Chart Type | Tab Standard Type

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

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

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

Gbr.12.25 Chart yang pilih tampil pada Form

Gbr.12.27 Jendel Chart Options

Gbr.12.26 Pilih Chart Options

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

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

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

Gbr.12.28 Hasil GraphChart Area

Gbr.12.29 Jendel Chart Type

Gbr.12.30 Jendel Chart Options

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.

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 Lingkaran 2 dimensi

2 Lingkaran 3 dimensi

3 Batang 2 dimensi (default)

4 Batang 3 dimensi

5 Gantt

6 Garis

7 Logaritma

8 Areal

9 Scatter

10 Polar

11 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.31 Disain Object Pinnaple-BPS Graph pada Form

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 ‘Jumlah Data .ThisPoint = 1 ‘Penentuan lokasi

.GraphData = 4 ‘Pengisian data .ThisPoint = 2

.GraphData = 1

.ThisPoint = 3 .GraphData = 2

.ThisPoint = 4 .GraphData = 1

.ThisPoint = 5

.GraphData = 3 .DrawMode = 2 ‘Pengaktifan Grafik

End With End Sub

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

Gbr 12.32 Control Graph Pinnaple-BPS Command1, Command2

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

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.33 Hasil Graph Satu Baris

Gbr 12.34 Hasil Graph dua 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.35 Hasil Grafik Polar Dua Baris

Gbr 12.36 Hasil Graph Polar Satu Baris

Gbr 12.36 Hasil Graph Garis Satu Baris

12.4 LATIHAN SOAL

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



Form1 Mengecat Form dgn Image CenterScreen

Frame1 Name Caption

Frame1 Kosongkan

Image1 Name Picture Stretch

Image1 D:\Yw\Gambar\ filename-gbr.jpg True


Cmd_Besar Ukuran BESAR


Cmd_Sedang Ukuran SEDANG


Cmd_Kecil Ukuran KECIL


Cmd_Selesai SELESAI

Command4 Caption BackColor

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 :

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

Gbr 12.38 Hasil Graph Garis Dua Baris

Gbr 12.4a Click BackColor

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.

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 Caption Latihan

Label1 Caption <Kosongkan>

Label2 Caption Pilih Bentuk Gambar

ComboBox1 Name Text Style

Cbo-Pilih <Kosong> 2-Drop

PictureBox1 Name Pct_Satu

Shape1 Name Shape

Shp_Satu 0_Rectangle

Timer1 Interval 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 :


Form1 Caption BackColor StartUpPosition WindowState

Animasi warna dgn Pset &H8000000& CentreScreen Normal

Command1 Caption Backcolor style

SELAMAT ULANG TAHUN &H00FFFFFF& graphical

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

Gbr 12.4b Click Semua tombol Ukuran Gbr 12.4c Click BackColor

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 :

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


Form1 BackColor StartUpPosition WindowState

&H8000000& CentreScreen Normal

Command1 Caption Backcolor style

PROSES &H00FFFFFF& graphical

ShockWaveFlash1

caption kosongkan

ShockWaveFlash2

caption kosongkan

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 !

Gbr 12.4d Disain form

4. Buatlah disain form dibawah ini gunakan Control Animasi, Label1 captionya :”Program menjalankan File”, serta label2 captionya

di kosongkan, Commandbutton1 dan CommonDialog1. seperti berikut :

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 :



Form1 Mengecat Form dgn Image CenterScreen

Frame1 Name Caption

Frame1 Kosongkan

Image1 Name Picture Stretch

Image1 D:\Yw\Gambar\ filename-gbr.jpg True


Cmd_Besar Ukuran BESAR


Cmd_Sedang Ukuran SEDANG


Cmd_Kecil Ukuran KECIL


Cmd_Selesai SELESAI

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 : 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.4e Disan form

Gbr 12.4f disain 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


Form1 Name Caption starupposition

Animasipic Animasi dengan PictureClip 2-CenterScreen

Image1 Name stetch

Image1 true

Timer Name Interval

Timer1 300

PictureClip1 Picture Name

Sesuaikan Gambar dgn selera PictureClip1

7. Buatlah disain form dgn setting properties seperti berikut :

Form/Control Properti Setting Form1 Name

Caption StartUpPosition

Form1 Membuat background pada form CenterScreen

Frame1 Name Caption

Frame1 Macam-macam Bentuk Backgroun

Image1 Name Stretch Picture

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:

Gbr 12.4g Hasil runing form

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.

BAB 12 ANIMASI DAN GRAPHIC - Gunadarma Universitybufahnun.staff.gunadarma.ac.id/Downloads/files/31180/visualbasic12... · Seorang programmer yang professional mampu menempatkan gambar

Documents