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

​

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

    "tagId": "container",

    "fullScreen": true

});

​

const { Loader, Sprite } = next2d.display;

const { URLRequest } = next2d.net;

const { Event, MouseEvent } = next2d.events;

const { TextField, TextFieldAutoSize } = next2d.text;

​

const loader = new Loader();

loader

    .contentLoaderInfo

    .addEventListener(Event.COMPLETE, (event) =>

    {

        const content = event.currentTarget.content;

        content.run.x = 120;

        content.run.y = 120;

        content.run.addEventListener(Event.ENTER_FRAME, (event) =>

        {

            const target = event.currentTarget;

            target.root.frame.text = `frame: ${target.currentFrame}/${target.totalFrames}`;

        });

​

        root.addChild(content.run);

    });

​

loader.load(new URLRequest(

    "https://next2d-demonstration.herokuapp.com/json/run.json"

));

​

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

frameTextField.x        = 68;

frameTextField.y        = 70;

frameTextField.name     = "frame";

frameTextField.autoSize = TextFieldAutoSize.CENTER;

frameTextField.text     = "frame: 1/8";

​

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

playBtn

    .graphics

    .beginFill(0, 0)

    .lineStyle()

    .drawRoundRect(0, 0, 30, 15, 5);

playBtn.x = 85;

playBtn.y = 150;

​

const playTextField    = playBtn.addChild(new TextField());

playTextField.x        = -34.5;

playTextField.y        = -0.5;

playTextField.autoSize = TextFieldAutoSize.CENTER;

playTextField.text     = "play";

​

playBtn.buttonMode = true;

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

{

    event.currentTarget.root.run.play();

});

​

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

stopBtn

    .graphics

    .beginFill(0, 0)

    .lineStyle()

    .drawRoundRect(0, 0, 30, 15, 5);

stopBtn.x = 125;

stopBtn.y = 150;

​

const stopTextField    = stopBtn.addChild(new TextField());

stopTextField.x        = -34.5;

stopTextField.y        = -0.5;

stopTextField.autoSize = TextFieldAutoSize.CENTER;

stopTextField.text     = "stop";

​

stopBtn.buttonMode = true;

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

{

    event.currentTarget.root.run.stop();

});

​

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

nextBtn

    .graphics

    .beginFill(0, 0)

    .lineStyle()

    .drawRoundRect(0, 0, 30, 15, 5);

nextBtn.x = 85;

nextBtn.y = 170;

​

const nextFrameTextField    = nextBtn.addChild(new TextField());

nextFrameTextField.x        = -34.5;

nextFrameTextField.y        = -0.5;

nextFrameTextField.autoSize = TextFieldAutoSize.CENTER;

nextFrameTextField.text     = "prev";

​

nextBtn.buttonMode = true;

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

{

    event.currentTarget.root.run.prevFrame();

});

​

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

prevBtn

    .graphics

    .beginFill(0, 0)

    .lineStyle()

    .drawRoundRect(0, 0, 30, 15, 5);

prevBtn.x = 125;

prevBtn.y = 170;

​

const prevFrameTextField    = prevBtn.addChild(new TextField());

prevFrameTextField.x        = -34.5;

prevFrameTextField.y        = -0.5;

prevFrameTextField.autoSize = TextFieldAutoSize.CENTER;

prevFrameTextField.text     = "next";

​

prevBtn.buttonMode = true;

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

{

    event.currentTarget.root.run.nextFrame();

});