import "https://cdn.skypack.dev/@next2d/player@latest";

​

const root = next2d.createRootMovieClip(240, 240, 60, {

    "tagId": "container"

});

​

const { Sprite } = next2d.display;

const { MouseEvent } = next2d.events;

const {

    TextField,

    TextFormat,

    TextFormatAlign

} = next2d.text;

​

const parent = root.addChild(new Sprite());

parent.name  = "parentSprite";

parent.x     = 70;

parent.y     = 50;

​

parent

    .graphics

    .beginFill("#7EA1C4")

    .lineStyle(5, "#1B365C")

    .drawCircle(30, 30, 70);

​

parent.buttonMode = true;

parent.addEventListener(MouseEvent.CLICK, (event) =>

{

    const target = event.target;

    target.root.state.text = target.name;

});

​

const textFormat = new TextFormat();

textFormat.bold  = true;

textFormat.align = TextFormatAlign.CENTER;

​

const parentTextField = parent.addChild(new TextField());

parentTextField.defaultTextFormat = textFormat;

​

parentTextField.name   = "parentTextField";

parentTextField.width  = 100;

parentTextField.height = 20;

parentTextField.x      = -20;

parentTextField.y      = -10;

parentTextField.text   = "click parent";

​

const child = parent.addChild(new Sprite());

child.name  = "childSprite";

child.x     = 70;

child.y     = 50;

​

child

    .graphics

    .beginFill("#7EA1C4")

    .lineStyle(5, "#1B365C")

    .drawCircle(30, 30, 40);

​

const childTextField = child.addChild(new TextField());

childTextField.defaultTextFormat = textFormat;

​

childTextField.name   = "childTextField";

childTextField.width  = 100;

childTextField.height = 20;

childTextField.x      = -20;

childTextField.y      = 10;

childTextField.text   = "click child";

​

const textField = root.addChild(new TextField());

textField.defaultTextFormat = textFormat;

​

textField.name   = "state";

textField.width  = 100;

textField.height = 20;

textField.x      = 70;

textField.y      = 190;

textField.text   = "name is...";