Revolusi Bumi dan Bulan | Tutorial Adobe Flash CS3 Profesional

Gengs.. gengs.. tutorial ini adalah 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.

Cusss.. ikuti langkah berikut:

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).

Letak movie clip revolusi bulan di frame 121

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.

HAPPY TRYING :)

Continue reading

Revolusi Bulan | Tutorial Adobe Flash CS3 Profesional

Pada postingan lalu gue udah kasih tutorial membuat motion guide. Nah kali ini gue akan membuat animasi bulan mengitari bumi. Animasi ini menggunakan Motion Guide juga nih gengs.. tapii 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. Seleksi lingkaran kecil tersebut dan tekan F8. Pada kotak dialog yang muncul masukan bulan sebagai Name dan Movie Clip sebagai type lalu tekan OK.

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

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

9.       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)

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

11.      Klik kanan Layer 3 dan pilih Guide. Singgungkan Layer 2 ke Layer 3. Hasilnya akan Nampak seperti gambar berikut:

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

13.     Klik kanan frame 63 pada layer 1 dan pilih Insert Frame

14.     Hapus lingkaran besar di frame 1 Layer 1. maka hasilnya akan Nampak seperti gambar berikut:

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

16.     Klik kanan frame 64 Layer 4 dan pilih Insert Keyframe’

17.     Klik kanan frame 30 Layer 4 dan pilih Insert Keyframe. Hapus lingkaran besar di frame 30 Layer 4. Sehingga di Timeline akan tampak seperti di bawah ini:

Gambar akhir timeline

18.     Tekan Ctrl+Enter untuk melihat hasilnya. Untuk hasilnya dapat dilihat pada gambar berikut:

HAPPY TRYING J

Continue reading

Jam Analog | Tutorial Adobe Flash CS3 Profesional

Kali ini gue akan sharing tutorial cara membuat sebuah jam analog. Tampilan jam analog sini sih masih sederhana yah gengs... Tapiii.. lo bisa ngembanginnya sendiri dengan memperbaiki bagian grafiknya. Sehingga nantinya jam akan terlihat lebih bagus lagi.

Okay langsung saja ikuti langkah berikut:

1. Buatlah flash document.
2. Buatlah sebuah gambar seperti di bawah ini. Lo bisa menggunakan oval tool, text tool, dan panel transform untuk membuatnya. Atau lo juga bisa masukan gambar yang sudah ada dari library.

     3.  Untuk garisnya kita akan membuat ukurannya seperti ini:

-        garis detik lebih panjang dari garis menit, (warna kuning)

-        garis menit lebih panjang dari garis jam, (warna merah)

-        garis jam lebih pendek dari garis menit (warna hitam).

Buatlah tiga buah garis seperti gambar di bawah ini :

     4.  Seleksi garis yang paling kecil, kemudian tekan F8. Pada panel yang muncul masukkan jam_mc dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan ok. lakukan seperti gambar berikut:

     5.  Seleksi movie clip jam_mc di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkan jam_mc sebagai instance name. 

     6.  Seleksi garis kedua (garis yang tidak terlalu panjang), kemudian tekan F8. Pada panel yang muncul masukkan detik_mc dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan ok.

     7.  Seleksi movie clip detik_mc di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkan detik_mc sebagai instance name.

     8.  Seleksi garis ketiga (garis yang paling panjang), kemudian tekan F8. Pada panel yang muncul masukkan menit_mc dan movie clip sebagai type serta pastikan titik registrationnya berada di tengah bagian bawah lalu tekan ok.

     9.  Seleksi movie clip menit_mc di stage kemudian tekan Ctrl+F3. Pada panel properties yang muncul masukkan menit_mc sebagai instance name.

    10. Letakan movie clip jam_mc, detik_mc, dan menit_mc di tengah lingkaran yang kita buat sebelumnya.

    11. Setelah semuanya terpasang, klik frame 1 dan tekan F9. Pada panel actions yang muncul masukkan script berikut :

onEnterFrame = function () {

               waktu = new Date () ;

               jam = waktu.getHours();

               menit = waktu.getMinutes();

               detik = waktu.getSeconds();

               if (jam>12) {

                               jam -= 12;

               }

               jam_mc._rotation = jam*30+(menit/2);

               menit_mc._rotation = menit*6;

               detik_mc._rotation = detik*6;

};

12. Tekan Ctrl+Enter untuk melihat hasilnya. 

Happy Trying Guys :)

Continue reading

Motion Guide | Tutorial Adobe Flash CS3 Profesional

Kali ini gue akan ngebahas tentang MOTION GUIDE nih gengs. Yup Motion guide adalah salah satu fasilitas dari flash yang digunakan untuk membuat animasi motion tween bergerak sesuai jalur (guide) yang telah kita buat.
Nah hasil dari animasi motion guide ini selain halus (karena motion tween) juga lebih teratur gengss..karena animasi bergerak sesuai jalur yang kita buat.
Dibawah ini gue bakal kasih 2 contoh membuat motion guide dengan garis guide yang tidak terhubung dan motion guide dengan garis guide yang terhubung.

Berikut langkah contoh penggunaannya :

Motion Guide dengan garis guide yang tidak terhubung (misalnya garis lurus)

1.       Buatlah sebuah flash document.

2.       Buatlah sebuah lingkaran berwarna merah dengan hitam sebagai warna garisnya menggunakan oval tool. Seperti dibawah:

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 di stage seperti gambar di bawah ini :

 

6.       Letakkan bagian tengah movie clip bola pada ujung garis bagian kiri seperti gambar di bawah 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.
          Berikut hasil dari tutorial ini yang sudah di export dalam bentuk .gif:

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

-        Buatlah sebuah flash document seperti langkah diatas. yang membedaknnya adalah guide (jalur) lintasan bolanya yaitu kita buat sebuah lingkaran. Lakukan persis langkah membuat motion guide diatas sampai nomor 4.

-        Buatlah sebuah garis lingkaran di stage seperti gambar di bawah ini :

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

-        Kemudian lakukan langkah selanjutnya seperti diatas dari nomor 6 sampai langkah akhir. Berikut adalah video hasil nya:

-        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).

-        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 ini untuk mengatasinya.

-        Test Movie ulang untuk melihat hasilnya dengan menekan CTRL+ENTER. Hasilnya           akan seperti gambar berikut:

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 loh gengs…
Caranya klik sekali tombol Insert Layer pada timeline sehingga muncul Layer baru bernama Layer 2.
Klik kanan Layer 2 tersebut dan pilih Guide. Sehingga kedua layer pada timeline tersebut terlehiat seperti gambar di bawah ini :

Setelah terlihat seperti gambar di atas, klik dan drag Layer 1 kemudian singgungkan ke Layer 2 . Maka sebuah layer guide sudah jadi dan siap untuk digunakan!!
So.. lo bisa pilih cara membuat Layer Guide dari kedua cara yang ada tersebut. Pilihlahmana yang lebih mudah dan cocok buat lo.


_________________________HAPPY TRYING J__________________________

Continue reading