SMIL (S YNCHRONIZED M ULTIMEDIA I NTEGRATION L ANGUAGE ) Yeremia Alfa S., S.Kom.

S ESSION 1

P ENGANTAR SMIL Adalah bahasa atau barisan perintah (script) untuk membuat atau menyisipkan konten multimedia ke dalam halaman web

P ENGANTAR 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)

S OFTWARE / 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)

S ISTEMATIKA K ERJA SMIL Secara skema: File Multimedia Script SMIL (sebagai Controller) Output

SMIL – UNTUK F ILE 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 F ILE MP3 (2) Lalu dalam Notepad, ketikkan perintah berikut:

SMIL – UNTUK F ILE 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

D URASI Memotong MP3 selama durasi tertentu

D URASI (2)

M ENGGABUNGKAN 2 FILE Tambahkan file MP3 lainnya (selain alamat palsu.mp3) Kemudia buka Notepad Lalu ketikkan perintah berikut:

M ENGGABUNGKAN 2 FILE (2)

SMIL – UNTUK F ILE V IDEO 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 F ILE V IDEO (2)

H ASIL

SMIL UNTUK V IDEO LEBIH DARI 1 Tambahkan file video lain ke dalam folder SMIL2 Kemudian ketik perintah berikut:

SMIL – UNTUK FILE I MAGE Siapkan beberapa file Image ke dalam folder SMIL3 Buka Notepad Kemudian ketik perintah berikut

H ASIL

M ENGGABUNGKAN F ILE I MAGE DAN A UDIO Tambahkan 1 file.mp3 ke dalam folder SMIL3 Kemudian buka notepad Ketik perintah berikut:

S ESSION 2

M EMBUAT A NIMASI W EB G ABUNGAN I MAGE, T EXT, DAN A UDIO SMIL selain mampu mengolah file-file yang kemudian di-play ke dalam media player, juga mampu membuat animasi untuk web.

A NIMASI T EKS Buka Notepad Kemudian ketik perintah berikut:

A NIMASI T EKS.t {behavior: url(#default#time2)} Hai Aku Adalah

A NIMASI T EKS 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

A NIMASI G AMBAR Copy gambar yang dari folder SMIL3 tadi Buka Notepad Kemudian ketik perintah berikut:

.t {behavior: url(#default#time2)} <t:transitionfilter targetelement="keyb" type="clockWipe" begin="keyb.begin" dur="2s" /> <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" />

S EKIAN T ERIMA K ASIH