Modul Praktikum Multimedia tentang pembuatan animasi teks, gambar dan grafik

1. PRAKTIKUM MULTIMEDIA
MODUL II
TEKS, GAMBAR, DAN GRAFIK
Disusun Oleh :
Munengsih Sari Bunga
POLITEKNIK INDRAMAYU
2012

2. POLITEKNIK INDRAMAYU 2
Munengsih Sari Bunga
MODUL II
TEKS, GAMBAR DAN GRAFIK
A. TUJUAN
Pada modul 2, akan membuat grafik sinus, dengan tujuan agar mahasiswa :
 Dapat membuat grafik sinus dengan Action Script 2.0.
 Dapat membuat animasi web dengan flash
 Dapat membuat efek permukaan air
B. TEORI
Pada praktikum ini akan membahas bagaimana cara membuat grafik sinus seperti terlihat
pada gambar 1 yang mempunyai persamaan y = 100 sin(x) dengan menggunakan Math.
Object dan duplicateMovieClip.
Gambar 1
a. Menggunakan Math. Object
Untuk menghitung fungsi trigonemetri (sin, cos, tan dsb) dapat digunakan Math. Object.
Untuk memanggil Math. Object dapat dilakukan dengan menuliskan Math. pada jendela
Script maka dengan otomatis akan keluar pop-up window yang berisi fungsi-fungsi dari
Math. Object.

3. POLITEKNIK INDRAMAYU 3
Munengsih Sari Bunga
Gambar 2
Untuk menghasilkan suatu nilai sinus, fungsi yang digunakan adalah fungsi sin, contoh cara
penulisannya sebagai berikut:
y = sin(90 o)
Karena nilai yang dihitung oleh Flash berbentuk radian maka nilai sudut harus diubah ke
nilai radian agar menghasilkan nilai yang sesuai (terkecuali jika memang nilai yang akan
dihitung dalam bentuk radian)
Rumus konversi sudut ke radian:
Radian = sudut x π / 180o
Untuk mendapatkan nilai π yang akurat dapat digunakan fungsi PI dari Math. Object.
Sehingga rumus y = sin(90o) ditulis dalam Script menjadi:
Y = Math.sin(90 * Math.PI / 180);
b. Menggunakan duplicateMovieClip
Format penulisan perintah duplikasi, menggandakan Movie clip:
duplicateMovieClip(target,newname="",depth);
Selain membuat grafik sinus, pada modul 2 praktikum ini juga akan membahas
tentang pembuatan animasi web di Flash. Untuk memahami animasi di flash, haruslah
mengerti apa itu tweening?
Tweening berasal dari kata ‘between in’ (diantara). Dalam flash, tweening adalah
istilah yang digunakan untuk animasi. Dengan tweening kita bisa memindahkan
objek/symbol dari satu titik ke titik yang lain, lalu flash melakukan animasi diantara kedua
titik tersebut. Selain itu, tweening juga bisa melakukan pemutaran objek ketika bergerak
(seperti roda), objek yang berganti warna, objek yang memudar dan lain-lain.
C. PRAKTEK
I. MEMBUAT GRAFIK SINUS
a. Membuka Halaman Kerja
1. Buka halaman baru. Klik Flash File (ActionScript 2.0) atau klik File New

4. POLITEKNIK INDRAMAYU 4
Munengsih Sari Bunga
Gambar 3
2. Set Size halaman pada Properties Panel dengan ukuran 550 x 400 pixels
Gambar 4
b. Mempersiapkan Layer yang akan digunakan
1. Buatlah tiga buah layer sebagai berikut:
- Action
- Grafik
- Latar
Gambar 5
2. Kuncilah setiap layer dengan cara mengklik tanda
Gambar 6
c. Mengisi Layer Latar dengan Asesoris yang dibutuhkan
1. Aktifkan Layer Latar dengan cara mengklik tanda
Gambar 7
2. Latar yang akan dibuat adalah seperti berikut:

5. POLITEKNIK INDRAMAYU 5
Munengsih Sari Bunga
Gambar 8
3. Untuk membatu pembuatan gambar latar, aktifkan penggaris dengan cara klik
kanan di halaman (stage)  Rulers. Kemudian aktifkan juga garis bantu
(Grid) dengan cara klik kanan halaman  Grid  Edit. Lalu atur properties
Grid seperti gambar 10.
Gambar 9
Gambar 10

6. POLITEKNIK INDRAMAYU 6
Munengsih Sari Bunga
4. Membuat sumbu horizontal (x), buatlah sebuah garis dengan menggunakan
Line Tool dengan kordinat X = 0, Y = 550 dan ukuran garis W = 550, H
=0
Gambar 11
Gambar 12
5. Buatlah sumbu vertical (y) dengan menggunakan Line Tool dengan
kordinat X = 50, Y = 0 dan ukuran garis W = 0, H = 400
Gambar 13
Gambar 14

7. POLITEKNIK INDRAMAYU 7
Munengsih Sari Bunga
6. Untuk sumbu horizontal (x) nilai-nilai yang akan ditampilkan hanya sudut-
sudut kelipatan 90 yaitu 0, 90, 180, 270 dan 360. Dengan menggunakan Line
Tool buatlah garis tanda nilai berukuran W = 0 dan H = 10 sebanyak 4
buah dengan jarak antar tanda 90 pixel seperti gambar 15.
Gambar 15
7. Dengan menggunakan Text Tool berilah label sesuai dengan kelipatannya
dimulai dari 0 (titik temu sumbu x dan y) dengan tipe text Static Text seperti
gambar 16.
Gambar 16
8. Untuk sumbu vertical (y) nilai-nilai yang akan digunakan adalah 50, 100, -50
dan - 100. Dengan menggunakan Line Tool buatlah garis tanda nilai

8. POLITEKNIK INDRAMAYU 8
Munengsih Sari Bunga
berukuran W = 10 dan H = 0 sebanyak 4 buah dengan jarak antar tanda 50
pixel. Beri label dengan menggunakan Text Tool dengan tipe Static Text
seperti pada gambar 17.
Gambar 17
9. Dan jangan lupa untuk memberikan judul/title Grafik Sinus y = 100 sin (x)
dengan menggunakan Text Tool bertipe Static Text
Gambar 18
10. Nonaktifkan kembali fungsi Rulers dan Grid (optional) dengan cara hampir
sama dengan cara mengaktifkannya.

9. POLITEKNIK INDRAMAYU 9
Munengsih Sari Bunga
d. Mengisi Layer Grafik
1. Aktifkan Layer Grafik.
Gambar 19
2. Buatlah sebuah lingkaran dengan menggunakan Oval Tool, dengan ukuran W
= 3 dan H = 3 dengan Fill Color
Gambar 20
3. Klik kanan lingkaran yang tadi dibuat lalu pilih Convert to Symbol
Gambar 21
4. Isi nama symbol dengan nama: grafik, Type: Movie clip dan pilih Registration
Point yang paling tengah

10. POLITEKNIK INDRAMAYU 10
Munengsih Sari Bunga
Gambar 22
5. Seleksi symbol tadi dan isi Instance name pada panel Properties dengan nama
grafik, nama ini yang akan digunakan di Script
Gambar 23
6. Nonaktifkan kembali layer Grafik
e. Memberi Script pada Layer Action
1. Seleksi frame pertama layer Action, klik kanan  Actions
Gambar 24
2. Isi Script:

11. POLITEKNIK INDRAMAYU 11
Munengsih Sari Bunga
3. Lakukan test movie, Ctrl + Enter
Gambar 23
4. Save file dengan nama Modul 2 – Teks, Gambar dan Grafik
f. Penjelasan Script
Script diatas mempunyai fungsi mendeklarasikan variable.
- Variable sudut bertipe number dengan nilai awalan diberikan 0. sudut = 0
- grafik._x = 50 mempunyai arti bahwa kordinat grafik dalam sumbu x berada di nilai
50.
- grafik._y = 200 mempunyai arti bahwa kordinat grafik dalam sumbu y berada di nilai
200.

12. POLITEKNIK INDRAMAYU 12
Munengsih Sari Bunga

Gambar 24
Kordinat grafik (50,200) adalah kordinat awal dari gambar grafik yang akan dibuat
Maksud Script diatas adalah: Ketika nilai sudut kurang dari 361 (sudut < 361) maka
proses perulangan dilakukan.
1. Nilai sudut awal adalah 0
2. a = 100 sin(0) = 0
3. kordinat grafik di sumbu y = 200 –a = 200 – 0 = 200
4. Movie clip grafik dengan kordinat baru (50,200) diduplikasi menjadi movie clip baru
dengan nama ”sinus” + sudut = “sinus0” dengan depth = 0.
5. Kordinat x movie clip grafik dinaikan 1, sehingga grafik._x = 50 + 1 = 51. Kordinat
baru movie grafik (51,200).
6. Nilai sudut dinaikan 1, sehingga nilai sudut baru sudut = 1
7. Proses diatas diulang sampai nilai sudut = 360
II. MEMBUAT ANIMASI WEB
ATUR MOVIE
Pengaturan movie dapat dilakukan melalui Movie Properties.
Klik menu Modify > Movie…, isikan Width: 200 px, Height:
100 px dan Background Color: Hitam.

13. POLITEKNIK INDRAMAYU 13
Munengsih Sari Bunga
MENGATUR DAN MENULIS TEKS
Aturlah huruf yang akan dituliskan, klik menu Text >
Character…, lalu pilih Arial Black pada bagian Font dan
ukurannya: 14. Kemudian pada bagian Colors yang terletak di
bagian kiri layar Flash, klik Text Tool , dan tulislah kalimat
‘NeoTek’ di Movie.
MEMBUAT SYMBOL
Sebelum bisa dianimasikan, tulisan tersebut harus diubah
menjadi symbol. Klik Arrow Tool yang terdapat pada
bagian Colors, lalu klik pada tulisan untuk memilihnya.
Selanjutnya, klik menu Insert > Convert to Symbol…, isikan
name: Neotek, lalu pilih Graphic pada bagian Behaviour dan
klik tombol OK. Maka akan terlihat tanda plus (+) ditengah
tulisan yang menandakan tulisan tersebut sudah menjadi
symbol.
MENGATUR TIMELINE
Timeline terletak diatas Movie, terdiri dari frame-frame.
Sekarang klik pada frame 15 lalu klik menu Insert > Keyframe
untuk memberikan Keyframe pada frame 15. Lakukan hal
yang sama pada frame 30.
MEMPERBESAR TULISAN
Klik pada frame 15, lalu klik menu Modify > Transform >
Scale and Rotate…, isikan Scale: 150 %, lalu klik tombol OK.
ANIMASI TULISAN
Inilah saatnya untuk memberikan animasi. Klik pada frame 1
lalu pilih menu Modify > Frame…, pilihlah Motion pada
bagian Tweening. Lakukan hal yang sama pada frame 15.
JALANKAN ANIMASI
Motion Tween ditunjukkan dengan frame berwarna ungu dan
garis panah yang menunjuk dari titik hitam ke titik hitam
lainnya . Sekarang klik menu Control >Test Movie untuk
menjalankan animasi.

14. POLITEKNIK INDRAMAYU 14
Munengsih Sari Bunga
TAMBAHKAN EFEK TINT
Hentikan animasi yang telah dijalankan, sekarang kita akan
menambahkan sedikit efek pada animasi yang sudah kita
buat tadi. Klik pada frame 1, lalu klik menu Window > Panels
> Effect, Pilihlah Tint pada drop-down menu dan Tint Color:
Biru. Lakukan hal yang sama pada frame 15 dengan Tint
Color: Merah dan frame 30 dengan Tint Color: Ungu.
MENAMBAHKAN SUARA
Agar tampak lebih cool, tambahkan suara ketika animasi
dimainkan. Klik pada frame 1, lalu klik menu Window >
Common Libraries > Sounds, maka daftar Libray Sounds yang
telah disediakan Flash akan tampil, pilih salah satu, misalnya:
Beam Scan. Drag ke atas tulisan ‘NeoTek’ yang berada di
Movie.
PUBLIKASI KE BROWSER
Sebelum dipublikasikan simpanlah terlebih dahulu animasi
yang telah dibuat, klik menu File > Save As…. Selanjutnya,
untuk menampilkan di browser, klik menu File > Publish
Preview > HTML. Maka sekarang anda sudah mempunyai file
neotek.html.
III. MEMBUAT EFEK PERMUKAAN AIR
1. Buat background dengan warna biru
2. Buat lingkaran dengan fill radial gradient seperti gambar sebelah kiri:
3. Gambar dibuat tidak terlalu besar, ubah menjadi elips seperti sebelah kanan dengan click
kanan dan pilih scale, ubah posisi atas hingga menghasilkan ellips.
4. Click fraem 15 dan buat keyframe
5. Ubah skala dengan klik kanan dan pilih scale, perbesar gambarnya dengan menggeser
posisi mouse
6. Kembalikan ke frame 1, pilih menu Modify  Frame, ubah tweening dengan motion
7. Test movie, hasilnya akan tampak seperti berikut:

15. POLITEKNIK INDRAMAYU 15
Munengsih Sari Bunga
Menyimpan dalam Format GIF
- Setelah efek animasi dibuat, pilih File  Export Movie
- Tulis File name dengan nama file tempat menyimpan hasil animasi
- Pilih Animated GIF pada Save as type
- Tekan Enter bila selesai
- Hasilnya file animasi GIF yang bisa secara langsung dipanggil pada website
D. LATIHAN
Buatlah grafik atau animasi menggunakan cara yang sama dengan salah satu dari 3
praktek yang telah Anda lakukan, lalu tuliskan langkah-langkahnya.
E. TUGAS
Buatlah animasi menggunakan cara yang tidak sama dengan salah satu dari 3 praktek
yang telah Anda lakukan, lalu tuliskan apa yang ingin anda kerjakan dan langkah-
langkahnya.