Creacion de tooltips
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; }
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; }
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; }
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(); };
Espero que haya sido de ayuda