LAPORAN PRATIKUM
PEMBELAJARAN PEMBELAJARAN BERBASIS MULTIMEDIA MULTIMEDIA (Objek dan Animasi Dasar)
Oleh :
Mohammad Bilal Adam Malik
168320700016 168320700016
Semester 3 A1
PROGRAM STUDI PENDIDIKAN TEKNOLOGI INFORMASI FAKULTAS KEGURUAN DAN ILMU PENDIDIKAN UNIVERSITAS MUHAMMADIYAH SIDOARJO 2017
LABORATORIUM PEMROGRAMAN PEMROGRAMAN PENDIDIKAN TEKNOLOGI INFORMASI FAKULTAS KEGURUAN DAN ILMU PENDIDIKAN UNIVERSITAS MUHAMMADIYAH SIDOARJO 2017
LEMBAR PENGESAHAN
Telah Diperiksa Isi Laporan Ini
LAPORAN PRATIKUM PEMBELAJARAN PEMBELAJARAN BERBASIS MULTIMEDIA MULTIMEDIA
Disusun oleh :
Mohammad Bilal Adam Malik
168320700016 168320700016
Semester 3 A1
Sidoarjo, 29 November 2017 Mengetahui, Kepala Laboratorium
Rista Rusdianawati, M.Pd.
KATA PENGANTAR
Puji syukur kami panjatkan kehadirat Tuhan Yang Maha Esa yang telah memberikan rahmat dan karunia-Nya sehingga saya sebagai penyusun dapat melaksanakan sebuah praktikum dan menyelesaikannya dengan baik hingga menjadi sebuah laporan resmi praktikum Objek dan Animasi Dasar. Laporan yang saya susun dengan sistematis dan sebaik mungkin ini bertujuan untuk memenuhi tugas kuliah Pembelajaran Berbasis Multimedia. Dengan terselesainya laporan resmi praktikum ini, maka tidak lupa saya sebagai penyusun mengucapkan banyak terima kasih kepada : 1. Bpk. Dr. Nur Efendi, M.Pd., Selaku DEKAN FKIP 2. Bpk. Sultoni, S.Kom., M.T. Selaku Kaprodi Pend.TI. 3. Ibu Rista Rusdianawati, M.Pd.. selaku Kepala Lab TI & Dosen Pengampuh Mata Kuliah Pembelajaran Berbasis Multimedia.. Demikian laporan yang saya buat, mohon kritik dan sarannya atas kekurangan dalam penyusunan laporan ini. Semoga laporan ini dapat bermanfaat bagi semua pihak dan bagi saya selaku penyusun.
Sidoarjo, 29 November 2017
Penyusun
LABORATORIUM PEMROGRAMAN PENDIDIKAN TEKNOLOGI INFORMASI FAKULTAS KEGURUAN DAN ILMU PENDIDIKAN UNIVERSITAS MUHAMMADIYAH SIDOARJO 2017
LEMBAR ASISTENSI OBJEK DAN ANIMASI DASAR/MULTIMEDIA DASAR PRATIKUM KE-1
Judul Pratikum Nama/NIM Dilaksanakan pada
: Objek dan Animasi Dasar : Mohammad Bilal Adam Malik/168320700016 : kamis, 23 november 2017
Sidoarjo, 29 November 2017 Mengetahui, Asisten Laboratorium
Dosen Pembimbing,
Widya Ayuningtyas
Rista Rusdianawati, M.Pd.
PRATIKUM KE-1 OBJEK DAN ANIMASI DASAR
A. Pendahuluan
Animasi sebenarnya merupakan penyesuaian dari kata ‘animation’ yang berasal dari kata dasar ‘to animate’ dalam kamus umum InggrisIndonesia berarti menghidupkan. Secara umum animasi merupakan suatu kegiatan menghidupkan, menggerakkan benda mati dan suatu benda mati diberi dorongan, kekuatan, semangat dan emosi untuk menjadi hidup atau hanya berkesan hidup. Dewasa ini software animasi yang berkembang dimasyarakat sangatlah banyak salah satu software yang paling sering digunakan adalah Adobe Flash karena software ini mempunyai sifat open source, Adobe Flash merupakan software pengolahan 2 dimensi dan animasi yang bisa dijalankan di windows atau linux. Software ini digunakan untuk membuat desain objek dalam bentuk 2 dimensi dan gambar yang diperlihatkan berbentuk seperti datar dan tidak nyata seperti contohnya film kartun. Adanya Pratikum diperlukan karena dapat digunakan untuk membatu seseorang yang akan belajar mengenai objek dan animasi dasar menggunakan software Adobe Flash. objek dan animasi dasar sendiri merupakan dasar teori yang menerangkan apa sajakah objek dan bagaimana cara menganimasikannya dengan software Adobe Flash. Dalam hal ini saya sebagai penyusun akan menysun hasil dari pratikum objek dan animasi dasar.
B. Dasar Teori 1. Software Adobe Flash
Adobe Flash — sebelumnya bernama Macromedia Flash dan berganti nama setelah dibeli Adobe — merupakan perangkat lunak yang cukup populer di bidang grafik (khususnya animasi). Flash mampu menghasilkan beragam aplikasi animasi yang atraktif, baik untuk lingkungan desktop maupun Internet (web).
4. IDE Dflash
Flash menyediakan IDE (Integrated Development Environment) atau lingkungan pengembangan terintegrasi yang cukup lengkap. Di lingkungan inilah para developer Flash bekerja untuk menghasilkan beragam aplikasi. Di ini pula nantinya kita akan bekerja untuk menghasilkan objek-objek dan menambahkan animasi yang variatif.
Secara default, Flash akan menampilkan Start Page setiap kali ia mulai dijalankan. Tampilan Start Page berisi item yang baru dibuka dan menu untuk menciptakan projek baru.
Gambar 1. Halaman awal Flash Disini saya menggunakan Adobe Flash dengan versi 2017 tampilan berbeda dengan versi sebelumnya, untuk masuk ke IDE utama Flash CC, menu yang dipilih adalah Create New (ActionScript 3.0) Adobe Flash 2017 sudah mengunakan ActionScript 3.0, berbeda dengan versi sebelumnya yang masih meggunakan ActionScript 2.0. Pilihan ini akan memunculkan tampilan IDE Flash beserta komponen-komponen pendukungnya seperti terlihat pada Gambar 2.
Gambar 2. IDE Flash
a. Tools Panel
Bagian yang normalnya terletak di sebelah kanan ini menyediakan sejumlah kakas (tool) yang dikelompokkan sesuai dengan kegunaannya.
Gambar 3. Tools Panel b. Stage
Stage (atau biasa disebut area kerja) merupakan bidang luas berwarna putih yang terletak di bagian tengah IDE. Bagian ini nantinya akan digunakan untuk meletakkan komponen-komponen animasi, misalnya button. Dalam konteks animasi, bagian ini merepresentasikan layar film.
c. Timeline
Bagian yang berada di atas stage ini berfungsi untuk mengatur konten dan animasi saat bekerja menggunakan layer dan frame.
d. Properties
Window ini memuat pengaturan-pengaturan umum, filter, dan parameter parameter terkait dokumen (stage) dan komponen-komponen di dalamnya.
C. Latihan 1. Menciptakan Objek
Untuk menciptakan suatu objek kita bias menggunakan pendekatan yang variatif. Adapun untuk objek bangun datar umum, kita bias memanfaatkan Oval tool atau Rectangle tool. Langkah-langkah menciptakan objek lingkaran sebegai berikut : 1. Jika lembar kerja belum terbuka, buat dokumen baru melalui menu File > New (atau menggunakan shortcut Ctrl+N menggunakan keyboard).
2. Pada kotak dialog New Document, pilih tipe Actionscript 3.0 kemudian klik OK
Gambar 4. Tampilan membuat document flash baru Untuk memulai membuat objek lingkaran, aktifkan oval tool dengan meng-klik ikonnya (atau melalui shortcut O pada keyboard).
Gambar 5. Mengaktifkan Oval tool 3. Arahkan kursor ke stage (lembar kerja) dan buat objek lingkaran. 4. Untuk menghasilkan objek spesifik, kita bisa melakukan pengauran pada window Properties yang ada dikenan stage.
Gambar 6. Menciptakan objek lingkaran & mevariasi melalui panel propertis Menciptakan objek lain : Untuk menghasilkan objek lain, misalnya kotak atau poligon, Flash menyediakan Rectangle tool (atau melalui shortcut R). Letak tool ini sama seperti Oval Tool dan dimunculkan secara bergantian. Jadi, jika ingin berpindah dari oval ke rectangle atau sebaliknya, cukup tekan R atau O di keyboard. 2. Mewarnai objek
Untuk mengatur perwarnaan objek, Flash menyediakan panel Color Swatches (tekan Ctrl+F9 pada keyboard).
Menetapkan warna : Penetapan sebelum membuat objek dilakukan dengan memilih warna stroke (garis tepi) atau fill (warna isi) terlebih dahulu. Selanjutnya objek yang dihasilkan akan menerapkan warna yang sudah dipilih tadi.
Gambar 7. Mengubah warna objek
Memodifikasi warna : Untuk memodifikasi warna dari suatu objek yang sudah ada, terlebih dahulu seleksi objek tersebut. Langkah ini dapat dilakukan dengan memanfaatkan Selection Tool (V) atau dengan melingkupi objek terkait melalui drag mouse.
Gambar 8. Objek dalam keadaan terseleksi
Setelah objek terseleksi, baru kita bias melakukan modifikasi, misalnya menganti warna atau border (stroke).
Gambar 9. Mengubah warna objek
Warna gradasi : Apabila dikehendaki, kita juga bisa memberikan gradasi warna pada suatu objek. Langkah ini juga dilakukan melalui panel Color Swatches (di pilihan bawah).
3.
Manipulasi Objek
Manipulasi dasar yang acap kali dilakukan pada objek meliputi skala dan rotasi.
Skala dan Rotasi Operasi penskalaan digunakan untuk memodifikasi ukuran objek, sedangkan rotasi untuk memutar posisi opjek. 1. Buat objek kotak dengan border, misal 7.
Gambar 10. Objek kotak
2. Gunakan F ree Transform Tool (atau melalui shortchut Q) untuk memodifikasi skala. Arahkan kursor pada titik-titik kendali untuk memulai penskalaan objek. Pada bagian ini kita juga diperkenankan mengatur rotasi objek.
Gambar 11. Skala dan Rotasi Objek
Sebagai latihan, gunakan menu-menu di Modify > Transform untuk menghasilkan objek-objek custom lainnya.
4.
Animasi Dasar
Sebelum membahas implementasi animasi objek, ada beberapa istilah penting yang perlu dipahami.
F rame: pada dasarnya, setiap gambar disebut sebagai sebuah frame. Di Flash, tiap frame — yang dinotasikan menggunakan kotak — di timeline merepresentasikan frame dari sebuah film.
Keyframe: keyframe sederhananya adalah sebuah frame yang ditetapkan untuk dimunculkan. Bisa juga dikatakan, setiap frame merupakan keyframe.
Di Flash, animasi dapat diciptakan melalui tiga pendekatan: frame-by-
frame, tweening, dan timeline effect. Pendekatan pertama merupakan pendekatan konvensional, di mana animasi dilakukan per frame sehingga cukup rumit. Adapun di sini, akan dijelaskan teknik animasi tweening dan timeline effect.
Tweening Teknik ini dilakukan dengan menciptakan awal dan akhir frame,
kemudian memberikan animasi di antara frame tersebut. 1. Buat dokumen baru dengan tipe Flash File. 2. Buat objek sembarang, misal lingkaran, dan letakkan di sisi kiri.
Perhatikan contohnya seperti Gambar 13. 3. Klik kanan frame sembarang, misal 50, kemudian pilih menu Insert
Keyframe (atau melalui shortcut F6).
Gambar 12. Objek untuk animasi dasar 4. Gunakan selection toll untuk memindahkan objek secara horizontal ke sisi kanan.
Gambar 13. Menambahkan keyframe dan memindah objek 5. Pada timeline, klik kanan di frame 49, kemudian pilih menu Create
Motion Tween. 6. Untuk mengjui hasilnya, tekan Ctrl+Enter Sampai di sini kita sudah berhasil membuat animasi objek yang cukup sederhana.
Ti meline E ffect
Pendekatan ini sebenarnya memanfaatkan wizard yang tersedia untuk menghasilkan animasi secara cepat. 1. Buat dokumen Flash baru. 2. Tambahkan objek lingkaran ke dalam lembar kerja. 3. Seleksi objek lingkaran. 4. Pilih menu I nsert > Timeline E ffects, lalu pilih yang Anda sukai,
misal E ffects > Blur . 5. Atur bentuk animasi, kemudian klik OK. 6. Lihat hasilnya dengan menekan Enter atau Ctrl+Enter .
5.
Shape Tween
Bagian ini akan menjelaskan pembuatan animasi garis memanjang dengan memanfaatkan pendekatan shape tween. Untuk lebih jelasnya, ikuti langkah- langkah berikut: 1. Buat dokumen Flash baru. 2. Buat objek awal berupa garis pendek (atur properti height-nya agar lebih
kelihatan).
Gambar 14. Membuat objek garis 3. Klik frame 20 dan tekan F6 untuk menyisipkan keyframe. 4. Masih di posisi frame 20, seleksi objek awal (garis pendek) kemudian
tekan Delete untuk menghapus. 5. Buat objek baru, misalnya garis yang lebih panjang. 6. Seleksi frame 2 s/d 19, kemudian pilih opsi Shape dari window Properti
inspector. Hasilnya diperlihatkan seperti pada Gambar 15.
Gambar 15. Menggunakan Shape Tween 7. Tekan Ctrl+Enter , untuk menampilkan hasilnya. Maka garis tersebuat akan bergerak memanjang dari F rame 1 ke F rame 19
6.
Guided Motion Tween
Animasi tidak harus merepresentasikan transformasi objek secara horizontal ataupun vertikal. Flash memungkinkan kita membuat bentuk yang variatif, salah satunya adalah animasi berbasis path (jalur) yang kita definisikan. Langkah-langkah pembuatan animasi berbasis path adalah sebagai berikut: 1. Buat dokumen baru. 2. Buat obj ek bola di layer pertama. 3. Tambahkan layer Motion Guide melalui ikon atau dengan mengklik kanan layer pertama. Perhatikan contohnya seperti Gambar 16.
Gambar 16. Menambahkan Motion Guide Layer
4. Klik Frame pertama di Layer Guide, kemudian gambar path dengan menggunakan tool, misal Pencil.
Gambar 17. Gambar Path 5. Klik kanan frame pertama dari Layer 1 (bukan Guide Layer), kemudian pilih menu Create Motion Tween. Secara otomatis, objek bola akan menempel di path awal. 6. Klik frame 50 dari Guide: Layer 1, kemudian klik kanan dan pilih Insert Frame (F5). 7. Klik frame 50 dari Layer 1, kemudian klik kanan dan pilih Insert Keyframe (F6). 8. Klik frame 25 dari Layer 1 dan tekan F6, kemudian pindahkan objek ke titik pertengahan path. 9. Klik frame 50 dari Layer 1 dan tekan F6, kemudian pindahkan lagi objek ke titik akhir path. 10. Tekan Ctrl+Enter. 11. Begitu dijalankan, path tidak akan diperlihatkan. Untuk menjadikannya terlihat, klik frame pertama dari Guide: Layer 1 kemudian tekan Ctrl+C. 12. Tambahkan layer baru, kemudian pilih menu Edit > Paste in Place (atau Ctrl+Shift+V). 13. Jalankan kembali dengan menekan Ctrl+Enter.
Sampai di sini kita sudah berhasil membuat animasi objek yang mengacu pada path.
D. Tugas Pratikum
a. Buat objek sembarang dan berikan animasi transformasi lurus (perpindahan dari sisi kiri ke kanan) sekaligus perubahan warna. Misal awalnya objek berwarna merah, saat sampai di sisi kanan akan berubah warna menjadi hijau. Langkah-langkahnya sebagai berikut : 3. Buat dokumen Flash baru. 4. Buat objek persegi panjang dengan menggunakan
Rectangle Tool (K)
dengan warna misal hijau
Gambar 18. Membuat objek persegi panjang 8. Klik frame 20 dan tekan F6 untuk menyisipkan keyframe. 9. Kemudian di Frame 20, pindahkan objek ke sebelah kanan stage,
kemudian ganti warnanya di properties(missal warna merah).
Gambar 19. Memindahkan objek dan mengganti warna 10. Seleksi frame 2 s/d 19, kemudian klik kanan dan pili Create Shape Tween.
(agara ketika dijalankan akan memperhalus pergerakan objek) 11. Tekan Ctrl+E nter intuk menampilkan hasil. Maka hasilnya berupa objek
bergerak dari kiri ke kanan, dan berubah warna secara halus.
b. Buat animasi sebuah bola yang memantul dari sisi-sisi lembar kerja, diaman nanti akan kembali ke posisi semula. Petunjuk :
Hanya terdapat sebuah objek bola
Gunakan pendekatan animasi yang anda sukai
Pantulan baru berakhir di titik awal pantul.
Langkah-langkahnya sebagai berikut :
E. Penutup a. Kesimpulan
Pada akhirnya apa yang dipelajari pada Modul 1 ini adalah tentang teknik dasar penggunaan Program Animasi yaitu Adobe Flash. Dimana kita mempelajari dasar penggunaannya, seperti mengenal Tool-nya, bagian dari setiap Adobe Flash, seperti mengenal apa itu stage, library, menu, layer, frame, dll. Dapat disimpulkan dengan mempelajari Modul 1 ini kita dapat mengenal program Adobe Flash, dan kita dapat menemukan Basic dari penggunaannya
b. Saran
Temukan Basic -nya, kalua kita mengetahui cara penggunaan Adobe Flash ini, maka kita akan mudah untuk mempelajari Adobe Flash ini.
E. Daftar Pustaka
Rusdianawati, Rista,.M.Pd. (2017), Objek dan Animasi Dasar, Universitas Muhammadiyah Sidoarjo. Sidoarjo.
