SMIL (Synchronized Multimedia Integration
Download
Report
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