31
Mar

Membuat scrolling text

Written by admin


Selain menggunakan uiscrollbar, kita juga dapat membuat scrolling text sendiri. Membuat scrolling text sendiri memang lebih sulit dibandingkan dengan menggunakan uiscrollbar. Namun scrolling text yang akan kita buat dibawah ini dapat dimodifikasi/diubah bentuknya.

1. Buatlah sebuah segitiga. Seleksi segitiganya dan tekan F8. Pada kotak dialog yang muncul masukkan panah sebagai Name dan Movie clip sebagai Type lalu tekan OK.

up

Gambar segitiga

2. Seleksi movie clip panah dan tekan Ctrl+F3. Masukkan panah_atas sebagai Instance name pada panel properties.

3. Pastikan anda masih menyeleksi movie clip panah tadi dan tekan Ctrl+D sekali maka akan muncul movie clip panah lagi. Putar arah segitiga 180 derajat. Ubah Instance name sgitiga yang diputarĀ  menjadi panah_bawah.

down

Movie clip panah yang dibalik

4. Buatlah sebuah persegi panjang. Seleksi persegi panjang dan tekan F8. Pada kotak dialog yang muncul masukkan persegipanjang sebagai Name dan Movie clip sebagai Type serta ubah Regitrationnya menjadi di pojok kiri atas lalu tekan OK.

cts1

Tampilan pada Convert to Symbol movie clip persegipanjang

5. Seleksi movie clip persegipanjang dan tekan Ctrl+F3. Masukkan scroll_bg sebagai Instance name pada panel properties.

6. Pastikan anda masih menyeleksi movie clip persegipanjang tadi dan tekan Ctrl+D sekali maka akan muncul movie clip panah lagi. Seleksi movie clip hasil duplikasi dan tekan Ctrl+F3. Berikan scroller sebagai instance name dan ubah Color menjadi Tint R:255 G:0 B:0 100% pada panel properties.

scrollprop

Tampilan pada panel properties movie clip scroller

7. Buatlah sebuah dynamic text dengan menggunakan text tool. Seleksi dynamic textnya dan tekan Ctrl+F3. Pada panel properties yang muncul lakukan hal berikut :

Masukkan text_scroll di kotak instance name

Ubah Line type menjadi multiline

Aktifkan tombol Render as HTML dan Show borderaround text (optional:memunculkan garis di dynamic text)

8. Sehingga di panel properties dynamic text akan tampil seperti di bawah ini:

dynprop

Tampilan pada panel properties dynamic text

9. Buka panel component dengan menekan Ctrl+F7. Tekan tanda + di samping User Interface untuk menampilkan component di dalamnya. Drag uiscrollbar ke dalam dynamic text sebelah kanan. Jika sudah, hapus uiscrollbar di stage.

10. Masukkan tulisan ke dalam dynamic text.

11. Letakkan objek-objek tadi seperti dibawah ini:

letakscroll

Movie clip scroll_bg berada di bawah movie clip scroller

12. Klik frame 1 dan tekan F9. Pada kotak actions yang muncul masukkan script berikut :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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.scroll1) {
			text_scroll.scroll--;
			scroller._y = scroller._y-amountPerScroll;
		} else {
			scroller._y = scroll_bg._y;
		}
	};
};
panah_atas.onRelease = panah_atas.onReleaseOutside=function () {
	this.onEnterFrame = null;
};

13. Tekan Ctrl+Enter untuk melihat hasilnya.

Scroll text dengan scrolling yang tersedia

Sourcenya dapat di download di sini





Apakah tutorial di atas menarik atau bermanfaat bagi anda? Bantulah Warung Flash agar tetap ada dan memberikan tutorial-tutorial yang lebih bagus dan bermanfaat lagi. Silahkan klik link berikut ini untuk lebih jelasnya : Bantu Warung Flash



Bookmark and Share

52 Responses to “Membuat scrolling text”

  1. Ady Says:

    Terima kasih banyak ya mas…. :)
    Tutorial ini memang sangat saya butuhkan…
    Saya pasti akan sering mampir ke warung mas, cz hidangannya enak-enak sih.. Hhehehe… :D

    Smoga warungnya laris n makmur ya mas, Amin… :respect:

  2. admin Says:

    Sama-sama :D
    :hope: :hope: :hope:

  3. coupie Says:

    matur nuwun,hidangannya memang enak abis

  4. admin Says:

    Sami-sami :peace: . Silahkan berkunjung lagi ;)

  5. mac Says:

    kang bagus webnya :respect: aku lagi belajar ni buat animasi boleh minta tutorial cara buat animasi pake flash 8 terima kasih sebelumnya :peace: kirim email ajah, temanya bebas aja :hope: :peace:

  6. admin Says:

    Makacih-makacih :D
    Walaupun temanya bebas, tapi animasinya mau yang seperti apa :-/

  7. mac Says:

    :) seperti disain di corel atau photoshop, macromedia flash dan pengunaan action script pada animasi, yang sederhana aja :D trima kasih jadi ngerepotin ya :hope: dengan langkah2nya maklum belajar ;;) thank banget :peace:

  8. admin Says:

    Kalau animasi-animasi dasar flash sebagian besar sudah ada. Silahkan anda cari di sini http://warungflash.com/category/flash-animasi/

  9. thEw3 Says:

    :yeye: nUhun BnYk ya’ KanG…bERkat tUtoRial na, qu jADi gaK puYeng lagI…MudaH2 an muRah REzekI na,muraH jOdohnya… :D

  10. admin Says:

    Amin :hope: Amin :hope:

  11. Nurisha Says:

    kok text di dalam scroll barnya ga bisa di blok semuanya
    Maaf kalo salah salah soalnya aku masih belajar dan gaptek :respect:

  12. admin Says:

    Pertanyaan yang bagus. Sebenarnya bisa, namun jika dibuat selectable/dapat di blok, scrolling textnya menjadi kurang sempurna

  13. Anhar Tasman Says:

    Rumayan nih buat bikin template flash, mas gimananih soal mendaftar di mochiadsnya kok belum diterusin sih?

  14. mumul Says:

    :respect:
    thxs tutorialnya jelas dan mantap
    sekali praktek langsung jalan
    moga ada trik2x yang lainnya di bahas kaya seperti ini

  15. maghfuri Says:

    saya sangat berterima kasih warung flash, saya sudah lama ingin mencari tutorial flash yang seperti ini, semoga menjadi amal baik, amin, oh ya…saya belum menemukan cara membuat menu bar pada flash soalnya sy mo buat bahan ajar sederhana

  16. icha Says:

    aku ga ngerti mas jadi ga bisa gerak scrollnya tpi aku akn usahain spy bisa thanks ya mas :D :-h :,: :oops: :idea: ~x(

  17. admin Says:

    Scrollnya gak bisa gerak ini hasil bikinan sendiri sesuai tutorial di atas :I: atau hasil dari source (fla) yang kami berikan :-/

  18. boy gilang Says:

    wah………pucing!!!

  19. TanyaDoank Says:

    Bang admin, tanya donk
    klo seandainya yang kita scroll itu perpaduan berbagai macam text dan image gmn tu ?? itu kan contoh cmn text, nah gimana klo sejenis form yng ada image + text yg d scroll.
    dijawab secepatnya ~x( ~x( ~x(

  20. leack Says:

    mantap….
    akhirnya dapet juga tutorr bahasa indonesia…
    tambah terus tutornya ommm..
    thanksss…………..

  21. eqo Says:

    mas warungnya tambah ramai ya? ah saya tak k*** pada beberapa ik*** yang ada. Bagi pengunjung setia warung, jika tidak keberatan k*** saja ik***nya, supaya warung flash semakin besar

  22. admin Says:

    Maaf kami sensor kata-katanya.

  23. leack Says:

    mantap deh tutorialnya, bos admin mau nanya nih, dimana caranya buat posisi mvie clip posisi top dengan down… misalnya saya buat movie clip 3 kan posisinya numpuk tu trus, ke 3 movie clipnya saya beri action jika salah satunya diklik dia posisinya paling atas… gimana tu scriptna bos??? mohon bimbingannya…. minta id M nya dog… hehhe kalau boleh

  24. admin Says:

    Kalau numpuknya di posisi yang sama kami belum tahu. Tapi kalau posisiny ada yang sedikit ke atas, ada yang sedikit ke bawah, ada yang sedikit ke kiri (intinya ada bagian objek yang tidak tertutupi oleh objek lain) itu bisa dilakukan. Coba gunakan swapDetph.
    http://warungflash.com/2009/05/swapdepth/
    http://warungflash.com/2009/04/drag-drop-puzzle-2/

  25. leack Says:

    yupppp itu yang saya maksud boss….., thanks banget ni ilmunya….
    moga maju terus warungflash….. :respect:
    :hope: ane dapat guru flash….. thanksssss ;))

  26. agaM Says:

    terima kasih banyak,,,
    :|

  27. admin Says:

    Sama-sama :)

  28. setya Says:

    wahh thanku banget bang admin atas tutorial ini.. :-) sangat membantu sekali..
    Oh ya bang mo nanyak nich.. Tutorial di atas kan untuk mensecroll text az ya..?? kalau di sisipi image gimana bang?? bisa apa gak y bang..
    Or kalau gak gitu.. mensecroll image gimana ya bang.. tapi ada srollbarnya seperti contoh tutorial diatas..??
    Mohon bantuanya bang admin.. Terima kasih

  29. admin Says:

    Untuk image coba pake scrollPane yang terdapat pada panel components (Ctrl+F7) bagian user interface.

  30. rofik Says:

    Terimakasiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiihhhhhhhhhhhhhhhhhhhhhhhh…..
    bgt…. bgt…… bgt………….
    tutor ini yg sedang saya cari”…..

    “TERIMAKASIH”
    :respect:

  31. admin Says:

    Samaaaaaaaaaa-Samaaaaaaaaaa :D

  32. uweng Says:

    textnya di ganti image bisa ga?? maksud saya biar bisa seperti album foto…tnx

  33. admin Says:

    Kalau dari tutorial di atas nggak bisa.

  34. uweng Says:

    kasih cara biar bisa masukin image dung bos….

  35. admin Says:

    Maaf kami kurang tahu caranya :respect:
    Kami sudah coba dengan 2 cara yang berbeda tetapi hasilnya kurang bagus.

  36. uwenk Says:

    dari yang saya pertanyakan, scrollpane spt yang di “www.davidmandelberg.com” simple ga seperti kebanyakan.

    sukur2x mas admin bisa bantu saya, tidak sehalus yg di “www.davidmandelberg.com” biasa saja, adal scrollnya bisa dimodif.

    trimakasih mas admin, kapan bisa membalas segala kebaikan sampean yaaa??? semoga allah selalu melimpahkan rahmatnya kepada anda sekeluarga…amin

  37. uweng Says:

    terimakasih banyak, telsah banyak membantu saya :D

  38. admin Says:

    Kalau seperti yang anda maksudkan, maaf :respect: kami belum bisa buat. Bagaimana kalau memakai components saja. Tutorialnya dapat di lihat di sini http://warungflash.com/2010/03/scroll-pane/

  39. Arie Says:

    ini datanya diubah jd dynamic text,,kalo textnya dari xml loadnya jd gmana ya mas??

  40. kariadi Says:

    saya sudah coba step by step, namun pada step no. 9, macromedia saya tidak tersedia komponen iuscrollbar. bagaimana cara megatasinya ?……saya menggunakan macromedia flash 2004 versi 7

  41. bonek Says:

    bingung :I:

  42. memey Says:

    itu warna background dinamic text nya bisa diganti selain putih ga ?
    thanks before . . :)

  43. bolang Says:

    itu bisa kepake kesumua muvi klip atau cuma bisa ke dinamic text?
    maaf saya newbie

  44. nandez Says:

    mas admin,,,,
    kalo mw bikin scrolling text tapi pake nya static text gimana????
    mohon bantuannya mas admin :hope:
    :D :D

  45. dee Says:

    klo mau buat dari kiri ke kanan, apa yg dirubah?

  46. dellosaurus Says:

    berhasil bangggg xD makasih yak!! buat tugas akhir sekolah nih nyihihihh :D

  47. kusuma Says:

    bang kalo ditambah button gmn ya?

    misalnya waktu ditekan button help trs muncul kotak yg isinya keterangan yg bisa di scroll ke atas bawah seperti tutorial diatas.

  48. erin Says:

    makasih ya kak..
    tutorialnya membantu sekali..
    aku emang membutuhkan ini buat nyelesaikan TA ku
    matur suon sanget ;)

  49. syahid Says:

    mas admin, makasih tutornya di atas, sangat membantu
    tapi sy ada pertanyaan dikit nih, kenapa y kalo sy import hasil publish swf ke document flash sya, g bisa muncul textnnya, cuma butonnya sj?

    tolong dibantu y’, maklum msh belajar… :)

  50. Reno Yuansyah Says:

    Makasi gan :D

  51. Valdi Harris Says:

    makasih min infonya, ini yg ane cari dari dulu :respect:

  52. aditya agus prakoso Says:

    kang , ko panah bawah nya ga bisa di gerakan agar teks nya terlihat , malah scroller nya doang yang bisa ?
    hatur nuhun

Leave a Reply

B-) =DV <:-P ;)) ;) :yeye: :respect: :peace: :p :idea: :hope: :I: :D :-SS :-? :-/ :)) :) :(( 8-> more »

Komentar yang berisi pertanyaan atau request tutorial kemungkinan besar tidak bisa kami jawab dan penuhi. Hal ini dikarenakan kesibukan kami yang padat . Oleh karena itu kami mohon maaf dan pengertiannya.