4. multimedia dlm p&p

7/25/2019 4. Multimedia Dlm P&P

1/80


2/80

Definisi Multimedia

Hofstetetter (1995) - Multimedia bermaksud integrasielemen teks, audio, grafik, animasi dan video yang

menggunakan komputer sebagai alat kawalan

persembahan untuk membolehkan pengguna mengarah,

berinteraksi, mereka cipta dan berkomunikasi agar

proses pembelajaran menjadi lebih berkesan.

Schurman (1995) - Multimedia ialah kombinasi

manipulasi, penggabung jalin dan pengintegrasian

media seperti teks, grafik, animasi, audio dan videodalam suatu perisian yang direka bentuk di dalam

meningkatkan interaksi antara pengguna dan komputer.


3/80

ElemenMultimedia

Teks

Grafik

AudioVideo

Animasi


4/80

1. TeksTeks adalah perkataan yang boleh difahami oleh

pengguna. Merangkumi muka taip , font , ruang

putih , serif ( Times Roman , Calistro dll ) , Sans

serif ( Arial , Verdana dll) , dekoratif ( font unsur

sastera lamaLucida Handwriting dll)


5/80


6/80

2. GrafikGrafik adalah gambar atau ilustrasi.(a) Resolusi

Ia adalah darjah kualiti paparan grafik pada

peranti output dan peranti input.(b) Penggunaan Grafik dalam Aplikasi

Multimedia

(c) Format Utama Fail Imej Digital GIF ,

BMP , PICT , JPEG(d) Sumber-sumber Grafik Scanner ,

kamera digital, Laman web ( enjin pencari )


7/80


8/80


9/80

Terdapat tiga cara utama penggunaan audio:

(i) Sebagai muzik latar belakang Fail audio yang dimainkan akan mewujudkan mood untuk

persembahan tersebut.

Akan menghasilkan keseronokan dan keinginan

(ii) Sebagai kesan bunyi

Bunyi akan memberi perhatian dan arahan kepada pengguna, padabutang dan transisi untuk menekankan pada perubahan skrin.

Kesan-kesan bunyi ini bersaiz kecil tetapi mempunyai kesan yang

menarik.

(iii) Sebagai suara latar

Merupakan bahan sokongan penyampai.

Digunakan seminimum mungkin dalam persembahan kerana ianya

boleh mengganggu.

Konsep Audio Analog dan Digital

(a) Format Fail Audiomp3, wave, MPEG , RA / RM


10/80

4. AnimasiAnimasi ialah satu proses menghidupkan ataumemberikan gambaran bergerak kepada sesuatu yang

statik agar ia kelihatan hidup dan dinamik.

(a) Animasi dalam Aplikasi Multimedia

(b) Animasi 2D

Animasi dua dimensi (2D) dikenali sebagai animasi linear.

(c) Animasi 3D

Animasi 3D membuatkan objek kelihatan lebih hidup

(nyata) berbanding animasi 2D.Formatpenghasilan animasi yang biasa digunakan ialah

gif animated dan swf.


11/80

5. Video

Video adalah satu siri skrin yang memuatkan gambar-gambar yang diiringi bunyi-bunyian yang dimainkan pada

kadar yang laju.

Video yang digunakan dalam produksi multimedia dapat

bertindak sebagaisatu cara yang berkesan bagi

menyampaikan maklumat secara terus. Ia juga dapat berfungsi menyampaikan maklumat

dengan tepat yang kadangkala gagal ditangani oleh

media-media yang lain.

Ia mampu membawa suasana sebenar kepadapengguna di samping dapat memberi kelainan yang lebih

menarik.

Contoh format: MPEG1 (VCD),MPEG2(DVD) , avi, mov,

Quict Time (Mscintost).


12/80


13/80


14/80

Perisian grafik

Antara perisian grafik yang sering diguna

ialah Adobe Photoshop, Corel Draw ,

Macromedia Fireworks, Paint Shop Pro,

Adobe Illustrator, Paint, MacromediaFreehand

Perisian audio

Antara perisian audio biasa digunakanialah

Sound Forge, Cool Edit dan Audio Grabber.


15/80


16/80


17/80


18/80

Di bawah ini merupakan window dari Flash MX yang

digunakan dalam pekerjaan pembuatan animasi.


19/80

A. Timeline, digunakan untuk mengatur dan

mengawal isi keseluruhan movie.


20/80


21/80

C. Color Window, merupakan window

yang digunakan untuk mengawal warna

pada objek yang dibuat.

1. Color Mixer, digunakan

untuk mengawalr warna pada

objek sesuai dengan

keinginan. Ada 5 pilihan tipe

warna, iaitu: None, Solid,

Linear, Radial, Bitmap.


22/80

2. Color Swatches, digunakan untuk memberi

warna pada objek yang dibuat sesuai denganyang warna pada window.


23/80

D. ActionsFrame, merupakan window yang

digunakan untuk menuliskan Action Script

untuk Flash MX. Biasanya Action Scriptdigunakan untuk mengendalikan objek yang

dibuat sesuai dengan keinginan.


24/80

E. Properties, merupakan window yang

digunakan untuk mengatur property dari objek

yang dibuat.


25/80

F. Components, digunakan untuk

menambahkan objek untuk web applikasiyang akan di publish ke internet


26/80


27/80

Animasi Flash dapat dilakukan

dengan dua cara iaitu :

1. Frame by frame

2. Tweening


28/80

1. Membuat animasi frame

per frame

Untuk membuat

animasi ini

sangatlah mudah,ikutilah petunjuk

berikut ini.

Gambarlah oval

tool pada stage.

Kemudian klikkanan pada frame

kedua lalu pilih

Insert Keyframe.


29/80

Setelah itu dengan menggunakan eraser tool

hapuslah sebagian dari oval tool yang telah dibuathingga menyerupai gambar dibawah ini.

Sebelumnya di bagian option ubahlah eraser mode

menjadi erase normal.


30/80


31/80

Jika telah selesai membuatnya,

jalankan movie tersebut dengan cara

menekan tombol Enter. Untuk meng-

compile film tersebut tekan Ctrl+Enter.
http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/Stick%20Movie_%20Breaking%20Rust%20by%20Kensei%20Thomas.mp4


32/80

2. Tweening

Membuat frame awal dan frame akhir saja.

meminimalkan ukuran file.

Ada 2 jenis tween animation iaitu Shape

tween dan Motion tween.Shape tweening berguna untuk mengubah

bentuk.

Motion tween menolong anda untuk merubah

ukuran, memutar, merubah warna dan

transparansi simbol.


33/80

Untuk menggunakan animasi tween tersebut

maka ikutilah petunjuk berikut ini.

1. Gambar objek (misal: rectangle tool) pada

stage, kemudian buatlah objek tersebut

menjadi satu group (Ctrl+G).

2. Setelah itu klik kanan pada objek lalu pilih

Distribute to layers. Kemudian beri nama

layer tersebut dengan nama kotak dengancara double click item tersebut di timeline.


34/80

Kemudian klik kanan pada frame yang telah

terbentuk. Sebelumnya blok dahulu

keseluruhan frame tersebut. Lalu pilih CreateMotion Tween. Maka frame yang dibuat blok

tadi akan keluar sebuah tanda panah (sesuai

panjang frame).


35/80

Gerakkan objek yang dibuat dari tempat yang semula

ke tempat yang lain. Jika objek sudah pindahkan,

silahkan tekan enter untuk menjalankan animasi. Makaobjek yang dibuat tadi akan bergerak dari sisi awal

menuju ke sisi yang lainnya secara otomatis.


36/80


37/80


38/80


39/80

1. Adobe Dreamweaver CS3 (ADCS3) adalah satuaplikasi pembangunan web. Dahulunya ADCS3 dikenali

sebagai Macromedia Dreamweaver sebelum Adobe

mengambilalih syarikat Macromedia.

2. Versi AD terkini ialah CS5 (April 2010)

3. ADCS3 menyokong penggunaan teknologi web

termasuklah:

a) XML/XSLT

b) HTML/XHTMLc) Cascading Style Sheet (CSS)

d) JavaScript (serta fungsi Behaviour)

e) PHP/VB/ASP/ColdFusion


40/80

Paparan Ruang Kerja Dreamweaver 8:

Apabila program Dreamweaver dilancarkan,

imej seperti berikut akan dipaparkan:


41/80

Klik pada Create

New HTML;

dan akandipaparkan imej

seperti berikut:


42/80

Title Bar:

Title Bar atau Palang Tajuk memaparkan nama fail html

yang sedang aktif.

Insert Bar:

Mengandungi butang bagi memasukkan pelbagai jenisobjek seperti imej, teks, table, borang, tag dan sebagainya

ke dalam sebuah dokumen.

Menu Bar:Mengandungi pilihan pelbagai jenis Menu seperti File,

Insert, Edit dan sebagainya


43/80

Document Toolbar:

Mengandungi butang yang menyediakan pilihan paparan(Code view, Design view atau Split), Tajuk sesuatu

dokumen, dan juga pilihan untuk memaparkan halaman di

browser.

Document Window:

Memaparkan dokumen semasa yang sedang

dibangunkan.

Panel Groups:Merupakan set panel yang dihimpunkan dalam satu

kumpulan. Untuk memaparkan panel group, klik pada

anak

panah dibahagian kiri nama panel tersebut.


44/80

Tag Selector:

Memaparkan hirarki tag disekeliling objek semasa. Klikpada sesuatu objek untuk melihat hirarki tag yang terlibat.

Property Inspector:

Memaparkan format bagi halaman yang dibina

termasuklah format imej, font dan warna teks. Format yang

dipaparkan bergantung pada kedudukan kursor yang

sedang aktif.

Site Panel:Memaparkan fail dan direktori laman web yang anda

bangunkan. Berfungsi sebagai Windows Explorer.


45/80


46/80

Untuk mereka tapak web baru, gunakan

fungsi Site pada Menu Bar:

a. Pilih Site dan kemudian New Site


47/80

b. Isikan maklumat pada window Site Definition.

i. Nameisikan nama tapak web

ii.HTTP AddressURL tapak web sekiranya ada


48/80


49/80

c. Pilih aplikasi atau teknologi pelayan

(server technology) sekiranya perlu.


50/80

d. Pilih lokasi tapak web akan diwujudkan

dalam komputer (atau pilihan untuk editfail terus daripada pelayan web).


51/80

e. Pilih mod untuk berhubung dengan

pelayan web, sekiranya perlu. Jikatiada, pilih None.


52/80

f. Sekiranya semua maklumat adalah

betul pada Summary, klik butangDone.


53/80

g. Tapak web yang baru dibangunkan

boleh dilihat menggunakan fungsi

Site>Manage Sites pada Menu Bar.


54/80

h. Senarai fail-fail (sekiranya

ada) dalam tapak web boleh

dilihat pada Panel Files.


55/80


56/80
http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/How%20To%20Make%20a%20Website%20in%20Dreamweaver%20(Tutorial%20For%20Beginners!).mp4


57/80
http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/How%20To%20Make%20a%20Website%20in%20Dreamweaver%20(Tutorial%20For%20Beginners!).mp4


58/80


59/80

Menghasikan gambar yang menarikdengan menguna alat-alat lukisan yang

dibekalkan.

mudah untuk membuat gambar profesional.

Anda boleh mengimport, mengedit dan

berkongsi imej-semua di satu tempat.

Paint Shop Pro sentiasa menjadi alternatif

yang membawa kepada Adobe Photoshop


60/80

penyuntingan foto yang kuat dan

menganjurkan suite dengan pelbagai

fungsi yang kuat.

Kemasukkan gambar yang bertambah

baik dengan automatik akanmengesan apabila peranti USB

penyimpanan massa seperti kamera

digital atau kad memori bersambung

ke PC anda untuk memuat turun fail-failimej dari peranti itu.


61/80


62/80

Seperti program-program Windows lain, menu

Paint Shop Pro dan toolbar mengandungibeberapa arahan standard di lokasi-lokasi yang

dijangkakan, seperti New, Terbuka, Cetak, dan

Jimat, yang dikumpulkan dalam Fail dan pada

bar alat Standard, dan Cut, Salin, dan Paste,yang dikumpulkan di dalam menu Edit.

Kebanyakan perintah-perintah khusus untuk

bekerja dengan imej anda yang dianjurkan oleh

taipkan Imej, Kesan, Laraskan, Lapisan, Objek,dan menu Pilihan:


63/80

The Paint Shop Pro kumpulan paletmaklumat mengenai imej anda yang

berkaitan dan membantu anda untuk

menguruskan elemen-elemen seperti

warna, bahan, dan lapisan.

Terdapat sepuluh palet, tetapi untuk

penciptaan imej asas dan penyuntingan,

anda biasanya akan menggunakan hanya

beberapa:


64/80

1.Materials Bahan digunakan untuk

memilih warna, corak, dan tekstur.


65/80

2.Tool optionpalet mengandungi pilihan

khusus kepada alat atau objek yang saat

ini dipilih.

3. Layer palet paparan membolehkan anda

menguruskan lapisan dalam imej anda.


66/80

4. Overview memaparkan palet maklumat

mengenai imej anda.


67/80

5. History palette menyenaraikan tindakan

yang anda telah dilakukan, membiarkan andamembuat asal dan buat semula pelbagai

tindakan sekaligus.


68/80

6. Mixer palette digunakan untuk campuran

pigmen apabila bekerja dengan alat Art

Media.


69/80

7. Dokumen Histogram graf pengagihan nilai

merah, hijau, biru, dan skala kelabu dalam imej,

dan juga warna, tepu, dan ringan. Palet ini seringdigunakan untuk membuat pembetulan kompleks

kepada sesuatu imej.


70/80

8. Brush Variance palette digunakan

untuk menetapkan pilihan berus

terutamanya untuk tetikus 4D, tablet, atau

stylus


71/80


72/80

10. The Learning Center palette contains

some basic Paint Shop Pro tutorials.
http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/PaintShop%20Pro%20X4%20-%20Overview.mp4


73/80
http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/PaintShop%20Pro%20X4%20-%20Overview.mp4


74/80


75/80

GARISAN- Pelbagai garisan

yang digunakan dalam

lakaran sebuah rumah

bertingkat.

- Contoh garisan lurus

dan halus, garisan

berbulu dan berserabut

pada rumput .

RUPA


76/80

RUPA

- Rupa bentuk gambaran .

- Bentuk dua dimensi(2D)yang

kelihatan seolah-olah mempunyaidimensi panjang, lebar dan tinggi

atau tebal seperti gambar foto

rumah.

RUANG

- Ruang dapatdiperhatikan melalui

jarak antara sebuah

rumah dengan sebatang

pokok.

- Tanpa ruang, visualrumah dan pokok tidak

dapat dihasilkan kerana

ruang yang menentukan

kedudukan abjek terletak

secara strategik


77/80

JALINAN

-Permukaan kasar pada

permukaan rumput.

- Jalinan tampak dan sentuh jugaboleh diperhatikan.

- Contoh : jalinan sentuh

permukaan rumbat

menimbulkan kesan sentuhan

yang kasar.

WARNA

- Terdapat beberapa warna

termasuk warna asas dan warna

sekunder.

- Mewujudkan perasaan harmoni.- Mewujudkan kesan tertentu

seperti warna hijau yang

terdapat pada pokok

menimbulkan kesan yang

tenang untuk mata dan hati.

GARISAN


78/80

GARISAN

-Terdapat beberapa garisan

dalam gambarwebsite ini.

- Contohnya,garisan

berpancar terdapat dalam

garisan bulat.

- Garisan lurus dan garisan

halus.

RUPA

- Bentuk 2D digunakan

dalam semua bentuk

gambaran seperti gambar

buah-buahan dan gambar

figura manusia mewujudkan

rupa muka manusia.

c

c

RUANG
http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/B.Y.E.%20-%20Bye%20(HD)%20-%20Stick%20Fight%20-%2060%20Deaths%20in%205%20Minutes%20-%20Flash%20Animation.mp4


79/80

- Tanpa ruang visual tak dapat

dihasilkan.

- Di dalam rekabentuk skrin

penggunaan ruang yangberkesan amat penting.

- Contohnya, websiteyang

dibentuk mengikut ruang yang

tertentu.

WARNA

- Warna yang terang menimbulkan

kesan yang cerah pada gambar.

- Justeru websitetersebutdapat

menarik perhatian ramai untuk melayari

laman web ini.- Warna yang cerah juga menimbulkan

kesan harmoni padawebsite

tersebut.

- Contohnya, objek-objek yang

berkaitan dengan aspek makanan.
http://localhost/var/www/apps/conversion/tmp/Videos/RealPlayer%20Downloads/B.Y.E.%20-%20Bye%20(HD)%20-%20Stick%20Fight%20-%2060%20Deaths%20in%205%20Minutes%20-%20Flash%20Animation.mp4


80/80

4. multimedia dlm p&p

Documents