Adobe Animate HTML5 Canvas Checkbox

Hi.

A little bit late for the party.

If you don't want to use components, here is a symbol/oop approach.

Try it:

https://bit.ly/3OkcyOW

JavaScript / JS code:

[Global script / definition]

(function()
{
	function Checkbox(props)
	{
		this.target = props.target;
		this.target.mouseChildren = false;
		this.target.cursor = "pointer";
		this.target.stop();
		this.frames = props.frames || { up: 0, over: 1, toggled: 2, disabled: 3 };
		this.disabled = props.disabled;
		this.toggled = props.toggled;
		this.clickEvent = this.target.on("click", this.onClick, this);
	}

	Checkbox.prototype.onRollOver = function()
	{
		this.target.gotoAndStop(this.frames.over);
	};

	Checkbox.prototype.onRollOut = function()
	{
		this.target.gotoAndStop(this.frames.up);
	};

	Checkbox.prototype.onClick = function()
	{
		this.toggled = !this.toggled;
	};

	Checkbox.prototype.setHover = function()
	{
		if (this.toggled)
		{
			this.target.off("rollover", this.rollOverEvent);
			this.target.off("rollout", this.rollOutEvent);
		}
		else
		{
			this.rollOverEvent = this.target.on("rollover", this.onRollOver, this);
			this.rollOutEvent = this.target.on("rollout", this.onRollOut, this);
		}
	};

	Object.defineProperty(Checkbox.prototype, "toggled",
	{
		get: function()
		{
			return this._toggled;
		},
		set: function(val)
		{
			this._toggled = val;
			
			if (!this.disabled)
			{
				this.target.gotoAndStop(this._toggled ? this.frames.toggled : this.frames.up);
				this.setHover();
			}
		}
	});

	Object.defineProperty(Checkbox.prototype, "disabled",
	{
		get: function()
		{
			return this._disabled;
		},
		set: function(val)
		{
			this._disabled = val;
			this.target.mouseEnabled = !this._disabled;
			this.target.gotoAndStop(this._disabled ? this.frames.disabled : this.frames.up);
		}
	});

	window.ui = { Checkbox: Checkbox };
})();

[Frame 0 / usage]

// definition code for the checkboxes is in the global script section (left side section)

var checkbox0 = new ui.Checkbox({ target: this.checkbox0 });
var checkbox1 = new ui.Checkbox({ target: this.checkbox1, toggled: true });
var checkbox2 = new ui.Checkbox({ target: this.checkbox2 });
var checkbox3 = new ui.Checkbox({ target: this.checkbox3 });
var checkbox4 = new ui.Checkbox({ target: this.checkbox4, disabled: true });
var checkbox5 = new ui.Checkbox({ target: this.checkbox5 });
var checkbox6 = new ui.Checkbox({ target: this.checkbox6, disabled: true  });
var checkbox7 = new ui.Checkbox({ target: this.checkbox7 });

createjs.Touch.enable(stage);
stage.enableMouseOver();

Download / FLA / files:

https://bit.ly/3zli93n

I hope it helps.

Regards,

JC

canvas has a checkbox component (window>components).