Tutorial Flash : Membuat Drop down Buttons

oke tanpa harus berpanjang lebar berbasa basi karena saya sedang ada di warnet dan setiap detiknya adalah "money" mari kita langsung pada bahasan tutorial kali ini yaitu tentang membuat sebuah menu dropdown dengan flash.. tau kan dropdown?? itu lho yang ketika si tombol di sorot maka tombol akan memanjang ke bawah menampilkan "sub" tombol lain yang berkaitan dengan tombol yang kita sorot.. oke seperti kata saya tadi di atas karena setiap detik adalah money mari kita langsung ke tutorial... and here the tutorials..

1. buat lah sebuah dokumen baru ukuran terserah kalian, dan ubah frame per sekonnya menjadi 30 fps.2. buatlah objek untuk menu dropdown nanti dengan menggunakan rectangle tools dan text tool. Yang nantinya akan menjadi seperti gambar di bawah ini.

3. Ubah objek yang telah dibuat di atas menjadi tombol (button). caranya biasa blok objek kemudian klik kanan convert to symbol kemudian pilih opsi button. Jangan lupa ubah semua objek diatas menjadi button dengan cara klik kanan convert to symbol satu persatu (jangan sekaligus).

4. Untuk tombol beranda, artikel, dan gallery kasih instance name. tbl_beranda untuk tombol beranda, tbl_artikel untuk tombol artikel. Dan tbl_galery untuk tombol galery. (untuk tombol optional tidak usah di kasih instance name)

5. Setelah semua objek di ubah menjadi tombol dan tiga tombol utama dikasih instance name, selanjutnya yang akan kita lakukan adalah memisahkan tombol utama dengan dropdown menu. Dropdown menu yang di maksudkan disini adalah semua tombol dengan tulisan optional (tulisan optional bias anda ubah sesua kebutuhan anda nanti)6. Buatlah 3 buah layer, layer yang pertama untuk tiga tombol utama (tbl_beranda, tbl_artikel, dan tbl_galery) sedangkan layer kedua untuk semua tombol optional dan layer ketiga adalah untuk menyimpan script. Cut semua tombol optional kemudian paste-kan di layer dropdown.

7. Oke.. langkah selanjutnya adalah membuat tombol optional menjadi 3 movie clip, pembagian movie clipnya adalah sebagai berikut :

8. Seperti yang digambarkan diatas blok masing masing tombol yang telah di kelompokan dan ubah menjadi movie clip dengan cara klik kanan convert to symbol, lakukan hal yang sama untuk tombol optional artikel (yang diberi kotak warna biru) dan tombol optional gallery (yang diberi kotak warna hijau).

9. Setelah semuanya dibuat movie clip jangan lupa kasih instance name untuk masing masing movie clip, untuk movieclip beranda kasih instance name beranda, untuk movie clip artikel kasih instance name artikel dan untuk movie clip gallery kasih nama gallery

10. Selanjutnya double clik movie clip tersebut untuk membuat objek masking,11. Buatlah sebuah objek masking berupa kotak yang akan menutupi tombol optional yang ada.12. Buat movie clip dengan objek menutupi tombol pada frame ke 20 . pada frame ke 1 dan frame ke 40 objek tidak menutupi tombol. Ubah objek agar menjadi masking untuk tombol optional dengan cara klik kanan layer kemudian pilih mask. Lihat gambar di bawah untuk lebih jelas

13. Lakukan hal yang sama untuk movie clip artikel dan galery. Catatan : objek harus menutupi semua tombol optional.14. Setelah semua di lakukan selanjutnya adalah langkah terakhir pembuatan dropdown menu ini yaitu pemberian script.15. Klik frame pertama pada layer script yang telah kita buat tadi.. kemudian klik F9 (untuk masuk ke editor action script) kemudian masukan script sebagai berikut :

dropDown = false;tbl_beranda.onRollOver = function() {if (dropDown == false) {beranda.gotoAndPlay(2);dropDown = true;}};dropDown2 = false;tbl_artikel.onRollOver = function() {if (dropDown2 == false) {artikel.gotoAndPlay(2);dropDown2 = true;}};dropDown3 = false;tbl_galery.onRollOver = function() {if (dropDown3 == false) {galery.gotoAndPlay(2);dropDown3 = true;}};

this.onMouseDown = function () {

if (dropDown == true) {

beranda.gotoAndPlay(21);dropDown = false;}if (dropDown2 == true){artikel.gotoAndPlay(21);dropDown2 = false;}if (dropDown3 == true){galery.gotoAndPlay(21);dropDown3 = false;}}

16. Dan selesai!!!! Hasilnya bisa anda lihat pada preview di bawah ini

Tutorial Flash : Membuat Scroll Bar

Oke.. posting lagi niy.. setelah pulang kampung untuk beberapa hari..ahh..pikiran fresh dan banyak ide yang bakalan keluar nih..mumpung masih fresh buat tutorial lagi ah..hmm apa ya??oke ..tutorial flash kali ini adalah tentang cara membuat scroll bar.. tau scroll bar kan?? itu lho yang dipinggir.. yang kalo tulisannya panjang bisa di geser ke bawah..yang di drag itu lho..yang panjang-panjang ada panahnya..ahh.. susah banget sih ngejelasinnya.. yang pasti fungsi scroll bar ini buat ngegulung (scrolling) halaman jika tulisan atau tampilan terlalu panjang ke bawah.. nah kita akan membuatnya di Flash..and here the tutorials..

1. Oke.. pertama kita buat area untuk tempat penyimpanan textnya.. oke buat dengan text tool >> ubah tipenya menjadi Dynamic Text >> dan beri instance name "text_scroll" (tanpa tanda petik ok..)lalu isi text tool tersebut dengan tulisan yang anda kehendaki,, tulisan harus penuh dan lebih dari area text tersebut..makin panjang tulisannya makin bagus..(buat apa pake slider kalo tulisannya pendek??)

2. langkah selanjutnya adalah membuat slider tepat di sebelah text_scroll tadi.. buat 4 objek yaitu objek untuk panah atas dan panah bawah.. objek untuk wadah slider dan objek slider.. lebih jelasnya lihat gambar di bawah..

3. oke.. masing masing objek di atas (panah atas,panah bawah,slider dan wadah slider) convert menjadi movie clip dan masing masing diberi instance name...pemberian instance name sebagai berikut :panah atas = panah_ataspanah bawah = panah_bawahslider = scrollerwadah slider = scroll_bg

4. Udah?? oke sipp.. sekarang tinggal memasukan scriptnya.. buat layer baru..kasih nama script biar ga keganti dan masukan di frame tersebut script sebagai berikut :

TextField.prototype.maxviewable = function() {if (this.maxscroll>1) {return (this.bottomScroll);}};scroller._yscale = text_scroll.maxviewable()/text_scroll.maxscroll*100;amountPerScroll = (scroll_bg._height-scroller._height)/text_scroll.maxscroll;scroller.onPress = function() {startDrag(this, false, scroll_bg._x, scroll_bg._y, scroll_bg._x, scroll_bg._y+scroll_bg._height-this._height);this.onEnterFrame = function() {amountFromTop = this._y-scroll_bg._y;text_scroll.scroll = Math.floor(amountFromTop/amountPerScroll)+1;};

};scroller.onRelease = scroller.onReleaseOutside=function () {this.onEnterFrame = null;stopDrag();};panah_bawah.onPress = function() {this.onEnterFrame = function() {if (text_scroll.scrolltext_scroll.scroll++;scroller._y = scroller._y+amountPerScroll;} else {scroller._y = scroll_bg._y+(scroll_bg._height-scroller._height);}};};panah_bawah.onRelease = panah_bawah.onReleaseOutside=function () {this.onEnterFrame = null;};panah_atas.onPress = function() {this.onEnterFrame = function() {if (text_scroll.scroll>1) {text_scroll.scroll--;scroller._y = scroller._y-amountPerScroll;} else {scroller._y = scroll_bg._y;}};};panah_atas.onRelease = panah_atas.onReleaseOutside=function () {this.onEnterFrame = null;};