4.4. Assembly Pembuatan
4.4.1. Layout dan Desain
Pada tahapan ini, peneliti mendesain interface game agar tampil user friendly. Tahapan desain meliputi desain logo, animasi opening,
background, karakter, level permainan dan tombol navigasi pada setiap halaman yang ada di game ini.
1. Desain Logo
Gambar 4.7. Logo Game
Desain logo game dibuat dari klasifikasi bentuk Picture Mark dan Letter Mark Logo. Visualisasi Logo dibuat dari
gabungan gambar siluet kepala dan letter “Senam Otak” yang
berbentuk tipografi sehingga menyerupai gambar otak.
Gambar 4.8. Langkah Pembuatan Logo
Penjelasan Gambar : a. Jalankan Aplikasi Adobe Photoshop, Buat dokumen baru di
Adobe Photoshop dengan ukuran 16,93 cm x 16,93 cm dengan resolusi 300 pixel.
b. Gunakan Pen Tool yang terdapat pada Toolbar untuk membuat sketsa siluet kepala
c. Isi warna menggunakan warna hitam agar membentuk karakter siluet seperti pada umumnya.
d. Setelah itu buat tulisan “Senam Otak” dengan menggunakan
Pen Tool dan atur agar membetuk tipografi seperti otak. e.
Berikan efek shine pada tulisan agar terlihat lebih nyata dengan menggunakan Brush Tool.
2. Desain Animasi Opening
Gambar 4.9. Langkah Pembuatan Animasi Opening I
Penjelasan gambar : a. Buka aplikasi Adobe After Effect dan atur komposisi
ukuran video dengan width 1920x1080 dengan durasi 9 detik pada frame rate 30.
b. Import logo senam otak yang telah dibuat di Adobe Photoshop ke halaman project dengan cara File Import
dan pilih file yang ingin digunakan. c. Berikan Effect Wipe Master pada Control Effect dan atur
durasi tampil logo di 2 detik awal. d. Buat Radial Effect dengan warna e8507e dan atur durasi
selama 1,5 detik untuk Effect Radial.
Gambar 4.10. Langkah Pembuatan Animasi Opening II
e. Pada frame selanjutnya, import gambar tipograpi senam otak yang telah di buat di Adobe Photoshop dan beri
animasi zoom buble dengan mengklik Animation Effect Logo Zoom Buble.
f. Setelah semua karakter ditampilkan, atur opacity dari 100 ke 0 untuk tampilan transisi ke halaman selanjutnya.
g. Render project ke format .avi dengan mengklik Render Render Queueu dan atur kedalam format .avi
3. Desain Halaman Pembuka
Gambar 4.11. Desain Halaman Pembuka
Pembuatan halaman pembuka menggunakan 2 aplikasi yaitu Adobe Photoshop dan Adobe Flash. Adobe Photoshop
digunakan untuk mengolah gambar dan Adobe Flash untuk membuat animasinya.
Tahap pertama adalah membuat latar belakang halaman pembuka menggunakan aplikasi Adobe Photosohop. Tahap
selanjutnya latar belakang yang sudah dibuat di Export ke Adobe Flash Untuk di buat animasinya.
Gambar 4.12. Langkah Pembuatan Latar Belakang Halaman Pembuka I
Penjelasan Gambar: a. Buka aplikasi Adobe Photoshop. Kemudian buat dokumen
baru dengan cara klik menu File New atau dengan menekan tombol Ctrl + N.
b. Masukan angka 1024 pada kolom isian Width dan angka 640 pada kolom isian Height dengan satuan pixel. Pada
kolom isian Resultions masukkan angka 72 PixelInch lalu klik Ok.
c. Buka file gambar di direktori penyimpanan data dengan cara kli menu File Open atau dengan menekan tombol
Ctrl + O pada keyboard. Kemudian pilih gambar lalu klik Open.
d. Gunakan Tools Magic Wand Tool yang terdapat pada Toolbox. Kemudian klik pada bagian area gambar yang
ingin dihilangkan. Jika sudah muncul area seleksi pada bidang warna yang sama tekan tombol Del.
e. Atur Opacity gambar menjadi 70 . f.
Kemudian Drag And Drop gambar tersebut ke halaman yang sudah di buat di awal dengan menggunakan Selection
Tool yang ada pada Toolbox atau dengan menekan tombol V.
g. Atur posisi gambar di tengah dengan sedikit ke atas. Gunakan Move Tool untuk memperbesar atau menecilkan
gambar.
Gambar 4.13. Langkah Pembuatan Latar Belakang Halaman Pembuka II
h. Klik Layer Background, kemudaian klik Menu Edit lalu pilih Fill Shift + F5
i. Isikan warna pada Layer Background dengan warna abu-
abu terang. Beri sedikit efek cahaya dengan menggunakan Dodge Tool.
j. Buat bidang persegi panjang dengan menggunakan
Rectangle Tool dengan warna 7fe6f5. Buat lagi persegi untuk bagian belakangnya dengan warna 339eae dan
letakan posisi Layer berada di bawah Layer persegi panjag pertama. Buat sekali lagi untuk posisi yang lain dengan cara
yang sama. Atur posisi dengan baik sehingga dapat membentuk efek 3dimensi. Tambahkan sedikit bayangan,
klik kanan pada Layer Shape, kemudian pilih Blending Options lalu pilih Drop Shadow. Klik Ok.
k. Simpan gambar dengan cara klik Menu File Save As. Isikan nama file sesuai kebutuhan lalu pilih format .jpeg.
Klik Save kemudian akan muncul kotak dialog JPEG Options, atur Quality pada Max kemudian klik Ok.
Gambar 4.14. Hasil Latar Belakang Halaman Pembuka
Gambar 4.15. Langkah Pembuatan Animasi Pada Adobe Flash
a. Buka aplikasi Adobe Flash dan buat dokumen baru dengan Type: ActionScript 2.0. Isi kolom Width: 1024px dan
Height: 640px kemudian klik Ok. b.
Import gambar ke dalam stage dengan cara klik menu File Import Import to Stage atau dengan menekan tombol
jalan pintas Ctrl + R. c. Atur gambar hingga sesuai dengan stage.
d. Buat Layer baru dengan cara klik menu Insert Timeline Layer. Kemudian ganti nama masing-masing Layer agar
mudah dalam proses pembuatan halaman selanjutnya. Layer yang digunakan untuk gambar latar belakang ganti nama
Layer dengan background. Sedangkan pada Layer yang baru di buat ganti dengan nama Orang Teks.
e. Pilih Layer Orang Teks Pada Frame 1, kemudian pilih Text Tool. Pada Properties pilih Classic Text dan Gunakan
Static Text. Di kolom Character gunakan tipe huruf pada kolom Family dan pilih jenis Font BD Bardust, Size 24 pt
dan Color putih ffffff.
Gambar 4.16. Langkah Pembuatan Animasi Teks Berjalan
f. Ketik Segarkan Otakmu, atur posisi dan ukuran teks agar
sesuai dengan latar belakang. g. Pilih objek teks yang sudah di buat, kemudain tekan tombol
F8 pada keyboard atau dengan cara pilih menu Modify Convert to Symbol... pada kotak dialog yang muncul pilih
Type: Movie Clip kemudian klik Ok. Buat animasi ke kanan dan ke kiri dengan mengubah posisi Frame awal dan akhir.
Gambar 4.17. Langkah Pembuatan Animasi Orang
h. Gunakan Pencil Tool atau dengan menekan tombol Y pada keyboard. Gambar animasi orang dengan alat tersebut
hingga selesai. Pastikan Layer yang digunakan adalah Layer Orang Teks. Seleksi dan pilih gambar yang sudah jadi
kemudian tekan tombol F8 untuk mengubah gambar menjadi Movie Clip. Pada kotak dialog yang muncul pilih
Type: Movie Clip kemudian klik Ok.
i. Klik dua kali pada Movie Clip tersebut, kemudian buat
animasi dengan merubah posisi tangan gambar pada Frame yang berbeda.
4. Desain Halaman Selamat Datang