DESAIN MEDIA INTERAKTIF

KELAS 12 MULTIMEDIA
─

PUAD, ST
SMK BBM KANDANGHAUR - INDRAMAYU
Jl. PU Kemped Desa Wirakanan Kec. Kandanghaur Kab. Indramayu
Indramayu, KP 45254
 1

BAB III - STYLE PADA MULTIMEDIA INTERAKTIF

Kompetensi Dasar (SEMESTER I)

3.5 Menerapkan cara penggabungan image, animasi, audio, video dalam sajian
multimedia interaktif berbasis halaman web dan media interaktif ;

4.5 Menggabungkan image, animasi, audio, video dalam sajian multimedia

interaktif berbasis halaman web dan media interaktif ;

3.6 Memahami style pada multimedia interaktif berbasis halaman web dan media
interaktif;

4.6 Membuat style pada multimedia interaktif berbasis halaman web dan media
interaktif .

A. Komponen Pada Multimedia Interaktif Berbasis Halaman Web

1. Unsur Media Interaktif
a. Teks

Terdapat dua jenis teks yang dikenali dalam perangkat lunak Adobe
Flash yaitu Embeded dan Device Font yang terinstall di komputer.

b. Grafik (image)
c. Animasi
d. Audio dan Video

2. Implementasi pada Unsur Media Interaktif

a. Menggabungkan unsur teks

Teks identik dengan simbol berupa medium visual yang digunakan

untuk menjelaskan bahasa lisan.

Setiap karakter merupakan instance name dari suatu simbol dalam

pemberian efek warna sehingga memerlukan effect panel.

1) Menulis dan mengedit dengan teks tool

2) Penggunaan panel
 2

Panel yang digunakan untuk menggabungkan unsur teks

adalah:

No. Panel Keterangan

1 panel character dapat digunakan untuk menentukan

jenis, ukuran, warna dan lain-lain

2 panel dapat digunakan untuk mengatur

paragraph paragrap

3 panel text digunakan untuk membuat teks

option statis, form isian dan link tulisan
dengan target alamat URL
 3

3) Penggunaan jenis teks

a) static text

secara mendasar teks jenis ini bersifat statis atau hanya

dapat dilihat saja.

b) dynamic text

digunakan untuk membuat score atau hitungan seperti

countdown.

c) input text

digunakan untuk membuat form data atau isian dalam

bentuk teks dan angka.

b. Menggabungkan unsur gambar

Salah satu faktor paling menonjol pada situs web adalah penggunaan
gambar yang tepat dan proporsional baik pada background maupun
foreground.

Ada dua cara dalam memasukkan gambar, diantaranya:

1) Import to Library
2) Import to Stage

c. Menggabungkan unsur animasi

d. Menggabungkan unsur audio

Terdapat dua metode dalam memasukkan audio, diantaranya:

1) Memasukkan suara langsung ke dalam apalikasi

 4

2) Membuka file suara dari luar aplikasi (embedding)

e. Menggabungkan unsur video

Syarat utama yang harus dipenuhi adalah format video bisa dikenali
oleh flash player.

Jenis/format video tersebut diantaranya: AVI, FLV, MP4 dan MPG.

Berikut adalah coding untuk menjalankan video:

import flash.event.MouseEvent;

altply_play.addEventListener(MouseEvent.CLICK, klik_vid);
altply_stop.addEventListener(MouseEvent.CLICK, klik_vid);

function klik_vi(e:MouseEvent):void{
var nm_tmbPlay:String = e.currentTarget.name;
if(nm_tmbPlay == “altply_play”){
myvid.play();
altply_play.visible = false;
altply_stop.visible = true;
}
if(nm_tmbPlay == “altply_stop”){
myvid.stop();
altply_play.visible = trur;
altply_stop.visible = false;
}
}

3. Kompilasi Gambar, Animasi, Audio dan Video

Secara mendasar perintah export tidak akan menyimpan prosedur setting

secara terpisah pada setiap file seperti halnya jenis perintah publish.
 5

B. Style Pada Multimedia Interaktif

Perkembangan teknologi membuat segalanya menjadi dinamis dan efesien, seperti
penggunaan bidang multimedia interaktif dalam style CSS (Cascading Style Sheet).

Contoh CSS:

Penejalasan coding CSS di atas:

coding h1 merupakan selector (selector adalah cara untuk menghubungkan setiap kode CSS
dengan elemen HTML yang akan diberikan style).

coding color:#333; dan font-size:65pixel; merupakan declaration (Declarator

merupakan perintah untuk membuat tampilan web browser pada sebuah selector yang sesuai
dengan declaration).

coding {color:#333;font-size:65pixel;} merupakan declaration block.

coding color: dan font-size: merupakan property.

coding #333; dan 65pixel; merupakan nilai value.

1. Format Style pada Teks

CSS juga diterapkan pada elemen-elemen HTML multimedia diantaranya gambar

(image), video dan audio.

Nama CSS didapat dari fakta setiap deklarasi style yang berbeda dapat diletakkan
secara berurutan yang kemudian membentuk hubungan parent-child pada setiap
style.

a. Properti CSS
1) color
2) direction
3) letter-spacing
4) line-height
5) text-align
 6

6) text-decoration
7) text-indent
8) text-shadow
9) text-transform
10) unicode-bidi
11) vertical-align
12) white-space
13) word-space

b. Bentuk-bentuk Pengaturan Style

Beberapa pengaturan style pada teks adalah:

1) warna teks (color)

pengaturan warna teks menjadi tiga, diantaranya:

- nilai HEX
- nilai RGB
- nilai warna langsung (live)

bentuk format penulisannya adalah: selector {warna:nilai warna;}

contoh pemberian warna kuning pada teks :

<!DOCTYPE html>
<html>

<head>
<title> membuat warna dengan properti color </title>
<style>
.hex{
color: red;
}
.rgb{
color: rgb(0,255,0);
}
.hsl{
color: hsl(240,100%,50%);
}
</style>
</head>

<body>
<div class="hex"> Huruf pada Kalimat ini Akan Berwarna
Merah </div>
<div class="rgb"> Sedangkan pada Kalimat kedua ini Akan
Berwarna Hijau </div>
<div class="hsl"> dan Kalimat yang Terakhir ini Akan
Berwarna Biru </div>
 7

</body>

</html>

2) spasi antar karakter (word letter spacing)

untuk memberikan jarak antar huruf atau karakter.

contoh penulisannya:
<!DOCTYPE html>
<html>

<head>
<title> contoh properti letter-spacing </title>
<style>
.normal{
letter-spacing: normal;
}
.px{
letter-spacing: 5px;
}
</style>
</head>

<body>
<p class="normal">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<p class="px">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</body>

</html>

3) bentuk teks dekorasi (decoration)

untuk mengatur bentuk huruf atau karakter.

contoh penulisannya:
<!DOCTYPE html>
 8

<html>

<head>
<title> contoh properti text-decoration </title>
<style>
h1{
text-decoration: line-through solid red;
}
h2{
text-decoration: underline overline;
}
a{
color: #03c;
text-decoration: none;
}
</style>
</head>

<body>
<h1> Gotutorid.com </h1>
<h2> Gotutorid.com </h2>
<a href=""> klik disini </a>
</body>

</html>

4) antar kata (word spacing)

untuk memberikan jarak antar kata atau huruf.

contoh penulisannya:
<!DOCTYPE html>
<html>

<head>
<title> contoh properti word-spacing </title>
<style>
.normal{
word-spacing: normal;
}
.px{
word-spacing: 10px;
}
.em{
word-spacing: 1em;
}
</style>
</head>

<body>
<p class="normal"> contoh word-spacing dengan nilai
normal </p>
<p class="px"> contoh word-spacing dengan nilai pixel
</p>
<p class="em"> contoh word-spacing dengan nilai em </p>
</body>
 9

</html>

5) jarak identasi paragraf (text indent)

untuk pengaturan jarak identasi paragraf.

contoh penulisannya:
<!DOCTYPE html>
<html>

<head>
<title> contoh properti text-indent </title>
<style>
.px{
text-indent: 50px;
}
.persen{
text-indent: 2%;
}
.initial{
text-indent: initial;
}
</style>
</head>

<body>
<p class="px">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<p class="persen">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<p class="initial">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</body>

</html>
 10

6) posisi huruf besar dan kecil (text transform)

untuk merubah huruf menjadi kapital (besar) semua atau kecil semua
atau huruf besar pada awal kata.

contoh penulisannya:
<!DOCTYPE html>
<html>

<head>
<title> contoh properti text-transform </title>
<style>
.up{
text-transform: Uppercase;
}
.low{
text-transform: Lowercase;
}
.kapital{
text-transform: Capitalize;
}
</style>
</head>

<body>
<p class="up"> Huruf pada kalimat ini akan menjadi huruf
besar semua </p>
<p class="low"> HURUF PADA KALIMAT INI AKAN MENJADI
HURUF KECIL SEMUA </p>
<p class="kapital"> huruf pertama pada tiap kata akan
menjadi huruf Kapital </p>
</body>

</html>

7) efek bayangan (shadow effect) dan teks bayangan (shadow text)

untuk mengatur efek bayangan dalam teks bayangan.

contoh penulisannya:
<!DOCTYPE html>
<html>

<head>
<title> contoh properti text-shadow </title>
<style>
.bayangan1{
text-shadow: 3px 3px 8px blue;
 11

}
.bayangan2{
text-shadow: 3px 3px #FF0000;
}
</style>
</head>

<body>
<h1 class="bayangan1"> Gotutorid.com </h1>
<h1 class="bayangan2"> Gotutorid.com </h1>
</body>

</html>

8) rata teks (text alignment)

untuk mengatur perataan teks, seperti rata kanan, rata kiri, rata
kanan-kiri atau rata tengah.

contoh penulisannya:
<!DOCTYPE html>
<html>

<head>
<title> contoh properti text-align </title>
<style>
.kiri{
text-align: left;
}
.kanan{
text-align: right;
}
.tengah{
text-align: center;
}
</style>
</head>

<body>
<p class="kiri">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<p class="kanan">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<p class="tengah">
 12

Lorem ipsum dolor sit amet, consectetur adipisicing

elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</body>

</html>

2. Format Style pada Tampilan Gambar

Dengan adanya CSS3 seorang desainer dimudahkan dalam membuat tampilan

website-nya menjadi kompatibel pada smartphone dengan dukungan fitur query.

a. Jenis Format Pemanggilan Gambar

Pemanggilan gambar dikategorikan menjadi dua, yaitu:

1) pemanggilan secara inline

<img src=’nm-fileImg’ width=’lebarImg’ height=’tinggiImg’
alt=’kata-kunciImg’ title=’judlImg’ border=’garistebal’/>

2) pemanggilan dengan metode embed

<!DOCTYPE html>
<html>

<head>
<title> Tampilan gambar CSS </title>
<style>
Img {Margin-top:12px;
Float: left;
Clear: both;
width: 100px;
height: 100px;
</style>
</head>

<body>
Tampilan image (gambar) CSS </br>
<img scr=’jagung.jpg’>
</body>

</html>

b. Pengaturan Style pada Latar Belakang

 13

Penambahan gambar pada latar belakang (background) menggunakan dua

jenis properti, diantaranya:

1) latar belakang (background)

2) gambar latar belakang (background-image)

Contoh penulisan kode skrip penerapan gambar dalam.

<!DOCTYPE html>
<html>

<head>
<title> Latar Belakang Gambar </title>
<style type=’text/css’>
#awal1 {bacground-image:url
(fullkom.jpg);height:30px;width:500px;}
</style>
</head>
<body>
<div id=’awal’>
</div)
</body>

</html>

Supaya terlihat rapi dapat menggunakan background-repeat.

Terdapat empat nilai dalam properti background-repeat, diantaranya:

1) no-repeat

untuk menghilangkan per-ulangan

2) repeat

untuk memberikan per-ulangan

3) repeat-x

untuk memberikan per-ulangan pada sumbu x (horisontal)

4) repeat-y

untuk memberikan per-ulangan pada sumbu y (vertikal)

c. Penggunaan Style untuk Menyisipkan Gambar

Secara umum, gambar dapat dipasang dengan menggunakan metode HTML

dengan menggunakan style CSS.

Contoh penulisan kode skrip penerapan gambar dalam.

<!DOCTYPE html>
<html>
 14

<head>
<title> Proses Menyisipkan Gambar Dalam Bentuk CSS </title>
<style>
#grsatasa {background-image:url(fulkom.jpg);
bacground-repeat:no-repeat;
bacground-position:left-top;
padding-top:40px;
margin-bottom:50px;
#grsatasb {background-image:url(fulkom.jpg);
bacground-repeat:no-repeat;
bacground-position:left-top;
padding-top:40px;
</style>
</head>
<body>
<div id=’grsatasa’> Dalam membuat...
</div)
<div id=’grsatasb’> Dalam pembuatan...
</div)
</body>

</html>

3. Format Style pada Tampilan Audio

Elemen-elemen yang digunakan sebagai berikut:

a. Elemen tag <bgsound>

Elemen tag dengan memakai atribut “scr”.

b. Elemen <embed>

Elemen embed membutuhkan atribut “scr”

Contoh:
<embed scr=sulingsunda.wav></embed>

4. Format Style pada Tampilan Video

Salah satu contoh yang paling mudah dalam style jenis ini adalah video embed pada
Youtube.
 15

==========================================================================

sumber:

Buku Desain Media Interaktif SMK/MAK Kelas XII

https://www.gotutorid.com/css/css-teks/#6