Membuat Flash Button
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:
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:
- 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:
“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:
“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:
Setelah convert to symbol maka pilih ‘button’
Berikut screenshotnya:
“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:
“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:
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:
“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:
“setelah filter glow muncul, anda tinggal melakukan pengaturan sekehendak anda seperti screenshot berikut ini”
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:
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 ;-)
Selamat Belajar Flash, SEMOGA BERMANFAAT
Flash merupakan program untuk membuat animasi yang handal, Tutorial Flash kali ini adalah membuat efek animasi shine dan membuat mobil mengkilap bercahaya...
Para Pembaca yang budiman, belum punya mobil yang mengkilap tapi ingin membuat mobil anda jadi mengkilap tanpa biaya nah cuma di ilmugrafis kumpulan tutorial flash dengan tema mobil mengkilap bercahaya.
Langkah - Langkahnya:
1. Masukkan (import) gambar ke dalam stage
misalnya gambar mobil seperti gambar di bawah ini
2. Setelah gambar berada pada stage, atur besarnya stage sesuai dengan ukuran gambar yang telah di import tadi misalnya 500 px (width) dan 315 px (height)
3. Ganti nama layer1 menjadi mobil
4. Tambahkan satu layer baru, kemudian ganti layer tersebut dengan nama efek.
5. Klik icon rectangle tool ( tekan huruf R di keyboard ), kemudian gambar persegi panjang melebihi gambar mobil, seperti gambar di bawah ini.
6. Klik gambar persegi panjang yang telah dibuat tadi, kemudian ubah warna persegi panjang seperti gambar di bawah ini
7. Kemudian untuk mendapatkan efek cahaya yang mengkilap, lakukan pengaturan warna persegi panjang seperti gambar di bawah ini
8. Efek mengkilap telah selesai dibuat, kemudian langkah selanjutnya, tambahkan satu layer lagi, kemudian ganti nama layer tersebut dengan animasi
9. Masih di layer animasi kill icon Pen tool
10. Kemudian buatlah bagian yang akan dianimasikan misalnya seperti gambar di bawah ini.
11. Setelah area yang dianimasikan selesai dibuat, maka langkah selanjutnya yaitu klik kanan pada layer animasi pilih menu mask
12. Klik frame 30 pada setiap layer, kemudian tekan F6 untuk memberikan insert keyframe
13. Klik kanan antara frame 1 – 30 pada layer efek, kemudian pilih menu create motion tween
14. Klik frame 30 pada layer efek, kemudian pindahkan gambar persegi panjang ke sebelah kanan dari gambar mobil, seperti gambar di bawah ini
15. Tekan ctrl + enter untuk melihat hasilnya…
Preview in image mode
Preview in Animation Mode
Cling.. Cling.. Mobil Bersinar Mengkilap ^_^
Source File: mobil bersinar *.fla
Enjoy it………… OK sampai ketemu di tutorial Flash Selanjutnya...
| BE] FLASH |
Membuat Animasi Sederhana dengan Permainan Keyframe
Flash merupakan Software animasi yang hebat, kali ini saya akan mencoba membuat tutorial yang sederhana yaitu membuat animasi sederhana dengan permainan keyframe...
Ini berawal dari keisengan saya mengutak atik software ini, ya namanya juga baru belajar jadi maaf bila ada yang kurang jelas disini, hehehe...
Ok, mari kita coba mulai saja...
Langkah 1
Buka Program Flash MX kamu
Lalu pilih new... Flash Document
Langkah 2
Menentukan besarnya STAGE (coba pelajari dulu layout Flash agar lebih paham)
Caranya:
1. Klik Size pada Properties
2. Akan Muncul Document Properties
Atur dimensions:
disini saya menggunakan 300 x 200 px
3. Tekan OK
Langkah 3
1. Tekan R pada keyboad lalu gambar kotak di Stage
2. Lakukan pewarnaan dengan menekan V pada keyboard dan klik kotak lalu pilih Fill yang ada tanda nomor 2 di gambar
3. Pilih warna disini saya menggunakan warna biru dongker dengan nilai hexadecimal #000066
Langkah 4
Tekan T pada keyboard untuk menggunakan Text Tool lalu ketik terserah namun disini saya mengeti huruf "F"
Langkah 5
Lihat Kotak Timeline
Di situ kita akan bermain... ;P
Baiklah sekarang tekan F5 pada keyboard... hasilnya frame akan bertambah
hal ini untuk mengatur ritme dari animasi
OK tekan sebanyak 5 X
Hasilnya:
lalu Tekan F6 pada keyboard... hasilnya key Frame (untuk animasi) akan muncul
jika sudah tambahkan huruf pada stage
Ulangi Langkah 5 dan 6 (Terus tambahkan huruf sehingga membentuk tulisan FLASH
tutorial Flash
OK!!!
Untuk melihat hasilnya... berdoa dulu ya... Tekan CTRL + Enter
Hasilnya:
Flash animasi,,, Siapa takut!!!
Jika ada saran maupun kritik... kontak penulis Johan - ilmugrafis
"Dare to Dream, Sometime A Dreamer Can Create A Future"
Source File: Download Source File - *.FLA
OK sampai ketemu di tutorial Flash Selanjutnya...
Bagi yang masih awam tentang Flash saya akan berbagi tips, Seringkali kita menemui kendala dalam menyesuaikan ukuran gambar dengan ukuran Stage...
Namun sebelum itu masukkan dulu gambar ke dalam Stage dengan menggukanan
File > Import > Import To Stage...
Atau tekan CRTL + R > Pilih Gambar > OK
Apa kendala yang muncul???
Kendala - kendala itu adalah:
Ukuran gambar lebih besar daripada ukuran Stage, atau ukuran Stage yang Lebih besar daripada ukuran gambar...
Contoh Kasus:
ukuran Stage yang Lebih besar daripada ukuran gambar
(Ket: Kanvas Putih adalah Stage)
Contoh Kasus:
Ukuran gambar lebih besar daripada ukuran Stage
(Ket: Kanvas Putih adalah Stage)
Apa yang harus kita lakukan????
Tenang... Caranya sangat mudah...
Langkah Convensionalnya adalah dengan Menggunakan Free Transform Tool (Q) dan Selection Tool namun cara ini kurang efektif...
Cara yang paling efektif dan efisien adalah dengan menggunakan pengaturan Properties
Klik Properties
Kemudian Klik Gambar pada Stage agar muncul pengaturan seperti ini:
Ini dia rahasianya... W dan H
W= Weight=Lebar
H=Height=Panjang
X=Menunjukkan Selisih Gambar dengan Stage secara Horisontal / Sumbu X
Y=Menunjukkan Selisih Gambar dengan Stage secara Vertikal / Sumbu Y
Misal:
Jika kita mempunyai ukuran Stage 400 x 300 px
Maka agar sesuai dengan Stage nilai W dan H harus diubah mengikuti ukuran Stage
W= 400
X= 300
dan agar posisinya sejajar dengan Stage maka X dan Y harus diubah ke 0
X= 0
Y=0
Nah Dengan Pengaturan Tersebut maka Stage = Gambar
Ok LEts Practice With Auron - Final Fantasy X
Nantikan Tips dan Trik berikutnya... Hanya di ilmugrafis.com
Jika ada saran maupun kritik... kontak penulis Johan - ilmugrafis
"Dare to Dream, Sometime A Dreamer Can Create A Future"
OK sampai ketemu di tutorial Flash Selanjutnya..
Memasukkan dan Menyesuaikan Gambar dengan Stage
Bagi yang masih awam tentang Flash saya akan berbagi tips, Seringkali kita menemui kendala dalam menyesuaikan ukuran gambar dengan ukuran Stage...
Namun sebelum itu masukkan dulu gambar ke dalam Stage dengan menggukanan
File > Import > Import To Stage...
Atau tekan CRTL + R > Pilih Gambar > OK
Apa kendala yang muncul???
Kendala - kendala itu adalah:
Ukuran gambar lebih besar daripada ukuran Stage, atau ukuran Stage yang Lebih besar daripada ukuran gambar...
Contoh Kasus:
ukuran Stage yang Lebih besar daripada ukuran gambar
(Ket: Kanvas Putih adalah Stage)
Contoh Kasus:
Ukuran gambar lebih besar daripada ukuran Stage
(Ket: Kanvas Putih adalah Stage)
Apa yang harus kita lakukan????
Tenang... Caranya sangat mudah...
Langkah Convensionalnya adalah dengan Menggunakan Free Transform Tool (Q) dan Selection Tool namun cara ini kurang efektif...
Cara yang paling efektif dan efisien adalah dengan menggunakan pengaturan Properties
Klik Properties
Kemudian Klik Gambar pada Stage agar muncul pengaturan seperti ini:
Ini dia rahasianya... W dan H
W= Weight=Lebar
H=Height=Panjang
X=Menunjukkan Selisih Gambar dengan Stage secara Horisontal / Sumbu X
Y=Menunjukkan Selisih Gambar dengan Stage secara Vertikal / Sumbu Y
Misal:
Jika kita mempunyai ukuran Stage 400 x 300 px
Maka agar sesuai dengan Stage nilai W dan H harus diubah mengikuti ukuran Stage
W= 400
X= 300
dan agar posisinya sejajar dengan Stage maka X dan Y harus diubah ke 0
X= 0
Y=0
Nah Dengan Pengaturan Tersebut maka Stage = Gambar
Ok LEts Practice With Auron - Final Fantasy X
Nantikan Tips dan Trik berikutnya... Hanya di ilmugrafis.com
Jika ada saran maupun kritik... kontak penulis Johan - ilmugrafis
"Dare to Dream, Sometime A Dreamer Can Create A Future"
OK sampai ketemu di tutorial Flash Selanjutnya...
Memasukkan dan Menyesuaikan Gambar dengan Stage
Publish: 29 Juli 2008 | Author & Copyright: Johan | Status: FREE tutorial
Bagi yang masih awam tentang Flash saya akan berbagi tips, Seringkali kita menemui kendala dalam menyesuaikan ukuran gambar dengan ukuran Stage...
Namun sebelum itu masukkan dulu gambar ke dalam Stage dengan menggukanan
File > Import > Import To Stage...
Atau tekan CRTL + R > Pilih Gambar > OK
Apa kendala yang muncul???
Kendala - kendala itu adalah:
Ukuran gambar lebih besar daripada ukuran Stage, atau ukuran Stage yang Lebih besar daripada ukuran gambar...
Contoh Kasus:
ukuran Stage yang Lebih besar daripada ukuran gambar
(Ket: Kanvas Putih adalah Stage)
Contoh Kasus:
Ukuran gambar lebih besar daripada ukuran Stage
(Ket: Kanvas Putih adalah Stage)
Apa yang harus kita lakukan????
Tenang... Caranya sangat mudah...
Langkah Convensionalnya adalah dengan Menggunakan Free Transform Tool (Q) dan Selection Tool namun cara ini kurang efektif...
Cara yang paling efektif dan efisien adalah dengan menggunakan pengaturan Properties
Klik Properties
Kemudian Klik Gambar pada Stage agar muncul pengaturan seperti ini:
Ini dia rahasianya... W dan H
W= Weight=Lebar
H=Height=Panjang
X=Menunjukkan Selisih Gambar dengan Stage secara Horisontal / Sumbu X
Y=Menunjukkan Selisih Gambar dengan Stage secara Vertikal / Sumbu Y
Misal:
Jika kita mempunyai ukuran Stage 400 x 300 px
Maka agar sesuai dengan Stage nilai W dan H harus diubah mengikuti ukuran Stage
W= 400
X= 300
dan agar posisinya sejajar dengan Stage maka X dan Y harus diubah ke 0
X= 0
Y=0
Nah Dengan Pengaturan Tersebut maka Stage = Gambar
Ok LEts Practice With Auron - Final Fantasy X
Nantikan Tips dan Trik berikutnya... Hanya di ilmugrafis.com
Jika ada saran maupun kritik... kontak penulis Johan - ilmugrafis
"Dare to Dream, Sometime A Dreamer Can Create A Future"
OK sampai ketemu di tutorial Flash Selanjutnya...
