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

​

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

    "tagId": "container",

    "fullScreen": true

});

​

const { Sprite } = next2d.display;

const { MouseEvent } = next2d.events;

const {

    TextField,

    TextFormat,

    TextFormatAlign

} = next2d.text;

​

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

mask.x     = 90;

mask.y     = 70;

​

mask

    .graphics

    .beginFill("#1B365C")

    .drawCircle(30, 30, 60);

​

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

sprite.mask  = mask;

sprite.x     = 120;

sprite.y     = 110;

​

sprite

    .graphics

    .beginFill("#7EA1C4")

    .lineStyle(5, "#1B365C")

    .drawRect(-50, -30, 200, 120);

​

sprite.buttonMode = true;

sprite.addEventListener(MouseEvent.MOUSE_DOWN, (event) => 

{

    event.currentTarget.startDrag();

});

sprite.addEventListener(MouseEvent.MOUSE_UP, (event) => 

{

    event.currentTarget.stopDrag();

});

sprite.addEventListener(MouseEvent.MOUSE_OUT, (event) => 

{

    event.currentTarget.stopDrag();

});

​

const textFormat = new TextFormat();

textFormat.bold  = true;

textFormat.align = TextFormatAlign.CENTER;

​

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

textField.defaultTextFormat = textFormat;

​

textField.width  = 50;

textField.height = 20;

textField.x      = -25;

textField.y      = -8;

textField.text   = "move me.";