i am new in action script. trying to split a sentence into words and show them in sprite.and also need which sprite i clicked - actionscript

Question

I am trying to split a sentence in to words and show them into sprite()
var sentence:String = "My name is Subhadip.";
var txt:Array = new Array();
var splittedSentence:Array = sentence.split(" ");
var myArraySprites:Array = new Array();
var myTextImage:Array = new Array();
var div = 40;
for (var i:int = 0; i < splittedSentence.length; i++)
{
var v = 300 - (div * i);
//...
txt[i] = new TextField();
txt[i].autoSize = TextFieldAutoSize.CENTER;
txt[i].text = splittedSentence[i];
var format1:TextFormat = new TextFormat();
format1.size = 24;
txt[i].setTextFormat(format1);
trace(txt[i]);
myArraySprites[i] = new Sprite();
myArraySprites[i].graphics.lineStyle(1, 0x000000, 1);
myArraySprites[i].buttonMode = true;
myArraySprites[i].graphics.beginFill( 0xfffffff );
myArraySprites[i].graphics.drawRect(50, v, 150, div);
myTextImage[i] = new BitmapData(100,v,true,0xffffff);
myTextImage[i].draw(txt[i]);
trace(myTextImage[i]);
//myArraySprites[i].graphics.beginBitmapFill(myTextImage[i]);
//myArraySprites[i].graphics.endFill();
myArraySprites[i].addChild(new Bitmap(myTextImage[i]));
addChild(myArraySprites[i]);
myArraySprites[i].addEventListener(MouseEvent.CLICK, removeThis);
}
function removeThis(e:MouseEvent):void
{
var clickTarget:int = myArraySprites.indexOf(e.currentTarget);
trace("Clicked sprite (id): " + clickTarget);
}
[enter image description here][1]
trying to split a sentence into words and show them in sprite.and also need which sprite i clicked
[1]: https://i.stack.imgur.com/RzHUQ.png

Answer 1

The problem is that you're dealing with screen positions in two different places:
myArraySprites[i].graphics.drawRect(50, v, 150, div);
and
myTextImage[i] = new BitmapData(100,v,true,0xffffff);
Think of it in a more object-oriented way. Each Sprite instance you want to be clickable is a single object. As such it also holds the main properties e.g. the on-screen position determined by it's x and y properties.
Each of those sprites have equal width & height, so make this a global property.
var wid:Number = 150;
var hei:Number = 40;
If we look at your .png, we can see that you want to have a single word centered inside such a sprite. To make things easier, we can use the .align property of the TextFormat class, set it to "center" and make each TextField 150 x 40 by using the wid and hei properties.
Finally each sprite's vertical screen position is shifted up by hei == 40 pixels. So let's determine a start position:
var yPos:Number = 300;
assign it to a sprite instance:
myArraySprites[i].x=50;
myArraySprites[i].y=yPos;
and decrement it by hei inside the for-loop.
Everything put together:
var yPos:Number = 300;
var wid:Number = 150;
var hei:Number = 40;
var sentence:String = "My name is Subhadip.";
var txt:TextField = new TextField();
txt.width = wid;
txt.height = hei;
var format1:TextFormat = new TextFormat();
format1.size = 24;
format1.align = "center";
var splittedSentence:Array = sentence.split(" ");
var myTextImage:Array = new Array();
for (var i:int = 0; i<splittedSentence.length; i++)
{
txt.text = splittedSentence[i];
txt.setTextFormat(format1);
myArraySprites[i] = new Sprite();
myArraySprites[i].x = 50;
myArraySprites[i].y = yPos;
myArraySprites[i].graphics.lineStyle(1, 0x000000, 1);
myArraySprites[i].buttonMode = true;
myArraySprites[i].graphics.beginFill(0xfffffff);
myArraySprites[i].graphics.drawRect(0, 0, wid, hei);
myTextImage[i] = new BitmapData(wid, hei, true, 0xffffff);
myTextImage[i].draw(txt);
myArraySprites[i].addChild(new Bitmap(myTextImage[i]));
addChild(myArraySprites[i]);
myArraySprites[i].addEventListener(MouseEvent.CLICK, removeThis);
yPos -= hei;
}