Estás en: Cristalab > Tips > Creación de tooltips en Actionscript 3

Creación de tooltips en Actionscript 3

6 de Septiembre del 2007

1305 de clabLevel
Otros artículos de master_of_puppetz

11,830 visitas

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!

Artículos Relacionados

actionscript_3

Comentarios | Enviar un comentario

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)

Código :

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();
      }
      //----------------------------------------------
   }
}

Este es su uso:

Código :

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");

Por: Zguillez

muy bueno, solo que como no había encontrado un tool tip en as3, decidí convertir el que ya estaba en as2

Por: master_of_puppetz

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: darkx_blog

darkx_blog No son .jar, son librerías nativas de Flash. Es Action Script.
Por: The Fricky!

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: Capitan_pescanova_blog

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: Hancco_blog

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

Código :

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();
      }

      //----------------------------------------------
   }
   }

el error que me manda es el siguiente:

creen poder ayudarme?

MIL GRACIAS!!!!!

:wink:

Por: CHEPINE

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: Kong

Deja un comentario

IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.