Labels o Tooltips sobre MovieClips

[junihh]

Si quisieramos crear "tooltips" o labels, parecidos a los labels amarillos que se muestran cuando ponemos el mouse sobre cualquiera de las herramientas de Flash, podriamos utilizar el metodo mas simple, que es poner ese "tooltip" en el estado Over de un boton.

Eso funciona... pero imaginate tener muchos botones... eso significa un tremendo trabajo innecesario, ya que tendriamos que hacer un boton por cada caso.

Que tal si hacemos que esos "tooltips" sean dinamicos y por tanto los titulos mostrados en ellos sean asi. Iniciemos el proceso:

1) En el stage creamos un movieclip y le ponemos un nombre de instancia, yo le llame "label_mc " y en el que insertamos una variable que sera la contenedora final del nombre del objeto seleccionado. A esta le llame "paisMostrar".

2) Creamos luego todos los movieclips que seran afectados cuando se pase el mouse sobre ellos y les ponemos a cada uno nombres de instancia. En mi ejemplo, les puse el nombre del pais en cuestion, que fueron "alaska", "canada", "unitedsates".

3) Utilizamos un frame del root en el que escribiremos todas las funciones que manejaran nuestra pelicula. Alli declaramos una variable que servira de contenedor del nombre de instancia del objeto que mostrara ese tooltip o label. Para mi ejemplo lo denomine "var pais;", ya que es un mapa que al pasar el mouse sobre cualquiera de los paises, muestra el nombre de este y via la funcion explicada en el siguiente punto, se inserta el nombre en esa variable.

4) Luego insertamos el siguiente script en el mismo frame del root:

Código:

function mostrarLabelPais() {
	// Declaramos los nombres de los paises
	// o instancias para el label
	var Nombres = new Array();
	Nombres["unitedstates"] = "United States";
	Nombres["alaska"] = "Alaska";
	Nombres["canada"] = "Canada";
	// Insertamos el nombre del pais en la variable
	// del label
	label_mc.paisMostrar = Nombres[pais];
	//
	// Capturamos el largo del nombre para que el label 
	// se adapte a ese largo dinamicamente
	label_mc._width = 7*label_mc.paisMostrar.length;
	//
	// Funcion para mostrar el label al ponerlo sobre un pais
	label_mc.onMouseMove = function() {
		// Posicion X - Cambia a la izquierda segun lo
		// cerca que este del borde derecho
		if (_root._xmouse+label_mc._width>=Stage.width) {
			label_mc._x = _xmouse-(label_mc._width+7);
		} else {
			label_mc._x = _xmouse+15;
		}
		// Posicion Y - Posicion fija
		label_mc._y = _ymouse;
	};
}

Ese es el script principal que manejara todos los tooltips.

5) Luego preparamos las funciones que manejaran los eventos del objeto, como son rollOver, rollOut y press. En mi ejemplo solo cree las funciones para rollOver y rollOut, que luego se aplicaran directamentamente a los botones. Esto fue lo que hice:

Código:

function sobrePais() {
	// Hacemos el label visible
	label_mc._visible = true;
	// Llamamos la funcion de mostrar el label
	mostrarLabelPais();
	// Esto lo adicione para dar un efecto de FadeIn
	this[pais].gotoAndPlay(2);
}
function salirPais() {
	// Hacemos el label invisible
	label_mc._visible = false;
	// Borramos el contenido de la variable 
	// que esta dentro del label, donde se inserta
	// el nombre del pais
	label_mc.paisMostrar = "";
	// Esto lo adicione para dar un efecto de FadeOut
	this[pais].gotoAndPlay(7);
}

6) Finalmente aplique las funciones a cada boton, del siguiente modo:

Código:

on (rollOver) {
	// Primero se captura el nombre de instancia
	// del MC del pais señalado, que se inserta
	// dinamicamente en la variable "pais"
	_root.pais = this._name;
	_root.sobrePais();
}
on (rollOut) {
	_root.salirPais();
}

En este punto quiero hacer notar algo: "_root.pais = this._name;". Con esto logramos capturar el nombre de instancia del movieclip que tenemos seleccionado en ese instante, nombre que se inserta automaticamente en la variable "pais". Sin el, todo el trabajo no funcionaria.

Entonces... te atreverias a intentarlo ???... es mucho mas simple de lo que parece.

Si tienes dudas, aqui tienes el ejemplo que prepare para este tutorial... bajalo y pruebalo.