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

Presentasi berjudul: "SMIL (S YNCHRONIZED M ULTIMEDIA I NTEGRATION L ANGUAGE ) Yeremia Alfa S., S.Kom."— Transcript presentasi:

1 SMIL (S YNCHRONIZED M ULTIMEDIA I NTEGRATION L ANGUAGE ) Yeremia Alfa S., S.Kom. yere.getlife@yahoo.com

2 S ESSION 1

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

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

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

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

7 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

8 SMIL – UNTUK F ILE MP3 (2) Lalu dalam Notepad, ketikkan perintah berikut:

9 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

10 D URASI Memotong MP3 selama durasi tertentu

11 D URASI (2)

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

13 M ENGGABUNGKAN 2 FILE (2)

14 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

15 SMIL – UNTUK F ILE V IDEO (2)

16 H ASIL

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

18

19

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

21

22 H ASIL

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

24

25 S ESSION 2

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

27 A NIMASI T EKS Buka Notepad Kemudian ketik perintah berikut:

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

29 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

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

31 .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" />

32 S EKIAN T ERIMA K ASIH