PERTEMUAN IX PEMROGRAMMAN ANIMASI, GAMBAR & GRAPHIC, Tujuan Instruksional Khusus : Mahasiswa dapat memahami pembuatan aplikasi grafis dan animasi dalam VB

ANIMASI (1) Computer Assisted Animation (CAA) Kata Animasi : berarti “menghidupkan” mempunyai pengertian : Usaha utk mengerakan sesuatu yg tdk dpt bergerak sendiri. Dgn menganimasikan sbh object kita dpt menambahkan dimensi Wkt (Object Timer) pd object tsb, shgg dpt meningkatkan jmlh informasi yg dpt disampaikan melalui animasi tsb. Secara grs besar animasi computer dpt dibagikan menjadi 2 katagori : Computer Assisted Animation (CAA) & Computer Generated Animation (CGA) Computer Assisted Animation (CAA) Pada Katagori ini : Animasi komputer pada sistem animasi 2 dimensi yaitu : Utk mengkomputerisasi proses animasi tradisional yg menggunakan gambaran tangan, penyisipan atau penambahan diantara btk2 dasar dari sbh animasi satu-satunya penggunaan algoritmis dlm sbh produksi animasi. Selebihnya penggunaaan warna, penerapan virtual kamera dan Menata data yg digunakan dlm sbh animasi.

ANIMASI (2) Computer Generated Animation (CGA) Teknik taraf rendah Pada katagori ini : Animasi komputer pada sistem 3 dimensi terbadi dlm 2 katagori yaitu : Teknik taraf rendah & Teknik Taraf Tinggi Teknik taraf rendah Yaitu : Teknik yg memberikan fasilitas kpd pembuat animasi (Animator) utk menentukan gerakan sendiri yg diinginkan secara mendetail. Contoh nya : Shape interpolation algorthm (in-betweening) yg membantu animator dlm menentukan informasi tentang gerakan yg cukup, biasanya animator mempunyai sebuah ide yg sangat specifik tentang gerakan yg 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.

ANIMASI Image, PictureBox, & Timer Object Image : berfungsi untuk menampilkan file gambar pada aplikasi anda, seperti untuk tujuan hiasan, logo, pelengkap data, dsb. 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

ANIMASI Image, PictureBox, & Timer 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. Contoh : imgGambarku.Picture = LoadPicture(“D:\Gambar\File gambarku.jpg)

ANIMASI 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

CONTOH ANIMASI (1) Image, PictureBox, Timer & object animasi lainya Utk membuat animasi tidak lepas dari penggunaan Image, Picture, Timer, & Object animasi laiinya. Buka project baru, disain formnya seperti tampak dibawah ini, kemudian Lakukan langkah2 berikut ini : 1. Control Image lalu seting property BorderStyle = 1-Fixed Single, stretch = true dan propertie picture sesuai keinginan. 2. Object Frame captionya = MAINKAN IMAGE Command1 dan command2, serta Object timer setting propertie Interval = 500 atau sesukanya tapi tdk boleh negative dan nol 3. Form nya setting propertie : StartUpPosition = 2 CentreScreen

CONTOH ANIMASI (2) Hasil disain dari contoh diatas adlh sbb :

CONTOH ANIMASI (3) Dan hsl running, click tombol sembunyikan, form Green kemudian click tombol ditampilkan pada yellow :

CONTOH ANIMASI (4) Dan coding utk running form diatas :

CONTOH ANIMASI (5) Buka project baru dan Disainlah Form nya, Dgn : 1. Image1, Image2, …, image9 setting propertie visible menjadi false semua, kecuali image1. dan object Timer setting propertie intervalnya = 500 2. PictureBox didlmnya Image9, dan Object Frame captionya = COBA MAINKAN LAGI serta Object Command1, command2 dan Command3 Captionnya seperti yg terlihat :

CONTOH ANIMASI (6) Dan Run kelihatan image tsb main loncat-loncatan, dan permainan berakhir bila masuk kandang, tapi bias dimainkan lagi dgn mengclick tombol active, dan bias juga diberhentikan saat meloncat bila diclick tombol Stop.

CONTOH ANIMASI (7) Dan setlh selesai jumping gambar akan kembali lagi ke kandangnya

CONTOH ANIMASI (8) DAN CODING UTK RUNNING FORM ANIMASI DIATAS ADLH SBB : Dim GAYA As Integer Private Sub Timer1_Timer() Form1.Caption = "IMAGE & " & Time GAYA = GAYA + 1 If GAYA = 1 Then Image2.Visible = True Image1.Visible = False ElseIf GAYA = 2 Then Image2.Visible = False Image3.Visible = True ElseIf GAYA = 3 Then 'Timer1.Interval = 3000 Then Image3.Visible = False Image4.Visible = True ElseIf GAYA = 4 Then 'Timer1.Interval = 4000 Then Image4.Visible = False Image5.Visible = True ElseIf GAYA = 5 Then 'Timer1.Interval = 5000 Then Image5.Visible = False Image6.Visible = True Coding selanjutnya halaman berikut :

CONTOH ANIMASI (9) ElseIf GAYA = 6 Then 'Timer1.Interval = 5000 Then Image6.Visible = False Image7.Visible = True ElseIf GAYA = 7 Then 'Timer1.Interval = 5000 Then Image7.Visible = False Image9.Visible = True Else GAYA = 0 berhenti End If End Sub Private Sub berhenti() Image8.Visible = True Image9.Picture = Nothing Timer1.Enabled = False

CONTOH ANIMASI (10) Private Sub Command1_Click() berhenti End Sub Timer1.Enabled = True Private Sub Command3_Click() HSL = MsgBox("ANDA YAKIN MO KELUAR DARI PERMAINAN INI !", 1, "PERINGATA") If HSL = vbOK Then Unload Me End If

GRAPHIC (1) 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 dipantau. 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 (2) Graphic metode Pset & Cls : Buka project baru disain form nya dgn PictureBox dan command1 seting propertienya sepertie terlihat pada gbr1 dan hasil runnnya gbr2. : Gbr 1. disain Form Gbr 2. Form running dgn click tombol

GRAPHIC (3) Coding yg digunakan utk running form diatas : 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

GRAPHIC (4) 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] Contoh : Buat suatu program untuk membuat pola lingkaran yang berwarna-warni pada Form Setting masing-masing kontrol sebagai berikut : Form/Control Properti Setting Form1 Name Form1 Caption metode circle BackColor &H00E0E0E0& StarUpPosition CircleCenterScreen

GRAPHIC (5) Kemudian ketikan 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 Next Radius End Sub

GRAPHIC (6) Kemudian jalan form click bidang form dan Hasilnya sbb :

GRAPHIC (7) 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] Contoh : Buka project baru, Disainlah form seperti terlihat dibwh ini : 1. Setting propertie form StartUpPosition = 2 CentreScreen 2. Tambahkan Object Command1 dan command2 dgn setting propertie seperti anda lihat pada tanpilan form :

GRAPHIC (8) Gbr 1. disain form yg dirunning, gbr2. click pada posisi tertentu di bidang form tahan drag, Click tombol bersihkan bidang form kembali kosong liht tampilan halaman selanjutnya : Gbr 1. disain Form Gbr 2. Form running dgn click drak

GRAPHIC (9) Lakukan seperti pada halaman/tampilan diatas, lalu click tombol bersihkan.

GRAPHIC (10) Object/Kontrol Graph Untuk memasang Graph, klik kanan toolbox lalu klik Component. Pada kotak dialog Component pilihan Pinnaple-BPS Graph Control. Metode yang digunakan antara lain : NumPoints untuk menentukan jumlah data ThisPoints untuk penentuan lokasi GraphData untuk pengisian data DrawMode untuk mengaktifkan grafik

GRAPHIC (11) Rancanglah tampilan berupa sebuah kontrol grafik dan dua buah tombol, yaitu tombol Satu Baris dan Dua Baris.

GRAPHIC (12) Dan tuliskan coding nya utk jalankan grafik diatas : Dimana : Numsets untuk menentukan jumlah jajaran data ThisSet untuk menandai jajaran yang akan diisi data. 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 .ThisPoint = 5 .GraphData = 3 .DrawMode = 2 ‘Pengaktifan Grafik End With End Sub

GRAPHIC (13) Lanjutan nya lihat halaman berikut ini : Dan coding utk command2 sbb : 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 .ThisPoint = 5 .GraphData = 3 Lanjutan nya lihat halaman berikut ini :

GRAPHIC (14) .ThisSet = 2 .ThisPoint = 1 .GraphData = 2 .ThisPoint = 2 .DrawMode = 2 End With End Sub

GRAPHIC (15) Save aplikasi graphic diatas, Kemudian Run, hslny lihat gbr1 dan gbr 2 Gbr 1. Click tombol Satu baris Gbr2. clcik tombol dua baris

VARIASI GRAPHIC (16) 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

MODIFIKASI GRAPHIC (17) Sekarang tambahkan dua buah kontrol Option : Option1 utk menghasilkan grafik Polar dan Option2 utk menghslkan grafik Garis, Lht setting propertienya dibwh ini : Gbr1. Click Grafik polar satu baris Gbr1. Click Grafik polar dua baris

MODIFIKASI GRAPHIC (18) Dan bila diclick tombol option garis, lihat hasilnya dibawah ini : Gbr1. Click Grafik garis satu baris Gbr2. Click Grafik gars dua baris

MODIFIKASI GRAPHIC (19) Dan Tuliskan kode berikut ini, utk running Private Sub Option1_Click() Graph1.GraphType = 6 End Sub Graph1.GraphType = 10

PEMROGRAMMAN ANIMASI, GAMBAR & GRAPHIC, Situs terkait utk memperoleh materi ini Silahkan buka & cari : Ilmukomputer.com Serta : Google.com Atau Makalah yg terkait dgn topik ini dapat dibaca di Modul X : PEMROGRAMAN ANIMASI, GAMBAR & GRAHPIC