1 / 32

SMIL ( Synchronized Multimedia Integration Language)

SMIL ( Synchronized Multimedia Integration Language). Yeremia Alfa S., S.Kom. yere.getlife@yahoo.com. Session 1. Pengantar SMIL. Adalah bahasa atau barisan perintah (script) untuk membuat atau menyisipkan konten multimedia ke dalam halaman web. Pengantar SMIL (2).

clea
Download Presentation

SMIL ( Synchronized Multimedia Integration Language)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. SMIL (Synchronized Multimedia Integration Language) Yeremia Alfa S., S.Kom. yere.getlife@yahoo.com

  2. Session 1

  3. Pengantar SMIL • Adalah bahasa atau barisan perintah (script) untuk membuat atau menyisipkan konten multimedia ke dalam halaman web

  4. 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)

  5. 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)

  6. Sistematika Kerja SMIL • Secara skema: Script SMIL (sebagai Controller) File Multimedia Output

  7. 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

  8. SMIL – untuk File MP3 (2) • Lalu dalam Notepad, ketikkan perintah berikut: <smil> <head> </head> <body> <par> <audio src="Alamat Palsu.mp3"/> </par> </body> </smil>

  9. 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

  10. Durasi • Memotong MP3 selama durasi tertentu

  11. Durasi (2) <smil> <head> </head> <body> <par> <audio src="Alamat Palsu.mp3" dur="19"/> </par> </body> </smil>

  12. Menggabungkan 2 file • Tambahkan file MP3 lainnya (selain alamat palsu.mp3) • Kemudia buka Notepad • Lalu ketikkan perintah berikut:

  13. 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>

  14. 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

  15. 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>

  16. Hasil

  17. SMIL untuk Video lebih dari 1 • Tambahkan file video lain ke dalam folder SMIL2 • Kemudian ketik perintah berikut:

  18. <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>

  19. SMIL – untuk file Image • Siapkan beberapa file Image ke dalam folder SMIL3 • Buka Notepad • Kemudian ketik perintah berikut

  20. <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>

  21. Hasil

  22. Menggabungkan File Image dan Audio • Tambahkan 1 file .mp3 ke dalam folder SMIL3 • Kemudian buka notepad • Ketik perintah berikut:

  23. <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>

  24. Session 2

  25. 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.

  26. Animasi Teks • Buka Notepad • Kemudian ketik perintah berikut:

  27. 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:seqrepeatCount="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>

  28. 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

  29. Animasi Gambar • Copy gambar yang dari folder SMIL3 tadi • Buka Notepad • Kemudian ketik perintah berikut:

  30. <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>

  31. Sekian Terima Kasih

More Related