Crear un ToolTip

Categoria: MiniTuto
Nivel: Intermedio
weno pues ya devo algunos tutos XDDD, cuando tenga tiempito epero ponerlos... (el problema es q hay veces q no puedo usar casi nada la pc.. :S o.o).
weno en este minituto veremos como crear un tooltip en flash y con ayuda de un poco de AS(actionscript), el principal objetivo es crear un tooltip de una manera sencilla pero funcional :).

--Descargar Fla--

Empesemos:
1.- Lo primero q haremos es crear el "tooltip", para esto dibujaremos en rectangulo de aproximadamente 60px * 18px, con los colores de ustedes quieran.., lo selecionamos (doble click) y presionamos F8 para convertirlo a simbolo, lo convertimos en MovieClip con nombre "fondo" y el punto de registro en la esquina inferior izquierda...., despues precionamos "OK", selecionamos nuestro mc en el escenario y en el panel de propiedades (Ctrl+F3) le ponemos como nombre de instancia fondo.

2.- Ahora selecionamso este movieclip "fondo" y lo volvemos a convertir en otro MC de la misma forma(seleccionamos y F8), solo q ahora con nombre tooltip_mc y nombre de instancia igual "tooltip_mc".
3.- Damos doble click sobre el mc "tooltip_mc" para entrar a su linea de tiempo, creamos una nueva capa (q este sobre la capa q tiene el mc "fondo"), y dibujamos un campo de texto masmomenos del mismo tamaño y alto.. (el tipo de letra colorr y tamaño como tu gustes).
Selecionamos este campo de texto y en el pnale de propiedades (Ctrl+F3), le ponemos como tipo Dinamico, con nombre de instancia "tex" y q no sea selecionable...
4.- Nos regresamos a la linea de tiempo principal y arrastrmos todo nuestro MC "tooltip_mc" fuera del escenario...
5.- En la linea de tiempo principal, crearemos una capa nueva con nombre "AS", seleccionamos el primer frame de esta capa y abrimos el panel de acciones (F9), ahi colocamos este codigo:

function tooltip (texto){
_root.tooltip_mc.startDrag(true);
_root.tooltip_mc._visible = true;
_root.tooltip_mc.tex.text = texto;
_root.tooltip_mc.tex.autoSize = true;
largo = _root.tooltip_mc.tex._width;
_root.tooltip_mc.fondo._width = largo+2;}
function resettool(){stopDrag();
_root.tooltip_mc.tex.text = ""
_root.tooltip_mc._visible = false;
_root.tooltip_mc._x = -300 }

Explicacion: Creamos una funcion de nombre "tooltip" para q nos modifique el tooltip al llamar esta funcion, como ven esta tiene un parametro "texto" (es decir es un valor q recibira al ser llamada esta funcion),, primero nos dice q el MC "tooltip_mc" se empiese a arrastar, luego q este mismo MC sea visible, ademas le indicamos q dentro de ete mc al campo de texto "tex" le asigne la variable texto, q como ven es la q tiene como paramentro la funcion, le decimos q el campo de texto (tex) se ajuste automaticamente y por ultimo creamos una variable "largo" q contiene el largo del camp ode texto (_width) y le asignamos ese mismo largo al mc "fondo". :).
Se crea otra funcion "resettool", esta es mucho ams sencilla.. lo q hace es q al llamar esta funcion el campo de texto se le escribe "" (osea sea vacia), ademas decimos q el MC tooltip_mc no sea visible (false), y lo ponemos en una coordenada fuera del escenario... :D
weno esta explicacion es sencilla.. ya q para este nivel deverian entender un poco.. (ademas son codigos sencillos), pero cualquier duda pueden dejar sus comentarios :D y le responder inmediatamente..

Como ven creo q ya van entendiendo, lo unico q falta hacer es llamar a esas funciones, cuando el mouse se ponga sobre un btn o mc se llama a la funcion "tooltip" y cuando se sale de este MC resetea el tooltip "resettool". Eso lo hacemos colocando los singuiente codigos a un MC o Btn q creamos..

1.- Dibujen un circulo, lo selecionan y presionan F8, lo convierten en "Boton" con cualquier nombre...
2.- Lo selecionana y en el panel de accines (F9) pegan el siguiente codigo..

on(rollOver){ _root.tooltip("El circulo"); }
on(rollOut){ _root.resettool(); }

Explicacion: Al pasar sobre este btn(RollOver), se llama a la funcion "tooltip" y se le pasa el texto q queremos q muestre. Al salir del area de este btn (RollOut) llamamos a la funcion "resettool".

Weno con eso hemos terminado... Creo q aveces explico demasiado.. xD asi q ya los proximos tutos em voy a ir acortando pasos (como cuando explico como hacer un MC :P)..
Espero q les sirva.. y estudien un poco los codigos si es necesario.. experimenten y demas ^^
Esperamos sus comentarios sugerencias y todo O.o suerte!!!! :D!