Bab III

Komponen dan style pada multimedia interaktif berbasis halaman web

A. Komponen pada multimedia interaktif berbasis halaman web

Multimedia interaktif adalah multimedia yang sudah dipenuhi

dengan alat pengendali yang dapat digunakan oleh user untuk
mengeksekusi, sehingga dengan mudah user (pengguna) bisa mengedalikan
eksekusi menurut kebutuhan. Multimedia interaktif dengan berbasis
halaman web memiliki arti bahwa situs web tersebut memiliki banyak jenis
media seperti suara, video, atau animasi sekalipun. Media interaktif adalah
suatu media yang lebih menonjol pada produk serta service digital yang
terdapat pada sistem dengan baris komputer yang mampu memberikan
timbal balik kepada pengguna dengan memberikan layanan seperti gambar,
teks, video, maupun audio. Beberapa unsur media interaktif yang sering
digunakan pada multimedia interaksi adalah berbasis web antara lain sb.

No. Unsur Keterangan

1. Teks Digunakan sebagai petunjuk inti yang
menjelaskan sejak awal situs nya
dikunjungi kepada user mengenai tema
serta layanan pada situs web.
2. Image Grafik yang dipakai untuk melakukan
promosi sehingga pada pengguna
berminat mengunjungi halaman web
3. Animasi Salah satu media interaktif yang mampu
bergerak karna hasil buatan dan
rancangan manusia melalui aplikasi
perangkat lunak tertentu. Animasi ini
biasanya digunakan untuk menarik
pengguna agar mengunjungi situs web.
4. Audio Suara yang dapat didengar didalam
multimedia interaktif berbasis halaman
web. Audio biasanya digunakan dalam
situs web music online dan sebagainya.
 5. video Media visual yang mampu bergerak dan
mengeluarkan audio secara bersamaan.
Video juga mampu menjadi bahasa
promosi dan menyalurkan layanan.
Menggabungkan image, animasi, video, dan audio pada multimedia
interaktif berbasis web berarti menggabungkan unsur media interaktif
tersebut kedalam sebuah situs web. Guna menggabungkan gambar,
animasi, audio, maupun video diperlukan teknik yang dapat menghasilkan
keselarasan pada halaman web nantinya. Sehingga, dalam hal
menggabungkannya diperlukan keahlian tertentu agar situs web terlihat
tidak asal-asalan dan terstruktur. Disamping gambar yang dapat
ditambahkan pada halaman website, penggunaan file-file multimedia juga
dapat dimainkan pada halaman website. Dengan keberadaan file-file
tersebut, tentunya halaman website akan semakin menarik dibandingkan
dengan hanya berupa teks dan gambar saja.
1. Implementasi pada unsur media interaktif
Pengguna unsur media interaktif pada Adobe Flash CS6 adalah sb
a. Menggabungkan teks
Secara mendasar, terdapat 2 jenis teks yang dikenali dalam
perangkat lunak Adobe Flash, yaitu Embeded sebagai jenis font
yang telah diinstal pada sistem yang disertakan (embed) pada
file SWF serta device font yang digunakan sesuai dengan font
tidak ada pada komputer lokal, maka secara otomatis flash
akan mengambil jenis font yang memiliki kemiripan dengan
font yang dimaksud. Langkah-langkah membuat animasi
karakter sama dengan yang dilakukan dalam pembuatan
animasi teks. Dalam hal ini, setiap karakter merupakan
instance dari suatu simbol dalam pemberian effect warna,
sehingga memerlukan effect panel.
1) Menulis dengan Teks Tool
Langkah-langkah dalam membuat tulisan menggunakan
teks tools adalah sb.
 a. Klik pada menu file -> new untuk memulai lembar
kerja baru.
b. Setelah itu, klik pada text tool sehingga kursor
berubah menjadi tanda + pada saat diarahkan kearea
stage, maka muncul kotak tulisan.
c. Pada saat menulis didalam kotak stage , maka
otomatis kotak panjang akan bertambah lebar sesuai
panjang tulisan. Misalnya teks : 73 Th Indonesia
Merdeka.
d. Selanjutnya melakukan block handle agar kotak stage
dapat ditarik ke kiri dan ke kanan.
e. Akhiri dengan menyimpan file tersebut dengan nama
73 Th.fla
2) Mengedit tulisan
Tulisan yang ingin diubah harus diseleksi terlebih dahulu,
cara memasukkan mode edit dilakukan dengan cara klik
2 kali pada tulisan pada stage dengan arrow tool atau
dengan klik satu kali tulisan distage dengan text tool
3) Panel character
Menggunakan panel character dapat dilakukan dengan
cara menu window -> panel -> character, sehingga
keluar panel text. Agar teks dapat diubah terlebih dahuu
tulisan harus diseleksi.
4) Panel paraghraph
Secara mendasar, panel paragraf digunakan untuk
mengatur paragraf dengan klik pada menu window ->
Panels -> Paragraf.
5) Panel text option
Pada bagian panel option digunakan untuk mebuat teks
statis, form isian, dan link tulisan dengan target alamat
URL.
6) Static text
 Secara mendasar, teks ini bersifat statis yang artinya
hanya dapat dilihat saja. Guna menggunakan device font
dapat menggunakan pilihan user device font, sedangkan
pilihan selectable digunakan jika user dapat menyoroti
tulisan pada stage saat movie berjalan. Langkah-langkah
dalam membuat tulisan statis dapat dilakukan dengan
cara klik pada menu Window -> Panels -> Text option,
dan di akhiri dengan klik static text.
7) Dynamic text
Pengguna Dynamic text denganbberbagai pilihan untuk
mengatur tampilan pada Flash movie maupun membuat
score suatu game. Langkah-langkah dalam membuat
tulisan dinamik dapat dilakukan dengan cara klik pada
menu Window -> Panels -> Text option, dan diakhiri
dengan klik pada Dynamic Text.
8) Input text
Input text dengan user (pengguna) untuk memasukkan
text maupun membuat form. Langkah-langkah dalam
membuat tulisan input dapat dilakukan dengan cara klik
pada menu Window -> Panels -> Text option, dan akhiri
dengan klik pada Input text.
b. Menambahkan image
Langkah awal yang harus dilakukan sebelum menambahkan
image (gambar) adalah memiliki situs web dengan tema yang
menarik agar menarik perhatian para pengunjung (visitor).
Setelah itu, langkah selanjutnya adalah memasukkan konten-
konten yang diprlukan kedalam situs web yang memberikan
layanan music online maka diperlukan konten-konten yang
menjelaskan deskripsi mengenai situs web yang dimiliki. Hal
tersebut akan lebih menarik jika dilengkapi gambar dan
animasi yang sesuai dengan tema situs web tersebut. Dalam
hal ini, pengguna bisa mendapatkan layanan music online
ataupun layanan unduh (download) yang bisa disediakan pada
situs web. Salah satu faktor yang paling menonjol adalah
penggunaan yang tepat dan proporsional, baik sebagai
background maupun foreground dari situs tersebut.
Pada dasarnya, terdapat 2 prosedur yang dapat digunakan
untuk memasukkan gambar di Adobe Flash, yaitu sb.
1. Import to library
Langkah-langkah dalam menambahkan image (gambar)
dengan metode import to library adalah sb.
a. Diawal dengan mengaktifkan Adobe Flash yang
dilanjutkan dengan klik pada Create new, dan klik pada
ActionScript 2.0 atau 3.0 untuk membuka lembar kosong
yang baru.
b. Selanjutnya klik pada menu file -> import -> import to
library.
c. Selanjutnya memilih (klik) pada gambar yang akan
dimasukkan kedalam tab library dan di akhiri dengan
menekan tombol open.
d. Guna melihat gambar yang sudah dipindah le library,
dapat dilakukan dengan cara klik pada menu Window ->
Library atau dengan menekan tombol kombinasi Ctrl-L.
e. Pada bagian terakhir dilakukan dengan cara menggeser
(drag and drop) gambar untuk meletakkan gambar
distage.
2. Import to stage
Langkah-langkah dalam menambahkan imgae (gambar)
dengan metode import to stage adalah sb.
a. Diawali dengan mengaktifkan Adobe Flash yang
dilanjutkan dengan klik pada Create new, dan klik pada
ActionScript 2.0 atau 3.0 untuk membuka lembar kosong
yang baru. Selanjutnya klik pada menu file -> import ->
import to stage atau menekan tombol kombinasi Ctrl +R.
b. Selanjutnya memilih (klik) pada gambar yang akan
dimasukkan ke dalam tab stage dan diakhiri dengan
menekan tombol open.
c. Menambahkan animasi
Kepopuleran animasi Flash sudah tidak diragukan lagi,
terutama bagi para pemula yang baru belajar membuat
animasi untuk multimedia interaktif. Dari sekian banyak
teknik yang digunakan dalam membuat animasi, sangat
tergantung dari kemampuan software (program aplikasi)
yang digunakan. Misalnya, gambar yang akan diberi
animasi dibuat menggunakan program aplikasi Adobe
Flash CS6 Professional. Langkah awal yang harus
dipenuhi dalam menambahkan animasi adalah
menyiapkan gambar-gambar yang akan digerakkan.
Langkah-langkah untuk membuat animasi dapat
dilakukan dengan cara sb.
1. Diawali dengan mengaktifkan Adobe Flash yang
dilanjutkan dengan klik pada create new, dan klik
pada ActionScript 2.0 atau 3.0 untuk membuka
lembar kosong yang baru. Selanjutnya, klik pada
menu file -> import -> import to library. Secara
otomatis pada panel library akan terdapat gambar-
gambar yang sudah di-import dan siap untuk dibuat
animasi.
2. Selanjutnya dengan membuat garis bantu (guide)
pada kotak stage dangan mengaktifkan baris ruler
pada menu view, diikuti dengan menggeser (drag)
ruler secara horizontal dan vertikal. Setelah itu, pada
saat klik menu View -> ruler maka secara otomatis
dibagian atas stage akan ada garis bantu.
3. Langkah selanjutnya adalah dengan memasukkan
gambar yang sudah diimport ke library kedalam
 stage, dengan melakukan drag dari library dan
diletakkan kedalam stage yang tersedia
4. Secara otomatis pada timeline di frame yang pertama
akan terisi keyframe. Pada bagian ini, dilanjutkan
dengan klik kanan pada frame ketiga dan dan klik ada
insert blank keyframe. Sehingga hasilnya, akan
muncul blank keyframe yang terletak pada frame
ketiga.
5. Hal yang perlu diperhatikan adalah perempatan
jarum frame (titik merah) harus berhenti tepat frame
ketiga. Selanjutnya melakukan drag pada gambar
kedua dari library ke stage dan begitu seterusnya
hingga gamabr yang dibutuhkan tertata dengan rapi.
Dalam hal ini desainer multimedia harus menentukan
selang satu frame kosong (misalnya dengan mengacu
pada angka genap dan ganjil), yaitu pada frame ke-5,
7, 11, 13, dan 15
6. Langkah selanjutnya adalah menyimpan file dengan
nama jalan kaki.fla dan dapat menjalankan animasi
tersebut dengan menekan tombol kombinasi
ctrl+Enter.
d. Menambahkan audio
Suara menjadi salah satu element dari sebuah aplikasi
multimedia interaktif yang cukup vital. Dalam hal ini,
suara bisa berupa efek suara ketik tombol ditekan,
background music, suara dubbing dari sebuah karater,
dan suara alam, ataupun jeis-jenis efek suara lain. Pada
dasarnya terdapat 2 metode menambahkan suara ke
aplikasi, yaitu memasukkan file suara langsung kedalam
aplikasi dan membuka file suara dari luar aplikasi
(embedding). Secara umum, Flash mendukung (support)
beberapa format suara, tetapi yang paling sering
digunakan berformat WAV dan MP3 dengan frekuensi
suara dibawah 44.1.
Langkah-langkah dalam menambahkan suara adalah
sebagai berikut.
1. Setelah mengaktifkan Adobe Flash, dilanjutkan
dengan klik pada menu file – import – import to
library. Selanjutnya, memilih file suara yang akan
dipakai. Setelah menekan tombol OK, maka file suara
akan masuk kedalam library.
2. Pada langkah berikutnya, adalah membuat tombol
‘play’ untuk memainkan music dan tombol ‘mute’
untuk mengehentikan music.
3. Selanjutnya memberikan instance name untuk
tombol play dengan nama bg_play dan tombol mute
dengan nama bg_mute. Namun demikian, pemberian
nama instance harus memulai panel properties
karena simbol suara tidak memiliki bentuk fisik. Oleh
karena itu, objek suara harus memiliki linkage agar
bisa diakses menggunakan kode suara. Guna
menamabahkan linkage dengan cara sebagai berikut.
I. Diawali dengan membuka panel panel library
melalui menu window-library.
II. Klik kanan simbol suara dan klik pada
properties.
III. Klik tombol “advenced” kemudian klik opsi
export for actionscript memasukkan : bgdial
pada kolom “class”
IV. Klik OK sehingga akan muncul linkage bgdial
pada library.
4. Pada tahap terakhir adalah berhubungan dengan
coding (penulisan kode) pada sebuah layer kode.
Berikutnya klik frame 1 layer kode, dan coding
program. Hal utama yang perlu dipahami dalam
 penulisan coding adalah seorang desainer
multimedia dapat menambahkan lebih dari suara.
Dalam hal ini, menggunakan konsep dasar setelah
linkage ditambahkan tujuan untuk melakukan akses
simbol yang ada dilibrary dengan membuat objek
baru menggunakan kode : new linkage (). Guna
menjalankan aplikasi dengan menekan tombol
kombinsi ctrl + Enter.
e. Menambahkan video
Pada dasarnya, menambahkan video kedalam aplikasi
Flash sangat mudah dilakukan. Hal ini diawali dari
keberadaan Flash player 5 yang sudah mendukung
bentuk import video langsung dengan memasukkan
video kedalam aplikasi, ataupun membuka file video
yang berada diluar aplikasi dengan memasukkan video
kedalam aplikasi, ataupun membuka file video dpat
dijumpai dengan berbagai format misalnya 3GP, AVI,
FLV, MKV, MOV, MP4, MWV, Dan sebagainya. Namun
demikian, tidak semua format file video bisa dikenali
oleh Flash karena aplikasi tersebut hanya bisa membuka
file-file jenis codec tertentu . cara termudah untuk
mendeteksi sebuah file atau video bisa dikenali oleh
Flash dapat dilakukan dengan melakukan proses import.
Jika setelah dipublish ternyata video tersebut tidak
muncul, dapat dinyatakan bahwa format video tidak
sesaui dan harus disesuaikan dengan format yang
dikenali oleh Flash yang bersangkutan.
1. Menyiapkan file video
Syarat utama yang harus dipenuhi dalam
menambahkan video adalah memiliki file video
dengan format yang bisa dikenali oleh Flash player,
tetapi umumnya jenis file video yang bisa dibaca
antara lain berformat AVI, FLV, MP4, Dan MPG.
 Sebaiknya, file yang telah dipersiapkan berada dalam
1 folder yang sama dengan aplikasi FLA dengan
tujuan mempermudah dalam menuliskan path (lokasi
file video). Faktor yang penting yang perlu dipahami
adalah video yang diunduh dari youtube atau situs
yang sejenisnya, pada umunya menggunakan format
FLV, tetapi file tersebut tidak bisa diimport karena
jenis format codec yang berbeda. Langkah satu-
satunya adalah melakukan convert ulang file tersebut
menggunakan software video editor seperti Adobe
Premiere, Windows movie maker, Videopad, dan
sejenisnya.
2. Mengimport Video
Langkah-langkah dalam mengimport video adalah
sebagai berikut.
a. Klik pada frame (tempat yang dituju untuk
meletakkan video), selanjutnya klik pada menu file
-> import -> import video.
b. Beberapa saat kemudian muncul panel Select
Video, lalu klik “Browse”, dan pilih file video yang
akan di-import. Setelah itu, diakhiri klik dengan
pada tombol “next”.
c. Selanjutnya memilih jenis skin dibagian skinning.
Secara mendasar, skin sebagai bagian dari video
playback component yang dapat digunakan dalam
mengontrol video dan memiliki beberapa tombol
diantaranya play, pause, stop, dan sound. Tombol-
tombol tersebut berfungis secara otomatis tanpa
memelukan kode program. Selanjutnya, klik pada
tombol next hingga beberapa kali sampai bertemu
dengan tombol finsh.
d. Setelah video muncul di stage beserta skin yang
telah dipilih sebelumnya maka untuk melakukan
 uji coba dapat dilakukan dengan menjalankan
movie menggunakan tombol kombinasi ctrl +
Enter. Hasilnya adalah jika video tidak muncul
menjadi pertanda adanya kesalahan, terutama
pada status salah format dan salah folder. Jika
proses diatas telah benar, maka video dapat
langsung dimainkan di komputer. Namun
demikian, terdapat beberapa mopsi mengubah
video yang dilakukan dengan cara membuka panel
propeties yang ada dibagian component
parameter yang dapat diatur sesaui dengan
kebutuhan. Beberapa opsi pada panel dapat
diubah sesuai dengan keinginan user, misalnya
mengubah opsi auto play, skin color, auto hide,
dan sebagainya.

2.penggabungan image, animasi, audio, dan video

Agar aplikasi lain dapat menggunakan fila Flash maupun menyimpan isi dari flash
movie ke dalam format file terpisah, maka pada proses persiapan file tersebut
dapat memanfaatkan fasilitas/perintah Export Movie dan Export Image. Secara
mendasar, perintah export movie hanya memberikan prosedur menyimpan flash
movie dalam format image serta membuat penomoran file image untuk setiap
frame di dalam movie tersebut. Di samping itu, perintah ini juga dapt digunakan
untuk mengirim suara berformat file WAV di dalam movie. Perintah export image
digunakan untuk mengirim isi dari frame/image aktif yang dipilih maupun pada
frame tunggal dari flash player movie.

Langkah-langkah untuk melakukan export movie atau export image adalah

sb.
 a. Jika ingin meng-export image dapat dilakukan dengan cara klik pada
frame atau imgae aktif yang ingin dieksport. Selanjutnya klik pada menu
file -> export movie (atau file – export image).
b. Setelah itu, mengetik nama file output atau jenis format dari pop-up
menu diteruskan dengan klik pada tombol save. Jika format yang dipilih
membutuhkan informasi lebih banyak maka secara otomatis kotak
dialog export akan ditmpilkan.
c. Selanjutnya klik pada tombol OK dan klik pada tombol save.

B. Style pada multimedia interaktif

Informasi memegang peranan penting dalam berbagai bidang

kehidupan manusia, sehingga dunia teknologi informasi dapat
berkembang dengan pesat. Informasi tersebut tidak lepas dari
perkembangan teknologi yang membuat segalanya lebih dinamis dan
efisien. Salah satunya pada bidang multimedia interaktif berupa
gambar, teks, video, audio, dan animasi. Bidang tersebut banyak
digunakan dalam design majalah, iklan televisi, presentase, seminar,
maupun membuat film animasi sebagai langkah alternatif dalam
menyampaikan informasi agar lebih menarik. Pada umunya, untuk
membuat multimedia interaktif dengan tampilan menarik berserta
kemudahan dalam mengubah tampilan layar berkaitan erat dengan
kinerja style CSS (Cascading Style Sheet). Cascading Style Sheet juga
dapat diterapkan pada elemen-elemen HTML multimedia diantarnya
gambar, video, dan audio.

1. Pengaturan style pada teks

Dalam pengaturan style meliputi beberapa jenis rangkaian
properties diantaranya pewarnaan, spasi, jenis font, style font,
color font, dan sebagainya yang dapat dikondisikan dalam
kemasan CSS. Beberapa properties dari CSS antara lain sb.

No. Properties Keterangan

1. color Mengatur warna apada teks script
 yang hendak dituju.
2. direction Menentukan arah tulisan atau teks
pada script terkait.
3. Letter-spacing Menambah atau mengurangi
properties dari spasi antarkarakter
4. Line-height Mangatur tinggi barisnya suatu teks
5. Text align Bertugas memberi rata atau batas teks
secara vertical
6. Text-decoration Menentukan hiasan/dekorasi pada
teks.
7. Text-indent Bertugas mengatur jarak inden dalam
baris pertama dalam teks blok.
8. Text-shadow Bertugas untuk menentukan efek dari
bayangan
9. Text-transform Bertugas untuk mengatur dari teks
kecil hingga besar
10. Unicode-bidi Bertugas untuk mengeset Unicode
11. Vertical-align Mengatur dari batas teks secara
horizontal
12. White-space Mengatur dari penulisan white-space
pada suatu elemen.
13. Word spacing Menambahkan atau mengurangi spasi
antarkata dalam suatu teks
Bentuk-bentuk pengaturan style pada teks adalah sb.
a. Pengaturan warna pada teks (color)
Penggunaan style pada pengaturan warna (color) dapat
diimplementasikan dalam sebuah teks/script. Pengaturan
warna dalam teks tersebut menggunakan 3 nilai jenis warna
yang terdiri dari nilai HEX, RGB, dan nilai-nilai warna live
(langsung) misalnya blue, red, black, pink, brown, atau white.
Bentuk format tulisan untuk pemberian warna pada teks
adalah sebagai berikut.
Selector {color:’nilai warna’}
Sedangkan bentuk implementasikan berupa sb.
1. .kotak {color:”#30cc91”}
 2. .kotak {color:”rgb(249,54)”}
3. .kotak {color:”brown”}
b. Pengaturan spasi antar karakter (word letter spacing)
Komponen letter spacing berfungsi sebagai sarana atau alat
yang digunakan untuk memberikan jarak (spasi) dalam
karakter atau huruf terkait. Bentuk format penulisan untuk
pengaturan format spasi antarkarakter (word letter spacing)
adalah selector:{letter spacing:nilai spasi;}. Bentuk
implementasikannya adalah sb.
Selector:{letter-spacing: 14px;}
c. Pengaturan bentuk dalam teks dekorasi (decoration)
Pengaturan teks menggunakan properti teks dekorasi
bertujuan untuk membantu dalam mengatur atau menghapus
suatu dekorasi dalam suatu teks. Bentuk format penulisan
untuk pengaturan bentuk dalam teks dekorasi (decoration)
adalah selector {text-decoration:nilai text-decoration}. Bentuk
penerapannya adalah sb.
.kotak {text-decoration: 20px text-decoration}
d. Pengaturan antarkata (spaci word spacing)
Word spacing adalah salah satu style pada CSS dipergunakan
untuk memberikan spasi (jarak) pada beberapa kata-kata atau
huruf. Bentuk format penulisan untuk pengaturan antarkata
(spasi word spacing) adalah sebagai berikut.
Selector: {word-spacing:nilai spasi;}
Bentuk penerapannya sb.
Selector: {word-spacing: 24px;}
e. Pengaturan jarak indentasi paragraph (text indent)
Secara mendasar, teks indent bertugas sebagai alat untuk
mengatur jarak inden dari baris awal dalam suatu teks blok,
sehingga teks pada baris-baris awal terlihat lebih menjorok
kedalam dibanding teks baris lainnya. Bentuk format penulisan
untuk pengaturan jarak indentasi paragraph (teks inden)
adalah sb.
 Selector: {text-inden: nilai inden}
Bentuk penerapan
.kotak {text-indent: 16px indent}
f. Pengaturan dari huruf besar dan kecil dalam sebuah teks (text
transform)
Text transform dipergunakan untuk menentukan ukuran huruf
besar/kecil dalam suatu teks. Bentuk format penulisan untuk
huruf besar dan kecil dalam sebuah teks (text transform)
adalah sb.
Selector: {text-transform: nilai text-transform}.
Bentuk penerapan sb.
Selector: {text-transform: 22px text-transform}.
g. Pengaturan efek bayangan (shadow efek) dalam teks bayangan
(shadow text)
Teks berfungsi sebagai alat yang dipergunakan untuk
memberikan suatu bayangan pada sebuah teks. Bentuk format
yang penulisan untuk pengaturan efek bayangan (shadow
effect) dalam teks bayangan (shadow text) adalah sb.
Selector {text-shadow:koordinatx koordinaty #30cc90;}
h. Pengaturan teks rata (teks alignment)
Properties dati teks-alignment berfungsi sebagai alat yang
mengatur dari jenis rata pada suatu teks bertipe horizontal.
Teks rata dapat ditulis dalam bentuk rata kanan, rata kiri, rata
tengah, rata sejajar, maupun rata kanan-kiri. Bentuk format
penulisan untuk pengaturan teks rata (text alignment) adalah
sb.
Selector {text-align: jumlah nilai text-align;}
Bentuk penerapan sb.
.kotak {text-align: 18px text-align;}

2. Pengaturan style pada tampilan gambar

Style sangat berperan dalam menyajijkan informasis visual agar
terlihat lebih baik serta lebih optimal jika dilihat dari sisi
nonpenulisan, sehingga lebih disukai olehmesin pencari (search
engine). Dalam hal ini, penggunaan cascading diterapkan pada
semua objek yang ingin disisipkan dalam bentuk tag tag tertentu,
misalnya bentuk tulisan, table, gambar, maupun objek lainnya.
Guna memberi pengaturan dalam penggunaan gambar pada
umumnya dapat diterapkan secara inline, misalnya dengan format
pemanggilan berikut.
<imgsrc=’nm-filebr’width=’lebargbr’height=’tinggigbr’alt=’kata-
kuncigbr’title=’judulgbr’border=’garistebal’/>
Selain dengan metode inline, penambahan CSS diterapkan
dengan metode embed (diluar/eksternal) dalam CSS. Misalnya,
apabila terdapat 4 gambar yang ingin diberi style, dimana ke-4
gambar tersebut berukuran sama, yaitu 150px x 150px dengan
jarak margin atas dari gambar tersebut adalah 15px. Dalam hal ini,
penulisan yang berhubungan dengan tayangan yang akan
ditampilkan dalam bentuk kode program beirukut.
<!DOCTYPE HTML>
<html>
<head>
<title> tampilan 4 gambar CSS </title>
<style>
Img { Margin-top: 15px;
Float: left;
Clear: both:
Width: 150px;
Height: 150px;
</style>
</head>
<body>
Tampilan 4 image (gambar) CSS </br>
<img src=’meja.jpg’>
<img src=’kursi.jpg’>
<img src=’gelas.jpg’>
 <img src=’kipas.jpg’>
</body>
</html>

Beberapa hal yang berhubungan dengan pengaturan style

pada tampilan gambar adalah sb.
a. Pengaturan style pada letar belakang (background)
Pada dasarnya, penambahan gambar pada latar belakangan
(background) menggunakan dua jenis properti, yaitu latar
belakang (background) dan gambar latar belakang
(background-imgae). Nilai yang diinputkan untuk properti
tersebut adalah URL gambar yang adakalanya berjumlah
lebih dari satu dalam sebuah file CSS, termasuk didalamnya
penambahan dalam satu font. Perhatikan contoh script
berikut!
Div {background: url (latbcgl.png’);
Background-image: url (latebcgl.png’);}
Jika menggunakan kode script diatas, dapat
menimbulkan masalah ketika ukuran gambar yang
digunakan tidak sesuai dengan ukuran-ukuran elemen.
Misalnya, gambar akan ditampilkan berulang-ulang secara
horizontal maupun vertical jika ukuran elemen tersebut
lebih besar dari ukuran gambar. Oleh sebab itu, jika ingin
menerapkan gambar dalam bentuk kode program maka
penulisan script-nya adalah sb.
<html>
<head>
<title> latar belakang gambar </title>
<style type=’text/css’>
#awal1 {background-image:url
(komp_mm.jpg);height:400px;width:600px;}
</style>
</head>
 <body>
<div.id=’awal1’
</div>
</html>
Berdasarkan kode diatas, jika gambar aslinya berukuran
60px X 60px dan ukuran background yang digunakan adalah
400px X 600px, maka hasilnya adalah gambar tersebut
ditampilkan berulang-ulang dalam bidang latar belakang
berukuran 400px X 600px. Agar terlihat rapi, dapat
menggunakan properti background repeat guna mengatur
perulangan kode. Dalam hal ini, terdapat 4 nilai yang dapat
dimasukkan dlaam properti background-repeat, yaitu no-
repeat, repeat, repeat-y, dan repeat-x.
1. No-repeat yang beerarti menghilangkan perulangan
2. Repeat adalah memberikan perulangan
3. Repeat-x yaitu memberikan perulangan pada sumbu x
(horinzontal)
4. Repeat-y adalah atribut yang memberikan perulangan
pada sumbu y (vertical). Adapun listing dalam kode CSS
digunakan untuk menghilangkan perulangan pada
sumbu x dan sumbu y, sehingga atribut nama
(komp_mm.jpg) hanya ditampilkan satu kali saja,
penerapannya sb.
#awal {background-image:url
(komp_mm.jpg);
Background-repeat: no-repeat;
Height:400px;width:600px;}
b. Penggunaan style untuk menyisipkan gambar
Pada saat membuka sebuah halaman website, akan
dijumpai adanya artikel yang didalmnya berisi suatu gambar
sebagai pemberi keindahan dalam suatu artikel tersebut,
misalnya penggunaan thumbnail. Secara umum, gambar
 dapat dipasang dengan metode HTML dengan penggunaan
style CSS yang digunakan.
3. Penggunaan style pada tampilan audio
Sebuah halaman website yang dibuka adakalnya diiringi alunan
music (audio) dengan menambahkan elemen untuk memanggil
file music didalamnya. Beberapa atribut yang digunakan pada
elemen suara, yaitu sb.

No. Atribut Keterangan

1. Balance Mengatur keseimbangan suara kiri
dan kanan
2. Loop Banyak perulangan main yang
dilakukan
3. Volume Mengatur volume suara
Dalam hal ini, elemen yang digunakan adalah tag<bgsound>
dengan atribut “src” nama file suara. Misalnya <bgsound
src=”musikalam’wav”>. Disamping elemen tag <bgsound>,
terdapat elemen <embed> yang dapat digunakan untuk
memanggil file suara yang akan dimainkan pada halaman website
misalnya <embed src=”musikalam.wav”></embed>. Penggunaan
element <embed> secara otomatis memunculkan “control panel”
pada aplikasi multimedia yang terpasang pada sistem, sekaligus
sebagai aplikasi default dalam memainkan file multimedia.
Beberapa beberapa jenis atribut yang dapat digunakan pada
elemen <embed> adalah sb.

No. Atribut Keterangan

1. Align Mengatur posisi kontrol multimedia
2. Alt Menampilkan informasi alternatif
3. Height Mengatur tinggi kontrol
 4. Width Mengatur lebar kontrol
5. Autostrat Nilai true untuk dimainkan otomatis,
false untuk manual.
6. Hidden Nilai true untuk menyembunyikan
control
7. Loop Nilai true untuk mengulang terus-
menerus
4. Penggunaan style pada tampilan video
Salah satu contoh paling mudah melihar style jenis ini dapat ditemukan
pada video embed dari youtube secara langsung dari fitur online yang di-
frame/embedkan pada website youtube ataupun web video lainnya.
c. Mengevaluasi prosuk web
Kualitas sebuah website tergantung kepada pengujian dan
pengawasan terhadap kualitas web itu sendiri.
Penambahan media interaksi pada sebuah website
menambah daya tarik tersendiri pada website tersebut.
Guna dapat menjadi sebuah web yang interaktif dan
memiliki nilai tambah bagi pengunjung website, terdapat
beberapa evaluasi agar nantinya dalam pembuatan sebuah
media interaksi berbasis web menjadi lebih sempurna.
Website yang memanfaatkan elemen-elemen desain yang
menarik, lebih memungkinkan untuk mencapai tingkat
kepuasan pelanggan, niat seseorang yang lebih posistif,
loyalitas dan sumber referensi (patronase berkelanjutan).
Oleh sebab itu, keberhasilan website beserta produknya
tergantung pada kemampuan manrik perhatian seseorang
untuk menghabiskan waktu menjelajah website tersebut.
Selain elemen desain, respons emosional seseorang juga
penting dalam memperngaruhi evaluasi dari produk dan
desain. Seorang desainer multimedia harus memahami
interaksi antar reaksi emosional dan evaluasi kognitif dalam
upaya untuk meningkatkan peluang keberhasilan website
yang dibuatnya
1. Paramenter sebuah web
Pada dasarnya, situs (website) bisa diterjemahkan
sebagai sebuah produk teknologi informasi yang paling
popular, meskipun banyak dijumpai banyak website
yang hadir tanpa disertai kualitas bagus, sehingga
kurang mampu menyampaikan informasi yang dibawa.
Oleh sebab itu, untuk mengevaluasi semua website bisa
menggunakan parameter tertentu sebagai acuan dalam
penilaian. Namun demikian, hal mendasar yang perlu
dipahami adalah banyak sekali parameter yang dapat
digunakan untuk mengevaluasi sebuah website, tetapi
secara umum terdapat beberapa parameter yang paling
sering digunakan dalam menilai sebuah website yaitu
sebagai berikut.
a. Aksebilitas (accesbility)
Accesbility sebagai sebuah parameter yang
menjelaskan seberapa baik sebuah website jika
dilihat dari aspek pengaksesan, misalnya website
tersebut dapat diakses menggunakan teknologi
seperti melalui ponsel atau PDA. Misalnya, website
xyz.com terbilang cukup cepat dan mudah dalam hal
akses melalui ponsel. Namun terkadang akses
tersebut bisa saja melambat jika saja jaringan yang
digunakan pengakses sedang tidak dalam kondisi
baik. Beberapa hal yang berhubungan dengan
parameter accesbility adalah sebagai berikut.
1. Memastikan bahwa situs web dapat diakses
dengan baik oleh semua user.
2. Cara terbaik untuk memastikan bahwa situs dapat
diakses adalah dengan perencanaan matang,
pengembangan, pengujian, dan evaluasi.
b. Isi (content)
 Pada dasarnya, content adalah bagian yang paling
dari sebuah penilain atau evaluasi. Dalam hal ini,
cintent sebagai sebuah parameter yang menjelaskan
tentang isi dari website yang bersangkutan. Oleh
sebab itu, content harus menarik, relevan, dan sesuai
untuk target yang dituju. Beberapa pertanyaan yang
dapat diajukan beberapa hubungan tetang content
antara lain sebagai berikut.
1. Apakah focus utama paada content yang
dihasilkan?
2. Apakah setiap content memiliki judul dan
penulisannya dapat di detifikasikan dengan baik?
3. Apakah content nya serius atau bercanda?
4. Tanggal berapa content tersebut di publish?
5. Apakah content yang ada masuk dalam kategori
edisi terbaru dan edisi yang sedang eksis?
6. Apakah content yang terbaru?

c. Keterbacaan (readibility)
Readability sebagai sebuah parameter yang
berhubangan dengan kenyataan pada saat dibaca
dan kemudahan pengakses dalam membaca dan
mengerti isi situs tersebut.

d. Kecepatan (speed)
Speed sebagai sebuah parameter yang berhubungan
dengan kecepatan loading sebuah situs/website.
Pengakses cenderung tidak mau menunggu terlalu
lama untuk melihat sebuah situs, sehingga cenderung
malas dan langsung browser mereka pada saat
mereka membuka sebuah situs yang lambat diakses.
Oleh sebab itu, semakin cepat situs itu dalam
melakukan loading time pastinya akan semakin baik.
 e. Teknologi (technology)
Technology sebagai sebuah parameter yang
berhubungan dengan aplikasi yang digunakan dalam
pengembangan website terbaru, misalnya teknologi
yang digunakan dalam segi mendesain website dan
komposisi desain yang dibangun. Dalam hal ini,
compatible dengan berbagai web browser seperti
internet explorer, Mozilla firefox, netscape navigator,
opera, dan sebagainya menjadi poin penting dalam
parameter technology.

2.Evaluasi website

Evaluasi terhadap situs web beserta produknya untuk mengetahui

kegunaan (usability) situs website tersebut bagi user (pengguna). Secara
umu, dalam penilain suatu web mayoritas dilakukan oleh Lembaga
pemeringkatan. Namun demikian,di era teknologi informasi yang semakin
canggih, seorang dapat melakukan pengevaluasian terhadap website
menggunakan mesin pemeringkatan (tools) online sebuah website,
misalnya siterscore, sitebeam, pagerank, nibbler, dll. Dalam hal ini, setiap
mesin pemeringkatan telah dilengkapi dengan parameter-parameter
penilian tertentu.

a. Self-congruity dan flow

b. Seorang desainer multimedia harus benar-benar memahami
elemen terpenting dalam membuat website, yaitu Teknik
merancang tampilan website yag menarik. Di samping itu, seorang
desainer multimedia harus memehami bahwa evaluasi seseorang
atas tampilan desain dipengaruhi oleh reaksi efektif seperti Self-
congruity dan flow
1. Self-congruity
2. Self-congruity mengacu pada kerelasi antara keperibadian
seseorang dengan hal apapun yang dirasakan terhadap sebuah
 produk/jasa bahkan mampu mempengaruhi pandangan
seseorang ke arah positif untuk menjadi predictor terhdapa
cita suatu produk. Oleh sebab itu, seseorang v=cenderung
mengevaluasikan produk atau layanan secara positif ketika
produk atau jasa tersebut memiliki karakteristik yang mirip
dengan kepribadiannya. Keputusan seseorang untuk tetep
menggunakan sebuah system bergantung pada 4 dimensi
memengaruhi keberhasilan suatu website, antara lainestetika
suatu web (visual), konten informasi, navigasi yang sederhana,
dan kemudahan transaksional. Dengan demikian, Self-
congruity
Dianggap sebagai suatu penilaian yang dilakukan seseorang
ketika masuk ke dalam suatu website, dengan melakukan
explorasi terhadap hal-hal yang ditawarkan oleh website
tersebut.

2.Flow
Flow bisa diterjemahkan sebagai sensasi holistik, sehingga seorang memiliki
pengalaman seakan-akan mereka terlibat dalam project website tersebut. System
flow dalam navigasi web dapat tercapai bila user memiliki kemampuan tingkat
mahir, keinginan yang kuat, serta focus yang kuat. Hal tersebut menunjukan
bahwa seorang designer multimedia harus memiliki tujuan dalam merancang
website, sehingga mampu menciptakan pengalaman yang tak terlupakan bagi
seseorang pada saat mengunjungi laman tersebut. Website yang ideal memiliki
karakteristik antara lain, tata letak homepage yang jelas, estetika grafis menarik,
system pencarian serta navigasi yang mudah, kemudahan akses pada halaman
utama, kejelasan pada kategorisasi produk, deksripsi produk yang teperinci
disertai gambar untuk memudahkan perbandingan serta adanya layanan
pelanggan. Dalam hal ini, elemen desain sensorik mampu meningkatkan
pengalaman estetik dan menciptakan hiburan tersendiri bagi seseorang, sehingga
dapat meningkatkan keinginan mereka untuk membeli suatu produk yang
ditawarkan dalam website tersebut.
b.metode Evaluasi yang digunakan
beberapa metode evaluasi yang sering digunakan adalah sb.
1) Menilai Outer Model
Secara mendasar, outer model dapat dinilai dengan cara melihat pada nilai
convergent validity dan composite reliability (rrebilitas komposit). Misalnya
indicator tingkat validitas yang digunakan dapat diketahui jika loading
factor menunjukkan nilai di atas 0,70 tetaoi teteap dikatakan valid jika rule
of thumbs interpretasi nilai lebih dari 0,55. Berdasarkan hasil olah data
yang dilakukan, dapat diketahui semua variable memenuhi nilai convergent
validity dan nilai composite reliability yang disyaratkan. Dalam hal ini,
sebuah website dikatakan memiliki reliability yang baik jika nilai composite
reliability di atas 0,80.
2) Secara mendasar, inner model (model struktual) identic dengan melihat
posisi hubungan antarkonstruk laten dengan melihat hasil estimasi
koefisien parameter dan tingkat signifikansinya. Misalnya, menetapkan nilai
signifikansi sebesar 10% dengan derajat kebebasan (degree of freedom)df =
(n-m-1), dengan n sama dengan jumlah responden yaitu 100, dimana m
sama dengan banyak variable (3), maka kalkulasi pada df =(100-3-1) = 96.
Jika posisi nilai T tabel dengan signifikansi 10% dengan kalkulasi df=96
sehingga dedapatkan nilai akhir 1,660. Dengan demikian, jika nilai T Statistic
lebih besar dari nilai T tabel (T Statistic > T tabel), maka hubungan antar
variable dikatakan signifikan.

c.menentukan nilai rata-rata jawaban Responden

pada dasarnya, menentukan nilai rata-rata jawaban responden terhadap
setiap item pernyataan untuk setiap variable dengan kriteria penilaian
berdasarkan kategori yang disusun dengan interval kelas 0.8. selanjutnya
disusun kriteria penilaian rata-rata jawaban responden yang disajikan pada
sebuah tabel. Berdasarkan jawaban responden atas pernyataan pada kuisioner
evaluasi website yang diberikan, maka diperoleh hasil yang berkaitan dengan
berbagai variabel dalam bentuk tanggapan responden sb.
No Kriteria Keterangan
1 Effectiveness Nilai rata-rata menyatakan kepuasaan terhadap
 efektivitas penggunaan situs web yang dievaluasi.
2 Efficiency Nilai rata-rata menyatakan kepuasaan terhadap
efisiensi penggunaan situs web yang dievaluasi untuk
mengerjakan tugas-tugas dan untuk memperoleh
informasi yang dibuthkan.
3 Satisfaction Nilai rata-rata menyatakan netral terhadap penggunaan
situs web yang dievaluasi. Hal ini berarti responden
tidak menyatakan setuju atau tidak setuju terhadap
kepuasan penggunaan situs web yang bersangkutan.
Hal tersebut bisa dianggap sebuah masukan bagi situs
web yang dievaluasi guna memberikan perhatian
terkait tampilan situs web, jalan nya operasi serta
informasi lainnya.
4 Usability Nilai rata-rata menyatakan setuju bahwa situs web
yang bersangkutan bermanfaat.

RANGKUMAN
1. Di masa sekarang, banyak dijumpai bernagai aplikasi yang dapat digunakan
untuk membuat sebuah media interaktif di antaranya adobe flash, android
studio, construct, Microsoft power point, prezi, maupun unity.
2. Media interaktif adalah suatu media yang lebih menonjol pada produk
serta service digital yang terdapat pada system dengan basis komputer
yang mampu memberikan timbal balik kepada pengguna dengan
memberikan layanan seperti gambar,teks,video maupun audio.
3. Langkah awal yang harus dilakukan sebelum menambahkan image
(gambar) adalah memiliki situs web dengan tema yang menarik agar
menarik perhatian para pengunjung (visitor)
4. Audio bisa berupa efek suara, background music, suara dubbing dari
sebuah karakter, suara-suara alam, ataupun jenis-jenis efek suara yang lain.
5. Pada umumnya, untuk membuat multimedia interaktif dengan tampilan
menarik beserta kemudahan dalam mengubah tampilan layar berkaitan
erat dengan kinerja style CSS.
6. Kualitas sebuah website tergantung kepada pengujian dan pengawasan
terhadap kualitas website itu sendiri.