Selasa, 09 November 2010

Membuat Flash Button

Membuat Flash Button
Publish: 17 September 2010 | Author & Copyright: Okie Eko Wardoyo | Status: FREE tutorial

Taukah anda tentang button? Button adalah sebuah tombol yang bisa diclick oleh mouse kita. Biasanya button digunakan untuk memanggil fungsi-fungsi tertentu, serta memiliki tampilan yang berubah ubah sewaktu kita meng-mouseover atau meng-click nya. Nah, dalam tutorial kali ini kita tidak akan membahas tentang fungsi – fungsi ( fungsi disini bukan berarti ‘kegunaan’ lho, tapi sebuah ‘function’ ) melainkan hanya membahas pada tampilan button nya saja.
Screenshot  jadi:
image ilmugrafis
Gambar Flash Button

Berikut Tutorial Flash :
- Langkah 1 : Silahkan buka Adobe Flash anda, di sini saya menggunakan versi Adobe Flash terbaru CS5, anda juga dapat menggunakan CS4, CS3, Flash 8, atau versi lama lainnya.
Berikut screenshotnya:
image ilmugrafis


- Langkah 2 : Langkah pertama, mari kita buat sebuah gambar button seperti di atas. Untuk menggambarnya anda dapat menggunakan Adobe Flash sendiri, Photoshop, Coreldraw, Adobe Illustrator, atau aplikasi lain. Di sini saya tidak akan menggambar, tetapi saya menggunakan gambar button sederhana yang sudah ada di Adobe Illustrator.

“hum, saya sendiri tidak tahu, kenapa sangat minim sekali tool tool untuk menggambar di Adobe Flash, mungkin itu merupakan teknik bisnis sehingga bila kita menggunakannya maka kita memerlukan product Adobe lain yang mengkhususkan pada bidang menggambar seperti Adobe Illustrator atau Adobe Fireworks ^_^ “

Berikut Screenshotnya:
image ilmugrafis
“buka Adobe Illustrator anda dan pilih salah satu button yang sudah ada, drag button ke lembar kerja kemudian copy paste ke lembar kerja Adobe Flash”


- Langkah 3 : Saat kita copy paste ke Adobe Flash maka tampilannya akan seperti berikut ini:
 image ilmugrafis
“akan ada konfirmasi saat proses paste, silahkan untuk lebih mudahnya pilih saja ‘paste as bitmap’ , maka semua layer layer dari AI (Adobe Illustrator akan di merge dijadikan gambar bitmap ).
Sebenarnya untuk membuat animasi yang lebih komplek anda bisa memilih ‘paste using AI File Importer Preferences’ , tapi karena di tutorial ini kita hanya membuat button jadi cukup pilih saja ‘paste as bitmap’


- Langkah 4 : Convert bitmap kita ke symbol. Untuk membuat sebuah flash button di Adobe Flash, maka bitmap yang baru saja kita import harus dijadikan ‘button symbol’. Klik kanan bitmap -> convert to symbol -> button.
Berikut adalah screenshotnya:
image ilmugrafis
Setelah convert to symbol maka pilih ‘button’
Berikut screenshotnya:
image ilmugrafis
“symbol di flash dibagi menjadi 3 yaitu ‘movie clip’, ‘button’, dan ‘graphic’. Karena kita akan membuat button, maka kita harus mengeset symbol kita sebagai button. Bila anda ingin membuat animasi anda dapat memilih ‘Movie Clip’


- Langkah 5 : Anda telah berhasil mengkonvert bitmap kita sebagai button. Nah, kemudian langkah selanjutnya adalah kita akan mengotak atik ‘apa yang ada’ di dalam symbol button yang baru saja kita buat.
Double click button dan akan terlihat screenshot seperti berikut:
image ilmugrafis
“di dalam button kita terdapat 4 buah frame yang dapat kita modifikasi dengan menggunakan ‘key frame’. Pada gambar diatas yang baru terisi hanya frame Up, sehingga saat button di preview maka tidak ada effect  ketika mouse diarahkan ke button maupun ketika button diclick, haduh susahnya menjelaskan, untuk lebih jelasnya silahkan dipreview  control -> test movie ( ctrl + enter )   ^_^ “
Frame Up : untuk button normal ( saat tidak ada event tertentu pada button, misalnya mouse over )
Frame Over: saat mouse diarahkan diatas button
Frame Down: saat mouse diclickan ke button ( click di sini masih dalam posisi ditekan, belum dilepaskan)
Frame Hit: Saat mouse dilepaskan ( setelah click )


- Langkah 6 : Saatnya kita isi frame demi frame button kita.
- Mari kita buat button over ( button berubah saat mouse diarah kan ke button)
a. Klik Kanan frame over -> insert keyframe->setelah insert keyframe pastikan anda masih dalam frame over tersebut->klik object button di frame over-> lihat properties di window kanan.
Berikut adalah screenshotnya:
image ilmugrafis

image ilmugrafis
b. Diatas kita lihat bahwa button di frame over masih bitmap, nah untuk menambah effect saat mouse over maka bitmap ini harus kita ubah menjadi symbol lagi. Symbol di dalam symbol adalah ciri khas product Adobe.
Untuk mengubah sebagai symbol , anda tinggal click kanan->convert to symbol ->pilih movieclip atau button.

c. Kemudian setelah terconvert sebagai symbol ( movieclip atau button ), click button yang sudah terconvert sebagai symbol di frame over tadi, nah window properties sekarang sudah berubah seperti pada screenshot di bawah:
image ilmugrafis
“nah, setelah diconvert lagi ke symbol ( movieclip atau button ) maka ada filters (effect yang akan kita gunakan ), juga ada option option lain yang sangat berguna untuk kita”

d. terakhir, beri effect filter saat mouse over di frame over
click symbol button ->lihat window properties-> click add filter ->glow
silahkan lihat screenshot:
image ilmugrafis
“setelah filter glow muncul, anda tinggal melakukan pengaturan sekehendak anda seperti screenshot berikut ini”
image ilmugrafis
Sekarang kita telah berhasil menambahkan effect glow pada mouse over ( tepatnya di frame over ), bila anda ingin mempreviewnya bisa mengclick  control -> test movie pada menu atas.
Berikut adalah hasil akhir untuk button over:
image ilmugrafis
Untuk button down dan hit adalah sama saja prosesnya. Anda dapat berkreasi sendiri, coba coba ,
Maupun membuat sebuah proyek dengan button.

Demikian sedikit tutorial dari saya, semoga bermanfaat. Sampai jumpa ;-)
Semoga Bermanfaat

<> Author This Tutorial
IG Bookmark dan Share:
Bookmark and Share

okie eko W Nama : Okie Eko Wardoyo

TTL : December 10, 1987
Email : Okie_eko_wardoyo[at]yahoo[dot]com
Facebook : www.facebook.com/okiewardoyo
Tentang Penulis: aku anak mojogedang,karanganyar, solo
alumni smansakra dulu

Tutorial / Artikel ini resmi diberikan untuk dipublikasikan di www.ilmugrafis.com
Saran / Kritik / Pertanyaan maupun keterangan lebih lanjut bisa menghubungi penulis yang bersangkutan
Semoga Bermanfaat, Terima kasih

<> info dan Layanan ilmugrafis.com
Share URL Share the URL of this Tutorial in IM, Email or post in forums.

* Code copied to clipboard
Download Service PDF File: Belum Tersedia
Source File: Belum Tersedia

add find Rekomendasi Resmi ilmugrafis.com
Video Tutorial Metode Belajar Cepat dan Mudah:

- Dijamin Bagus dan Berkualitas Bagi Pemula Maupun Mahir
- Video Tutorial ini BAHASA INDONESIA
- Lebih Murah dan Praktis
- Keunggulan: Tinggal Lihat - Praktek - Mahir
- add by ilmugrafis.com -

CD Video Tutorial ADOBE FLASH CS4
adobe flash cs4
Membahas interface serta tool terbaru Flash CS4 Membuat animasi 3 dimensi dengan 3D tool Flash CS4 , Tutorial teknik animasi motion tween CS Menyimpan animasi sebagai presets melalui Motion Presets panel
Selengkapnya...

Video Tutorial ADOBE FLASH MX
flash mx
Berisi Panduan dan Pembuatan berbagai animasi, Presentasi Atractif, Photo Slide, Peta, dan disertai dengan Action Script...

Selengkapnya...

Platinum Wedding Vector - Best Experience Wedding Theme
platinum wedding
Platinum Wedding Vector Collections adalah Produk koleksi vector background Border maupun image dengan thema wedding sehingga memudahkan pekerjaan anda dalam mendesain suatu illustrasi dan event bertema wedding...
Segera dapatkan...

Selengkapnya...

PHOTOSHOP CS4 Object Nyata (new)
photoshop cs4 object nyata
Bila kita membuat bentuk visual manusia, maka harus benar - benar mendekati bentuk manusia yang sebenarnya. Konsep ini yang anda akan dapatkan disini
Selengkapnya...

Video Tutorial Adobe Premiere CS3
3dsmax9

CD Tutorial penggunaan Adobe Premier CS3 untuk mengcapture, mengedit dan memproduksi video secara digital
Info Selengkapnya Klik disini...



Disclaimer / Laporan Penyalahgunaan
  • Semua Konten ilmuGRAFIS bertujuan untuk pembelajaran dan kepentingan pendidikan semata, mohon tidak menyalahgunakan informasi dan pengetahuan yang diperoleh untuk hal - hal yang merugikan diri sendiri maupun orang lain.
  • Kami melakukan segala upaya untuk memastikan bahwa informasi di website ilmuGRAFIS tersaji seakurat dan sebaik mungkin. Anda bisa melaporkan jika ada konten ataupun informasi yang tidak berkenan dengan kontak kami
  • Jika ingin mengcopy tutorial ini mohon memberikan link back ke ilmuGRAFIS dan menambahkan link tutorial yang bersangkutan serta mematuhi Term of Use
Semoga Bermanfaat

Tidak ada komentar:

Poskan Komentar