Button sederahana

Pada pertemuan sebelumnya kita selalu menggunakan suatu objek dan merubahnya ke dalam movie clip (mc) ketika convert to symbol. 

Apa itu button? Button adalah tombol sedangkan tombol adalah button, jadi bahasa inggrisnya tombol adalah button karena bahasa indonesianya button adalah tombol pusing kan?

Pernahkah anda melihat sebuah tombol yang berubah dari warna semula ketika di klik? misal tombol conncet pada modem, nah jadi kita akan membahas animasi di dalam tombol

mulai dengan langkah pertama dengan membuat sebuah button menggunakan rectangle , lalu beri warna sesuai dengan keinginan masing-masing dan convert to symbol, berikut penampakannya..

dobel klik objek tersebut sampai timeline berubah menjadi up, over, down dan hit

setelah itu insert keyframe pada over dan down..

sebelumnya apa itu up, over, down dan hit?

up adalah posisi dimana tombol tersebut dalam keadaan normal

over adalah posisi dimana kursor berada di atas objek tapi belum di klik

down adalah posisi kursor setelah di klik

hit adalah pembatasan areal klik.

langkah selanjutnya pindah kedalam frame over lalu rubah warna tombol tersebut

setelah frame over, pindah lagi ke frame down lalu rubah lagi warna tombolnya (kalo bisa berbeda dengan frame up dan over). kalo saya gunakan efek shadow atau bayangan di frame down.

selesai

ctrl + enter untuk melihat  Akhirnya

semoga bermanfaat..

Masking menggunakan brush

intro :

Dalam pembahasan kali ini saya akan memberikan langakah-langkah membuat animasi mask menggunakan brush. Kalo ditanya untuk apa animasi ini? jawabannya adalah agar gambar terlihat seperti  ada kilatan cahaya.

• import gambar yang akan kita jadikan background, caranya tekan ctrl+R atau di menu file – import – import to stage. Untuk import gambar  ada 2 pilihan, diantaranya :

1. import to stage adalah memasukkan gambar langsung di dalam stage (lembar kerja putih) dengan kata lain gambar tersebut hanya untuk 1 dokumen saja.
2. import to library adalah memasukan gambar ke dalam library. biasanya ini digunakan kalo kita membuat banyak dokumen dengan 1 gambar yang sama yang akan dijadikan background. jadi ketika ingin membuat dokumen baru dengan gambar yang sama, kita tinggal memindahkan gambar yang ada di library ke dalam stage tanpa harus import lagi.

• kunci layer tersebut dan ganti nama layer1 –> background, lalu tambahkan sebuah layer dan beri nama mask.

• pada layer mask, buat persegi panjang dengan rectangle fill color = putih, letakkan disebelah kiri stage dan pastikan masih di frame 1.

• masih di layer mask, masukkan keyframe pada frame 15 lalu geser persegi panjang tersebut ke kanan stage (yang tadi di kiri stage) setelah itu matikan stroke colornya

• sekarang kunci layer mask dan tambahkan layer baru dengan nama brush. Urutan layer dari atas ke bawah yaitu layer brush, mask, background. yang urutannya tidak sama dengan saya coba disamakan dulu caranya tinggal di geser… kalo sudah klik frame 1 agar background terlihat dan pastikan hanya layer brush yang aktif dan terbuka, layer lain di kunci.

• gunakan brush fill color=hitam, lalu sapukan di gambar tersebut

• selanjutnya masukkan frame (kenapa harus frame? ) di ketiga layer tersebut pada frame 30 dan create motion tween di layer mask pada frame 1

• end touch, jadikan layer brush dan layer mask menjadi mask. caranya klik kanan pada layer brush lalu pilih mask, otomatis layer mask akan termasking juga.

• tinggal di ctrl+enter
• lihat hasilnya
• sudah
• selesai
• 

jika hasil akhirnya tidak terlihat, mungkin belum ada flash player

silahkan download disini

Animasi mask

Masking adalah mengambil warna dari objek yang lain atau penggabungan objek

1. langkah pertama rename (dobel klik) layer1 menjadi background dan  buat teks sebagai backgroundnya.

2. setelah itu buat layer baru dengan nama efek dan di layer efek ini rubah menjadi mask caranya klik kanan pada layer efek. Kalau sudah otomatis lambang layer background akan berubah dan keduanya akan otomatis terkunci, lalu buka layer efek.

3. oke kalau sudah pada layer efek yang masih aktif dan tidak terkunci, buat lingkaran dengan fill color warna hitam dan stroke color mati (no color).

4. jika sudah dibuat, masukkan keyframe pada frame 20 lalu geser lingkaran tersebut ke sebelah kanan dan di frame 40 geser lingkaran tersebut ke sebelah kiri

Nb: masih di layer efek

 

5. nah  pada saat kita melakukan cara ke 4, teks tersebut tidak terlihat batang hidungnya kan? Gimana caranya agar dia terlihat? Caranya masukkan frame pada frame 40 di layer background.

Kenapa kita hanya insert frame pada layer background?

Apa bedanya keyframe dengan frame?

Jadi begini awal kisahnya, tentukan yang akan kita gerakkan atau di animasikan mau backgroundnya atau lingkarannya? Pada kesempatan kali ini yang saya gerakan adalah lingkaranya.

Berhubung lingkaran tersebut ada di layer efek, maka layer tersebut saya insert keyframe, jadi penggunaan keyframe untuk objek yang akan kita gerakkan atau animasikan.

Jadi background tersebut hanya insert frame, karena frame hanya untuk menampilkan saja tanpa di gerakkan atau dianimasikan. Seperi itu, sampai sini jelas?

6. sekarang sudah tau perbedaan keyframe dengan frame?

Kalau sudah tekan enter untuk melihat perubahannya,,,bagaimana hasilnya?

Pergerakan dari lingkaran atau mask tersebut masih terlihat kasar kan? Untuk memperhalus gerkananya kita gunakan create motion tween pada layer efek di frame 20 dan 40 atau dari frame 1 di blok sampai frame 40.

Untuk melihat hasil sesungguhnya tekan ctrl + enter..

Kalau sudah jangan lupa di simpan takutnya mati lampu…

Sampai sini ada yang mau ditanya? kalo tidak pertemuan hari ini saya tutup wassalaam..

Selalu budayakan komentar

Membuat animasi motion guide

Pernah kah anda melihat film kartun, ketika ada objek yang bergerak gerak ketika jatuh, atau tentang ufo terbang?

Nah efek yang digunakan adalah motion guide. Sebelumnya tahukah anda apa itu GUIDE? Guide dalam kehidupan sehari-hari adalah pemandu atau penunjuk jalan hehee kaya tour guide

Dalam pembahasan kali ini motion guide adalah menggerakkan suatu objek berdasarkan track (garis tertentu). Syarat untuk animasi motion guide adalah :

• harus ada tracknya atau lintasan.
• tracknya atau lintasan tersebut harus memiki titik awal dan titik akhir dengan kata lain jikalau lintasan tesebut tidak berujung maka objeknya tidak akan berjalan.
• titik tengah yang ada di objek harus pas di atas garis, kalau tidak objek tersebut tidak akan bergerak sesuai lintasan.

oke langsung saja buka flashnya, disini saya menggunakan macromedia flash professional 8

1. Buat objek ufo dengan oval tool (a)

2. Hapus bagian dari ufo tersebut sehingga terbentuk seperti gambar (b)

3. Lalu tambahkan aliennya supaya terlihat ufo bukan gangsing (c)

4. Setelah terlihat sperti ufo yang berisikan alien, lalu tambahkan warna dan hilangkan stroke colornya (d)

5. Langkah selanjutnya convert ke symbol dengan cara seleksi seluruh bagian ufo dengan selection tool atau tekan ctrl+a lalu tekan F8 (bukan F sama angka 8 ) hehehee…, nanti akan muncul jendela convert to symbol.

Disana ada 3 type, yaitu : movie clip (mc), button (btn), graphic (grp)

Ketiganya bisa di animasikan dan diberi script (koding) tetapi untuk graphic tidak bisa di edit

Selain type ada lagi name, yaitu untuk memberikan nama misalkan ufo_mc. Jadi dari nama tersebut kita bisa mengetahui type tersebut adalah movie clip

Registration  digunakan untuk menuntukan urat nadi dari objek yang akan kita animasikan.

6. Lanjut ke pokok pembahasan, setelah di convert, add motion guide

Caranya klik kanan pada layer 1(yang ada di timeline) pilih add motion guide

7. Pastikan layer yang aktif adalah guide layer, lalu buat garis sebagai tracknya

Disini saya menggunakan pencil tool, bisa gunakan tool yang lain seperti line, pen, oval, atau pun rectangle. Intinya harus ada titik awal dan titik akhir, jika gunakan oval atau  rectangle maka ada garis yang harus di delete.

8. Setelah di buat garis, langkah selanjutnya adalah klik ufo tersebut menggunakan selection  tool lalu perhatikan ditengah tengah objek tersebut ada lingkaran putih dan tanda + didalamnya, ada?

Kalo ada maka letakkan posisi tersebut tepat diatas garis, seperti ini

9. Tambahkan keyframe pada frame 50 di kedua layer tersebut, dalam frame 50 masih aktif, gerakan ufo ke ujung yang satunya sebagai titik akhir

Kalau sudah akhirnya seperti ini :

Nah langkah terakhir adalah klik kanan di layer1 dan frame1 lalu pilih create motion tween tujuannya agar gerakan ufo terlihat lebih halus..

Tekan ctrl+enter (bukan entar hehehe) untuk melihat hasil yang telah kita lakukan dari awal. ketika proses ini berjalan maka garis atau lintasan yang kita buat sebelumnyatidak akan terlihat.

Sekian, semoga bermanfaat

Budayakan komen ya, terima kasih..

Flash adalah

Flash yang dulunya bernama Macromedia Flash adalah salah satu perangkat lunak komputer yang digunakan untuk membuat gambar vektor maupun animasi gambar tersebut.  Keunggulan gambar vektor dibanding gambar lain yaitu terlihat pada saat kita memperbesar (zoom) gambar tersebut tidak akan pecah. Keunggulan lainnya di dalam flash bisa melengkungkan garis tanpa harus di convert terlebih dahulu, dan banyak lagi .

Berkas yang dihasilkan dari perangkat lunak ini mempunyai file extension .swf dan dapat diputar di penjelajah web yang telah dipasangi Adobe Flash Player (html). Selain itu hasil gambar flash bisa dibuka sebagai gambar bertype .gif, .jpeg, .png dan lain-lain.

Flash didesain dengan kemampuan untuk membuat animasi 2 dimensi yang handal dan ringan sehingga flash banyak digunakan untuk membangun dan memberikan efek animasi pada website, CD Interaktif dan yang lainnya. Selain itu aplikasi ini juga dapat digunakan untuk membuat animasi logo, movie, game, pembuatan navigasi pada situs web, tombol animasi, banner, menu interaktif, interaktif form isian, e-card, screen saver dan pembuatan aplikasi-aplikasi web lainnya. Dalam Flash, terdapat teknik-teknik membuat animasi, fasilitas action script, filter, custom easing dan dapat memasukkan video lengkap dengan fasilitas playback FLV. Keunggulan yang dimiliki oleh Flash ini adalah ia mampu diberikan sedikit code (script) pemograman baik yang berjalan sendiri untuk mengatur animasi yang ada didalamnya atau digunakan untuk berkomunikasi dengan program lain seperti HTML, PHP, dan Database dengan pendekatan XML, dapat dikolaborasikan dengan web, karena mempunyai keunggulan antara lain kecil dalam ukuran file outputnya

Movie-movie Flash memiliki ukuran file yang kecil dan dapat ditampilkan dengan ukuran layar yang dapat disesuaikan dengan keingginan (document). Aplikasi Flash merupakan sebuah standar aplikasi industri perancangan animasi web dengan peningkatan pengaturan dan perluasan kemampuan integrasi yang lebih baik. Banyak fitur-fitur baru dalam Flash yang dapat meningkatkan kreativitas dalam pembuatan isi media yang kaya dengan memanfaatkan kemampuan aplikasi tersebut secara maksimal. Fitur-fitur baru ini membantu kita lebih memusatkan perhatian pada desain yang dibuat secara cepat, bukannya memusatkan pada cara kerja dan penggunaan aplikasi tersebut. Flash juga dapat digunakan untuk mengembangkan secara cepat aplikasi-aplikasi web yang kaya dengan pembuatan script tingkat lanjut. Di dalam aplikasinya juga tersedia sebuah alat untuk men-debug (memperbaiki) script. Dengan menggunakan Code hint untuk mempermudah dan mempercepat pembuatan dan pengembangan isi ActionScript secara otomatis.