Spanish (Español) translation by Andrea Jiménez (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!
