LAPORAN PRATIKUM

PEMBELAJARAN BERBASIS MULTIMEDIA

(Objek dan Animasi Dasar)

Oleh :

Mohammad Bilal Adam Malik 168320700016

Semester 3 A1

PROGRAM STUDI PENDIDIKAN TEKNOLOGI INFORMASI

FAKULTAS KEGURUAN DAN ILMU PENDIDIKAN
UNIVERSITAS MUHAMMADIYAH SIDOARJO
2017
 LABORATORIUM PEMROGRAMAN
PENDIDIKAN TEKNOLOGI INFORMASI
FAKULTAS KEGURUAN DAN ILMU PENDIDIKAN
UNIVERSITAS MUHAMMADIYAH SIDOARJO
2017

LEMBAR PENGESAHAN

Telah Diperiksa Isi Laporan Ini

LAPORAN PRATIKUM
PEMBELAJARAN BERBASIS MULTIMEDIA

Disusun oleh :

Mohammad Bilal Adam Malik 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 : Objek dan Animasi Dasar

Nama/NIM : Mohammad Bilal Adam Malik/168320700016
Dilaksanakan pada : kamis, 23 november 2017

Sidoarjo, 29 November 2017

Mengetahui, Dosen Pembimbing,
Asisten Laboratorium

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 Free 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.
 Frame: 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.
  Timeline Effect
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 Insert > Timeline Effects, lalu pilih yang Anda sukai,
misal Effects > 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 Frame 1 ke Frame 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+Enter 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.