Langkah Kerja Pembuatan CD Multimedia Interaktif Pengenalan Tajwid

OLEH:

Rina Yulius

02832/ 08

PENDIDIKAN TEKNIK INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS NEGERI PADANG

2010
PERSIAPAN

Untuk CD interaktif ini kita memakai gabungan program Adobe Flash CS3 dan Macromedia
Director. Ada empat menu utama pada CD interaktif ini, yaitu Home, About Me, Pengantar
Tajwid, dan Belajar Tajwid. Menu-menu ini juga disertai submenu-submenu. Berikut ini
kerangka CD interaktif yang akan dibuat:

Welcome Screen

1. Buka Adobe Flash CS3 dan buat dokumen baru dengan ukuran 600 x 600.

2. Pastikan stage berwarna putih

3. Pada frame 1, tekan F9 dan masukkan script berikut:
//membuat variable jarak bernilai 0
jarak = 0;
 //membuat variable sudut bernilai 0
sudut = 0;
//membuat variable posX bernilai 0
posX = 0;
//membuat variable posY bernilai 0
posY = 0;
//membuat variable kecepatan bernilai 0.2
kecepatan = 0.2;
//membuat movie clip kosong dengan nama spiral pada kedalaman paling
atas
this.createEmptyMovieClip("spiral", this.getNextHighestDepth());
//letakan movie clip spiral ditengah-tengah stage
spiral._x = Stage.width/2;
spiral._y = Stage.height/2;
//mengatur garis yang akan dibuat di dalam movie clip spiral dengan
ketebalan garis 6 dan berwarna hitam
spiral.lineStyle(6, 0x000000);
//perintah yang dijalankan ketika frame di scene 1 dimainkan
onEnterFrame = function () {
//nilai rotasi movie clip spiral ditambah 20
spiral._rotation += 20;
//jika nilai variable jarak kurang dari 150
if (jarak<150) {
//nilai variable jarak ditambah 0.7
jarak += 0.7;
//nilai variable sudut ditambah nilai variable kecepatan
sudut += kecepatan;
//ubah nilai variable posX menjadi cosinus nilai variable
sudut dikali nilai variable jarak
posX = Math.cos(sudut)*jarak;
//ubah nilai variable posY menjadi sinus nilai variable
sudut dikali nilai variable jarak
posY = Math.sin(sudut)*jarak;
//membuat garis di dalam movie clip spiral pada posisi x
sesuai nilai variable posX dan posisi y sesuai nilai variable posY
spiral.lineTo(posX, posY);
}
};

4. Tampilannya seperti berikut :

5. Simpan file dengan nama “spiral”

6. Buka program Macromedia Director. Importkan file spiral tadi dan atur posisinya di
score hingga menempati frame 1-90. Tambahkan teks “Enter” berwarna merah.
 7. Buat marker baru dengan nama Home pada frame ke 91.
8. Di frame 90, pilih frame script dan masukkan script berikut:

e
9. Klik kanan teks Enter, pilih script, dan masukkan script berikut:

10. Tampilan akhir untuk halaman welcome screen seperti berikut:

11. Ketika Enter di-klik, maka akan masuk ke halaman Home.

MENU “HOME”

1. Pada Macromedia Director, importkan file-file yang dibutuhkan (file background,

sound, dll).
2. Atur letak masing-masing file di frame 91-95
3. Pada akhir frame di tiap-tiap halaman (Home, About Me, dst), pilih frame script dan
masukkan file berikut:
 Sedangkan untuk masing-masing frame awal di tiap halaman, buat marker dengan
nama yang mewakili tiap-tiap halaman.

4. Klik kanan pada masing-masing tombol menu. Pilih script dan masukkan script
berikut:

About Me:

Pengantar Tajwid:

Belajar Tajwid:

Tampilan akhir home:

MENU “ABOUT ME”

1. Importkan file-file yang diperlukan hingga tampilannya seperti berikut:

2. Atur posisinya hingga menempati frame 96-100

3. Untuk teks, dapat kita buat dengan text tool.

4. Sesuaikan parameternya hingga sesuai tampilan di atas.

5. Pada tombol Home, masukkan script berikut:

Artinya : jika tombol diklik, maka akan masuk ke halaman Home.

MENU “PENGANTAR TAJWID”

1. Importkan file yang dibutuhkan dan drag ke score. Atur posisinya hingga
menempati frame 101-105.
2. Buat teks berisi deskripsi tajwid menggunakan text tool
3. . Karena ukuran teks cukup panjang, kita ubah formatnya menjadi berbentuk
scrolling. Caranya:

Klik teks yang akan dibentuk scroll, pada property inspector pilih text >> framing
>> scrolling.

MENU “TAJWID”

Pada menu tajwid ini, ada 8 sub menu yang akan kita tampilkan yaitu “Bentuk,
Makhraj, dan Sifat Huruf Hijaiyyah”, “Izhaar”. “Idghaam”, “Iqlaab”, “Ikhfaa”,
“Qalqalah”, “Waqaf”, dan “Madd”.
Masing-masing submenu ini akan kita buat di Adobe Flash CS3. Langkah
pembuatan masing-masing sub menu hampir sama satu sama lain. Berikut ini
contoh submenu “Bentuk, Makhraj, dan Sifat Huruf Hijaiyyah”.

Submenu “Bentuk, Makhraj, dan Sifat Huruf Hijaiyyah”

Cara pembuatannya:

1. Buka Adobe Flash CS3. Buat dokumen baru berukuran 800 x 600.
2. Import semua file yang dibutuhkan
3. Pada layer1, masukkan file gambar untuk background. Atur posisinya hingga
sesuai dengan ukuran stage.

4. Tambahkan layer baru. Masukkan image alif ke stage.

5. Convert image alif tadi menjadi button dengan cara menekan F8.

6. Klik image yang telah diubah menjadi button tadi dua kali. Hingga muncul
tampilan baru pada frame. Klik kanan over dan pilih insert key frame, begitu
juga dengan down dan hit.
7. Untuk menambahkan efek suara, letakkan mouse di over. Drag file suara dari
library ke button.
8. Letakkan mouse di over. Tekan F8. Ubah button tadi menjadi movie clip.

9. Double klik movie clip tadi. Ambil text dan buatlah deskripsi yang diinginkan.

10. Tambahkan image-image lainnya hingga semua huruf hijaiyyah selesai.

Lakukan langkah yang sama seperti pembuatan huruf alif untuk membuat
deskripsinya.
Submenu “Izhaar”

A. Sesuai kerangka awal tadi, pada submenu Izhaar ada dua bagian, yaitu Izhaar
Halqi dan Syafawi. Bagian-bagian ini akan kita buat menggunakan Adobe Flash
CS3.

Izhaar Halqi

1. Buat dokumen baru dengan ukuran 800 x 600.

2. Importkan file-file yang dibutuhkan.
3. Untuk background, masukkan file image background. Begitu juga dengan sound
pengiringnya.
4. Tambahkan layer baru untuk huruf-huruf izhaar dan deskripsinya.
5. Atur posisinya hingga tampilannya seperti berikut:

6. Jadikan masing-masing image tadi sebagai button dengan cara menekan F8 dan
convert menjadi button.
7. Untuk menambahkan efek suara ketika mouse digerakkan dan ditekan pada
tombol tersebut, klik button 2 kali dan masukkan keyframe di over, down, dan hit.

8. Letakkan kursor di over, dan drag file sound ke button.

Izhaar Syafawi

Untuk pembuatan animasi pada bagian “Izhaar Syafawi”, kita cukup berpedoman
pada langkah pembuatan bagian “Izhaar Halqi” tadi. Setelah kedua bagian itu selesai,
simpan file.

B. File Izhaar Halqi dan Izhaar Syafawi yang sudah disimpan tadi (dalam format
*swf), kita importkan ke dalam Macromedia Director. Atur posisinya pada frame
yang sesuai (submenu Izhaar pada frame 116-120, Izhaar Halqi pada frame 121-
125, dan Izhaar Syafawi pada frame 126-130)

C. Sertakan juga tombol navigasi (Home, Next, dan Back) serta deskripsi hingga
tampilannya seperti berikut:
D. Untuk masing-masing deskripsi, masukkan script yang sesuai dengan marker yang
dituju. Caranya, klik kanan deskripsi yang ada dan pilih script. Begitu juga dengan
tombol navigasi.

NB : Submenu yang lain, langkah pembuatannya sama dengan submenu

sebelumnya.
Menggabungkan Submenu di Macromedia Director

1. Buka kembali aplikasi Macromedia Director tadi

2. Tambahkan file yang akan dijadikan submenu tadi ke cast member Director
dengan cara mengimportkan file dari Adobe Flash CS3 (dalam bentuk *swf).
3. Atur posisi masing-masing file *swf tadi di frame yang sesuai.
4. Tambahkan script di akhir frame masing-masing halaman, yaitu:

5. Tambahkan juga marker di tiap awal frame masing-masing halaman yang

berfungsi sebagai penanda.
6. Untuk tombol back, next, dan home, tambahkan script dengan mengklik kanan
tombol dan memilih script, lalu masukkan script yang sesuai. Dengan memakai
marker, kita tinggal mengubah halaman yang dituju di dalam script dengan
mengubah nilai markernya. Contohnya: go “Home” yang berarti menuju halaman
Home atau halaman utama bisa diubah menjadi go “Idghaam” jika kita
menginginkan navigasi ke halaman submenu Idghaam, begitu seterusnya.
7. Berikut tampilan masing-masing submenu yang ada:

Izhaar

Idghaam
Iqlaab

Ikhfaa

Qalqalah
 Waqaf

Madd

Mempublish CD Interaktif

1. Pilih file >> Publish setting

2. Pilih Windows projector (atau bentuk publish yang diinginkan) >> Publish