| Tutorial Flash - HTML5 - Javascript - DKV

Latest Blog



23.10.2020

Virtual Lab Flash

Library untuk pengembangan laboratorium virtual dengan Flash/Animate

06.10.2020

Game Among Us

Membuat gerakan karakter seperti pada game Among Us

05.10.2020

Multimedia Interaktif Tata Surya

Membuat Multimedia Pembelajaran Interaktif tentang tata surya

04.10.2020

Animasi Rotasi Bumi 3D

Membuat animasi bumi berotasi dengan grafik 3 Dimensi

01.10.2020

Membuat Kuis Essay

Mengecek jawaban kuis essay pada aplikasi pembelajaran interaktif

12.09.2020

Membuat Game Ular Tangga

Membuat game ular tangga dengan Adobe Flash/Animate AS3

10.09.2020

Membuat Pengacak Dadu

Membuat acak dadu untuk game ular tangga/monopoly

13.07.2020

Membuat Game Onet

Membuat game mencari gambar yang sama (onet) dengan JS/HTML5

11.06.2020

Membuat Kuis CBT

Membuat kuis CBT, menyimpan nilai ke server dengan PHP dan XML

11.05.2020

Game RPG dengan HTML Canvas (Javascript)

Pengembangan game RPG dengan teknik tiling menggunakan HTML canvas


ALL BLOG

Latest Games


;
Free Games

Indonesia Soccer League

Play Indonesian Soccer League on Flash 3D Games

Menambahkan scrolling text ke dalam aplikasi Flash

Konsep dasar

Salah satu elemen utama dari sebuah aplikasi adalah teks. Akan tetapi sering kali kita mendapatkan space (ruangan) yang terbatas - sedangkan teks yang akan kita tampilkan cukup banyak. Sebagai solusi atas permasalahan tersebut adalah menggunakan metode scrolling text. Pada dasarnya terdapat 2 cara mudah untuk menambahkan teks scroll, yaitu dengan menggunakan component text area dan menggunakan dynamic text.


Scrolling text menggunakan component

Ikuti langkah-langkah berikut untuk membuat scrolling teks dengan menggunakan component :


  1. Pada file aplikasi Flash, klik frame tempat dimana anda akan menampilkan teks tersebut. Kemudian pilih menu Window > Component. Setelah panel Component muncul, drag komponen Text Area ke stage. Dengan menggunakan Transform Tool atur posisi dan ukurannya.

  2. interactive multi media by wandah_w
  3. Pada file aplikasi Flash, klik frame tempat dimana anda akan menampilkan teks tersebut. Kemudian pilih menu Window > Component. Setelah panel Component muncul, drag komponen Text Area ke stage. Dengan menggunakan Transform Tool atur posisi dan ukurannya.

  4. interactive multi media by wandah_w
  5. Selanjutnya, klik TestArea tersebut kemudian buka panel properties atau component inspector untuk Flash CS3 ke bawah. Pada Component Parameter Ketikan semua teks yang ingin anda tampilkan pada kolom Text kemudian tekan tombol Enter. Maka teks tersebut akan muncul pada TextArea yang ada di stage, dan apabila baris text nya melebihi ukuran area teks, secara otomatis tombol scroll akan muncul.

  6. interactive multi media by wandah_w
  7. Jalankan aplikasi, dan akan anda dapati text scroll sebagai berikut

Get Adobe Flash player


Scrolling text menggunakan dynamic text

Apabila anda menginginkan desain yang fleksibel sesuai dengan keinginan anda, anda juga dapat membuat sebuah scrolling teks dengan menggunakan dynamic text. Perhatikan langkah-langkah berikut :


  1. Anda dapat membuat aplikasi baru, atau melanjutkan contoh di atas.
  2. Klik Text Tool kemudian perhatikan panel properties. Pada panel properties, aturlah opsinya menjadi seperti gambar berikut

  3. interactive multi media by wandah_w
  4. Drag stage, dan buatlah sebuah area dynamic text sesuai dengan kebutuhan anda. Atur posisi, jenis huruf, ukuran huruf dan sebaginya
  5. Selanjutnya buatlah 2 buah tombol yaitu tombol untuk scroll atas dan tombol untuk scroll bawah. Lihat gambar.
  6. Setelah tahapan membuat objek selesai, tahapan selanjutnya adalah memberi nama masing-masing objek. Berikan nama info_txt pada dynamic text, t_atas pada tombol scroll atas dan t_bawah pada tombol scroll atas

  7. interactive multi media by wandah_w
  8. Tahapan terakhir adalah penulisan kode. Buatlah sebuah layer baru (layer kode). Klik frame 1 layer kode kemudian ketikan kode berikut :
import flash.events.MouseEvent;

info_txt.text = "Lorem ipsum dolor sit amet, dan seterusnya...... sampai panjang"

t_atas.addEventListener(MouseEvent.CLICK, scroll_atas);
t_bawah.addEventListener(MouseEvent.CLICK, scroll_bawah);

function scroll_atas(e:MouseEvent):void{
	info_txt.scrollV--;
}
function scroll_bawah(e:MouseEvent):void{
	info_txt.scrollV++;
}

Jalankan aplikasi dengan menekan tombol Ctrl+Enter, maka hasil dari tutorial ini adalah sebagai berikut:


Get Adobe Flash player

Anda bisa mengatur desain seoptimal mungkin, dan apabila anda menginginkan scrolling secara horisontal (mendatar), maka kode scrollV bisa anda ganti dengan scrollH.

File Sumber


download



Share ( Ayo Berbagi )

Leave me a comment

untuk pertanyaan lebih baik di email langsung ke wandah [at] wandah [dot] com agar cepat direspon