modul 2 teks, gambar & grafik

PRAKTIKUM MULTIMEDIA

MODUL II

TEKS, GAMBAR, DAN GRAFIK

Disusun Oleh :

Munengsih Sari Bunga

POLITEKNIK INDRAMAYU

2012

POLITEKNIK INDRAMAYU Munengsih Sari Bunga

2

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

modul 2 teks, gambar & grafik

Education