daily flash indonesia: Simple Tooltip

« Tembok Bomber - Indonesian Street Art Community | Main | New project on the run »

February 18, 2005

Simple Tooltip

Terkadang kita ingin membuat tooltip untuk sebuah object yang ada di flash, dulu waktu masih baru belajar flash untuk buat tooltip pada 5 object di stage saya membuat satu movieclip dengan 5 frame yang isi masing-masing frame berbeda untuk setiap object. Yah.. itu memang bisa dilakukan dengan cepat tapi pertanyaannya bagaimana jika kita memiliki 100 object dengan tooltip yang berbeda? pasti lelah juga membuatnya. Pada tutorial ini saya akan menjelaskan bagaimana membuat tooltip yang dapat mempermudah kita jika mengalami situasi dimana ada banyak tooltip yang berbeda. Kita akan menggunakan keunggulan dari flash versi mx.

Pertama kita menuliskan actionscript di frame pertama untuk membuat movieclip tooltip secara dynamic dengan nama instance tip_mc.

this.createEmptyMovieClip("tip_mc", this.getNextHighestDepth());

Lalu menuliskan actionscript untuk membuat textfield didalam movieclip tooltip juga secara dynamic dengan nama instance tTip_txt.

tip_mc.createTextField("tTip_txt", this.getNextHighestDepth, 0, -18, 100, 22);

Kemudian kita akan menyembunyikan movieclip tersebut dengan memasukan nilai false untuk property movie _visible.

tip_mc._visible = false;

Lalu kita sesuaikan sytle & properties dari textfied-nya dan karena tooltip akan tampil dengan font yang tidak ada di default system font dari OS maka kita harus memasukan property embedFonts dengan nilai true.

tip_mc.tTip_txt.autoSize = true;
tip_mc.tTip_txt.embedFonts = true;
tip_mc.tTip_txt.background = true;
tip_mc.tTip_txt.backgroundColor = "0x000000";
tip_mc.tTip_txt.border = true;
tip_mc.tTip_txt.borderColor = "0xCCCCCC";
tip_mc.tTip_txt.textColor = "0xFFFFFF";

Kemudian kita membuat format text untuk textfield tooltipnya dimana jenis font standard 07_56 terlebih dahulu saya buat symbol font yang diinginkan. Dengan langkah berikut:

Klik button dikanan atas library panel
Lalu pilih jenis font yang dinginkan dan beri nama symbol, biasakan untuk membuat nama symbol font sesuai dengan nama jenis fontnya.
Nah sekarang anda telah memiliki symbol font dengan nama standard 07_56 di library
Kemudian anda pilih symbol font tersebut lalu klik kanan untuk memasukan linkage id-nya.
Lalu setelah window linkage properties muncul pilih checkbox Export for ActionScript

Lalu membuat actionscript untuk textformat seperti ukuran dan jenis font sesuai dengan nama linkage id yang tadi kita buat.

var toolTip_fmt = new TextFormat();
toolTip_fmt.size = 8;
toolTip_fmt.font = "standard 07_56";

Langkah selanjutnya adalah membuat sebuah fungsi yang dapat dieksekusi pada saat event rollOver dan rollOut untuk setiap object movieclip di stage dengan menggunakan syntaxt MovieClip.prototype

MovieClip.prototype.setToolTip = function(_txt) {
 
 	//action pada saat roll over di movieclip
 	this.onRollOver = function() {
  		tip_mc.tTip_txt.text = _txt; //memasukan nilai variabel _txt ke textfield tTip_txt yang ada di movieclip tip_mc
  		tip_mc.tTip_txt.setTextFormat(toolTip_fmt); //menset textformat toolTip_fmt ke  textfield tTip_txt yang ada di movieclip tip_mc
  		tip_mc._visible = true; //akan memunculkan movieclip tip_mc
  		tip_mc.startDrag(true); //akan mendrag movieclip tip_mc
  	};
 
 	//action pada saat roll out di movieclip
 	this.onRollOut = function() {
  		tip_mc._visible = false; //akan menyembunyikan movieclip tip_mc
  		tip_mc.stopDrag();// akan berhenti men-drag movieclip tip_mc
  	};
 
 	this.useHandCursor = false; //menghilangkan hand cursor pada saat mouse berada diatas object movieclip (onRollOut event).
};

Fungsi tooltip sudah selesai dibuat maka kita dapat menggunakannya pada instance movieclip yang ada di stage dengan cara berikut:

circle_mc.setToolTip("Ini simple tool tip");
box_mc.setToolTip("ini simple juga kok");

circle_mc dan box_mc adalah instance id dari dua movieclip yang ada distage.

Code listing:

// Membuat movieclip kosong dengan instance id tip_mc lalu kemudian membuat static textfield didalamnya dengan instance id tTip_txt
this.createEmptyMovieClip("tip_mc", this.getNextHighestDepth());
tip_mc.createTextField("tTip_txt", this.getNextHighestDepth, 0, -18, 100, 22);

// Tooptipnya kita sembunyikan dengan menset nilai property _visible = false
tip_mc._visible = false;

// textfield properties & style ini dapat disesuaikan seperti warna text, border dan background
tip_mc.tTip_txt.autoSize = true;
tip_mc.tTip_txt.embedFonts = true;
tip_mc.tTip_txt.background = true;
tip_mc.tTip_txt.backgroundColor = "0x000000";
tip_mc.tTip_txt.border = true;
tip_mc.tTip_txt.borderColor = "0xCCCCCC";
tip_mc.tTip_txt.textColor = "0xFFFFFF";

// text formatting dapat disesuaikan ukuran fontnya dan jenis fontnya berdasarkan linkage id dari font yg ada dilibrary
var toolTip_fmt = new TextFormat();
toolTip_fmt.size = 8;
toolTip_fmt.font = "standard 07_56"; //font linkage id dilibrary

// Membuat fungsi setToolTip yang dapat aktifkan ke semua object movieclip di stage
// variable _txt berisi text yang akan muncul di tooltip
MovieClip.prototype.setToolTip = function(_txt) {
 
 	//action pada saat roll over di movieclip
 	this.onRollOver = function() {
  		tip_mc.tTip_txt.text = _txt; //memasukan nilai variabel _txt ke textfield tTip_txt yang ada di movieclip tip_mc
  		tip_mc.tTip_txt.setTextFormat(toolTip_fmt); //menset textformat toolTip_fmt ke  textfield tTip_txt yang ada di movieclip tip_mc
  		tip_mc._visible = true; //akan memunculkan movieclip tip_mc
  		tip_mc.startDrag(true); //akan mendrag movieclip tip_mc
  	};
 
 	//action pada saat roll out di movieclip
 	this.onRollOut = function() {
  		tip_mc._visible = false; //akan menyembunyikan movieclip tip_mc
  		tip_mc.stopDrag();// akan berhenti men-drag movieclip tip_mc
  	};
 
 	this.useHandCursor = false; //menghilangkan hand cursor pada saat mouse berada diatas object movieclip (onRollOut event).
};

// contoh penggunaan fungsi tooltip
circle_mc.setToolTip("This is simple tooltip");
box_mc.setToolTip("this a box object");