Draw Text on a generated Sprite object as3 - actionscript-3

Question

Everyone, I'm just a beginner and I have question. The idea of my program is that when the user clicks a button a circle is generated and it should be counting for each additional circle it should look something like this :
The number should be in center and I should be able to move the object with the number together this is my code:
add_s.addEventListener(MouseEvent.CLICK,new_sond);
function new_sond(event:MouseEvent):void
{
var btn:Sprite = new Sprite();
btn.graphics.beginFill(0x00FF00, 1);
btn.graphics.drawCircle(400, 300, 25);
btn.graphics.endFill();
this.addChild(btn);
}
//----------------------------Drag And Drop----------------------
this.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownH);
this.addEventListener(MouseEvent.MOUSE_UP, mouseUpH);
function mouseDownH(evt:MouseEvent):void {
var object = evt.target;
object.startDrag();
}
function mouseUpH(evt:MouseEvent):void {
var obj = evt.target;
obj.stopDrag();
}
I will be very thankful if someone can help me.
How do i make the text to apear on the center of the circles and i still will be able to move them with the text

Answer 1

This is what Vesper should have posted as an answer :)
Add a TextField object to your Sprite. Since the TextField is a child of the Sprite, it will move w/the Sprite. All you need to do is position the text in the middle of the circle:
function new_sond(event:MouseEvent):void
{
var btn:Sprite = new Sprite();
btn.graphics.beginFill(0x00FF00, 1);
btn.graphics.drawCircle(400, 300, 25);
btn.graphics.endFill();
var textField = new TextField();
textField.text = "1";
textField.width = textField.textWidth; // default width is 100
textField.height = textField.textHeight;
textField.x = (25 - textField.textWidth)/2; // center it horizontally
textField.y = (25 - textField.textHeight)/2; // center it vertically
btn.addChild(textField);
this.addChild(btn);
}
Note, as suggested by #Joeson Hwang, you could use a Shape object instead of a Sprite to draw the circles. The Shape is more lightweight than a Sprite. However, since Shape does not extend DisplayObjectContainer, you cannot add child objects to a Shape like you can with a Sprite.
#Joeson Hwang's answer suggests to add the Shape and the text to a Sprite. But that won't be saving you anything, so just draw the graphics directly to the Sprite as you are doing now.

Answer 2

use btn:Shape (saves a lot of system resources). and then put the Shape and your text into a Sprite. You could also add a Sprite into another Sprite.

Answer 3

You can use also flash.text.engine package:
function new_sond(event:MouseEvent):void
{
var btn:Sprite = new Sprite();
btn.graphics.beginFill(0x00FF00, 1);
btn.graphics.drawCircle(cx, cy, cr);
btn.graphics.endFill();
// Font format
var fontDescription:FontDescription = new FontDescription("Arial");
var format:ElementFormat = new ElementFormat(fontDescription, 16, 0x000088);
// Display text
var textElement:TextElement = new TextElement('1', format);
var textBlock:TextBlock = new TextBlock();
textBlock.content = textElement;
// New display object containing text
var textLine:TextLine = textBlock.createTextLine(null, 500);
// Centers the text inside the circle
textLine.x = cx + (cr - textLine.width) / 2;
textLine.y = cy + (cr - textLine.height) / 2;
// Add text into button
btn.addChild(textLine);
this.addChild(btn);
}
More info about creating text: Creating and displaying text in ActionScript 3.0 Developer’s Guide