• Tidak ada hasil yang ditemukan

Perancangan Layar

Dalam dokumen BAB 3 ANALISIS DAN PERANCANGAN (Halaman 35-49)

3.4.1 Perancangan Layar Perangkat Ajar

Tabel 3.8 Storyboard Halaman Loading Multimedia Storyboard

Project: algoritfun Date: 15 Oktober 2012

Screen: 1 of 9 Screen ID: CAI01

Screen Description:Pertama masuk kedalam aplikasi akan ada animasi pembuka beberapa detik.

Link From Screen ID:- Link to Screen ID: CAI02; CAI03;CAI04; CAI05; CAI08.

Color Scheme: #ffffff Text Attributes: - Still Images: - Audio:-

Video:-

Animation: loading bar terisi penuh saat selesai loading

Tabel 3.9 Storyboard Halaman Home-Intro Multimedia Storyboard

Project: algoritfun Date: 15 Oktober 2012

Screen Description:Halaman ini muncul setelah animasi pembuka dan cara pemakaian. Tombol yang ada pada kanan bawah adalah tombol untuk masuk ke halaman utama.

Link From Screen ID:CAI01; Link to Screen ID: CAI03; CAI04; CAI05;CAI08.

Color Scheme: #ffffff, #6c7282, #ccff66 Text Attributes: Hobo std

Still Images:background chalkboard, gambar tombol Audio: click.mp3, bgm.wav

Video:-

Animation: animasi teks, animasi tombol

Tabel 3.10 Storyboard Halaman Materi Multimedia Storyboard

Project: algoritfun Date: 15 Oktober 2012

Screen Description:Didalam halaman ini terdapat materi. Untuk mengakses materi berdasarkan bab, dapat dilakukan dengan memilih salah satu dari 8 angka yang ada pada kanan atas. Untuk memilih materi sesuai subbab dapat dilakukan dengan memilih tombol sebelah kiri.

Link From Screen ID: Opening screen; Link to Screen ID: CAI01; CAI04; CAI05; CAI08.

Color Scheme: #6c7282, #000000, #663399, #ff6633, #00cc66 Text Attributes: hobo std, arial, helvetica, courier new

Still Images: gambar tombol, back ground chalkboard, gambar dari file xml Audio: click.wav, click1.wav, bgm.wav

Animation: animasi tombol, animasi judul materi, animasi loading file xml

Tabel 3.11 Storyboard Halaman Animasi Multimedia Storyboard

Project: algoritfun Date: 15 Oktober 2012

Screen: 4 of 9 Screen ID:CAI04

Screen Description:Halaman ini merupakan halaman Animasi untuk materi sorting. Terdapat 3 jenis sorting yang disajikan. Pengguna dapat memilih tombol dibagian kiri.

Link From Screen ID: CAI01; CAI02; CAI03; CAI05; CAI06; CAI07; CAI08.

Color Scheme: #eeeeee, #ffffff Text Attributes: hobo std

Still Images: back ground chalkboard Audio:

Video: -

Animation: animasi bubble sort, animasi insertion sort, animasi selection sort

Tabel 3.12 Storyboard Halaman Menu Minigames Multimedia Storyboard

Project: algoritfun Date: 15 Oktober 2012

Screen Description:Didalam halaman ini terdapat 3 level mini games. Level yang paling kiri merupakan level yang paling mudah, dan level paling kanan merupakan level tersulit.

Link From Screen ID: CAI01; CAI02; CAI03; CAI04; CAI06; CAI07; CAI08.

Link to Screen ID: CAI01; CAI04; CAI06; CAI08.

Color Scheme: #6c7282 Text Attributes: hobo std

Still Images: gambar yang mewakili tombol, background chalkboard, gambar panah flowchart

Audio: click.wav, bgm2.wav Video:-

Animation: animasi tombol

Tabel 3.13 Storyboard Halaman Minigames Multimedia Storyboard

Project: algoritfun Date: 15 Oktober 2012

Screen Description:Didalam halaman ini terdapat 2 bagian. Di bagian kiri adalah bagian yang harus diselesaikan oleh pengguna. Dan yang sebelah kanan merupakan jawaban yang mesti disusun ke bagian kiri. Pada bagian ini juga terdapat time atau penghitung berapa lama waktu yang dibutuhkan oleh pengguna untuk menyelesaikan games tersebut.

Link From Screen ID: CAI05 Link to Screen ID: CAI01; CAI04; CAI08.

Color Scheme: #6c7282 Text Attributes: hobo std

Still Images: gambar yang mewakili tombol, background chalkboard, gambar panah flowchart

Audio: click.wav, button-10.wav, button-3.wav, bgm2.wav Video:

Animation: animasi tombol

Tabel 3.14 Storyboard Halaman Score Multimedia Storyboard

Project: algoritfun Date: 15 Oktober 2012

Screen: 7 of 9 Screen ID:CAI07

Screen Description:Didalam halaman ini terdapat 2 bagian. Di bagian kiri adalah jumlah skor yang didapat setelah memainkan mini games. Kotak yang ada diatas tombol submit adalah textpad untuk mengisi nickname. Setelah disubmit maka highscore akan

ditampilkan dibagian kanan.

Link From Screen ID: CAI06; Link to Screen ID: CAI01; CAI04; CAI08. Color Scheme: #6c7282

Text Attributes: hobo std

Still Images: gambar yang mewakili tombol, background chalkboard, gambar panah flowchart

Audio: click.wav, button-10.wav, button-3.wav, bgm2.wav Video:

Animation: animasi tombol

Tabel 3.15 Storyboard Halaman About Us Multimedia Storyboard

Project: algoritfun: Date: 15 Oktober 2012

Screen Description:Didalam halaman ini berisi video tentang profil-profil pembuat website ini.

Link From Screen ID:CAI01; CAI02; CAI03; CAI04; CAI05; CAI06; CAI07;

Link to Screen ID:CAI01; CAI04; CAI05.

Color Scheme:# eeeeee Text Attributes:

Still Images: Audio:

Video:credit.flv Animation:

Table 3.16 Storyboard halaman login admin Multimedia Storyboard

Project: algoritfun: Date: 15 Oktober 2012

Screen: 9 of 11 Screen ID:HTML CAI09

Screen Description: Pada halaman ini terdapat terdapat kotak isian yang berfungsi untuk memasukkan password. Setelah mamasukkan password pada kotak isian, tekan enter untuk masuk kehalaman berikutnya.

Link From Screen ID: Link to Screen ID: CAI10 Color Scheme:# ffffff

Text Attributes: Still Images:

Audio: Video: Animation:

Tabel 3.17 Storyboard halaman pemilihan bab admin Multimedia Storyboard

Project: algoritfun: Date: 15 Oktober 2012

Screen: 10 of 11 Screen ID:HTML CAI10

Screen Description: Pada halaman ini terdapat pilihan bab yang mau ditambahkan. Pilih salah satu bab untuk menambah materi pada bab tersebut.

Link From Screen ID:CAI09 Link to Screen ID:CAI11 Color Scheme:# ffffff Text Attributes: Still Images: Audio: Video: Animation:

Tabel 3.18 Storyboard halaman penambahan materi Multimedia Storyboard

Project: algoritfun: Date: 15 Oktober 2012

Screen Description:Didalam halaman ini terdapat dua kotak isian, kotak pertama adalah untuk judul subbab. Kedua adalah untuk isi materi yang mau ditambahkan. Terdapat satu tombol submit yang berfungsi untuk menambahkan isi dari kedua kotak diatas kedalam materi.

Link From Screen ID:CAI10 Link to Screen ID: Color Scheme:# ffffff Text Attributes: Still Images: Audio: Video: Animation:

Dalam dokumen BAB 3 ANALISIS DAN PERANCANGAN (Halaman 35-49)

Dokumen terkait