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.run;

        content.x = 120;

        content.y = 120;

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

        {

            const target = event.currentTarget;

            target.root.frame.text = `label: ${target.currentFrameLabel.name}`;

        });

​

        root.addChild(content);

        content.stop();

​

        const labels = content.currentLabels;

        for (let idx = 0; idx < labels.length; ++idx) {

​

            const frameLabel = labels[idx];

​

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

            btn

                .graphics

                .beginFill(0, 0)

                .lineStyle()

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

​

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

            textField.defaultTextFormat.size = 5;

​

            textField.x        = -20;

            textField.y        = 4;

            textField.autoSize = TextFieldAutoSize.CENTER;

​

            btn.buttonMode = true;

            if (4 > idx) {

                textField.text = `gotoAndPlay("${frameLabel.name}")`;

​

                btn.x = 50;

                btn.y = 150 + (20 * idx);

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

                {

                    event.currentTarget.root.run.gotoAndPlay(frameLabel.name);

                });

            } else {

                textField.text = `gotoAndStop("${frameLabel.name}")`;

​

                btn.x = 130;

                btn.y = 150 + (20 * (idx - 4));

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

                {

                    event.currentTarget.root.run.gotoAndStop(frameLabel.name);

                });

            }

        }

    });

​

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     = "label: *";