SMIL ( Synchronized Multimedia Integration Language)

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

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>

SMIL UNTUK VIDEO LEBIH DARI 1

Tambahkan file video lain ke dalam folder SMIL2

Kemudian ketik perintah berikut:

SMIL – UNTUK FILE IMAGE

Siapkan beberapa file Image ke dalam folder SMIL3

Buka Notepad Kemudian ketik perintah berikut

MENGGABUNGKAN FILE IMAGE DAN AUDIO

Tambahkan 1 file .mp3 ke dalam folder SMIL3 Kemudian buka notepad Ketik perintah berikut:

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

SMIL ( Synchronized Multimedia Integration Language)

Documents

Transcript of SMIL ( Synchronized Multimedia Integration Language)