Cara Asyik Membuat CD Interaktif
CD interaktif merupakan salah satu hasil implementasi dari MULTIMEDIA
dimana terdapat hampir semua konten multimedia yaitu,
Gambar,Video,Animasi,Text, pengolahan/editing, serta pemberian navigasi
untuk menjalankan CD tersebut. Dengan adanya navigasi, maka orang yang
yang menjalankan CD tersebut dapat menelusur ke bagian-bagian yang
diinginkan, sehingga materi lebih jelas dan mendalam. Sehingga terjadi
interaksi antara orang yang menjalankan CD dengan program dan materi
yang ada pada CD tersebut. Beberapa kegunaannya antara lain: company
profile, gambaran sebuah proyek, CD materi pembelajaran, dan sebagainya.
Tahapan materi yang harus dipelajari adalah
- Camtasia studio (pengambilan objek gambar dan video /capturing)
- Adobe Photoshop (editing image/gambar)
- SwishMAX (animasi gambar dan teks dengan progam instan)
- Macromedia Flash (animasi gambar dan teks tingkat lanjut dengan action script)
- Pembuatan proyek CD pembelajaran, profil daerah, perusahaan dll.
Dan pada kali ini yang kita pelajari adalah design menggunakan aplikasi macromedia flash 8
Tahapan pembuatan dapat dibagi menjadi :
Menyiapkan gambar baground
Mengimport gambar baground & icon
Membuat Scene
Design Menu Utama
Menconvert icon menjadi tombol
Membuat Animasi Tombol
Membuat Menu Video
Memasukkan Video
Membuat navigasi tombol dengan action scrip
Publishing
Membuat Autorun
1. Membuat Design Baground Menu utama CD tutorial Pembelajaran
Buat sebuah dokumen baru pada Photoshop dengan ukuran width 1024px dan
height 768px dan resolusi 72 px/inch, karena resolusi ini cocok untuk
semua dispaly
Buka file gambar dan masukkan kedalam dokumen tadi dan edit hingga tampak seperti gambar di bawah ini
Kemudian simpan sebagai file web – save for web
Pilih format file PNG, save type Image only karena yang kita butuhkan hanya gambar dan simpan dengan nama BG,
3
Buatlah sebuah folder dengan nama media interaktif tempat file-file yang akan diperlukan nanti
Kita sudah mempunyai satu gambar baground. .tutup aplikasi photoshopnya.
Selanjutnya ambil gambar icon-icon dari internet dengan menggunakan
fasilitas mesin pencari icon bernama iconfinder,maka kita akan dengan
mudah mendapatkan icon dengan cepat.
Icon yang akan kita pakai
Simpan icon kedalam folder media interaktif
2. Mengimport Baground dan icon ( tombol )
Sekarang saatnya kita membuat menu utama
Pertama buka aplikasi flash
4
Pilih flash document Lalu atur document propertiesnya dengan
dimensions sesuai ukuran baground yang kita buat di photoshop yaitu
1024px X 768px
Tekan tombol Ctrl + 2 untuk mengatur tampilan
Setelah itu masukkan gambar yang sudah kita buat tadi dengan cara
mengimportnya kedalam library lalu drag ke dalam stage sehingga tampak
seperti gambar dibawah ini
Klik file – import – import to Library kemudian drag ke dalam stage
5
Lalu dengan cara yang sama, import icon-icon yang diperlukan ke dalam library
Secara otomatis kita akan mendapatkan scene1 dan layer1
Tambahkan 2 scene lagi dengan cara klik insert – Scene
Atau klik tombol “ + “ pada panel Scene
Untuk memunculkan panel scene klik scene klik window – other panels – scene
Rename/ganti nama Scene menjadi sebagai berikut :
Scene 1 = menu utama
Scene 2 = menu video
Scene 3 = menu about
**cara rename cukup double klik pada nama scene yang diinginkan
6
3. Design Menu Utama
Pilih/klik Scene menu utama lalu buat layer baru dengan cara insert – timeline-layer atau klik pada tanda “ + “
Maka pada scene “menu Utama” kita akan mendapatkan 2 layer
Rename / ganti nama layer1 dengan nama Baground dan kunci layer tsb. Dengan cara klik icon yang bergambar “gembok”
Dan layer2 baru rename dengan nama tombol,
kemudian drag icon dari Library ke layer yang bernama tombol untuk kita ubah menjadi tombol untuk pada menu utama ini
7
Atur dan design hingga tampak seperti gambar dibawah ini
4. Meng-convert icon menjadi tombol
Sebelumnya perlu diketahui,bahwa tombol dalam suatu CD interaktif
berguna sebagai navigasi untuk menuju ke file atau menu yang diinginkan
dan juga sebagai sarana interaksi dari pengguna, oleh karena itu
keberadaan tombol sangat vital sekali, tombol bisa berupa icon,gambar
maupun teks.
Kali ini yang akan kita jadikan tombol adalah icon-icon yang sudah kita siapkan sebelumnya
Untuk mejadikan gambar icon menjadi tombol,baiklah kita lanjutkan materi diatas…
Yang pasti kita masih berada pada scene menu utama dan pastikan kita telah memilih layer tombol
Klik kanan pada gambar icon yang diinginkan misalnya icon home pilih
convert to symbol lalu pada option type behavior-nya pilih Button-pada
Registration pilih yang tengah pada Name ketikkan home lalu klik Ok.
8
Lakukan hal yang sama pada gambar icon yang lainnya dan beri nama masing-masing :
Movie, about, close
5. Membuat Animasi Pada Tombol (Rolover)
Untuk membuat animasi pada tombol dengan cara klik dua kali pada tombol
yang diinginkan, misalnya pada tombol home maka akan masuk ke bagian
dalam dari tombol tersebut
(perhatikan gambar dibawah)
9
Keterangan :
Up : frame keadaan tombol dalam kondisi normal (stand by)
Over : frame keadaan tombol dalam kondisi dilewati oleh pointer mouse
Down : frame keadaan tombol dalam kondisi ditekan
Hit : area tekan tombol
Berdasarkan keterangan diatas kita akan membuat tombol ini menjadi besar ketika dilewati mouse
Klik kanan pada frame over lalu masukkan keyframe, atau tekan
F6,kemudian besarkan gambar dari tombol home menggunakan Tool Free
Transform Tool
Selanjutnya pada frame down lakukan hal yang sama tapi gambar tombol home-nya dikecilkan
Setelah semua selesai, untuk kembali ke stage utama klik tanda panah di sebelah menu utama
Lakukan hal yang sama pada tombol-tombol yang lainnya.
10
6. Membuat Menu Video
Selanjutnya kita membuat menu video, yang didalamnya akan berisi video-video tutorial.
Kita mulai aja.
Klik/pilih scene video,akan tampak stage baru yang masih kosong,karena belum di isi apa-apa
Lakukan hal yang sama seperti kita membuat menu utama Cuma bedanya kita
tambahkan 2 buah layer didalamnya kita mulai aja : drag gambar baground,
lalu tambahkan layer tombol dan satu buah layer lagi rename dengan nama
isi
11
Masukkan tombol-tombol yang diperlukan ke dalam layer tombol
7. Memasukkan Video
Untuk memasukkan video kedalam stage, terlebih dahulu harus diketahui hal-hal sebagai berikut :
- File video harus berada dalam folder utama (folder media interaktif)
- File video harus ber ekstensi .flv (bisa di convert menggunakan format factory)
Semisal kita ingin memasukkan video interaktif tiga macam maka sebelum
memasukkan file video, terlebih dahulu kita buat 4 buah keyframe pada
layer isi
Caranya : klik layer isi, pada frame ke 4 masukkan frame dengan cara
klik kanan pada frame ke 4 lalu insert frame, atau dengan menekan tombol
F5
12
Kemudian double klik pada frame 2 pada layer isi, lalu klik kanan dan
pilih convert to blank keyframes maka layer isi akan terisi 4 buah
blank keyframe yang nantinya satu persatu framenya akan kita isi dengan
video tutorial
Sekarang saatnya kita import video tutorial yang telah kita siapkan sebelumnya
Sebelumnya klik frame ke 2 dari layer isi yang akan diisi dengan video pertama
Sengaja langsung kita isi yang frame kedua karena untuk frame pertama nantinya kita bisa masukkan teks ucapan selamat datang
13
Berikut langkah Mengimport video :
Klik file – import – import video
Pada jendela select video klik tombol browse… Pilih file video yang diperlukan, lalu klik Open
Pada menu selanjutnya klik next…dan next lagi…
Pada menu pilihan skin…anda juga bisa next aja……terakhir klik finish
14
Terakhir biasanya flash meminta kita harus menyimpan file flash ini, ketik aja nama yang anda inginkan lalu klik tombol save..
Dengan cara yang sama, Import semua file video yang diperlukan.
Misalnya :
Frame 1 = kosong
Frame 2 = video 1
Frame 3 = video 2
Frame 4 = video 3
Selanjutnya pada layer baground dan layer tombol berilah farme pada
posisi no 5 seperti yang pada layer isi jangan keyframe tapi cukup
insert frame aja
15
Tanda bahwa setiap frame sudah berisi movie bisa dilihat dengan mengklik tiap-tiap frame
Setelah semua frame terisi dengan film yg sesuai, atur ukuran file video
tersebut sehingga penempatannya sesuai dengaan ukuran yang kalian
harapkan. Agar setiap frame sama ukuran dan penempatannya kita bisa
menggunakan fasilitas ONION Skin
Setelah semua selesai tertata kita harus memberikan action script pada
masing-masing frame yang berisi video tersebut, dengan cara pilih frame 1
klik kanan pilih action lalu ketikkan script
Stop();
Lakukan hal itu pada frame 1,2,3 dan 4 pada layer isi
16
Kemudia pada frame 1 (frame pertama) dengan menggunakan text tool ketikkan teks “selamat datang di media interaktif “
Dan tambahkan nama – nama tombol movie, pada layer tombol sehingga hasilnya seperti gambar dibawah
Lakukan hal yang sama pada scene menu utama sehingga hasilnya seperti dibawah ini
Untuk Scene menu about tentunya anda juga bisa design sendiri sesuai selera masing-masing
17
8. Membuat Navigasi Tombol dengan Action Script
Selanjutnya memberikan action script pada tombol dan beberapa frame
Kita mulai dari scene yang pertama : scene menu utama
Klik scene menu utama, buka lock pada layer baground, kemudian klik
kanan pada frame pertama layer baground pilih action, dan ketikkan :
Stop();
*// maksudnya begitu dijalankan maka akan berhenti pada scene menu utama
Selanjutnya kita atur navigasi pada tombol di scene menu utama yang
pertama kita pilih tombol movie, klik kanan pada tombol movie – pilih
action lalu ketikkan action berikut
18
on (release) {
gotoAndPlay (“menu movie”,1);
}
*// maksudnya ketika tombol di release(ditekan) maka akan pergi menuju ke scene menu video,frame ke 1
Kemudian kita atur navigasi dari tombol “about”
Klik kanan tombol about, pilih Action lalu ketikkan :
on (release) {
gotoAndPlay (“menu about”,1);
}
*// maksudnya ketika tombol di release(ditekan) maka akan pergi menuju ke scene menu about di,frame ke 1
19
Dan untuk action script pada tombol close, ketikkan script berikut :
on (release) {
fscommand(“quit”);
}
*// maksudnya ketika tombol di release(ditekan) maka akan menjalankan perintah keluar dari aplikasi
Selanjutnya kita beralih pada scene menu video : langkahnya sama, kita
pilih satu tombol video yang atas trus kita beri action sebagai berikut :
on (release) {
gotoAndStop(2);
}
*// maksudnya ketika tombol di release(ditekan) maka akan pergi ke ,frame ke 2 (menjalankan video yang berada pada frame2
berikutnya dengan langkah yang sama, kita pilih satu tombol video yang tengah trus kita beri action sebagai berikut :
on (release) {
gotoAndStop(3);
}
*// maksudnya ketika tombol di release(ditekan) maka akan pergi ke ,frame ke 3 (menjalankan video yang berada pada frame3
20
Demikian juga dengan langkah yang sama, klik tombol video yang bawah dan beri action sebagai berikut :
on (release) {
gotoAndStop(4);
}
*// maksudnya ketika tombol di release(ditekan) maka akan pergi ke ,frame ke 3 (menjalankan video yang berada pada frame4
**// Untuk tombol home dan close tentunya anda bisa memberikan action script seperti contoh di atas tadi karena perintahnya sama
Dan selanjutnya pilih scene about, dan karena tombolnya sama dengan
tombol pada menu utama maka action scriptnya juga sama dengan menu
utama……
Hanya saja jangan lupa pada frame pertama pada layer baground harus diberikan script :
Stop();
Dan pada tombol home : berikan script
on (release) {
gotoAndPlay (“menu utama”,1);
}
Setelah semua selesai jalankan dengan menekan tombol Ctrl+Enter
21
9. Publishing
Untuk menjadikan file flash ini bisa berjalan tanpa aplikasi flash ini maka kita harus menjadikan file ini ber ekstensi .exe
Caranya :
Klik file – Publish setting – lalu pada jendela yang muncul, centang pada windows Projector – lalu publish
10. Membuat File Autorun
Buka aplikasi notepad, lalu ketikkan
[autorun]
Open=ahmad.exe
Kemudia save dengan nama ( autorun.inf) save kedalam folder media interaktif
Blok semua file lalu burning semua dengan aplikasi pembakar CD..
selesai
About these ads
