Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Adobe Animate HTML5 Canvas Checkbox

New Here ,
Jul 18, 2022 Jul 18, 2022

Is there a simple checkbox used fla project?

174
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 19, 2022 Jul 19, 2022

canvas has a checkbox component (window>components).

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 19, 2022 Jul 19, 2022
LATEST

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines