Advertisement
  1. Code
  2. Effects

Crea un tooltip personalizable en ActionScript 3.0

Scroll to top
Read Time: 8 min

() translation by (you can also view the original English article)

Un tooltip es un elemento de la interfaz gráfica del usuario. Se activa al pasar el cursor por encima de un elemento, aparece un cuadro de texto que muestra información sobre ese elemento.

En este tutorial, te mostraré cómo crear un tooltip personalizable con clases en ActionScript 3.0. ¡Mira!




Paso 1: Resumen general

Se creará una clase tooltip para controlar el dibujo del tooltip, una clase Main controlará los eventos correspondientes y se mostrará pasando sobre un botón o MovieClip en el escenario.

Paso 2: Inicio

Abre Flash y crea un nuevo archivo (ActionScript 3).

Establece el tamaño del escenario en 600x300 y crea un fondo radial gris (#F9FAF5, #E3E5E0).

””””””

Paso 3: El botón

Selecciona la herramienta Rectángulo primitivo y crea un rectángulo redondeado azul de 140x40px (#7B90A5). Establece 10 como radio del vértice y agrega algo de texto para que parezca más un botón.

Conviértelo en un MovieClip o en un botón y asígnale el nombre "botón". Abre el panel de propiedades y agrega el siguiente filtro:

Terminarás con algo como esto:

Paso 4: ¡ActionScript!

Guarda tu trabajo y prepárate para la codificación.

Crea un nuevo archivo en ActionScript y guárdalo como Tooltip.as

Paso 5: Clases requeridas

Estas son las clases que necesitaremos. Consulta la ayuda de flash para obtener más información sobre cada clase.

1
package classes
2
{
3
	import flash.display.Sprite;
4
	import flash.text.TextField;
5
	import flash.text.TextFormat;
6
	import flash.text.TextFormatAlign;
7
	import flash.filters.BitmapFilter;
8
	import flash.filters.DropShadowFilter;
9
	import fl.transitions.Tween;
10
	import fl.transitions.easing.Strong;

Paso 6: Extendiendo la clase

Para obtener acceso a las funciones relacionadas con DisplayObject, extendemos el uso de la clase Sprite.

1
public class Tooltip extends Sprite
2
{

Paso 7: Variables

Estas son las variables que utilizaremos y están explicadas en los comentarios.

1
2
var tween:Tween; //A tween object to animate the tooltip at start

3
4
var tooltip:Sprite = new Sprite(); //The Sprite containing the tooltip graphics

5
var bmpFilter:BitmapFilter; //This will handle the drop shadow filter

6
7
var textfield:TextField = new TextField(); //The textfield inside the tooltip

8
var textformat:TextFormat = new TextFormat(); //The format for the textfield

9
var font:Harmony = new Harmony(); An embedded font

Paso 8: Función constructora

Esta función se ejecuta cuando se carga la clase, casi todos los parámetros son descriptivos. El parámetro de flecha se basará en una pequeña flecha en el tooltip, pero solo funcionará si la dirección es Arriba o Abajo. Hablaremos más sobre eso en el código.

1
2
public function Tooltip(w:int, h:int, cornerRadius:int, txt:String, color:uint, txtColor:uint, alfa:Number, useArrow:Boolean, dir:String, dist:int):void
3
{

Paso 9: Propiedades del texto

Estas líneas establecerán las propiedades TextField y TextFormat.

1
2
textfield.selectable = false; //You cannot select the text in the tooltip

3
4
textformat.align = TextFormatAlign.CENTER; //Center alignment

5
textformat.font = font.fontName; //Use the embedded font

6
textformat.size = 8; //Size of the font

7
			
8
textformat.color = txtColor; //Color of the text, taken from the parameters

9
10
textfield = new TextField(); //A new TextField object

11
textfield.embedFonts = true; //Specify the embedding of fonts

12
textfield.width = w;
13
textfield.height = h;
14
textfield.defaultTextFormat = textformat; //Apply the format

15
textfield.text = txt; //The content of the TextField, taken from the parameters

Paso 10: Creación del tooltip

Este código incorpora el tooltip de acuerdo con los valores de los parámetros.

1
2
tooltip = new Sprite();
3
4
tooltip.graphics.beginFill(color, alfa);
5
tooltip.graphics.drawRoundRect(0, 0, w, h, cornerRadius, cornerRadius);

Paso 11: Parámetro de flecha

El parámetro useArrow está basado en un triángulo en el centro-superior o centro-inferior del tooltip, recuerda que esto funcionará solo si el parámetro "dir" está configurado como Arriba o Abajo.

1
2
if (useArrow && dir == "up")
3
{
4
	tooltip.graphics.moveTo(tooltip.width / 2 - 6, tooltip.height);
5
	tooltip.graphics.lineTo(tooltip.width / 2, tooltip.height + 4.5);
6
	tooltip.graphics.lineTo(tooltip.width / 2 + 6, tooltip.height - 4.5);
7
}
8
9
if (useArrow && dir == "down")
10
{
11
	tooltip.graphics.moveTo(tooltip.width / 2 - 6, 0);
12
	tooltip.graphics.lineTo(tooltip.width / 2, -4.5);
13
	tooltip.graphics.lineTo(tooltip.width / 2 + 6, 0);
14
}
15
16
tooltip.graphics.endFill(); // This line will finish the drawing no matter if the arrow is used or not.

Paso 12: Filtro de sombras

Este código aplica un filtro de sombra basado en el color del tooltip.

1
2
bmpFilter = new DropShadowFilter(1,90,color,1,2,2,1,15);
3
4
tooltip.filters = [bmpFilter];

Paso 13: Agregar el tooltip al escenario

1
2
tooltip.addChild(textfield); //Adds the TextField to the Tooltip Sprite

3
4
addChild(tooltip); //Adds the Tooltip to Stage

Paso 14: Animación

Esta línea creará una breve animación sincronizada utilizando la propiedad alpha del tooltip.

1
tween = new Tween(tooltip,"alpha",Strong.easeOut,0,tooltip.alpha,1,true);

Paso 15: Clase Main

Guarda tu clase de Tooltip y crea un nuevo archivo en ActionScript, este archivo será la clase Main que controlará los eventos para mostrar el tooltip cuando pase el cursor sobre el botón. 

Guarda esta clase como Main.as

Paso 16: Clases necesarias

Las clases necesarias para este archivo:

1
2
package classes
3
{
4
	import classes.Tooltip; //Be sure to import your Tooltip Class!

5
	import flash.display.Sprite;
6
	import flash.utils.Timer;
7
	import flash.events.MouseEvent;
8
	import flash.events.TimerEvent;

Paso 17: Extendiendo la clase

Amplía el uso de la clase Sprite para obtener acceso a las funciones relacionadas con DisplayObject.

1
2
public class Main extends Sprite
3
{

Paso 18: Variables

Las variables que usaremos en esta clase.

1
2
var timer:Timer = new Timer(500, 1); //A Timer that will execute 500 miliseconds after the roll over, just one time

3
var tooltip:Tooltip; //A Tooltip object

4
		
5
var dir:String = "up"; //The direction of the tooltip

6
var dist:int = 10; //Distance of the tooltip, in pixels

Paso 19: Función Main

Esta función es el constructor, se ejecutará tan pronto llames a la clase.

1
2
public function Main():void
3
{
4
	addListeners(); //This function adds all the necesary listeners, will be created later

5
}

Paso 20: Cuenta regresiva del tooltip

Esta función se ejecutará cuando el usuario pase sobre el botón, iniciará el temporizador para contar 500 milisegundos  antes de llamar a la función que mostrará el tooltip.

1
2
private function startTooltipCounter(e:MouseEvent):void
3
{
4
	timer.addEventListener(TimerEvent.TIMER_COMPLETE, showTooltip);
5
	timer.start();
6
}

Paso 21: Mostrar la función del tooltip

Crea el tooltip según los parámetros y ponlo en la dirección elegida. Agrega el tooltip al escenario y crea un listener del movimiento del cursor.

1
2
private function showTooltip(e:TimerEvent):void
3
		{
4
			timer.removeEventListener(TimerEvent.TIMER_COMPLETE, showTooltip);
5
			
6
			tooltip = new Tooltip(80, 20, 10, "FlashTuts+", 0x222222, 0xFFFFFF, 0.5, true, dir, dist); //Using the Tooltip Class

7
			
8
			/* Start Position, based in the dir parameter */
9
			
10
			switch (dir)
11
			{
12
				case "up" :
13
					tooltip.x = mouseX - tooltip.width / 2;
14
					tooltip.y = mouseY - (tooltip.height + dist);
15
					break;
16
				case "down" :
17
					tooltip.x = mouseX - tooltip.width / 2;
18
					tooltip.y = mouseY + (tooltip.height + dist);
19
					break;
20
				case "left" :
21
					tooltip.x = mouseX - tooltip.width - dist;
22
					tooltip.y = mouseY - (tooltip.height / 2);
23
					break;
24
				case "right" :
25
					tooltip.x = mouseX + dist;
26
					tooltip.y = mouseY - (tooltip.height / 2);
27
					break;
28
			}
29
			
30
			/* Add tooltip to stage and add move listener */
31
			
32
			addChild(tooltip);
33
			
34
			button.addEventListener(MouseEvent.MOUSE_MOVE, moveTooltip);
35
		}

Paso 22: Movimiento del tooltip

Este código moverá el tooltip en función del parámetro dist y la posición del cursor.

1
2
private function moveTooltip(e:MouseEvent):void
3
{
4
	switch (dir)
5
	{	
6
		case "up" :
7
			tooltip.x = mouseX - tooltip.width / 2;
8
			tooltip.y = mouseY - (tooltip.height + dist);
9
			break;
10
		case "down" :
11
			tooltip.x = mouseX - tooltip.width / 2;
12
			tooltip.y = mouseY + (tooltip.height + dist);
13
			break;
14
		case "left" :
15
			tooltip.x = mouseX - tooltip.width - dist;
16
			tooltip.y = mouseY - (tooltip.height / 2);
17
			break;
18
		case "right" :
19
			tooltip.x = mouseX + dist;
20
			tooltip.y = mouseY - (tooltip.height / 2);
21
			break;
22
	}
23
}

Paso 23: Ocultar el tooltip

Esta es una función que eliminará el tooltip cuando el cursor del ratón ya no esté dentro del destino, en este caso el botón.

1
2
private function hideTooltip(e:MouseEvent):void
3
{
4
	/* Checks if the timer is already executed, if not, it means the mouse just passed through the button, but didn't stayed */
5
6
	if (timer.currentCount == 1)
7
	{
8
		removeChild(tooltip);
9
	}
10
11
	timer.reset(); //Resets the timer

12
}

Paso 24: Listeners

Esta es una función para agregar los listeners a la vez, ejecutados en la función Main.

1
2
private function addListeners():void
3
{
4
	/* "button" is the instance name of our target */
5
6
	button.addEventListener(MouseEvent.MOUSE_OVER, startTooltipCounter);
7
	button.addEventListener(MouseEvent.MOUSE_OUT, hideTooltip);
8
}

Paso 25: Clase de documento

Vuelve al fla y en el panel de propiedades, en el campo de texto de la clase agrega "classes.Main". Esto vinculará la clase Main como la clase de documento.

¡Pon a prueba tu tooltip!

Conclusión

Has creado un tooltip altamente personalizable en las clases de ActionScript 3, es el momento de ver la parte de la personalización. Los siguientes son solo algunos ejemplos de muchas posibilidades que tienes:

¡Gracias por leer!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.