LS4 Hypermedia Preloader Games 2016

PRODI S2 TEKNOLOGI PEMBELAJARAN
PROGRAM PASCASARJANA
UNIVERSITAS NEGERI YOGYAKARTA
PEMROGRAMAN LAB SHEET 4:
KOMPUTER HYPERMEDIA MAPS, Hal 1 dari 16
PEMBELAJARAN PRELOADER, GAMES
A. KOMPETENSI
Setelah melaksanakan praktik pada minggu ini, mahasiswa diharapkan dapat:
1. Membuat Hypermedia Maps menggunakan Adobe Flash.
2. Membuat Preloader menggunakan Adobe Flash.
3. Membuat Games menggunakan Adobe Flash.
B. DASAR TEORI
1. HYPERMEDIA MAPS
Hypermedia adalah istilah yang diungkapkan pertama kali oleh Ted Nelson (1965) seorang pakar
teknologi infomasi, dan ahli filsafat Amerika. Hypermedia diungkapkan sebagai media non linear
yang menggabungkan teks, grafis, video, audio dan hyperlink. Hypermedia maps memungkinkan
pengguna melihat data penting dalam peta secara instan dengan mengarahkan mouse pada
suatu daerah maka data daerah tersebut akan muncul dengan sendirinya. Banyak sekali referensi
yang dapat anda gunakan dengan berbagai versi yang berbeda. Berikut langkah-langkah
sederhana untuk membuat hypermedia maps :
a) Buatlah dokumen baru Adobe Flash
Gambar 1. Membuat dokumen baru

b) Importlah gambar peta Indonesia, anda dapat memanfaatkan pencarian gambar di internet.
Dibuat oleh: Prodi S2 Teknologi Pembelajaran

Prof. Herman Dwi Surjono, Ph.D. Diperiksa oleh:
dan Galih Widyatmojo, M.Pd. Program Pascasarjana Universitas Negeri Yogyakarta
Gambar 2. Peta
c) Buatlah Layer baru kemudian buatlah button/tombol sesuai dengan bentuk daerah yang
dinginkan. Pada latihan kali ini menggunakan lokasi Jawa Tengah. Anda dapat menggunakan
Pencil Tools untuk menggambar mengikuti alur peta.
Gambar 3. Jawa Tengah
d) Double klik pada button, pada frame UP atur transparasi warna tombol pada panel Color lalu
ubah Alpha menjadi 0 %

Gambar 4. Mengatur transparansi
e) Pada frame OVER, pastikan alpha 100% agar objek terlihat ketika mouse berada diatas
objek. Lalu buat Layer Baru isikan data daerah misalnya logo provinsi, nama provinsi,
ibukota, dan luas daerah.
Gambar 5. Input data peta
f) Insert Frame pada frame DOWN dan HIT.

g) Simpan dan Test movie anda.

Gambar 6. Hypermedia maps
h) Ketika mouse diletakkan diatas tombol maka data daerah tersebut akan muncul.
i) Anda dapat berlatih dengan mengulangi langkah yang sama untuk daerah lain yang ada
dalam peta.

2. PRELOADER
a. Movie Clip Preloader
1) Buatlah Movie Clip dengan 2 objek rectangle dalam 2 layer yang berbeda. Layer 1 untuk
rectangle statis, sementara layer 2 untuk rectangle yang akan diberi animasi.
Gambar 7. Preloader movie clip
2) Pada Frame 100 Insert Keyframe masing-masing layer, Create Classic Tween Lalu
ubahlah layer 2 dengan bentuk sebagai berikut.

Gambar 8. Classic Tween
3) Pada Frame 100 masukkanlah actionscript yang digunakan untuk mengarahkan setelah
loading berakhir.
Gambar 9. Script _root
4) Kembali ke Scene 1, anda dapat memasukkan gambar, objek, teks atau lainnya pada
Frame 2.
Gambar 10. Frame 2
5) Jangan lupa untuk memberi actionscript stop(); pada Frame 1 dan Frame 2.
6) Simpan dan Test Movie.

Gambar 11. Movie clip preloader
b. Preloader Angka
1) Buatlah Dymanic Text kosong, plilih font dan ukurannya lalu embed font.
Gambar 12. Dynamic text
2) Berilah nama variable “Persen” pada teks tersebut.
Gambar 13. Variable

3) Pada Frame 1 buatlah layer baru kemudian masukkan actionsript berikut ini.
Gambar 14. Actionscript preloader angka
4) Pada Frame 2 anda dapat menambahkan gambar, atau objek lainnya yang akan
ditampilkan setelah loading selesai.
5) Test movie, hal yang perlu diperhatikan adalah mengaktifkan Simulate Download.
Gambar 15. Simulate download
6) Anda dapat mengatur kecepatan download pada Download Setting.

7) Simpan dan Test Movie.

Gambar 16. Preloader angka
c. Preloader Kombinasi
1) Buatlah Objek Rectangle dan Movie Clip dengan bentuk rectangle. Pada gambar
dibawah, objek berwarna abu-abu dan movie clip berwarna merah.
Gambar 17. Objek dan movieclip
2) Berilah nama pada Instance Name Movie Clip tersebut dengan nama “Loading Bar”
Gambar 18. Instance name
3) Buatlah Dynamic Text plilih font dan ukurannya lalu embed font dengan variabel
“Persentase”

Gambar 19. Variable
4) Pada Frame 1 buatlah layer baru dan masukkan actionscript berikut:
Gambar 20. ActionScript preloader kombinasi
5) Pada Frame 2 anda dapat menambahkan gambar, atau objek lainnya yang akan ditampilkan
setelah loading selesai.
6) Simpan dan Test movie, hal yang perlu diperhatikan adalah mengaktifkan Simulate
Download

Gambar 21. Preloader kombinasi
3. GAMES
a. Puzzle Game
1) Import gambar yang akan dibuat puzzle, potong menjadi 9 bagian yang sama. Anda dapat
menggunakan tools yang ada dalam flash, Break Apart (Ctrl + B). Lalu anda dapat
memotongnya dengan membuat garis atau persegi diatasnya.
Gambar 22. Manipulasi gambar
2) Convert masing-masing bagian menjadi Movie Clip, jadi anda memiliki 9 Movie Clip.
Kemudia Copy dan Paste semua Movie Clip.

Gambar 23. Duplikasi
3) Block semua Movie Clip target dan beri effect Alpha 12% pada Panel Properties.
Gambar 24. Color effect
4) Masukkan Instance Name satu persatu sebelah kiri dengan nama p0, p1, ....dst. lalu pada
target sebelah kanan dengan p0_target, p1_target,....dst.
5) Buatlah Dynamic Text dengan variable “skor”
6) Pada Frame 1 buatlah layer baru dan masukkan kode dibawah ini


Gambar 25. Actionscript puzzle

7) ActionScript diatas berlaku untuk dua keping puzzle dengan Instance Name p0 dan p1.
Untuk kepingan selanjutnya mengikuti struktur kode diatas.
8) Simpan dan Test Movie

Gambar 26. Puzzle game
b. Maze Game
1) Buatlah Movie Clip Labirin dengan objek yang akan digunakan sebagai labirin. Isi Instance
Name Movie Clip dengan nama “dinding”
Gambar 27. Labirin
2) Buatlah Movie Clip Pemain dengan gambar atau bentuk lain, Isi Instance Name Movie
Clip dengan nama “pemain”

Gambar 28. Player
3) Buatlah Movie Clip Target dengan gambar atau bentuk lain, Isi Instance Name Movie Clip
dengan nama “target”
Gambar 29. Target
4) Buatlah Dynamic Text dengan variabel “skor”

5) Pada Frame 1 buatlah layer baru dan masukkan kode dibawah ini



Gambar 30. Actionsript maze
6) Simpan dan Test Movie, gerakan pemain dengan arah pada keyboard.
Gambar 31. Maze game

C. Alat/Bahan
1. Lab Sheet No. 4
2. PC/Laptop yang telah diinstall Adobe Flash CS6

D. Langkah Kerja
1. Baca dan pahami dasar teori di atas.
2. Lakukan latihan mengikuti petunjuk yang telah dijelaskan di atas.
3. Buatlah tiga buah aplikasi berupa Hypermedia Maps, Preloader, dan Games. Pada tiap
aplikasi berilah Nama dan NIM. Gunakan kreativitas anda.
4. Uploadlah ketiga file swf tersebut ke Besmart.

E. REFERENSI
Adobe. (2012). Adobe Flash Professional CS6 Classroom in a Book The Official Training Workbook
for Adobe System. United States : Adobe Systems Incorporated. diambil dari:
http://ptgmedia.pearsoncmg.com/imprint_downloads/peachpit/peachpit/academic/FlashCS
6CIB_instructor_notes.pdf
Adobe. (2013). Adobe Flash® Professional Reference Help and Tutorials. diambil dari:
help.adobe.com/archive/en/flash/cs6/flash_reference.pdf
Unruh, David. (2005). Creating E-Learning with Macromedia Flash MX 2004. Seattle:David Unruh
Consulting



LS4 Hypermedia Preloader Games 2016

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

LS4 Hypermedia Preloader Games 2016

Diunggah oleh

Hak Cipta:

Format Tersedia

PRODI S2 TEKNOLOGI PEMBELAJARAN

Gambar 1. Membuat dokumen baru

Dibuat oleh: Prodi S2 Teknologi Pembelajaran

Gambar 3. Jawa Tengah

Dibuat oleh: Prodi S2 Teknologi Pembelajaran

Gambar 4. Mengatur transparansi

Gambar 5. Input data peta

f) Insert Frame pada frame DOWN dan HIT.

Dibuat oleh: Prodi S2 Teknologi Pembelajaran

Gambar 6. Hypermedia maps

Gambar 7. Preloader movie clip

Dibuat oleh: Prodi S2 Teknologi Pembelajaran

Gambar 8. Classic Tween

Gambar 9. Script _root

Gambar 10. Frame 2

Dibuat oleh: Prodi S2 Teknologi Pembelajaran

Gambar 11. Movie clip preloader

Gambar 12. Dynamic text

2) Berilah nama variable “Persen” pada teks tersebut.

Gambar 13. Variable

Dibuat oleh: Prodi S2 Teknologi Pembelajaran

Gambar 14. Actionscript preloader angka

Gambar 15. Simulate download

6) Anda dapat mengatur kecepatan download pada Download Setting.

Dibuat oleh: Prodi S2 Teknologi Pembelajaran

Gambar 16. Preloader angka

Gambar 17. Objek dan movieclip

Gambar 18. Instance name

Dibuat oleh: Prodi S2 Teknologi Pembelajaran

Gambar 19. Variable

4) Pada Frame 1 buatlah layer baru dan masukkan actionscript berikut:

Gambar 20. ActionScript preloader kombinasi

Dibuat oleh: Prodi S2 Teknologi Pembelajaran

Gambar 21. Preloader kombinasi

Gambar 22. Manipulasi gambar

Dibuat oleh: Prodi S2 Teknologi Pembelajaran

Gambar 23. Duplikasi

Gambar 24. Color effect

Dibuat oleh: Prodi S2 Teknologi Pembelajaran

Dibuat oleh: Prodi S2 Teknologi Pembelajaran

Gambar 26. Puzzle game

Gambar 27. Labirin

Dibuat oleh: Prodi S2 Teknologi Pembelajaran

Gambar 28. Player

Gambar 29. Target

4) Buatlah Dynamic Text dengan variabel “skor”

Dibuat oleh: Prodi S2 Teknologi Pembelajaran

Gambar 31. Maze game

Dibuat oleh: Prodi S2 Teknologi Pembelajaran

Dibuat oleh: Prodi S2 Teknologi Pembelajaran

Anda mungkin juga menyukai