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

Adobe Animate HTML5 Canvas Checkbox

New Here ,
Jul 18, 2022 Jul 18, 2022

Copy link to clipboard

Copied

Is there a simple checkbox used fla project?

Views

122

Translate

Translate

Report

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

Copy link to clipboard

Copied

canvas has a checkbox component (window>components).

Votes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

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