BAB IV
TEKNIS PERANCANGAN
4.1 Alternatif Desain 4.1.1 Desain Produk Utama a. Cover CD
Gambar 9. Cover CD alternatif
Desain untuk cover CD berukuran 14x12 cm menggunakan desain vector, pada tampilan depan terdapat pada gambar seseorang yang memegang bola dan garis yang membentuk bola basket, font yang digunakan ialah :
Hotel Coral Essex : BASKET BALL
Mainframe BB : Strategy Learning for High School The Maple Origins : Zone Defense Edition
Warna yang digunakan hijau toska dengan gradasi.
Desain cover CD mengikuti desain opening yang harus melakukan perubahan desain secara keseluruhan.
b. Interface 1. Opening lay out
1. 2.
Gambar 10. Opening alternatif
Pada gambar pertama ialah desain opening untuk masuk kedalam menu dibuat dengan ukuran 600 x 800, font dan warna hampir seluruhnya sama dengan desain cover CD hanya ada tombol enter yang menggunakan font Script MT Bold. Pada gambar kedua adalah perubahan desain opening terdapat gambar yang identik dengan bola basket seperti bola basket, papan ring basket dan sepatu basket, terdapat juga gambar panah-panah yang diibaratkan sebagai arah pergerakan pemain dalam sebuah strategi permainan bola basket. Terdapat judul dari CD interaktif ini yaitu Strategic Learning menggunakan font Rusted Plastic dan istilah-istilah dalam permainan basket menggunakan font "eL&FoNt(urban calligrafi). Desain dirancang menggunakan teknik kolase dan desain kedua ini yang akan dikembangkan menjadi desain akhir.
2. Home lay out
1. 2.
Gambar 11. Home alternative
Gambar pertama terdapat empat menu yaitu Learning, Terminology, Zone defense, dan contact. Terdapat juga gambar vector papan ring basket dan ilustrasi pola strategi didalam lapangan dan telah dijadikan animasi.warna yang digunakan sama seperti cover CD bagian belakang. Gambar kedua adalah desain yang sudah dirubah total sehingga terlihat lebih hidup dan penempatan tombol yang unik sehingga menarik perhatian pengguna. Penggunaan elemen graffiti bersangkutan dengan bola basket yang memberi kesan streetball. Desain ini yang akan dikembangkan untuk desain akhir.
Pada gambar pertama ialah tampilan isi menu strategi yang membahas tentang pergerakan dalam permainan basket, terdapat setengah lapangan basket yang menjadi area permainan dan didalamnya terdapat lima
yang diilustrasikan dengan lingkaran biru dan lima
diilustrasikan dengan tanda silang merah, jadi terdapat sepuluh pemain yang dianimasikan berjalan. Terdapat juga teks sebagai panduan dalam pergerakan animasi dan tombol untuk kembali ke menu
ini ialah tidak ada narasi dan desain ikon yang masih kaku serta perpaduan warna yang kurang menarik. Pada gambar kedua adalah gambar yang telah mengalami perubahan dalam segi warna, tombol da
dalam layout ini adalah tempat dimana isi dari tutorial tentang strategi permainan bola basket yang akan dibahas nantinya, desain ini akan dikembangkan untuk desain akhir.
4.1.2 Alternatif Desain Tombol 1.
Gambar 13. Tombol 1
Tombol ini menggunakan animasi pada gambar bola basket yang dimana ketika mouse diarahkan kedalam tombol maka bola akan membesar dan berputar juga dengan warna akan berubah menjadi lebih terang. Kekurangannya ialah menggunakan font arial
Pada gambar pertama ialah tampilan isi menu strategi yang membahas tentang pergerakan dalam permainan basket, terdapat setengah lapangan basket yang menjadi area permainan dan didalamnya terdapat lima icon pemain penyerang yang diilustrasikan dengan lingkaran biru dan lima icon pemain penjaga yang diilustrasikan dengan tanda silang merah, jadi terdapat sepuluh pemain yang dianimasikan berjalan. Terdapat juga teks sebagai panduan dalam pergerakan tombol untuk kembali ke menu home. Kekurangan dari perancangan ini ialah tidak ada narasi dan desain ikon yang masih kaku serta perpaduan warna yang kurang menarik. Pada gambar kedua adalah gambar yang telah mengalami perubahan dalam segi warna, tombol dan font. Ruang kosong yang terdapat dalam layout ini adalah tempat dimana isi dari tutorial tentang strategi permainan bola basket yang akan dibahas nantinya, desain ini akan dikembangkan untuk
4.1.2 Alternatif Desain Tombol Mouse up
Mouse over Tombol 1 alternatif
ini menggunakan animasi pada gambar bola basket yang dimana diarahkan kedalam tombol maka bola akan membesar dan berputar juga dengan warna akan berubah menjadi lebih terang. Kekurangannya ialah
arial yang terlihat kaku tidak fleksibel.
Pada gambar pertama ialah tampilan isi menu strategi yang membahas tentang pergerakan dalam permainan basket, terdapat setengah lapangan basket yang pemain penyerang pemain penjaga yang diilustrasikan dengan tanda silang merah, jadi terdapat sepuluh pemain yang dianimasikan berjalan. Terdapat juga teks sebagai panduan dalam pergerakan . Kekurangan dari perancangan ini ialah tidak ada narasi dan desain ikon yang masih kaku serta perpaduan warna yang kurang menarik. Pada gambar kedua adalah gambar yang telah mengalami n font. Ruang kosong yang terdapat dalam layout ini adalah tempat dimana isi dari tutorial tentang strategi permainan bola basket yang akan dibahas nantinya, desain ini akan dikembangkan untuk
ini menggunakan animasi pada gambar bola basket yang dimana diarahkan kedalam tombol maka bola akan membesar dan berputar juga dengan warna akan berubah menjadi lebih terang. Kekurangannya ialah
2.
Gambar 14. Tombol 2
Ini adalah tombol menu pada pada tampilan home yang terdapat empat tombol yang sama dengan menu berbeda, bentuk tombol ini persegi tanpa sudut lancip dan diberi warna orange dengan efek
mouse diarahkan kedalam tombol maka warna tombol berubah menjadi gelap. Font yang digunakan pada tombol ini ialah
permukaan besi (metal).
3. Mouse up
mouse over Gambar 15. Tombol 3
Ini adalah tombol sub menu
strategi apa yang ingin dimainkan karena terdapat lima strategi yang berbeda. Mouse up
mouse over Tombol 2 alternatif
Ini adalah tombol menu pada pada tampilan home yang terdapat empat tombol yang sama dengan menu berbeda, bentuk tombol ini persegi tanpa sudut lancip dan diberi warna orange dengan efek glossy, animasi pada tombol ini ialah ketika diarahkan kedalam tombol maka warna tombol berubah menjadi gelap. Font yang digunakan pada tombol ini ialah Freshman diberi efek seperti permukaan besi (metal).
Mouse up
mouse over Tombol 3 alternatif
Ini adalah tombol sub menu yang menjadi tombol tujuan untuk memilih strategi apa yang ingin dimainkan karena terdapat lima strategi yang berbeda. Ini adalah tombol menu pada pada tampilan home yang terdapat empat tombol yang sama dengan menu berbeda, bentuk tombol ini persegi tanpa sudut lancip , animasi pada tombol ini ialah ketika diarahkan kedalam tombol maka warna tombol berubah menjadi gelap. diberi efek seperti
yang menjadi tombol tujuan untuk memilih strategi apa yang ingin dimainkan karena terdapat lima strategi yang berbeda.
4.1.3 Alternatif Animasi 1.
Gambar 15. Animasi opening alternatif
Ini adalah animasi opening desain pertama dimana terlihat siluet dari pemain basket yang berubah-ubah gerakannya dan tulisan yang ada pada desain ini menggunakan font Agency FB yang berganti tulisan disesuaikan dengan pergantian gambar pemain. Durasi animasi ini 00:00:08 detik.
2.
Gambar 16. Animasi isi alternatif
Pada menu strategi terdapat animasi pergerakan pemain basket yang terdiri dari lima icon pemain penyerang yang diilustrasikan dengan lingkaran biru dan lima icon pemain penjaga yang diilustrasikan dengan tanda silang merah, jadi terdapat sepuluh pemain yang dianimasikan untuk menjelaskan tentang
pergerakan strategi permainan bola basket. Terdapat lima strategi yang bisa dipelajari. Durasi rata-rata animasi 00:00:30 detik.
4.1.3 Alternatif Desain Produk Pendukung 1.
Gambar 17. T-shirt alternatif 2.
Gambar 18. Produk pendukung alternatif
Pada desain roduk pendukung telah dibuat t-shirt dengan dua warna yaitu putih dan hitam, desain t-shirt putih bergambar setengah lapangan dan terdapat icon pemain penyerang dan penjaga dengan warna hitam solid, untuk t-shirt hitam bergambar garis dari bola basket yang berwarna orange terang dan keduanya menggunakan judul dengan font yang sama pada desain cover CD.
4.2 Desain Akhir 4.2.1 Interface 1. Opening Lay out
Gambar 18. Interface Opening Lay out
Desain opening ini sudah dikembang dari desain terdahulu dan ditetapkan sebagai desain akhir dalam ukuran full screen 1024 x 768, 72 pixel/inch pada monitor 17”. Dimulai dari gambar latar yang dibuat gelap untuk mengedepankan gambar utama agar terlihat fokus, selain itu gambar latar juga dipenuhi dengan graffiti berwarna abu-abu tua dengan efek grunge splash untuk memberi kesan sangat “jalanan” karena bola basket identik dengan graffiti.
Terdapat tulisan judul “Strategic learning” dan tag line berwarna putih yang melambangkan kecerdasan dan kepintaran dengan kepala tulisan berwarna orange yang melambangkan agar selalu mengedepankan sportifitas dan kerja keras sesuai dengan tag line yaitu “Play Hard Play Smart”.
Font yang digunakan ialah Kab, animasi dari tulisan judul dan tag line yaitu datang dengan cepat seperti berbayang lalu menjadi fokus.
Dalam desain opening terdapat gambar yang
basket seperti papan ring basket, sepatu basket, dan bola basket, terdapat juga gambar panah-panah yang diibaratkan sebagai arah pergerakan pemain dalam sebuah strategi permainan bola basket. Gambar panah digunakan warna
agar berkesan sporty jika dipadukan dengan latar hitam beigu pula dengan gambar papan ring dan sepatu yang terlihat seperti mengepakkan sayap, animasi dalam desain ini dimulai ketika bola keluar dari tengah lalu membesar dan berputar kemudian kluar illu
mengepul menandakan semangat untuk bermain basket, satu persatu gambar muncul dari dalam bola dan tersusun seperti terlihat pada gambar.
Untuk sound efek digunakan pada setiap kemunculan gambar dalam gerakan animasi dan pada tombol enter.
Gambar 19.
Font : Modifikasi
Tombol enter berada di tengah dan akan menyala, warna yang diberikan ialah warna kuning dan orange terlihat seperti
Font yang digunakan ialah Kab, animasi dari tulisan judul dan tag line yaitu datang dengan cepat seperti berbayang lalu menjadi fokus.
Dalam desain opening terdapat gambar yang identik dengan permainan bola basket seperti papan ring basket, sepatu basket, dan bola basket, terdapat juga panah yang diibaratkan sebagai arah pergerakan pemain dalam sebuah strategi permainan bola basket. Gambar panah digunakan warna
jika dipadukan dengan latar hitam beigu pula dengan gambar papan ring dan sepatu yang terlihat seperti mengepakkan sayap, animasi dalam desain ini dimulai ketika bola keluar dari tengah lalu membesar dan berputar kemudian kluar illustrasi asap dari belakang bola yang akan terus mengepul menandakan semangat untuk bermain basket, satu persatu gambar muncul dari dalam bola dan tersusun seperti terlihat pada gambar.
efek digunakan pada setiap kemunculan gambar dalam gerakan animasi dan pada tombol enter.
. Tombol enter
Font : Modifikasi
Tombol enter berada di tengah dan akan menyala, warna yang diberikan ialah warna kuning dan orange terlihat seperti gold berkesan mewah.
Font yang digunakan ialah Kab, animasi dari tulisan judul dan tag line
identik dengan permainan bola basket seperti papan ring basket, sepatu basket, dan bola basket, terdapat juga panah yang diibaratkan sebagai arah pergerakan pemain dalam sebuah strategi permainan bola basket. Gambar panah digunakan warna orange jika dipadukan dengan latar hitam beigu pula dengan gambar papan ring dan sepatu yang terlihat seperti mengepakkan sayap, animasi dalam desain ini dimulai ketika bola keluar dari tengah lalu membesar dan strasi asap dari belakang bola yang akan terus mengepul menandakan semangat untuk bermain basket, satu persatu gambar
efek digunakan pada setiap kemunculan gambar dalam gerakan
2. Menu Lay Out
Gambar 20. Interface Menu Lay out
Desain Menu telah mengalami perubahan dari segi tombol dan background maupun elemen gambar dari desain sebelumnya juga dapat digunakan pada desain akhir, background masih sama seperti desain opening. Kali ini gambar utama bola basket yang menjadi lebih besar barada ditengah berkesan timbul dan ketika di klik kiri mouse pada bola, bola akan sedikit mengecil dan bersuara seperti dipantulkan kelantai. Elemen gambar berwarna putih yang sangat kontras dengan background, terdapat gambar pemain bola basket , tiang ring, gedung, dan graffiti. Semua itu dumaksudkan sebagai bola basket adalah permain masyarakat urban diperkotaan dan identik dengan graffiti.
Tombol menu sudah dimodifikasi dari sebelumnya menjadi terlihat lebih lembut dan glossy, dan aminasi tombol ini sangat unik karena ketika mouse diarahkan tombol akan menembakkan bola basket lalu berubah warna.
Mouse up
Mouse over
Font yang digunakan : Guardian Expanded Gambar 21. Tombol menu
Selain itu terdapat juga tombol untuk mendengarkan musik yang bisa dinyalakan dan dimatikan dengan animasi bermodel equalizer serta tulisan on/ off.
Tombol penting lainnya yaitu tombol exit pada tombol akan menuju keluar dari program sebelum keluar aka nada kredit title terlebih dahulu, tidakada animasi pada tombol ini
Mouse up
Mouse over
Font tombol : Kab
3. Menu isi Theory
Gambar 23. Menu isi Theory
Dalam menu ini akan membahas atau memberikan materi menyangkut tentang permainan bola basket, posisi pemain basket dan strategi dalam permainan bola basket. Tampian desain terlihat lebih sederhana karenakan difokuskan pada layar yang diberi latar orange sebagai layar yang akan menjalankan animasi. Judul halaman tertera di kiri atas dan tulisan di kiri bawah berfungsi sebagai tombol yang akan membawa pengguna kembali ke menu home, selain itu untuk menjalankan animasi ada tombol player terdiri dari tombol Play, Stop, Back, dan Next yang mempunyai animasi dengan mengeluarkan lingkaran orange dalam tombol ketika disentuh oleh pointer.
Mouse up
Mouse over Font : St. Andrew
4. Menu Isi Tricks
Gambar 26. Menu Isi Tricks
Pada menu ini berisikan video-video turorial pergerakan singkat yang akan dimainkan pada saat belajar strategi, terdiri dari enam video, yaitu video passing, cross over, pick.n roll, post play, Shooting, lay-up. Tombol yang digunakan pada desain ini adalah pengembangan dari bentuk tombol desain sebelumnya, tombol untuk kembali ke menu home juga disediakan. Pada video tombol player sudah tersedia secara otomatis .
5. Menu isi Strategy
Gambar 28. Menu isi Strategy
Pada menu ini yaitu pokok dari perancangan CD interaktif ini karena disini membahas bagaimana menentukan pola strategi dalam permainan bola basket dengan menggunakan illustrasi animasi, Lapangan yang digunakan hanya setengah lapangan karena permainan bola basket hanya bermain efektif di setengah lapangan saja dan lapangan diberikan warna lantai kayu yang persis dengan lantai lapangan indoor. Didalam lapangan terdapat icon baju tanpa lengan yang menjadi ciri khas pemain basket, dibuat sedemikian rupa sehingga sesuai dengan lapangan yang disediakan, ada sepuluh icon pemain dan satu bola yang dimainkan, terdiri dari 2 tim pemain yaitu tim putih dan tim merah masing masing terdiri dari 5 orang pemain yang mempunyai posisi tersendiri, posisi dilihat berdasarkan nomor yaitu :
Posisi satu yaitu Point guard atau play maker Posisi dua yaitu Shooting guard
Posisi tiga yaitu Small forward Posisi empat yaitu Forward
Posisi lima yaitu Center atau Bigman
Pada desain tombol digunakan tombol yang sama pada desain Menu Tricks dan tombol player juga menggunakan desain yang sama pada desain menu Theory, tombol pada daesain ini terdiri dari tombol :
Information, berisikan tentang pemberitahuan tentang garis-garis didalam lapangan dan arah serang atau jaga pada saat bermain serta siapa saja yang menemati posisi didalam lapangan.
2-3 Zone defense yaitu formasi penjagaan zona yang terdiri dari dua penjaga didepan dan tiga dibelakangnya.
Man to man defense yaitu penjagaan satu lawan satu, penjaga selalu mengukuti pergerakan lawannya.
Offensive, pada menu ini akan mempelajari strategi menyerang yang pertama menyerang dengan penjagaan zone defense yang kedua meyerang dengan penjagaan man to man.
Tutorial ini menggunakan narasi vocal yang akan menjelaskan istilah dari pergerakan yang dijalankan oleh animasi.
6. Menu Quiz
Gambar 28. Menu Quiz
pada menu quiz ini pengguna diberikan pertanyaan seputar apa yang sudah dipelajari dari menu-menu sebelumnya pertanyaan dan jawaban diberikan sefektif mungkin sehingga pengguna dapat mengingat-ingat apa yang telah dipelajari dari tutorial CD interaktif ini. Terdiri dari 5 pertanyaan yang bervariatif tidak hanya pilihan a,b,c dan d saja namun pilihan dapat langsung di klik ada jawaban. Pertanyaan ini dibuat satu arah jika benar bisa terus ke pertanyaan berikutnya jika salah maka harus kembali ke menu quiz awal sebagai hukuman.
Jika jawaban benar akan tampil dua ibu jari dan tulisan “GOOD” serta akan keluar tombol next untuk menuju ke pertanyaan selanjutnya, jika jawaban salah tampilan pada layar akan merah transparant dan muncul tulisan “Sorry you wrong, please” disambung dengan tulisan “try again” sebagai tombol untuk kembali pada pertanyaan awal.
Gambar 29. Halaman Jawaban benar dan salah 7. Credit Title
Gambar 30. Halaman Credit Title
Menu ini adalah tampilan penutup dari CD interaktif yang tertera alamat e-mail bagi siapapun yang mempunyai saran atau kritik mengenai CD interktif ini, tertera pula ucapan terima kasih bagi yang sudah menggunakan media ini dan
4.3 Produk Media Utama 1. Cover CD dan Label CD
Gambar 31. Back cover, front Cover CD dan Label CD
Cover CD berbentuk persegi berukuran lebar 13 dan tinggi 19 cm dan Label CD berbentuk bulat berdiameter 6 cm, desain pada cover dan label CD
menggunakan perpaduan antara desain opening dan menu pada CD interaktif. Desain pada back cover CD terdapat teks mengenai gambaran umum mengenai isi dari CD interaktif, terdapat juga pesan untuk meyalakan sistem audio karena CD interaktif ini menggunakan narasi/ voice over, selain itu terdapat pula informasi alamat email untuk kritik dan saran serta pemesanan lebih lanjut.
4.3.1 Produk Media Promosi
Gambar 32. Poster dan X-banner
4.3.2 Produk Pendukung
Gambar 35. Handuk kecil Gambar 36. Botol Air
Gambar 37. Head band Gambar 38. Hand band
Gambar 39. Pin Gambar 40. Ballpoint
4.4 Durasi / Timing lap
Dalam perancangan CD interaktif ini terdapat animasi, sound, dan video yang telah digabungkan menjadi satu media, mulai dari opening hingga ending masing – masing mempunyai waktu yang berbeda dalam setiap menu, berikut ini adalah waktu dari setiap animasi, sound, dan video yang terdapat dalam CD intraktif : Opening, durasi animasi 00:38 detik. animasi akan mengulang dari awal
ketika sudah sampai detik 38. Diikuti dengan musik yang berdurasi 00:28 detik.
Menu Home, durasi animasi 00:05 detik. Animasi akan terus berjalan karena menggunakan sistem loop pada Adobe Flash. Musik yang mengisi menu home berdurasi 00:57 detik, akan mengulang dari awal ketika waktu sudah habis.
Menu Theory, durasi animasi 04m:10 detik. Animasi terdiri dari beberapa chapter tetapi tetap satu arah. Terdapat narasi/ voice over dan musik sepanjang durasi animasi.
Menu Tricks, durasi video : - Video Passing, 00:54 detik - Video Cross Over, 00:12 detik - Video Pick n Roll, 00:13 detik - Video Post Play, 00:09 detik
Menu Strategy, durasi animasi : - Menu Information, 00:59 detik
- Menu 2-3 Zone Defense, 01m:28 detik - Menu Man to Man, 01m:02 detik - Menu Offensive, 02m:08 detik
Terdapat narasi/ voice over dan musik sepanjang durasi animasi.
Menu Quiz, animasi akan terus berjalan dalam setiap quiz sampai pengguna menjawab pertanyaan yang kemudian berlanjut kepertanyaan berikutnya karena animasi menggunakan sistem loop pada Adobe Flash.
Durasi animasi rata –rata dalam setiap quiz 00:04 detik.
Credit title, ini adalah menu ketika pengguna menekan tombol exit untuk keluar dari program CD interaktif. Durasi animasi 00:03 detik.
Durasi dalam CD interaktif tidak bisa dipastikan karena menggunakan system loop yang akan mengulang animasi tidak seperti film yang berjalan satu arah, jika keseluruhan durasi dari CD interaktif digabungkan maka total durasi menjadi 12 menit : 48 detik.
4.5 Spesifikasi Teknis Perancangan
Perancangan ini dibuat dengan didukung oleh tenaga komputer dan piranti lunak, dengan spesifikasi sebagai berikut :
1.Hardware :
Intel Pentium 4 Core2 duo VGA card 128 Mb RAM 512 Mb HD 120 Gb CD / DVD Room Sound Card Layar 17’ Flat 2. Software : Adobe Flash CS3
Penggunaan Adobe Flash sebagai software utama pada perancangan desain animasi CD interaktif, semua unsur audio visual dari awal sampai akhir digabungkan menggunakan software ini.
Adobe Photoshop CS3
Penggunakan Adobe Photoshop untuk mengedit foto (bitmap image) dan teks yang akan digunakan dalam CD interaktif, semua gambar disimpan dalam format .png dikarenakan format ini tidak membawa backgraund, serta ukuran file
Adobe CorelDraw X4
Software ini digunakan untuk membuat vector image yang dibuat sesuai dengan bentuk yang diinginkan kemudian diolah kembali dengan menggunakan photoshop.
Windows Movie Maker
Ini adalah software yang sudah tersedia pada windows, digunakan untuk mengedit video dan file yang dihasilkan tidak terlalu besar.
Adobe Auditions 3.0
Ini adalah software untuk mengolah suara atau music yang akan digunakan dalam media CD interaktif, file disimpan dalam format .wav dan .mp3 dengan ukuran file yang tidak terlalu besar.
4.6 Operasional
CD media interaktif ini digunakan dengan menggunakan perangkat komputer yang mempunyai CD Room atau DVD Room dan sangat disarankan untuk menggunakan speaker aktif karena hampir seluruh penjelasan didalam CD interaktif ini menggunakan sound/ voice over.
Program CD media interaktif ini memerlukan beberapa piranti pendukung agar dapat berjalan dengan baik, CD dimasukkan kedalam CD/DVD Room dan dijalankan dengan menggunakan Flash Player apabila komputer belum mempunyai software tersebut tidak perlu mencari lagi karena sudah sertakan didalam CD. CD dapat disimpan dan digunakan sesuai dengan kehendak, CD mempunyai daya tahan tersendiri oleh karena itu disarankan untuk selalu menaruh CD didalam cover cd yang disediakan.
