tutorial game edukasi sederhana flash cs6
TRANSCRIPT
Materi ini boleh diperbanyak, diganti, dengan atau tanpa menyebut sumbernya, dengan atau tanpa seijin pembuatnya
GAME EDUKASI SEDERHANA dengan FLASH CS6
Membuat Dokumen Baru dan Animasi pertama Siapkan gambar dan suara yang dibutuhkan, jika ingin mendownload bisa didapatkan di alamat : http://bit.ly/1AFavhu
1. Klik file, new
2. Pastikan memilih ActionScript2 3. klik OK
4. Simpan difolder kerja, Klik file, save, atau
Ctrl+S, berinama Latihan
Materi ini boleh diperbanyak, diganti, dengan atau tanpa menyebut sumbernya, dengan atau tanpa seijin pembuatnya
5. Klik library 6. Buka folder berisi gambar yang sudah Anda siapkan 7. Klik Drag, gambar-gambar ke dalam library
8. Klik Drag, suara-suara ke dalam library
9. Klik Drag bg.jpg (BackGround) dari library kedalam
jendela utama 10. Atur Letaknya agar sesuai
11. Klik tool TEXT, 12. Klik di Jendela Utama, Ketikan BELAJAR BAHASA 13. Klik kanan pada tulisan BELAJAR BAHASA pilih
Convert to Symbol
14. Pada kolom name ketikan, Judul 15. Klik OK
Materi ini boleh diperbanyak, diganti, dengan atau tanpa menyebut sumbernya, dengan atau tanpa seijin pembuatnya
16. Buat tiga tulisan lagi “Belajar”, “Bermain”, dan “Keluar”
17. Susun sehingga seperti gambar berikut 18. Dengan cara yang sama dengan judul, Convert ke
symbol masing-masing tulisan, belajar , bermain dan keluar, tetapi hati-hati, kali ini TYPE nya adalah BUTTON
19. Klik tool Selection, 20. Dobel klik, tulisan BELAJAR BAHASA , dan warna
jendela akan memburam Keterangan diatas akan berubah, artinya kita sedang memodifikasi Judul secara khusus
21. Klik kanan tulisan BELAJAR BAHASA , pilih Create Motion Tween
22. Pada timeline akan berubah seperti ini
23. Klik kanan pada blok berwarna biru, pilih Insert
KeyFrame, Scale Akan membuat efek animasi merubah ukuran (skala) tulisan
24. Pastikan tanda merah berada di ujung, kira-kira
frame 24 25. Klik pada tulisan Belajar Bahasa, dan perbesar kira-
kira 2 kali lipat 26. Simpan perubahan, Ctrl+S 27. Coba jalankan dengan menekan tombol Ctrl+Enter
Materi ini boleh diperbanyak, diganti, dengan atau tanpa menyebut sumbernya, dengan atau tanpa seijin pembuatnya
Membuat Halaman Baru Halaman awal akan memiliki 3 link belajar, bermain, dan keluar. Belajar akan diarahkan ke frame 2, sedangkan
Bermain akan diarahkan ke frame 3
1. Klik Scene1 dibagian atas Jendela Utama 2. Klik kanan pada frame 2 , insert Blank Keyframe
Akan dibuatkan frame kosong di frame ke dua 3. Klik kanan pada frame 3 , insert Blank Keyframe
Akan dibuatkan frame kosong di frame ke tiga
4. Kembali ke frame 1 5. Klik kanan pada background, lalu pilih copy 6. Kembali ke frame 2 7. Klik kanan pada jendela utama, lalu pilih paste 8. Kembali ke frame 3
9. Klik kanan pada jendela utama, lalu pilih paste
10. Kembali ke frame 2
11. Tambahkan gambar huruf A, B, dan C 12. Ubah masing-masing menjadi symbol bertipe
button dengan nama A, B, dan C
13. Tambahkan gambar prev.png 14. Ubah menjadi symbol bertype button beri nama
prev
15. Kembali ke frame 3
16. Tambahkan gambar huruf A 17. Tambahkan gambar huruf Apple.png, Baseball.png
dan Clock.png
18. Ubah masing-masing menjadi symbol bertipe
button berturut-turut dengan nama Apple,
Baseball dan Clock
19. Dari tab Library, klik drag tombol prev ke dalam
Jendela Utama
Daripada membuat gambar baru, kita bisa
memanfaatkan lagi symbol prev yang sudah dibuat
Materi ini boleh diperbanyak, diganti, dengan atau tanpa menyebut sumbernya, dengan atau tanpa seijin pembuatnya
20. Kembali ke frame 1
21. Klik kanan pada tulisan Belajar, pilih Actions Akan muncul action script
22. Ketikkan script seperti gambar berikut
Artinya jika tulisan ini diklik, maka akan pergi ke frame 2
23. Klik kanan pada tulisan Bermain, pilih Actions
24. Ketikkan script seperti gambar berikut
Artinya jika tulisan ini diklik, maka akan pergi ke frame 3
Sampai sejauh ini animasi kita masih berantakan karena semua frame akan dikerjakan bergantian, solusinya kita harus hentikan semua frame dan menunggu user melakukan klik
25. Kembali ke frame 1
26. Klik kanan pada frame 1, pilih Actions
27. Ketikkan script seperti gambar berikut
Artinya frame akan distop, tidak diplay
28. Lakukan hal yang sama untuk frame 2 dan frame 3,
beri script stop(); pada masing-masing frame
29. Kembali ke frame 2
30. Di Jendela utama Klik kanan pada gambar pilih Actions
31. Ketikkan script seperti gambar berikut
32. Kembali ke frame 3
33. Di Jendela utama Klik kanan pada gambar pilih Actions
34. Ketikkan script seperti gambar berikut
Materi ini boleh diperbanyak, diganti, dengan atau tanpa menyebut sumbernya, dengan atau tanpa seijin pembuatnya
Membuat Animasi Lanjutan
1. Kembali ke frame 2 2. Dobel klik gambar A 3. Muncul frame yang agak berbeda, yakni frame UP
Over, Down dan HIt 4. Klik kanan pada frame Over, pilih insert keyframe
Over akan aktif jika kursor mouse di atas gambar
5. Klik gambar A, pada tab properties, klik Swap
Swap akan mengganti gambar 6. Pilih gambar Apple.png
7. Klik kanan pada frame Down, pilih insert keyframe
Down akan aktif jika mouse menekan gambar 8. Klik tab Library 9. Klik dan drag suara a.mp3 ke gambar Apple
10. Lakukan hal yang sama untuk gambar B dan C
11. Klik Scene 1. 12. Dobel Klik gambar B 13. Gambar B diswap (diganti) dengan gambar
Baseball.png 14. Beri Suara b.mp3 ke gambar Baseball
15. Klik Scene 1.
16. Dobel Klik gambar C 17. Gambar C diswap (diganti) dengan gambar
Clock.png
18. Beri Suara c.mp3 ke gambar Clock
Materi ini boleh diperbanyak, diganti, dengan atau tanpa menyebut sumbernya, dengan atau tanpa seijin pembuatnya
Membuat Quiz / Game Cara kerjanya sederhana, kita munculkan huruf A dan user harus menebak manakah diantara gambar tersebut yang
berawalan huruf A. Jika yang ditekan gambar Apple maka gambar akan berubah menjadi gambar benar, dan ada suara
yang menandakan user memilih pilihan benar. Jika yang ditekan gambar Lain maka gambar akan berubah menjadi
gambar salah, dan ada suara yang menandakan user memilih pilihan salah.
1. Kembali ke frame 3 2. Dobel klik gambar Apple 3. Klik kanan pada frame Down, pilih
insertkeyframe 4. Klik gambar Apple
5. Klik Swap Pilih gambar Benar.png
6. Klik tab Library
7. Klik dan drag suara YES.wav ke gambar Benar
8. Lakukan hal yang sama untuk gambar Baseball
dan Clock
9. Klik Scene 1.
10. Dobel Klik gambar Baseball
11. Klik kanan pada frame Down, pilih insertkeyframe
12. Klik Swap Pilih gambar Salah.png
13. Klik tab Library
14. Klik dan drag suara NO.wav ke gambar salah
15. Klik Scene 1.
16. Dobel Klik gambar Clock
17. Klik kanan pada frame Down, pilih insertkeyframe
18. Klik Swap Pilih gambar Salah.png
19. Klik tab Library
20. Klik dan drag suara NO.wav ke gambar salah