Gusdwi dot Info » Text Scroll http://gusdwi.info HTML - CSS - WEB DESIGN - SHARING ABOUT LIVES Tue, 07 Sep 2010 08:15:43 +0000 en hourly 1 http://wordpress.org/?v=3.0 Membuat text scroll box dengan Css http://gusdwi.info/membuat-text-scroll-box-dengan-css.html http://gusdwi.info/membuat-text-scroll-box-dengan-css.html#comments Fri, 12 Jun 2009 04:15:29 +0000 admin http://www.gusdwi.info/?p=451 Salah satu kelemahan halaman web yang dibatasi oleh box yang static adalah tidak cukup untuk menampilkan semua teks didalamnya.
Tetapi jangan putus asa dulu, saya punya solusinya…dengan Css anda bisa mengatasi masalah itu.

Nah, sekarang saya akan mencoba memberikan sedikit pengalaman saya kepada anda.
Pertama, buatlah text box diantara tag <body>…</body>pada halaman HTML seperti ini:

<div class=”kotak_teks”></div>

selanjutnya, ketikan isi atau artikel diantara tag <div>…</div> seperti contoh:

<div class=”kotak_teks”>
Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css
</div>

Kedua, buatlah style Css nya diantara tag <head>…</head> seperti contoh dibawah ini:

<style type=”text/css”>
div.kotak_teks {
width:520px;
height:100px;
overflow: auto;
text-align:left;
border: solid 1px #cccccc;
padding:5px;}
</style>

Untuk lebih jelasnya, lihatlah sintax HTML yang lengkap dibawah ini:

<html>
<head>
<title>Membuat texs scroll box dengan Css</title>
<style type=”text/css”>
div.kotak_teks {
width:520px;
height:100px;
overflow: auto;
text-align:left;
border: solid 1px #cccccc;
padding:5px;}
</style>
</head>

<body>
<div class=”kotak_teks”>
Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css.
</div>
</body>
</html>

Dan hasilnya akan menjadi seperti text box dibawah ini:

Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css.

Nah, semoga ada manfaatnya bagi yang belum mengetahui cara ini.

]]> http://gusdwi.info/membuat-text-scroll-box-dengan-css.html/feed 4 Scroll Text Codes pada Flash CS3 dengan External Text http://gusdwi.info/scrolling-text-pada-flash-cs3.html http://gusdwi.info/scrolling-text-pada-flash-cs3.html#comments Tue, 12 May 2009 01:54:20 +0000 admin http://www.gusdwi.info/?p=195 Text Scrolling View

Kelebihan dari external file text pada Flash adalah memberikan kemudahan dalam meng Edit content karena tidak perlu lagi mengedit file (.fla) jika ada perubahan dalam content, Cukup hanya mengedit file (.txt) nya saja, dan untungnya lagi orang yang mengedit tidak selalu harus bisa menggunakan program FLASH. Pada kesempatan ini Saya mencoba memberikan sedikit pengalaman ketika Saya mengerjakan proyek website berbasis Flash di www.Shankarigold.com, saat itu saya hampir putus asa karena sulitnya membuat text yang panjang dengan area yang terbatas menggunakan textscroll yang button nya bisa kita buat sendiri sesuai selera.

Baiklah, saya akan mulai memberikan Tipsnya untuk anda…

  1. Buatlah dokumen baru pada Flash dengan Dimensions width: 300px height: 300px, dan Frame rate 30Fps.
  2. Klick dua kali layer 1 lalu rename dengan nama “Bg”, kemudian klick ranctangel Tool pada tool Bar dan pada properties ketikan angka 10 untuk membuat rounded corner, kemudian pindahkan cursor ke area kerja, klick dan drag untuk membuat sebuah kotak, kira-kira berukuran 200px -250px.
  3. Ulangi langkah ke dua tadi dan pada properties ketikan angka 20 untuk membuat rounded corner, kemudian pindahkan cursor ke area kerja, klick dan drag untuk membuat sebuah kotak disamping kanan kotak sebelumnya, kira-kira berukuran 32px -250px.
    tsc_3
  4. Buat layer baru dengan nama “Textscroll” diatas layer “bg”, pilih Text Tool pada Tool Bar kemudian klick dan drag diatas area kerja untuk membuat Text Box, pada Properties pilih Dynamic Text, pada kolom instant name ketikan “scText_txt” dengan linetype “multiline”.
    tsc_5
  5. Masih dalam layer Text, kemudian kita akan buat TOMBOL sebagai scrolling text dengan cara click dan tahan rectangle tool kemudian pilih oval tool, lalu buatlah lingkaran pada area kerja anda dengan ukuran 26px. kemudian click dan tahan kembali rectangle tool kemudian pilih polystar tool dan pada propertiesnya click option dan ganti Number of side menjadi 3, lalu buatlah segitiga diatas lingkaran tadi.
    select lingkaran dan segitiga tersebut kemudian pada Top Bar cari Modify-Group atau tekan Ctrl+G pada Keyboard.
  6. Selanjutnya click lingkaran tersebut lalu tekan F8 (convert to symbol) pada keyboard, pada kolom Nama diberi judul “Tombol-atas”pada Type centang Button lalu klick Oke.
    tsc_6
  7. click tombol-atas lalu tekan F9, kemudian pada windows action ketikan script seperti ini:

    on (release) {
    scText_txt.scroll- -;
    }

  8. Selanjutnya untuk membuat TOMBOL BAWAH, tekan Ctrl+L untuk membuka jendela Library kemudian click kanan tombol-atas pada library lalu pilih Duplicate, pada jendela Duplicate Symbol ganti nama menjadi “tombol-bawah” lalu tekan oke.
    Nah, pada jendela Library klick dan drag tombol-bawah ke area kerja anda letakan dibawah tombol-atas lalu pada Top Bar cari Modify-Transform-Flip Vertical untuk merubah arah panah menjadi ke bawah, kemudian tekan kembali F9 dan pada jendela Action ketikan code seperti ini:

    on (release) {
    scText_txt.scroll++;
    }

    untuk lebih jelasnya, lihat gambar dibawah ini!
    tsc_5

  9. Buatlah satu layer lagi diatas layer Text dan beri nama “Action”, lalu tekan F9 dan pada jendela Action ketikan code seperti ini:

    var loadText:LoadVars = new LoadVars();
    loadText.load(“content.txt”);

    loadText.onLoad = function(success) {
    if(success) {
    this.createTextField(“scText_txt”, 1, 10, 10, 500, 300);
    scText_txt.html = true;
    scText_txt.wordWrap = true;
    scText_txt.multiline = true;
    scText_txt.htmlText = this.contentText;
    }
    }

Sekarang kita tinggal membuat satu File lagi untuk membuat File Text External dengan cara sebagai berikut:

  1. Buka program Text Editor seperti Notepad misalnya, selanjut ketikan code seperti ini:

    contentText=<html> <font color=’#000000′> <b>Teks di scroll dengan tombol kreasi sendiri </b>
    Teks di scroll dengan tombol kreasi sendiri ini dibuat untuk anda yang membutuhkannya.
    Teks di scroll dengan tombol kreasi sendiri ini dibuat untuk anda yang membutuhkannya.
    Teks di scroll dengan tombol kreasi sendiri ini dibuat untuk anda yang membutuhkannya.
    Teks di scroll dengan tombol kreasi sendiri ini dibuat untuk anda yang membutuhkannya.
    Teks di scroll dengan tombol kreasi sendiri ini dibuat untuk anda yang membutuhkannya.
    </font>
    <font size=”11px” color=”#ff0000″><p align=”right”><a href=”http://gusdwi.info”><b>Craeted by Gus Dwi</b></a></p></font>
    </html>

  2. Kemudian simpan dokumen tersebut dengan nama “content.txt“.
    Tolong diingat simpan kedua file tersebut dalam satu direktori

Untuk melihat hasilnya, kembali pada program FLASH lalu tekan Ctrl+Enter maka akan seperti ini:
tsc_final


DOWNLOAD FILE “text-scroll.zip“ di sini.

]]> http://gusdwi.info/scrolling-text-pada-flash-cs3.html/feed 5