サンプルコード

// Main.hx
package;

import openfl.display.Sprite;
import openfl.text.TextField;
import openfl.text.TextFormat;
import openfl.events.MouseEvent;

class Main extends Sprite {
  private var label:TextField;
  private var button:Sprite;

  public function new() {
    super();

    // ① テキスト
    var tf = new TextFormat("_sans", 20, 0x333333);
    label = new TextField();
    label.defaultTextFormat = tf;
    label.text = "Hello OpenFL!";
    label.selectable = false;
    label.x = 20;
    label.y = 20;
    addChild(label);

    // ② 図形（四角）
    var box = new Sprite();
    box.graphics.beginFill(0x4C9AFF);
    box.graphics.drawRect(0, 0, 120, 80);
    box.graphics.endFill();
    box.x = 20;
    box.y = 60;
    addChild(box);

    // ③ ボタン
    button = new Sprite();
    button.graphics.lineStyle(2, 0x333333);
    button.graphics.beginFill(0xF0F0F0);
    button.graphics.drawRoundRect(0, 0, 160, 40, 8, 8);
    button.graphics.endFill();
    button.x = 20;
    button.y = 160;
    button.buttonMode = true;
    button.mouseChildren = false;
    addChild(button);

    var btnLabel = new TextField();
    btnLabel.defaultTextFormat = new TextFormat("_sans", 16, 0x333333, true);
    btnLabel.text = "Click Me";
    btnLabel.width = 160;
    btnLabel.height = 40;
    btnLabel.selectable = false;
    btnLabel.x = 0;
    btnLabel.y = 8;
    button.addChild(btnLabel);

    button.addEventListener(MouseEvent.CLICK, onClick);
  }

  private function onClick(e:MouseEvent):Void {
    label.text = "ボタンがクリックされました！";
  }
}

ポイント解説

• TextField と TextFormat でテキストを表示
• Sprite + graphics で図形を描画
• Sprite をボタンとして使い、MouseEvent.CLICK を処理
• addChild() でディスプレイリストに追加しないと表示されない点に注意

ビルドして確認

再度以下を実行し、表示とクリック動作を確認します。

openfl test html5