LAPORAN III, IV, V, VI, VII

PRATIKUM
MACROMEDIA FLASH 8

MATA KULIAH : Teknologi Media Pendidikan

DOSEN PENGAMPU : Winna Dharmayanti, S.Kom., M.Pd

Disusun Oleh :
Rina Yulianda
232010086
D Sore / Semester II Ganjil

PRODI PENDIDIKAN TEKNOLOGI INFORMASI DAN KOMPUTER

FAKULTAS PENDIDIKAN MATEMATIKA ILMU ENGETAHUAN ALAM DAN
TEKNOLOGI
PONTIANAK 2021
 Pertemuan III : Frame By Frame

A. TUJUAN PEMBELAJARAN :
1. Mahasiswa mampu menggunakan aplikasi flash
2. Mahasiswa mampu membuat animasi frame by frame.

B. MATERI AJAR :
Frame by frame atau frame per frame merupakan salah satu animasi yang terdapat pada
flash. Animasi frame by frame, merupakan animasi yang dimana setiap perubahan gerak atau
bentuk sebuah animasi diletakan pada asetiap urutan frame. Semakin banyak frame yang
digunakan untuk setiap pergerakan, maka akan semakin halus pergerakan animasi yang
dihasilkan.
Praktek animasi frame by frame :
1. Buka macromedia flash 8.
2. Pada layer 1, buat sebuah garis lurus.

3. Buat layer baru, dan beri nama layer 2. Selanjutnya, buat gambar bola dan letakkan ujung
sebelah kiri lembar kerja.
4. Klik kanan pada frane 20 di layer 1, pilih “insert key frame”.
5. Klik kanan pada frame 20 dilayer 2, kemudian pilih “insert key frame”, dan letakkan bola
diujung sebelah kiri lembar kerja.

6. Klik kanan antara frame 1 dan 20 pada layer 1, kemudian pilih “create motion tween”. Create
motion frame berfungsi untuk memperhalus pergerakan animasi.

7. Tekan “enter” untuk menjalankan bola.

 Pertemuan IV : Tweened Animation

a. TUJUAN PEMBELAJARAN :
1. Mahasiswa mampu menggunakan aplikasi flash
2. Mahasiswa mampu membuat tweened animation.
3. Mahasiswa mampu membuat group dan grouping animasi, menambahkan tween dan
melakukan rotasi.

b. Materi Ajar
Materi yang dipelajari pada bagian ini adalah: Pembuatan animasi bergerak. Membuat
group dan un-group. Efek tambahan saat animasi: rotasi, easing, motion effect (efek muncul dan
menghilang), motion guide (animasi bergerak yang mengikuti suatu jalur tertentu)
Pada tutorial pertama (animasi Jamur) Anda telah mempelajari bagaimana membuat
animasi sederhana. Prinsip animasi pada Flash adalah menambahkan tween di antara dua frame
penting (keyframe).
 Ada dua jenis tween: shape tween dan motion tween. Di tutorial pertama yang kita gunakan
adalah shape tween. Pada tutorial ketiga ini, giliran motion tween yang akan kita coba.
 Motion tween hanya dapat dilakukan terhadap simbol atau group. Oleh karena itu
sebelum masuk ke materi Motion Tween akan dibahas terlebih dulu mengenai group
sedangkan materi simbol telah dibahas pada tutorial berikutnya.

1. Group dan Ungroup

Group pada prinsipnya adalah mengelompokkan beberapa objek menjadi satu kesatuan.
Contohnya adalah jamur yang kita buat pada tutorial pertama. Jamur tersebut memiliki
dua bagian, lingkaran bawah dan lingkaran atas. Tanpa group, jika kita ingin memindahkan
jamur tersebut ke suatu posisi, yang harus kita lakukan adalah memindahkan satu persatu bagian
jamur. Bagaimana jika kita ingin memutarnya? Itu juga harus dilakukan satu persatu.
Bagaimana jika jamur kita terdiri atas 5 bagian? Akan semakin banyak waktu yang harus
dikeluarkan. Dengan group, hal tersebut dapat dilakukan dengan lebih mudah.
Berikut langkah-langkahnya membuat grouping objek:
1) Buat file baru
2) Buat beberapa objek, misalnya lingkaran dan segiempat seperti gambar di bawah.

3) Objek lingkaran (1 buah), segiempat (3 buah) pada gambar diatas masih terpisah-pisah.
Untuk meng-groupnya, pilih semua gambar yang akan di-group dengan cara memilih
selection tool, lalu drag membentuk wilayah segiempat disekitar gambar sehingga keempat
objek tersebut masuk.

4) Objek yang terpilih akan berubah warnya (bintik-bintik putih). Pililh menu Modify 
Group (Ctrl-G). Terlihat kotak berwarna biru di sekitar gambar. Sekarang gambar sudah
di-group. Silahkan drag untuk memindahkannya. Cobalah fasilitas lain (klik kanan  Free
Transform).
 5) Misalkan kita ingin memperbesar hanya bagian kepala. Bagaimana caranya? Kita tidak
bisa men-select kepala orang ini karena sudah di-group! Salah satu cara adalah dengan
meng-ungroup-nya terlebih dulu. Pilih gambar, lalu pilih menu Modify  Ungroup (Ctrl-
Shift-G). Anda sekarang bisa men-select bagian kepala. Double klik kepala, lalu klik kanan
untuk memilih menu scale. Perbesar sedikit, atur posisinya agar di tengah dan selesai.
Untuk memasukkan kepala dalam group lagi, lalukan kembali langkah 4.
6) Jika kita sering mengubah-ubah elemen dari suatu grup, langkah 5 pasti terasa kurang
praktis. Alternatif lain yang lebih mudah adalah dengan masuk ke dalam mode edit group.
Mirip seperti mode edit simbol, caranya dengan men-double klik gambar yang sudah
di-group. Saat masuk ke mode edit group, bagian atas stage akan berubah menjadi berikut:

Klik stage untuk men-deselect. Lalu perbesar kepala seperti pada langkah 5
(select,scale). Setelah selesai, klik scene 1 untuk kembali ke stage utama. Gambar orang
yang kita buat masih dalam keadaan ter-group, jauh lebih mudah bukan?

2. Menambahkan Motion Tweening

Perlu diingatkan lagi bahwa motion tween hanya dapat dilakukan pada simbol atau objek
yang telah digroup. Bahkan untuk bentuk sederhana seperti rectangle atau lingkaran, tetap
harus di-group atau dijadikan simbol terlebih dulu.
Sekarang coba menganimasikan gambar orang yang telah kita buat dari kiri ke kanan.
Langkah-langkahnya sebagai berikut:
1) Pindahkan gambar orang ke bagian paling kiri.
2) Pilih frame 20, lalu jadikan keyframe dengan F6.
3) Geser gambar orang ke bagian paling kanan.
4) Pilih frame diantara frame 1 dan 20 (misalnya frame 15).
Pada panel properties, pilih tween dengan Motion.
Coba animasi dengan menekan Enter. Gambar orang akan bergerak dari kiri ke kanan.

Anda juga dapat mengubah ukuran gambar, sehingga saat gambar bergerak ukurannnya juga
berubah. Langkahnya adalah sebagai berikut:
 Pastikan kotak scale di-check
 Pilih frame 20, ubah ukuran objek menjadi lebih besar.
 Lihat hasilnya dengan menekan enter.

3. Menambahkan Rotasi
Untuk menambahkan rotasi saat objek bergerak, pilihlah frame satu. Lihat frame
properties

Isi rotate dengan CW (clock wise = searah dengan jarum jam), lalu isi kotak sebelahnya
dengan 1 yang berarti objek akan berputar sekali sebelum mencapai tujuan, semakin besar nilai
ini semakin banyak objek berputar. Tekan enter untuk melihat hasilnya. Nah, silahkan bermain-
main dengan rotate dan jumlah perputaran.
4. Easing
Easing adalah proses mengatur akselerasi animasi dan kebalikannya. Anda dapat
mengatur apakah animasi dimulai pelan kemudian akan semakin cepat (easing in) atau mulai
cepat dan melambat (easing out). Dengan easing, animasi akan tampak lebih hidup. Contohnya
adalah animasi benda jatuh, animasi ini harus menggunakan easing in karena semakin lama akan
semakin cepat, sedangkan benda yang dilemparkan ke atas sebaliknya, semakin lama akan
semakin lambat (easing out).

Efek easing dilakukan dengan mengisi nilainya pada frame properites. Nilai 0 berarti
kecepatan animasi konstan. Nilai lebih besar dari 0 adalah easing out dan sebaliknya adalah
easing in.

Sekarang mencoba efek ini dengan membuat sebuah animasi bola memantul. Animasi ini
melibatkan dua bola, salah satu dengan easing dan yang lainnya animasi gerak biasa. Setiap bola
diletakkan pada sebuah layer, sehingga terdapat dua layer. Harap diingat bahwa animasi motion
tweening tidak bisa dilakukan jika ada dua objek yang terletak di satu layer, sehingga kita harus
meletakkan setiap bola pada layer yang terpisah.

Berikut adalah langkah-langkahnya:

1) Buat file baru
2) Tambahkan lingkaran, jadikan sebagai simbol. Caranya dengan men-select seluruh
lingkaran dengan double klik, kemudian klik kanan dan pilih menu “Convert to Symbol”
atau F8
 Beri nama “bola” dengan behavior sebagai graphic.

3) Tambahkan keyframe pada frame 15 dan 30. Frame 1 sd 15 merupakan bagian saat bola
turun, sedangkan frame 15 sd 30 bagian saat bola naik.

4) Sekarang kita akan membuat animasi saat bola jatuh ke bawah. Pilih frame 15 lalu Pindahkan
bola ke bagian bawah stage (tip: lebih mudah dilakukan sambil menekan tombol Shift saat
memindahkan bola). Tambahkan motion tween antara frame 1 dan 15. Coba animasi dengan
menekan enter.
5) Kemudian buat animasi saat bola memantul ke atas. Pilih frame 30, karena posisi bola sudah
diatas, kita tinggal menambahkan motion tween antara frame 15 dan 30. Timeline akan
terlihat seperti berikut:

Selanjutnya tekan enter, terlihat bola jatuh kebawah dan memantul lagi keatas. Sekarang
saatnya kita membuat bola kedua.
6) Tambahkan layer baru (ingat materi layer yang ada di tutorial jamur tumbuh). Beri nama layer
pertama dengan bola1 dan layer kedua dengan bola2
7) Pada layer bola2, pilih frame 1, tambahkan simbol bola di sebelah bola pertama, dan buat
animasi seperti pada langkah 1-5, sehingga stage dan time line akan menjadi:
 Coba tekan enter, kedua bola itu akan turun dan naik secara bersamaan.

8) Sekarang saatnya menambahkan easing saat bola jatuh, pilih frame diantar 1 dan 15 (pastikan
pada layer bola2), ubah isi ease menjadi -100 (minus 100, easing in).

Perhatikan efeknya, bola kedua akan jatuh semakin cepat. Terlihat lebih natural bukan? Hal
ini sesuai dengan keadaan sesungguhnya bahwa saat benda jatuh akan mengalami percepatan.
9) Lanjutkan dengan memberikan easing out saat bola memantul keatas. Pilih frame antara 15-30
(sekali lagi pastikan pada layer bola2) dan isi nilai Ease dengan 100 (positif 100, easing
out). Terlihat bola akan melambat.

5. Motion Tweening Effect

Ada dua cara untuk membuat sebuah objek menghilang secara perlahan-lahan dan
kebalikannya (dari hilang lalu muncul). Pertama dengan mengganti nilai alpha dan kedua adalah
mengatur tint. Alpha berkaitan dengan nilai transparansi suatu objek dan tint berkaitan dengan
warna.
 Berikut langkah-langkahnya:
1) Gunakan file bola memantul pada contoh sebelumnya.
2) Sekarang kita coba dengan menggunakan nilai Alpha. Pilih frame 15 pada layer bola1. Pilih
simbol bola, pada bagian properties, pilih Alpha sebagai color, dan ubah persentasenya
menjadi 0%

Bola akan menghilang karena alpha 0% sama artinya dengan transparan penuh (seperti kaca
tembus pandang). Tes animasi dengan menekan Enter.

3) Saatnya mencoba tint. Pilih frame 15 pada layer bola2. Pilih simbol bola. Pada bagian
properties, ganti color dengan Tint, pilih warna putih dan persentase 100%. Coba jalankan
animasi. Keduanya akan menghasilkan efek yang sama.

Alpha merupakan sifat transparan, dapat dianalogikan dengan penggunaan lapisan kaca buram
yang semakin lama semakin jernih (nilai transparan semakin kecil).
Tint adalah warna, efek hilang terjadi karena warna bola sama dengan warna latar. Untuk
membuktikannya silahkan ganti warna latar dengan warna selain warna putih dan warna bola
(klik kanan stage dan pilih “Document Properties”). Dengan teknik alpha efek hilang tetap
terjadi, tetapi untuk tint bola terlihat berubah warna menjadi putih.

Perbedaan antara alpha dan tint

Kelebihan tint adalah lebih cepat, sedangkan teknik alpha membutuhkan komputasi yang lebih
rumit sehingga lebih lambat. Teknik tint juga dapat digunakan untuk menghasilkan efek
perubahan warna secara perlahan-lahan (misal dari warna biru ke warna merah).
 Pertemuan V : Motion Shape, Shape Hint dan Motion Guide

A. TUJUAN PEMBELAJARAN :
1. Mahasiswa mampu menggunakan aplikasi flash
2. Mahasiswa mampu membuat motion shape.
3. Mahasiswa mampu membuat shape hint.
4. Mahasiswa mampu membuat motion guide.

B. Materi Ajar
1. Motion Shape
Animasi Motion Shape adalah animasi perubahan bentuk. Pergerakan animasi yang mengubah
bentuk dari bentuk satu ke bentuk yang lain. Contohnya bentuk bulat ke bentuk kotak, dari
bentuk oval menjadi bentuk bintang dan lain-lain.
 Animasi Shape 1
Pada contoh animasi shape 1 kita akan membuat animasi perubahan bentuk dari objek
kotak menjadi objek bintang. Ikuti langkah berikut :
1) Buat objek kotak pada frame 1 dan atur posisinya seperti pada gambar berikut.

2) Klik kanan frame 25, pilih Insert Blank Keyframe sehingga tampilan timeline tampak
seperti pada gambar
3) Klik pada frame 25 dan buat objek bintang dengan posisi yang berbeda dari objek kotak.

4) Klik kanan diantara frame 1 sampai dengan frame 25, kemudian pilih Create Shape
Tween.

5) Jalankan animasi dan perhatikan perubahan bentuk objek.

 Animasi Shape 2
Animasi Shape 2 ini akan membahas perubahan bentuk yang kita terapkan pada objek
teks. Ikuti langkah berikut ini:
1) Buat objek teks “ADB” pada frame 1 menggunakan Text Tool

2) Klik kanan frame 25 dan pilih Insert Keyframe.

3) Klik pada frame 25 dan ganti teks “ADB” menjadi “FLS”.
 4) Untuk pembuatan animasi perubahan bentuk pada objek teks, maka teks tersebut harus
diubah menjadi sebuah shape (objek biasa)
5) Klik frame 1 dan tekan Ctrl + B sebanyak dua kali sehingga objek “ADB”.
6) Klik frame 25 dan tekan Ctrl + B sebanyak dua kali.
7) Ubah warna menjadi warna lain, contohnya warna biru
8) Klik kanan dianatara frame 1 sampai dengan frame 25 dan pilih Create Shape Tween
9) Jalankan animasi dengan Ctrl + Enter dan perhatikan hasilnya.

2. Shape hint
 Shape hint merupakan suatu fasilitas yang diberikan oleh flash. Shape hint membuat
setiap perubahan bentuk animasi dapat diatur sesuai keinginan.
Praktek animasi shape hint :
1. Buka macromedia flash 8.
2. Pada layer 1, buat objek kotak di layer 1. Letakkan objek kotak di sebelah kiri atas
lembar kerja.

3. Klik kanan pada frame 20, pilih “insert blank keyframe” untuk menyisipkan keyframe
kosong.
4. Buat objek kotak pada frame 20 dan letakkan di sebelah kanan bawah lembar kerja.
5. Dengan menggunakan “selection tool”, ubah bentuk objek kotak pada frame 20.

6. Klik di antara frame 1 sampai dengan frame 20.

7. Ubah pilihan pada kotak “tween” dalam properties inspecture menjadi “shape”.
8. Langkah selanjutnya memberikan “shape hint “ pada objek kotak.
9. Klik frame 1 untuk memilih objen kotak pertama.
10. Klik menu “Modify  Shape, pilih Add Shape Hint”.
 11. Geser dan letakkan shape hint di sudut objek. Tambahkan tiga shape hint lagi, hingga
semua sudut mendapatkan shape hint.

12. Selanjutnya klik pada frame 20, hingga objek kotak kedua terpilih.
13. Atur shape hint pada kotak kedua hingga semua sudut memiliki shape hint.
14. Tekan “enter” untuk menjalankan shape hint.

3. Motion Guide
Motion guide adalah fasilitas untuk menentukan jalur pergerakan objek saat beranimasi.
Untuk lebih memahami konsep motion guide, ikuti tutorial berikut:
1) Buat file baru
2) Gambar objek apa saja. Dalam contoh ini yang digunakan adalah gambar ikan yang
dibuat dengan pencil tools (option: smooth). Lihat tutorial pertama untuk penggunaan
pencil tools. Gunakan paint bucket tools untuk mengisi warna .
 Hasilnya adalah sebagai berikut:

3) Jadikan simbol (select semua dan tekan F8). Beri nama simbol ini “Simbol Ikan”
4) Tambahkan keyframe pada frame 20
5) Ganti nama layer1 dengan “Ikan”
6) Pada panel timeline, klik icon dengan titik-titik merah yang melengkung (lihat gambar
bawah). Pastikan bahwa Anda telah menambah keyframe pada frame 20. Flash akan
menambahkan satu layer baru “Guide Ikan”. Pada layer inilah kita tentukan lintasan
animasi.

7) Buat jalur lintasan ikan kita pada layer “Guide Ikan”. Jalur ini bisa dibuat dengan pencil
tools, rectangle tools, oval dan seterusnya. Yang penting ada garis lintasan. Warna dan
bentuk garis tidak penting, karena tidak akan dimunculkan pada film akhir. Supaya tidak
berubah-ubah, anda dapat me-lock layer ini.
8) Kembali ke layer ikan. Pilih frame 1, pilih selection tool, drag titik kecil di tengah
ikan ke arah awal lintasan (kondisi awal). Pastikan bahwa snap to object terpilih (menu
view  snap to objects). Dengan snap secara otomatis titik kecil di tengah ikan akan
“lengket” dengan lintasan. Ingat, lakukan tween pada layer ikan, bukan layer motion
guide.

9) Pilih frame 20 (pastikan ada di layer ikan), lakukan seperti pada langkah 8, bedanya
sekarang arahkan ikan pada ujung lintasan (kondisi akhir).

10) Tambahkan motion tween antara frame 1 sd 20 untuk layer ikan (pilih frame antara 1-20,
lalu set tween dengan motion). Tes animasi dengan menekan Enter. Terlihat bahwa ikan
sekarang mengikuti jalur sesuai dengan yang kita buat di layer “Guide Ikan”
11) Silahkan coba animasi Anda dengan Enter atau ctrl-Enter!
 Pertemuan VI : Animasi Masking

A. TUJUAN PEMBELAJARAN
1. Mahasiswa mampu menggunakan aplikasi flash.
2. Mahasiswa mampu membuat animasi masking.

B. MATERI AJAR
Prinsip kerja dari animasi masking adalah menampilkan bidang yang tertutup dan
menyembunyikan bidang yang terbuka. Ikuti langkah berikut untuk membuat animasi masking
sederhana.
1) Buka lembar kerja baru
2) Tambahkan layer baru sehingga di dalam timeline terdapat dua buah layer yaitu Layer 1 dan
layer 2.
3) Ubah nama layer 1 menjadi “Teks” dan Layer 2 menjadi “Masking”.
4) Klik frame 1 layer “Teks” kemudian buat teks “Pendidikan Teknologi Informasi dan
Komputer”
5) Perpanjang teks “Pendidikan Teknologi Informasi dan Komputer” hingga frame 35 dengan
cara klik kanan frame 35 kemudian pilih Insert Frame.
6) Selanjutnya klik frame 1 pada layer “Masking”
7) Buat objek kotak dan letakkan posisi objek tersebut di kiri teks.
8) Klik kanan frame 1 layer “Masking” kemudian pilih Create Motion Tween.
9) Klik kanan frame 35 kemudian pilih Insert Keyframe untuk
membatasi gerak objek dan geser posisi objek ke
sebelah kanan teks seperti pada gambar disamping.

10) Selanjutnya member perintah masking pada layer “Masking”.

11) Klik kanan pada layer “Masking” dan pilih Mask
12) Jalankan animasi dengan Ctrl+Enter dan perhatikan hasilnya.

Pertemuan VII : Animasi Text

A. TUJUAN PEMBELAJARAN
1. Mahasiswa mampu menggunakan aplikasi flash.
2. Mahasiswa mampu membuat animasi teks.

B. MATERI AJAR
Teks merupakan suatu elemen penting dalam animasi. Teks juga dapat digunakan untuk
animasi frame by frame. Animasi teks terdiri dari warna, ukuran, rotate dan sebagainya.
Praktek animasi teks :
1) Buka macromedia flash 8
2) Aktifkan tanda “A” pada lembar keja. Kemudian pada frame 1, tuliskan huruf T.
3) Lanjutkan pengetikan tiap satu huruf di tiap satu frame.
4) Klik kanan pada frame 30, pilih “insert key frame”. Kemudiann letakkan teks di pojok kanan
bawah, dan ubah ukuran hurufnya.
5) Klik kanan antara frame 17 dan 30, pilih “create motion tween” untuk membuat pergerakan
animasi menjadi halus.
6) Pilih rotate “CW” pada properties untuk membuat efek putar pada teks sehingga membuat
tampilan teks menjadi lebih menarik.
7) Tekan “enter” untuk menjalankan animasi.