Bikin Banner Flash (swf) dengan tambahan menu link pilihan
Seperti kata pepatah "sambil menyelam minum air", itulah sebuah perumpamaan untuk sesuatu yang di lakukan pada waktu yang bersamaan. Ya...seperti banner yang saya buat ini, selain untuk menampilkan pesan dari yang kita sampaikan bahkan ini bisa di gunakan sebagai menu jalan pintas atau link ke alamat yang di tentukan. Banner ini sengaja saya buat untuk beberapa link dari beberapa tombol, namanya juga "menu" pasti banyak pilihan link nya. Hehehe :D
Oke kawan langsung aja pada prakteknya.
Seperti kata pepatah "sambil menyelam minum air", itulah sebuah perumpamaan untuk sesuatu yang di lakukan pada waktu yang bersamaan. Ya...seperti banner yang saya buat ini, selain untuk menampilkan pesan dari yang kita sampaikan bahkan ini bisa di gunakan sebagai menu jalan pintas atau link ke alamat yang di tentukan. Banner ini sengaja saya buat untuk beberapa link dari beberapa tombol, namanya juga "menu" pasti banyak pilihan link nya. Hehehe :D
Oke kawan langsung aja pada prakteknya.
Di session ini saya tidak akan menjelaskan bagaimana cara membuat sebuah gerakan motion Tween karena sudah banyak web/blog tutorial yang sudah membahasnya.
Langsung aja, oke?
Langkah pertama buat sebuah gerakan text/gambar dengan motionTween atau actionScript.
contoh:
Usahakan ukuran document pada stage flash tidak terlalu besar misalnya 700x200 px itu sudah cukup. Ini dimaksudkan agar loading pengambilan data dari file yang sudah kita hosting sebelumnya menjadi ringan dan tidak memberatkan loading page.
Langkah kedua.
Insert keyframe pada frame terakhir dari seluruh gerakan motionTween di stage utama (exit edit mode).
Beri ID frame "click_menu" pada frame akhir tersebut. Lalu masukan sebuah tombol dari external library (sample button).
Disini saya menggunakan 4 tombol yang berbeda warnanya. Dan masing-masing tombol berbeda alamat link nya.
Cara untuk menentukan alamat link pada tombol sangat mudah, misalnya:
Klik atau pilih objek tombol yang kawan-kawan kehendaki (misalnya tombol merah)
Setelah itu klik kanan di objek tombol tersebut dan pilih action pada right click menu.
Selanjutnya masukan actionScript yang ada di bawah ini:
on (release) {
getURL("http://anime7graphic.blogspot.com/2007/04/hai-newbie.html", "_blank", "GET");
}
note:
untuk text berwarna merah, itu adalah alamat link yang akan kita gunakan.
buat beberapa tombol dengan link yang berbeda.
ulangi langkah-langkah untuk membuat link pada tombol.
Setelah itu buat block button untuk navigasi view menu pada frame gerakan tadi.
Caranya:
Buat layer baru lalu masukan sebuah shape atau rectangle dengan ukuran sama seperti ukuran document flash nya.
Lalu tekan tombol F8 pada keyboard atau klik kanan objek rectangle tadi lalu pilih convert symbol>pilih type>button>ok
Selanjutnya double click pada block button tadi atau klik kanan pilih "edit in place" di right click menu.
Insert layer dan tepatkan pada urutan oertama dengan cara drag mouse>tarik ke atas.
Pilih text tool pada toolbar lalu ketik "click for menu".
Setelah itu buat frame kedua dari keseluruhan layer pada stage edit tombol dan pindahkan objek rectangle tadi dari frame 1 (label "out") ke frame 2 (label "over") dengan cara cut frame (right click (pada frame)>pilih cut frame>insert frame di label "Hit".
Klik scene pada timeline untuk mengembalikan ke stage awal, setelah itu pilih objek/block button tadi. Klik kanan>action>ketik/copy-paste actionScript di bawah ini:
on (release) {
gotoAndStop("menu_click");
}
note:
Huruf merah adalah ID frame pada frame terakhir setelah motion. ID frame ini bia kita ganti dengan angka frame yang akan dituju.
Sudah selesai?
Oke lanjut, berikutnya adalah membuat tombol back untuk kembali dari menu ke motion text/gambar tadi.
Ritualnya adalah (hehe...:D)
Buat rectangle kotak kecil ukuran 42x42 px, lalu convert ke button symbol.
Setelah selesai double click objeknya, lalu insert layer dan tempatkan di atas layer untuk objek rectangle tadi.
Selanjutnya pilih text tool dan ketikan huruf "X" pada layer baru tadi.
Lakukan edit frame untuk mouse over/out/drag/hit seperti langkah membuat block button.
Kemudian beri actionScrpit tombol back, berikut adalah script nya:
on (release) {
gotoAndPlay(1);
}
note:
angka satu adalah angka frame yang akan di arahkan ketika kawan-kawan meng Klik tombol back tadi.
Oke, langkah terakhir adalah buat layer untuk action keseluruhan.
Caranya, insert layer pada stage utama (scene di timeline), buat 3 titik keyframe pada layer tersebut.
Pertama di awal frame: di sini cukup kosaongkan saja
Kedua di akhir frame: di sini masukan/ketikan actionScript stop(); pada frame
Ketiga insert keyframe sebelum frame terakhir (samping kiri frame terakhir): beri action script
stop();
gotoAndStop(1);
note:
fungsi script di atas adalah untuk gerakan looping motion, karena kalo tidak di beri script tersebut akan mengakibatkan play movie untuk motion hanya terjadi 1 kali setelah itu akan langsung beralih ke frame menu. Untuk itu alasannya mengapa insert keyframe pada akhir frame di buat 2 kali.
Nah ini adalah contoh dari banner Flash tadi
Langsung aja, oke?
Langkah pertama buat sebuah gerakan text/gambar dengan motionTween atau actionScript.
contoh:
Usahakan ukuran document pada stage flash tidak terlalu besar misalnya 700x200 px itu sudah cukup. Ini dimaksudkan agar loading pengambilan data dari file yang sudah kita hosting sebelumnya menjadi ringan dan tidak memberatkan loading page.
Langkah kedua.
Insert keyframe pada frame terakhir dari seluruh gerakan motionTween di stage utama (exit edit mode).
Beri ID frame "click_menu" pada frame akhir tersebut. Lalu masukan sebuah tombol dari external library (sample button).
Disini saya menggunakan 4 tombol yang berbeda warnanya. Dan masing-masing tombol berbeda alamat link nya.
- Tombol merah (Get code) untuk link ke page http://anime7graphic.blogspot.com/hai-newbie.htm yang di dalamnya sudah saya simpan text area code banner nya.
- Tombol abu-abu (Get article via e-mail) untuk link ke penyedia feed, ping atau RSS sesuai account profile yang kawan-kawan daftarkan sebelumnya. Disini saya menggunakan alamat account Technorati saya.
- Tombol biru (view anime7 profile) untuk link ke page profile blogger user, do sini saya masukan alamat link untuk menuju lihat profile anime7 keseluruhan.
- Tombol hijau (visit anime7 blog) untuk link ke page keseluruhan/standar tampilan page blog kita, atau bisa juga kita langsung alihkan ke page yang kita tentukan. Misalnya di sini saya menggunakan link ke page Guest Book.
Cara untuk menentukan alamat link pada tombol sangat mudah, misalnya:
- Alamat yang akan di masukan adalah http://anime7graphic.blogspot.com
- Lalu alamat tersebut akan di letakan di tombol merah
Klik atau pilih objek tombol yang kawan-kawan kehendaki (misalnya tombol merah)
Setelah itu klik kanan di objek tombol tersebut dan pilih action pada right click menu.
Selanjutnya masukan actionScript yang ada di bawah ini:
on (release) {
getURL("http://anime7graphic.blogspot.com/2007/04/hai-newbie.html", "_blank", "GET");
}
note:
untuk text berwarna merah, itu adalah alamat link yang akan kita gunakan.
buat beberapa tombol dengan link yang berbeda.
ulangi langkah-langkah untuk membuat link pada tombol.
Setelah itu buat block button untuk navigasi view menu pada frame gerakan tadi.
Caranya:
Buat layer baru lalu masukan sebuah shape atau rectangle dengan ukuran sama seperti ukuran document flash nya.
Lalu tekan tombol F8 pada keyboard atau klik kanan objek rectangle tadi lalu pilih convert symbol>pilih type>button>ok
Selanjutnya double click pada block button tadi atau klik kanan pilih "edit in place" di right click menu.
Insert layer dan tepatkan pada urutan oertama dengan cara drag mouse>tarik ke atas.
Pilih text tool pada toolbar lalu ketik "click for menu".
Setelah itu buat frame kedua dari keseluruhan layer pada stage edit tombol dan pindahkan objek rectangle tadi dari frame 1 (label "out") ke frame 2 (label "over") dengan cara cut frame (right click (pada frame)>pilih cut frame>insert frame di label "Hit".
Klik scene pada timeline untuk mengembalikan ke stage awal, setelah itu pilih objek/block button tadi. Klik kanan>action>ketik/copy-paste actionScript di bawah ini:
on (release) {
gotoAndStop("menu_click");
}
note:
Huruf merah adalah ID frame pada frame terakhir setelah motion. ID frame ini bia kita ganti dengan angka frame yang akan dituju.
Sudah selesai?
Oke lanjut, berikutnya adalah membuat tombol back untuk kembali dari menu ke motion text/gambar tadi.
Ritualnya adalah (hehe...:D)
Buat rectangle kotak kecil ukuran 42x42 px, lalu convert ke button symbol.
Setelah selesai double click objeknya, lalu insert layer dan tempatkan di atas layer untuk objek rectangle tadi.
Selanjutnya pilih text tool dan ketikan huruf "X" pada layer baru tadi.
Lakukan edit frame untuk mouse over/out/drag/hit seperti langkah membuat block button.
Kemudian beri actionScrpit tombol back, berikut adalah script nya:
on (release) {
gotoAndPlay(1);
}
note:
angka satu adalah angka frame yang akan di arahkan ketika kawan-kawan meng Klik tombol back tadi.
Oke, langkah terakhir adalah buat layer untuk action keseluruhan.
Caranya, insert layer pada stage utama (scene di timeline), buat 3 titik keyframe pada layer tersebut.
Pertama di awal frame: di sini cukup kosaongkan saja
Kedua di akhir frame: di sini masukan/ketikan actionScript stop(); pada frame
Ketiga insert keyframe sebelum frame terakhir (samping kiri frame terakhir): beri action script
stop();
gotoAndStop(1);
note:
fungsi script di atas adalah untuk gerakan looping motion, karena kalo tidak di beri script tersebut akan mengakibatkan play movie untuk motion hanya terjadi 1 kali setelah itu akan langsung beralih ke frame menu. Untuk itu alasannya mengapa insert keyframe pada akhir frame di buat 2 kali.
Nah ini adalah contoh dari banner Flash tadi