MEMBUAT SCROLLING TEXT

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.

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.

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.

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.

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:

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:

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