Revolusi Bulan dan Bumi

Tutorial ini merupakan lanjutan dari revolusi bulan. Sebelumnya kita membuat bulan yang mengitari bumi dalam tampilan 3d. Kali ini kita akan membuatnya dalam tampilan 2d. Tetapi kita tidak hanya akan membuat bulan mengitari bumi tetapi juga buminya mengitari matahari. Cara membuatnya masih sama dengan membuat revolusi bulan yaitu dengan menggunakan motion guide.

1. Buatlah sebuah flash document dengan panjang 300px serta lebar 300px dan juga 12fps sebagai frame rate. Berikan warna hitam pada Backgroundnya

2. Tekan Ctrl+F8 untuk memunculkan kotak dialog Create New Symbol. Masukkan revolusi bulan sebagai Name dan Movie clip sebagai Typenya lalu tekan OK.

3. Anda akan masuk ke dalam stage movie clip revolusi bulan. Masukkan 2 buah layer baru sehingga timeline akan tampil seperti di bawah ini:

‘

Timeline movie clip revolusi bulan

4. Klik Layer 1, buatlah sebuah lingkaran cukup besar (berfungsi sebagai bumi) berwarna Radial dengan kode #B4B5FE dan #4545FE.

Gambar lingkaran bumi

5. Klik Layer 3, buatlah sebuah garis lingkaran (berfungsi sebagai jalur bulan) yang lebih besar dari lingkaran di Layer 1. Hilangkan sedikit garis di bagian atas garis lingkaran sehingga garis lingkaran bagian atas tersebut terpisah.

Garis untuk jalur bulan

6. Klik Layer 2, buatlah sebuah lingkaran kecil (berfungsi sebagai bulan) dengan kode #FFFFFF dan #CCCCCC. Seleksi lingkaran kecil ini dan tekan F8.

Gambar lingkaran bulan

7. Pada kotak dialog yang muncul masukkan bulan sebagai Name dan Movie clip sebagai Type lalu tekan OK. Letakkan movie clip bulan ini ke ujung garis lingkaran bagian kiri di Layer 3 (titik registration movie clip bulan harus berada tepat di ujung garis).

Letak movie clip bulan di frame 1

8. Klik kanan frame 31 Layer 3 dan pilih Insert Frame.

9. Kilk kanan frame 31 Layer 2 dan pilih Insert Keyframe. Ubah letak movie clip bulan di frame 31 Layer 2 ke ujung garis lingkaran bagian kanan di Layer 3 (titik registration movie clip bulan harus berada tepat di ujung garis).

Letak movie clip bulan di frame 31

10. Klik kanan frame 1 Layer 2 dan pilih Create Motion Tween.

11. Klik kanan frame 31 Layer 3 dan pilih Remove Frames.

12. Kilk kanan frame 30 Layer 2 dan pilih Insert Keyframe.

13. Klik kanan frame 31 Layer 2 dan pilih Remove Frames.

14. Klik kanan frame 30 Layer 1 dan pilih Insert Frame.

15. Klik kanan Layer 3 dan pilih Guide. Singgungkan Layer 2 ke Layer 3.Jika sudah tekan Ctrl+E untuk kembali ke stage Scene 1.

16. Masukkan 2 buah layer baru sehingga timeline akan tampil seperti di bawah ini:

Timeline Scene 1

17. Klik Layer 1 dan buatlah lingkaran besar (berfungsi sebagai matahari) berwarna Radial dengan kode #FFFF00 dan #FF6600.

Gambar lingkaran matahari

18. Klik Layer 3 dan buatlah sebuah garis lingkaran (berfungsi sebagai jalur bumi) yang lebih besar dari lingkaran di Layer 1. Hilangkan sedikit garis di bagian atas garis lingkaran sehingga garis lingkaran bagian atas tersebut terpisah.

Garis untuk jalur bumi

19. Klik Layer 2 agar anda aktif di layer tersebut kemudian bukalah panel Library dengan menekan Ctrl+L pada keyboard. Drag movie clip revolusi bulan ke stage pada Layer 2 frame 1. Letakan movie clip ini ke ujung garis lingkaran bagian kiri di Layer 3 (titik registration movie clip revolusi bulan harus berada tepat di ujung garis).

Letak movie clip revolusi bulan di frame 1

20. Klik kanan frame 120 Layer 1 dan pilih Insert Frame.

21. Klik kanan frame 121 Layer 3 dam pilih Insert Frame.

22. Klik kanan frame 121 Layer 2 dan pilih Insert Keyframe. Ubah letak movie clip revolusi bulan di frame 121 Layer 2 ke ujung garis lingkaran bagian kanan di Layer 3 (titik registration movie clip bulan harus berada tepat di ujung garis).

23. Klik frame 1 Layer 2 dan pilih Create Motion Tween.

24. Klik kanan frame 120 Layer 2 dan pilih Insert Keyframe.

25. Klik kanan frame 121 Layer 2 dan pilih Remove Frames.

26. Klik kanan frame 121 Layer 3 dan pilih remove Frames.

27. Klik kanan Layer 3 dan pilih Guide. Singgungkan Layer 2 dengan Layer 3.

28. Terakhir Test Movie dengan menekan Ctrl+Enter.

Revolusi Bulan

Sekarang ini kita akan membuat animasi bulan mengitari bumi. Animasi ini menggunakan Motion Guide dengan sedikit tambahan.

1. Buatlah 4 buah layer dengan mengklik tombol Insert Layer untuk memasukan layer baru. Pastikan posisi masing-masing layer seperti gambar di bawah ini:

Gambar awal timeline

2. Pastikan anda aktif di Layer 1. Gambarlah sebuah lingkaran besar (sebagai bumi) dan tempatkan di tengah-tengah stage. Seleksi seluruh lingkaran tadi dan tekan Ctrl+C untuk mengcopy lingkaran tersebut.

3. Klik Layer 4 agar anda aktif di layer tersebut. Setelah anda berada di Layer 4, klik kanan stage dan pilih Paste in Place.

4. Klik Layer 3 agar anda aktif di layer tersebut. Gambarlah sebuah garis berbentuk oval seperti di bawah ini.

Garis berbentuk oval

5. Hilangkan sedikit garis di bagian atas garis oval tersebut sehingga akan ada 2 ujung di garis oval tersebut.

Pastikan kedua ujungnya terpisah

6. Klik Layer 2 agar anda aktif di layer tersebut. Gambarlah sebuah lingkaran kecil (sebagai bulan) di stage Layer 2.

7. Seleksi lingkaran kecil tersebut dan tekan F8. Pada kotak dialog yang muncul masukan bulan sebagai Name dan Movie Clip sebagai type lalu tekan OK.

8. Tempatkan movie clip ini di ujung garis oval sebelah kiri (pastikan titik registration movie clip ini berada di ujung garis)

9. Klik kanan frame 70 Layer 3 dan pilih Insert Frame

10. Klik kanan frame 70 Layer 2 dan pilih Insert Keyframe. Ubah letak movie clip di frame 70 layer 2 ke ujung garis oval bagian kanan (pastikan titik registration movie clip ini berada di ujung garis)

11. Klik kanan frame 1 Layer 2 dan pilih Create Motion Tween

12. Klik kanan Layer 3 dan pilih Guide. Singgungkan Layer 2 ke Layer 3.

13. Klik kanan frame 30 Layer 1 dan pilih Insert Keyframe.

14. Klik kanan frame 63 dan pilih Insert Frame

15. Hapus lingkaran besar di frame 1 Layer 1

16. Klik kanan frame 70 Layer 4 dan pilih Insert Frame.

17. Klik kanan frame 64 Layer 4 dan pilih Insert Keyframe

18. Klik kanan frame 30 Layer 4 dan pilih Insert Keyframe. Hapus lingkaran besar di frame 30 Layer 4 ini

19. Sehingga di Timeline akan tampak seperti di bawah ini:

Gambar akhir timeline

20. Tekan Ctrl+Enter untuk melinat hasilnya.

Motion Guide

Membuat Motion Guide

Motion guide merupakan salah satu fasilitas dari flash yang fungsinya digunakan untuk membuat sebuah animasi motion tween bergerak sesuai jalur atau guide yang telah dibuat sesuai keinginan  kita sendiri. Hasil dari animasi in selalin halus (karena motion tween) juga lebih teratur karena animasi bergerak sesuai jalur yang kita buat. Berikut ada 2 contoh penggunaannya :

MOTION GUIDE DENGAN GARIS YANG TIDAK TERHUBUNG (misalnya garis lurus)

Berikut caranya.

1.      Buatlah sebuah flash document.

2.      Buatlah sebuah lingkaran berwarna merah dengan hitam sebagai warna garisnya.

3.      Kemudian seleksi lingkaran tersebut dan tekan F8. Pada sebuah panel muncul masukkan bola sebagai name dan movie clip type serta pastikan titik registrasinya berada disebuah tengah-tengah lalu tekan OK.

4.      Klik sekali tombol Add Motion Guide pada timeline sehingga ditimeline akan muncul layer guide baru yang bernama layer 2.

5.      Pastikan anda aktif di layer 2 kemudian buatlah sebuah garis di stage seperti gambar dibawah ini :

6.      Letakkan sebah bagian tengah movie clip bola pada ujung garis bagian kiri seperti gambar dibawah ini :

7. Klik kanan frame 45 Layer 2 dan pilih Insert Frame.

8. Klik kanan frame 45 Layer 1 dan pilih Insert KeyFrame.

9. Ubah letak movie clip bola pada frame 45 ke ujung garis bagian kanan. Pastikan bagian tengah movie clip bola yang berada di ujung garis tersebut seperti gambar di bawah ini :

10. Klik kanan frame 1 Layer 1 dan pilih Create Motion Tween.

11. Tekan Ctrl+Enter untuk melihat hasilnya.

Motion Guide dengan garis guide yang terhubung (misalnya garis lingkaran)

1. Buatlah sebuah flash document baru.

2. Buatlah sebuah lingkaran berwarna merah dengan hitam sebagai warna garisnya.

3. Seleksi lingkaran tersebut dan tekan F8. Pada panel yang muncul masukkan bola sebagai name dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah-tengah lalu tekan ok.



 

4. Klik sekali tombol Add Motion Guide pada timeline sehingga di timeline muncul layer guide baru bernama Layer 2.

5. Pastikan anda aktif di Layer 2 kemudian buatlah sebuah garis lingkaran di stage seperti gambar di bawah ini :

 

6. Hapus sedikit garis lingkaran bagian atas sehingga garis lingkaran di bagian atas tidak terhubung (terdapat 2 ujung) seperti gambar di bawah ini

7. Letakkan bagian tengah movie clip bola pada ujung garis lingkaran bagian kiri.

8. Klik kanan frame 21 Layer 2 dan pilih Insert Frame.

9. Klik kanan frame 21 Layer 1 dan pilih Insert KeyFrame.

10. Ubah letak movie clip bola pada frame 21 ke ujung garis lingkaran bagian kanan. Pastikan bagian tengah movie clip bola yang berada di ujung garis lingkaran tersebut.

11. Klik kanan frame 1 Layer 1 dan pilih Create Motion Tween.

12. Tekan Ctrl+Enter untuk melihat hasilnya.

13. Seperti yang dapat dilihat, movieclip berjalan agak teputus. Penyebabnya adalah kesamaan mc di frame 1 dan frame 21 sehingga mengakibatkan movie berhenti sejenak (berjalan agak terputus).

14. Untuk mengatasinya, klik kanan frame 20 layer 1 dan pilih Insert Keyframe. Seleksi frame 21 pada layer 1 dan layer 2 kemudian klik kanan dan pilih Remove Frame. Masalah seperti ini sering terjadi ketika membuat motion guide semacam ini, oleh sebab itu ingatlah tips dari kami ini untuk mengatasinya.

15. Test Movie ulang untuk melihat hasilnya.

16. Untuk memunculkan layer guide pada tutorial di atas kita menggunakan tombol Add Motion Guide pada timeline. Selain itu ada juga cara yang lain untuk memunculkan layer guide tersebut yaitu dengan cara manual.

17. Caranya klik sekali tombol Insert Layer pada timeline sehingga muncul Layer baru bernama Layer 2.

18. Klik kanan Layer 2 tersebut dan pilih Guide. Sehingga kedua layer pada timeline tersebut terlehiat seperti gambar di bawah ini :

19. Setelah terlihat seperti gambar di atas, klik dan drag Layer 1 kemudian singgungkan ke Layer 2 seperti terlihat pada video di bawah ini :

20. Maka sebuah layer guide sudah jadi dan siap untuk digunakan. Silahkan anda pilih cara membuat Layer Guide dari kedua cara yang ada. Pilihlah menurut anda mana yang lebih mudah dan cocok untuk anda.

Animasi Motion Shape

Membuat Animasi Motion Shape

Pada dasarnya penggunaan Tween Shape berfungsi menganimasikan sebuah objek yang berjenis shape tanpa harus merubahnya menjadi sebuah simbol. Berikut ini merupakan contoh sederhannya :

1.      Buatlah sebuah gambar segitiga pada frame 1 dan letakan tepat ditengah-tengah stage. 

        

                     

2.      Buatlah sebuah gambar persegi panjang pada frame 20 dan letakkan tepat ditengah-tengah stage juga.

                         

3.      Buatlah sebuah gambar elips pada frame 40 dan letakkan tepat ditengah-tengah stage juga.

                     

4.      Klik frame 1 lalu bukalah sebuah panel properties (tekan CTRL+F3). Lalu kemudian ubahlah Tween dari None menjadi Shape.

       

5.      Setelah semua itu selesai, terakhir yang anda lakukan adalah mengetes movie dengan menekan tombol CTRL +ENTER.

Tutorial Jam Analog

MEMBUAT ANIMASI JAM ANALOG

Kali ini kita akan membuat sebuah tutorial dimana akan mempelajari cara membuat sebuah animasi jam analog. Tampilan yang kita buat ini cocok untuk pemula yang ingin belaajr flash. Dengan tampilan yang sederhana dan tidak begitu rumit, ini akan mempermudah dalam proses pembuatannya. Berikut tutorialnya

1.      Open Aplikasi Adobe Flash.

2.      Buatlah sebuah flash document dengan nama yang disesuaikan keinginan.

3.      Buatlah 5 layer. Layer pertama beri nama Background (karena digunakan untuk tampilan background dan mempermudah anda agar saat pengerjaannya tidak tertukar dengan layer lainnya), layer kedua kita beri nama detik, layer ketiga kita beri nama menit, layer ke empat kita beri nama jam dan layer terakhir kita beri nama action (berfungsi untuk memasukan codingan script program kita).

4.      Pada frame 1 layer 1 buatlah gambar lingkaran dan angka dengan menggunakan oval tool, text tool dan panel transform untuk membuatnya.

5.      Pada layer 2 buatlah jarum untuk detik. Setelah itu, klik F8 rubah menjadi Type nya menjadi Movie clip dan untuk registrationnya arahkan ke bawah letak kotak hitam ditengah. Lalu beri nama pada movie clip dengan nama SecondsHand. Pada layaer 3 dan 4 pun lakukan hal yang sama. Hanya bedanya pada nama untuk movi clipnya. Jika pada layer 3 gunakan nama movie clipnya dengan MinutesHand dan Pada layer 4 dengan nama HoursHand.

 

6.      Pada layer 5 Action, klik F9 dan masukan script untuk programnya. Berikut ini saya gunakan script ini

_root.onEnterFrame = function()

{

            myDate = new Date ();

            Hours = myDate.getHours ();

            Minutes = myDate.getMinutes();

            Seconds = myDate.getSeconds();

            MilliSeconds = myDate.getMilliseconds ();

            Days = myDate.getDay();

            HoursHand._rotation = myDate.getHours()*30+(myDate.getMinutes()/2);

            MinutesHand._rotation = myDate.getMinutes()*6+(myDate.getSeconds()/10);

            SecondsHand._rotation = myDate.getSeconds()*6+(myDate.getMilliseconds()/166);

           

}

7.      Terakhir tekan Ctrl + Enter untuk membuka hasilnya.

Animasi frame by frame

Pada Animasi frame by frame tidak begitu sulit dalam pembuatannya, anda hanya perlu membuat sebuah objek yang berbeda-beda pada setiap framenya. Namun semakin banyak frame yang digunakan maka swf akan berjalan lambat namun akan terlihat lebih halus. Berikut ini hanya sekedar contoh saja,Jika anda mempunya kreasi sendiri, anda dapat membuat yang lebih bagus dari ini, berikut tutorialnya :

1.      Pada frame 1 kita buat objek seperti gambar di bawah ini:

                  Gambar pada frame 1

2. Pada frame 2 kita buat objek seperti gambar di bawah ini.

Gambar pada frame 2

3. Pada frame 3 kita buat objek seperti gambar di bawah ini:

Gambar pada frame 3

4. Pada frame 4 kita buat objek seperti gambar di bawah ini:

Gambar pada frame 4

5. Pada frame 5 kita buat objek seperti gambar di bawah ini:

Gambar pada frame 5

6. Pada frame 6 kita buat objek seperti gambar di bawah ini:

Gambar pada frame 6

7. Terakhir test movie dengan menekan CTRL+ENTER.