AS3 Dynamic Speech Bubble Snippet
The static method drawSpeechBubble in the file below uses the drawing API to draw a rounded rectangle based speech bubble with a dynamic point. The side the point is on moves depending on the relative position to the bubble. It looks best if you set the point to be fairly close to the actual rectangle.
Usage:
SpeechBubble.drawSpeechBubble(target:Sprite, rect:Rectangle, cornerRadius:Number, point:Point)
// Example:
var g:Graphics = graphics;
var m:Matrix = new Matrix();
m.createGradientBox(200,100,90*Math.PI/180,80,80);
g.clear();
g.lineStyle(2,0x888888,1,true);
g.beginGradientFill(GradientType.LINEAR, [0xe0e0e0, 0xffffff], [1,1], [1,0xff],m);
SpeechBubble.drawSpeechBubble(this, new Rectangle(80,80,200,100), 20, new Point(120,300));
g.endFill();
Sample (move mouse to change point position):
Download:
SpeechBubble.as
Apologies for any code messiness! I'm aware that you can create a dent in the corner.. it's probably up to you to position the point sensibly so it doesn't screw up 
January 29th, 2008 at 8:46 am
Nice. Did you create this class yourself?
January 29th, 2008 at 10:49 am
Yes
February 3rd, 2008 at 3:18 pm
February 4th, 2008 at 12:27 pm
February 9th, 2008 at 2:33 am
Nice! And eerily similar to what something we're using on our site (soon to launch)
I had a question about your as3 color component, it'd be great to email if you have a chance,
June 9th, 2008 at 9:48 am
Is there an AS2 version of this class? D
June 9th, 2008 at 10:22 am
Drewb: Theres really nothing as3 specific in the code, it should be a snap to convert.
Change the first line of the function to var g:MovieClip = target;
Then change the function header (so target is a MovieClip), and package stuff.
June 17th, 2008 at 1:15 pm
great example. I will use this one in future
November 26th, 2008 at 6:53 am
I did something similar, but I tweened all the corners and the tag into new positions (it's "wobbly" in effect). I don't have the source anymore unfortunately, as I moved companies but I can redo it if anybody is interested. It was done in AS3 but I can code either...
December 30th, 2008 at 10:00 am
Ash can you share the as2 code...
February 26th, 2009 at 7:32 am
When I try this out in Flash, it compiles with the following errors:
5000: The class 'SpeechBubble' must subclass 'flash.display.MovieClip' since it is linked to a library symbol of that type.
February 26th, 2009 at 9:42 am
BeechyBoy: This class isn't designed to be an extension of MovieClip. You need to create a MovieClip on stage, and then pass it in to the static draw method, as in the example.
February 26th, 2009 at 2:55 pm
Thank you for the swift reply Ash, I'm just having a mental block it seems :s I have a MovieClip on the stage and I want to put the SpeechBubble in it, or use the MovieClip to attach the pointers to... I'd really appreciate a final tip to get this clear in my head. Many thanks Ash. SpeechBubble.drawSpeechBubble(holder_mc, bubbleBody, 20, pointers);
February 27th, 2009 at 5:30 am
Got it to do what I needed it to do now, cheers
March 23rd, 2009 at 12:37 pm
Nice one. Was looking for a custom renderer for my Flex chart data tips, and this works perfectly. Had more trouble with Flex Docs posting incorrect code!
April 8th, 2009 at 4:22 pm
I am new to ActionScript (but not new to coding/programming). Can someone please enlighten me as to how you would use text with this bubble? Is there an element to put text into? or would you create a text obj in a layer that resides on top of the bubble.
April 9th, 2009 at 8:13 am
RhythmOne: This snippet draws the bubble shape only. You would have to create a component to create the text field, etc.
January 24th, 2010 at 12:54 pm
nice one
handy class
thanks