Here is an example:
JavaScript code:
var root = this;
var currentButton;
function main()
{
document.body.style.backgroundColor = lib.properties.color;
createjs.Touch.enable(stage);
stage.enableMouseOver();
setup();
root.balance.gotoAndStop("middle");
root.btn1.stop();
root.btn1.mouseChildren = false;
root.btn1.cursor = "pointer";
root.btn1.on("click", animateBalance, null, false, { label: "left" });
root.btn2.stop();
root.btn2.mouseChildren = false;
root.btn2.cursor = "pointer";
root.btn2.on("click", animateBalance, null, false, { label: "middle" });
root.btn3.stop();
root.btn3.mouseChildren = false;
root.btn3.cursor = "pointer";
root.btn3.on("click", animateBalance, null, false, { label: "right" });
currentButton = root.btn2;
root.btn2.gotoAndStop("down");
}
function setup()
{
// makes any MovieClip instance capable of playing from the current frame to another one in any direction
createjs.MovieClip.prototype.playUntil = function(positionOrLabel, ease)
{
var duration;
var to = this.timeline.resolve(positionOrLabel);
this.tweenFrame = this.timeline.position;
if (this.tweenFrame == null)
return;
duration = Math.abs(((to - this.tweenFrame) / lib.properties.fps) * 1000);
createjs.Tween.get(this, { override: true }).to({ tweenFrame: to }, duration, ease).addEventListener("change", function(e)
{
var target = e.currentTarget.target;
target.gotoAndStop(Math.round(target.tweenFrame));
if (target.tweenFrame === to)
e.currentTarget.removeAllEventListeners("change");
});
};
}
function animateBalance(e, data)
{
if (currentButton)
currentButton.gotoAndStop("up");
currentButton = e.currentTarget;
currentButton.gotoAndStop("down");
root.balance.playUntil(data.label, createjs.Ease.cubicInOut);
}
main();
FLA / source / download:
https://bit.ly/463cRXi
Don't worry about the prototype part. That only makes Movie Clips capable of playing timelines from a frame to another without "jumping" and you also need less animations.
Please let us know if something is not clear.
Regards,
JC