SMIL (Synchronized Multimedia Integration

Transcript SMIL (Synchronized Multimedia Integration

SMIL
(SYNCHRONIZED MULTIMEDIA
INTEGRATION LANGUAGE)
Yeremia Alfa S., S.Kom.
[email protected]
SESSION 1
PENGANTAR SMIL

Adalah bahasa atau barisan perintah (script)
untuk membuat atau menyisipkan konten
multimedia ke dalam halaman web
PENGANTAR SMIL (2)
SMIL dapat digunakan untuk mengatur AudioVideo secara layout ataupun secara kualitas
suara
 SMIL dapat digunakan untuk membuat
presentasi berbasis internet/intranet
 SMIL dapat juga digunakan membuat slide-show
presentations
 Presentasi yang dibangun dengan SMIL dapat
menampung berbagai tipe data(text, video,
audio)

SOFTWARE/ MEDIA YANG DIBUTUHKAN
File Multimedia (sebagai bahan/file yang akan
di-edit)
 Editor: Notepad (untuk menulis script atau
barisan perintah)

Real Time Player (untuk eksekusi)
 Microsoft Internet Explorer (untuk eksekusi)
 Apple Quick Time (untuk eksekusi)

SISTEMATIKA KERJA SMIL

Secara skema:
File Multimedia
Script SMIL (sebagai Controller)
Output
SMIL – UNTUK FILE MP3


Siapkan file mp3, kemudia letakkan dalam satu
folder (satu tempat, misalkan folder “SMIL”)
Tahap ke dua, kita akan membuat baris
perintah/ Script SMIL, caranya buka Notepad
SMIL – UNTUK FILE MP3 (2)

Lalu dalam Notepad, ketikkan perintah berikut:
<smil>
<head>
</head>
<body>
<par>
<audio src="Alamat Palsu.mp3"/>
</par>
</body>
</smil>
SMIL – UNTUK FILE MP3 (3)
Kemudian save script SMIL di atas dengan cara:
 Klik File  Save, akan muncul jendela dialog
simpan
 Pada File Name: namafile.smi (nama file bebas,
dengan ditambahi .smi)
 Pada Save As Type: pilih all file

DURASI

Memotong MP3 selama durasi tertentu
DURASI (2)
<smil>
<head>
</head>
<body>
<par>
<audio src="Alamat Palsu.mp3" dur="19"/>
</par>
</body>
</smil>
MENGGABUNGKAN 2 FILE
Tambahkan file MP3 lainnya (selain alamat
palsu.mp3)
 Kemudia buka Notepad
 Lalu ketikkan perintah berikut:

MENGGABUNGKAN 2 FILE (2)
<smil>
<head>
</head>
<body>
<par dur="4s">
<audio src="Alamat Palsu.mp3" begin="0s" dur="19"/>
<audio src="Helena.mp3" begin="19s" dur="19"/>
</par>
</body>
</smil>
SMIL – UNTUK FILE VIDEO


Siapkan file video, kemudia letakkan dalam satu
folder (satu tempat, misalkan folder “SMIL2”)
Tahap ke dua, kita akan membuat baris
perintah/ Script SMIL, caranya buka Notepad
SMIL – UNTUK FILE VIDEO (2)
<smil>
<head>
<layout>
<root-layout
width="700" height="700"/>
<region id="video1" width="700" height="700" left="0" top="0" />
</layout>
</head>
<body>
<video src="dilema.mp4" region="video1"/>
</body>
</smil>
HASIL
SMIL UNTUK VIDEO LEBIH DARI 1
Tambahkan file video lain ke dalam folder
SMIL2
 Kemudian ketik perintah berikut:

<smil>
<head>
<layout>
<root-layout width="900" height="400"/>
<region id="video1" width="450" height="400" left="0" top="0" />
<region id="video2" width="450" height="400" left="450" top="0" />
</layout>
</head>
<body>
<par dur="4s">
<video src="dilema.mp4" region="video1" begin="0s" dur="19s" repeat="3"/>
<video src="kucing.avi" region="video2" begin="0s" dur="19s" />
</par>
</body>
</smil>
SMIL – UNTUK FILE IMAGE

Siapkan beberapa file Image ke dalam folder
SMIL3
Buka Notepad
 Kemudian ketik perintah berikut

<smil>
<body>
<seq repeatCount="indefinite">
<img src="1.jpg" dur="3s" />
<img src="2.jpg" dur="3s" />
<img src="3.jpg" dur="3s" />
<img src="4.jpg" dur="3s" />
<img src="5.jpg" dur="3s" />
</seq>
</body>
</smil>
HASIL
MENGGABUNGKAN FILE IMAGE DAN
AUDIO
Tambahkan 1 file .mp3 ke dalam folder SMIL3
 Kemudian buka notepad
 Ketik perintah berikut:

<smil>
<body>
<par dur="4s">
<seq repeatCount="indefinite">
<img src="1.jpg" dur="3s" />
<img src="2.jpg" dur="3s" />
<img src="3.jpg" dur="3s" />
<img src="4.jpg" dur="3s" />
<img src="5.jpg" dur="3s" />
</seq>
<audio src="Alamat Palsu.mp3" begin="0s" dur="19"/>
</par>
</body>
</smil>
SESSION 2
MEMBUAT ANIMASI WEB GABUNGAN
IMAGE, TEXT, DAN AUDIO

SMIL selain mampu mengolah file-file yang
kemudian di-play ke dalam media player, juga
mampu membuat animasi untuk web.
ANIMASI TEKS
Buka Notepad
 Kemudian ketik perintah berikut:

ANIMASI TEKS
<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
<?import namespace="t"
implementation="#default#time2">
<style>.t {behavior: url(#default#time2)}</style>
</head>
<body>
<t:seq repeatCount="indefinite">
<h2 class="t" dur="1s">Hai</h2>
<h2 class="t" dur="2s">Aku</h2>
<h2 class="t" dur="3s">Adalah</h2>
</t:seq>
</body>
</html>
ANIMASI TEKS
Setelah itu simpan dengan:
 Pada File Name: namafile.html (nama file bebas,
dengan ditambahi .html)
 Pada Save As Type: pilih all file


Kemudian buka dengan Internet Explorer
ANIMASI GAMBAR
Copy gambar yang dari folder SMIL3 tadi
 Buka Notepad
 Kemudian ketik perintah berikut:

<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
<?import namespace="t" implementation="#default#time2">
<style>.t {behavior: url(#default#time2)}</style>
</head>
<body>
<t:transitionfilter targetelement="keyb" type="clockWipe"
begin="keyb.begin" dur="2s" />
<t:seq repeatCount="indefinite">
<img id="keyb" class="t" src="1.jpg" dur="4s"
width="128" height="107" />
<img id="keyb" class="t" src="2.jpg" dur="4s"
width="128" height="107" />
<img id="keyb" class="t" src="3.jpg" dur="4s"
width="128" height="107" />
</t:seq>
</body>
</html>
SEKIAN TERIMA KASIH