Animasi Mengikuti Alur(Motion Guide) pada Flash

Animasi Motion Guide adalah animasi pergerakan yang mengikuti jalur yang telah kita buat. Dengan menggunakan fasilitas ini kita bisa dengan mudah mengatur pergerakan objek dalam animasi.

Untuk membuatnya perhatikan langkah-langkah berikut :

1. Buat stage baru berukuran 500 x 500 pixels dengan frame rate 24fps dan background berwarna putih (ini hanya contoh saja)

2. Buat gambar tanda panah dengan brush tool

3. Kemudian aktifkan objek tanda panah tadi, lalu klik kanan > convert to symbol

4. Pada jendela convert to symbol, beri nama "panah" dan tipe movie clip. Pastikan registrationnya di tengah..

5. Pada panel timeline klik add motion guide (disebelah insert layer), lalu akan muncul layer guide

6. Klik frame 1 pada layer guide tadi lalu buatlah lingkaran tanpa fill color (hanya garis/stroke saja)

7. Hapus sedikit bagian lingkaran tadi menggunakan Eraser Tool dengan tipe Erase Lines

8. Klik pada objek panah, lalu pindahkan pusat dari objek panah ke ujung kiri lingkaran tadi

9. Insert Frame pada Frame 50 di Layer Guide, lalu insert Keyframe pada Frame 50 di Layer 1.. kemudian pindahkan objek panah ke ujung lingkaran sebelah kanan.

10. Klik kanan pada frame 1 di Layer 1 > create motion tween..

Lalu tekan Ctrl + Enter untuk melihat jalannya animasi, dan hasilnya akan seperti ini...

Nahh untuk membuat tanda panah tadi ikut berbelok mengikuti alur lingkaran, kita klik Frame 1 pada layer 1 kemudian centang Orient to Path pada Panel Property Inspector

dan hasilnya akan seperti ini..

OK sekian tutorial kali ini, semoga bermanfaat...

Kalo mau download file .fla dan .swf nya bisa di download disini, passwordnya : freakzfiles

Continue Reading

Hasil Flash Pertama Saya

Ahahah.. kali ini saya muncul bukan mo nulis tutorial nih gan... tapi mo share aja sekaligus pamer hasil nyoba-nyoba buat animasi.. kalo mau tau caranya kirim komentarnya kesini, nanti mungkin kapan-kapan saya buatin...

Oia kalo mo download file .fla sama .swf nya nihh bisa di download disini passwordnya : freakzfiles

Continue Reading

Memasang Flash (SWF) pada Postingan Blog

Mungkin diantara kalian ada yang ingin tahu bagaimana caranya saya menaruh File Flash (SWF) pada postingan-postingan tutorial saya mengenai Flash. Saya juga sebelumnya begitu dan akhirnya sekian lama saya  googling dan akhirnya ada salah 1 cara yang bisa dibilang mudah dan berhasil untuk menaruh File SWF pada postingan Blog. Kalau kalian ingin tahu saya dapet dimana caranya bisa diliat di link ini. Disitu ada berbagai jenis tempat untuk mengupload SWF, tapi pada tutorial ini saya hanya menjelaskan 1 saja.. yaitu cara yang saya pakai...

1. Upload file SWF kalian kesini :
http://www.swfup.com/

2. Tunggu sampai proses upload selesai, lalu kalian akan dibawa ke halaman hasil upload tadi... nahh disitu kalian klik "Embed"

3. Blok semua kode di bagian Embed (bukan link to this page atau direct link) lalu tekan Ctrl+C untuk Copy

4. Masuk ke Postingan kalian lalu buka tampilan Edit HTML, Paste kode tadi disitu..

Selesai... gampang kan??

~ UPDATE ~

28-Januari-2011

Tadi setelah saya coba lagi di swfup.com ternyata tombol embednya sekarang sudah tidak tersedia, ntah hanya di komputer saya saja atau memang dari sananya sudah begitu. Pokoknya saya tadi tidak bisa lagi mengambil URL flash saya dari situ...

Nahh sekarang kalau disana tidak bisa kita gunakan cara lain, yaitu dengan swfcabin.com.

Caranya hampir sama, masuk ke www.swfcabin.com, selanjutnya pilih berkas file .swf yang ingin di upload... lalu masukan judulnya pada kotak Title, tinggal di publish Flash aja dehh...

Tunggu hingga proses upload selesai, kemudian kamu akan diberi link untuk menuju ke halaman tempat flash yang kamu upload tadi...

heii tapi ingat itu hanya halaman, bukan file flash kamu, kalau hanya dengan link halaman tersebut, file flash kamu tidak akan terbaca pada blog.

Untuk dapat terbaca pada blog, copy dulu link tadi ke notepad, lalu ganti kata 'open' menjadi 'swf-files' (tanpa petik), kemudian akhiri dengan '.swf' (tanpa petik, perhatikan itu tulisannya [dot]swf)

contoh :
http://swfcabin.com/open/1296180338

diubah menjadi
http://swfcabin.com/swf-files/1296180338.swf

Nahh kemudian tinggal kita embed kode tersebut, caranya :

Kembali ke postingan kamu → mode Edit HTML, selanjutnya Copy kode ini ke Edit HTML postingan kamu

<object height="200" width="600">

  <embed src="http://swfcabin.com/swf-files/1296180338.swf" width="600" height="200">

  </embed>

</object>

Kemudian ganti kode yang berwarna biru dengan kode yang dibuat di notepad tadi, ganti kode yang berwarna merah dengan ukuran flash yang diinginkan...

OK dehh sekian dulu postingan saya kali ini....

Continue Reading

Membuat Animasi Perubahan Bentuk (Shape) pada Flash

OK masih pada Tutorial Animasi Sederhana Flash. Kalau sebelumnya kita membuat animasi pergerakan dengan Motion Tween, sedangkan pada Tutorial ini kita akan membuat Animasi perubahan bentuk (Shape) dan juga warna. Seperti biasa, saya hanya memberikan contoh sederhananya saja... nanti bisa kalian kembangkan sendiri dengan teknik yang sama...

OK langsung praktek..

1. Buat dokumen baru (Ctrl+N)

2. Klik pada Frame 1, lalu buat objek lingkaran berwarna merah dengan Oval Tool

3. Klik kanan pada Frame 20 > Insert Blank Keyframe, lalu buat objek kotak berwarna biru menggunakan Rectangle Tool..

4. Klik salah 1 frame diantara frame 1-20 (misalkan Frame 10) lalu ubah Tween pada Panel Properties menjadi Shape..

5. Tekan Ctrl+Enter untuk melihat jalannya animasi, hasilnya akan seperti ini...

 

OK sekian tutorial kali ini... semoga bermanfaat.. sampai ketemu lagi di postingan saya selanjutnya...

Continue Reading

Membuat Animasi Motion Tween Sederhana pada Flash

Kalau di postingan sebelumnya saya memberi tahu cara membuat animasi Frame by Frame. Sekarang kita akan membuat yang lebih simple, yaitu Animasi Pergerakan (Motion). Kenapa saya bilang lebih simple? makanya langsung simak aja cara-cara berikut..

1. Siapkan Stage (Ctrl+N) berukuran 600x200 pixels dengan background berwarna putih.

2. Klik(aktifkan) Frame 1, lalu buat objek lingkaran berwarna merah dengan Oval Tool tanpa stroke... jelasnya seperti ini

3. Klik kanan pada Frame 10 > Insert Keyframe, lalu pindahkan objek lingkaran tadi ke kanan dengan selection tool (v)

4. Klik kanan pada Frame 1 > Copy Frames, lalu klik kanan pada Frame 20 > Paste Frames..

5. Klik kanan pada frame berapa saja (misalnya frame 20) > Select All Frames, lalu selagi semua frame aktif Klik Kanan > Create Motion Tween...

6. Tekan Ctrl+Enter dan hasilnya akan seperti ini...

Gimana? simple bukan?? itu hanya contoh sederhananya saja, kalian bisa mengembangkannya sendiri sesuai imajinasi kalian..

OK saya tutup tutorial saya kali ini.. semoga dapat bermanfaat.. terima kasih atas perhatiannya (alahh kayak pidato aja).. dah ahh pokoknya sekian tutornya, wasalamm...!! 

Continue Reading

Membuat Animasi Frame by Frame Sederhana pada Flash

Kalau di postingan-postingan tentang Flash saya sebelumnya kita hanya mempelajari bermain objek dan sedikit teknik dasar lainnya seperti memainkan Frame dan Keyframe, nahh sekarang kita sudah mulai memasuki tahap membuat Animasi. Untuk mengawali tutorial animasi ini saya mulai dulu dari yang paling dasar, yaitu Animasi Frame by Frame. Animasi Frame by Frame adalah animasi yang menampilkan objek pada tiap Frame secara berurutan. Disini saya hanya ingin membagikan contoh sederhana pembuatan Animasi Frame by Frame ini, selebihnya tinggal kalian kembangkan saja sesuai imajinasi kalian...

OK langsung praktek...

1. Buat dokumen baru berukuran 150x150 pixel dengan background berwarna putih.

2. Klik kanan pada frame 5 > Insert Blank Keyframe, lalu buat huruf "A" pada stage dengan menggunakan Text tool.. 

3. Klik kanan pada frame 10 > Insert Keyframe, lalu ubah huruf "A" tadi menjadi huruf "N"..

4. Klik kanan pada frame 15 > Insert Keyframe, lalu ubah huruf "N" menjadi huruf "I"... dan lakukan langkah yang sama pada Frame 15,20,25,30,35...

5. Klik kanan pada Frame 40 > Insert Blank Keyframe..

6. Tekan Ctrl+Enter untuk melihat jalannya animasi.. maka hasilnya akan seperti ini...

OK sekian dulu postingan tutorial saya kali ini.. semoga dapat bermanfaat dan sampai ketemu lagi di postingan selanjutnya.. hehhe..

Continue Reading

Efek Foto Sederhana tapi Elegan (kayaknya)

Sebenernya saya nih ngeri kalo buat tutorial-tutorial design... soalnya pendidikan saya juga gk ada hubungannya dengan design-design beginian.. soalnya saya juga belajar begini-beginian secara otodidak.. tapi ya mo gimana lagi, tiap saya post ke facebook gambar-gambar photoshop saya, orang-orang pada minta buatin tutorialnya, termasuk juga tutorial yang ini..  yaudahh deh daripada dibilang sombong/pelit ilmu/apalahh mending saya posting aja disini...

OK segitu aja curhatnya, sekarang intronya.. "halahh lamaa gan"... yaudah dehh langsung aja...

1. Buka foto yang ingin di edit pada photoshop.. ceritanya disini pakai foto saya... "lahh kok pake foto situ gan.. itumahh wajar kalo hasilnya bagus".. hahha ia juga ya.. yaudah pake foto jagoan saya aja.. Master Romy Rafael..

2. Nahh sekarang seleksi fotonya dengan teknik nyeleksi apa aja terserah.. cuma disini contohnya ane pake Quick Mask... kalo mo tau cara nyeleksi pake quick mask cari aja di gugel banyak... "yahh kok nyari lagi gan.. sekalian aja tulis disini donk".. okok karena ane baek jadi sekalian aja....

2.1. Pastikan settingan Quick Mask seperti ini..

2.2. Tekan "Q" untuk masuk ke Quick Mask Mode...

2.3. Aktifkan brush tool, lalu brush bagian yang ingin diambil... sampe seperti ini nihh..

2.4. Nahh kalo udah begono, pencet Q lagi untuk keluar dari Quick Mask Mode.. jadi dehh seleksinya...

OK lanjut lagi...

3. Kalo udah ke seleksi, tekan Ctrl+J untuk mengambil bagian yang terseleksi ke layer baru.. lalu ubah nama layernya menjadi "x" << sebenernya namanya terserah ente cuma biar cepet yaudah "x" aja..

4. Aktifkan layer background, tekan Ctrl+U .. lalu setting lightnessnya menjadi +100..

5. Buat layer baru diatas layer "x", beri nama "y"... "pelit amat ngasih namanya gan?".. itu kan nama buat nandain doank gan.. ngapain ribet-ribet... "ohh gitu ya gan"..

6. Aktifkan gradient tool, terus setting semuanya kyk gini nihh...

7. Kalo uda di setting, langsung aja tarik gradient tool dari tengan ke atas (terserah ente sih sebenernya)...

8. Ubah blending mode layer "y" menjadi multiply..

9. Klik kanan pada layer x > blending option... lalu centang drop shadow.. setting seperti ini...

10. klik OK.. jadi dehhh... trus tambahin aja teks kalo mau.. jadinya kayak begini..

Dahh sekian dulu tutorialnya... mo tidur lagi saya.. hahha.. sampai ketemu lagi di tutorial selanjutnya...

Continue Reading

Tracing pada Flash

Bagi kalian yang udah menjelajah dunia grafis pasti sudah tidak asing lagi dengan yang namanya tracing. Apa sih itu tracing? ya.. singkatnya tracing adalah mengubah gambar bitmap menjadi vektor. Nahh.. Flash juga menyediakan fitur untuk mengubah gambar bitmap menjadi vektor sehingga file animasi yang dihasilkan akan lebih kecil dan juga tidak pecah jika gambar tersebut diperbesar..

OK sekarang kita mulai latihan tracingnya...

1. Import gambar yang mau di trace dengan cara klik menu File > Import > Import to Stage atau bisa langsung menekan Ctrl+R.. lalu browse gambar bitmap yg ingin di trace.. contohnya disini saya akan trace icon saya...

Import File 

2. Pastikan objek gambar yg diimport aktif, lalu klik menu Modify > Bitmap > Trace Bitmap.. maka akan muncul jendela Trace Bitmap..

Tampilan jendela Trace Bitmap

3. Atur jumlah warnanya pada bagian Threshold, atur juga jumlah pixel pada bagian Minimum Area.. lalu pilih Normal pada bagian Curve fit dan Corner Threshold.. lalu klik tombol OK..


Selesai dehh... gampang kan?

OK sekian dulu postingan saya kali ini... semoga bermanfaat.. sampai ketemu lagi di postingan selanjutnya.. hhehe..

Continue Reading

Menggunakan Ruler, Grid dan Guide pada Flash

Dalam membuat animasi, ada saat dimana kita harus membuat sebuah objek yang teratur. Untuk itulahh kita membutuhkan bantuan Ruler, Guide, dan Grid. Ketiga alat bantu tersebut akan memudahkan kita dalam melakukan pengukuran dan menggambar sebuah objek.. kalo mo jelasnya, coba aja nanti bandingin membuat objek dengan menggunakan alat bantu tersebut dengan yg tidak menggunakan...

OK intronya segitu aja... langsung kita mulai ke intinya...

---

Menampilkan Ruler

---

untuk menampilkan Ruler kalian tinggal klik menu View > Rulers atau bisa langsung menekan Ctrl+Alt+Shift+R. nanti di sekitar stage akan tampil seperti gambar di bawah ini..

Tampilan Ruler

---

Membuat Grid

---

Untuk membuat grid, kita tinggal klik menu View > Grid > Edit Grid, atau bisa langsung menekan Ctrl+Alt+G.. disitu kalian bisa setting ukuran, warna gridnya... jangan lupa centang 'show grid' untuk menampilkan Gridnya... sedangkan kalo untuk yang Snap to Grid Fungsinya untuk memudahkan membuat objek mengikuti Grid tadi..

Tampilan Grid

---

Membuat Guide

---

Untuk membuat Guide, munculkan dulu Ruler (Ctrl+Alt+Shift+R)... setelah itu klik menu View > Guides > Edit Guide (Ctrl+Alt+Shift+G).. setting dah itu sesukanya.... jangan lupa dicentang Show Guidenya... Snap to Guide juga boleh dicentang untuk mempermudah pembuatan objek..

Setelah itu.. untuk membuat Guide secara Horizontal, kalian klik pada Ruler yg diatas (yang mendatar/Horizontal) lalu drag ke baris mana saja... sedangkan untuk membuat Guide secara Vertikal, kalian klik pada Ruler yang disamping (tegak/Vertikal) lalu drag ke posisi mana saja yang diinginkan...

Membuat Horizontal Guide

Membuat Vertikal Guide

OK mungkin sekian dulu penjelasan kali ini... semoga tutorial ini dapat bermanfaat.. sampai ketemu lagi di tutorial selanjutnya ya.. hehhe..

Continue Reading