Posted By

arpo on 03/29/10


Tagged


Versions (?)

Who likes this?

5 people have marked this snippet as a favorite

TrentSkunk
tspitzr
fana
dugweb
Josueriv


Draw a tooltip shape


 / Published in: ActionScript 3
 

Thanx to http://blog.hy-brid.com/flash/25/simple-as3-tooltip/

  1. //You need this imports
  2. import flash.geom.*;
  3. import flash.display.*;
  4.  
  5. import flash.geom.*;
  6. import flash.display.*;
  7.  
  8.  
  9.  
  10. var h:Number = 50; //Set the height of the tooltip
  11. var w:Number = 150; //Set the width of the tooltip
  12. var cornerRadius:Number = 5; //Corner radius of the tooltip, same for all 4 sides
  13. var borderColor:int = 0xafa98c; //Border color
  14. var borderColorSize:int = 1; //Border size
  15. var bgColors:Array = [0xfaf7ec, 0xe9e1bb]; //Bg gradient colors
  16. var useHook:Boolean = true; //If there should be a hook
  17. var hookWidth:Number = 8; //Hook width
  18. var hookHeight:Number = 24; //Hook height
  19. var hookSkew:Number = 0; //If the hook should skew to left or rigth. 0 is straigth down.
  20. var hookAlign:String = "center"; //Where to place the hook
  21. var alphas:Array = [ 1, 1]; //Alpha of the bg with gradient.
  22.  
  23. var tt:Shape = new Shape();
  24. var hookOffSet:Number = 10;
  25. var buffer:Number = 10;
  26. var fillType:String = GradientType.LINEAR;
  27. var ratios:Array = [0x00, 0xFF];
  28. var matr:Matrix = new Matrix();
  29. var radians:Number = 90 * Math.PI / 180;
  30. matr.createGradientBox(w, h, radians, 0, 0);
  31. var spreadMethod:String = SpreadMethod.PAD;
  32. var offSet:Number
  33.  
  34. switch( hookAlign ){
  35. case "left":
  36. offSet = - w + ( buffer * 3 ) + hookWidth;
  37. hookOffSet = w - ( buffer * 3 ) - hookWidth;
  38. break;
  39.  
  40. case "right":
  41. offSet = 0 - ( buffer * 3 ) - hookWidth;
  42. hookOffSet = buffer * 3 + hookWidth;
  43. break;
  44.  
  45. case "center":
  46. offSet = - ( w / 2 );
  47. hookOffSet = ( w / 2 );
  48. break;
  49.  
  50. default:
  51. offSet = - ( w / 2 );
  52. hookOffSet = ( w / 2 );;
  53. break;
  54. }
  55.  
  56. if( borderColorSize>0){
  57. tt.graphics.lineStyle( borderColorSize, borderColor, 1 );
  58. }
  59.  
  60. tt.graphics.beginGradientFill(fillType, bgColors, alphas, ratios, matr, spreadMethod);
  61.  
  62. if ( useHook ) {
  63. var xp:Number = 0; var yp:Number = 0
  64.  
  65. tt.graphics.moveTo ( xp + cornerRadius, yp );
  66. tt.graphics.lineTo ( xp + w - cornerRadius, yp );
  67. tt.graphics.curveTo ( xp + w, yp, xp + w, yp + cornerRadius );
  68. tt.graphics.lineTo ( xp + w, yp + h - cornerRadius );
  69. tt.graphics.curveTo ( xp + w, yp + h, xp + w - cornerRadius, yp + h );
  70.  
  71. //hook
  72. tt.graphics.lineTo ( xp + hookOffSet + hookWidth, yp + h );
  73. tt.graphics.lineTo ( xp + hookOffSet + hookSkew , yp + h + hookHeight );
  74. tt.graphics.lineTo ( xp + hookOffSet - hookWidth, yp + h );
  75. tt.graphics.lineTo ( xp + cornerRadius, yp + h );
  76.  
  77. tt.graphics.curveTo ( xp, yp + h, xp, yp + h - cornerRadius );
  78. tt.graphics.lineTo ( xp, yp + cornerRadius );
  79. tt.graphics.curveTo ( xp, yp, xp + cornerRadius, yp );
  80. tt.graphics.endFill();
  81.  
  82. }else {
  83. tt.graphics.drawRoundRect( 0, 0, w, h, cornerRadius );
  84. }
  85.  
  86. addChild(tt);

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: dugweb on April 6, 2011

Very nice looking tool-tip, and a huge time saver. Thanks for sharing!

You need to login to post a comment.