smil ( synchronized multimedia integration language)
DESCRIPTION
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). - PowerPoint PPT PresentationTRANSCRIPT
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 Audio-Video 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)
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 (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>
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>
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>
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<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>