Tugas Animasi Kunci

1.       Tentang interface atau tampilan dari program Macromedia Flash ?

Untuk membuka tampilan flash, kita dapat melakukan langkah-langkah berikut:

1. klik start

2. klik all programs

3. klik macromedia

4. klik macromedia flash 8

Gambar 1 : menampilkan macromedia flash 8

Ø  Area Kerja Macromedia Flash

Setiap program desain dan animasi dibuat dengan dilengkapi area kerja tertentu sebagai ciri khas dari masing-masing-masing program. Area kerja pada Flash ini dilengkapi dengan tiga komponen utama yang penting untuk diketahui yaitu: Toolbox, Timeline, Stage. Namun ketiga komponen utama tidak dapat berdiri sendiri, karena pada saat bekerja dengan menggunakan Flash versi apapun, ketiga komponen tersebut ditunjang dengan dua komponen lainnya, yaitu Menu dan Panel.

Gambar 2 : area kerja dan komponen flash.

2.       Short Cut Key tools tools yang ada di Flash ?

·  File New (File Baru) = Ctrl+N

· Open (Membuka dokumen flash) = Ctrl+O

· Close (Menutup dokumen flash) = Ctrl+W

· Close All (Menutup semua dokumen yang sedang dibuka) = Ctrl+Alt+W

· Save (Menyimpan dokumen) = Ctrl+S

· Save As (Menyimpan dokumen baru) = Ctrl+Shift+S

· Print = Ctrl+P

· Exit (Menutup aplikasi) = Ctrl+Q

· Undo = Ctrl+Z

· Redo = Ctrl+Y

· Cut = Ctrl+X

· Copy = Ctrl+C

· Paste = Ctrl+V

· Clear = Backspace

· Selection Tool = V

· Subselection Tool = A

· Free Transform Tool = Q

· 3D Rotation Tool = W

· Lasso Tool = L· Pen Tool = P

· Text Tool = T

· Line Tool = N

· Rectangle Tool = R

· Pencil Tool = Y

· Brush Tool = B

· Deco Tool = U

· Bone Tool = M

· Paint Bucket Tool = K

· Eyedropper Tool = I

· Eraser Tool = E

· Hand Tool = H

· Zoom Tool = Z

3.      Tentang Motion Tween ?

Motion Tween adalah pergerakan suatu objek dari keadaan awal sampai keadaan akhir. Motion tween sering digunakan untuk memberikan animasi berupa merubah posisi benda,merubah ukuran benda,dan merubah visibilitas,kecerahan(brightness),kedalaman warna benda. Merubah posisi benda dapat diartikan bahwa motion tween dapat menggerakkan benda dari titik A ke titik B.

4.      Tentang Shape Tween ?

Shape tween adalah perubahan bentuk dari suatu objek ke objek lain. Untuk Shape Tween objek yang di animasikan harus berjenis Shape, untuk ukuran file yang dihasilkan Shape Tween lebih besar dibandingkan motion Tween

5.      Tentang Rotate Tween ?

Rotasi terbagi menjadi 3 yaitu :

a.      CW (Clockwise) yaitu rotasi searah jarum jam

b.      CCW (Counter Clockwise) yaitu rotasi berlawanan jarum jam

c.       Auto rotation yaitu rotasi otomatis tergantung perubahan rotasi yang dilakukan dengan transform tool.

6.      Tentang animasi simbol baik Movie Clip, Button, dan Graphic ?

Ø  Movie clip digunakan untuk membuat objek agar dapat menggunakan beberapa fasilitas dari flsah seperti animasi tween,  masking, dan guide. Selain itu dengan dijadikannya suatu objek menjadi movie clip maka objek tersebut dapat di beri actionscrip.

Ø  Button digunakan untuk membuat tombol di flash. Dengan dijadikannya suatu objek menjadi Button maka selain objek tersebut menjadi tombol, objek tersebut juga dapat menggunakan beberapa fasilitas dari flash seperti animasi tween,  masking, dan guide dan juga kita dapat memberikan actionscrip pada objek tersebut.

Ø  Graphic adalah salah satu type symbol yang fungsinya sama dengan movie clip hanya saja graphic tidak bisa dimasuki actionscript.

7.      Tentang Masking ?

Pengertian Masking :

Mask merupakan fasilitas di flash yang mampu membuat objek gambar ditampilkan sesuai dengan objek shape yang kita kehendaki. Di samping motion tween, mask merupakan tehnik yang harus dikuasai. Karena di dalam pengembangannya nanti kita akan dapat membuat animasi yang menarik dari variasi mask. Masking adalah animasi yang menyembunyikan atau menutupi suatu objek dengan objek lain, sehinga objek yang menutupi terlihat transparan dan menyatu dengan objek yang ditutupi.

Cara Kerja Masking :

Prinsip kerja masking adalah menampilkan bidang yang tertutup dan menyembunyikan bidang yang terbuka. Pada dasarnya animasi making terjadi dikarenakan penumpukan dua buah objek yang dibuat dalam layer yang berbeda, layer utama ditutup layer objek dengan bantuan masking, sehingga objek utama hanya terlihat seukuran objek penutup atau objek yang dijadikan masking. Atau dengan kata lain, objek yang terlihat adalah objek yang saling bertumpukan sedangkan objek yang lain disembunyikan.

8.      Tentang Motion Guide ?

Motion guide adalah salah satu fasilitas dari flash yang digunakan untuk membuat animasi motion tween bergerak sesuai jalur (guide) yang telah kita buat. Hasil animasi motion guide ini selain halus (karena motion tween) juga lebih teratur karena animasi bergerak sesuai jalur yang kita buat.

9.      Tentang Animasi Frame by Frame ?

Animasi Frame by Frame adalah membuat sebuah ilusi pergerakan dari sebuah gambar/objek yang diam (still image) frame demi frame-nya. Pada materi ini kalian akan mempelajari bagaimana cara membuat objek bergerak melintas pada Stage,  merubah ukuran , memutar,  mengganti warna dan mengubah bentuk.

10.   Tentang 12 prinsip Animasi ?

1. Solid Drawing

Kemampuan menggambar sebagai dasar utama animasi memegang peranan yang menentukan “baik proses maupun hasil” sebuah animasi, terutama animasi klasik. Meskipun kini peran gambar yang dihasilkan sketsa manual sudah bisa digantikan oleh komputer, tetapi dengan pemahaman dasar dari prinsip ‘menggambar’ akan menghasilkan animasi yang lebih ‘peka’. Sebuah obyek/gambar dibuat sedemikian rupa sehingga memiliki karakteristik sebuah obyek (volume, pencahayaan dan konsistensi kualitas gambar/bentuk/karakter).

2. Timing & Spacing

Grim Natwick, seorang animator Disney pernah berkata, “Animasi adalah tentang timing dan spacing”. Timing adalah tentang menentukan waktu kapan sebuah gerakan harus dilakukan, sementara spacing adalah tentang menentukan percepatan dan perlambatan dari bermacam-macam jenis gerak.

Contoh Timing: Menentukan pada detik keberapa sebuah obyek/karakter berjalan sampai ke tujuan atau berhenti.

Contoh Spacing: Menentukan kepadatan gambar (yang pada animasi akan berpengaruh pada kecepatan gerak).

3. Squash & Stretch

Squash and strecth adalah upaya penambahan efek lentur (plastis) pada objek atau figur sehingga seolah-olah ‘memuai’ atau ‘menyusut’ sehingga memberikan efek gerak yang lebih hidup. Penerapan squash and stretch pada figur atau benda hidup (misal: manusia, binatang, creatures) akan memberikan ‘enhancement’ sekaligus efek dinamis terhadap gerakan/action tertentu, sementara pada benda mati (misal : gelas, meja, botol) penerapan squash and stretch akan membuat mereka (benda-benda mati tersebut) tampak atau berlaku seperti benda hidup.

Contoh ketika sebuah bola dilemparkan. Pada saat bola menyentuh tanah maka dibuat seolah-olah bola yang semula bentuknya bulat sempurna menjadi sedikit lonjong horizontal, meskipun kenyataannya keadaan bola tidak selalu demikian. Hal ini memberikan efek pergerakan yang lebih dinamis dan ‘hidup’.

4. Anticipation

Anticipation boleh juga dianggap sebagai persiapan/awalan gerak atau ancang-ancang. Seseorang yang bangkit dari duduk harus membungkukkan badannya terlebih dahulu sebelum benar-benar berdiri. Pada gerakan melompat, seseorang yang tadinya berdiri harus ada gerakan ‘membungkuk’ terlebih dulu sebelum akhirnya melompat.

5. Slow In and Slow Out

Slow In dan Slow Out menegaskan bahwa setiap gerakan memiliki percepatan dan perlambatan yang berbeda-beda. Slow in terjadi jika sebuah gerakan diawali secara lambat kemudian menjadi cepat. Slow out terjadi jika sebuah gerakan yang relatif cepat kemudian melambat. Contoh Slow In :

6. Arcs

Pada animasi, sistem pergerakan tubuh pada manusia, binatang, atau makhluk hidup lainnya bergerak mengikuti pola/jalur (maya) yang disebut Arcs. Hal ini memungkinkan mereka bergerak secara ‘smooth’ dan lebih realistik, karena pergerakan mereka mengikuti suatu pola yang berbentuk lengkung (termasuk lingkaran, elips, atau parabola). Sebagai contoh, Arcs ditunjukkan pada lintasan tangan saat melempar bola dan lintasan gerak bola di udara.

7. Secondary Action

Secondary action adalah gerakan-gerakan tambahan yang dimaksudkan untuk memperkuat gerakan utama supaya sebuah animasi tampak lebih realistik. Secondary action tidak dimaksudkan untuk menjadi ‘pusat perhatian’ sehingga mengaburkan atau mengalihkan perhatian dari gerakan utama. Kemunculannya lebih berfungsi memberikan emphasize untuk memperkuat gerakan utama.

Contoh: Ketika seseorang sedang berjalan, gerakan utamanya tentu adalah melangkahkan kaki sebagaimana berjalan seharusnya. Namun sambil berjalan ‘seorang’ figur atau karakter animasi dapat sambil mengayun-ayunkan tangannya. Gerakan mengayun-ayunkan tangan inilah yang disebut secondary action untuk gerakan berjalan.

8. Follow Through and Overlapping Action

Follow through adalah tentang bagian tubuh tertentu yang tetap bergerak meskipun seseorang telah berhenti bergerak. Misalnya, rambut yang tetap bergerak sesaat setelah melompat. Overlapping action secara mudah bisa dianggap sebagai gerakan saling-silang. Maksudnya, adalah serangkaian gerakan yang saling mendahului (overlapping). Contoh : Kelinci yang melompat. Sesaat setelah melompat telinganya masih bergerak-gerak meskipun gerakan utama melompat telah dilakukan.

9. Straight Ahead Action and Pose to Pose

Dari sisi resource dan pengerjaan, ada dua cara yang bisa dilakukan untuk membuat animasi. Yang pertama adalah Straight Ahead Action, yaitu membuat animasi dengan cara seorang animator menggambar satu per satu, frame by frame, dari awal sampai selesai seorang diri. Teknik ini memiliki kelebihan: kualitas gambar yang konsisten karena dikerjakan oleh satu orang saja. Tetapi memiliki kekurangan yaitu waktu pengerjaan yang lama.

Yang kedua adalah Pose to Pose, yaitu pembuatan animasi oleh seorang animator dengan cara menggambar hanya pada keyframe-keyframe tertentu saja, selanjutnya in-between atau interval antar keyframe digambar/dilanjutkan oleh asisten/animator lain. Cara kedua ini memiliki waktu pengerjaan lebih cepat karena melibatkan lebih banyak sumber daya sehingga lebih cocok diterapkan pada industri animasi.

10. Staging

Staging dalam animasi meliputi bagaimana ‘lingkungan’ dibuat untuk mendukung suasana atau ‘mood’ yang ingin dicapai dalam sebagian atau keseluruhan scene. Biasanya berkaitan dengan posisi kamera pengambilan gambar. Posisi kamera bawah membuat karakter terlihat besar dan menakutkan, kamera atas membuat karakter tampak kecil dan bingung sedangkan posisi kamera samping membuat karakter tampak lebih dinamis dan menarik.

11. Appeal

Appeal berkaitan dengan keseluruhan look atau gaya visual dalam animasi. Kita bisa dengan mudah mengidentifikasi gaya animasi buatan Jepang dengan hanya melihatnya sekilas. Kita juga bisa melihat style animasi buatan Disney atau Dreamworks cukup dengan melihatnya beberapa saat. Hal ini karena mereka memiliki appeal atau gaya tersendiri dalam pembuatan karakter animasi.

Ada juga yang berpendapat bahwa appeal adalah tentang penokohan, berkorelasi dengan ‘kharisma’ seorang tokoh atau karakter dalam animasi. Sehingga visualisasi animasi yang ada bisa mewakili karakter/sifat yang dimilkiki.

12. Exaggeration

Exaggeration merupakan upaya mendramatisir animasi dalam bentuk rekayasa gambar yang bersifat hiperbolis. Dibuat sedemikian rupa sehingga terlihat sebagai bentuk ekstrimitas ekspresi tertentu dan biasanya digunakan untuk keperluan komedik. Seringkali ditemui pada film-film animasi anak-anak (segala usia) seperti Tom & Jery, Donald Duck, Mickey Mouse, Sinchan, dsb.

Contoh : Tubuh Donald duck melayang mengikuti sumber asap saat hidung Donald cuck mencium aroma masakan/makanan lezat.

11.    Tentang membuat Animasi Stickman di Flash

Pertama kita perlu menggambar karakter stickman

 sebagai karakter utama dalam animasi ini :

Setelah kita membuat karakter stickman pada layer satu di posisi frame satu, klik kanan pada frame 2 dan klik insert blank keyframe.

Kemudian sesuai dengan gambar ada 2 buah tombol onion skin, ada onion skin dan onion skin outlines. Kita akan pakai onion skin outlines :

     

Selanjutnya setelah mengklik tombol onion skin outlines, klik modify onion markers dan pilih show onion all

                

Secara otomatis akan muncul garis pandu sebagai patokan gambar selanjutnya

               

Gambar frame kedua untuk stickman untuk memulai animasi berjalan. Lakukan hal yang sama pada frames berikutnya sampai menjadi animasi bergerak sesuai yang diinginkan, sehingga menjadi seperti ini :

Tambahkan batu atau kepentingan-kepentingan background yang lain pada layer berikutnya. Lakukan hal yang sama jika ingin membuat batunya bergerak dengan cara menambahkan insert blank keyframe step by step mengikuti alur pergerakan stickman tersebut.

Untuk background bukalah folder pada computer kalian, lalu drag and drop gambar kalian ke dalam macromedia flash.

12.    Tentang membuat Animasi Bola Basket Berputar di Flash ?

contoh bola yang kita ambil dari google dalam bentuk jpg

setelah gambar kita ambil kemudian kita ubah bentuk gambar menjadi tipe png karena adobe flash bisa menerima bentuk png untuk di covert menjadi simbol grafik

untuk contoh perubahan seperti ini :

setelah kita merubah bentuk png kemudia kita rubah gambar betipekan png tesebut ke bentuk simbol grafik caranya adalah klik kanan pada gambar kemudian convert to simbol pilih grafik

Dan tak kalah penting perhatikan ukuran bola harus sama jika tidak sama antara lebar dan tinggi maka perputaran bola nanti akan lonjong tidak bulat cara pengaturannya adalah :

langkah yang penting selanjutnya adalah mengunci frame yang akan kita jadikan sebagai animasi bergerak
1. di timeline keyframe kunci frame ke 30 misalkan artinya nanti bola akan berputar dari frame ke 1 sampai ke 30 contoh kita melakukan keyframe

langkah akhir adalah membuat creat motion artinya pergerakan seperti ini :

Terakhir kita setting properties pergerakan dengan tipe CW ataupun CCW

Baca bismillah tekan CTRL+ENTER di keyboard bola akan berputar
teman-teman bisa export menjadi file bertipe kan gif,, jadilah animasi bola berputar.

13.   Tentang membuat Animasi Ombak di Lautan ?

1.       Buka aplikasi macromedia flash 8 yang kamu miliki, buat dokumen baru dengan ukuran 550 x 400 px dengan background warna hitam

2.       Pada Layer 1 buat sebuah kotak menggunakan Rectangle Tool, atur warna Fill Color buat warna biru dan untuk Stroke Color warna kosongkan. (perhatikan gambar)

3.      Buat Layer baru (Layer 2) dan gambarlah pantai. (hasilnya akan seperti gambar di bawah).

4.       Pada Layer 2 klik Frame 60 lalu klik kanan Insert Keyframe

5.       pada Layer 1 klik Frame 20, lalu klik kanan Insert Keyframe dan lanjutkan dengan menarik ke atas gambar kotak menggunakan Selection Tool

Jika sudah, lanjutkan dengan klik Frame 1 Layer 1 lalu klik Tween – Shape

6.      Ulangi langkah kelima untuk Frame ke 40 dan 60, hingga hasilnya seperti gambar berikut :

14.   Tentang membuat Animasi Cahaya Api Lilin ?

Langkah ke – 1

Buka Macromedia Flash 8, kemudian buat dokumen baru. Setekah itu ubah nama Layer yang ada menjadi "Dinding". Jika sobat belum tahu cara membuat dokumen baru dan cara mengubah nama layer silahkan baca pada artikel sebelumnya....

Langkah ke - 2

Setelah itu pilih Rectangle Tool (R) kemudian buatlah objek persegi menutupi background. Atur terlebih dahulu warna Fill dengan warna hitam dan tanpa Outline, caranya sudah saya sampaikan pada artikel sebelumnya...

Langkah ke - 3

Buka Palet Color, kemudian atur Type warnanya menjadi Radial, lalu pada settingan warnannya gunakan kode R: 204 G: 153 B: 0.

Kemudian pada Frame 40 klik kanan > Insert Keyframe.

Langkah ke - 4

Sekarang kita akan menambahkan background untuk lantai tempat lilinnya. Download terlebih dahulu gambar tekstur kayu disini. Atau bisa juga dengan menggunakan background milik sobat. 

Langkah ke - 5

Buat layer baru kemudian beri nama "Lantai". 

Selanjutnya sobat Import gambar yang sudah di download tadi. Pilih menu File > Import > Import to Library, cari tempat dimana sobat menyimpan gambar tadi kemudian klik Open. 

Drag gambar yang sudah di Import kedalam palet Library tadi kedalam area kerja. Sudah saya jelaskan detailnya cara mengimport gambar ke area kerja, baca disini... Kemudian Insert Keyframe di Frmae 40.

Langkah ke - 6

Buat layer baru dengan nama "Mangkuk". Pilih Oval Tool (O) (1) kemudian pada palet Properties (2) atur ketebalan garisnya atau Stroke height menjadi "4.75" (3). Selanjutnyasobat buat objek oval (4) tanpa warna fill dengan menggunakan tool tersebut.

Kemudian buat objek oval lagi dibawahnya dengan ukuran yang lebih kecil.

Pilih Line Tool (N) kemudian buat garis untuk menghubungkan kedua objek oval tadi, lihat gambar dibawah.

Langkah ke - 7

Sekarang pilih Paint Bucket Tool (K) kemudian atur warna Fill dengan warna Radial Red dan tanpa Outline. 

Warnai semua bagian mangkuk yang ada. Sobat bisa mengatur gelap terang atau kombinasi warna Radialnya pada palet Color

Langkah ke - 8

Buat layer baru dengan nama "Lilin". Gunakan Rectangle Tool (R) kemudian buat objek persegi panjang di dalam mangkuk dengan menggunakan tool tersebut.

Langkah ke - 9

Lalu gunakan Free Transform Tool (Q) untuk  membuat ujung lilin tersebut menjadi tumpul dan seperti ujung batang lilin yang mencari terkena api. Cara membuatya dekatkan Free Transform Tool (Q) pada garis yang ingin di lekukkan, kemudian sobat tarik kebawah garis tersebut kebawah, Lihat gambar dibawah.

Kemudian buat juga garis di belakangnya, lihat gambar (1)

Dan juga sumbunya

Langkah ke - 10

Pilih Paint Bucket Tool (K) lalu warnai Lilinnya dengan warna Radial, untuk kombinasi warnanya bisa sobat lihat pada gambar dibawah.

Langkah ke - 11

Sekarang kita akan menambahkan efek Shadow pada mangkuknya agar terlihat lebih menyatu dan tidak nampak mengambang dengan lantainya. Pilih objek oval yang kecil pada mangkuk kemudian tekan F8 > Button.

Langkah ke - 12

Kemudian pada palet Filter klik Add Filter > Drop Shadow. 

Maka hasilnya terlihat seperti gambar dibawah.

Langkah ke - 13

Pilih Layer Mangkuk dan Lilin kemudian pada Frame 40 klik kanan > Insert Keyframe.

Langkah ke - 14

Pilih Oval Tool (O) kemudian buat objek Oval dengan warna putih dan tanpa Outline.

Kemudian warnai Objek tersebut dengan warna Radial R: 255 G: 153 B: 0

Langkah ke - 15

Kemudian Insert Keyframe pada Frame ke 10,20,30, dan 40.

Langkah ke - 16

Pindah ke Frame 1, kemudian dengan menggunakan Free Transform Tool (Q) buat objeknya menjadi seperti terkena angin ke arah kiri. Lalu berikan warnanya juga agak ke pinggir.

Lakukan cara yang sama pada Frame 10, namun kali ini tiupan anginnya ke arah kanan.

Lakukancara diatas sampai Frame 40

Langkah ke - 17

Agar apinnya menjadi gambar bergerak sekarang block Frame 1 - 40 pada layer "Api". Kemudian pada palet Properties, Tween Type pilih Shape.

Langkah ke - 18

Lakukan cara yang sama seperti Langkah ke - 17 pada Layer "Dinding". Ikuti warna titik Radialnya pada arah dimana api tertipu. Lihat gambar dibawah.

Sekarang tinggal jalankan animasinya dengan menekan CTRL + ENTER

15.   Tentang membuat Media Interaktif di Flash ?

1.       Opening, suatu hal yang penting dalam MPI, sebagai penarik perhatian dan pengantar sebelum masuk ke halaman utama. Opening dalam artikel ini berbentuk Movie Clip berupa animasi tulisan Welcome

2. Home, harus dibuat menarik karena disinilah halaman yang paling sering dilihat oleh pengguna MPI, sebagai penarik perhatian dan pengantar sebelum masuk ke halaman utama.

Pada halaman ini terdapat: background, judul, logo, animasi bandul, jam dan tanggal, serta rangkaian menu yang terdiri dari: tombol home, info, keluar, kurikulum, materi, latihan, evaluasi dan musik.

Pada menu kurikulum, materi dan latihan akan dibuat menu top down seperti gambar berikut:

Previewnya dapat dilihat disini

3. Contoh Animasi, Berisi animasi untuk dalam pembelajaran matematika untuk menentukan sudut antara garis dan bidang. Previewnya dapat dilihat disini

4. Contoh Simulasi, Berupa simulasi mobil bergerak dengan kecepatan yang dapat diatur, dengan jarak tetap, sehingga akan diperoleh wakru tempuhnya.

Previewnya dapat dilihat disini

5. Contoh Area Gambar, Berupa area gambar seperti pada aplikasi “Paint”. Disini kita dapat menggambar dengan memilih warna yang kita kehendaki kemudian kita gambar seperti menggunakan pensil warna.

Previewnya dapat dilihat disini

6. Latihan dengan Jawaban Singkat, Merupakan latihan, dimana pengguna dapat mengisi jawaban secara interaktif kemudian dapat mengecek jawabannya apakah sudah benar atau belum.

Previewnya dapat dilihat disini

7. Latihan dengan Menjodohkan, Merupakan latihan, dimana pengguna dapat menjodohkan jawaban dengan drag and drop kemudian dapat mengecek jawabannya apakah sudah benar atau belum.

Previewnya dapat dilihat disini

 

 

8. Latihan Pilihan Ganda, Merupakan latihan, berbentuk soal pilihan ganda pengguna dapat memilih jawaban secara interaktif kemudian dapat mengecek jawabannya apakah sudah benar atau belum.

Previewnya dapat dilihat disini

9. Evaluasi Pilihan Ganda, Merupakan evaluasi berbentuk soal pilihan ganda pengguna dapat memilih jawaban secara interaktif kemudian dapat mengecek jawabannya apakah sudah benar atau belum. Soal dalam evaluasi keluar secara acak, dibatasi oleh waktu dan setelah selesai akan memperoleh umpan balik

Previewnya dapat dilihat disini

10. Halaman Author, Merupakan halaman berisi identitas pembuat MPI. Previewnya dapat dilihat disini