Copy link to clipboard
Copied
Is there a simple checkbox used fla project?
Copy link to clipboard
Copied
canvas has a checkbox component (window>components).
Copy link to clipboard
Copied
Hi.
A little bit late for the party.
If you don't want to use components, here is a symbol/oop approach.
Try it:
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:
I hope it helps.
Regards,
JC