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

Posted in Flash - Menengah

45 Responses to “Membuat scrolling text”

  1. Ady Says:
    April 1st, 2009 at 14:37

    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:
    April 1st, 2009 at 15:33

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

  3. coupie Says:
    April 7th, 2009 at 15:45

    matur nuwun,hidangannya memang enak abis

  4. admin Says:
    April 7th, 2009 at 15:58

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

  5. mac Says:
    April 9th, 2009 at 22:23

    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:
    April 10th, 2009 at 07:43

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

  7. mac Says:
    April 10th, 2009 at 08:54

    :) 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:
    April 10th, 2009 at 13:07

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

  9. thEw3 Says:
    April 17th, 2009 at 12:21

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

  10. admin Says:
    April 17th, 2009 at 18:46

    Amin :hope: Amin :hope:

  11. Nurisha Says:
    April 23rd, 2009 at 13:49

    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:
    April 23rd, 2009 at 13:59

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

  13. Anhar Tasman Says:
    April 26th, 2009 at 11:16

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

  14. mumul Says:
    May 11th, 2009 at 10:24

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

  15. maghfuri Says:
    May 13th, 2009 at 09:58

    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:
    June 13th, 2009 at 11:13

    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:
    June 13th, 2009 at 11:52

    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:
    June 29th, 2009 at 05:21

    wah………pucing!!!

  19. TanyaDoank Says:
    July 29th, 2009 at 09:53

    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:
    August 4th, 2009 at 22:03

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

  21. eqo Says:
    September 8th, 2009 at 08:14

    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:
    September 9th, 2009 at 11:36

    Maaf kami sensor kata-katanya.

  23. leack Says:
    September 23rd, 2009 at 16:21

    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:
    September 23rd, 2009 at 17:05

    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:
    September 24th, 2009 at 18:09

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

  26. agaM Says:
    November 10th, 2009 at 11:15

    terima kasih banyak,,,
    :|

  27. admin Says:
    November 11th, 2009 at 06:11

    Sama-sama :)

  28. setya Says:
    November 12th, 2009 at 13:04

    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:
    November 13th, 2009 at 07:35

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

  30. rofik Says:
    December 11th, 2009 at 14:25

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

    “TERIMAKASIH”
    :respect:

  31. admin Says:
    December 13th, 2009 at 05:52

    Samaaaaaaaaaa-Samaaaaaaaaaa :D

  32. uweng Says:
    March 1st, 2010 at 11:19

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

  33. admin Says:
    March 2nd, 2010 at 10:14

    Kalau dari tutorial di atas nggak bisa.

  34. uweng Says:
    March 3rd, 2010 at 08:30

    kasih cara biar bisa masukin image dung bos….

  35. admin Says:
    March 3rd, 2010 at 09:17

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

  36. uwenk Says:
    March 4th, 2010 at 13:35

    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:
    March 5th, 2010 at 15:42

    terimakasih banyak, telsah banyak membantu saya :D

  38. admin Says:
    March 6th, 2010 at 06:27

    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:
    May 17th, 2010 at 00:31

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

  40. kariadi Says:
    June 28th, 2010 at 12:46

    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:
    January 31st, 2011 at 18:22

    bingung :I:

  42. memey Says:
    February 15th, 2011 at 15:53

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

  43. bolang Says:
    June 2nd, 2011 at 14:19

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

  44. nandez Says:
    June 3rd, 2011 at 01:42

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

  45. dee Says:
    January 6th, 2012 at 14:02

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

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.