Tutorial de creación de tooltips en Flash

En este tutorial vamos a ver cómo crear esos archiconocidos cuadritos de texto, los tooltip texts, o cuadros de información de la herramienta. Son esos cuadros que aparecen al dejar quieto el ratón sobre algún botón, con un texto explicativo del elemento sobre el que estemos apuntando.

Lo primero que haremos será crear tres botones, cuyos nombres d instancia serán respectivamente "boton1, boton2 y boton3".

El segundo paso es crear un archivo .as con el código del tooltip. Abrimos un nuevo documento .as, lo llamamos "tooltip.as" e insertamos el siguiente código:

function init() {
	_root.c = _root.getNextHighestDepth();
	_root.createEmptyMovieClip("tooltip", _root.c);
	_root.tooltip.createTextField("alt", _root.c+2, 0, 0, 10, 10);
	with (_root.tooltip.alt) {
		autoSize = true;
		border = true;
		background = true;
		backgroundColor = 0xFFFFE1;
		html = true;
		selectable = false;
	}
	_root.formato = new TextFormat();
	_root.formato.font = "tahoma";
	_root.formato.size = "11";
	_root.tooltip.createEmptyMovieClip("sombra", _root.c+1);
	_root.tooltip._visible = false;
}

Esta función lo que hace es crear en la raiz del documento (_root) un nuevo movieclip vacío, al que llamaremos "tooltip" y que será el contenedor de todo nuestro tooltip. Se crea en el mayor nivel libre, para que se vea encima de todo. Dentro de este clip, creamos un campo de texto dinámico al que llamaremos "alt", y al que formateamos de la manera más parecida a los tooltips de windows, es decir con un borde de 1px, negro, de fondo veig y fuente Tahoma a 11 puntos. También en este clip tooltip creamos otro clip vacío llamado "sombra", que obviamente será la sombra de nuestro tooltip.
Finalmente ocultamos el conjunto con _visible = false;

Ahora, insertaremos el siguiente párrafo de código en el archivo tooltip.as. Es el que sigue:

function cambia(texto) {
	_root.tooltip._x = _xmouse+8;
	_root.tooltip._y = _ymouse-18;
	_root.tooltip.onEnterFrame = function() {
		_root.tooltip._x = _xmouse+8;
		_root.tooltip._y = _ymouse-18;
	};
	_root.tooltip.alt.text = texto;
	_root.tooltip.alt.setTextFormat(_root.formato);
	with (_root.tooltip.sombra) {
		clear();
		ancho = _root.tooltip.alt._width;
		alto = _root.tooltip.alt._height;
		beginFill(0x000000, 50);
		moveTo(0, 0);
		lineTo(ancho, 0);
		lineTo(ancho, alto);
		lineTo(0, alto);
		lineTo(0, 0);
		endFill();
		_x = 3;
		_y = 3;
	}
	_root.tooltip._visible = true;
}

Expliquémoslo. Esta función es la principal para hacer aparecer nuestro tooltip con el texto que queramos. Primeramente, posicionamos el tooltip arriba a al derecha de la posición del ratón. El texto que va a aparecer lo hemos pasado como el primer parámetro de la función, es decir, "texto" es la variable que contiene el texto a aparecer. Luego, le aplicamos el formato que previamente definimos en la otra función usando setTextFormat. Tras ello, vamos a dibujar la sombra usando la API de dibujo de flash. Borramos la sombra, si hay alguna ya dibujada, usando clear();. Para hallar el ancho y alto de la sombra, miramos el ancho y alto del textfield. Con beginFill(0x000000, 50); asignamos el color de relleno a negro, y le ponemos un 50% de transparencia. Las cinco órdenes siguientes dibujan el rectángulo de la sombra, y con endFill() cerramos el relleno. Posicionamos la sombra abajo a la derecha del campo de texto, y finalmente hacemos aparecer el tooltip.

Para terminar este tutorial, escribiremos la función que hace desaparecer al tooltip al sacar el ratón del área que sea. Para ello, inserta esta función al final del archivo "tooltip.as":

function para() {
	delete _root.tooltip.onEnterFrame;
	_root.tooltip._visible = false;
}

Es simple, termina el proceso onEnterFrame del tooltip que hacia que siguiera al mouse, y lo oculta.

Ahora, nos vamos al archivo flash que comenzamos al principio del tutorial creando tres botones. En el código del primer fotograma escribimos lo que sigue:

#include "tooltip.as"
init();
boton.onRollOver = function() {
	cambia("Botón 1");
};
boton2.onRollOver = function() {
	cambia("Este texto es suuuper largo");
};
boton3.onRollOver = function() {
	cambia("WOOOOOooooooo trompa trompa!!");
};
boton.onRollOut = boton2.onRollOut = boton3.onRollOut = function () {
	para();
};

La primera línea hace que incluyamos el código del archivo "tooltip.as". Lo hemos hecho así para no mezclar el código con la película y que nos sea más sencillo modificarlo. Luego, init(); llama a la función de inicio del tooltip, es imprescindible. En las siguientes líneas tenemos ejemplos de llamadas al proceso para hacer aparecer el tooltip. El funcionamiento es sencillo, basta con incluir la función cambia(texto a aparecer); dentro del evento onRollOver de cualquier clip o botón y con eso aparecerá el tooltip. NO OLVIDÉIS definir el evento onRollOut, que se ejecuta cuando el ratón sale del clip que queramos, y dentro del mismo incluir la función para(); que, como ya dijimos antes, oculta el tooltip.

Espero que haya sido de ayuda :D

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Tutorial de creación de tooltips en Flash

Publica tu comentario

o puedes...