custom tooltip

Zephyr · February 28, 2010 at 8:46 PM

Krpano has a awesome tooltip function (showtext). This works perfectly with hotspots and plugins.

I however want to call upon this function within my flash plugin. I have several items in 1 flash plugin that needs a tooltip. Normally I use a tooltip Class. But I was wondering, since krpano already has it (this saves code + the tooltip style is consistent) How can I call upon a showtext function within my flash file. Using krpano.call("showtext(text, textstyle)"); + a MOUSE_OVER Event works only half. It calls the tooltip, but then instantly vanishes instead of hovering near my mouse.

michel · February 28, 2010 at 10:00 PM

Hi Zephir,

Quote from <textstyle> doc

showtime
time to the show the text in seconds (default="0,1")

Perhaps you can set the showtime to a greater value than the default...
I searched for a MOUSE_HOVER Event but it seems to not exist...

SAlut.

Zephyr · March 1, 2010 at 1:22 AM

No the timer is correct, I use it for all my tooltips.
xml:

Code

<action name="tooltip">
		showtext(get(data[%1].content), tooltipstyle);
	</action>
 <textstyle name="tooltipstyle"
		  font="Arial" 
		  fontsize="12" 
		  background="True" 
		  backgroundcolor="0xFFFFFF" 
		  textcolor="0x666666" 
		  alpha="0.8" 
		  border="false" 
		  effect="dropshadow(4,45,0x000000,3,0.5);" 
		  textalign="center" 
		  xoffset="20" yoffset="-5" 
	  />

Display More

as3:

Code

public function SetActive()
		{
			Item.Acquired = true;
			this.buttonMode = true;
			this.useHandCursor = true;
			this.addEventListener(MouseEvent.CLICK, ItemListener);
			btn.addEventListener(MouseEvent.MOUSE_OVER,ItemListener);
			this.addEventListener(MouseEvent.MOUSE_OUT, ItemListener); 
		}
		
		private function ItemListener(evt:MouseEvent) 
		{
			if(Item.Acquired)
			{
				switch (evt.type) 
				{
					case MouseEvent.MOUSE_OVER :
						vc.krpanoCall("tooltip(1)");
						TweenMax.to(this, 1, {colorTransform:{tint:0x000000, tintAmount:0.4}});
					break;
				
					case MouseEvent.MOUSE_OUT :
						TweenMax.to(this, 1, {colorTransform:{tint:0xFFFFFF, tintAmount:0.0}});
					break;
						
					case MouseEvent.CLICK :						
						vc.krpanoCall("callpopup(data:itemdata_"+ Item.Id + ")");
					break;
				}
			}
		}

Display More

michel · March 1, 2010 at 3:04 AM

Hi Zephir,

Quote

No the timer is correct, I use it for all my tooltips.

I suppose you use it, calling a showtext() action on an onhover attribute inside your plugins or hotspots...
Try to use onover instead of onhover to see what's happens... the showtext() instantly vanishes after 0.1 seconds (the default value for showtime... that's why I asked about increase this value)....
That's because onover calls the action 1 time instead of onhover that calls the action in intervals...

Quote from <plugin> <hotspot> doc

onover
action that will be called when mouse comes overs the plugin/image
onhover
action that will called in intervals when mouse stays/hovers over the plugin/image

Because it seems that MOUSE_HOVER Event does not exist in AS3, I suppose you have to simulate an onhover event to be abble to call the krpanoCall("tooltip(1)"); action in intervals while an MOUSE_OUT does not happens ... But I have no knowledge how to do that ...

SAlut.

michel · March 3, 2010 at 4:43 PM

Hi Zephyr,

About the action in intervals, Klaus gives a code inside this thread: Effect like showtext

SAlut.

Zephyr · March 4, 2010 at 1:48 AM

Ok cool :) I went for another approach by using my tooltip class and getting variables for the styling from krpano

Code

package com.module{


    import flash.display.DisplayObjectContainer;
    import flash.display.Sprite;
    import flash.events.*;
    import flash.filters.DropShadowFilter;
    import flash.text.AntiAliasType;
    import flash.text.Font;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
    import flash.text.TextFormat;
   import com.module.*;
	
    public class Tooltip extends Sprite {       
        private static var tooltip:Tooltip;
        private var vc:ViewerControl = new ViewerControl();
        private var TooltipTextField:TextField;
        private var ToolTipColor:uint;
        private var Alpha:Number;
        private var Dropshadow:DropShadowFilter;
        private var TheStage:DisplayObjectContainer;
        private var X:int;
        private var Y:int;
        
        public function Tooltip(tc:ToolTipCreator, mod:DisplayObjectContainer, tipColor:uint = 0xFFFFFF, tipAlpha:Number = 1) 
		{
            if (!tc is ToolTipCreator)
			{
				throw new Error("Tooltip class must be instantiated with static method Tooltip.createToolTip() method.");
			}
			
            TheStage = mod;
            ToolTipColor = tipColor;
            Alpha = tipAlpha;
            Dropshadow = new DropShadowFilter(3, 45, 0x000000, .7, 2, 2, 1, 3);            
            this.mouseEnabled = false;
        }


        public static function createToolTip(mod:DisplayObjectContainer, tipColor:uint = 0xFFFFFF, tipAlpha:Number = 0.8):Tooltip 
		{
            if (tooltip == null) 
			{
				tooltip = new Tooltip(new ToolTipCreator(), mod, tipColor, tipAlpha);
			}
            return tooltip;
        }
    
        public function addTip(TooltipText:String):void 
		{
            TheStage.addChild(this);		
			
			var TF:TextFormat = new TextFormat();
			TF.font = vc.krpanoGet("textstyle[tooltipstyle].font");
			TF.size = vc.krpanoGet("textstyle[tooltipstyle].fontsize");
			TF.color = vc.krpanoGet("textstyle[tooltipstyle].textcolor");
			TF.align = vc.krpanoGet("textstyle[tooltipstyle].textalign");
			
			TooltipTextField = new TextField();
				TooltipTextField.embedFonts = false;
				TooltipTextField.defaultTextFormat = TF;
				TooltipTextField.text = TooltipText;
				TooltipTextField.selectable = false;
				TooltipTextField.width = int(TooltipTextField.textWidth);


				TooltipTextField.mouseEnabled = false;
				
           TooltipTextField.autoSize = TextFieldAutoSize.CENTER;
          
            var w:Number = TooltipTextField.textWidth +10;
            var h:Number = TooltipTextField.textHeight + 4;
            
            this.graphics.beginFill(ToolTipColor, Alpha);  
			this.graphics.drawRect(0, 0, w,  h); //top
            this.graphics.endFill();
            
			this.y = Math.round(stage.mouseY - 5);
            this.x = Math.round(stage.mouseX + 20);
            
            this.filters = [Dropshadow];
            TooltipTextField.x = 2 //Math.round(-(w / 2)) - 2;
            X = TooltipTextField.x;
            TooltipTextField.y = 0//Math.round(-(h / 2));
            Y = TooltipTextField.y;
            this.addChild(TooltipTextField);
            
            stage.addEventListener(MouseEvent.MOUSE_MOVE, onTipMove);
        }
        
        private function onTipMove(evt:MouseEvent):void 
		{ 
			this.y = Math.round(evt.stageY - 10); //up
            this.x = Math.round(evt.stageX + 15); //right
           
		   if(this.x + this.width + 10 > TheStage.stage.stageWidth) //when tooltip reaches right
		   {
			   this.x =  Math.round(evt.stageX - this.width)
		   }
		   if(this.y + this.height + 10 > TheStage.stage.stageHeight) //when tooltip reaches bottomborder
		   {
			   this.y = Math.round(evt.stageY - this.height);
		   }
		    if (this.y - this.height + 10 < 0) //when tooltip reaches topborder
			{
				 this.y = Math.round(evt.stageY + this.height);
			}
			
/*            if (this.y - this.height < 0) {
                this.scaleY = TooltipTextField.scaleY = - 1;
                //TooltipTextField.y = 0;
                this.y = Math.round(evt.stageY  + 5);
             } else {
                this.scaleY = TooltipTextField.scaleY = 1;
                //TooltipTextField.y = Y;
            }


            if (this.x - (this.width - 18) < 0) 
			{
                this.scaleX = TooltipTextField.scaleX = 1;
                //TooltipTextField.x = X;
            }   */     
            evt.updateAfterEvent();
        }


        public function removeTip():void 
		{
            stage.removeEventListener(MouseEvent.MOUSE_MOVE, onTipMove);
            this.removeChild(TooltipTextField);
            this.graphics.clear();
            TheStage.removeChild(this);
        }
    } 
}


internal class ToolTipCreator {};

Display More

then on the button:

Code

private var tooltip:Tooltip = Tooltip.createToolTip(stage, 0xffffff, .8);
this.addEventListener(MouseEvent.CLICK, ItemListener);
this.addEventListener(MouseEvent.MOUSE_OVER,ItemListener);
this.addEventListener(MouseEvent.MOUSE_OUT, ItemListener); 


private function ItemListener(evt:MouseEvent) 
		{
			if(Item.Acquired)
			{
				switch (evt.type) 
				{
					case MouseEvent.MOUSE_OVER :
						tooltip.addTip(evt.currentTarget.Item.Description)
						TweenMax.to(this, 1, {colorTransform:{tint:0xf8d200, tintAmount:0.4}});
					break;
				
					case MouseEvent.MOUSE_OUT :
						tooltip.removeTip();
						TweenMax.to(this, 1, {colorTransform:{tint:0xFFFFFF, tintAmount:0.0}});
					break;
						
					case MouseEvent.CLICK :						
						vc.krpanoCall("callpopup(data:itemdata_"+ Item.Id + ")");
						//vc.krpanoCall("playsound(1, click.mp3)");
					break;
				}
			}
		}

Display More

This ofcourse isnt the full code, but gives a rough idea. I don't really like timers, unless there is no other way. Heavy usage leads to system slowdown.

custom tooltip

Participate now!

Users Viewing This Thread