Modul 2 teks, gambar & grafik

  • Published on
    14-May-2015

  • View
    3.295

  • Download
    3

DESCRIPTION

Modul Praktikum Multimedia tentang pembuatan animasi teks, gambar dan grafik

Transcript

<ul><li>1.PRAKTIKUM MULTIMEDIAMODUL IITEKS, GAMBAR, DAN GRAFIK Disusun Oleh :Munengsih Sari Bunga POLITEKNIK INDRAMAYU2012</li></ul> <p>2. POLITEKNIK INDRAMAYU 2Munengsih Sari Bunga MODUL IITEKS, 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. POLITEKNIK INDRAMAYU 3Munengsih Sari BungaGambar 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 Kerja1. Buka halaman baru. Klik Flash File (ActionScript 2.0) atau klik File New 4. POLITEKNIK INDRAMAYU 4 Munengsih Sari Bunga Gambar 32. 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. POLITEKNIK INDRAMAYU 5Munengsih Sari BungaGambar 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. POLITEKNIK INDRAMAYU 6Munengsih Sari Bunga4. Membuat sumbu horizontal (x), buatlah sebuah garis dengan menggunakan Line Tooldengan 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. POLITEKNIK INDRAMAYU 7Munengsih 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 Toolberilah 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 Toolbuatlah 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 Tooldengan 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 Toolbertipe Static TextGambar 1810. Nonaktifkan kembali fungsi Rulers dan Grid (optional) dengan cara hampir sama dengan cara mengaktifkannya. 9. POLITEKNIK INDRAMAYU 9Munengsih 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 ColorGambar 20 3. Klik kanan lingkaran yang tadi dibuat lalu pilih Convert to SymbolGambar 21 4. Isi nama symbol dengan nama: grafik, Type: Movie clip dan pilih RegistrationPoint yang paling tengah 10. POLITEKNIK INDRAMAYU 10 Munengsih Sari Bunga Gambar 22 5. Seleksi symbol tadi dan isi Instance name pada panel Properties dengan namagrafik, 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. POLITEKNIK INDRAMAYU 11Munengsih Sari Bunga 3. Lakukan test movie, Ctrl + Enter Gambar 23 4. Save file dengan nama Modul 2 Teks, Gambar dan Grafikf. Penjelasan ScriptScript 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 nilai50.- grafik._y = 200mempunyai arti bahwa kordinat grafik dalam sumbu y berada di nilai200. 12. POLITEKNIK INDRAMAYU 12Munengsih Sari BungaGambar 24Kordinat grafik (50,200) adalah kordinat awal dari gambar grafik yang akan dibuatMaksud Script diatas adalah: Ketika nilai sudut kurang dari 361 (sudut &lt; 361) makaproses perulangan dilakukan.1. Nilai sudut awal adalah 02. a = 100 sin(0) = 03. kordinat grafik di sumbu y = 200 a = 200 0 = 2004. 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 = 17. Proses diatas diulang sampai nilai sudut = 360II. MEMBUAT ANIMASI WEB ATUR MOVIE Pengaturan movie dapat dilakukan melalui Movie Properties. Klik menu Modify &gt; Movie, isikan Width: 200 px, Height: 100 px dan Background Color: Hitam. 13. POLITEKNIK INDRAMAYU 13Munengsih Sari BungaMENGATUR DAN MENULIS TEKSAturlah huruf yang akan dituliskan, klik menu Text &gt;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 kalimatNeoTek di Movie.MEMBUAT SYMBOLSebelum bisa dianimasikan, tulisan tersebut harus diubahmenjadi symbol. Klik Arrow Toolyang terdapat padabagian Colors, lalu klik pada tulisan untuk memilihnya.Selanjutnya, klik menu Insert &gt; 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 &gt; Keyframeuntuk memberikan Keyframe pada frame 15. Lakukan halyang sama pada frame 30.MEMPERBESAR TULISANKlik pada frame 15, lalu klik menu Modify &gt; Transform &gt;Scale and Rotate, isikan Scale: 150 %, lalu klik tombol OK.ANIMASI TULISANInilah saatnya untuk memberikan animasi. Klik pada frame 1lalu pilih menu Modify &gt; 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 &gt;Test Movie untukmenjalankan animasi. 14. POLITEKNIK INDRAMAYU 14Munengsih Sari BungaTAMBAHKAN EFEK TINTHentikan animasi yang telah dijalankan, sekarang kita akanmenambahkan sedikit efek pada animasi yang sudah kitabuat tadi. Klik pada frame 1, lalu klik menu Window &gt; Panels&gt; Effect, Pilihlah Tint pada drop-down menu dan Tint Color:Biru. Lakukan hal yang sama pada frame 15 dengan TintColor: Merah dan frame 30 dengan Tint Color: Ungu.MENAMBAHKAN SUARAAgar tampak lebih cool, tambahkan suara ketika animasidimainkan. Klik pada frame 1, lalu klik menu Window &gt;Common Libraries &gt; Sounds, maka daftar Libray Sounds yangtelah disediakan Flash akan tampil, pilih salah satu, misalnya:Beam Scan. Drag ke atas tulisan NeoTek yang berada diMovie.PUBLIKASI KE BROWSERSebelum dipublikasikan simpanlah terlebih dahulu animasiyang telah dibuat, klik menu File &gt; Save As. Selanjutnya,untuk menampilkan di browser, klik menu File &gt; PublishPreview &gt; HTML. Maka sekarang anda sudah mempunyai fileneotek.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 clickkanan 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 menggeserposisi 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 BungaMenyimpan 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. LATIHANBuatlah grafik atau animasi menggunakan cara yang sama dengan salah satu dari 3praktek yang telah Anda lakukan, lalu tuliskan langkah-langkahnya.E. TUGASBuatlah animasi menggunakan cara yang tidak sama dengan salah satu dari 3 praktekyang telah Anda lakukan, lalu tuliskan apa yang ingin anda kerjakan dan langkah-langkahnya. </p>

Recommended

View more >