PRAKTIKUM MULTIMEDIA        MODUL IITEKS, GAMBAR, DAN GRAFIK         Disusun Oleh :      Munengsih Sari Bunga POLITEKNIK I...
POLITEKNIK INDRAMAYU 2                                                                    Munengsih Sari Bunga            ...
POLITEKNIK INDRAMAYU 3                                                                        Munengsih Sari Bunga        ...
POLITEKNIK INDRAMAYU 4                                                                   Munengsih Sari Bunga             ...
POLITEKNIK INDRAMAYU 5                                                          Munengsih Sari Bunga                      ...
POLITEKNIK INDRAMAYU 6                                                          Munengsih Sari Bunga4. Membuat sumbu horiz...
POLITEKNIK INDRAMAYU 7                                                            Munengsih Sari Bunga6. Untuk sumbu horiz...
POLITEKNIK INDRAMAYU 8                                                           Munengsih Sari Bunga   berukuran W = 10 d...
POLITEKNIK INDRAMAYU 9                                                                    Munengsih Sari Bungad. Mengisi L...
POLITEKNIK INDRAMAYU 10                                                                   Munengsih Sari Bunga            ...
POLITEKNIK INDRAMAYU 11                                                                      Munengsih Sari Bunga         ...
POLITEKNIK INDRAMAYU 12                                                                          Munengsih Sari Bunga     ...
POLITEKNIK INDRAMAYU 13                                            Munengsih Sari BungaMENGATUR DAN MENULIS TEKSAturlah hu...
POLITEKNIK INDRAMAYU 14                                                                                  Munengsih Sari Bu...
POLITEKNIK INDRAMAYU 15                                                                     Munengsih Sari Bunga  Menyimpa...
Upcoming SlideShare
Loading in …5
×

Modul 2 teks, gambar & grafik

3,677 views

Published on

Modul Praktikum Multimedia tentang pembuatan animasi teks, gambar dan grafik

Published in: Education, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,677
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
72
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Modul 2 teks, gambar & grafik

  1. 1. PRAKTIKUM MULTIMEDIA MODUL IITEKS, GAMBAR, DAN GRAFIK Disusun Oleh : Munengsih Sari Bunga POLITEKNIK INDRAMAYU 2012
  2. 2. POLITEKNIK INDRAMAYU 2 Munengsih Sari Bunga MODUL II TEKS, GAMBAR DAN GRAFIKA. TUJUANPada 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 airB. 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 1a. Menggunakan Math. ObjectUntuk menghitung fungsi trigonemetri (sin, cos, tan dsb) dapat digunakan Math. Object.Untuk memanggil Math. Object dapat dilakukan dengan menuliskan Math. pada jendelaScript maka dengan otomatis akan keluar pop-up window yang berisi fungsi-fungsi dariMath. Object.
  3. 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. PRAKTEKI. MEMBUAT GRAFIK SINUS a. Membuka Halaman Kerja 1. Buka halaman baru. Klik Flash File (ActionScript 2.0) atau klik File New
  4. 4. POLITEKNIK INDRAMAYU 4 Munengsih Sari Bunga Gambar 3 2. Set Size halaman pada Properties Panel dengan ukuran 550 x 400 pixels Gambar 4b. 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 6c. 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. 5. POLITEKNIK INDRAMAYU 5 Munengsih Sari Bunga Gambar 83. 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. 6. POLITEKNIK INDRAMAYU 6 Munengsih Sari Bunga4. 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 125. 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. 7. POLITEKNIK INDRAMAYU 7 Munengsih Sari Bunga6. 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 157. 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 168. Untuk sumbu vertical (y) nilai-nilai yang akan digunakan adalah 50, 100, -50 dan - 100. Dengan menggunakan Line Tool buatlah garis tanda nilai
  8. 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 179. Dan jangan lupa untuk memberikan judul/title Grafik Sinus y = 100 sin (x) dengan menggunakan Text Tool bertipe Static Text Gambar 1810. Nonaktifkan kembali fungsi Rulers dan Grid (optional) dengan cara hampir sama dengan cara mengaktifkannya.
  9. 9. POLITEKNIK INDRAMAYU 9 Munengsih Sari Bungad. 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. 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 Grafike. Memberi Script pada Layer Action 1. Seleksi frame pertama layer Action, klik kanan  Actions Gambar 24 2. Isi Script:
  11. 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 Grafikf. 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. 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 = 360II. 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. 13. POLITEKNIK INDRAMAYU 13 Munengsih Sari BungaMENGATUR DAN MENULIS TEKSAturlah huruf yang akan dituliskan, klik menu Text >Character…, lalu pilih Arial Black pada bagian Font danukurannya: 14. Kemudian pada bagian Colors yang terletak dibagian kiri layar Flash, klik Text Tool , dan tulislah kalimat‘NeoTek’ di Movie.MEMBUAT SYMBOLSebelum bisa dianimasikan, tulisan tersebut harus diubahmenjadi symbol. Klik Arrow Tool yang terdapat padabagian Colors, lalu klik pada tulisan untuk memilihnya.Selanjutnya, klik menu Insert > Convert to Symbol…, isikanname: Neotek, lalu pilih Graphic pada bagian Behaviour danklik tombol OK. Maka akan terlihat tanda plus (+) ditengahtulisan yang menandakan tulisan tersebut sudah menjadisymbol.MENGATUR TIMELINETimeline terletak diatas Movie, terdiri dari frame-frame.Sekarang klik pada frame 15 lalu klik menu Insert > Keyframeuntuk memberikan Keyframe pada frame 15. Lakukan halyang sama pada frame 30.MEMPERBESAR TULISANKlik pada frame 15, lalu klik menu Modify > Transform >Scale and Rotate…, isikan Scale: 150 %, lalu klik tombol OK.ANIMASI TULISANInilah saatnya untuk memberikan animasi. Klik pada frame 1lalu pilih menu Modify > Frame…, pilihlah Motion padabagian Tweening. Lakukan hal yang sama pada frame 15.JALANKAN ANIMASIMotion Tween ditunjukkan dengan frame berwarna ungu dangaris panah yang menunjuk dari titik hitam ke titik hitamlainnya . Sekarang klik menu Control >Test Movie untukmenjalankan animasi.
  14. 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. 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 websiteD. 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.

×