e-portfolio skm

7. Dengan mengunakan Elipse Tools, lukis beberapa bentuk bulat ke atas Artboard untuk
membentuk bom.

Rajah: Elipse Tools
 Beberapa bentuk bulat diubahsuai sehingga membentuk sebuah bom menggunakan

Shape Builder Tools.

8. Dengan menggunakan Dengan mengunakan Elipse Tools, lukis bentuk bulat di tengah
artboard. Pilih bentuk bulat tersebut dengan selection tool, kemudian pada menu bar
pilih effect>Distort & Transform>Zig Zag. Paparan seperti dibawah akan muncul.

Rajah: Lokasi Zig Zag tool.

Rajah: kotak tetapan Zig Zag tool.
Setting pada pop-up zig zag tool.

i. Size: 7 px
ii. Ridge per segments: 7
iii. Points: smooth
iv. Tick pada preview.
v. Klik OK
9. Menggunakan selection tool, right-click pada objek. Pilih Arrange> Send to Back.

Rajah: Cara penukaran susunan Layer objek
 Objek akan berada di belakang logo seperti berikut:

Rajah : Lokasi objek di belakang logo.
10. Dengan menggunakan Type Tool, tulis nama kumpulan iaitu Olyssa menggunakan font

jenis Raph Lanok Future bersaiz 110 pt dengan warna putih.

Rajah: Tetapan dan lokasi teks Olyssa.
11. Hasil akhir logo kumpulan Olyssa dengan latar belakang.

Rajah: Hasil akhir logo Olyssa
Halaman Log Masuk
Halaman log masuk Thinkercode direka bentuk menggunakan perisian Adobe Illustrator CC

1. Buka perisian Adobe Ilustrator CC
2. Mulakan Artboard baru dengan menekan ctrl+N pada keyboard
3. Paparan New Document akan terpapar.

Rajah: New Document.
Set saiz artboard pada sebeah kiri paparan.

i. Set tetapan saiz pada pixels
ii. Width: 1920px
iii. Height: 1080px
iv. Orientation: landscape
v. Artsboards: 1
vi. Tekan butang Create.
4. Paparan Artboard akan terpapar.

Rajah: Artboard

5. Tekan Ctrl+R pada keyboard untuk memaparkan tools ruler dan letakkan guide pada
center Artboard sebagai rujukan.

Rajah: Ruler dan Guidelines
6. Pilih latar belakang yang sesuai daripada google image dan masukkan ke Artboard. Latar

belakang Blue Geomatric Texture.png digunakan.

Rajah: Latar Belakang.

7. Latar belakang halaman ini ditambah beberapa elemen robotik berbentuk gambar dengan
format .png mengikut tema gamifikasi.

Rajah: Elemen robotik.png.
8. Dengan menggunakan Rounded Rectangle tool, lukis satu objek pada artboard mengikut

saiz yang sesuai bagi mewakili ruangan mengisi id untuk log masuk. Ubah Opacity
objek kepada 50%

Rajah: Ruangan ID Log masuk.

9. Right-click kepada objek dan dan pilih transform>reflect.

Rajah: Reflect Pop-up window.
10. Set axis pada horizontal, angle 0, check pada preview dan click copy. Seterusnya, ubah

opacity objek kepada 80%. Berikut merupakan hasil selepas reflect.

Rajah: Objek reflect
11. Objek dengan opacity 50% digunakan sebagai ruangan untuk ID pengguna manakala

Objek dengan opacity 80% digunakan sebagai butang log masuk.
12. Hasil akhir halaman log masuk.

Rajah: Hasil akhir halaman log masuk.

LAPORAN AKHIR INDIVIDU

STUDIO MULTIMEDIA II

NUR ATHIRAH BINTI MAT NANG
CB160066

MEDIA SPECIALIST

PEMBANGUNAN GAMIFIKASI THINKERCODE DALAM SUBJEK
SAINS KOMPUTER BAGI PELAJAR TINGKATAN 4
OLYSSA PRODUCTION

CARTA GANTT BAGI PEMBANGUNAN PRODUK THINKERCODE

TAHUN 2019

NO BULAN SEPT OKTOBER NOVEMBER DISEMBER

MINGGU 123412341234123 4

1 Menyediakan media bagi bahagian Tutorial topik

Pembolehubah

2 Membangunkan video bagi bahagian Tutorial topik

Pembolehubah.

3 Menyediakan media bagi bahagian Tutorial topik Pemalar

4 Pembangunan video bagi bahagian Tutorial topik Pemalar

5 Menyediakan media bagi bahagian Tutorial Jenis Data

6 Pembangunan video bagi bahagian Tutorial Jenis Data

7 Menyediakan audio bagi Pembangunan permainan bagi
topik Pembolehubah

8 Pembangunan animasi bagi Pembangunan permainan bagi
topik Pembolehubah

9 Menyediakan audio Pembangunan permainan bagi topik
Pemalar

10 Pembangunan animasi Pembangunan permainan bagi topik
Pemalar

11 Menyediakan audio Pembangunan permainan bagi topik
Jenis Data.

12 Pembangunan animasi Pembangunan permainan bagi topik

Jenis Data.
13 Kualiti Kawalan (Pengujian bersama client)
14 Penambahbaikan kepada produk
15 Kualiti Kawalan (Dalaman)
16 Pembentangan akhir
17 Penyediaan laporan akhir
18 Penghantaran produk kepada client

LAPORAN TESTING ANALYSIS (BAHAGIAN 1)
NUR ATHIRAH BINTI MAT NANG
CB160066
(MEDIA SPECIALIST)

1. Penyediaan papan cerita bagi video tutorial

 Pembangunan video tutorial dalam gamifikasi ini memerlukan papan cerita yang
menggambarkan urutan isi kandungan bagi skrin multimedia. Papan cerita ini juga
merangkumi susunan grafik dalam bentuk ilustrasi atau imej yang dipersembahkan
bagi tujuan pra-tayangan gambar bergerak, animasi, grafik bergerak atau media
interaktif. Berikut merupakan langkah-langkah penghasilan papan cerita;

a. Menyusun isi kandungan dan elemen media yang diperlukan dalam video
tutorial. Isi kandungan telah disediakan berpandukan buku teks Sains Komputer
Tingkatan 4 dalam subtopik 1.3 Pemboleh Ubah, Pemalar dan Jenis Data.
Suntingan ayat juga dilaksanakan bagi memastikan setiap kandungan isi
pembelajaran adalah tepat dan sesuai.

b. Menyemak kesuaian kandungan dengan konteks yang ingin disampaikan
bersama Quality Control.

c. Mengkaji semula carta alir dan papan cerita yang dihasilkan.

Bil. Papan Cerita
1

Papan cerita video tutorial bagi topik Pemalar.
2

Papan cerita video tutorial bagi topik Pemboleh Ubah.
3

Papan cerita video tutorial bagi topik Jenis Data

Bil. Papan Cerita (Selepas Fasa Kualiti Kawalan)
Papan cerita video tutorial Jenis Data.
Papan cerita video tutorial Pemalar

Papan cerita video tutorial Pemboleh Ubah

2. Penyediaan bahan grafik bagi pembangunan video tutorial

 Penyediaan bahan grafik telah dilakukan mengikut tema yang telah ditetapkan.
Antara bahan grafik yang diambil kira adalah seperti grafik bagi latar belakang dan
sebagainya. Tambahan lagi video tutorial yang dihasilkan mengekalkan konsep
Minimalist dan juga sesuai dengan umur pengguna. Penyuntingan bahan
dilaksanakan dengan menggunakan perisian yang berikut;

GRAFIK

i. Adobe Illustrator CC
Mereka bentuk icon gamifikasi dengan menggunakan Adobe Illustrator dan
menetapkan saiz, warna grafik yang sesuai. Pembangun menyelidik, menganalisis
dan berpendapat saiz yang sesuai ialah 1920px X 1080 px.

Paparan Huraian
Merekabentuk bahan grafik yang
akan digunakan di dalam video
tutorial. Tema yang digunakan
adalah puzzle.

Menggunakan line dan shape dalam
menghasilkan kotak bagi topik
Pemalar. Pemilihan warna adalah
oren, ungu dan biru.

Menyediakan latar belakang bagi
infografik bagi Peraturan
menamakan pembolehubah. Grafik
yang disediakan akan melalui
suntingan animasi yang berbeza.

ii. Adobe Photoshop CC Huraian

Paparan Mereka bentuk icon gamifikasi
dengan menggunakan ikon yang
berkonsepkan Komputer. Warna
latar belakang yang dipilih adalah
kod (#FFFFFF).

Mereka bentuk latar belakang bagi
paparan pengaturcaraan. Terdapat
3 bahagian;

1. Nota
2. Paparan kod pengaturcaraan
3. Paparan Output

FON

Fon digunakan dalam pembangunan video pengajaran bertujuan untuk menyampaikan
informasi kepada pengguna dengan bantuan grafik yang telah disediakan.

Paparan Fon Jenis Fon

Font : Doubledecker DEMO
Size : 141 px

Font : Tw Cen MT Condensed Extra Bold
Size : 129 px

Font : Tw Cen MT Condensed Extra Bold
Size : 64 px

Font : Tw Cen MT Condensed Extra Bold
Size : 86 px

Font : DK Brush Crush
Size : 84 px
Font : Verdana
Size : 35 px

Font : Courier New
Size : 35 px

3. Membangunkan video tutorial bagi topik Pembolehubah, Pemalar dan Jenis Data
Peringkat 1: Pembangunan video tutorial

Video tutorial topik Pemalar
dibangunkan di
https://www.powtoon.com

Video tutorial topik Jenis Data
dibangunkan di
https://www.powtoon.com

Video tutorial topik
Pembolehubah dibangunkan di
https://www.powtoon.com

Peringkat 2: Pembangunan Video Tutorial (Selepas Quality Control)
 Setelah melalui fasa Quality Control pada minggu 3, pembangunan video Tutorial

didapati perlu penambahbaikan dari segi audio narrator, isi kandungan dan animasi
2D. Oleh itu pembangun telah mengambil keputusan untuk menambah baik
rekabentuk video dengan menggunakan perisian Adobe After Effect CC dengan saiz
paparan 1920 px X 1080 px.
 Video dibangun berdasarkan tiga subtopik utama yang menjadi masalah utama
pelajar semasa sesi pengajaran dan pembelajaran.

Paparan Huraian
Merekabentuk video bagi topik
Jenis Data yang disediakan
menggunakan perisian Adobe After
Effect CC 2018.

Mereka bentuk video bagi topik
Jenis Data Bukan Primitif yang
disediakan menggunakan perisian
Adobe After Effect CC 2018.

Mereka bentuk video bagi topik
Jenis Data Primitif yang disediakan
menggunakan perisian Adobe After
Effect CC 2018.

Mereka bentuk video bagi topik
Pemalar yang disediakan
menggunakan perisian Adobe After
Effect CC 2018.

Mereka bentuk video bagi topik
Pemboleh Ubah yang disediakan
menggunakan perisian Adobe After
Effect CC 2018.

Proses suntingan video penuh
dilaksanakan di perisian Filmora.

4. Penyediaan Audio bagi kegunaan Gamifikasi.

 Audio merupakan salah satu media yang sering digunakan dalam sesuatu interaksi
antara komputer dengan pengguna. Audio yang digunakan bertujuan untuk
menyampaikan maklumat dengan lebih berkesan, membantu meningkatkan daya
tarikan terhadap sesuatu persembahan dan menarik perhatian terhadap apa yang ingin
disampaikan.

 Audio yang dimuat turun dalam internet adalah free-loyalty dan bebas dimuat turun.
 Terdapat beberapa audio yang diletakkan dalam fungsi butang gamifikasi

a. Exit
b. Home
c. Start
d. Question and Answer (Q&A)

 Berikut merupakan laman sesawang yang digunakan bagi pembangun memuat turun
audio bagi gamifikasi.
Laman Sesawang

http://dustyroom.com/free-casual-game-sounds/

https://www.bensound.com/royalty-free-music/track/summer-chill-relaxed-tropical

Video bagi Tutorial PemalarMemuat turun audio di https://freesound.org/home/

5. Penyediaan Audio Narrator bagi video tutorial untuk semua topik.

 Audio Narrator disediakan bagi tujuan membantu menyampaikan maklumat isi
kandungan video tutorial dengan lebih berkesan.

 Berikut merupakan perincian proses Audio Narrator yang dilaksanakan oleh
pembangun
a. Perkakasan : Komputer Riba HP 1000 & Mikrofon
b. Perisian : Audacity
c. Narattor : Nurul Fazliyana bt Abdul Rahim

 Proses suntingan audio adalah menggunakan Perisian Audacity dan laman web
https://audio.online-convert.com/convert-to-wav bagi tujuan penukaran format audio.

Paparan di Perisian Audacity Huraian

Suntingan audio dilaksanakan

dengan menetapkan effects

pada audio yang dirakam.

Effects Equilization

digunakan dan menetapkan

Bass Boost pada audio curve.

Effects Normalize digunakan
dan menetapkan peak
amplitude pada tahap yang
sesuai dan mengelakkan
kesan noise pada audio.

6. Penambahbaikan selepas Kawalan Kualiti (Quality Control)

 Pengujian video tutorial yang dihasilkan pada minggu ke-3 telah dilaksanakan.
Namun begitu terdapat beberapa perkara yang perlu ditambah baik bagi video yang
dihasilkan berdasarkan kepada kawalan kualiti. Sebagai langkah penyelesaian,
pembangun telah mengambil inisiatif bagi melaksanakan penambahbaikan video
tutorial dengan menggunakan perisian Afer Effect agar video dihasilkan ini dapat
berfungsi dengan baik

Kawalan kualiti bagi video tutorial topik Jenis Kawalan kualiti bagi video tutorial topik
Data. Pemboleh Ubah

Kawalan kualiti bagi Video tutorial topik Pemalar

LAPORAN TESTING (BAHAGIAN 2)

NAMA : Nur Athirah Binti Mat Nang

JAWATAN : Media Specialist

TESTING DEVELOPMENT RESULT REMARK
 Penyediaan papan cerita bagi video Tutorial.

 Namun begitu, pada fasa kawalan kualiti beberapa penambahbaikan yang

memerlukan pembangun menyediakan papan cerita yang baharu.

Penyediaan papan cerita
1.

GAGAL

Minggu Pertama : Papan cerita bagi topik Pemalar.

Minggu Kedua : Papan cerita bagi topik Pemboleh Ubah.

SELESAI

7. Grafik direkabentuk menggunakan perisian Adobe Photoshop dan Adobe Illustrator.
8. Format gambar yang disediakan adalah .jpg dan .png.

Penyediaan bahan grafik bagi BERJAYA
pembangunan Video Tutorial.
2.

Latar Belakang bagi jenis Data Primitif.

Mengekalkan format gambar kepada .png magi memudahkan proses suntingan di Perisian
Adobe After Effects.

 Pada peringkat pertama, Pembangun membangunkan video tutorial menggunakan

Membangunkan video tutorial aplikasi atas talian iaitu Filmora.

bagi topik Pembolehubah,  Proses penambahbaikan perisian Adobe After Effects digunakan.
3.  Grafik direkabentuk menggunakan perisian Adobe After Effects.

Pemalar dan Jenis Data

 Format video yang disediakan adalah .mp4.

Video Pengajaran Pemalar didapati mempunyai durasi yang terlalu pendek.
Minggu 2 : Nota yang disediakan terlalu ringkas bagi Video Pengajaran Jenis Data

Minggu 3 : Tidak disediakan pengaturcaraan bagi rujukan pengguna dalam Video Pengajaran
Pemboleh Ubah

Minggu 4 : Penambahbaikan Video Pengajaran Jenis Data

Minggu 5 : Penambahbaikan Video Pemalar
Minggu 6 : Penambahbaikan Video Pengajaran Pemboleh Ubah

Mendapatkan koleksi audio secara free-loyalty melalui http://dustyroom.com/free-casual-

Penyediaan Audio bagi game-sounds/. BERJAYA

4. kegunaan Gamifikasi. &

SELESAI

Memuat turun dan menyunting durasi audio agar selaras dengan gamifikasi.

 Terdapat masalah ketika melaksaanakan antara adalah audio yang disediakan tidak

Penyediaan Audio Narrator bagi memenuhi syarat dan juga memerlukan penukaran

Video Pengajaran untuk semua format audio .ogg kepada .mp3. BERJAYA
&
5. topik
SELESAI

Audio Narrator disunting di perisian Audacity
 Audio disunting di perisian yang terpilih iaitu Audacity dan sebagainya.

Penambah baikan selepas

6. Kawalan Kualiti (Quality BERJAYA
Control).

Minggu 4-6 Proses Penambahbaikan Video Pengajaran selepas kawalan kualiti dilaksanakan.

MANUAL TEKNIKAL
VIDEO TUTORIAL ADOBE AFTER EFFECTS CC 2019
Buka Adobe After Effects. Tekan New Composition untuk membuka satu workspace baru. Bagi
nama pada Composition : Pembolehubah.

Mereka bentuk new composition
1. Pilih Composition> New Composition dari menus yang terletak bahagian atas antaramuka

Adobe After Effects. Buka panel composition Settings dan edit resolution dengan tetapan
width:1920 dan height:1080.

2. Tetapkan durasi kepada 0;01;59;28 (1:59 minit).
3. Klik pada background color swatch bagi membuka panel Background Color. Tekan pada R

(Red) masukkan nilai 141.

Memasukkan Files
1. Pilih File>Import>File untuk transfer file ke dalam Adobe After Effect.

2. Files yang di import boleh dilihat pada panel Project.
3. Tekan Done untuk padamkan dialog box.

Creating Animation
i. Meletakkan Effects pada layer
1. Klik pada tab Pembolehubah pada timeline panel, Effect akan diletakkan pada layer

paper.png. Effect yang dipilih akan memberi kesa pada paper.png bukan pada imej latar
belakang.

2. Tekan Effect panel dan pilih effect yang sesuai untuk diletakkan pada paper.png.

ii. Apply Animation Preset
1. Tekan Window>Animation Composer untuk buka panel animation editing.

2. Drag layer kedalam ruangan yang disediakan, pilih transition bagi animasi

3. Pada ruangan editor, edit bagi animation Out dan Animation In.
TR in = Animasi Mula | TR Out= Animasi berakhir.

4. Laksanakan langkah yang sama bagi ke semua aset yang ada.

Creating Text
1. Tambah font ke dalam animasi. Pilih warna dan Saiz Teks. Gunakan ruangan panel animasi

bagi pengubahsuaian teks.

2. Pilih Window>Workspace>Text untuk paparkan panel text.

3. Pada Character Panel, pilih jenis font Myriad Pro.

4. Tetapkan Bold pada Font Style Menu dan Font Size kepada 90 pixels.

5. Pilih Animation>Keyframe Assistant>Time-Reverse Keyframes. Tetapkan masa bagi
animasi pada teks kepada 0:30 fps.

Rendering the composition
1. Pilih lokasi untuk file disimpan. Pilih Composition> Add To Render Queue. Panel bagi
Render Queue akan dibuka secara automatik.
2. Pilih Maximise Frame dari Render Queue panel di tetingkap aplikasi.

3. Pilih Output Module options. After Effect telah menetapkan Loseless Compression yang
membolehkan pengguna render fail video.

4. Dalam Render Queue panel, tekan pada butang Render. Apabila movie siap di Render.
Pilih Restore Frame Size daripada Render Queue panel untuk simpan dalam file di
komputer.

LAPORAN AKHIR INDIVIDU

STUDIO MULTIMEDIA II

NUR SYAFIQAH BINTI JAILANI
CB160072

CONTENT & QUALITY CONTROL

PEMBANGUNAN GAMIFIKASI THINKERCODE DALAM SUBJEK
SAINS KOMPUTER BAGI PELAJAR TINGKATAN 4
OLYSSA PRODUCTION

CARTA GANTT BAGI TECHNICAL PROJECT MANAGER (QUALITY CONTROL)

TAHUN 2019

NO BULAN SEPT OKTOBER NOVEMBER DISEMBER
MINGGU 123 4
123412341234
1 Menyediakan isi kandungan bagi tutorial topik Pembolehubah

2 Kualiti kawalan bagi tutorial topik Pembolehubah

3 Menyediakan isi kandungan bagi tutorial topik Pemalar
4 Kualiti kawalan bagi tutorial topik Pemalar

5 Menyediakan isi kandungan bagi tutorial topik Jenis Data

6 Kualiti kawalan bagi tutorial topik Jenis Data

7 Menyediakan isi kandungan permainan topik Pembolehubah

8 Kualiti kawalan bagi reka bentuk permainan topik Pembolehubah

9 Menyediakan isi kandungan permainan topik Pemalar
10 Kualiti kawalan untuk reka bentuk permainan topik Pemalar

11 Menyediakan isi kandungan permainan topik Jenis Data

12 Kualiti kawalan untuk reka bentuk permainan Jenis Data

13 Kualiti kawalan (Pengujian bersama klien)

14 Penambahbaikan terhadap produk

15 Kualiti kawalan (dalaman)
16 Pembentangan akhir

17 Penyediaan laporan akhir

18 Penghantaran produk kepada klien

LAPORAN TESTING ANALYSIS (BAHAGIAN 1)
NUR SYAFIQAH BINTI JAILANI
CB160072

CONTENT & QUALITY CONTROL
1. Mendapatkan bahan rujukan bagi pembangunan isi kandungan

 Pembangunan gamifikasi ini adalah berpandukan buku teks Sains Komputer Tingkatan 4 dan
setiap isi kandungan yang digunakan dalam gamifikasi perlulah selaras dengan isi kandungan
yang terdapat dalam buku teks tersebut seperti yang diinginkan oleh pihak klien.

Rajah 1: Buku teks Sains Komputer Tingkatan 4 yang dikeluarkan oleh pihak Kementerian
Pendidikan Malaysia

2. Mengumpul isi kandungan bagi bahagian tutorial topik Pembolehubah, Pemalar dan Jenis Data
 Isi kandungan dipilih berdasarkan tiga subtopik utama yang menjadi masalah utama pelajar
semasa sesi pengajaran dan pembelajaran.
 Nota yang disediakan pada buku teks mempunyai maklumat yang ringkas dimana pelajar
tidak memperolehi pemahaman sepenuhnya mengenai subtopik tersebut.

Rajah 2: Topik Jenis Data Rajah 3: Topik Pemalar

Rajah 4: Topik Pembolehubah
 Setiap subtopik perlu mempunyai nota yang ringkas, padat serta mudah difahami oleh pelajar.

Justeru itu, setiap nota tersebut akan ditambahbaik kepada nota secara digital dimana setiap
subtopik akan disediakan video tutorial yang akan dibangunkan oleh Media Specialist.

3. Penyediaan dokumen bagi fasa kualiti kawalan
 Setelah fasa tersebut selesai, isi kandungan serta video tutorial yang telah selesai akan melalui
fasa kualiti kawalan dimana setiap video tutorial bagi ketiga-tiga subtopik akan disemak isi
kandungan serta susunan grafik, audio serta animasi supaya dapat mengikut seperti kehendak
klien.

Rajah 5: Borang senarai semak
 Borang senarai semak ini akan disemak oleh pakar pada bahagian isi kandungan dan akan

disahkan oleh Product Manager. Video tutorial yang telah siap akan dipaparkan kepada
jawatankuasa pembangunan produk bagi mendapatkan maklumbalas. Borang tersebut akan
diisi dan akan disemak secara berasingan bagi setiap subtopik.
4. Penyediaan soalan-soalan pada bahagian permainan (gamifikasi)
 Terdapat tujuh point pada setiap subtopik permainan dimana pada setiap subtopik, pengguna
perlu menjawab tujuh soalan yang berbentuk isi tempat kosong dan soalan pilihan jawapan.
Pengguna perlu menjawab soalan pertama untuk melepasi ke soalan-soalan seterusnya.

Rajah 6: Antaramuka peta gamifikasi bagi setiap topik
 Soalan-soalan yang disediakan adalah berdasarkan soalan peperiksaan akhir tahun dan

percubaan SPM bagi subjek Sains Komputer.

Rajah 7: Lawan web yang digunakan untuk memuat turun soalan-soalan subjek Sains Komputer

Rajah 8: Soalan topik Jenis Data
Rajah 9: Soalan topik Pemalar

Rajah 10: Soalan topik Pembolehubah
5. Membuat semakan kualiti kawalan pada bahagian reka bentuk gamifikasi

 Rekabentuk gamifikasi yang telah direka oleh Graphic Designer perlu disemak dari segi teks,
fon yang dipilih, pemilihan grafik serta penggunaan warna yang diletakkan pada permainan
yang dibangunkan agar dapat memenuhi elemen-elemen multimedia serta kehendak klien.

Rajah 11: Borang semakan kualiti yang telah disemak