Creación de tooltips en Actionscript 3

En base al Tutorial de tooltips en Flash, que está publicado en Cristalab, me tomé la libertad de convertirlo a Actionscript 3 con unas cuantas modificaciones:

Código :

package {
   import flash.display.MovieClip;
   import flash.filters.BitmapFilterQuality;
   import flash.filters.DropShadowFilter;
   import flash.text.TextField;
   import flash.text.TextFieldAutoSize;
   import flash.text.TextFormat;
   
   public class ToolTip extends MovieClip {
      private var filtros:Array;
      private var sombra:DropShadowFilter;
      private var etiqueta:TextField;
      private var formato:TextFormat;
      
      public function ToolTip() {
      }
      public function crea_tooltip():TextField {
         filtros = new Array();
         sombra  = new DropShadowFilter(5, 45, 0x000000, 1.0, 10, 10, 0.65, BitmapFilterQuality.MEDIUM, false, false);
         filtros.push(sombra);
         etiqueta = new TextField();
         formato = new TextFormat("Verdana", 10, 0x000000);
         etiqueta.autoSize = TextFieldAutoSize.LEFT;
         etiqueta.background = true;
         etiqueta.backgroundColor = 0xfffeee;
         etiqueta.border = true;
         etiqueta.multiline = true;
         etiqueta.selectable = false;
         etiqueta.defaultTextFormat = formato;
         etiqueta.visible = false;
         return etiqueta;
      }
      public function muestra_tooltip(texto:String):void {
         etiqueta.htmlText = texto;
         etiqueta.filters = filtros;
         etiqueta.visible = true;
      }
      public function oculta_tooltip():void {
         etiqueta.htmlText = "";
         etiqueta.visible = false;
      }
   }
}

Es una clase, la cual se puede usar de la siguiente forma:

Código :

package {
   import ToolTip;
   import flash.display.MovieClip;
   import flash.events.Event;
   import flash.events.MouseEvent;
   
   public class ToolTipTest extends MovieClip {
      //genero un contenedor
      private var c:MovieClip = new MovieClip();
      //la variable del tooltip
      private var tt:ToolTip = new ToolTip();
      //cuadros donde mostrar el tooltip
      private var cuadro1:MovieClip;
      private var cuadro2:MovieClip;
      
      public function ToolTipTest() {
         cuadro1 = new MovieClip();
         cuadro1.graphics.beginFill(0x000000);
         cuadro1.graphics.drawRect(15, 15, 150, 150);
         cuadro1.graphics.endFill();
         cuadro1.addEventListener(MouseEvent.MOUSE_MOVE, cuadro_mouse_move);
         cuadro1.addEventListener(MouseEvent.MOUSE_OUT, cuadro_mouse_out);
         cuadro2 = new MovieClip();
         cuadro2.graphics.beginFill(0x000000);
         cuadro2.graphics.drawRect(15, 175, 150, 150);
         cuadro2.graphics.endFill();
         cuadro2.addEventListener(MouseEvent.MOUSE_MOVE, cuadro_mouse_move);
         cuadro2.addEventListener(MouseEvent.MOUSE_OUT, cuadro_mouse_out);
         //agrego los cuadros al stage
         addChild(cuadro1);
         addChild(cuadro2);
         //agrego el contenedor
         addChild(c);
         //creo el tooltip en el contenedor
         c.addChild(tt.crea_tooltip());
      }
      public function cuadro_mouse_move(e:MouseEvent):void {
         //muestro el tooltip cuando pasan el mouse por un cuadrito
         tt.muestra_tooltip(e.currentTarget.name+"<br /><b>Soporta html</b><br />Y multilinea ");
         //lo muevo con la rata (mouse )
         c.x = e.localX+13;
         c.y = e.localY+20;
         e.updateAfterEvent();
      }
      public function cuadro_mouse_out(e:MouseEvent):void {
         //si quitan la ratita del cuadro, desaparece el tooltip
         tt.oculta_tooltip();
      }
   }
}

Saludos y espero le sea de utilidad a alguien!

package Clases { import flash.display.Sprite; import flash.display.Shape; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFormat; import flash.events.MouseEvent; import Clases.Sombra; import Clases.DelayAction; //------------------------------------------ public class ToolTip extends Sprite { private var _ruta:Sprite; private var _boton:Object; private var _clip:Sprite; private var _fondo:Shape; private var _texto:TextField; private var _formato:TextFormat; private var _sombra:Sombra; private var _delay:DelayAction; //------------------------------------------ public function ToolTip(boton:Object, texto:String) { _ruta = boton.parent; _boton = boton; _clip = new Sprite(); _clip.x = _boton.x; _clip.y = _boton.y; _clip.visible = false; _ruta.addChild(_clip); iniFondo(); iniTexto(); iniEvents(); setTexto(texto); } //------------------------------------------ private function iniFondo():void { _fondo = new Shape(); _fondo.x = _fondo.y = 0; _sombra = new Sombra(_fondo); _clip.addChild(_fondo); } //------------------------------------------ private function iniTexto():void { _texto = new TextField(); _texto.autoSize = TextFieldAutoSize.LEFT; _texto.background = false; _texto.border = false; _texto.multiline = false; _formato = new TextFormat(); _formato.font = "Verdana"; _formato.color = 0x000000; _formato.size = 10; _formato.underline = false; _texto.defaultTextFormat = _formato; _texto.x = 5; _texto.y = 0; _clip.addChild(_texto); } //------------------------------------------ public function setTexto(texto:String):void { _texto.text = texto; updateFondo(_texto.textWidth+15,_texto.textHeight+5); } //------------------------------------------ private function updateFondo(qWidth:int,qHeight:int):void { _fondo.graphics.clear(); _fondo.graphics.beginFill(0xFFFFCC); _fondo.graphics.lineStyle(1, 0x999999); _fondo.graphics.drawRect(0, 0, qWidth, qHeight); _fondo.graphics.endFill(); } //------------------------------------------ private function iniEvents() { _boton.addEventListener(MouseEvent.MOUSE_OVER, mouse_over); _boton.addEventListener(MouseEvent.MOUSE_MOVE, mouse_move); _boton.addEventListener(MouseEvent.MOUSE_OUT, mouse_out); } //---------------------------------------------- private function mouse_over(event:MouseEvent):void { _delay = new DelayAction(1,true,this,"mouse_over2"); } public function mouse_over2():void { _clip.visible = true; } private function mouse_move(event:MouseEvent):void { _clip.x = mouseX ; _clip.y = mouseY +20; } private function mouse_out(event:MouseEvent):void { _clip.visible = false; _delay.reset(); } //---------------------------------------------- } }

import Clases.ToolTip; var tooltip1:ToolTip = new ToolTip(boton1, "boton 1"); var tooltip2:ToolTip = new ToolTip(boton2, "boton 2"); var tooltip3:ToolTip = new ToolTip(boton3, "boton 3"); var tooltip4:ToolTip = new ToolTip(boton4, "boton 4");

private function mouse_over(event:MouseEvent):void { Delay.action(1,true,this,"mouse_over2"); } public function mouse_over2():void { _clip.visible = true; } private function mouse_move(event:MouseEvent):void { _clip.x = mouseX ; _clip.y = mouseY 20; } private function mouse_out(event:MouseEvent):void { _clip.visible = false; Delay.reset(); }

package Clases { import flash.display.Sprite; import flash.display.Shape; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFormat; import flash.events.MouseEvent; import Clases.Sombra; import Clases.DelayAction; //------------------------------------------ public class ToolTip extends Sprite { private var _ruta:Sprite; private var _boton:Object; private var _clip:Sprite; private var _fondo:Shape; private var _texto:TextField; private var _formato:TextFormat; private var _sombra:Sombra; private var _delay:DelayAction; //------------------------------------------ public function ToolTip(boton:Object, texto:String) { _ruta = boton.parent; _boton = boton; _clip = new Sprite(); _clip.x = _boton.x; _clip.y = _boton.y; _clip.visible = false; _ruta.addChild(_clip); iniFondo(); iniTexto(); iniEvents(); setTexto(texto); } //------------------------------------------ private function iniFondo():void { _fondo = new Shape(); _fondo.x = _fondo.y = 0; _clip.addChild(_fondo); } //------------------------------------------ private function iniTexto():void { _texto = new TextField(); _texto.autoSize = TextFieldAutoSize.LEFT; _texto.background = false; _texto.border = false; _texto.multiline = false; _formato = new TextFormat(); _formato.font = "Verdana"; _formato.color = 0x000000; _formato.size = 10; _formato.underline = false; _texto.defaultTextFormat = _formato; _texto.x = 5; _texto.y = 0; _clip.addChild(_texto); } //------------------------------------------ public function setTexto(texto:String):void { _texto.text = texto; updateFondo(_texto.textWidth+15,_texto.textHeight+5); } //------------------------------------------ private function updateFondo(qWidth:int,qHeight:int):void { _fondo.graphics.clear(); _fondo.graphics.beginFill(0xFFFFCC); _fondo.graphics.lineStyle(1, 0x999999); _fondo.graphics.drawRect(0, 0, qWidth, qHeight); _fondo.graphics.endFill(); } //------------------------------------------ private function iniEvents() { _boton.addEventListener(MouseEvent.MOUSE_OVER, mouse_over); _boton.addEventListener(MouseEvent.MOUSE_MOVE, mouse_move); _boton.addEventListener(MouseEvent.MOUSE_OUT, mouse_out); } //---------------------------------------------- private function mouse_over(event:MouseEvent):void { Delay.action(1,true,this,"mouse_over2"); } public function mouse_over2():void { _clip.visible = true; } private function mouse_move(event:MouseEvent):void { _clip.x = mouseX ; _clip.y = mouseY -20; } private function mouse_out(event:MouseEvent):void { _clip.visible = false; Delay.reset(); } //---------------------------------------------- } }

Por Zguillez el 08 de Septiembre de 2007

Hace unos días escribí una clase para hacer exactamente lo mismo...
Este es la clase resultante:
(PD: esta clase utiliza las clases Sombra y DelayAction)

Este es su uso:

Por master_of_puppetz el 08 de Septiembre de 2007

muy bueno, solo que como no había encontrado un tool tip en as3, decidí convertir el que ya estaba en as2
Por darkx el 09 de Septiembre de 2007

me podrian decir de donde sacan estas importacines

import flash.display.MovieClip;
importflash.filters.BitmapFilterQuality; import flash.filters.DropShadowFilter; import flash.text.TextField;
import flash.text.TextFieldAutoSize; import flash.text.TextFormat;

se ke es un jar pero no se cual es su nombre y si me podrian mandar el url de la pagina para descargarlo
Por The Fricky! el 09 de Septiembre de 2007

darkx_blog No son .jar, son librerías nativas de Flash. Es Action Script.
Por Capitan_pescanova el 31 de Enero de 2008
Zguillez he estado probando tu clase y me han surgido unas cuantas dudas, de la forma como la has puesto y utilizando las mismas clases que enlazas no funciona, supongo que has echo alguna modificación en la clase Decay, empezando por su nombre que lo pones como DelayAction.

Para que me funcionara he tenido que cambiarle el nombre al import, y modificar un poco el código como sigue.

Código :
```
    private function mouse_over(event:MouseEvent):void
      {
         Delay.action(1,true,this,"mouse_over2");
      }
      public function mouse_over2():void
      {
         _clip.visible = true;
      }
      private function mouse_move(event:MouseEvent):void
      {
         _clip.x = mouseX ;
         _clip.y = mouseY  20;
      }
      private function mouse_out(event:MouseEvent):void
      {
         _clip.visible = false;
         Delay.reset();
      }
```
comop puedes ver he tenido que modificar la extructura con la que llamas al Decay porque no me funcionaba haciendo un simple cambio de nombre.

Mi pregunta es es correcta esta modificación o me he colado?

PD: Cojonudas tus Clases y muy faciles de implementar a los códigos.
Por Hancco el 04 de Febrero de 2008

Buena observación Capitan_pescanova_blog
solo que para que funcione Ctrl c y con Ctrl v te olvidaste del signo menos

[/code]
private function mouse_move(event:MouseEvent):void { _clip.x = mouseX ; _clip.y = mouseY - 20; }
[/code]

Por CHEPINE el 22 de Marzo de 2008

Hola!

bueno, antes que nada agradezco a la gente del foro por ayudar a los que menos sabemos, o los que recien comenzamos con esto del as.

soy nuevo en el foro y me emociona ya ser miembro del foro de la mejor pagina para aprender
a usar uno de los mejores programas que es flash, y no solo flash, sino otras muchas cosas.

bueno, ahora a lo que venia....

estuve tratando de usar el codigo de zguillez con la el cambio que mando Capitan_pescanova_blog pero aun asi, me sigue mandando un error y no puedo ver el tooltip

el codigo que estoy usando es el siguiente

el error que me manda es el siguiente:

creen poder ayudarme?

MIL GRACIAS!!!!!

:wink:

Por el 16 de Abril de 2008

Hola con respecto al error que te esta mandando es por esta clase esta importando las clases Sombra y DelayAction asi que lo mas seguro es que no las tengas en la misma carpeta donde tienes tu clase ToolTip, buscalas aqui
http://www.cristalab.com/tips/44014/clase-de-actionscript-3-para-anadir-sombras-a-movieclips
http://www.cristalab.com/tips/44127/retardar-la-ejecucion-de-funciones-en-actionscript-3
Por el 16 de Abril de 2008

Hola con respecto al error que te esta mandando es por esta clase esta importando las clases Sombra y DelayAction asi que lo mas seguro es que no las tengas en la misma carpeta donde tienes tu clase ToolTip, buscalas aqui
http://www.cristalab.com/tips/44014/clase-de-actionscript-3-para-anadir-sombras-a-movieclips
http://www.cristalab.com/tips/44127/retardar-la-ejecucion-de-funciones-en-actionscript-3
Por Gian el 21 de Enero de 2010

Amigo una consulta eh implementado tu clase pero el tooltip me sale muy arriba y no debajo del cuadro o el objeto q estoy usando
Por Charly Novoa el 18 de Febrero de 2010

Buenas
Kong, a mi me pasa lo mismo, estuve 2 horas para poder hacer funcionar la class... soy novato. pero ahora que funciona me tira tres errores, en los cuales esta "DelayAction" y ya tengo las clases incluidas, el problema quizas es que en los links que pasaste no estan contempladas estas funciones que usa el script de puppetz...
Y si estoy en lo cierto, confunde.

Abrazo y gracias!
Por gian el 09 de Abril de 2010

man una consulta eh puesto tu tooltip pero cuando lo pongo en la web solo se ve en el recuadro del flash y no sobre la web me dejo entender
Por c3tz el 03 de Noviembre de 2010

Zquillez necesito hacerte una consulta sencilla sobre:
var contenedor = new Loader();
contenedor.load(new URLRequest("peli.swf"));
addChild(contenedor);
contenedor.x = 100
contenedor.y=0

Cómo hago que se baje el swf y que al pasar a otra pagina (etiqueta -quienes somos, contactenos, etc) no quede montado el swf. Gracias (de foros del web.com)

Creación de tooltips en Actionscript 3

Publica tu comentario

o puedes...