Kamis, 20 September 2012

Animasi Burung Terbang


Dalam Tutorial kali ini akan membahas bagaimana membuat animasi sederhana yaitu Animasi burung yang terbang dengan mode Frame by Frame yaitu animasi dengan membuat gambar perframe beda halnya dengan Motion Tweening teknik frame by frame memerlukan waktu yang cukup banyak karma dalam setiap frame kita harus membuat gambar yang tidak sama, pada tutorial kali ini objek yang akan kita gunakan yaitu sebuah ilustrasi burung dan aplikasi yang digunakan yaitu Macromedia Flash MX Professional 2004

Langkah pertama yaitu buatlah gambar ilustrasi burung sebanyak 3 kali dengan menggunakan Toolbox Brush Tool
tutorial flash
Untuk membuatnya perhatikan gambar dibawah ini
tutorial flash
Buatlah ilustrasi gambar burung dengan brush tool bisa juga menggunakan Pen Tool
Sebelum menginjak langkah selanjutnya copy gambar yang sudah dibuat tadi, tujuannya yaitu agar kita tidak usah repot-repot membuat badan burung lagi jadi pada akhirnya  kita tinggal paste gambar setelah itu nanti hanya menambah bentuk sayap yang berbeda saja
tutorial flash
buatlah sayap pada bagian atas , pada bagian ini kita sedang membuat gambar 1
tutorial flash
Masuk ke pembuatan gambar kedua buatlah bentuk sayap di bawah
tutorial flash

tutorial flash
Untuk gambar yang terakhir buatlah sayap diatas punggung burung tetapi agak rendah sedikit, jika sudah selesai tinggal pewarnaan pada gambar
burung
langkah selanjutnya yaitu pembuatan animasinya pada gambar 1 letakkan dikeyframe pertama , atur posisi gambar sesuai keinginan anda asal semua gambar harus di 1 posisi yang sama semua
tutorial flash
buatlah Keyframe dengan cara klik kanan frame kedua >> pilih Insert Keyframe, setelah itu masukan Gambar 2
tutorial flash
buatlah Keyframe dan masukan gambar 3 keposisi yang sudah kita tentukan tadi
 tutorial flash
langkah selanjutnya blok semua Frame yang telah kita buat >> klik kanan dan pilih Copy Frame. Kemudian Paste ke frame selanjutnya
tutorial flash tutorial flash
Hasilnya bisa dilihat dengan cara pilih Menu Control >> pilih Play atau Ctrl+Enter
tutorial flash

Selamat Belajar Flash, SEMOGA BERMANFAAT

Membuat Gradien di Adobe Flash



Pada Tutorial kali ini kita akan mempelajari cara membuat gradien di Flash, membuat gradien di flash agak sedikit berbeda dengan gradien di photoshop karena di flash kita bukan memakai fill tapi cenderung memakai pengaturan color (Shift + Alt + F9)

Ok, mari kita praktekkan dengan Tutorial:

1. Buka Program Adobe Flash, Disini Bisa menggunakan Adobe Flash CS3,CS4,CS5
2. Pada Lembar kerja buatlah gambar terserah tapi disini saya akan mencontohkan dengan menggambar kotak, pada pengaturan sudut (Rectangle Option) gunakan angka 15
tutorial flash

Gunakan Free Transform Tool (Q) untuk mengatur besar kecilnya kotak yang anda buat

3. Seperti penjelasan saya di awal, kita tidak bisa merubah fill karena fill hanya terdiri dari 1 Warna, untuk itu kita harus masuk ke pengaturan color dengan Window - color (Shift + Alt + F9) nanti akan muncul Color Setting seperti ini
tutorial flash
Pilih Linear Gradien atau Radial Gradien, namun disini saya mencontohkan dengan linear gradien , Anda bisa memilih Flow: Extend Color
tutorial flash
Untuk pengaturan Warna yang diinginkan bisa klik kedua panel di bawah yang ada tanda 2 panah caranya klik kotak tersebut dan pilih warna yang anda inginkan
Contohnya:
Kombinasi hitam dan biru
tutorial flash

4. Ok sekarang pasti anda bertanya-tanya.... bagaimana cara mengubah posisi gradien agar tidak kaku seperti gambar di atas, ahaaa.... caranya gunakan Gradient Transform Tool (F)
tutorial flash
tutorial flash
Anda bisa mengatur bentuk gradien yang anda inginkan
tutorial flash
dan juga memberikan hiasan text

Hasilnya kira-kira seperti ini
tutorial flash
Gradien di Flash. Selamat Belajar Flash, SEMOGA BERMANFAAT

Membuat Mangekyou Sharingan Milik Sasuke (Tutorial Adobe Flash)


Pada tutorial menggambar dengan Flash kali ini kita akan membahas cara membuat gambar mangekyou sharingan milik sasuke dengan menggunakan program bernama Flash. Artikel kemarin kita sudah membahas bagaimana cara membuat mangekyou sharingan milik itachi dan kakashi di Microsoft Paint tetapi pada kesempatan kali ini saya akan membahasnya dengan Program Flash yang juga tak kalah bagus untuk menggambar

Sebelum kita memulainya langkah yang harus diambil adalah membuka program Macromedia flash / Adobe Flash
1. Langkah pertama yaitu buatlah sebuah object lingkaran dengan image ilmugrafis Oval
image ilmugrafis

2. Selanjutnya, Potonglah bagian tengah garis object dengan menggunakan Selection Tool image ilmugrafis
image ilmugrafis
Jika sudah diseleksi tekan delete untuk menghapus
image ilmugrafis
Jika sudah klik masih menggunakan Selection Tool gabungkan 2 gambar yang telah terpisah tersebut
image ilmugrafis

3. Langkah berikutnya adalah  drag object tersebut dengan menggunakan Selection Tool  jika sudah pilih Menu Modify  >> Transform >>Free Transform
image ilmugrafis
image ilmugrafis
jika sudah ubahlah bentuk objek seperti digambar
image ilmugrafis

4. Langkah berikutnya yaitu  buatlah sebuah objek bola dan masukkan ke dalam objek bola tersebut
image ilmugrafis
Copy objek yang kita buat tadi dan ubah posisi berputar 90 derajat
image ilmugrafis
Lakukan pencopyan objek lagi dan ikuti seperti apa yang sudah dijelaskan digambar (270 derajat dan 45 derajat)
image ilmugrafis
image ilmugrafis

Lalu buat lingkaran lagi di tengah, Hasilnya akan seperti gambar dibawah ini
image ilmugrafis
5. Langkah terakhir yaitu pewarnaan  pada langkah ini anda bisa memberi  warna sesuka anda atau bisa juga mengikuti prosedur artikel ini . untuk pewarnaannya warna yang akan digunakan yang soft , agar tidak terlalu tajam gambarnya . untuk warna merah gunakan warna merah #F84C5A
image ilmugrafis
image ilmugrafis
image ilmugrafis
Dan hasil akhirnya akan seperti ini
image ilmugrafis

dengan sedikit ketekunan maka anda bisa menciptakan manga
image ilmugrafis
Mangekyou Sharingan Milik Sasuke by Miko IG
Semoga bermanfaat
www.ilmugrafis.com

Mewarnai Text Bagian 1 (Tutorial Adobe Flash)

Pada tutorial ini kita akan membahas bagaimana cara mewarnai suatu text agar terlihat lebih bagus. Di tutorial ini kita akan membahas 2 cara.
Cara 1
Cara ini hanya cara dasar mewarnai suatu text.
1. Buatlah sebuah flash document.
2. Buatlah sebuah static text dengan tulisan WARUNG FLASH.
3. Seleksi static text tersebut dan tekan fill color. Silahkan pilih dan tekan warna yang anda inginkan. Misalnya kita pilih warna merah.
4. Dan text pun berubah warnanya menjadi merah.
Cara 2
Di cara yang kedua ini, kita akan membuat bayangan hitam pada text yang kita buat.
1. Buatlah sebuah flash document.
2. Buatlah sebuah static text dengan tulisan WARUNG FLASH.
3. Seleksi static text tersebut dan tekan fill color. Silahkan pilih dan tekan warna yang anda inginkan. Misalnya kita pilih warna merah.
4. Seleksi static text dan tekan CTRL+D sekali maka akan muncul duplikasi dari static text.
5. Seleksi static text hasil duplikasi tadi dan tekan fill color. Kemudian pilih dan tekan warna hitam.
6. Pastikan anda masih menyeleksi static text hasil duplikasi. Pada menu bar silahkan anda pilih Modify>Arrange>Send To Back.
7. Jika benar, static text hasil duplikasi akan berada di belakang static text yang asli.
8. Sekarang atur letak static text hasil duplikasi dengan menggunakan tombol panah pada keyboard sampai letaknya kurang lebih seperti gambar di bawah ini :

Sourcenya dapat di download di sini

Tutorial Adobe Flash *JIGSAW*

Pada tutorial yang lalu kita pernah membuat sebuah puzzle drag n drop atau dasar dari jigsaw puzzle. Tetapi jika anda menggunakan script pada tutorial tersebut, tentunya script yang anda tulis akan menjadi panjang jika kepingan yang anda buat banyak. Oleh karena itu, ditutorial ini kami membuat versi dengan script yang lebih pendek. Bila anda tertarik untuk membuat sebuah game semacam jigsaw silahkan gunakan tutorial berikut. 1. Buatlah sebuah flash document.
2. Buatlah beberapa objek seperti gambar dibawah ini :
3. Tekan Ctrl+R dan pada panel yang muncul cari gambar yang diinginkan kemudian tekan Open.
4. Seleksi gambar yang baru dimport tadi, kemudian tekan Ctrl+B untuk membuat gambar bitmap menjadi shape.
5. Jika sudah gambarlah garis pada gambar tadi. Buatlah garis yang membuat gambar tadi menjadi berkeping-keping.
6. Pada tutorial ini, kami membagi gambarnya menjadi 4 keping dengan garis sebagai berikut :
7. Seleksi kepingan pertama (garis tidak perlu diseleksi), kemudian tekan F8. Pada panel yang muncul ketikkan Bagian1 pada kotak Name, pilih MovieClip sebagai Typenya, lalu tekan Ok.
8. Seleksi movie clip Bagian1 kemudian tekan Ctrl+F3. Pada panel properties yang muncul ketikkan Bagian1 pada kotak Instance Name.
9. Seleksi kepingan kedua (garis tidak perlu diseleksi), kemudian tekan F8. Pada panel yang muncul ketikkan Bagian2 pada kotak Name, pilih MovieClip sebagai Typenya, lalu tekan Ok.
10. Seleksi movie clip Bagian2 dan pada panel properties ketikkan Bagian2 pada kotak Instance Name.
11. Seleksi kepingan ketiga (garis tidak perlu diseleksi), kemudian tekan F8. Pada panel yang muncul ketikkan Bagian3 pada kotak Name, pilih MovieClip sebagai Typenya, lalu tekan Ok.
12. Seleksi movie clip Bagian3 dan pada panel properties ketikkan Bagian3 pada kotak Instance Name.
13. Seleksi kepingan keempat (garis tidak perlu diseleksi), kemudian tekan F8. Pada panel yang muncul ketikkan Bagian4 pada kotak Name, pilih MovieClip sebagai Typenya, lalu tekan Ok.
14. Seleksi movie clip Bagian4 dan pada panel properties ketikkan Bagian4 pada kotak Instance Name.
15. Jika semua kepingan sudah menjadi movie clip, hapus garis-garis yang digunakan untuk membuat kepingan tadi.
16. Letakkan keempat kepingan tadi seperti gambar dibawah ini :
17. Jika seandainya kotak yang dibuat pada Tutorial Nomor 2 terlalu kecil, anda dapat membesarkannya.
18. Seleksi keempat keping movie clip kemudian tekan Ctrl+C untuk mengcopynya.
19. Jika sudah tekan Ctrl+V untuk menduplikasinya. Letakkan kepingan hasil duplikasi sepeti gambar dibawah ini :
20. Pastikan anda masih menyeleksi kepingan hasil duplikasi. Lalu pada panel propeties anda ganti Color menjadi Alpha 10%.
21. Jika sudah, seleksi salah satu kepingan hasil duplikasi kemudian pada panel properties tambahkan kata Target pada kotak instance name.
22. Lakukan Tutorial Nomor 21 pada ketiga keping duplikasi lainnya.
23. Sehingga nantinya Instance Name pada masing-masing keping duplikasi menjadi menjadi TargetBagian1, TargetBagian2, TargetBagian3, TargetBagian4
24. Sekarang acak kepingan pada keping asli seperti gambar dibawah ini :
25. Buatlah sebuah dynamic text. Seleksi dynamic text tersebut kemudian pada panel properties anda ketikkan pesan di kotak Var.
26. Letakkan dynamic text tadi seperti gambar dibawah ini :
27. Klik frame 1 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
23
24
25
26
27
28
29
30
31
32
33
34
//jumlah kepingan puzzle
//sesuaikan nilai variable jumlahBagian dengan jumlah kepingan yang anda buat
jumlahBagian = 4;
for (i=1; i<=jumlahBagian; i++) {
 _root["Bagian"+i].id = i;
 //bila kepingan puzzle ditekan
 _root["Bagian"+i].onPress = function() {
  //buat posisi kepingan berada di paling atas
  this.swapDepths(_root.getNextHighestDepth());
  //kepingan dapat didrag
  startDrag(this);
 };
 //bila kepingan tidak ditekan
 _root["Bagian"+i].onRelease = _root["Bagian"+i].onReleaseOutside=function () {
  //kepingan tidak dapat ditekan
  stopDrag();
  target_mc = _root["TargetBagian"+this.id]
  //jika kepingan berada di sekitar target
  if (eval(this._droptarget) == target_mc) {
   //letakan kepingan di target
   this._x = target_mc._x;
   this._y = target_mc._y;
   //kepingan tidak bisa ditekan
   this.enabled = false;
   //kurangi variable jumlahBagian
   jumlahBagian--
   //jika variable jumlahBagian bernilai 0
   if (jumlahBagian == 0) {
    //tampilkan tulisan Puzzle Komplit pada dynamic text pesan
    pesan = "Puzzle Komplit";
   }
  }
 };
}
28. Tekan Ctrl+Enter untuk melihat hasilnya.

Sourcenya dapat di download di sini

Share To