MODUL PRAKTIKUM

MULTIMEDIA

Disusun Oleh:

Tim Dosen Multimedia

JURUSAN/PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK
UNIVERSITAS PALANGKA RAYA
2015
1

TATA TERTIB DAN TATA LAKSANA

PRAKTIKUM MULTIMEDIA
JURUSAN/PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS TEKNIK UNPAR
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 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. Format laporan meliputi:
Laporan Rencana Praktikum :

Halaman Depan
Tujuan Praktikum dari modul yang akan dilaksanakan
Hal-hal yang akan dilakukan selama praktikum.

Laporan Hasil Praktikum :

Halaman Depan
Bab I. Tujuan dan Landasan Teori
Bab II. Langkah Kerja
Bab III. Pembahasan
Bab IV. Kesimpulan
Bab V. Daftar Pustaka
Bab VI. Lampiran (disertai laporan rencana praktikum)

5. Format Penulisan
Spasi

: 1,5

Font
Font Size
Margins
Kertas

: Times New Roman

: 12
: Top 3, Left 4, Right 3, Bottom 4
: A4

6. Penilaian Laporan Hasil Praktikum :

Bab I. Tujuan dan Landasan Teori
Bab II. Langkah Kerja
Bab III. Pembahasan
Bab IV. Kesimpulan
Bab V. Daftar Pustaka
Bab VI. Lampiran
Total

Nilai
Nilai
Nilai
Nilai
Nilai
Nilai

20
10
40
15
5
10
100

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

setiap kesalahan.
8. Penilaian Akhir Praktikum :
Pre-Test
: 10%
Praktikum
: 35%
Laporan Praktikum : 35%
Responsi
: 20%
Total
100%
9. Penilaian Akhir Mata Kuliah:
Kuliah, meliputi:
Tugas
: 10%
UTS
: 15%
Praktikum
: 25%
UAS
: 50%
Total
100%

Praktikum Multimedia Modul I

Pemodelan spiline untuk membuat objek 3d open suse.
I.

Tujuan
1. Mahasiswa/i dapat membuat objek 3d yang lebih kompleks dengan
teknik spline modeling.
2. Mahasiswa/i dapat mengaplikasikan flow work pengerjan 3d didalam
software 3dsmax.

II.

Landasan Teori
1. Spline modeling
Pemodelan mengunakan objek 2d splines dibentuk dengan
mengunakan tool pemodelan spline seperti Attach, Refine, Weld, Fuse
dll dan mengunakan modifier bevel atau extrude untuk menghasilkan
bentuk 3d yang diinginkan.
2. Sifat Vertex
Sub-object sebuah objek spline terdiri dari 3 bagian, vertex,
segment dan spline. Vertex memiliki 4 sifat yaitu; Corner, Bezier, Bezier
Corner dan Smooth. Sifat vertex dapat mempengaruhi bentuk objek
spline sehingga dapat memudahkan dalam proses pembentukan objek
3d.
3. Flow work 3d
Langkah kerja didalam software 3d adalah sebagai berikut:
Modeling, Material Design, Lighting/Camera, Animation dan
Rendering.

III. Praktikum
1. Modeling
Persiapkan gambar image logo open SUSE, gunakan gambar
dengan resolusi cukup besar untuk mempermudah proses tracing.

Buka 3dsmax dan import gambar logo open SUSE pada viewport
front agar logo yang dibuat berada pada posisi berdiri.

Cek opsi Match Bitmap dan Lock Zoom/Pan agar image yang di
import dikunci pada proses Zoom dan Pan.

Perbesar tampilan Front viewport untuk memulai proses

pemodelan, sebelum memulai pemodelan perhatikan bahwa logo tersebut
memiliki 3 objek yaitu; objek bunglon, objek text open dan objek text
SUSE. Untuk dua objek text pemodelan dapat mengunakan objek splines
Text yang sudah disediakan oleh 3dsmax. sedangkan objek bunglon
harus mengunakan teknik pemodelan spline modeling dengan
mengunakan objek dasar line.
Buat line dasar disekitar gambar bunglon, bagian yang melengkung
dapat diedit nanti.
5

Perhalus bagian yang melengkung dengan merubah sifat vertex menjadi

bezier, bezier corner atau smooth untuk mendapat bentuk lengkung yang
diinginkan. untuk membuat bagian melengkung dapat juga mengunakan
tool fillet dan bila vertex yang dibuat pada line dasar dirasakan kurang
dapat ditambah dengan insert atau refine.

Background dapat dimatikan sementara untuk melihat hasil pemodelan

yang sudah dilakukan.

Selesaikan pemodelan pada bagian yang lainnya. hasil akhirnya dapat

dilihat seperti pada gambar dibawah ini.

Tubuh bunglon sudah berhasil dibuat, saatnya memberikan mata pada

bunglon ini dengan mengunakan Splines Circle dan Ellipse.

Warna yang berbeda pada objek splines berarti objek splines belum
menjadi satu objek, satukan semua objek spline dengan mengunakan
Attach.
Untuk mendapatkan bentuk 3d terapkan modifier Bevel pada objek
spline yang sudah kita buat sebelumnya, setting parameter Bevel
menyesuaikan.

Tambahkan objek text open dan SUSE berikan modifier Bevel dengan
setting parameter yang menyesuaikan.

2. Material Design
Material pada logo SUSE ada dua macam, Hijau muda dan Hijau
tua. Buka material editor 3dsmax buat lah 2 slot material dengan nama
Hijau Muda dan Hijau Tua. Gunakan material type Standard, ubah warna
Difuse sesuai warna contoh logo SUSE.

Atur parameter Specular Level dan Glossiness untuk mendapat efek

mengkilap pada material. lalu terapkan material pada objek 3d.

3. Lighting
Terapkan pencahayaan dengan mengunakan 2 omni dengan warna
cahaya yang berbeda sesuai keinginan mahasiswa. Pencahayaan dapat
menampilkan objek 3d dengan baik tidak gelap dan tidak terlalu terang.

10

4. Animation
Buatlah animasi yang berbeda pada 3 objek 3d (Bunglon, open dan
SUSE). Animasi tiap objek dibebaskan sesuai keinginan mahasiswa.
kreatifitas dan kompleksitas animasi menjadi nilai tambah. letakan juga
camera untuk rendering menjadi format movie nantinya. Camera boleh
dianimasikan.
5. Rendering
Buatlah movie dengan format PAL durasi 10 detik dengan resolusi
720x486.

11

Pratikum Multimedia Modul II

3d Animasi - Spline Modeling & Controller Animation
I.

Tujuan Pratikum
1. Mahasiswa/i dapat membuat objek 3d yang lebih kompleks dengan teknik
spline modeling.
2. Mahasiswa/i dapat membuat animasi dengan metode controller.

II.

Landasan Teori
Pada bagian modeling akan digunakan teknik spline modeling dimana
modeling tidak hanya mengunakan objek dasar tetapi objek dasar yang
dibentuk kembali sehingga menjadi objek yang seutuhnya berbeda, sedangkan
untuk proses pembuatan animasi akan mengunakan metode controler path
constraint.

Logo Warner Bros yang akan dimodeling dan dianimasi

III.

Pratikum
1. Modeling
Proses modeling diawali dengan meng-import sebuah file gambar dengan
logo yang diinginkan, pada praktikum ini mengunakan logo WarnerBros.

12

a. Pada Front viewport import file gambar WarnerBros dengan

mengunakan shortcut keyboar alt+b, pilih file gambar, ceklist Match
Bitmap dan Lock Zoom/Pan.

b. Tracing bentuk dasar dengan mengunakan Line.

c. Lakukan editing pada beberapa vertex sehingga bentuknya

melengkung pada kedua sisi-nya. Untuk menghilangkan sementara
gambar background, klik kanan pada title viewport dan matikan ceklist
Show Background, untuk menampilkan background kembali aktifkan
ceklist Show Background.

13

d. Buat ketebalan kearah dalam dengan mengunakan Outline tool.

e. Objek pertama sudah selesai, lanjutkan dengan membuat objek W dan

B nya.

14

f. Gabung semua objek spline dengan mengunakan Attach, sehingga

menjadi satu objek yang utuh.

g. Berikan modifier Bevel untuk memberikan efek 3d, parameter bevel

bebas.

15

2. Texturing
a. Logo ini hanya mengunakan warna saja tanpa material. Rubah warna
objek dengan warna hitam.

a. Karena objek 3d berubah warna menjadi hitam, sedangkan background

rendering juga berwarna hitam secara depault, maka warna background
di ganti dengan warna lain, ganti warna background evironment
dengan putih. Tekan 8 pada keyboard untuk membuka environment &
effect window. Ganti warna background menjadi putih.

16

3. Animation
Animasi dibuat dengan metode controler path constraint, dimana
teknik ini yang dianimasikan adalah camera bukan objek 3d-nya. Metode
ini memerlukan jalur tempat camera nanti berjalan, biasanya digunakan
objek spline sebagai track untuk camera berjalan. Untuk logo Warner
Bros ini akan dibuat animasi camera yang berputar mengelilingi objek
logo.
a. Buat Camera tipe Target pada TOP viewport, arahkan target camera
ditengah-tengah logo.

17

b. Ubah view perspective menjadi view camera dengan menekan C pada

keyboard pada persfektif viewport. Atur posisi logo pas ditengah view
camera dengan mengunakan navigation tools.
c. Buat circle pada top viewport ditengah objek logo, buat diameter
circle mencapai camera.

d. Pilih camera lalu pindah ke tab Motion, Pilih Position: Position XYZ,
lalu klik tombol kecil bertanda (?) Assign Controler.

18

e. Muncul window baru bernama Assign Position Controler, dari window

list ini browsing Path Constraint, lalu pilih OK.
f. Pada tab motion akan muncul tool path constraint pada bagian bawah,
lakukan scrolling ke bawah.

g. Aktifkan Add Path lalu pilih objek circle pada viewport. Dengan
metode controller, keyframing animasi otomatis dibuat oleh computer.
h. Play animasi.
i. Coba buat variasi view dengan men-drag posisi circle ke atas (sumbu
z) dan men-drag posisi target camera kearah bawah, sehingga objek
terlihat lebih persfektif.
4. Rendering
b. Masuk ke render scene dialog pada toolbar atau shortcut f10.
c. Cek Active Time Segment
d. Gunakan resolusi 640x480
e. Save animasi dengan format avi dengan kompresi cinepack codec by
radius.
f. Pilih camera view dan render animasi.

19

Praktikum Multimedia 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.
Jalankan program Adobe Premiere Pro CS 3 (Klik Star Program

Adobe Premiere), Aplikasi akan menanyakan kepada anda apakah akan

20

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)

21

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
22

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

23

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 beraudio 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,
anda sudah dapat mengarahkan redline timeline ke awal video dan tekan
space (play di monitor) untuk melihat rancangan awal video anda.

24

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

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

25

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.

5. Setting timeline audio

Selanjutnya perlu juga ditambahkan audio yang berfungsi untuk
melengkapi editing video sehingga suasannya menjadi hidup. Caranya
26

import drag ke timeline berikan effect cross fade- Constant Gain dan
Constant power.
6. Rendering File
Koreksi lagi video anda, putar file project preview dan amati apakah anda
rasa ada komponen yang kurang yang belum anda sisipkan. Jika sudah
tepat maka langsung di render pilih file Export Movie lakukan
setting sekali lagi apabila setting render video berganti jika semua sudah
OKE maka SAVE.

27

Praktikum Multimedia Modul IV

Video Editing Color Key
A. Tujuan Praktikum
Pada kegiatan praktikum multimedia tentang dasar - dasar video editing,
bertujuan :
1. Mahasiswa dapat mengenal area kerja video editing, khususnya Adobe
Premiere.
2. Mahasiswa dapat menerapkan penggunaan video Efeect keying, Color
Key.
3. Mahasiswa dapat menerapkan penggunaan video Efeect Motion.
4. Mahasiswa

dapat

menerapkan

penggunaaan

audio

dengan

menggunakan low pass.

5. Mahasiswa dapat menerapkan tool dan icon pada clip video yang
terdapat pada Adobe Premiere.

B. Landasan Teori

Untuk mengganti latar belakang clip digunakan teknik keying,

fungsinya untuk membuat transparansi, kemudian mengisi area transparan
tersebut dengan clip lain. Dalam bahasan ini kita akan mengupas teknik
Color keys. Terkadang dalam skenario terdapat adegan yang tidak
mungkin dilakukan dengan live shoot, misalnya adegan orang terbang di
angkasa. Maka untuk mengatasi kendala ini digunakan teknik keying
untuk efisiensi biaya. Pertama kita harus mengambil gambar talent (misal
orang dengan posisi telungkup seolah-olah sedang terbang) dengan
background berwarna tertentu (teknik Color keys memakai berbagai warna
misalnya warna hijau sebagai background). Kedua kita ambil gambar latar
belakang yang akan dipakai (misalnya gambar seoranng tentara sedang
menembak dengan pistol).

C. Persiapan
Format video dan Import data :

28

1. Panggil premiere pro CS 3 pilih preset VCD PAL, lalu tentuka lokasi
folder dan file project dari video yang telah disiapkan.
2. Import data file, klik menu file import (Ctrl + I).
D. Praktikum
1. Buat Project Video
Setting terlebih dahulu new project adobe premiere sebelum memulai
pengeditan video.

(Set Default Standar PAL)

(Customize Project)

29

2. Import File
Masukan materi yang di gunakan untuk editing video ke dalam file
project.

(Import Video)

(Import video, kedalam file project)

3. Import file project ke dalam timeline
Drag dan drop file gambar (latar 1 dan 2 di channel video 1) dan (video
tentara di channel video 2).

30

4. Tentukan effects video dan setting

Pada praktikum kali ini kita menggunakan efek keying (color key) (Pilih
effects keying color key) selanjutnya kita drug ke chanel video 1
maka anak tampil :

(Tampilan saat kita drug video ke timeline)

Selanjutnya kita kan setting pengaturan pada color key :
-

Color key kita berikan warna biru seperti warna yang ada pada
video sehingga kita bisa menghilangkan warna yang sama.

Color tolerance kita berikan 140 atau bisa di ubah sesuai dengan
kebutuan sampai background warna biru menghilang.
Setelah selesai maka hasilnya akan berubah seperti ini :

Untuk membuat gambar background tampak bergerak maka di

berikan efek motion Position selanjutnya kita tandai pada masing masing titik peruhaban dan perlu di rubah nilainya.

31

(Titik pertama position 360)

(Titik kedua position 357, ulangi untuk titik berikutnya sampai akhir dari timeline
backround )

(Tampilan hasil akhir pada timeline)

32

5. Rendering file
Koreksi lagi video anda, putar file project preview dan amati apakah
anda rasa ada komponen yang kurang yang belum anda sisipkan. Jika
sudah tepat maka langsung di render pilih file Export Movie
lakukan setting sekali lagi apabila setting render video berganti jika
semua sudah OKE maka SAVE.

33

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

34

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

35

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

36

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

37

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.

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.

38

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.

39

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

40

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

url, target frame or window, method

for form submission

getURL(arguments);

41

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

42

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 : []
Alamat:

[Foto]

Universitas:
[Tentang saya]
profi
Galeri foto [Nama] profi

profi

profi

Detail [Nama]
Alamat

No Telepon

Hobi

Tentang saya :

Profile

Galeri Foto

Replay

Keluar

[Foto]

[Judul Foto]

profi

|<

profi

<

F
o
t
o
profi

>

>|

profi
43

LAPORAN RENCANA PRAKTIKUM

MULTIMEDIA

Nama

:..

NIM

:..

Kelas

:..

Modul

:.(.......)

JURUSAN/PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK
UNIVERSITAS PALANGKA RAYA
2015

44

LAPORAN HASIL PRAKTIKUM

MULTIMEDIA

Nama

:..

NIM

:..

Kelas

:..

Modul

:.(.......)

JURUSAN/PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK
UNIVERSITAS PALANGKA RAYA
2015

45

DAFTAR PUSTAKA

Robert Hoekman dan Jr., Rich Shupe. 2006. Flash 8: Projects for Learning
Animation and Interactivity. O'Reilly Media: the United States of
America.
Robert Reinhardt dan Snow Dowd, 2006. Macromedia Flash 8 Bible. Wiley
Publishing, Inc: the United States of America
Harahap, M. Khoiruddin. 2004. Kreasi Video Ulead Visual Studio 11 Movie
Making For Everyone. Penerbit ANDI Yogyakarta: Yogyakarta.
Daryanto, Tri. 2005. Sistem Multimedia dan Aplikasinya. Penerbit Graha ilmu:
Yogyakarta.

46