ANIMASI GELEMBUNG

Animasi yang akan kita buat berikut ini berupa gelembung udara yang bergerak ke atas. Apabila kita menyentuh gelembung udara tersebut dengan kursor mouse maka gelembung udara itu akan otomatis menghilang.

1. Buatlah sebuah flash document berwarna biru.

2. Buatlah sebuah lingkaran berwarna biru dengan putih sebagai warna garisnya dan buatlah juga seperempat garis lingkaran berwarna putih yang ditempatkan ditengah lingkaran tersebut seperti gambar di bawah ini :



3. Seleksi lingkaran dan seperempat garis lingkaran tadi kemudian tekan F8. Pada panel yang muncul masukkangelembung sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah.

4. Hapus movie clip gelembung dari stage kemudian tekan Ctrl+L. Pada panel library yang muncul klik kanan movie clip gelembung dan pilih linkage.

5. Pada panel yang muncul berikan tanda contreng pada Export for ActionScript dan masukkan gelembungsebagai idetifier lalu tekan ok.

6. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

//perintah yang dijalankan ketika frame ini dimainkan onEnterFrame = function () { //jika nilai acak 10 bernilai 5 if (random(10) == 5) { //masukkan movie clip berlinkage gelembung ke dalam stage dengan posisi x sesuai nilai acak panjang stage dan posisi y sesuai lebar stage ditambah 20 gelembung = attachMovie("gelembung", "gelembung"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:random(Stage.width), _y:Stage.height+20}); //membuat variable waktu di dalam movie clip gelembung dengan nilai acak 40 gelembung.waktu = random(40); //perintah yang dijalankan ketika frame di dalam movie clip gelembung dimainkan gelembung.onEnterFrame = function() { //koordinat y movie clip ini dikurangi 5 //movie clip gelembung bergerak ke atas this._y -= 5; //variable waktu movie clip ini ditambah 1 this.waktu++; //jika nilai variable waktu kurang dari 20 if (this.waktu<20) { //koordinat x movie clip ini ditambah 1 //movie clip gelembung bergerak ke kanan this._x++; } //jika nilai variable waktu lebih dari 20 dan jika nilai variable waktu kurang dari 40 if (this.waktu>20 && this.waktu<40) { //koordinat x movie clip ini dikurangi 1 //movie clip gelembung bergerak ke kiri this._x--; } //jika nilai variable waktu lebih dari 40 if (this.waktu>40) { //ubah nilai variable waktu menjadi 0 this.waktu = 0; } //jika koordinat y movie clip ini kurang dari -20 if (this._y<-20) { //hapus move clip ini removeMovieClip(this); } }; //ketika mouse berada di atas movie clip gelembung gelembung.onRollOver = function() { //hapus movie clip ini removeMovieClip(this); }; } };

7. Tekan Ctrl+Enter untuk melihat hasilnya.

Coba sentuhkan kursor mouse ke salah satu gelembung.

8. Anda dapat mengembangkan animasi gelembung di atas misalnya dengan menambahkan animasi pecah apabila gelembung disentuh oleh mouse.

Sourcenya dapat di download di sini

Kalender

1. Buatlah 4 buah Dynamic Text dengan masing-masing Var : hari, tanggal, bulan, tahun.
2. Ubah ukuran Dynamic Text sesuai panjang jumlah maksimal karakter yang akan dimuat.
3. Klik Frame 1 lalu tekan F9 dan masukan script berikut :

1 2 3 4 5 6 7 8 9

daftar_hari = new Array("Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"); daftar_bulan = new Array("Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"); onEnterFrame = function () { kalender = new Date(); hari = daftar_hari[kalender.getDay()]; tanggal = kalender.getDate(); bulan = daftar_bulan[kalender.getMonth()]; tahun = kalender.getFullYear(); };

4. Terakhir Test Movie dengan menekan Ctrl+Enter pada keyboard.
Sourcenya dapat di download disini

Jam Digital

Setelah membuat kalender, tentu kurang lengkap rasanya jika kita tidak membuat jam. Kali ini kita akan membuat jam digital dengan sistem 24 jam. Berikut tutorialnya :
1. Buatlah 3 buah Dynamic Text dengan masing-masing Var : jam, menit, detik
2. Buatlah 2 buah Static Text dan berikan tanda : sebagi tulisannya
3. Ubah ukuran Static Text dan Dynamic Text sesuai panjang jumlah maksimal karakter yang akan dimuat dan atur letaknya.

4. Klik Frame 1 lalu tekan F9 dan masukan script berikut :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

onEnterFrame = function () { waktu = new Date(); jam = waktu.getHours(); menit = waktu.getMinutes(); detik = waktu.getSeconds(); if (jam<10) { jam = "0"+jam; } if (menit<10) { menit = "0"+menit; } if (detik<10) { detik = "0"+detik; } };

5. Terakhir Test Movie dengan menekan Ctrl+Enter pada keyboard.
Sourcenya dapat di download disini

JAM ANALOG

Tampilan jam analog yang akan kita buat di sini masih sederhana. Anda dapat mengembangkannya dengan memperbaiki bagian grafiknya. Sehingga nantinya jam akan terlihat lebih bagus lagi.

1. Buatlah flash document.

2. Buatlah sebuah gambar seperti di bawah ini. Anda dapat menggunakan oval tool, text tool, dan panel transform untuk membuatnya.



3. Untuk garisnya kami akan membuat ukurannya seperti ini : garis jam lebih panjang dari garis menit, garis menit lebih panjang dari garis detik, garis detik lebih panjang dari garis jam Anda dapat mengubah ukurannya sesuai keinginan anda.

4. Buatlah tiga buah garis seperti gambar di bawah ini :



5. Seleksi garis yang paling kecil, kemudian tekan F8. Pada panel yang muncul masukkan jam_mc dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan ok.



6. Seleksi movie clip jam_mc di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkanjam_mc sebagai instance name.

7. Seleksi garis kedua (garis yang tidak terlalu panjang), kemudian tekan F8. Pada panel yang muncul masukkan detik_mc dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan ok.

8. Seleksi movie clip detik_mc di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkandetik_mc sebagai instance name.

9. Seleksi garis ketiga (garis yang paling panjang), kemudian tekan F8. Pada panel yang muncul masukkanmenit_mc dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan ok.

8. Seleksi movie clip menit_mc di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkan menit_mc sebagai instance name.

9. Letakan movie clip jam_mc di tengah lingkaran yang kita buat sebelumnya.



10. Selanjutnya letakan movie clip menit_mc di tengah lingkaran (ditempat yang sama movie clip jam_mc berada).



11. Lalu letakan juga movie clip detik_mc di tengah lingkaran (ditempat yang sama movie clip jam_mc dan menit_mc berada).



12. Setelah semuanya terpasang, klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

//perintah yang dijalankan ketika frame dimainkan onEnterFrame = function () { //membuat variable waktu sebagai date object waktu = new Date(); //membuat variable jam dengan nilai sama dengan jam pada komputer jam = waktu.getHours(); //membuat variable menit dengan nilai sama dengan menit pada komputer menit = waktu.getMinutes(); //membuat variable detik dengan nilai sama dengan detik pada komputer detik = waktu.getSeconds(); //digunakan jika komputer menggunakan sistem 12 jam //jika nilai variable jam lebih dari 12 maka akan dikurangi 12 if (jam>12) { jam -= 12; } //movie clip jam_mc akan berotasi sesuai nilai variable jam dikali 30 yang ditambah nilai variable menit di bagi 2 jam_mc._rotation = jam*30+(menit/2); //movie clip jam_mc akan berotasi sesuai nilai variable menit dikali 6 menit_mc._rotation = menit*6; //movie clip detik_mc akan berotasi sesuai nilai variable detik dikali 6 detik_mc._rotation = detik*6; };

13. Tekan Ctrl+Enter untuk melihat hasilnya.
Sourcenya dapat di download di sini

KACA PEMBESAR

Kaca pembesar adalah suatu alat yang digunakan untuk membantu melihat objek menjadi tampak besar. Di Flash kita dapat membuat hal yang sama dengan menggunakan fasilitas yang sudah disediakan yaitu Mask. Sebelum membaca tutorial di bawah ini ada baiknya anda membaca terlebih dahulu Mask dan Masking dengan mouse

1. Buatlah sebuah flash document.

2. Tekan Ctrl+R, pada panel yang muncul cari gambar yang diinginkan kemudian tekan Open. Letakkan gambar tersebut di tengah-tengah stage.

3. Seleksi gambar yang dimport tadi dan tekan Ctrl+D untuk menduplikasi objek.

4. Seleksi gambar hasil duplikasi dan tekan F8. Pada panel yang muncul masukkan picture sebagai name dan movie clip sebagai type lalu tekan ok.

5. Ubah ukuran movie clip picture menjadi sedikit lebih besar dari gambar yang ada di stage. Letakkan movie clip picture di tengah-tengah stage.

6. Seleksi movie clip picture dan tekan Ctrl+F3. Pada panel properties yang muncul masukkan picture sebagai instance name.

7. Buatlah sebuah lingkaran dan seleksi lingkaran tersebut kemudian tekan F8. Pada panel yang muncul masukkan lingkaran sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.

8. Seleksi movie clip lingkaran dan masukkan lingkaran sebagai instance name pada panel properties.

9. Pastikan anda masih menyeleksi movie clip picture kemudian tekan F8. Pada panel yang muncul masukkan lensa sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.

10. Seleksi movie clip lensa dan masukkan lensa sebagai instance name pada panel properties.

11. Klik kanan movie clip lensa dan pilih Edit untuk masuk ke dalam stage movie clip lensa.

12. Gambarlah sebuah persegi panjang dan letakkan di samping movie clip lingkaran sehingga berbentuk seperti gambar di bawah ini :



Gambar movie clip lensa

13. Tekan Ctrl+E untuk kembali ke stage scene 1.

14. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :

1 2 3 4

//movie clip picture dimask oleh movie clip lingkaran di dalam movie clip lensa _root.picture.setMask(_root.lensa.lingkaran); //movie clip lensa dapat didrag startDrag(lensa, true);

15. Tekan Ctrl+Enter untuk melihat hasilnya :

Gerakkan kursor mouse untuk memperbesar gambar

Sourcenya dapat didownload di sini

KIPAS BERPUTAR

Kali ini kita akan membuat sebuah kipas yang bergerak apabila kita menekan tombol on dan berhenti bergerak apabila kita menekan tombol off.

1. Buatlah sebuah flash document.

2. Buatlah sebuah objek seperti di bawah ini :

3. Seleksi objek tersebut dan tekan F8. Pada panel yang muncul masukkan baling sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada ditengah-tengah lalu tekan ok.

4. Seleksi movie clip baling lalu tekan Ctrl+F3. Pada panel properties yang muncul masukkan baling dalam kotak instance name.

5. Buatlah sebuah static text berwarna putih bertuliskan OFF dan buatlah sebuah persegi panjang berwarna hitam dengan panjang dan lebar sama dengan panjang dan lebar static text bertuliskan OFF.

6. Seleksi static text dan persegi panjang tadi lalu tekan F8. Pada panel yang muncul masukkan onoff sebagai name dan movie clip sebagai type lalu tekan ok.

7. Seleksi movie clip onoff dan pada panel properties masukkan onoff sebagai instance name.

8. Pastikan anda masih menyeleksi movie clip onoff lalu tekan Ctrl+E untuk masuk ke dalam stage movie clip onoff.

9. Klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :

1

stop();

10. Klik kanan frame 2 dan pilih Insert Keyframe. Ubah warna static text di frame 2 menjadi merah dan juga ubah tulisannya menjadi ON.

11. Klik frame 2 dan masukkan script berikut pada panel actions:

1

stop();

12. Tekan Ctrl+E untuk kembali ke stage scene 1.

13. Klik frame 1 dan pada panel actions masukkan script berikut :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

//membuat variable bernama angka dengan nilai 0 angka = 0; baling.onEnterFrame = function() { //movie clip baling bertambah nilai rotasinya berdasarkan nilai variable angka this._rotation += angka; //jika movie clip onoff berada di frame 2 if (onoff._currentframe == 2) { //ubah nilai variable angka menjadi 7 angka = 7; //jika movie clip onoff tidak berada di frame 2 dan nilai variable angka lebih dari 0 } else if (angka>0) { //nilai variable angka dukurangi 0.2 angka -= 0.2; } }; //ketika tekanan pada movie clip onff dilepas setelah ditekan onoff.onRelease = function() { //jika movie clip ini berada di frame 1 if (this._currentframe == 1) { //mainkan frame 2 movie clip ini this.gotoAndStop(2); //jika tidak } else { //mainkan frame 1 movie clip ini this.gotoAndStop(1); } };

14. Tekan Ctrl+Enter untuk melihat hasilnya.

Sourcenya dapat di download di sini

MEMBUAT BINTANG DAN AWAN

Kita akan membahas cara membuat bintang dan awan sehingga akan terbentuk suasana langit di malam hari. Sama dalam pembuatan bulan, pada pembuatan bintang dan awan ini juga mengandalkan filter.

1. Bukalah fla yang terdapat pada tutorial bulan. Buat ukuran bulan sedikit mengecil dan tempatkan di bagian kiri atas stage

2. Lock Layer 1 lalu tekan tombol Insert Layer pada timeline.


Tekan tombol di tempat kursor berada pada gambar di atas, untuk lock layer 1

3. Pada layer yang baru, buatlah sebuah lingkaran cukup kecil di stage (akan digunakan sebagai bintang). Seleksi lingkaran tersebut dan tekan F8. Pada kotak dialog yang muncul masukkan bintang sebagai name dan movie clip sebagai type lalu tekan ok.

4. Klik movie clip bintang di stage dan tekan Ctrl+F3. Pada panel properties yang muncul tekan tab filters

5. Setelah berpindah ke panel filters, tekan add filter dan pilih Glow. ubah Blur X menjadi 5, Blur Y menjadi 5, Strength 100%, Quality Low, dan color berkode #CCCCCC


Tampilan pada Glow 1 movie clip bintang

6. Tekan add filter lagi dan pilih Glow. Pada Glow yang muncul masukkan settingan berikut : ubah Blur X menjadi 33, Blur Y menjadi 33, Strength 100%, Quality High, dan color berkode #FFFFFF


Tampilan pada Glow 2 movie clip bintang

7. Pastikan anda masih menyeleksi movie clip bintang di stage lalu tekan Ctrl+D sebanyak 15 kali. Letakan masing-masing bintang seperti di bawah ini:


Letak bulan dan bintang

8. Lock layer 2 kemudian tekan tombol Insert Layer pada timeline lagi.



Tekan tombol di tempat kursor berada pada gambar di atas, untuk lock layer 2


9. Pada layer yang baru buatlah sebuah objek berupa shape berwarna hitam tanpa garis yang akan digunakan untuk awan. Seleksi objek tersebut dan tekan F8. Pada kotak dialog yang muncul masukkan awan sebagai name dan movie clip sebagai type lalu tekan ok.



Gambar awan

10. Klik movie clip awan di stage dan tekan Ctrl+F3. Pada panel properties yang muncul ubah Color menjadi Alpha 64%. Jika sudah tekan tab Filters.

11. Setelah berpindah ke panel filters, tekan add filter dan pilih Blur. Ubah Blur X menjadi 20, Blur Y menjadi 20 dan Quality Low.



Tampilan Blur movie clip awan

12. Pastikan anda masih menyeleksi movie clip awan di stage lalu tekan Ctrl+D sebanyak 3 kali. Letakan masing-masing awan seperti di bawah ini:



Letak awan

14. Jumlah duplikasi dan letak masing-masing objek dapat anda ubah sesuai selera.

Sourcenya dapat di download di sini

SCROLLING BACKGROUND JIKA KEYBOARD DI TEKAN

Kita akan membuat background bergerak hanya jika tombol panah kanan/kiri pada keyboard ditekan.

1. Bukalah fla dari tutorial scrolling background dengan motion tween.
2. Tekan tombol insert layer pada timeline sehingga akan muncul layer baru bernama Layer 2. Klik frame 1 Layer 2 kemudian buatlah sebuah lingkaran kecil berwarna kuning dengan hitam sebagai warna garisnya.
3. Seleksi lingkaran tersebut dan tekan F8. Pada panel yang muncul masukkan pemain sebagai name dan movie clip sebagai type lalu tekan ok.
4. Seleksi movie clip pemain di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkanpemain sebagai instance name. Letakkan movie clip pemain ini pada stage bagian kiri atas.
5. Klik frame 1 Layer 2 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

//membuat variable kecepatan dengan nilai 2 kecepatan = 2; //membuat variable angka dengan nilai 1 angka = 1; //perintah yang dijalankan jika frame pada movie clip pemain dimainkan pemain.onEnterFrame = function() { //jika tombol panah kiri pada keyboard ditekan if (Key.isDown(Key.LEFT)) { //koordinat x movie clip ini dikurangi nilai variable kecepatan this._x -= kecepatan; //nilai variable angka dikurangi 1 angka--; //jika nilai variable angka kurang dari 1 if (angka<1) { //ubah nilai variable angka menjadi jumlah frame pada timeline scene 1 angka = _totalframes; } } //jika tombol panah kanan pada keyboard ditekan if (Key.isDown(Key.RIGHT)) { //koordinat x movie clip ini ditambah nilai variable kecepatan this._x += kecepatan; //nilai variable angka ditambah 1 angka++; //jika nilai variable angka lebih dari jumlah frame pada timeline scene 1 if (angka>_totalframes) { //ubah nilai variable angka menjadi 1 angka = 1; } } //jika tombol panah atas pada keyboard ditekan if (Key.isDown(Key.UP)) { //koordinat y movie clip ini dikurangi nilai variable kecepatan this._y -= kecepatan; } //jika tombol panah bawah pada keyboard ditekan if (Key.isDown(Key.DOWN)) { //koordinat y movie clip ini ditambah nilai variable kecepatan this._y += kecepatan; } //mainkan frame pada scene 1 sesuai nilai pada variable angka gotoAndStop(angka); };

6. Tekan Ctrl+Enter untuk melihat hasilnya.
7. Tekan tombol panah kanan/kiri untuk menggerakkan pemain dan bakground ke kanan/ke kiri. Tekan tombol panah atas/bawah untuk menggerakkan pemain ke atas/ke bawah.
Sourcenya dapat di download di sini

Hujan Jatuh

pada tutorial kali ini kita akan membuat sebuah animasi hujan yang disertai riak air apabila hujan tersebut menyentuh tanah.

1. Buatlah sebuah flash document.

2. Buatlah garis lingkaran berwarna hitam. Seleksi garis lingkaran ini kemudian tekan F8. Pada panel yang muncul masukkan garis_lingkaran sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.

3. Seleksi movie clip garis_lingkaran di stage kemudian tekan F8. Pada panel yang muncul masukkan riaksebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.

4. Klik kanan movie clip riak kemudian pilih Edit. Anda akan masuk ke dalam stage movie clip riak. Ubah bentuk movie clip garis_lingkaran menjadi seperti di bawah ini :

5. Klik kanan frame 15 kemudian tekan F6. Ubah ukuran movie clip garis_lingkaran pada frame 15 menjadi seperti di bawah ini :

6. Pastikan anda masih menyeleksi movie clip garis_lingkaran di frame 15 kemudian tekan Ctrl+F3. Pada panel properties yang muncul ubah Color menjadi Alpha 0%.

7. Klik kanan frame 1 dan pilih Create Motion Tween. Seleksi frame 15 kemudian tekan F9. Pada panel actionsyang muncul masukkan script berikut :

1

stop();

8. Tekan Ctrl+E untuk kembali ke stage scene 1. Hapus movie clip riak yang ada di stage.

9. Buatlah sebuah garis miring berwarna hitam. Seleksi garis ini kemudian tekan F8. Pada panel yang muncul masukkan garis_miring sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.

10. Seleksi movie clip garis_miring di stage kemudian tekan F8. Pada panel yang muncul masukkan hujansebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.

11. Klik kanan movie clip hujan kemudian pilih Edit. Anda akan masuk ke dalam stage movie clip hujan. Ubah bentuk dan posisi movie clip garis_miring menjadi seperti di bawah ini :

12. Klik kanan frame 14 kemudian tekan F6. Ubah letak movie clip garis_miring di frame 14 seperti gambar di bawah ini :

13. Seleksi frame 15 kemudian tekan F7. Pastikan anda masih berada di frame 15 kemudian tekan Ctrl+L. Padapanel library yang muncul drag movie clip riak ke dalam stage dan letakkan ditengah-tengah titik registration seperti gambar di bawah ini :

14. Seleksi movie clip riak di frame 15 kemudian pada panel properties masukkan riak sebagai instance name. Klik frame 15 kemudian pada panel actions masukkan script berikut :

1

stop();

15. Klik kanan frame 1 kemudian pilih Create Motion Tween. Jika sudah tekan Ctrl+E untuk kembali ke stagescene 1. Hapus movie clip hujan yang ada di stage.

16. Klik kanan movie clip hujan yang ada di panel library kemudian pilih Linkage. Pada panel yang muncul berikan tanda contreng pada Export for ActionScript dan masukkan hujan sebagai identifier kemudian tekan ok.

17. Klik frame 1 dan pada panel actions masukkan script berikut :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

waktu = 0; onEnterFrame = function () { waktu++; if (waktu == 2) { hujan = attachMovie("hujan", "hujan", _root.getNextHighestDepth(), {_x:random(300)+50, _y:random(350)+50}); hujan.onEnterFrame = function() { if (this._currentframe == 10 && this.riak._currentframe == 15) { this.removeMovieClip(); } }; waktu = 0; } };

18. Tekan Ctrl+Enter untuk melihat hasilnya.

Sourcenya dapat di download di sini

Membuat Animasi Ombak

1. Buka program macromedia flash 8
Ubah ukuran stage menjadi 768 x 576 pixels.
Ganti warna bacground menjadi warna hitam


2. Ganti warna fill color menjadi #336699 dan warna stroke dijadikan none:


3. Klik rectangle tool untuk membuat airnya dengan mendragnya ke stage seperti gambar dibawah ini.



4. Klik kanan di frame 15 lalu klik insert keyframe, Ubah gambar airnya dengan cara tarik ke atas menggunakan selection tool yang sebelah kiri. Gambarnya:

5. Klik di frame 1 lalu pilih tween shape. Gambarnya:


Di frame 35 klik kanan insert keyframe, Ubah gambarnya seperti ini>>


6. Klik Di frame 15 pilih tween shape


7. Lalu copy frame 1
caranya : klik kanan pada frame 1 dan pilih Copy Frames
kemudian Pastekan di frame 60


8. Klik Di frame 35 pilih tween shape
Seperti gambar dibawah ini:





Jika semua sudah selesai tinggal kita menekan ctrl + enter dan nikmati hasilnya

Contoh Program Absensi Sederhana

pertama kita buat dulu database untuk absensi nya dengan nama latihan.mdb, kemudian isi field-field databasenya seperti ini :


Nama Database : latihan.mdb
Nama Tabel : Absen

Field
Data Type
Size

NRP
Text
10

Nama
Text
35

Jurusan
Text
50

Matkul
Text
50

Masuk
Byte

Sakit
Byte

Izin
Byte

Alpa
Byte

Total
Byte



Setelah membuat database selesai, lalu buat desain form absen seperti ini :
Componen tambahan pada Toolbox :
Adodc dan DataGrid





Jika sudah, kita buat module baru, Klik Menu Project > Add Module > Open,,Kemudian akan muncul jendela kode, tuliskan kode perintah berikut :





Public ConN As New ADODB.Connection
Public RsAbsen As New ADODB.Recordset

Sub koneksi()
Set ConN = New ADODB.Connection
Set RsAbsen = New ADODB.Recordset
ConN.Open "Provider=microsoft.jet.oledb.4.0;data source = " & App.Path & "\latihan.mdb"
End Sub



Kemudian Save Module yang sudah kita isi dengan kode perintah diatas,,
Setelah itu isikan kode berikut pada Form



Private Sub Form_Activate()

Call koneksi
Adodc1.ConnectionString = "provider=microsoft.jet.oledb.4.0;data source=" & App.Path & "\latihan.mdb"
Adodc1.RecordSource = "absen"
Adodc1.Refresh
Set DataGrid1.DataSource = Adodc1
DataGrid1.Refresh
End Sub

Private Sub Form_Load()
Text1.Text = ""
Text2.Text = ""
Combo1.Text = ""
Combo2.Text = ""
Combo3.Text = ""
Label11.Caption = 0
Label12.Caption = 0
Label13.Caption = 0
Label14.Caption = 0
Label15.Caption = 0
Combo1.AddItem "Sistem Informasi"
Combo1.AddItem "Teknik Informatika"
Combo1.AddItem "Manajemen Informatika"
Combo1.AddItem "Komputer Akuntansi"
Combo2.AddItem "Pemprograman Visual I"
Combo2.AddItem "Pemprograman Visual II"
Combo3.AddItem "Hadir"
Combo3.AddItem "Tidak Hadir"
Option1.Value = False
Option2.Value = False
Option3.Value = False
Option1.Enabled = False
Option2.Enabled = False
Option3.Enabled = False
Text1.Enabled = False
Text2.Enabled = False
Combo1.Enabled = False
Combo2.Enabled = False
Combo3.Enabled = False
End Sub



Kemudian buat function cari data, sub tampilkan data dan kosong seperti dibawah ini :



Function CariData()
Call koneksi
RsAbsen.Open "Select * From absen where nrp='" & Text1 & "'", ConN
End Function

Private Sub TampilkanData()
Text2 = RsAbsen!nama
Combo1.Text = RsAbsen!jurusan
Combo2.Text = RsAbsen!matkul
Label11.Caption = RsAbsen!masuk
Label12.Caption = RsAbsen!sakit
Label13.Caption = RsAbsen!izin
Label14.Caption = RsAbsen!alpa
Label15.Caption = RsAbsen!total
End Sub



Private Sub kosong()
Text1.Text = ""
Text2.Text = ""
Combo1.Text = ""
Combo2.Text = ""
Combo3.Text = ""
Label11.Caption = 0
Label12.Caption = 0
Label13.Caption = 0
Label14.Caption = 0
Label15.Caption = 0
Option1.Value = False
Option2.Value = False
Option3.Value = False
Option1.Enabled = False
Option2.Enabled = False
Option3.Enabled = False
End Sub



Untuk pencarian data, masukkan kode perintah berikut pada Text1 dengan procedure Lostfocus :



Private Sub Text1_LostFocus()
On Error Resume Next
Call CariData
If Not RsAbsen.EOF Then
TampilkanData
Text1.Enabled = False
Text2.Enabled = False
Combo1.Enabled = False
Combo2.Enabled = False
MsgBox "NRP Sudah Ada"
Command1.Enabled = False
End If
End Sub



Pada Combo3 atau combo untuk kehadiran, isikan kode berikut untk proses perhitungan absen masuk :



Private Sub Combo3_Click()
If Combo3.Text = "Hadir" Then
Option1.Enabled = False
Option2.Enabled = False
Option3.Enabled = False
Label11.Caption = Val(Label11.Caption) + 1
Else
Option1.Enabled = True
Option2.Enabled = True
Option3.Enabled = True
End If
End Sub



Kemudain Pada Option 1, 2 dan 3, isikan kode perintah untuk menghitung absen alasan tidak hadir dan total tidak hadir :



Private Sub Option1_Click()
If Option1.Value = True Then
Label12.Caption = Val(Label12.Caption) + 1
Else
Label12.Caption = Val(Label12.Caption) + 0
End If
Label15.Caption = Val(Label12.Caption) + Val(Label13.Caption) + Val(Label14.Caption)
End Sub

Private Sub Option2_Click()
If Option2.Value = True Then
Label13.Caption = Val(Label13.Caption) + 1
Else
Label13.Caption = Val(Label13.Caption) + 0
End If
Label15.Caption = Val(Label12.Caption) + Val(Label13.Caption) + Val(Label14.Caption)
End Sub

Private Sub Option3_Click()
If Option3.Value = True Then
Label14.Caption = Val(Label14.Caption) + 1
Else
Label14.Caption = Val(Label14.Caption) + 0
End If
Label15.Caption = Val(Label12.Caption) + Val(Label13.Caption) + Val(Label14.Caption)
End Sub




Terakhir isikan kode perintah untuk command simpan, edit, absen, hapus, isi data dan selesai :




Private Sub Command1_Click() 'Kode Perintah Untuk tombol Simpan
Dim SQLSimpan As String
SQLSimpan = "Insert Into absen (nrp,nama,jurusan,matkul) values ('" & Text1 & "','" & Text2 & "','" & Combo1.Text & "','" & Combo2.Text & "')"
ConN.Execute SQLSimpan
Form_Activate
Call kosong
End Sub


Private Sub Command2_Click() ' Kode Perintah Untuk tombol Edit
If Command2.Caption = "Edit Data" Then
Text1.Enabled = False
Text2.Enabled = True
Combo1.Enabled = True
Combo2.Enabled = True
Combo3.Enabled = True
Command2.Caption = "Edit"
Else

Dim SQLAbsen As String
SQLAbsen = "Update absen Set nama='" & Text2.Text & "'," & " matkul='" & Combo2.Text & "'," & " jurusan='" & Combo1.Text & "' where nrp='" & Text1 & "'"
ConN.Execute SQLAbsen
Form_Activate
Call kosong
Command2.Caption = "Edit Data"
End If
End Sub

Private Sub Command3_Click() 'Kode Perintah Untuk Tombol Absen
Dim SQLAbsen As String
SQLAbsen = "Update absen Set masuk= '" & Label11.Caption & "'," & " sakit='" & Label12.Caption & "'," & " izin='" & Label13.Caption & "'," & " alpa='" & Label14.Caption & "'," & " total='" & Label15.Caption & "' where nrp='" & Text1 & "'"
ConN.Execute SQLAbsen
Form_Activate
Call kosong
End Sub

Private Sub Command4_Click() 'KOde Perintah Untuk Tombol Hapus
Adodc1.Recordset.Delete
Adodc1.Recordset.Update
DataGrid1.Refresh
End Sub

Private Sub Command5_Click() 'Kode Perintah Untuk Tombol Selesai
pesan = MsgBox("Anda Yakin Ingin Keluar Dari Program ini?", vbQuestion + vbYesNo, "Keluar")
If pesan = vbYes Then
Unload Me
Else
End If
End Sub

Private Sub Command6_Click() 'Kode Perintah Untuk Tombol Isi Data
Text1.Enabled = True
Text2.Enabled = True
Combo1.Enabled = True
Combo2.Enabled = True
Combo3.Enabled = True
Text1.SetFocus
End Sub

Membuat Program Bilangan Matriks

A. Buatlah New Project pada software VB anda kemudian tambahkan tiga buah label, tiga commandbutton dan dua textbox pada form. Kemudian ubah properti masing-masing dan Atur form seperti pada gambar berikut :

B. kemudian ketikkan code/listing/script program berikut :
Private Sub Command1_Click()
Dim a, b, i As Integer
i = 1
b = Text1.Text
For a = 1 To b
i = i * a
Next
Text2.Text = i
End Sub


Private Sub Command2_Click()
Text1.Text = ""
Text2.Text = ""
Text1.SetFocus
End Sub


Private Sub Command3_Click()
End
End Sub
C. Run(F5) dan coba masukkan nilai faktorial 4 dimana 4!=1x2x3x4=24 berikut dapat anda lihat hasilnya pada gambar dibawah ini :



contoh 2 : Membuat Program Penghitung Determinan dan Penjumlahan, Perkalian Matriks Berordo 2x2 dengan VB 6.0
A. Buatlah New Project pada software VB anda kemudian tambahkan 5 buah label, tiga commandbutton, 13 textbox dan 3 optionbutton pada form. Kemudian ubah properti masing-masing dan Atur form seperti pada gambar berikut :


B. kemudian ketikkan code/listing/script program berikut :
Private Sub Command1_Click()
If Option2.Value = True Then
Text12.Text = Val(Text1.Text) + Val(Text8.Text)
Text11.Text = Val(Text2.Text) + Val(Text7.Text)
Text10.Text = Val(Text3.Text) + Val(Text6.Text)
Text9.Text = Val(Text4.Text) + Val(Text5.Text)
ElseIf Option3.Value = True Then
Text13.Text = (Val(Text1.Text) * Val(Text4.Text) - Val(Text2.Text) * Val(Text3.Text)) + (Val(Text8.Text) * Val(Text5.Text) - Val(Text7.Text) * Val(Text6.Text))
Else
Text12.Text = (Val(Text1.Text) * Val(Text8.Text)) + (Val(Text2.Text) * Val(Text6.Text))
Text11.Text = (Val(Text1.Text) * Val(Text7.Text)) + (Val(Text2.Text) * Val(Text5.Text))
Text10.Text = (Val(Text3.Text) * Val(Text8.Text)) + (Val(Text4.Text) * Val(Text6.Text))
Text9.Text = (Val(Text3.Text) * Val(Text7.Text)) + (Val(Text4.Text) * Val(Text5.Text))
End If
End Sub


Private Sub Command2_Click()
Text1.Text = ""
Text2.Text = ""
Text3.Text = ""
Text4.Text = ""
Text5.Text = ""
Text6.Text = ""
Text7.Text = ""
Text8.Text = ""
Text9.Text = ""
Text10.Text = ""
Text11.Text = ""
Text12.Text = ""
Text13.Text = ""
Text1.SetFocus
End Sub


Private Sub Command3_Click()
End
End Sub
C. Silahkan run(F5) program anda coba masukkan nilai pada matriks A dan matriks B kemudian pilih salah satu option lalu tekan tombol proses,,selamat mencoba !

Membuat Aplikasi Penjualan Sederhana dengan Visual Basic 6.0

cara membuat aplikasi penjualan yang sangat sederhana menggunakan visual basic 6.0 dengan database SQL Server 2000. Pastikan Anda sudah mengaktifkan SQL Server Service Manager. . Kemudian buatlah database dengan nama “Penjualan”, . Lalu buatlah beberapa tabel dengan struktur tabel seperti di bawah ini :
Tabel Barang








Tabel Penjualan


Tabel Penjualan Detail



Membuat Tampilan Master Barang

Sekarang membuat tampilan form master data barang. Jadi intinya, seluruh data barang yang ada dapat di input ke dalam database melalui form master barang ini. Namun sebelum bekerja membuat form ini, aktifkan dulu komponen-komponen tambahan yang diperlukan dalam form ini. Yaitu, Microsoft ADO Data Control 6.0 (OLEDB) dan Microsoft DataGrid Control 6.0 (OLEDB). Caranya klik menu Project – Components, atau tekan tombol Ctrl+T.

Pada jendela Components, pilih Microsoft ADO Data Control 6.0 (OLEDB) dan Microsoft DataGrid Control 6.0 (OLEDB). Lalu klik OK.

Hasilnya dapat dilihat di panel sebelah kiri.

Kemudian buatlah tampilan form seperti gambar di bawah ini, dengan menambahkan beberapa komponen ke dalam form, yaitu:

Frame : 4
Label : 4
TextBox : 5
CommandButton : 8
DataGrid : 1
Adodc : 2


Atur properties masing-masing komponen seperti tabel berikut :


Komponen Properties Nilai
Form Name frmBarang
BorderStyle 1 – Fixed Single
Caption .:: Master Data Barang ::.
StartUpPosition 2 – CentreScreen
Frame1 Name Frame1
Text

Label1 Caption Kode
TextBox1 Name TxtKodeBarang
TabIndex 1
Text

Label2 Caption Nama
TextBox2 Name TxtNamaBarang
TabIndex 2
Text

Label3 Caption Harga
TextBox3 Name TxtHarga
TabIndex 3
Text

Label4 Caption Stock
TextBox4 Name TxtStok
TabIndex 4
Text

Frame2 Name Frame2
Text

Command1 Name CmdTambah
Caption Tambah
TabIndex 5
Command2 Name CmdUbah
Caption Ubah
TabIndex 6
Command3 Name CmdHapus
Caption Hapus
TabIndex 7
Frame3 Name Frame3
Text Masukkan Kode Barang
TextBox4 Name TxtCari
TabIndex 8
Text

Command4 Name CmdCari
Caption Cari
TabIndex 9
Frame4 Name Frame4
Text

Command5 Name CmdFirst
Caption <<
TabIndex 10
Command6 Name CmdPrev
Caption <
TabIndex 11
Command7 Name CmdNext
Caption >
TabIndex 12
Command8 Name CmdLast
Caption >>
TabIndex 13
DataGrid1 DataSource Adodc1
Adodc1 Name Adodc1
Visible False
Adodc2 Name Adodc2
Visible False




Setelah semua properties diatur, maka akan menghasilkan tampilan seperti ini:


Membuat Koneksi Database



Klik kanan komponen Adodc1 – pilih ADODC Properties.
Pada tab General di jendela Property Page, pilih Use Connection String – klik tombol Build…

Pada tab Provider pilih Microsoft OLE DB Provider for SQL Server, lalu klik Next.

Pada tab Connection isikan nama server (contoh: yasmui), kemudian pilih Use Windows NT Integrated security, kemudian pilih Select the database on the server dan pilih database yang akan digunakan (contoh:Penjualan).

Kemudian klik tombol Test Connection lalu klik OK. Jika koneksi sukses maka akan keluar informasi berikut ini :

Anda akan dihadapkan pada jendela Property Page lagi. Sekarang pilih tab RecordSource, pada Command Type pilih 2 – adCmdTable, lalu pada Table or Store Procedure Name pilih tabel Barang. Kemudian klikApply – OK.


Lakukan hal yang sama pada komponen Adodc2 seperti langkah 1-6.
Kemudian atur lagi properties TextBox (TxtKodeBarang, TxtNamaBarang, TxtHarga, TxtStok) seperti tabel di bawah ini :

Komponen Properties Nilai
TxtKodeBarang DataSource Adodc1
DataField Id_Barang
TxtNamaBarang DataSource Adodc1
DataField Nama_Barang
TxtHarga DataSource Adodc1
DataField Harga_Barang
TxtStok DataSource Adodc1
DataField Stok




Menulis Coding Program


Masuklah pada halaman kode, klik menu View – Code
Dari baris pertama halaman kode tulis coding untuk membuat kode barang otomatis, seperti berikut ini :

Kembali pada halaman desain form, klik View – Object. Kemudian klik ganda tombol Tambah dan tulis coding berikut ini :

Kembali pada halaman desain form. Kemudian klik ganda tombol Ubah dan tulis coding berikut ini :

Kembali pada halaman desain form. Kemudian klik ganda tombol Hapus dan tulis coding berikut ini :

Kembali pada halaman desain form. Kemudian klik ganda tombol Cari dan tulis coding berikut ini :

Kembali pada halaman desain form. Kemudian klik ganda tombol << dan tulis coding berikut ini :

Kembali pada halaman desain form. Kemudian klik ganda tombol < dan tulis coding berikut ini :

Kembali pada halaman desain form. Kemudian klik ganda tombol > dan tulis coding berikut ini :

Kembali pada halaman desain form. Kemudian klik ganda tombol >> dan tulis coding berikut ini :

Kembali pada halaman desain form. Kemudian klik ganda TextBox Harga (txtHarga)
dan tulis coding berikut ini :

Kembali pada halaman desain form. Kemudian klik ganda TextBox Stok (TxtStok)
dan tulis coding berikut ini :


Menjalankan Program

Setelah semua langkah-langkah di atas sudah selesai, Anda dapat menjalankan program tersebut dengan menekan F5atau Run. Jika segala sesuatunya sukses, maka akan muncul tampilan seperti gambar di bawah ini :

Untuk menambah data, klik tombol Tambah, lalu masukkan data seperti contoh berikut :


Kemudian klik tombol Simpan, maka data yang dimasukkan tadi telah tersimpan di database.