Anda di halaman 1dari 38

MODUL PRAKTIKUM

MULTIMEDIA

Tim Penyusun:
Dosen Teknik Informatika

JURUSAN TEKNIK INFORMATIKA


FAKULTAS TEKNIK UNIVERSITAS
PALANGKARAYA 2019
TATA TERTIB DAN TATA LAKSANA
PRAKTIKUM MULTIMEDIA
JURUSAN/PROGRAM STUDI TEKNIK
INFORMATIKA FAKULTAS TEKNIK UPR

TATA TERTIB
1. Praktikan WAJIB mengikuti semua modul praktikum.
2. Praktikan hanya boleh tidak mengikuti praktikum 1 (satu) kali DENGAN ATAU
TANPA surat izin dari jumlah pertemuan praktikum.
3. Praktikan yang berhalangan mengikuti praktikum, diwajibkan melaporkan ke
dosen praktikum untuk menentukan jadwal praktikum sebagai pengganti jadwal
yang berhalangan.
4. Praktikan yang lebih dari 1 (satu) kali tidak mengikuti praktikum, tidak
diperbolehkan untuk mengikuti praktikum untuk modul-modul praktikum
selanjutnya dan NILAI AKHIR PRAKTIKUM adalah NOL.
5. Praktikan wajib hadir 15 menit sebelum praktikum dimulai.
6. Tidak diperbolehkan saling bekerja sama.
7. Dilarang menggunakan kaos oblong dan sandal jepit selama praktikum. Bagi
yang melanggar poin ini, tidak diperbolehkan mengikuti praktikum.

TATA LAKSANA
1. Sebelum praktikum dimulai, setiap praktikan wajib mengumpulkan LAPORAN
RENCANA PRAKTIKUM (Tulis Tangan) dan LAPORAN HASIL
PRAKTIKUM modul sebelumnya.
2. Jika praktikan tidak melaksanakan tata laksana poin 1, maka TIDAK
DIPERBOLEHKAN MENGIKUTI PRAKTIKUM.
3. Setiap modul praktikum, akan dilakukan Pre-test.
4. Pada saat praktikum hanya membawa alat tulis, modul dan Laporan. HP, Laptop
& USB di simpan dan tas letakan didepan.
5. Pada saat praktikum tidak diijinkan mengakses Internet.
6. Format laporan meliputi:

Laporan Rencana Praktikum :

 Format A4
 Tulis Tangan.
 Tujuan Praktikum dari modul yang akan dilaksanakan
 Hal-hal yang akan dilakukan selama praktikum.
Laporan Hasil Praktikum :

 Halaman Depan
 Bab I. Tujuandan Landasan Teori
 Bab II. Pembahasan
 Bab III. Kesimpulan
 Daftar Pustaka
 Lampiran (disertai laporan rencana praktikum)

1
7. Format Penulisan Laporan Hasil Praktikum
 Spasi : 1,5
 Font : Times New Roman
 Font Size : 12
 Margins : Top 3, Left 4, Right 3, Bottom 4
 Kertas : A4
8. Penilaian Laporan Hasil Praktikum :

 Bab I. Tujuan dan Landasan Teori Nilai 10


 Bab II. Pembahasan Nilai 60
 Bab III. Kesimpulan Nilai 20
 Daftar Pustaka Nilai 5
 Lampiran Nilai 5
Total 100

9. Praktikan yang mengabaikan format penulisan poin 5, nilai akan dikurangi 5


setiap kesalahan.

10. Penilaian Akhir Praktikum :


 Pre-Test : 10%
 Praktikum : 50%
 Laporan Praktikum : 15%
 Responsi: 25%
Total 100%

11. Penilaian Akhir Mata Kuliah:


 Kuliah, meliputi:
Tugas : 20%
UTS : 30%
Praktikum : 50%
Total : 50%
 UAS : 50%
Total 100%

2
Pratikum Multimedia 3d Animasi Modul I
Modul 1. Hero Sword

A. Modeling
Proses pembuatan objek 3d dimana proses ini dimulai dengan membuat objek
sederhana Cylinder (kubus/kotak) sebagai objek awal. Dimana objek awal akan di edit
sedemikian rupa sehingga menjadi objek 3d yang berbeda sama sekali dari objek
awalnya.
Mode :
1. Object Mode
2. Edit Mode

Tools :

1. Extrude
2. Bevel
3. Inset faces
4. Loop cut

Langkah Kerja :

1. Buatlah objek baru Cylinder, ubah nilai vertices menjadi 6 sehingga Cylinder akan
terlihat seperti pada gambar dibawah ini:

Gambar 1.1. Objek dasar pemodelan objek 3d Hero Sword

2. Setelah membuat objek Cylinder saatnya untuk mengedit bentuk objek awal
tersebut. Untuk mengedit bentuk objek 3d masuk lah kedalam mode Edit Mode.

3
Gunakan Scale pada sumbu untuk membentuk objek Cylinder seperti terlihat
pada gambar. Objek ini disebut Cross guard.

Gambar 1.2. Objek Cross guard

3. Pada bagian bawah objek cross guard bentuklah Face objek seperti pada gambar
dibawah dengan mengunakan tool extrude dan inset faces sehingga terbentuklah
grip dari pedangnya.

Gambar 1.3. Cross guard dan


Grip Modeling cross guard dan grip pedang selesai.

4
4. Langkah berikutnya adalah membuat blade pedangnya. Tool pemodelan sama
dengan membuat objek grip. Bentuklah objek 3d seperti contoh dibawah ini.

Gambar 1.4. Proses pembuatan Blade

5
Gambar 1.5. Extrude dua kali untuk membuat ujung blade yag runcing
Merge semua vertice pada ujung blade sehingga menjadi ujung yang runcing.
Lakukan merge vertices juga pada sisi bilah pedang yang tajam. Pilih semua
Vertices klik kanan lalu pilih merge.

Gambar 1.6. Merge vertices pada ujung blade

5. Kembali ke grip pedang, Grip dibuat lebih detail dengan cara buatlah edge baru
dengan tool Loop cut seperti terlihat pada gambar dibawah. Lalu seleksi face dan
gunakan extrude along normal untuk memberikan detail pada grip pedang.

Gambar 1.7. Detail grip

Tambahkan detail cross guard dengan menambahkan objek 3d baru Ico sphere
seperti terlihat pada gambar. Tambahkan Ico sphere pada kedua sisi cross guard.

6
Gambar 1.8. Ico sphere pada objek cross guard.

B. Texturing
Proses ini merupakan proses dimana objek 3d yang telah jadi diberikan
pewarnaan sehingga objek 3d akan terlihat lebih menarik dan nyata.

Langkah kerja :

1. Klik tab Material pada sisi kanan UI Blender, klik New untuk membuat slot
material.

Gambar 1.9. Tampilan tab Material dan New material.

2. Tambah slot material dengan menekan ikon +, buatlah total 6 slot material lalu
tambah material dengan menekan tombol New untuk setiap slot material yang
dibuat. Kemudian rename setiap slot dengan klik kiri ganda pada nama slot, beri
nama Grey, Yellow, Dark, Green, Blue dan Brown pada 6 slot material tersebut.

7
Gambar 1.10. Beberapa slot material yang digunakan pada objek pedang

3. Texture akan dibuat sederhana saja, hanya mengunakan warna. Pilih salah satu
slot material lalu klik kolom pada base color untuk memilih warna sesuai nama
slot material.

Gambar. 1.11. Memberikan warna pada slot material

4. Ubah tampilan viewport menjadi Lookdev (Z pada keyboard). Pilih face objek
yang ingin di tempelkan material. Lihat contoh pada gambar. Seleksi semua face
Ico sphere dan assign material blue pada ico sphere.

8
Gambar 1.12.

Lakukan hal yang sama pada semua face pedang untuk menempelkan material
warnanya. Hasil dapat dilihat pada gamba dibawah.

Gambar 1.13. Objek pedang setelah di berikan Material warna.

C. Penilaian Praktikum
- Modeling = 70
- Material desain = 30

9
Pratikum Multimedia 3d Animasi Modul II
Modul 2. Botol

A. Modeling
Pembuatan botol dimulai dengan objek dasar sebuah Cube. Cube akan
dimodifikasi dengan pemodelan polygonal modeling/face modeling. Dengan
mentranformasi sub objek vertices, edge dan face ke bentuk yang diinginkan.
Mode :
1. Object Mode
2. Edit Mode

Tools :

1. Extrude
2. Loop cut

Langkah kerja :
1. Buatlah objek Cube lalu gunakan tool scale untuk merubah bentuk cube agar
terlihat seperti pada gambar dibawah.

Gambar 2.1. Cube objek

10
2. Pindah mode menjadi edit mode, berikan modifier subdivision surface sehingga
objek cube akan berubah menjadi seperti pada gambar dibawah.

Gambar 2.2. Cube setelah diberikan modifier subdivision surface

3. Buatlah loop cut pada objek cube seperti pada gambar.

Gambar 2.3.

Tambahkan beberapa loop cut pada bidang vertical dan bentuklah edge baru agar
tampak seperti pada gambar.

11
Gambar 2.4. Edge baru pada objek 3d

Hapus Face pada dua sisi objek, sehingga akan tercipta sebuah lubang seperti
terlihat pada gambar.

Gambar 2.5. Pembuatan Lubang pada objek 3d

Seleksi edge pada setiap lubang, klik kanan dan pilih Bridge edge loop sehingga
objek 3d sekarang akan terlihat seperti pada gambar.

12
Gambar 2.6. Penambahan Face pada objek handle botol

4. Atur vertices pada bagian atas objek, bentuklah agar terlihat seperti pada
gambar.

Gambar 2.7. Pemodelan bagian atas objek

13
Buatlah beberapa loop cut pada pegangan botol dan bentuklah pegangan botol
agar mengecil seperti pada gambar.

Gambar 2.8. Pembuatan detail pada handle botol

5. Pada ujung objek buatlah extrude dan beberapa Loop cut agar terbentuk seperti
pada gambar.

Gambar 2.9. Pemodelan leher botol

6. Buatlah objek baru pada object mode yaitu Cylinder, atur scale-nya sehingga
seperti tutup botol. Lalu pilih Cylinder tersebut dan pindah kembali ke edit mode.
Berikan bevel pada semua edge di ujung atas objek tutup botol.

14
Gambar 2.10. Bevel pada objek tutup botol (Cylinder)

Gambar 2.10. Hasil final proses modeling

7. Beri warna pada objek botol dan tutupnya.

D. Penilaian Praktikum
- Modeling = 80
- Material desain = 20

15
Modul III
Video Editing – Stop Motion

A. Tujuan Praktikum
Pada tujuan praktikum multimedia tentang dasar-dasar video editing ini
bertujuan :
1. Mahasiswa dapat mengenal area kerja Video Editing, khususnya
Adobe Premeire.
2. Mahasiswa dapat membuat slide tampilan transisi yang menarik
dengan effect video transitions.
3. Mahasiswa dapat menerapkan penggunaan title dan audio dengan
menggunkan title premiere dan effects audio transitions.
4. Mahasiswa dapat menerapkan tool dan icon pada clip workspace yang
terdapat pada Adobe Premiere.

B. Landasan Teori
Adobe premiere adalah salah satu software yang bisa gunakan
untuk menggabungkan beberapa video, gambar, suara yang nantinya
menjadi video baru. Dalam adobe premiere juga tersedia banyak fitur yang
bisa gunakan untuk mendukung dalam penyuntingan video yang dibuat.
Adebe Premeire adalah salah satu software yang popular dan di gunakan
secara luas dalam pengeditan video.
Pada dasarnya terdapat dua jenis video dalam layar komputer, yaitu:
video
analog dan video digital.
• Video Analog merupakan produk dari industri pertelevisian dan oleh
sebab itu dijadikan sebagai standar televisi Contohnya adalah:
NTSC, PAL, dan SECAM.
• Video Digital adalah produk dari industri komputer dan oleh sebab itu
dijadikan standar data digital. Contohnya adalah: AVI, MPEG, SWF,
3GP, FLV, MOV dsb.

16
Jalankan program Adobe Premiere Pro CS 3 (Klik Star → Program
→ Adobe Premiere), Aplikasi akan menanyakan kepada anda apakah akan
membuka file yang telah ada atau membuat file baru untuk praktikum ini
tentu saja dengan membuat file baru.

(Jendela opsi memulai area kerja premiere)

(Setting custum project)

17
Dan selanjutnya muncul windows dengan nama New Project klik pada tab
Custom Setting.

(Jendela custom setting project)

Pada frame general, anda akan membuat file video lebih baik
praktikum memilih :
- Editing mode video for windows,
- Time base 25 frame/second,
Pada frame video kita isikan :
- Frame size 720h : 576v (dengan perbandingan default 4:3)
- Frame rate : 25 fps timecode
- Pixel aspect ratio : D1/DV PAL (1.067) (Standar video di indonesia)
Pada Frame audio kita isikan :
- Sample rate 44100 Hz (standar audio quality)
- Display format audio sample

Dan apabila diperlukan praktikan dapat menyimpan settingan ini anda


tekan tombol save preset, isikan nama dan decristion yang anda inginkan,
misal : “Setting Video Praktikum” dan secara otomatis settingan tersebut kan
terlihat pada tab Load Preset, maksud dan tujuannya menyimpan setting ini
adalah dapat digunakan lagi di praktikum selanjutnya. Berikutnya simpan File

18
Project (Contoh : Modul III) di drive komputer yang dirasa memiliki space
cukup besar untuk menentukan lokasi file project anda.

(Jendela kerja adobe premeire pro SC 3)

Project windows (jendela workspace) terdiri dari 3 windows utama :


1. Project windows, merupakan tempat menyimpan file project.
2. Monitor windows, merupakan tempat melihat video yang anda edit pada
timeline.
3. Timeline windows, tempat anda melakukan proses editing.

Pada praktikum ini kali ini anda akan di berikan latihan dalam
membuat video slow motion dimana terdapat gambar-gambar seorang
yang menunggangi kuda akan di buat menjadi sebuah seolah-olah gambar
bergerak. Video ini menerapkan video transtations berupa cross dossolve
dan audio transtations crossfade, volume dan lainnya. Di tambahkan juga
subtitle untuk memperjelas tujuan video.

C. Persiapan
Format video dan import data :
1. Jalankan adobe premiere pro, pilih preset Video PAL yang telah
dibuat sebelumnya (kalau belum buat dulu, materi landasan teori).

19
Selanjutnya tentukan lokasi folder dan file project dari video yang
telah di siapkan.
2. Import data (footage) file, klik menu File – Import (Ctrl + I)

Materi praktikum :
1. Gunakan file foto / gambar untuk membuat slide minimal 16 gambar
tentukan juga audio yang di perlukan untuk membuat video ber’audio ini.
2. Gunakan sampel gambar dan audio yang ada di komputer )sebagai bahan
praktikum) untuk di gunakan sebagai suara latar video yang akan di buat.

Praktikum

1. Import file
Masukan materi yang digunakan untuk editing video ke dalam file project.

(Import gambar, audio ke dalam file project)

2. Import file project ke dalam timeline


Tahap simpelnya disini gunakan teknik Drag dan Drop file ke dalam
timeline editor, masukan gambar pada channel video 1 dan audio di
channel audio 1, selanjutnya gambar yang sudah anda pindahkan pada
timeline klik kanan dan pilih scale to frame size. Lihat monitor preview,

20
anda sudah dapat mengarahkan redline timeline ke awal video dan tekan
space (play di monitor) untuk melihat rancangan awal video anda.

(Susunan video dan audio) seperti di atas

3. Berikan effects video transitions


Supaya video terlihat bagus dan hidup maka tambahkan dengan effects
video transitions (pilih effect – video transitions – dissolve – cross
dissolve) kemudian drag dan drop diantara timeline gambar dari awal
hingga akhir video. Gunakan ragam macam transisi yang di perlukan
dalam video anda, sampel plugins defauld yang sudah tersedia di
adobe premiere.

21
4. Title (makrup) video
Tentu untuk memperjelas video ini di perlukan sebuah informasi mengenai
apa dan dan tentang apa video ini. Berikan kalimat pada video caranya,
klik file – new title atau dengan shorcut F9 sehingga nanti akan tampil di
layar sebuah jendela baru di title, atur konfigurasi title video anda jika
sudah selesai tutup saja jendela title kemudian simpan title anda di folder
project video yang anda buat dan berikan nama, setelah itu file title
tersebut akan masuk ke dalam file material project, drag dan drop file title
tersebut dalam timeline pada channel video 3, berikan transisi title sebagai
sentuhan akhir.

22
5. Setting timeline audio

23
Modul IV
Video Editing – Color Key

A. TujuanPraktikum
Padakegiatanpraktikum multimedia tentangdasar-dasar video editing,
bertujuan :
1. Mahasiswadapatmengenal area kerja video editing,
khususnyaAdobe Premiere.
2. Mahasiswadapatmenerapkanpenggunaan videoEfeect keying,
Color Key.
3. Mahasiswadapatmenerapkanpenggunaaan audio
denganmenggunakanlow pass.
4. Mahasiswadapatmenerapkan tool dan icon pada clip video yang
terdapatpadaAdobe Premiere.

B. LandasanTeori

C. Persiapan
Format video dan Import data :
1. Panggilpremiere pro CS 3pilihpreset VCD PAL, lalutentukanlokasi
folder dan file project dari video yang telahdisiapkan.
2. Import data file, klik menu file → import (Ctrl + I).

D. Praktikum
1. Buat Project Video
Setting terlebihdahulu new project adobe premiere
sebelummemulaipengeditan video.

24
(Set Default Standar PAL)

(Customize Project)

2. Import File
Masukanmateri yang di gunakanuntuk editing video kedalam file project.

25
(Import Video)

(Import video, kedalam file project)

3. Import file project kedalam timeline


Drag dan drop file video (virtual TV studio di channel
1)danTicTocMusik di channel video 2).

4. Tentukan effects video dan setting


Padapraktikum kali inikitamenggunakanefek keying (color key)(Pilih
effects → keying → color key)selanjutnyakita drug kechanel video 1
makaanaktampil :

26
(Tampilansaatkita drug video ke timeline)

Selanjutnyakitakan setting pengaturanpadacolor key :


- Color keykitaberikanwarnabirusepertiwarna yang adapada video
sehinggakitabisamenghilangkanwarna yang sama.
- Colortolerancekitaberikan135ataubisadi
ubahsesuaidengankebutuansampai background
warnabirumenghilang.
Setelahselesaimakahasilnyaakanberubahsepertiini :

27
5. Rendering file
Koreksilagi video anda, putar file project preview danamatiapakahanda
rasa adakomponen yang kurang yang belumandasisipkan.
Jikasudahtepatmakalangsung di render pilihfile→ Export →
Movielakukan setting sekalilagiapabila setting render video
bergantijikasemuasudah OKE maka SAVE.

Praktikum Multimedia Modul V


ANIMASI SEDERHANA FLASH

I. TUJUAN
Setelah menyelesaikan modul ini, mahasiswa diharapkan mampu membuat
animasi sederhana.

II. DASAR TEORI


Flash dimulai sebagai alat bantu animasi web dan masih membekas
sebagai satu yang popular di pasaran. Pada bagian ini beberapa teknik esensial
untuk membuat animasi sederhana menggunakan Flash. Animasinya sendiri
sangat jelas. Hal pertama yang dilakukan adalah menggambar sekumpulan kotak
dan kemudian menambahkan teks pada kotak tersebut dengan sedemikian rupa
sehingga mudah dilihat pembaca.
Berikut ini merupakan beberapa hal yang perlu diketahui dalam membuat
animasi sederhana ini, yaitu:
1. Layer dan Timeline
Segala sesuatu yang diletakkan pada stage berada pada suatu layer dari
timeline. Layer digunakan untuk menentukan elemen mana yan akan muncul pada
foreground dan background, membuat urutan pemisahan visual untuk objek pada
stage.
Ketika satu layer digunakan untuk gambar statik, animasi komputer yang
dibantu oleh komputer memerlukan layer sendiri. Untuk membuat animasi yang
banyak maka diperlukan layer yang banyak pula. Layer terlihat di atas stage pada
window dokumen utama flashpada timeline.

28
Timeline biasanya actually terletak pada panel tersendiri, yang terletak pada
bagian atas dokumen utama window secara default. Posisi default dari panel dapat
diubah. Pada bagian ini kotak dibuat.
2. Keyframes and Tweening
Langkah awal yang dilakukan untuk melakukan animasi adalah
menambahkan keyframe kedua pada setiap layer. Keyframe merupakan hal yang
mendasar pada semua yang berdasarkan pada teknik animasi timeline Flash.
Analogi untuk menggambarkan keyframes adalah dengan berpikir setiap
keyframes pada suatu tempat merupakan infrormasi baru pada layer.
Setelah setidaknya memiliki dua keyframes, maka barulah dapat membuat
sebuah tween. Tween merupakan instruksi ke komputer untuk mengisi seluruh
frame yang ada diantar dia keyframes yang didefinisikan. Komputer akan
menghitung perubahan yang sesuai dengan karakteristik dan secara otomatis
menambahkan elemen yang dianimasikan pada frame yang disisipkan.
3. Menyiapkan Teks untuk Animasi
Teks seringkali menjadi bagian dalam animasi. Untuk melengkapi animasi
sederhananya. Maka akan dibuat teks “Praktikum Multimedia Pada Jurusan
Teknik Informatika”. Animasi teks yang dilakukan adalah pada suatu waktu
bergerak kea rah yang berbeda. Penggunaan kotak yang dibuat adalah untuk
menarik perhatian pengguna dan animasi teks digunakan untuk melengkapi
efeknya. Animasi sederhana seperti ini bertujuan agar tujuan yang dibuat tidak
serampangan.
Ketika memilih font, pastikan memilih yang cocok untuk kebutuhannya.
Perlu dipikirkan karena dengan banyaknya font maka dapat mengganggu. Cobalah
untuk menggunakan font yang seperlunya sehingga ide dapat tersampaikan sekitar
dua atau tiga. Pastikan pula pemilihan font bias dapat diterima karena perbedaan
font sehingga tidak terjadi desain yang tidak konsisten.
Selanjutnya, ketika menggunakan ActionScript untuk mengontrol teks
pada text fields, maka font yang digunakan haruslah font yang terdapat pada
system sehingga dapat ditampilkan dengan benar. Mengurangi jumlah font dapat
menjaga ukuran file.swf tetap kecil.
4. Strategi Animasi

29
Animasi yang dibuat sudah ada, tetapi sangat lambat dan membosankan.
Animasi dapat dibuatl ulang lagi dengan menentukan kecepatan munculnya teks.
Dalam hal ini urutan kata yang muncul diatur. Mulai dari awal kata sampai akhir
kata.

5. Alpha Effect
Untuk menyelesaikan anumasi tambahkan alpha effect. Penambahan alpha
effect dilakukan pada kata “pada jurusan Teknik Informatika” untuk menampilkan
kata muncul dengan halus.

6. Motion Effects
Disainer yang sukses mengkomunikasikan sesuatu dengan berbagai
macam cara. Tema dapat dikomunikasikan melalui tipe, blok, langkah, warna, dan
pergerakan. Menggabungkan elemen-elemen ini dapat menghasilkan efek yang
kuat.
Desian motion sampai sekarang masih ada dan dilakukan. Desain motion
dapat dilakukan dengan menggunakan motion guide dan easing value suatu objek.
7. Mask Effects
Penggunaan mask membuat sebagian dari suatu objek secara sementar
tidak terlihat pada suatu area. Masking membuat pengguna melihat bagian kecil
dari objek.
8. Script
Untuk menjaga movie dari perulangan, maka dibutuhkan menambah suatu
ActionScript method (yang kadang kala dipanggil dengan command atau action).
Penggunaan ActionScript akan banyak digunakan pada pembuatan animasi, tetapi
untuk sekarang yang dilakukan adalah dengan menambahkan stop( ) method
sederhana. Method tersebut ditambahkan pada keyframe terakhir pada timeline.
9. Publikasi Movie
Animasi telah selesai, tetapi hasilnya tersebut belum dapat ditampilkan
diluar lingkungan Flash sampai movie tersebut di publikasi.

30
Mempublikasi movie merupakan tindakan mengekspor versi komplitdari
file .fla ke tipe file lain.. Fortmat.fla digunakan hanya untuk mengedit dapal
aplikasi Flash. Publikasi flash dapat dijadikan format file.swf, bias juga berupa
halaman HTML.

III. LANGKAH KERJA


1. Buatlah dokumen flash baru untuk membuat animasi kotak dan teks! Aturlah
frame rate menjadi 8 fbs.
2. Buatlah 6 layer yang nantinya akan diisikan gambar kotak disetiap layernya.
3. Pembuatan kotak dilakukan dengan memilih menu Insert lalu New symbol
(Crtr + F8) aturlah kotak-kotak tersebuat sehingga tampilannya menjadi
sebagai berikut.

Buatlah folder Kotak untuk menyimpan layer-layer kotak yang sudah dibuat.

Warna pada kotak tersebut didapat dari pemilihan warna Tint.

4. Tambahkan frame pada frame ke 60 dengan menggunakan klik kanan pada


frame lalu memilih Insert Frame dan keyframes kedua pada frames ke 20

31
untuk setiap layer kotak dengan klik kanan pada frame tersebut lalu memilih
Insert Keyframes. Setelah itu pada setiap layer buatlah motion tween dengan
klik kanan pada frame lalu memilih Create Motion Tween.

5. Pada frame pertama setiap layernya ubahlah ukutan kotak tersebut dengan W
dan H adalah 10. Jalankan movie ini dengan menggunakan Ctrl + Enter.

6. Buatlah folder teks pada layer. Kemudian buatlah layer-layer untuk teks
“Praktikum Multimedia Pada Jurusan Teknik Informatika” setiap kata satu
layer. Pembuatan teks dimulai pada frame ke 20. frame sebelumnya kosong.

Berikut ini merupakan gambaran posisi teks untuk animasi.

32
7. Tambahkan keyframes pada setiap layer di frame 60 dan tambahkan motion
tween sehingga teks pada akhirna menempati kotak yang ada.
8. Aturlah animasi teks agar dapat muncul satu persatu secara berurutan mulai
dari awal kata sampai dengan akhir kata. Jalankan movie ini dengan
menggunakan Ctrl + Enter.
9. Tambahakan efek alfa pada teks “Pada”. Jalankan movie ini dengan
menggunakan Ctrl + Enter.
10. Buatlah motion pada kata multimedia dengan menggunakan ease dan jurusan
dengan menggunakan motion guide. Jalankan movie ini dengan menggunakan
Ctrl + Enter.
11. Buatlah layer mask pada folder teks dengan nama mask. kemudian add Mask
dengan klik kanan pada layer tersebut. Layer yang di mask adalah layer
praktikum. buatlah tween pada layer mask sehingga kata praktikum setelah
berada pada kotak tampil perbagian terlebih dahulu sebelum tampil semuanya.
12. Buatlah layer dengan nama script dan buatlah keyframes pada ahir timeline,
dan tambahkan ActionScript stop( ) method pada keyframes terakhir pada
timeline. Jalankan movie ini dengan menggunakan Ctrl + Enter.
13. Publishlah dokumen yang telah dibuat sehingga format filenya menjadi .swf
dan sebuah halaman HTML dengan memilih dari menu File kemudian
Publish. Setting file yang akan di publish dapat dilihat pada Menu File
kemudian Publish Settings.
Tugas
Buatlah animasi dari nama anda dengan menggunakan bentuk, teks,
motion tween, ease, motion guide, mask, warna, urutan animasi, dan script yang
dibutuhkan. Publikasikanlah movie yang dibuat dalam bentuk .swf dan halaman
HTML. Pada animasi ini untuk teks ada dibuat kata yang dipecah menjadi huruf
ditiap layer.

33
Praktikum Multimedia Modul VI
TOMBOL DAN INTERAKSI FLASH

I. TUJUAN
Setelah menyelesaikan modul ini, mahasiswa diharapkan mampu membuat
tombol dan menggunakannya untuk interaksi.

II. DASAR TEORI


Flash merupakan alat bantu untuk desain dan animasi, tetapi penggunaan aplikasi
ini belum dapat maksimal jika belum menyertakan elemen interaksi. Pada modul
sebelumnya script telah dibuat untuk mencegah terjadinya perulangan animasi. Pada
modul ini akan dibuat buttons dan ActionScript sehingga pengguna dapat mengontrol
aplikasinya.
Cara yang paling gampang untuk menambahkan interaksi pada Flash ada;aj
dengan menggunakan tombol untuk menjalankan ActionScript. Pada modul ini akan lebih
dikhususkan pada penggunaan tombol. Berikut ini merupakan hal-hal yang perlu
diketahui dalam mengerjakan tombol dan ActionScript.
1. Tombol Sebagai Simbol
Tombol merupakan sebagai bentuk representasi dari banyak, tetapi ada dua
hal penting yang membedakannya. Perbedaannya adalah secara default tombol
tidak memiliki timeline yang penuh seperti pada grafik atau klip movie. Malahan,
tombol memiliki empat frame terpisah yang akan menemptakan pada
keadanan/states berbagai macam tombol (penampilan default dari tombol, pada
saait mouse melewati tombol dan di klik).
Perbedaan kedua adalah tombol secara otomatis mengubah penampilannya
pada saat berinteraksi dengan pengguna sehingga state-nya berubah juga.
Walaupun tombol harus diprogram dengan ActionScript untuk memberikan efek
pada movie, state tombol dan cursor feedback datur untuk pengguna.
Ketika melihat di dalam symbol tombol, timeline muncul secara unik
karena terdiri dari empat frames yang telah ditentukan. Ketiga frame yang
pertama adalah state tombol. State Up merepresantikan penampilan tombol ketika
kursor mouse tidak melewati tombol, state Over ditampilkan ketika mouse berada

34
pada tombol, dan state Down ditampilkan ketika pengguna mengklik pada
tombol. State keempat merupakan state pada saat ditekan.
2. Navigasi dan Script
Setelah dapat membuat tombol maka langkah berikutnya adalah
memberikan script pada tombol yang telah dibuat. Flash akan menangani visual
feedback, termasuk kursor dan perubahan state, tetapi tombol belum operasional.
Untuk membuatnya menjadi operasianal maka dapat dibuat dengan menggunakan
bantuan script.
Navigasi dilakukan dengan menggunakan script. Kemampuan dasar untuk
menghunbungkan satu halaman dengan halaman lain dilakukan dengan
menggunakan scirpt. Pada aplikasi Flash, kemampuan user untuk menavigasikan
sekumpulan frame sangatlah mendasar dan penting. Tanpa kemampuan untuk
pergi ke frame tertentu pembuatan aplikasi hanya menjadi satu alur saja. Dengan
adanya navigasi maka dapat menuju ke bagian pada suatu movie sehingga dapat
menampilkan berbagai macam objek yang berbeda pada tiap navigasi. Tabel di
bawah ini merupakan script-script dasar yang diperlukan untuk mengerjakan
modul ini.

Action ActionScript notation Arguments


gotoAndStop gotoAndStop(arguments); Scene Name (Frame Label, Number, or
Expression)
gotoAndPlay gotoAndPlay(arguments); Scene Name (Frame Label, Number, or
Expression)
nextFrame nextFrame(); None
prevFrame prevFrame(); None
nextScene nextScene(); None
prevScene prevScene(); None
play play(); None
stop stop(); None
stopAllSounds stopAllSounds(); None
getURL getURL(arguments); url, target frame or window, method
for form submission

35
III. LANGKAH KERJA
1. Buatlah dokumen flash baru untuk membuat tombol.
2. Buatlah kotak untuk membuat tombol dengan menggunakan shape dan resize
menjadi 100X40. Lalu buat teks dengan kata tombol dan letakkan pada bagian
dalah kotak. Lalu pilih semua objek yang ada pada stage dan pilih Menu
Modiy lalu Convert to Symbol dan pilih tipenya button. Tes movie yang
sudah ada. Berikan nama instance name-nya dengan Tombol.
3. Pilihlah tombol kemudian framenya di tiap state dengan mengubah warna teks
dan huruf.

Jalankan movie dengan menekan Ctrl + Enter.


4. Tambahkan satu layer untuk menampilakan objek pada saat tombol ditekan.
Buatlah objek persegi panjang pada layer tersebut. pada frame pertama objek
masih tidak ada. Frame kedua memuat objek tersebut. Pada bagian layer
tombol, frame pertama diisi perintah:
Tombol.onRelease = function() {
gotoAndStop(2);
};
stop();
frame kedua diisi perintah:
Tombol.onRelease = function() {
gotoAndStop(1);
};
5. Jalankan movie dengan menekan Ctrl + Enter dan cobalah menekan tombol.

Tugas
1. Buatlah 3 tombol yang masing-masing digunakan untuk menampilkan objek
yaitu lingkaran, segi empat, dan segi tiga. Beri Animasi pada tiga objek
tersebut pada saat akan ditampilkan dan berikan keterangan mengenai objek
tersebut (misalnya: nama objek, deskripsi objek, rumus mencari keliling dan
luas).
2. Buatlah profile diri anda yang terdiri dari halaman pembuka, profile, galeri
foto, dan halaman penutup. Tombol minimal yang harus ada adalah tombol
profile, galeri, dan replay. Berikan animasi pada semua halaman dengan

36
kriteria minimal seperti yang ada pada modul sebelumnya. Berikut ini
merupakan contoh informasi minimal yang harus dibuat tetapi untuk objek
yang dibuat (misalnya tombol) tidak harus seperti layout ini.
Profile Galeri Foto Replay Keluar

[Nama]
Jenis kelamin, Umur, Status

Tanggal lahir : []

[Foto] Alamat:

Universitas:

“[Tentang saya]”

Galeri foto [Nama]

Detail [Nama]
Alamat :

No Telepon :

Hobi :

Tentang saya :

Profile Galeri Foto Replay Keluar

[Foto]

[Judul Foto] |< < > >|

37