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

Alamat blog : http://flashbegin.com

Profil FB : https://www.facebook.com/tonimation

flashbegin.com Tutorial Android Template (TAT)

tutorian android template games kid jigsaw

Education