ANALISIS DAN PERANCANGAN
23. INPUT NAMA
3.4 Perancangan Antarmuka
Perancangan Antarmuka meliputi perancangan antarmuka pada tampilan user. Berikut diantaranya perancangan antarmuka pada tampilan user.
3.4.1 Perancangan Tampilan Awal
Perancangan tampilan awal animasi adalah sebagai berikut :
Gambar 3.2 Perancangan Tampilan Awal Animasi
Cara pembuatannya adalah sebagai berikut :
1. Buka lembar kerja macromedia flash 8, kemudian pilih flash document. 2. Buat satu layer pada timeline, yaitu layer awal(background).
(R), klik kanan pilih convert to symbol dengan nama cover pilih movie clip, lalu ok.
4. Untuk pembuatan animasi tulisan berjalan, klik dua kali pada background yang sudah di jadikan movie clip dengan nama cover. Tambahkan layer background seperti yang diawal kemudian tambahkan layer design, layer teks jatuh untuk Tulisan “sistem”. Sebelum itu perhuruf di convert symbol dan pilih button klik ok. Untuk teks berjalannya tambahkan layer dengan nama teks berjalan. Di dalam layer ini gunakan line tool (N) dan bentuk sesuai tulisan “Pencernaan”. Setelah itu, tambahkan layer baru dengan nama actions script, lalu klik di frame akhir klik kanan pilih insert key frame dan klik kanan lagi pilih actions maka, akan muncul actions frame untuk tempat meletakan script seperti yang berikut ini : stop();
5. Untuk pembuatan button materi dan button kuis di pisahkan dalam 2 layer, pada layer button materi sebelum itu gunakan Rectangle Tool (R). Setelah itu, gunakan Text Tool (T) dengan Bernard MT Condensed. Sebaliknya, begitu juga dengan button kuis menggunakan tools - tools yang sama dengan button materi.
6. Untuk layer pada musik, klik frame 1 lalu pilih menu file, klik import pilih import to library dan pilih lagu sesuai yang diinginkan. Selanjutnya klik menu window pilih library lalu cari lagu yang telah di import dan klik kanan pilih linkage kemudian pilih export for actionscript dan export for firstframe serta buat nama yang diinginkan pilih ok.
3.4.2 Perancangan Tampilan Menu
Perancangan tampilan menu adalah sebagai berikut :
Gambar 3.3 Perancangan Tampilan Menu
Cara pembuatannya adalah sebagai berikut :
1. Buka lembar kerja macromedia flash 8, kemudian pilih flash document. 2. Buat satu layer pada timeline, yaitu layer awal(background).
3. Untuk pembuatan background pada layer awal menggunakan Rectangle Tool (R) dengan Fiil Color dan Stroke Color.
4. Selanjutnya pembuatan button alat – alat pencernaan, sistem pencernaan dan gangguan pencernaan yang di tempatkan di layer yang terpisah. Pada button alat – alat pencernaan, button sistem pencernaan dan button gangguan pencernaan menggunakan Oval Tool (O). Pada button di buat menggunakan Line Tool (N).
5. Untuk layer pada musik, klik frame 1 lalu pilih menu file, klik import pilih import to library dan pilih file lagu. Selanjutnya klik menu window pilih
library lalu cari lagu yang telah di import dan klik kanan pilih linkage kemudian pilih export for actionscript dan export for firstframe serta buat nama yang diinginkan pilih ok.
3.4.3 Perancangan Tampilan Materi Pembuka Alat Pencernaan
Perancangan tampilan materi pembuka alat pencernaan adalah sebagai berikut :
Gambar 3.4 Perancangan Tampilan Materi Pembuka Alat Pencernaan
Cara pembuatannya adalah sebagai berikut :
1. Buka lembar kerja macromedia flash 8, kemudian pilih flash document. 2. Buat satu layer pada timeline, yaitu layer awal(background).
3. Untuk pembuatan background pada layer awal menggunakan Rectangel Tool (R) dengan Fiil Color dan Stroke Color serta tambahan design yang menggunakan Line Tool (N).
dan Papyrus.
5. Selanjutnya untuk button back dan button next menggunakan Line Tool (N). 6. Untuk layer pada musik, klik frame 1 lalu pilih menu file, klik import pilih
import to library dan pilih file lagu. Selanjutnya klik menu window pilih library lalu cari lagu yang telah di import dan klik kanan pilih linkage kemudian pilih export for actionscript dan export for firstframe serta buat nama yang diinginkan pilih ok.
3.4.4 Perancangan Tampilan Materi Bagian Alat Pencernaan
Perancangan tampilan materi alat pencernaan adalah sebagai berikut :
Gambar 3.5 PerancanganTampilan Materi Bagian Alat Pencernaan
Cara pembuatannya adalah sebagai berikut :
1. Buka lembar kerja macromedia flash 8, kemudian pilih flash document. 2. Buat satu layer pada timeline, yaitu layer awal(background).
3. Untuk pembuatan background pada layer awal menggunakan Rectangle Tool (R) dengan Fiil Color dan Stroke Color.
4. Untuk membuat gambar menggunakan Line Tool (N) dan Fiil Color serta Stroke Color. Dan untuk membuat animasi gambar dibuat dalam layer yang berbeda, yang di dalam setiap frame di buat dua gambar yang berbeda bentuk maupun ukuran sehingga animasi gambar dapat terlihat lebih hidup sesuai dengan yang aslinya.
5. Untuk pembuatan teks menggunakan Text Tool (T) dengan Papyrus dan ditambahkan desain garis yang menggunakan Line Tool (N).
6. Selanjutnya untuk button back dan button next menggunakan Line Tool (N).
3.4.5 Perancangan Tampilan Animasi Orang Berjalan
Perancangan tampilan animasi orang berjalan adalah sebagai berikut :
Cara pembuatannya adalah sebagai berikut :
1. Buka lembar kerja macromedia flash 8, kemudian pilih flash document. 2. Buat satu layer pada timeline, yaitu layer awal(background).
3. Untuk pembuatan background pada layer awal menggunakan Rectangle Tool (R) dengan Fiil Color dan Stroke Color. Selnjutnya background ditambahin dengan pemandangan perpohonan yang dibuat menggunakan Line Tool (N) dan Rectangle Tool (R) dan dibentuk sesuai yang diinginkan.
4. Untuk pembuatan animasi orang berjalan di gunakannya Rectangle Tool (R) dengan Fiil Color dan Stroke Color dan dibutuhkan kreatifitas dalam membentuk gambar orang berdiri hingga membungkuk. Di dalam setiap frame diletakkan gambar yang berbeda dengan secara bertahap – tahap agar gambar dapat terlihat lebih hidup.
5. Selanjutnya pembuatan animasi buah apel menggunakan tools – tools yang sama, seperti Rectangle Tool (R) dengan Fiil Color dan Stroke Color. Dan untuk membuatnya tampak seperti buah apel yang sedang jatuh di butuhkan pengaturan di setiap frame, yang dimanam di setiap frame diletakkan gambar yang sama namun, tata letak buah apel yang berbeda dari mulai yang miring kiri, miring kanan dan lurus.
6. Selanjutnya untuk button next menggunakan Line Tool (N).
7. Untuk layer pada musik, klik frame 1 lalu pilih menu file, klik import pilih import to library dan pilih file lagu. Selanjutnya klik menu window pilih library lalu cari lagu yang telah di import dan klik kanan pilih linkage kemudian pilih export for actionscript dan export for firstframe serta buat nama yang diinginkan pilih ok.
3.4.6 Perancangan Tampilan Proses Pencernaan
Perancangan tampilan proses pencernaan adalah sebagai berikut :
Gambar 3.7 Perancangan Halaman Proses Pencernaan
Cara pembuatannya adalah sebagai berikut :
1. Buka lembar kerja macromedia flash 8, kemudian pilih flash document. 2. Buat satu layer pada timeline, yaitu layer awal(background).
3. Untuk pembuatan background pada layer awal menggunakan Rectangle Tool (R) dengan Fiil Color dan Stroke Color.
4. Untuk pembuatan animasi proses pencernaan dapat menggunakan klik Add Motion Guide dan gunakan Line Tool (N) untuk membuat garis yang dimana makanan akan melewati rongga pencernaan dari mulut sampai dengan usus kecil. Kemudian tambahkan layer button makanan yang akan masuk ke dalam tubuh. Setelah itu, frame 1 layer Guide diletakkan button makanan di ujung awal Line Tool (N) dan di frame akhir button makanan diletakkan di ujung
akhir Line Tool (N) dan dilanjutin dengan menambahkan Create Motion Tween di layer Guide. Kemudian untuk button makanan masuk di usus besar di buat dengan cara yang sama dengan cara sebelumnya. Namun, perbedaannya hanya terletak di frame yang berbeda yaitu di setelah frame usus kecil.
5. Untuk pembuatan animasi proses pencernaannya berhenti, tambahkan layer baru dengan frame terakhir masukkan actions script berikut ini : Stop();
6. Selanjutnya untuk pembuatan teks digunakan Text Tool (T) dengan
PMingLiU, dan teks diletakkan sesuai dimana button makanan berada.
3.4.7 Perancangan Tampilan Gangguan Pencernaan
Perancangan tampilan gastritis adalah sebagai berikut :
Gambar 3.8 Perancangan Tampilan Gangguan Pencernaan
Cara pembuatannya adalah sebagai berikut :
2. Buat satu layer pada timeline, yaitu layer awal(background).
3. Untuk pembuatan background pada layer awal menggunakan Rectangle Tool (R), Oval Tool (O) dan Fiil Color serta tambahan desain yang sederhana. 4. Untuk Animasi Orang digunakannya tools – tools, seperti Rectangle Tool (R),
Oval Tool (O) Stroke Color dan Fiil Color. Setelah itu, untuk membuat gambar bergerak kita tambahkan disetiap frame dengan 2 gambar yang berbeda bentuk maupun ukuran dan diulangi di frame – frame selanjutnya. 5. Setelah itu tambahkan layer baru untuk button home, yang dimana jika di
tekan button ini akan kembali kehalaman utama.
3.4.8 Peracangan Tampilan Input Nama Untuk Kuis
Perancangan tampilan input nama untuk kuis adalah sebagai berikut :
Gambar 3.9 Perancangan Tampilan Input Nama Untuk Kuis Cara pembuatannya adalah sebagai berikut :
2. Buat satu layer pada timeline, yaitu layer awal(background).
3. Untuk pembuatan background pada layer awal digunakannya Background Color dengan warna #000000 dan tambahan desain yang sederhana.
4. Untuk membuat penginputan nama pada saat memulai kuis dapat digunakan Text Tool (T) dengan tipe Input Text di menu properties dan tambahkan variabelnya dengan keterangan “nama”.
5. Selanjutnya untuk membuat button Mulai digunakan Rectangle Tool (R), Fiil Color dan Stroke Color serta tambahkan Text Tool (T) didalamnya. Setelah itu convert to symbol, pilih button klik ok.
3.4.9 Perancangan Tampilan Pertanyaan
Perancangan tampilan pertanyaan kuis adalah sebagai berikut :
Gambar 3.10 Perancangan Tampilan Kuis
Cara pembuatannya adalah sebagai berikut :
2. Buat satu layer pada timeline, yaitu layer awal(background).
3. Untuk pembuatan background pada layer awal digunakannya Background Color dengan warna #000000 dan tambahan desain yang sederhana.
4. Untuk text pertanyaan yang disediakan menggunakan Text Tool (T) dengan Traditional Arabic.
5. Selanjutnya untuk pilihan jawaban a, b dan c menggunakan Text Tool (T) dengan Orange LET. Didalam setiap pilihan harus di button kan, dengan cara convert to symbol pilih button klik ok pada masing – masing disetiap pilihan jawaban a, b dan c.
3.4.10 Perancangan Tampilan Hasil Nilai
Perancangan tampilan hasil nilai adalah sebagai berikut :
Gambar 3.11 Perancangan Tampilan Hasil Nilai Cara pembuatannya adalah sebagai berikut :
2. Buat satu layer pada timeline, yaitu layer awal(background).
3. Untuk pembuatan background pada layer awal digunakannya Background Color dengan warna #000000 dan tambahan desain yang sederhana.
4. Tambahkan layer baru untuk tempat menampilkan nama yang telah diinput diawal, dengan menggunakan Text Tool (T) dengan tipe Input Text dan variabel dengan keterangan “nama”. Selain itu untuk tempat menampilkan hasil nilai yang didapatkan digunakannya dengan tools yang sama yaitu Text Tool (T) dan tipe yang berbeda Dynamic Text dengan variabel “hasil”. Selanjutnya tambahkan lagi Text Tool (T) untuk keterangan dari hasil nilai yang didapatkan dengan tipe teks Dynamic Text dan variable “keterangan”. 5. Selanjutnya tambahkan button replay dengan menggunakan Rectangle Tool
(R), Fiil Color dan Stroke Color serta tambahkan teks dengan tulisan “Replay”. Kemudian tambahkan instance name dengan keterangan “restart”.
BAB 4