MEMBUAT SOAL ESSAY DENGAN FLASH 8

Jika beberapa waktu yang lalu saya berbagi tutorial bagaimana membuat Soal Interaktif Pilihan Ganda, kali ini saya akan berbagi bagaimana membuat Soal Interaktif Essay.
Langsung ke TKP sob…
Langkah 1. Buat flash dokumen baru dan buatlah 2 buah Layer dan beri nama Layer1 dengan nama latar dan Layer2 dengan nama essay.
clip_image002
Langkah 2. Masukkan gambar latar pada Layer latar sesuai keinginan sobat, kemudian kuncilah Layer latarnya.
clip_image004
Langkah 3. Klik Frame1 Layer essay dan buatlah desain soal seperti gambar berikut :
clip_image006
Keterangan :
A. Soal; Properti : Static Text
B. Kotak Jawaban;
Properti jawaban nomor 1 : var isi dengan “jawaban1” (tanpa tanda petik)
Properti jawaban nomor 2 : var isi dengan “jawaban2” (tanpa tanda petik)
Properti jawaban nomor 3 : var isi dengan “jawaban3” (tanpa tanda petik)
Properti jawaban nomor 4 : var isi dengan “jawaban4” (tanpa tanda petik)
Properti jawaban nomor 5 : var isi dengan “jawaban5” (tanpa tanda petik)
C. Tanda Benar / Salah
Jawaban nomor 1, Properti : tipe Movie Clip, Instance Name : tanda1
Jawaban nomor 2, Properti : tipe Movie Clip, Instance Name : tanda2
Jawaban nomor 3, Properti : tipe Movie Clip, Instance Name : tanda3
Jawaban nomor 4, Properti : tipe Movie Clip, Instance Name : tanda4
Jawaban nomor 5, Properti : tipe Movie Clip, Instance Name : tanda5
D. Nilai; Properti : Static Text
E. Isi Nilai; Properti : Dynamic Text
F. Tombol;
Langkah 4. Klik Frame 1 pada Layer Essay. Sebagai contoh, buatlah 5 pertanyaan essay pada Static Text.
clip_image008
Langkah 5. Buatlah 5 buah input text dengan masing-masing Var : Jawaban1, Jawaban2, Jawaban3, Jawaban4 dan Jawaban5, dan Maximum Characters : 6.
clip_image010
…..
Langkah 6. Buatlah tanda Benar (contreng) dan tanda Salah (silang) disamping kanan input text jawaban, dengan cara :
Buatlah lingkaran menggunakan Oval Tool. Selanjutnya seleksi gambar lingkaran kemudian tekan F8 dan aturlah seperti gambar berikut :
clip_image012
Dan pada propertinya beri Instance Name dengan nama tanda1.
clip_image014
Lakukan langkah yang sama untuk soal nomor 2 sampai dengan nomor 5.
Langkah 7. Dobel klik gambar lingkaran yang telah menjadi Movie clip, tambah/insert keyframe pada frame2 dan frame3.
Berikut… klik frame2, gambarlah tanda contreng (benar) dan tanda silang (salah) pada frame3.
clip_image016
clip_image018
Jika sudah masukkan Action script :
  1. stop();
pada frame1, frame2, frame2
clip_image020
Lakukan langkah yang sama untuk soal nomor 2 sampai dengan nomor 5.
Langkah 8. Klik Layer Essay, kemudian aktifkan Actionnya dengan menekan tombol F9 dan silahkan copas action berikut :
  1. //daftar untuk jawaban yang benar
  2. jawaban_benar1 = "200";
  3. jawaban_benar2 = "1";
  4. jawaban_benar3 = "0";
  5. jawaban_benar4 = "10000";
  6. jawaban_benar5 = "101";
  7. //nilai pertama kali sama dengan 0
  8. nilai = 0;
Klik tombol Koreksi, kemudian aktifkan Actionnya dengan menekan tombol F9 dan silahkan copas action berikut :
  1. //ketika mouse diklik
  2. on (release) {
  3. //menghasilkan variable i=1, i=2, i=3, i=4, i=5
  4. for (i=1; i<6; i++) {
  5. //jika jawaban +i sama dengan jawaban +i
  6. if (_root["jawaban"+i] == _root["jawaban_benar"+i]) {
  7. //nilai ditambah 1
  8. nilai += 1;
  9. //tanda+i pindah ke frame 2
  10. _root["tanda"+i].gotoAndStop(2);
  11. } else {
  12. //tanda+i pindah ke frame 3
  13. _root["tanda"+i].gotoAndStop(3);
  14. }
  15. }
  16. koreksi.enabled = false; //tombol koreksi tidak bisa ditekan
  17. koreksi._alpha = 40; //tombol koreksi lebih transparan
  18. }
clip_image022
Klik tombol Reset, kemudian aktifkan Actionnya dengan menekan tombol F9 dan silahkan copas action berikut :
  1. on (release) {
  2. koreksi.enabled = true; //tombol koreksi dapat ditekan
  3. koreksi._alpha = 100; //warna tombol koreksi tidak transparan
  4. nilai = 0; //nilai diubah menjadi 0
  5. for (i=1; i<6; i++) { //menghasilkan variable i=1, i=2, i=3, i=4, i=5
  6. _root["jawaban_user"+i] = ""; //jawaban_user+i dikosongkan
  7. _root["tanda"+i].gotoAndStop(1); //tanda+i pindah ke frame 1
  8. }
  9. }
clip_image024
Langkah 9. Simpan project sobat dan cona jalankan project sobat.

Untuk file latihannya silahkan download disini
 

MEMBUAT TEKSTUR KAYU MENGGUNAKAN PHOTOSHOP

clip_image002
Sebuah trik sederhana bagaimana kita membuat tekstur kayu menggunakan photoshop, yang hasilnya sobat lihat seperti gambar di atas.
Berikut cara membuatnya :
1. Jalankan photoshop sobat dan buat dokument baru dengan ketentuan seperti gambar di bawah.
clip_image004
2. Ubahlah Fill-nya menjadi warna Hitam dengan cara : klik Edit – Fill, kemudian pada kotak dialog Fill
clip_image006
3. Klik Filter – Noise – Add Noise…
clip_image008
Kemudian pada kotak dialog Add Noise ubahlah pengaturannya seperti gambar berikut :
clip_image010
4. Klik Filter – Blur – Motion Blur…
clip_image012
Kemudian pada kotak dialog Motion Blur ubahlah pengaturannya seperti gambar berikut :
clip_image014
5. Klik Filter – Sketch – Chrome…
clip_image016
Pada kotak dialog Chrome aturlah Detailnya menjadi 6 dan Smoothness menjadi 10
clip_image018
Demikian tips bagaimana membuat tekstur kayu menggunakan photoshop, semoga bermanfaat.

 

SOURCE CODE TERBILANG

Source code dalam tutorial ini berfungsi menterjemahkan angka menjadi tulisan terbilang dengan bahasa Indonesia dari besar uang yang dimasukkan ke dalam textbox.

Persiapan : Buatlah desain tampilan tampilan seperti gambar berikut :

clip_image001

Jika sobat selesai membuat form seperti gambar diatas lanjutkan menulis codingnya dengan cara :

Klik View – Code dan tuliskan code berikut :

  1. Public Function Terbilang(strAngka As String, Optional MataUang As String = "rupiah") As String
  2. Dim strJmlHuruf$, intPecahan As Integer
  3. Dim strPecahan$, Urai$, Angka1$, strTot$, Angka2$
  4. Dim X As Integer, Y As Integer, z As Integer
  5. On Error GoTo Pesan
  6. Dim strValid As String, huruf As String * 1
  7. Dim i As Integer

  1. 'Periksa setiap karakter yg diketikkan ke kotak UserID
  2. strValid = "1234567890"
  3. For i% = 1 To Len(strAngka)
  4. huruf = Chr(Asc(Mid(strAngka, i%, 1)))
  5. If InStr(strValid, huruf) = 0 Then
  6. Set AngkaTerbilang = Nothing
  7. MsgBox "Harus karakter angka!", _
  8. vbCritical, "Karakter Tidak Valid"
  9. Exit Function
  10. End If
  11. Next i%
  12. If strAngka = "" Then Exit Function
  13. If Len(Trim(strAngka)) > 15 Then GoTo Pesan
  14. strJmlHuruf = LTrim(strAngka)
  15. 'intPecahan = Val(Right(Mid(strAngka, 15, 2), 2))
  16. If (intPecahan = 0) Then
  17. strPecahan = ""
  18. Else
  19. 'strPecahan = LTrim(Str(intPecahan)) + "/100 "
  20. strPecahan = ""
  21. End If
  22. X = 0
  23. Y = 0
  24. Urai = ""
  25. While (X < Len(strJmlHuruf))
  26. X = X + 1
  27. 218
  28. strTot = Mid(strJmlHuruf, X, 1)
  29. Y = Y + Val(strTot)
  30. z = Len(strJmlHuruf) - X + 1
  31. Select Case Val(strTot)
  32. Case 1
  33. If (z = 1 Or z = 7 Or z = 10 Or z = 13) Then
  34. Angka1 = "satu "
  35. ElseIf (z = 4) Then
  36. If (X = 1) Then
  37. Angka1 = "se"
  38. Else
  39. Angka1 = "satu "
  40. End If
  41. ElseIf (z = 2 Or z = 5 Or z = 8 Or z = 11 Or z = 14) Then
  42. X = X + 1
  43. strTot = Mid(strJmlHuruf, X, 1)
  44. z = Len(strJmlHuruf) - X + 1
  45. Angka2 = ""
  46. Select Case Val(strTot)
  47. Case 0: Angka1 = "sepuluh "
  48. Case 1: Angka1 = "sebelas "
  49. Case 2: Angka1 = "dua belas "
  50. Case 3: Angka1 = "tiga belas "
  51. Case 4: Angka1 = "empat belas "
  52. Case 5: Angka1 = "lima belas "
  53. Case 6: Angka1 = "enam belas "
  54. Case 7: Angka1 = "tujuh belas "
  55. Case 8: Angka1 = "delapan belas "
  56. Case 9: Angka1 = "sembilan belas "
  57. End Select
  58. Else
  59. Angka1 = "se"
  60. End If
  61. Case 2: Angka1 = "dua "
  62. Case 3: Angka1 = "tiga "
  63. Case 4: Angka1 = "empat "
  64. Case 5: Angka1 = "lima "
  65. Case 6: Angka1 = "enam "
  66. Case 7: Angka1 = "tujuh "
  67. Case 8: Angka1 = "delapan "
  68. Case 9: Angka1 = "sembilan "
  69. Case Else
  70. Angka1 = ""
  71. End Select
  72. If (Val(strTot) > 0) Then
  73. If (z = 2 Or z = 5 Or z = 8 Or z = 11 Or z = 14) Then
  74. Angka2 = "puluh "
  75. ElseIf (z = 3 Or z = 6 Or z = 9 Or z = 12 Or z = 15) Then
  76. Angka2 = "ratus "
  77. Else
  78. Angka2 = ""
  79. End If
  80. Else
  81. Angka2 = ""
  82. End If
  83. 219
  84. If (Y > 0) Then
  85. Select Case z
  86. Case 4: Angka2 = Angka2 + "ribu "
  87. Y = 0
  88. Case 7: Angka2 = Angka2 + "juta "
  89. Y = 0
  90. Case 10: Angka2 = Angka2 + "milyar "
  91. Y = 0
  92. Case 13: Angka2 = Angka2 + "trilyun "
  93. Y = 0
  94. End Select
  95. End If
  96. Urai = Urai + Angka1 + Angka2
  97. Wend
  98. Urai = Urai + strPecahan
  99. Terbilang = (Urai & MataUang)
  100. Exit Function
  101. Pesan:
  102. Terbilang = "(maksimal 15 digit)"
  103. End Function

clip_image003

Terakhir :

Untuk TextBox1 tuliskan codingnya seperti berikut :

  1. Private Sub Text1_Change()
  2. Label4.Caption = Terbilang(Text1.Text)
  3. End Sub

clip_image005

 

 

 

MENGGERAKKAN OBYEK MENGIKUTI MOUSE

Jika beberapa waktu yang lalu saya menulis bagaimana cara membuat animasi yang bergerak mengikuti anak panah keyboard, kali ini saya akan berbagi dengan sobat bagaimana membuat MENGGERAKKAN OBYEK MENGIKUTI MOUSE.
Tanpa basa basi, langsung saja sob……
Langkah 1.
  • Pastinya jalankan Macromedia Flash Sobat.
  • Buat flash dokumen baru.
  • Buatlah 2 buah Layer dan beri nama Layer 1 dengan nama “pesawat” dan Layer 2 dengan nama “action” (tanpa tanda petik).
clip_image002
clip_image004
Langkah 2.
Klik Layer “pesawat” dan masukkan gambar pesawat dengan cara klik File – Import – Import to Stage…, kemudian pilih gambar yang ingin sobat buat animasinya. (sebagai contoh saya menggunakan gambar pesawat tempur).
clip_image006
Langkah 3.
Klik gambar pesawat, lanjutkan dengan klik Modify – Convert to Symbol…
clip_image008
Pada kota dialog Convert to Symbol pastikan pilihan sobat seperti yang terdapat pada gambar dibawah dan lanjutkan dengan klik OK.
clip_image010
Langkah 4.
Masih di gambar pesawat, klik Windows – Properties - Properties
clip_image012
Pada kotak dialog properties isi instance name dengan “pesawat_mc”
clip_image014
Langkah 5 (Terakhir).
Klik Layer “action” frame 1, kemudian tekan tombol keyboard F9 untuk mengaktifkan kotak dialog action dan tuliskan code berikut :
  1. _root.onEnterFrame=function(){
  2. //mencari selisih dari koordinat
  3. var deltaX = _xmouse - pesawat_mc._x;
  4. var deltaY = _ymouse - pesawat_mc._y;
  5. //menggerakkan kumbang ke kursor sebesar 1/10 dari jarak ke kursor
  6. pesawat_mc._x += deltaX / 10;
  7. pesawat_mc._y += deltaY / 10;
  8. //kumbang menghadap ke mouse
  9. pesawat_mc._rotation = -Math.atan2(-deltaX,-deltaY)*180/Math.PI;
  10. }
clip_image016
Jika selesai menuliskan codenya cobalah untuk menjalankan animasinya dengan menekan tombol Ctrl + Enter dan silahkan sobat gerakkan mouse sobat.


 

MENGGERAKKAN OBYEK DENGAN KEYBOARD

Sudah lama tidak menulis tentang ANIMASI MACROMEDIA FLASH 8.
Sekarang saya akan berbagi dengan sobat tentang bagaimana caranya menggerak suatu obyek (gambar) dengan menggunakan keyboard menggunakan aplikasi Macromedia Flash 8.
Tanpa basa basi, langsung saja sob……
Langkah 1.
Pastinya jalankan Macromedia Flash Sobat.
Buat flash dokumen baru.
Import obyek dengan cara : File – Import – Import to Stage…, kemudian pilih gambar yang ingin sobat buat animasinya. (sebagai contoh saya menggunakan gambar pesawat tempur).
clip_image002
Perhatikan gambar berikut :
clip_image004

Langkah 2.
Silahkan sobat convert gambar pesawat menjadi Movie clip dengan cara, klik Modify – Convert to Symbol…
clip_image006
Pada kota dialog Convert to Symbol pastikan pilihan sobat seperti yang terdapat pada gambar dibawah dan lanjutkan dengan klik OK.
clip_image008

Langkah 3.
Klik gambar pesawat tempur, kemudian tekan tombol keyboard F9 untuk mengaktifkan kotak action dan tuliskan code berikut :
  1. onClipEvent (enterFrame) {
  2. if (Key.isDown(Key.LEFT)) {
  3. this._x -= 10;
  4. this._rotation = 270;
  5. } else if (Key.isDown(Key.RIGHT)) {
  6. this._x += 10;
  7. this._rotation = 90;
  8. } else if (Key.isDown(Key.UP)) {
  9. this._y -= 10;
  10. this._rotation = 0;
  11. } else if (Key.isDown(Key.DOWN)) {
  12. this._y += 10;
  13. this._rotation = 180;
  14. }
  15. }

Jika selesai menuliskan codenya cobalah untuk menjalankan animasinya dengan menekan tombol Ctrl + Enter dan untuk menggerakan obyek gunakan tombol anak panah pada keyboard sobat.
file latihan ini bisa sobat download disini


 

TIP MEWARNAI PAKAIAN MENGGUNAKAN PHOTOSHOP

Tips Photoshop kali akan membahas tentang bagaimana mewarnai pakaian sesuai dengan keinginan kita.
Perhatikan gambar hasil dari mewarnai.
clip_image002
Caranya :
Langkah 1.
Jalankan Photoshop sobat dan buka gambar yang akan diwarnai. Sebagai contoh saya membuka gambar muslimah berhijab.
clip_image004
Langkah 2.
Duplikasikan image dengan menekan Ctrl + J, maka pada Panel Layer akan terbentuk Background dan Layer 1.
clip_image006
Langkah 3.
Pada Layer 1, silahkan sobat seleksi bagian hijab menggunakan Polygonal Lasso Tool.
clip_image008
Hingga membentuk seleksi seperti gambar berikut : (perhatikan garis putus-putus di tepi hijab)
clip_image010
Selanjutnya kembali kita membuat seleksi bagian wajah dengan cara tekan dan tahan tombol Alt lalu buatlah seleksi pada bagian wajah, hingga tampak seperti gambar di bawah :
clip_image012
Langkah 3.
Jika langkah 2 selesai lanjutkan dengan membuat Layer dengan cara klik Layer – New – Layer .
clip_image014
Pada kotak dialog New Layer silahkan sobat langsung saja klik OK.
Langkah 4.
Pada Layer yang baru sobat buat (Layer 2), klik Foreground Colour
clip_image016
dan pilih warna yang sobat suka, kemudian lanjutkan dengan klik Brush Tool
clip_image018
Jika sudah, sapukan warna ke dalam seleksi hijab (ingat warna di Layer 2).
clip_image020
clip_image021
Aturlah Blending Optionnya dari Normal menjadi Multiply. Dan lanjutkan dengan menghilangkan seleksi pada hijab dengan menakan Ctrl + D.
clip_image023
Dan hasilnya akan seperti gambar berikut :
clip_image025

 

TIPS MEWARNAI MATA MENGGUNAKAN PHOTOSHOP

Tutorial kali ini saya berbagi bagaimana mewarnai mata menggunakan Photoshop. Tips ini juga bisa sobat berlakukan untuk mewarnai bibir.
Langsung ke TKP Sob :
Langkah 1.
Jalankan Photoshop Sobat dan buka gambar yang sobat akan warnai matanya.
clip_image002
Langkah 2.
Seleksi obyek mata menggunakan Polygonal Lasso Tool.
clip_image004
Hingga obyek mata terseleksi seperti gambar berikut :
clip_image006
Langkah 3.
Klik Image – Adjustments – Variations…
clip_image008
Pada kotak dialog Varitions silahkan sobat pilih warna yang sobat disukai, jika sudah klik OK.
o… ya ini hasil pilihan saya :
clip_image010

 
 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. ingin berbagi - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger