Ricky Rudianto: Laporan Praktikum PTI Modul 4

LAPORAN PRAKTIKUM

PENGANTAR TEKNOLOGI INFORMASI

MODUL 4

Disusun oleh :

Nama : Ricky Rudianto

NIM :

Kelas : Teknik Informatika A

LABORATORIUM KOMPUTER

FAKULTAS ILMU KOMPUTER

UNIVERSITAS KUNINGAN

2012

GRAFIK DAN MULTIMEDIA

“PEMBAHASAN”

A. Macromedia Flash MX

Flash merupakan program grafis multimedia dan animasi yang dapat dipergunakan untuk membuat aplikasi web interaktif yang menarik. Selain digunakan sebagai mediapembuat web interaktif. Flash dapat dimanfaatkan sebagai program pembuat game.

Ø Praktek

Langkah pengerjaan :

1. Klik Macromedia yang berada di dekstop, kemudian pilih Macromedia Flash MX. (lihat gambar 1.1)

Klik 2x

Gambar 1.1

2. Maka akan muncul data di folder Macromedia seperti pada gambar 2.1. Kemudian klik 2x “Flash” maka akan terbuka layar Macromedia Flash MX. (lihat gambar 2.2)

Klik 2x

Gambar 2.1

Gambar 2.2

3. Untuk membuat animasi kita harus mempersiapkan terlebih dahulu layar dan ukuran layar.

Klik

Dibawah area kerja terdapat Action – Frame dan Propertis, kita akan pilih Propertis,akan muncul Document Propertis (lihat gambar 4.1), kemudian pilih size lalu. (lihat gambar 4.2)

Gambar 4.1

Gambar 4.2

5. Isikin Dimensionesnya dengan ukuran yang kita inginkan, disini kita akan mengisi widht 500 Px dan height 100 Px. Kemudian klik OK. (lihat gambar 4.2)

6. Kemudian diarea kerja tersebut kita mulai membuka text yang akan kita animasikan, contohnya kita akan menulis “UNIVERSITAS KUNINGAN”. Untuk membuat tulisan klik ikon text tool (T).

Text Tool

Kemudian klik diarea kerja yang sudah kita siapkan tadi. Contohnya kita akan membuat tulisan “UNIVERSITAS KUNINGAN”. (lihat gambar 7.1)

Gambar 7.1

8. Untuk merubah huruf dan warnanya kita gunakan pada Propertis. (lihat gambar 8.1)

Gambar 8.1

9. Kita pilih warna hitam dan font Times New Roman. Baru kita jadikan text itu menjadi animasi caranya sebagai berikut :

10. Klik layer 1. Untuk membuat warna tulisan tampak menarik kita harus membuat layer baru yaitu dengan cara mengklik insert layer , maka akan muncul layer 2. (lihat gambar 10.1)

Klik kanan lalu insert layer, untuk menambah layer

Gambar 10.1

Maka akan muncul layer baru yaitu layer ke-2. (lihat gambar 10.2)

11. Kemudian kita buat warna dasar yang menarik pada layer 2 tersebut, kita bisa menggunakan bentuk gambar atau warna yang kita buat sendiricontoh kita akan menggunakan dengan gambar atau photo.

12. Pilih File Import lalu carigambar yang kita inginkan.

13. Kemudian kita samakan ukuran gambar yang kita import tadi dengan ukuran layar (lihat gambar 13.1). Untuk merubah ukuran gambar, klik kanan gambar dan pilih Rotate and Skew. (Lihat gambar 13.2)

Gambar 13.1

Untuk merubah ukuran gambar sesuai dengan yang kita inginkan atau sesuai dengan ukuran layar kerja

Gambar 13.2

14. Kemudian kita pilih layer 2 dan klik frame 20 kemudian klik kanan pada frame 20 dan pilih Insert KeyFrame. (lihat gambar 14.1)

Apabila sudah di klik pada Insert KeyFrame maka layer kedua akan ada perubahan. (lihat gambar dibawah ini)

Gambar 14.1

15. Begitu juga dengan layer 1 kita lakukan yang sama pula seperti pada layer 2 (lihat gambar 15.1). Kemudian kita pilih layer 2 dan klik titik hitam di Frame 20 dan klik kanan lalu pilih Create Motion Tween (lihat gambar 15.2). Sebelum kita membuat Frame 20 lalu di Create Motion Tweet, terlebih dahulu kita geser gambar dilayar kerja. Begitu juga lakukan hal yang sama pula masih pada layer 2 tetapi klik hitam di Frame 1 dan klik kananlalu pilih Create Motion Tween (lihat gambar 15.3). Sebelum membuat Create Motion di Frame 1, terlebih dahulu kita geser gambar di layar kerja. Maka di area Timelinenya akan ada tanda panah dari Frame 1 ke Frame 2. (lihat gambar 15.4)

Gambar 15.1

Gambar 15.2

Gambar 15.3

Gambar 15.4

16. Setelah itu kita pindahkan layer 1 berada diatas layer 2 dengan cara mengklik tulisan layer 1 dan menggeserkanya ke atas layer 2. (lihat gambar 16.1)

Gambar 16.1

17. Setelah itu klik kanan pada layer 1 dan pilih Maks. (lihat gambar 17.1)

Maka perubahannya :

18. Untuk melihat hasilnya klik Control lalu Test Movie maka kita bisa melihat hasilnya.

19. Bila hasilnya telah sesuai dengan yang kita inginkan maka langkah selanjutnya yaitu menyimpannya dengan cara mengklik File lalu Publish Setting maka akan muncul tampilan seperti gambar 19.1

Gambar 19.1

20. Didalam Publish Setting kita pilih Flash (swf) lalu klik Publish setelah itu klik OK, dan klik File kemudian Save As beri nama Uniku dan Save setelah itu kembali ke File lalu Publish.

21. Setelah selesai kita lihat hasilnya dengan membuka dokumen yang telah kita save.

B. Mengenal Simbol Dan Animasi Frame By Frame

Dasar Teori

Sebelum kita mempelajari jenis-jenis dan teknik animasi dalam flash, terlebih dahulu kita harus memahami simbol, karena untuk membuat animasi objek harus diubah dulu menjadi simbol. Simbol adalah objek yang ada pada dokumen Flash dan dapat diduplikasi sebanyak-banyaknya ke movie tanpa menambah ukuran movie tersebut. Secara umum pada Flash dikenal 3 jenis simbol yaitu :

· Movie clip

· Button

· Grafhic

Teknik animasi Frame by frame merupakan teknik paling dasar, dimana kita harus membuat secara manual setiap pergerakan objek di stage. Teknik animasi ini banyak digunakan pada pembuatan film kartun karena pergerakannya yang sangat halus, namun untuk dibuat membutuhkan kesabaran dan ketelitian sehingga memakan waktu yang cukup lama.

Ø Paktek

Langkah Pengerjaannya :

Latihan 1

1. Buka dokumen / lembar kerja baru dengan cara klik File New.

2. Klik Oval Tool pada Tool Box, lalu atur warnanya di Tool Box bagian color.

3. Klik tombol fill color lalu pilih warna biru.

(1,2, dan 3 lihat gambar dibawah ini)

Lalu klik kanan pada gambar lingkaran tersebut dan pilih Convert to Symbol. Kotak dialog comvert to symbol akan muncul. Pilih jenis symbol graphic kemudian ganti name dengan nama “symbol lingkaran” klik OK.

(lihat gambar dibawah ini)

Maka perubahannya :

Berubah menjadi graphic

Kotak dialog Convert to Symbol

5. Setelah objek menjadi symbol, objek tersebut akan mempunyai ikon masing-masing sesuai dengan symbolnya. Ikon symbol tersebut akan terlihat pada panel library. Untuk melihat klik Window pada menu bar Library. (lihat gambar 5.1)

Gambar 5.1

6. Buat bentuk kotak dengan menggunakan Rectangel Tool kemudian coba kita kenversikan dengan menggunakan tipe movie atau button. Kemudian lihat ikon tersebut pada panel library. Setelah selesai kita simpan praktek diatas dengan nama Latihan5_1. (lihat gambar 6.1)

Di Convert to Symbol

Gambar 6.1

Latihan 2

1. Buka dokumen atau lembar kerja baru dengan cara klik File New.

2. Pada Frame pertama buatlah sebuah kotak dengan menggunakan Rectangle Tool. (lihat gambar 2.1)

Rectangle Tool untuk membuat kotak di layar kerja

Gambar 2.1

3. Klik kanan pada Frame 2, kemudian pilih Insert KeyFrame edit kotak tersebut dengan merotasikannya (lihat gambar 3.1). Caranya : klik kanan pada gambar kotak tersebut kemudian pilih Rotate and Skew. Klik pada ujung kotak kemudian putar gambar 45°. (lihat gambar 3.2)

Klik kanan lalu pilih Insert Key Frame

Setelah dipilih Rotate and Skew, maka gambar kotak tersebut setiap sisi-sinya ditandai dengan tanda kotak hitam. Dan kotak hitam tersebut adalah tanda untuk kita memutar kotak dengan putaran hingga 45°

Gambar 3.1

Tanda untuk memutar sampai 45°. Sebagai contoh saya akan memutar kotak tersebut kesebelah kanan

Kedudukan kotak setelah diputar 45°

Gambar 3.2

4. Lakukan hal yang sama hingga 7 Frame. (lihat gambar 4.1)

Gambar 4.1

5. Klik menu Control Test Movie. Maka terlihat akan terlihat animasi kotak yang sedang berputar kesebelah kanan.

Untuk merubah kecepatan putaran yang kita inginkan. Semakin bertambah fpsnya maka semakin cepat putaran tersebut

Ubah kecepatan dari 12fps menjadi lebih kecil atau lebih besar. (lihat gambar 6.1)

Gambar 6.1

7. Simpan praktek diatas dengan nama latihan5_2.

Latihan 3

1. Buka dokumen / lembar kerja baru dengan cara klik File New.

Pembuatan gambar diFrame-1

Pada Frame-1 buat gambar orang yang menggunakan Oval Tool dan Rectangle Tool seperti gambar berikut ini (bedakan warna kepala dan bola).

Pembuatan gambar d Flash

Pembuatan gambar di Frame-2 dan lihat perubahan gambar dari Frame-1 ke Frame-2

Klik kanan pada Frame-2 lalu pilih Insert KeyFrame. Kemudian edit sehingga menghasilkan gambar seperti berikut ini. Lalu geser berdekatan dengan gambar sebelumnya. (atau gambar sebelum diedit) :

4. Ikuti langkah Frame ke-2 sampai Frame ke-7, hingga memperoleh gambar berbeda pada setiap Frame seperti gambar-gambar berikut ini :

Frame-1 Frame-2 Frame-3 Frame-4

Frame-5 Frame-6 Frame-7

5. Klik menu Control Test Movie. Maka akan terlihat animasi orang yang sedang bermain bola.Ubahlah kecepatannya (rate) menjadi 3 fps.

6. Simpan hasil praktek diatas dengan nama latihan5_3.

“TUGAS MODUL”

Pengerjaan :

1. Buatlah animasi frame by frame “orang yang sedang bermain basket” dengan kreasi anda sendiri.

2. Perhatikan tempat disekeliling rumah anda, buatlah animasi bunga dari mulai kuncup hingga menjadi mekar (gunakan teknik animasi frame by frame).

3. Apa yang terjadi bila pada latihan 2 (langkah no 2), jika Inser KeyFrame diganti dengan Insert Blank KeyFrame, jelaskan perbedaannya.

4. Buat aplikasi sederhana yang interaktif antara pembuatan text dan gambar.

Langkah pengerjaannya :

No. 1

1. Buka dokumen / lembar kerja baru dengan cara klik File New. Pada pembuatan animasi frame by frame “orang yang sedang bermain basket” saya menggunakan sebanyak 14 Frame dan 3 fps.

2. Pada Frame-1 buatlah gambar dengan menggunakan Oval Tool dan Rectangle Tool seperti gambar berikut ini (bedakan warna kepala dan bola) :

3. Klik kanan pada Frame-2 lalu Insert KeyFrame. Kemudian edit gambar sehingga menghasilkan gambar seperti berikut ini, lalu geser berdekatan dengan gambar sebelumnya atau gambar sebelum diedit.

4. Ikuti langkah Frame ke-2 sampai Frame ke-14, hingga diperoleh gambar yang berbeda pada setiap Frame seperti gambar berikut ini :

Frame-1 Frame-2 Frame-3 Frame-4

Frame-5 Frame-6 Frame-7 Frame-8

Frame-9 Frame-10 Frame-11

Frame-12 Frame-13 Frame-14

5. Klik menu Control Test Movie. Maka akan terlihat animasi orang yang sedang bermain basket. Kecepatannya (rate) saya memilih dengan kecepatan 3 fps.

6. Simpan tugas mandiri diatas dengan nama tugas mandiri 1.

No. 2

1. Buka dokumen / lembar kerja baru dengan cara klik File New. Untuk menggambar bunga yang sedang mekar.

2. Pada Frame-1 buatlah gambar dengan menggunakan Line Tool hingga membentuk gambar seperti dibawah ini :

3. Klik kanan pada Frame-2, lalu pilih Insert KeyFrame. Kemudian edi gambar sehingga menghasilkan gambar seperti berikut ini, jadi seolah-olah gambar bunga tersebut akan mekar.

4. Lakukan hal yang sama seperti pada Frame ke-2 sampai Frame ke-5, karena saya membuat sampai 5 Frame sampai benar-benar bunga tersebut mekar. Lihat perubahan gambar dibawah ini :

Frame-1 Frame-2 Frame-3

Frame-4 Frame-5

5. Klik menu Control Test Movie. Maka akan terlihat animasi bunga yang sedang mekar. Ubahlah kecepatannya dengan (rate) 3 fps.

6. Simpan hasil tugas mandiri diatas dengan nama tugas mandiri 2.

No. 3

Perbedaannya :

1. Pada saat pembuatan kotak di Frame-1 sudah selesai, kita akan membuat gambar yang ke 2 yaitu di Frame-2dengan kotak yang sama dengan klik kanan di Frame ke-2 lalu pilih Insert Blank KeyFrame, ternyata gambar kotak tersebut menghilang, apabila kita akan membuat kotak yang sama pada Frame ke-1, kita copy kotak pada Frame-1 kemudian paste pada Frame-2. Setelah itu Rotate and Skew dan putar hingga 45°. Dan lakukan hal yang sama pada Frame-Frame selanjutnya sampai Frame yang ke-7.

2. Apabila sudah selesai dan di Test Movie, perubahan yang kedua terlihat dari hasilnya. Pergerakan Insert Blank KeyFrame semakin lambat daripada Insert KeyFrame.

3. Pada pemilihan Insert Blank KeyFrame dilihat dari hasilnya pergerakannya sama saja pada setiap Frame selalu ada jeda pada saat perputaran kotak. Akan tetapi pada Insert KeyFrame tidak ada jeda jadi pergerakannya sangan mulus dan apabila sudah sampai perputaran Frame yang terakhir perputaran tersebeut akan berhenti sejenak dan dilanjut lagi pada Frame pertama.

No. 4

Saya akan membuat animasi perpaduan antara text dengan gambar. Dengan nama Teks : Ricky Rudianto. Saya akan membuat terlebih dahulu satu huruf di setiap satu Frame dan huruf ke dua saya membuatnya di Frame ke-2 dan seterusnya sampai ke Frame 14. Dan diakhiri dengan gambar.

Langkah pengerjaan :

1. Buka dokumen / lembar kerja baru dengan cara klik File New.

2. Pada Frame-1 buat animasi huruf seperti berikut. (lihat gambar 2.1)

Gambar 2.1

3. Kemudian klik kanan di Frame-2 dan pilih Insert KeyFrame. Dan kemudian lihat animasi huruf selanjutnya. (lihat gambar 3.1)

Gambar 3.1

4. Ikuti langkah ke-3 sampai huruf tersebut selesai.

Baris pertama : Ricky Rudianto

Baris kedua : Teknik Informatika

Baris ketiga : Universitas Kuningan

Pembuatan animasi huruf ini membutuhkan sampai 20 Frame.(lihat gambar 4.1)

Gambar 4.1

5. Kemudian kita klik kanan di layer 1 dan pilih Insert layer. Untuk menambahkan objek gambar di layar kerja.

6. Kemudian File lalu Impotr. Cara terbut untuk memasukan objek gambar yang kita inginkan.

7. Setelah objek gambar sudah masuk ke layar kerja kita edit sampai menutupi huruf-huruf perbaris. Dan kemudian pada layer ke-2 kita klik kanan di Frame 45 lalu geser gambar tersebut. Lakukan hal yang sama pada layer 1 d Frame 45.

8. Kemudian klik kanan di Frame 45 lalu pilih Create Motion Tween. Lakukan hal yang sama di Frame yang pertama hinnga membentuk gambar panah (lihat gambar 8.1). Lihat kedudukan gambar (lihat gambar 8.2)

Gambar 8.1

Gambar 8.2

9. Kemudian klik dan tekan pada layer 1 kemudian geser sampai berada diatas layer 2 kemudian lepas, sehingga sekarang layer 2 berada di bawah layer 1 (lihat gambar 9.1). Lihat perubahan gambar sebelum dan sesudah d drag layernya. (lihat gambar 9.2)

Gambar 9.1

Gambar 9.2

10. Untuk melihat hasilnya klik Control lalu Test Movie.

11. Bila hasilnya telah sesuai dengan yang kita harapkan maka langkah selanjutnya kita save dengan cara klik File Publish Setting.

12. Didalam Publish Setting kita pilih Flash (swf) lalu klik Publish setelah itu klik OK, dan klik File Save As beri nama tugam mandiri 4. Setelah itu kembali ke File Publish.

13. Setelah selasai kita lihat hasilnya dengan membuka dokumen yang telah kita save.

“KESIMPULAN”

A. Macromedia Flash MX

B. Mengenal Simbol Dan Animasi Frame By Frame

• Movie clip

• Button

• Grafhic

Ricky Rudianto

Monday 16 September 2013

Laporan Praktikum PTI Modul 4

No comments:

Post a Comment

Ricky Rudianto