Tutorian Android Template Games Kid Jigsaw

dengan Android Template
TAT#02

Toni Setyawan, S.T., M.Pd. - flashbegin.com 1
CARA MUDAH MENGEMBANGAKAN
GAMES KID JIGSAW
INDIKATOR PENCAPAIAN HASIL BELAJAR
 Pembaca dapat membuat/memodifikasi aplikasi Games Kid
Jigsaw sederhana mengunakan Android Template Flash CS 6.
URAIAN
Sebuah teka-teki jigsaw adalah teka-teki yang membutuhkan
perakitan ubin atau potongan saling sedemikian rupa untuk
membentuk gambar atau struktur tiga dimensi. Potongan-potongan
jigsaw dapat dibuat dari kardus, kayu, plastik, karet, logam atau
busa. Jigsaw puzzle dapat berkisar dalam kesulitan dari sangat
mudah teka-teki tiga potong untuk balita untuk pemegang rekor
saat ini, Life - The Great Challenge, dengan kekalahan 24,000
potong!
Bermain jigsaw memang mengasikkan dan membuat
penasaran. Tetapi sering kali kita di repotkan dengan banyaknya
potongan potongan yang harus kita kelola. Di modul ini kita akan
membahas bagaimana membuat permainan jigsaw versi digital
mengunakan Adhobe Flash Pro CS 6 untuk device mobile android.
Anda tidak perlu binggung memikirkan action scriptnya karena kami
telah menyediakan template untuk anda modifikasi. Dengan
pengalaman dan pengetahuan yang minim tentang action script,
kami yakin anda mampu untuk membuat “Aplikasi Kid Jigsaw”.
Untuk mengurang efek kesalahan dan memudah mencari
tahu letak kesalahan maka setiap mengadakan perubahan lakukan
percobaan menjalankan program dengan menekan ctrl-enter. Bila
lancar lanjutkan modifikasi selanjutnya.

LANGKAH-LANGKAH PERSIAPAN
1. Buka Adobe Flash CS 6, tunggu hingga muncul tampilan seperti
di halaman berikut ini
2. Selanjutnya klik open dan pilih file "AT Games Kid Jigsaw.fla".
Cara mendapatkan file tersebut baca bagian PENUTUP di akhir
modul ini.
3. Disini kita akan disuguhkan sebuah dokumen flash dengan
ukuran 480 x 800 sesuai dengan ukuran layar mayoritas device
mobile, tetapi anda bisa merubahkan kemudian menyesuaikan
tampilannya sesuai dengan keinginan anda.
4. Dokumen flash ini terdapat 3 scene untuk mempermudah
pengaturan pergerakan framenya. Perhatikan gambar berikut:
Clik tombol untuk melihat scene
Open
Tanda scene aktif

LANGKAH-LANGKAH MENGUBAH OPENING
1. Ubah scene aktifnya menjadi scene “opening”
2. Perhatikan timeline seperti gambar dibawah ini
3. Lakukan perubahan apapun sesuai dengan selera anda. Baik
untuk layer, gambar, animasi atau pun suaranya. Dalam tahap
ini anda bebas merubah apapun kecuali posisi frame (di akhir)
yang berisi action script dan jangan mengubah isi AS3 nya.
LANGKAH-LANGKAH MENGUBAH CLOSING
1. Ubah scene aktifnya menjadi scene “closing”
2. Perhatikan timeline seperti gambar dibawah ini
Frame dengan AS3
Frame dengan AS3

3. Lakukan perubahan apapun sesuai dengan selera anda. Baik
untuk layer, gambar, animasi atau pun suaranya. Dalam tahap
ini anda bebas merubah apapun kecuali posisi frame (di akhir)
yang berisi action script dan jangan mengubah isi AS3 nya
LANGKAH-LANGKAH MENGGANTI LAYOUT
1. Ubah scene aktifnya menjadi scene “core”
Pada scene ini terdapat beberapa tampilan yang merupakan inti
dari aplikasi ini. Tampilan/layout di dalam template ini semua
dapat diganti atau ditambah sesuai dengan selera anda. Hanya
saja jika media yang diganti memiliki instan name harus diganti
dengan media sejenis dengan instan name yang sama. Untuk
menjaga kelancaran programnya, media (button dan movieclip)
jangan diganti tetapi dimodifikasi saja, jadi media tidak diganti
tetapi diubah. Berikut ini tampilan yang ada dalam template ini.

2. Berhati hatilah dalam merubah layout gambar paling kiri,
karena susunan gambar berupa slider dan akan dibahas pada
bagian selanjutnya.
3. Gambar paling kiri adalah tampilan saat memilih gambar dan
macam gambar dapat di slide ke atas dan ke bawah. Gambar
tengah tampilan saat memilih level dan terakhir saat bermain.
LANGKAH-LANGKAH MENGUBAH INFORMASI
1. Masih di scene “core”, informasi adalah tampilan yang muncul
bila “tombol i” di klik
2. Untuk mengubahnya anda dapat membuka movie clip dalam
library dengan nama “tekskerabat”.
Double klik disini

3. Setelah di klik akan muncul tampilan seperti dibawah ini
4. Dalam tahap ini anda dapat mengubah apapun sesuai dengan
selera anda. Lihat gambar di halaman berikut :
Tanda jika view tampilan
di stage adalah mc
“tekskerabat”
Jangan diubah

Tetapi jangan mengubah symbol properties dari movie clipnya.
Cara melihat symbol properties adalah klik kanan pada movie
clip di library lalu pilih properties. Jangan rubah apapun yang
ada di dalam gambar di atas, karena akan membuat action
script kehilangan object untuk dipanggil.
LANGKAH-LANGKAH MENGANTI GAMBAR JIGSAW
1. Masih di scene “core”, untuk menganti gambarnya diawali
dengan double klik movieclip dengan nama “mcgambar” di
dalam library.
2. Selanjutnya akan muncul tampilan seperti gambar di bawah ini.
Dari gambar di atas ada dua hal yang harus kita perhatikan.
Pertama pastikan bila anda benar benar sedang edit mcgambar
Double klik disini
Tanda jika view tampilan
di stage adalah mc
“mcgambar”
Ancor movie clip

dengan melihat tanda di sebelah kiri atas. Kedua ancor movie
clip atau titik 0, 0 dari movie clip harus berada pada ujung kiri
atas gambar yang kita buat. Hal ini untuk memastikan agar
tampilan gambar dan porongannya sesuai dengan harapan kita.
3. Perhatikan timelline movieclip seperti gambar dibawah ini.
Layer AS3 adalah layer yang berisi script pada frame pertama.
Biarkan saja kondisinya tetap seperti ini.
4. Layer picture adalah layer yang berisi gambar-gambar yang
akan disajikan dalam games jigsaw. Setiap frame berisi 1
macam gambar.
5. Untuk mengantinya anda tinggal menghapus gambar pada layer
tersebut kemudian ganti dengan gambar baru.
Tips : ada dua hal yang perlu diperhatikan dalam proses
pergantian gambar, satu gambar yang dipasang
mengunakan ukuran 400 X 400 pixel dan ganti dengan
gambar lain dengan ukuran yang sama. Dua pastikan
posisi ancor tetap pada pojok kiri atas gambar.
LANGKAH-LANGKAH MENAMBAH GAMBAR JIGSAW
1. Masih di “mcgambar” dan perhatikan Timeline sebagai berikut
Klik kanan lalu
pilih Insert Blank
Keyframe atau
tekan tombol F7
Muncul
keyframe
kosong

2. Isikan frame yang kosong tersebut dengan gambar baru yang
anda inginkan. (ingat tips pada langkah sebelumnya tentang
ukuran dan posisi gambar)
3. Ganti scene aktif menjadi scene “core”. Perhatikan timelinenya.
Akan muncul window Action Script seperti gambar di bawah
4. Ganti angka 8 menjadi 9 yang berati ada 9 macam gambar.
5. Edit movieclip yang bernama “mcisipic” dengan cara mendouble
klik namanya di library.
Double klik disini

Klik dan geser “mcgambar” di librari ke dalam stage dan pasang
di urutan paling bawah. Susun dua kolom gambar kebawah,
tambahkan ke baris selanjutnya dan jangan ubah susunan 2
kolom. Jadi tambahkan gambar dalam kelipatan 2 agar susunan
pilihan gambar tetap tersusum rapi.
Tips : Tetap susun dua kolom kebawah, ini adalah desain yang
dibuat untuk memudahkan dalam memodifikasi games
jigsaw ini dengan macam gambar yang beragam.
Tips : Tampilan semua gambar akan sama tetapi pada saat
program dijalankan akan muncul gambar yang berbeda
beda sesuai dengan urutan yang ada di “mcgambar”.
6. Beri nama instant pada mcgambar yang baru anda masukan
dengan nama “tbpic9” karena sebelumnya “tbpic8”.
Tips : Nama yang anda masukkan harus sesuai dengan aturan
yang telah di tetapkan. Hal ini menyangkut ketepatan
action script memanggil movie clip tersebut.
Tips : Klik movie clip agar memunculkan propertiesnya.
7. Coba hasil modifikasi yang telah anda lakukan dengan menekan
tombol ctrl-enter. Pada pilih gambar seharusnya muncul pillihan
baru dengan gambar baru. Saat gambar baru tersebut di klik
akan melompat ke tampilan pilihan level. Setelah level dipilih
akan segera muncul potongan Jigsaw dengan gambar baru.
Instant name

LANGKAH-LANGKAH MENGUBAH POTONGAN JIGSAW
1. Masih dalam scene “core”, pilih level yang akan anda ubah alur
potongannya. Perhatikan gambar timeline berikut
2. Untuk memudahkan modifikasi hilangkan tampilan semua layer
kecuali target dan bawah.
3. Pilih layer yang ingin anda ubah, lalu double clik garis segi
empat di state yang berarti masuk ke grub
Frame yang berisi level 1
Tanda masuk ke Group

4. Setelah itu ada bisa mengubah alur potongan sesuai dengan
selera anda. Misalkan seperti gambar di dibawah ini
Tips : disini anda hanya di ijinkan untuk menganti bentuk
potongan tanpa menambah jumlah potongan. Bila anda
ingin menambah jumlah potongan sebaiknya mengunakan
langkah “menambah level”.
5. Di contoh langkan ini kita memilih merubah potongan pada level
1 maka langkah selanjutnya adalah menyesuaikan potongan di
movieclipnya dengan alurnya. Lihat di llibrary
6. Saat ini kita baru membuat alur potonganya tetapi belum
mengubah potongan itu sendiri. Untuk menyesuaikan potongan
dengan alurnya. Kita ambil contoh mengubah potongan mc Obj
1-1, maka double klik mc tersebut.
Mc pot untuk level 1

7. Perhatikan gambar di atas, untuk mengubah bentuk potongan
maka kita harus mengubah bentuk di layer mask. Untuk
memudahkan proses, buat dokumen baru dengan warna stage
putih dan copykan alur potongan ke dalam dokumen baru, lalu
tekan ctrl-B untuk menghilangkan groub di alur potongan.
Layer yg berisi mcgambar
Layer masking utk gambar
Layer objec yg di tes
Layer Action Script

8. Kemudian buat shape dengan alur potongan tersebut.
9. Copykan potongan ke dalam movie clip potongan. Potongan 1
untuk “mc Obj 1-1”, Potongan 2 untuk “mc Obj 1-2” dan
Potongan 3 untuk “mc Obj 1-3”, lalu centerkan ke ancor baik
secara vertikal maupun horisontal.
Tips : Untuk memperbudah dan menyempurnakan posisi di
pengaturan akhir, ubah posisi shape mask pada koordinat
x dan y dengan bilangan yang mudah. Contoh x : -108.5
diubah menjadi -110 dan Y:-156,80 menjadi - 155
Potongan 1
Potongan 2
Potongan 3
sempurnakan

10. Sesuaikan posisi “mcgambar” sesuai dengan alur potongan.
Untuk potongan pertama kondisikan untuk “mcgambar” bagian
kiri atas. Lihat halaman berikutnya.
11. Kunci semua layer, maka anda akan mendapatkan tampilan
seperti gambar di bawah.
12. Lakukan langkah 9 – 11 untuk potongan yang lain pada movie
clip “mc Obj 1-2” dan “mc Obj 1-3”.

13. Setelah semua potongan telah sesuai, langkah selanjutnya
adalah mengatur titik benar untuk semua potongan.
14. Susun potongan dan untuk memudahkan pengaturan titik
kebenaran pindah sementara layer target ke atas layer pic.
Kemudian satukan titik kebenaran di layer target ke titik
kebenaran potongan. Jangan sampai keliru, titik kebenaran
dengan instan name “target1” ke titik kebenaran mc clip “mc
Obj 1-1”, “target2” ke titik kebenaran mc clip “mc Obj 1-2” dan
“target3” ke titik kebenaran mc clip “mc Obj 1-3”.
Tips : atur mc potongan dan target dengan teliti untuk
menghasilkan hasil susunan gambar yang sempurna.
Titik kebenaran
“target1”
Titik kebenaran
“mc Obj 1-1”
Pindahkan layer “target”
ke atas layer “pic”

LANGKAH-LANGKAH MENAMBAH LEVEL
1. Masih dalam scene “core”, pilih level yang akan anda ubah alur
potongannya. Perhatikan gambar timeline berikut
2. Untuk menambah level, berarti kita harus menambah frame.
Langkah pertama adalah membuat frame kosong paling
belakang di layer “pic” dan layer “target”. Klik kanan frame
terakhir kemudian pilih insert blank keyframe. Sesuaikan frame
lainnya dan lihat hasilnya seperti pada gambar berikut
3. Pada layer target, buat gambar segi empat dan potonganya

4. Pada gambar sebelumnya terdapat 16 potongan, ini berarti kita
harus mengkopi “mc Obj x1” menjadi “mc Obj 5.1” dan
seterusnya sejumlah 16 movieclip baru.
5. Selanjutnya ubah masing masing movie clip ojek sesuai dengan
alur potongannya dengan cara sama seperti langkah 7 - 12
pada “Langkah-Langkah Mengubah Potongan Jigsaw”.
6. Setelah potongan selesai masukkan movie clip “Target” dari
library ke dalam stage dengan cara klik and drug. Copykan
sebanyak 16 (karena ada 16 potong) dan beri instan name
secara berurutan “target1”, “target2” dan seterusnya.
7. Kunci layer target dan langkah selanjutnya mengisi frame baru
pada layer pic.
8. Masukkan dengan cara klik and drug movie clip “mc Obj 5.1”
dan seterusmya ke dalam stage. Beri nama instant secara
berurutan “obj1”, “obj2” dan seterusnya.
9. Susun “mc Obj 5.1” dan sesuaikan target dengan cara sama
seperti langkah 13 - 14 pada “Langkah-Langkah Mengubah
Potongan Jigsaw”.
Tips : atur mc potongan dan target dengan teliti untuk
menghasilkan hasil susunan gambar yang sempurna.
Tips : simpan dan coba pada setiap modifikasi, bila terjadi error
anda akan dengan mudah mengetahui bagian mana dari
program yang membuat error.

PENUTUP
Langkah terakhir agar dokumen flash ini dapat di publish
menjadi aplikasi android atau file apk pernah kami bahas di blog.
Untuk mempelajarinya silahkan berkunjung ke :
http://flashbegin.com
Setelah ada mempelajari dan memahami bedah modul ini
berarti anda sudah mampu membuat aplikasi media pembelajaran
berbasis android. Selanjutnya untuk mengetahui cara mendapatkan
file “AT Games Kid Jigsaw.fla” kunjungi blog kami di.
http://ebook.flashbegin.com

Toni Setyawan, S.T., M.Pd. - flashbegin.com
Bila anda menyukai modul ini, kunjungi blog kami. Di
blog kami terdapat artikel yang menjelaskan banyak hal
tentang Adobe Flash baik tutorial drawing, tips dan trik flash,
tutorial action script 2, tutorial action script 3, ebook,
template, file experimen, ide-ide baru dan lain lain.
Cara mendapatkan template
http://ebook.flashbegin.com
Bila ada yang perlu ditanyakan silahkan hubungi saya di :
Handphone : 08164881971
PIN BBM : 75909060
email pribadi : tonimation@gmail.com
Alamat blog : http://flashbegin.com
Profil FB : https://www.facebook.com/tonimation
flashbegin.com
Tutorial Android Template (TAT)

Tutorian Android Template Games Kid Jigsaw

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Tutorian Android Template Games Kid Jigsaw

Semelhante a Tutorian Android Template Games Kid Jigsaw (20)

Mais de Toni Setyawan

Mais de Toni Setyawan (7)

Último

Último (20)

Tutorian Android Template Games Kid Jigsaw