tutorial game edukasi sederhana flash cs6

7
[email protected] 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

Upload: nisfu-sani

Post on 06-Aug-2015

68 views

Category:

Education


1 download

TRANSCRIPT

Page 1: Tutorial game edukasi sederhana Flash CS6

[email protected]

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

Page 2: Tutorial game edukasi sederhana Flash CS6

[email protected]

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

Page 3: Tutorial game edukasi sederhana Flash CS6

[email protected]

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

Page 4: Tutorial game edukasi sederhana Flash CS6

[email protected]

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

Page 5: Tutorial game edukasi sederhana Flash CS6

[email protected]

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

Page 6: Tutorial game edukasi sederhana Flash CS6

[email protected]

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

Page 7: Tutorial game edukasi sederhana Flash CS6

[email protected]

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