Kemudian koneksikan teks yang telah berhasil dibuat menjadi
button
dengan
action script
agar ketika diklik dapat berpindah ke
layer
menu, lalu ketikkan
script
sebagai berikut: onpress{
gotoAndStop1; }
Gambar 3.10 Script ke home
3.3 Layer
3.3.1 Huruf Hijaiyah
Pada bagian ini buatlah teks satu persatu huruf –huruf alphabet mulai dari huruf
“ا” sampai dengan “ ”. Setiap huruf nantinya akan dibuat cara pengucapannya seperti gambar berikut.
Universitas Sumatera Utara
Gambar 3.11 Tampilan susunan huruf
Gambar 3.12 Tampilan huruf dengan pengucapannya
Kemudian huruf-huruf tersebut lalu ubah
text
menjadi sebuah tombol dengan cara klik kanan lalu pilih
convert to symbol
lalu pilih
button
, kemudian klik 2 kali sehingga muncul tampilan berikut:
Gambar 3.13 Tombol huruf
Universitas Sumatera Utara
pilih salah satu huruf yang telah di tuliskan misalkan huruf “ا” lalu klik 2 kali. pilih
insert key frame
pada
Over
, begitu juga pada
Down
. Pada bagian over ketikkan teks “alif” yang merupakan cara pengucapannya dan sisipkan
sound
cara pengucapannya pada
library
yang sudah di
import
. Maka ketika tombol ini ditekan akan muncul
sound
pengucapannya secara otomatis. Dan begitulah seterusnya sampai huruf
“ ”.
3.3.2 Tombol Menu
Penulis membuat tombol menu ini tidak menggunakan gambar yang ada pada
library
, melainkan membuat sendiri dengan cara
create new symbol
atau langsung saja menekan Ctrl + F8 yang terdapat pada
keyboard
lalu pilih
button
. Penulis hanya me
ngetikkan teks “Menu” dan memberikan efek warna agar terlihat
menarik dan menyisipkan kata “menu”. Berikut tampilannya:
Gambar 3.14 Tombol kembali ke halaman menu
Setelah tombol sudah diberi efek dan disisipkan teks tersebut maka
insert key frame
pada
over
, dan
down
.
Universitas Sumatera Utara
Kemudian koneksikan teks yang telah berhasil dibuat menjadi
button
dengan
action script
agar dapat kembali ke
frame
menua dengan cara pilih
windows actions
atau menekan F9 pada
keyboard
maka akan muncul tampilan
action
tersebut, lalu ketikkan
script
sebagai berikut: onpress{
gotoAndStop2; }
Gambar 3.15 Tampilan tombol menu
3.3.3 Tombol Next
Penulis membuat tombol next ini tidak menggunakan gambar yang ada pada
library
, melainkan membuat sendiri dengan cara
create new symbol
atau langsung saja menekan Ctrl + F8 yang terdapat pada
keyboard
lalu pilih
button
. Penulis hanya mengetikkan teks “Next”
dan memberikan efek warna agar terlihat menarik dan menyisipkan kata “Next”. Berikut tampilannya:
Universitas Sumatera Utara
Gambar 3.16 Tombol next
Setelah tombol sudah diberi efek dan disisipkan teks tersebut maka
insert key frame
pada
over
, dan
down
.
Kemudian koneksikan teks yang telah berhasil dibuat menjadi
button
dengan
a ction script
agar dapat kembali ke
frame
menua dengan cara pilih
windows actions
atau menekan F9 pada
keyboa rd
maka akan muncul tampilan
action
tersebut, lalu ketikkan
script
sebagai berikut: onpress{
gotoAndStop4; }
Gambar 3.17 Script ke halaman selanjutnya
Universitas Sumatera Utara
3.3.4 Tombol back
Penulis membuat tombol back ini tidak menggunakan gambar yang ada pada
library
, melainkan membuat sendiri dengan cara
create new symbol
atau langsung saja menekan Ctrl + F8 yang terdapat pada
keyboard
lalu pilih
button
. Penulis hanya mengetikkan teks “back”
dan memberikan efek warna agar terlihat menarik dan menyis
ipkan kata “back”. Berikut tampilannya:
Gambar 3.18 Tombol back
Setelah tombol sudah diberi efek dan disisipkan teks tersebut maka
insert key frame
pada
over
, dan
down
.
Kemudian koneksikan teks yang telah berhasil dibuat menjadi
button
dengan
action script
agar dapat kembali ke
frame
menu dengan cara pilih
windows actions
atau menekan F9 pada
keyboa rd
maka akan muncul tampilan
action
tersebut, lalu ketikkan
script
sebagai berikut: onpress{
gotoAndStop3;
Universitas Sumatera Utara
}
Gambar 3.19 Tampilan script untuk kembali ke frame sebelumnya
3.3.5 Judul huruf hijaiyah
Penulis membuat judul dengan tulisan “Huruf Hijaiyah dan Penulisannya” ini
tidak menggunakan gambar yang ada pada
libra ry
, melainkan membuat sendiri dengan cara
create new symbol
atau langsung saja menekan Ctrl + F8 yang terdapat pada
keyboard
lalu pilih
movie clip
. Penulis
rectangle tool
untuk membuat kotak tulisan lalu
mengetikkan teks “Huruf Hijaiyah dan Penulisannya”
dan memberikan efek warna agar terlihat menarik. Berikut tampilannya:
Gambar 3.20 Tampilan judul huruf hijaiyah dan penulisannya.
Universitas Sumatera Utara
3.3.6 Cara Penulisannya
Ketika huruf “ا” ditekan maka akan muncul cara penulisan huruf “ا” tersebut.
Berikut tampilannya:
Gambar 3.21 Tampilan Cara Penulisan
Disini penulis membuat sendiri tampilannya. Untuk huruf penulis membuat sendiri dengan cara
create new symbol
atau langsung saja menekan Ctrl + F8 yang terdapat pada
keyboard
lalu pilih
movie clip.
setelah itu pilih teks dan ketikkan huruf
“ا”. Untuk membuat efek tampak seperti sedang menulis dengan cara, pertama penulis membuat layer 1 dengan nama “huruf” lalu klik pada tulisan
huruf “ا” tekan ctrl+B setelah itu pilih
era ser tool
dan hapuslah perlahan-lahan, cara penghapusannya mulailah dari bawah atau dari bagian yg terakhir kali
muncul. Setiap setelah menghapus salah satu bagian klik kanan lalu pilih
insert keyframe
atau langsung saja tekan F6 sampai semua bagian sudah terhapus lalu
block
lah seluruh frame setelah itu klik kanan dan pilih
reverse frame.
Setelah membuat efek tulisan tersebut barulah kita membuat efek pensilnya dengan cara
klik new layer beri nama layer dengan nama “pensil” drag gambar pensil yg sudah tersimpan di library, Disini penulis menggunakan gambar pensil yang sudah ada.
Universitas Sumatera Utara
Setelah mendrag nya letakkan gambar pensil tersebut disetiap bagian tulisan, geser gambar pensil mengikuti bagian-bagian tulisannya yang sudah dibuat
sebelumnya dan klik kanan lalu pilih
insert keyframe
atau langsung saja tekan F6 seperti yang dilakukan pada layer huruf yang telah dibuat sebelumnya. Berikut
tampilannya:
Gambar 3.22 Cara penulisan huruf
3.3.7 Tombol sound
Pada tombol ini penulis menggunakan gambar yang sudah ada. Lalu penulis membuat tombol ini dengan cara
create new symbol
atau langsung saja menekan Ctrl + F8 yang terdapat pada
keyboard
lalu pilih
button
. Tarik atau
drag
gambar tombol sound yang sudah tersimpan di
libra ry.
Berikut gambarnya:
Universitas Sumatera Utara
Gambar 3.23 Tombol sound
Setelah tombol sudah diberi jadi, lalu
insert key frame
pada
over
, dan
down
. Penulis memberi
sound
“alif” pada tombol ini dengan cara menyisipkan lagu yang sudah tersedia di
import
dan tersimpan di
library
pada
key frame Down
. Tampilannya sebagai berikut:
Gambar 3.24 Pemberian efek pada tombol sound
3.3.8 Tombol BACK
Penulis membuat tombol
back
ini tidak menggunakan gambar yang ada pada
library
, melainkan membuat sendiri dengan cara
create new symbol
atau langsung saja menekan Ctrl + F8 yang terdapat pada
keyboard
lalu pilih
button
. Penulis terlebih dahulu membuat
oval tool
dan membuatnya sehingga menjadi gambar
Universitas Sumatera Utara
awan dan memberikan efek warna agar terlihat menarik dan menyisipkan kata
“back”. Berikut tampilannya:
Gambar 3.25 Tombol back
Setelah tombol sudah diberi efek dan disisipkan teks, maka
insert key frame
pada
over
, dan
down
. Penulis hanya memberikan efek membesar pada tombol. Cara membesarkan ukuran tombol dengan cara mengklik pada
frame over
lalu pilih
properties
, dan rubahlah
position
dan
size
nya. Maka ketika kursor mengarah pada tombol ini akan muncul membesar.
Kemudian koneksikan tombol yang telah berhasil dibuat dengan
action script
agar ketika diklik dapat berpindah ke
layer
huruf hijaiyah dan penulisannya, lalu ketikkan
script
sebagai berikut: onpress{
gotoAndStop3; }
Universitas Sumatera Utara
Gambar 3.26 Script tombol back
3.3.9 Tombol MENU
Penulis membuat tombol menu ini tidak menggunakan gambar yang ada pada
library
, melainkan membuat sendiri dengan cara
create new symbol
atau langsung saja menekan Ctrl + F8 yang terdapat pada
keyboard
lalu pilih
button
. Penulis terlebih dahulu membuat
oval tool
dan membuatnya sehingga menjadi gambar awan
dan memberikan efek warna agar terlihat menarik dan menyisipkan kata “menu”. Berikut tampilannya:
Gambar 3.27 Tombol menu
Setelah tombol sudah diberi efek dan disisipkan teks, maka
insert key frame
pada
over
, dan
down
. Penulis hanya memberikan efek membesar pada tombol. Cara membesarkan ukuran tombol dengan cara mengklik pada
frame over
Universitas Sumatera Utara
lalu pilih
properties
, dan rubahlah
position
dan
size
nya. Maka ketika kursor mengarah pada tombol ini akan muncul membesar.
Kemudian koneksikan tombol yang telah berhasil dibuat dengan
action script
agar ketika diklik dapat berpindah ke
layer
menu, lalu ketikkan
script
sebagai berikut: onpress{
gotoAndStop2; }
Gambar 3.28 Script pada tombol menu
3.3.10 Belajar Tajwid
Penulis membuat sendiri semua gambar yang ada di menu ini, dengan cara
create new symbol
atau langsung saja menekan Ctrl + F8 yang terdapat pada
keyboard
lalu pilih
button
. Penulis menggunakan
oval tool
dan
rectangle tool
untuk membuat tombol menu-menunya dan memberikan efek warna agar terlihat
menarik. Berikut tampilannya:
Universitas Sumatera Utara
Gambar 3.29 Tampilan menu belajar tajwid
3.3.11 Isi Tajwid
Pada bagian isi tajwid ini menjelaskan tentang masing-masing penjelasan tajwid. penulis menuliskan isi penjelasan tajwid ini pada button, dengan cara
create new symbol
atau langsung saja menekan Ctrl + F8 yang terdapat pada
keyboard
lalu pilih
button
. Lalu pilih teks dan ketikkan semua isi penjelasan tajwidnya, Penulis hanya memberikan efek kotak ketika kursor mengarah pada isi tajwid. Penulis
membuatnya dengan cara, membuat dua layer, 1 layer bernama layer “tulisan” 1 layer lagi bernama “kotak” dengan menggunakan
rectangle tool
untuk membuat
kotaknya. Dan penulis hanya memberikan efek warna biru dan merah saja untuk tulisannya. Berikut tampilannya:
Gambar 3.30 Tampilan isi tajwid
Universitas Sumatera Utara
3.3.12 Tombol BACK
Penulis membuat tombol
back
ini dengan menggunakan gambar yang sudah ada dengan cara mengimport gambar yaitu klik
file import
import to library
dan pilih gambar yang tersedia. dengan menggunakan gambar yang ada pada
library
, lalu penulis menconvert gambar tersebut agar bisa menjadi tombol dengan cara,
convert to symbol
lalu pilih
button
setelah itu penulis menuliskan teks “back”. Berikut tampilannya:
Gambar 3.31 Tombol back
Pada bagian
Over
pilih insert
keyframe
, teks akan otomatis tersedia sesuai yang ada pada
frame Up
.
Insert key frame
lagi pada
down
. Penulis hanya memberikan efek pergantian warna pada teks dengan cara merubah warna teks pada bagian
over.
Setelah teks sudah berhasil dibuat menjadi
button
, kemudian koneksikan teks agar dapat kembali ke menu sebelumnya, dengan cara ketikkan action script berikut:
Universitas Sumatera Utara
onpress{ gotoAndStop34;
}
Gambar 3.32 Script pada Tombol back
Universitas Sumatera Utara
BAB 4
IMPLEMENTASI SISTEM
4.1 Hasil
