Senin, 22 Januari 2018

[TUTORIAL] Adobe Flash Rotasi Bulan dan Bumi

[TUTORIAL] Adobe Flash Rotasi Bulan dan Bumi

Tutorial ini adalah lanjutan dari rotasi bulan.

1. Ganti gambar pada layer bumi frame 1 dan frame 70 menjadi gambar matahari , ganti gambar bulan menjadi gambar bumi, pada layer background tetap dengan gambar langit. untuk menghapus gambar cukup pilih gambar lalu tekan delete pada keyboard.

↓↓↓

2. Pada layer bumi frame 1, pindahkan posisi titik tengah gambar bumi ke bagian putus atas oval (layer guide) :


3. Pada layer bumi frame 70, pindahkan posisi titik tengah gambar bumi ke bagian putus bawah oval (layer guide):


4. Pastikan anda aktif pada layer bumi frame 1. tekan F8 lalu beri nama dengan "bumi" lalu pilih type movie clip dengan registration pada bagian tengah :


5. Pastikan anda aktif pada layer bumi frame 1, lalu klik dua kali pada gambar bumi agar masuk ke pengeditan movie clip. dengan tampilan seperti ini :


6. Setelah anda berada pada pengeditan movie clip, maka ubah nama layer 1 menjadi bumi lalu pada frame 70 klik kanan lalu insert frame.


7. Buat layer baru, dan beri nama "bulan". lalu masukkan gambar bulan pada frame 1, setelah gambar bulan di masukan ke dalam pengeditan, tetaplah aktif pada layer bulan lalu klik kanan pada frame 70 pilih insert keyframe :


8. Klik kanan pada layer bulanl, lalu pilih add classic motion tween :


9. Pastikan anda aktif pada layer guide, lalu buat lah lingkaran sempurna untuk membuat jalur orbit bulan terhadapt bumi :


10. Pastikan anda aktif pada layer guide, putuskan sedikit garis lingkaran :


11. Pastikan anda aktif pada layer bulan frame 1. Pindahkan posisi titik tengah gambar bulan ke bagian putus lingkaran bawah :


12. Pastikan anda aktif pada layer bulan frame 70. Pindahkan posisi titik tengah gambar bulan ke bagian putus lingkaran bagian atas :


13. Klik kanan pada layer bulan frame 1, lalu pilih create classic tween :


14. Klik dua kali pada stage untuk keluar dari edit movie clip. jika bumi dan bulan berada di depan matahari saat berotasi tambahan gambar matahari pada layer mataha 2 :


15. Tekan Ctrl+enter untuk menjalankan program





Minggu, 21 Januari 2018

[TUTORIAL] Adobe Flash Rotasi Bulan Terhadap Bumi

[TUTORIAL] Adobe Flash Rotasi Bulan Terhadap Bumi

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

1. buat 4 layer baru, seperti dibawah ini:


2. Ubah nama layer seperti dibawah ini guna memandu kita dalam proses pembuatan program:


3. Pada layer background masukan gambar langit (luar angkasa) pada frame 1 :


4. Pada layer bumi masukan gambar bumi pada frame 1:


5. Pada layer bulan masukan gambar bulan pada frame 1:


6. Kilk kanan pada layer bulan lalu pilih add classic motion guide, lalu bikin oval pada layer guide :


7. Pastikan anda aktif pada layer guide, lalu zoom gambar agar lebih terlihat lebih besar dan jelas, lalu putus kan garis oval sedikit saja :



8. Pada layer bulan, tekan tombol F8, lalu pilih movie clip dengan registration berada pada ditengah-tengah dan beri nama "bulan" :


9. Tetap pada layer bulan, geser posisi bulan. tepatkan titik tengah gambar bulan pada garis putus guide bagian atas agar nantinya bulan berputar searah jarum jam :


10. Pada layer bulan di frame 70 klik kanan lalu insert keyframe
11. Pada layer background di frame 70 klik kanan lalu insert frame
12. Pada layer bumi di frame 70 klik kanan lalu insert frame


13. Pastikan anda aktif pada layer bulan di frame 70, lalu ubah posisi bulan hingga titik tengah gambar bulan berada pada garis putus oval bagian bawah di frame 70 :


14. Pastikan anda tetap aktif pada layer bulan, klik kanan pada layer bulan frame 1 lalu pilih create classic tween :


15. Agar lebih terlihat seperti bulan mengitar bumi maka saat bulan berada dibelakang bumi kita buat bulan tidak terlihat saat berada dibelakang bumi. Dengan cara pada layer "bumi 2" masukan gambar bumi seperti pada layer "bumi" atau bisa juga dengan cara hapus layer "bumi 2" lalu pada layer "bumi" klik kanan pilih copy layer lalu klik kanan layer guide lalu pilih paste layer.


16. Tekan Ctrl+enter untuk menjalankan Program




[TUTORIAL] Adobe Flash Motion Shape

[TUTORIAL] Adobe Flash Motion Shape

Tween Shape berguna menganimasikan objek berjenis shape tanpa harus merubahnya menjadi symbol. Berikut ini adalah contoh sedeharnanya :

1. Buat sebuah segitiga pada frame 1 dan letakan tepat di tengah-tengah stage.


2. Buat sebuah persegi panjang pada frame 20 dan letakan tepat di tengah-tengah stage.


3. Klik kanan pada frame 1, lalu pilih klik create shape tween.


4. Tekan Ctrl+enter untuk menjalankan program



[TUTORIAL] Adobe Flash Motion Guide

[TUTORIAL] Adobe Flash 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.

1. Buatlah sebuah lingkaran berwarna merah dengan hitam sebagai warna garisnya dan beri nama pada layer "bola".



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


3. Klik kanan sekali pada layer bola dan klik tombol Add Classic Motion Guide.


5. Pastikan anda aktif di Layer Guide 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 Guide dan pilih Insert Frame.
8. Klik kanan frame 45 Layer bola 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 bola dan pilih Create Motion Tween.


11. Tekan Ctrl+enter untuk menjalankan program.






[TUTORIAL] Adobe Flash Jam Analog

[TUTORIAL] Adobe Flash Jam Analog

Pada tutorial yang lalu, kita telah mempelajari cara membuat jam digital. Kali ini kita akan mempelajari cara membuat sebuah jam analog. Tampilan jam analog yang akan kita buat di sini masih sederhana. Anda dapat mengembangkannya dengan memperbaiki bagian grafiknya. Sehingga nantinya jam akan terlihat lebih bagus lagi.

1. Masukan gambar jam tanpa jarum, anda bisa mencarinya di mbah google atau anda juga bisa membuatnya sendiri dengan menggunakan oval tool, text tool, dan panel transform. lalu masukan  kedalam frame 1 pada layer 1 dan beri nama layer "background".


2. Buat layer baru, lalu ubah nama layer menjadi "jarum". lalu buat lah lah garis sebagai jarum jam. Untuk garisnya kami akan membuat ukurannya seperti ini : garis jam lebih panjang dari garis menit, garis menit lebih panjang dari garis detik, garis detik lebih panjang dari garis jam Anda dapat mengubah ukurannya sesuai keinginan anda. seperti dibawah ini.


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


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


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

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

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

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

9. Letakan movie clip jam_mc di tengah lingkaran yang kita buat sebelumnya.Selanjutnya letakan movie clip menit_mc di tengah lingkaran (ditempat yang sama movie clip jam_mc berada).Lalu letakan juga movie clip detik_mc di tengah lingkaran (ditempat yang sama movie clip jam_mc dan menit_mc berada). Maka semua garis akan tertumpuk ditengah, seperti gambar dibawah ini.


10. Setelah semuanya terpasang, klik frame 1 pada layer "jarum" dan tekan F9. Pada panel actions yang muncul masukkan script berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//perintah yang dijalankan ketika frame dimainkan
onEnterFrame = function () {
        //membuat variable waktu sebagai date object
        waktu = new Date();
        //membuat variable jam dengan nilai sama dengan jam pada komputer
        jam = waktu.getHours();
        //membuat variable menit dengan nilai sama dengan menit pada komputer
        menit = waktu.getMinutes();
        //membuat variable detik dengan nilai sama dengan detik pada komputer
        detik = waktu.getSeconds();
        //digunakan jika komputer menggunakan sistem 12 jam
        //jika nilai variable jam lebih dari 12 maka akan dikurangi 12
        if (jam>12) {
               jam -= 12;
        }
        //movie clip jam_mc akan berotasi sesuai nilai variable jam dikali 30 yang ditambah nilai variable menit di bagi 2
        jam_mc._rotation = jam*30+(menit/2);
        //movie clip jam_mc akan berotasi sesuai nilai variable menit dikali 6
        menit_mc._rotation = menit*6;
        //movie clip detik_mc akan berotasi sesuai nilai variable detik dikali 6
        detik_mc._rotation = detik*6;
};



11. Tekan Ctrl + enter untuk menjalankan program






[TUTORIAL] Adobe Flash Animasi Frame by Frame

[TUTORIAL] Adobe Flash Animasi Frame by Frame

Animasi frame by frame ini mudah untuk membuatnya, hanya perlu membuat objek yang berbeda-beda pada setiap framenya. Tapi semakin banyak frame yang kita gunakan maka .swf yang kita buat akan berjalan lambat. Berikut hanya sekedar contoh saja, anda dapat membuat yang lebih bagus dari ini.

1. Pada frame 1 kita masukan gambar tanah dan beri nama layer "tanah" seperti gambar di bawah ini:


2. Buat layer baru (layer 2) lalu buat objek bulat seperti bola dan beri nama layer "bola" seperti gambar dibawah ini:


 3. Pada layer tanah, tambahkan frame atau insert frame pada frame 60:


4. Pada layer bola, pindahkan atau gerakan bola ke posisi mendekati tanah pada setiap framenya dengan insert keyframe pada setiap perpindahan bola, seperti gambar dibawah ini:



5. Pada layer bola, saat bola menyentuh tanah ubah bentuk bola ke bentuk sedikit oval, agar terlihat memantul karena jatuh terkena tanah, seperti gambar dibawah ini:


6. Pada layer bola, gerakan atau pindahkan bola kesamping kanan secara berlahan frame demi frame dengan menggunakan insert keyframe sampai frame 60, seperti gambar dibawah ini: