Faculty of Information and Communication Technology

KPT 4033 :TEKNOLOGI & INOVASI DALAM PENDIDIKAN

KULIAH 10 dan 11 : MEDIA DIGITAL & ELEMEN

MULTIMEDIA

Apakah maksud Media Digital ?

• Media digital sering dirujuk sebagai media elektronik yang berfungsi menggunakan kod digital.– Media elektronik merupakan media yang

menggunakan sepenuhnya tenaga elektrik atau elektromagnetik untuk membenarkan pengguna mencapai sesuai kandungan.

– Kod digital pula dirujuk sebagai nilai “0” dan “1” yang mewakili data dalam sistem nombor binary.

• Media digital merupakan media yang digunakan untuk menyimpan data atau maklumat dalam bentuk digital.

Sumber Media Digital

• Antara contoh sumber media elektronik yang dikenali umum adalah:– Perakam audio– Perakam video– CD-ROMS– Multimedia presentations– Slide presentations– Online content

• Walaubagaimanapun, sumber media eletronik ini boleh terdiri daripada bentuk analog dan digital.

Contoh Digital Media

Contoh digital media yang disenaraikan ini merujuk kepada istilah media secara teknikal.

• Media Penyimpanan (Storage Media)– Compact Disc (CD) – Mini disc – Video Digital– Buku elektronik (e-book) – Media interactive (Multimedia Courseware)

• Media Komunikasi (Communication Media)– Sidang Video (Video Conferencing)– Televisyen Digital – Internet – World Wide Web – Cell phones

Media Digital dan Multimedia

• Digital media sering dikaitkan dengan Elemen Media atau Multimedia.

• Dalam kursus ini kita akan sentuh tentang Definisi Multimedia dan Elemen Multimedia.

Definisi Multimedia?

• Persembahan aplikasi komputer yang interaktif menggabungkan elemen teks, audio, video, grafik dan animasi.

Multimedia Definition

• “Multimedia is the use of the computer to present and combine text, graphics, audio and video with links and tools that let the user navigate, interact, create and communicate”

-Multimedia literacy-

Multimedia Definition

• “… any combination of two or more media, represented in a digital form, sufficiently well integrated to be presented via single interface, or manipulated by a single computer program.”

-Chapman & Chapman-

Multimedia Definition

• “… any combination of text, art, sound, animation, and video delivered to you by computer or other electronic or digitally manipulated means.”

-Vaughan-

Multimedia Definition

• From the user perspective :– “Multimedia enables computer information to

be represented through audio, video, text, images, graphics and animation.”

– “Multimedia is defined as an interactive computer-mediated presentation that included at least two of the following elements; text, sound, still graphics images, motion graphics and animation.”

Most definitions agree that there are a number of key aspects of multimedia”– Multimedia involves “Many Media”

• Media Domain– Multimedia involves “Computer”

• The System Domain– Multimedia enhances the “presentation &

communication of information”• The Application Domain

Multimedia Definition

Soalan & Perbincangan

• Pada pendapat anda, apakah perbezaan digital media dengan multimedia?

• Bincangkan dalam kumpulan (3 orang)

Elemen Multimedia

Teks

• Merupakan satu gabungan aksara yang boleh terdiri daripada huruf (a-z), nombor (0-9) dan simbol (“ ! . -)

• Gabungan aksara ini akan membentuk satu perkataan yang membawa makna kepada pembacanya.

• Teks merupakan medium yang banyak digunakan dalam persembahan maklumat bagi menyampaikan konsep dan idea.

• 4 faktor yang mempengaruhi keberkesanan penggunaan teks iaitu:– Typeface– Fonts – Styles – Size

Teks

Kategori Kegunaan Rupa bentuk

Serif(Times New Roman)

Buku, majalah dan surat khabar

Terdapat lekuk pada hujung setiap huruf.

Sans Serif(Arial)

Paparan dalam media elektronik seperti komputer dan television.

Tiada lekuk pada hujung setiap huruf.

Elemen Teks – Muka Taip (Typeface)

• Typeface mempuyai 2 kategori umum iaitu:

Elemen Teks - Fonts

• A font is a collection of character of single size belonging to particular typeface family.

• Contoh font:– Times New Roman - Arial– Comic Sans Ms - Verdana– Monotype Corsiva -

Antique Olive Compact• Font merujuk kepada koleksi huruf daripada

satu reka bentuk yang serupa.

Elemen Teks – Style & Size

• Style merujuk kepada gaya paparan sesuatu font seperti – Bold, Italic dan Underline

• Size merujuk kepada jarak daripada permukaan atas dan bawah

BDySize

Penghasilan Teks

Teks boleh dihasilkan melalui 2 kaedah:• Mengimbas teks yang telah dicetak

menggunakan pengimbas (scanner)

• Menaip menggunakan perisian pemprosesan perkataan seperti Ms Word, Notapad, Wordpad dan Writer.

Rekabentuk teks yang dicadangkan untuk membantu pengguna :

Pemilihan jenis tulisan.

• Gunakan jenis paparan yang sesuai

dalam dokumen yang sama, dan

bezakan pemberatan kandungan

menggunakan ‘italic’ dan stail ‘bold’

yang sesuai.

Coronet

Bremen bd BT

Algerian

Copperplate Gothic

Light

Times New Roman

• Dalam blok teks, pemerengganan perlu diubah supaya

sesuai dengan barisnya.

• Biasanya perbezaan saiz akan digunakan untuk

menunjukkan kepentingan mesej yang hendak

disampaikan.

• Dalam tajuk bersaiz besar, jarak di antara perkataan

perlu diubah mengikut kesesuaian.

Rekabentuk teks yang dicadangkan untuk membantu pengguna :

Soalan & Perbincangan

• Pada pendapat anda, • Apakah perbezaan Muka taip (Typeface)

Serif dan San serif?• Yang manakah paling sesuai digunakan

untuk paparan pada skrin komputer? Mengapa?

• Bincangkan dalam kumpulan (3 orang)

Elemen Grafik

• Grafik merupakan elemen komunikasi yang paling effektif yang terdiri daripada:– Gambar foto, – Lukisan– Imej – Carta dan graf– Simbol – Nombor– Huruf

• Grafik Raster

• Grafik Vector

Elemen Grafik – Jenis grafik

Elemen Grafik– Raster

Elemen Grafik– Raster

• Imej raster terbentuk daripada satu kumpulan piksel.• Imej ini disimpan dalam satu set piksel.• Satu piksel merujuk kepada satu titik pada skrin komputer.• Setiap piksel terdiri 2 atau lebih warna.• Setiap titik pada skrin ditetapkan untuk warna yang dinyatakan

dalam bitmap.

Elemen Grafik – Raster • Kedalaman Warna:

Ditentukan oleh berapa banyak data dalam bit yang digunakan untuk menentukan bilangan warna.– 1 bit = 2 colors. (7)– 4 bit = 16 colors.

• (4 & 6 – 6 gray scale)– 8 bit = 256 colors.

• (2, 3 & 5 – 5 gray scale)– 16 bit = 65,536 colors. – 24 bit = 16,777,216 colors. (1)

Elemen Grafik – Vector

Elemen Grafik – Vektor

• Imej vektor ini disimpan sebagai satu set persamaan matematik.

• Persamaan ini akan mentakrifkan lengkung, garis dan bentuk.

• Dibina berdasarkan unsur-unsur lukisan atau objek.• Imej ini boleh terdiri daripada garis, segi empat tepat,

elips, lengkok, lengkung dan lain-lain.• Semua imej yang dicipta ini akan disimpan sebagai

satu set arahan dalam komputer.

Format Fail Grafik

Imej digital atau grafik boleh diperolehi melalui pelbagai

sumber :

•Grafik yang dibina sendiri

•Mengupah perekabentuk grafik

•Clip-art secara digital

•Fotograf yang diimbas (‘scan’)

•Diambil melalui kamera digital

Sumber Grafik

Soalan & Perbincangan

• Pada pendapat anda, • Apakah perbezaan grafik Raster dan

Vektor?• Yang manakah memerlukan ruang storan

yang besar? Mengapa?• Bincangkan dalam kumpulan (3 orang)

• Kemungkinan dianggap sebagai

elemen yang terpenting dalam aplikasi multimedia.

• Tanpa bunyi, persembahan kurang menjadi, walaupun pelbagai elemen visual dipaparkan di skrin.

Gelombang / Wave (Fail Audio)

BUNYI

Menggunakan Bunyi untuk Aplikasi Multimedia

•Muzik latar belakang

•Kesan bunyi

•Narasi / penceritaan

•Muzik yang menetapkan ‘mood’ atau

‘nyawa’ untuk persembahan.

•Akan mewujudkan keseronokan dan

kegembiraan (anticipation).

•Contohnya konsep ‘edutainment’

biasanya menggunakan muzik tema untuk

kanak-kanak.

Muzik latar belakang

•Digunakan untuk mewakili sesatu peristiwa .

•Contohnya, apabila butang diklik, bunyi

“Ding!” akan kedengaran, menyebabkan

pengguna lebih peka terhadap tindakan itu.

•Contoh lain : ‘Transition’ mungkin berbunyi

seperti ‘sweeping’, digunakan untuk

menunjukkan perubahan skrin yang sedang

berlaku.

•Kesan bunyi sebegini mungkin kecil dari segi

saiz tetapi kesannya amat kuat.

Default Sound

Jungle Error

Kesan Bunyi

•Sokongan pembesar suara digunakan.

•Narasi binaan dalam memperkenalkan produk

yang dihasilkan melalui muzik latar belakang.

•Adalah dicadangkan supaya narasi disimpan

dalam jumlah yang minimum dalam sesatu

persembahan, memandangkan sedikit sebanyak

ia menganggu persembahan. (‘disruptive’).

(NARRATION)

Jenis Fail Biasa untuk Bunyi yang Didigitalkan

Extension Platform Menggunakan :

.aif Mac, SGI Audio

.aifc Mac, SGI Audio (Compressed)

.au Sun, NeXT ULAW audio data

.mov Mac, Win QuickTime video

.mpeg All MPEG Video

.wav Win WAV Audio

.mp3 win

mp2

Kelebihan menggunakan bunyi

•Menarik perhatian.

•Meningkatkan tahap minat pengguna dengan maklumat

yang dimiliki dalam diri.

•Bunyi menambahkan lagi dimensi yang

menyeronokkan pada persembahan yang mendatar

( membosankan).

Mendigitkan Bunyi

•Proses menukarkan bunyi analog ke bunyi digital dilakukan oleh Analogue-to-Digital converter (ADC) yang berada di tepi kad bunyi (‘sound card’) dalam komputer.

•Bunyi analog :

•Diambil oleh kad bunyi

•Dibahagikan kepada beberapa bahagian

•Diterjemahkan kepada banyak kombinasi numerikal yang tepat.

•Apabila PC memainkan semula bunyi digital, ia harus ditukarkan semula ke gelombang analog. Proses ini dilakukan pula oleh Digital-to-Analogue converter (DAC) yang terletak pada lokasi yang sama dengan ADC.

•Tempoh panjang bunyi dikira dalam saat

•Kadar persampelan dikira dalam kHz

•Bit sampel bunyi (8 bit vs 16 bit)

•Rakaman secara Stereo atau mono

Mengira Saiz Fail Audio

Kadar Persampelan

•Semakin tinggi kadar persampelan

bermakna semakin banyak sampel.

•Semakin banyak sampel, semakin banyak

ruang simpanan yang diperlukan.

•Kad bunyi mampu merakam bunyi pada

kadar persampelan yang berbeza.

•Bergantung kepada pilihan pengguna,

bunyi boleh dirakam pada kadar 11 kHz,

22 kHz dan 44.1 kHz, iaitu kualiti CD.

Kadar persampelan 44.1kHz

Persampelan 8-bit atau 16-bit

•Nombor persampelan bit juga turut mempengaruhi

saiz fail.

•Semakin tinggi persampelan bit, semakin besar saiz

fail.

•Biasanya untuk narasi, persampelan 8-bit sudah

mencukupi.

•Jika bunyi yang berkualiti tinggi yang dikehendaki,

maka 16-bit adalah pilihan yang lebih baik. Sample size 16 bit

Pemilihan bunyi mono atau stereo akan mempengaruhi saiz fail.

•Mono bermaksud bunyi akan dimainkan dari satu

rangkaian dan stereo pula dari dua rangkaian.

•Oleh itu, bunyi stereo memerlukan ruang

simpanan yang lebih besar berbanding bunyi

mono.Channel MONO

Mono atau Stereo

Tempoh

•Semakin lama tempoh bunyi,

maka semakin besarlah saiz

failnya.

•Sebagai contoh, hitungkan ruang simpanan yang diperlukan untuk merakam :

bunyi 16-bit, 44.1 kHz, muzik stereo untuk tempoh 30 saat.

Langkah 1

44,100 x 2 byte (atau 16-bits) = 88,200 byte

Langkah 2

88,200 x 2 (untuk stereo) = 176,400 byte

Langkah 3

176,400 x 30 saat = 5,292,000 bytes

Menambahkan Bunyi ke dalam Projek Multimedia

• Jenis bunyi yang diperlukan perlu ditentukan.

•Tentukan lokasi bunyi hendak diletakkan dalam aliran projek.

•Tentukan di mana dan bila audio digital atau data MIDI hendak digunakan.

•Dapatkan bahan sumber sama ada dengan membinanya sendiri atau membelinya.

•Edit dan ubahsuai bunyi untuk dipadankankan dengan projek.

•Uji bunyi untuk memastikan masanya disesuaikan dengan imej projek.

Mendapatkan Fail Audio untuk Aplikasi Multimedia

•Cipta muzik baru

•Rakam gelombang muzik

•Beli klip muzik

•Mengupah ‘production house’ untuk menggubah muzik

SOAL JAWAB

Video• Klip video dalam aplikasi multimedia

menimbulkan keseronokan dan keunikan kepada keseluruhan persembahan.

• Video digital boleh mengandungi animasi, 2D dan 3D atau klip yang diambil.

VIDEO

• Satu siri kerangka yang mengandungi gambar dan bunyi yang dimainkan pada kadar yang pantas.

• Kerangka tunggal ialah satu gambar dengan aksi tertentu.

• Apabila beberapa kerangka dalam gambar yang sama tapi sedikit perbezaan dalam aksinya dikumpulkan bersama dan dimainkan semula dalam satu masa tertentu, gambar tersebut akan memberikan pergerakan yang tersurat.

Piawai Broadcast Video

•Format rakaman yang tidak mudah diubah.•Justeru, adalah penting untuk mengetahui di mana projek multimedia yang dibina hendak digunakan.•Setiap sistem didasarkan kepada piawai yang berlainan yang menerangkan keadaan maklumat dienkodkan untuk menghasilkan signal elektronik yang menjanakan gambar di televisyen.

• NTSC (National Television Standard Committee)– United States of America– 30 fps

• PAL ( Phase Alternation Line)– United Kingdom– Asia– Australia– 25 fps

• SECAM (Sequential Color and Memory)– France– Russia

• HDTV (High Definition Television)

Video Analog dan Digital

• 2 jenis video

– 1. Video Analog • Mempunyai set nilai yang berterusan • Gambar boleh diperbesarkan ke

sebarang saiz tanpa kehilangan kualiti imej.

• Cth : tayangan gambar pada VCR dan cakera laser.

– 2. Video Digital • Mempunyai set nilai diskrit• Gambar diperolehi dari pixel atau

elemen gambar. Gambar akan kehilangan kualiti jika ia diperbesarkan.

• Cth : klip video yang dimainkan dalam komputer.

Analog Signal

Digital Signal

Analog ke Digital

• Untuk mendigitkan video, peranti-peranti berikut diperlukan :

– Sumber analog– CPU yang pantas dan banyak

ruang ingatan– Pemacu cakera keras– Papan tangkap Video

Sumber Analog

• Cth : Perakam kamera video (VCR) dan pemain cakera laser

• Kualiti video digital akan bergantung kepada kualiti sumber analog.

Kualiti Video

• Kualiti video digital bergantung kepada kelajuan pemproses.

• Semakin laju pemproses, semakin baik video digital yang diperolehi.

• Keperluan minimum untuk mempunyai satu sistem sebegini adalah Pentium 100 Mhz.

• Komputer perlu mempunyai RAM yang banyak, semakin banyak semakin baik.

• Paling kurang 32 MB RAM diperlukan.Pentium 100 Mhz amat dicadangkan

Cakera Keras

• Fail-fail video menggunakan banyak ruang simpanan.

• Adalah satu langkah yang bijak untuk menggunakan cakera keras AV (dari jenis 2 GBs hingga 9 GBs atau lebih besar).

Video Capture Card

• Merupakan kad/papan utama yang menghubungkan sumber anaIog ke komputer.

• Bersama dengan CPU, video capture card tersebut akan mengambil signal video dari sumber analog dan menukarkan video analog ke video digital.

• Salah satu contoh video capture card ialah Creative Labs’ VideoBlaster.

• Biasanya ia disediakan bersama perisiannya. • Perisian tersebut membenarkan pengguna untuk

menentukan bilangan kerangka, saiz skrin dan sebagainya.

• Ianya boleh mengambil video pada pelbagai kadar kerangka, bermula dari kerangka yang sedikit sehingga 25 atau 30 kerangka per saat untuk tangkapan masa nyata.

• Sesetengah video capture card tidak boleh menangkap bunyi. Oleh itu, kad bunyi diperlukan.

Mendigitkan Video pada PC / Desktop

Analogue Video

Video Capture Card/Board

Digital Video

Mengambil Video pada Desktop / PC

Sumber Analog

Video Analog dengan Bunyi

VideoMenskala Mendigitkan Video

Di’kompres’kan oleh Codec

Dapatkan Bunyi

Mendigitkan Video

Video Digital Audio Digital

Klip Video Digital dengan Bunyi

Saiz Video Digital

Ditentukan oleh :• Saiz Skrin• Warna• Kadar Kerangka• Bunyi dan masa

3 bentuk asas:1. Pengambilan video /Video capture.2. Pengeditan video /Video editing.3. Video playback applications

ALAT PENGEDITAN VIDEO DIGITAL

ALAT PENGEDITAN VIDEO DIGITAL

Pengambilan video /Video Capture :

- Digunakan untuk mengawal perkakasanpengambilan video.

- Mempunyai kebolehan untuk mengawal isyarat input video; warna dan kecerahan.

- Mengawal pemilihan compression , algoritma, kadar frame,saiz frame,kedalam warna,kadar bit dan pensampelan audio.

ALAT PENGEDITAN VIDEO DIGITAL

Pengeditan Video /Video Editing :- Menkompreskan video digital kepada saif fail yang lebih

kecil.- Berfungsi untuk copy, cut, paste dan delete frame video .- Boleh mencantumkan beberapa frame dari sumber-

sumber video yang berlainan.- Changing size or frame rate of the video data segments.- Mengedit audio samada menyalin,menambah atau

menghapuskan- Menambah kesan khas/special effect kepada klip video

seperti tajuk atau transitions antara segmen video.

Pengeditan Video : iMovie (Apple)

Editing photo

Video effect

Explore dragtrim

Index transition

Editing timeline

Ciri yang terdapat perisian iMovie

PERISIAN VIDEO DIGITAL

Video Playback:- Memainkan/Play video pada tetingkap atau

skrin penuh dengan fungsi untuk mengawal untuk play, pause, stop, rewind, fast forward dan frame advance atau retreat.

- Pengguna dapat pergi kesesuatu frame yang dikehendaki dengan menunjukkan lokasi frame video tersebut.

Kesan Khas

Transition:- Such as fading, wiping, splatters, scrolling,

stipple, fade-in and etc. Superimposing:

- Add features, image or background to the screen.

Filters:- To create lens flares, pointilize, emboss,

zoom, pan, twist and etc.- Used to change duration of the video.

MORPHING A digital process where 1 image cross fade

into another with a twist. Example; running tiger change into a sport

car or human change to aliens. (read the details in the multimedia, concept

and practice).

Perisian Mengedit Video

•Gold Disk’s Astound Studio

•Adobe Premiere•Adobe After Effects

FORMAT FAIL

AVI (.avi)- Audio Video Interleave Format.- Menyokong semua platform window- Digunakan dalam windows media player.

FORMAT FAIL QuickTime (.mov)

- Menyokong platform Windows dan Macintosh

- Perlu menginstall perisian Apple’s QuickTime player .

- Banyak digunakan dalam penyebaran video menerusi halaman webVersatile

FORMAT FAIL

MPEG (Motion Picture Expert Group)- MPEG-1 MPEG-1 : 1.2 Mbps of video and 250Kbps of 2

channels stereo audio using CD-ROM.- MPEG-2 MPEG-2 : broadcast quality video at rates between

3-15 Mbps.- MPEG-4 MPEG-4 : low data rate video, can view 3D and VR

applications.- MPEG-7MPEG-7 : metadata standard for video presentation.- http://www.mpeg.org

Jenis Codec's dan ‘file extensions’

CODECS FILE EXTENSION

Cinepax .avi

Indeo .avi

Apple Quicktime .mov

MPEG .mpg

Elemen Animasi• Animasi merupakan penggunaan komputer

untukmenjana imej bagi menunjukkan satu pergerakan.

• Animasi adalah satu siri imej yang dilihat secara berurutan.

• Dalam animasi, setiap imej akan dipaparkan pada posisi yang telah ditentukan untuk menghasilkan satu pergerakan.

• Animasi boleh dihasilkan dalam 2 bentuk:– 2D animation– 3D animation

Elemen Animasi – 2D Animation

• Penghasilan animasi 2D terbahagi kepada 2 teknik iaitu Cel animation dan path animation

• Cel animation berdasarkan perubahan yang berlaku daripada frame 1 kepada frame berikutnya bagi mengambarkan pergerakan sesuatu objek.

- Perkataan Cel adalah singkat untuk celluloid, merupakan satu lembaran lutsinar dimana objek dilukis ataupun dicat untuk membina animasi tradisional, yang ditarik menggunakan tangan.

ANIMASI SIRIESANIMASI SIRIES

Elemen Animasi – 2D Animation

• Path animation merujuk kepada pergerakkan Path animation merujuk kepada pergerakkan objek melalui satu laluan yang telah objek melalui satu laluan yang telah dikenalpasti dalam skrin. dikenalpasti dalam skrin.

- Path boleh terjadi dalam satu garis lurus atau boleh terdiri daripada bilangan lengkung.

- Objek yang tidak berubah, cuma boleh diubah saiznya ataupun dibentuk semula.

- menggunakan teknik tweening, yang mana objek ditetapkan pada kedudukan permulaan dalam bingkai pertama dan berubah kedudukan pada bingkai terakhir.

- Perubahan pada bingkai lain akan ditentukan oleh teknik-teknik yang telah dipilih.

Elemen Animasi – 2D Animation

Contoh animasiContoh animasi

Elemen Animasi – 3D Animation

• Penghasilan 3D animasi lebih komplek dan melibatkan 3 langkah iaitu Modeling, Animation dan Rendering.– Pemodelan ialah proses menghasilkan objek 3D dan

adegan.– Animation melibatkan pentakrifan gerakan objek dan

bagaimanakah perubahan lampu serta paparas semasa animasi dilaksanakan.

– Rendering adalah langkah terakhir dalam mewujudkan animasi 3-D dan membabitkan menentukan objek sifat seperti warna, tekstur permukaan dan tahap ketelusan.

• Proses menghasilan 3D animasi boleh mengambil masa yang lama, bergantung kepada kerumitan animasi yang hendak dihasilkan.

Contoh AnimasiContoh AnimasiTAKE A BREAK!!!!TAKE A BREAK!!!!

Format Fail Animasi

Dir Dihasilkan daripada perisian Director.

Fla Dihasilkan menggunakan perisian Flash.

Max Dihasilkan menggunakan perisian 3D Studio Max.

Gif Dihasilkan menggunakan perisian Adobe image Ready.

Bacaan Tambahan…• Ze-Nian and Mark S. Drew (2004), Fundamentals of Multimedia,

London:Pearson Prentice Hall.• Usha V. Reddi & Sanjaya Mishra (2003), Education Multimedia: A handbook for

Teacher-Development, Commonwealth Educational Media Centre for Asia.• Tay Vaughan (2001), Multimedia : Making It Work, Fifth Edition, McGraw-Hill.• James E. Shuman (1998). Multimedia In Action. Thomson Publishing Inc.• Luppa, N.V. (1998). Designing Interactive Digital Media. Woburn: Butterworth-

Heinemann.• Mohmmad Dastbaz (2003), Designing Interactive Multimedia Systems,

Boston:Mc Graw Hill.• Nigel Chapman and Jenny Chapman (2003), Digital Media Tools, Second

Edition, London:John Wiley & Sons Ltd.• William W. Lee & Diana L. Owens (2004) Multimedia-Based Instructional

Design, Second Edition, John Wiley & Sons, Inc.

SOAL JAWAB