Animated button scripting issues

[pdgreenstein]

I'm attempting to create a self-contained animated button. I.e, the scripting is within the movie clip, rather than on the main timeline, so I can use multiple instances of the button.

The visual effect is mouseover to play 'in' (for example, circle becomes bigger), stop, then mouseover to play 'out' (circle becomes smaller again).

My mc has 20 frames, with a simple a/b/a tween. My main script is on frame 1, and there's a this.stop() on frame 10.

Mouse over should play the next frame.

On mouse out it should go to the corresponding 'out' frame - i.e. if you move the mouse out while you are on frame 5, it should play frame 16: (20 - (5+1)).

The code seems to work on mouse over, but is very flaky for mouse out.

When I place the code on the main timeline and reference a specific instance name, it works better, but still the occasional glitch.

Not sure if this is an error in my logic (probably), or something else.

Any help would be appreciated.

this.stop();

stage.enableMouseOver(10);

this.addEventListener("mouseover", over.bind(this));

function over()

{

   this.gotoAndPlay(this.currentFrame+1);

}

this.addEventListener("mouseout", out.bind(this));

function out()

{

  this.gotoAndPlay(this.totalFrames-(this.currentFrame)+1);

}

[RandomlyFish]

I tried your code, and yeah, it's pretty glitchy. While it should be possible to make it work more stable, I think it would be easier to get stable results by animating it through code.

This will work if you place it inside a movieclip:

stage.enableMouseOver(); // Should be placed on the main timeline instead
var button = this;
var transitionTime = 0.15;
var transitionAmount = 0;
var transitionSpeed = (1 / transitionTime) / 30; // 30 refers to the frame rate
button.addEventListener("mouseover", Over);
button.addEventListener("mouseout", Out);
function Over () {
     createjs.Ticker.removeEventListener("tick", OutTransition); // Remove the out transition
     createjs.Ticker.addEventListener("tick", OverTransition); // Start the over transition
}
function Out () {
     createjs.Ticker.removeEventListener("tick", OverTransition); // Remove the over transition
     createjs.Ticker.addEventListener("tick", OutTransition); // Start the out transition
}
function OverTransition () {
     transitionAmount += transitionSpeed;
     if (transitionAmount >= 1) {
          transitionAmount = 1;
          createjs.Ticker.removeEventListener("tick", OverTransition);
     }
     Animate();
}
function OutTransition () {
     transitionAmount -= transitionSpeed;
     if (transitionAmount <= 0) {
          transitionAmount = 0;
          createjs.Ticker.removeEventListener("tick", OutTransition);
     }
     Animate();
}
function Animate () {
     // This is where you update the buttons state
     button.scaleX = 1 + transitionAmount * 0.25;
     button.scaleY = 1 + transitionAmount * 0.25;
}

While this is a lot more code, the benefit of this is that you can get identical animation out of multiple different symbols, without creating identical animations for them. Also code like this could be added to a class, so that you can turn any symbol into an animated button, with only one line of code. Then you would only need to update the code in the class, to update the behavior of each of the buttons you're using, so you wouldn't need to change the code in every single button.

If you want me to explain how to do that, just let me know.

[ClayUUID]

Why on earth aren't you just using the tween library to do all that?

createjs.Tween.get(button, {override:true}).to({scaleX:1, scaleY:1}, 1000, Ease.quadOut);

[RandomlyFish]

I haven't used createjs.Tween yet, so I wrote the code based on my current knowledge of JavaScript for HTML5 Canvas. Thanks for the example of how it can be used for this case.

The way the code was written could still be useful in cases where you want things to change at different times based on the transition amount, such as switching the color of the button when the transitionAmount is greater than 0.5, and switching it back when the transitionAmount is less than 0.5.

[pdgreenstein]

Thanks for the response, much appreciated. As you say, it's a lot more code, but I can certainly see the advantages of doing this using a completely different approach. Having said that, I'm still hoping for an explanation as to why my code doesn't work.

[ClayUUID]

pdgreenstein  wrote

Having said that, I'm still hoping for an explanation as to why my code doesn't work.

Using currentFrame in an event handler when the actual current frame can change at any time is a trainwreck waiting to happen. That's what frame labels are for.

[pdgreenstein]

Well, my intention was to be able to track the current frame, so as to send the playback head to a corresponding frame on mouse out. I don't think frame labels would solve the problem.

I'm basically trying to emulate a simple CSS transition on hover style effect.

Anyway thanks for your input with the tween library, that's obviously a much better approach.

[RandomlyFish]

Using createjs.Tween, as ClayUUID suggested, the code can be made much shorter and the animation will be eased:

stage.enableMouseOver(); // Should be placed on the main timeline instead
var button = this;
var transitionTime = 0.15;
button.addEventListener("mouseover", Over);
button.addEventListener("mouseout", Out);
function Over () {
    createjs.Tween.get(button, {override:true}).to({scaleX:1.25, scaleY:1.25}, 1000 * transitionTime, createjs.Ease.quadOut);
}
function Out () {
    createjs.Tween.get(button, {override:true}).to({scaleX:1, scaleY:1}, 1000 * transitionTime, createjs.Ease.quadOut);
}

[pdgreenstein]

Ok, that's a much more concise solution. I've just tried it and it works perfectly. I'll have to learn create.js...

Thanks!

[pdgreenstein]

One question: Assuming other properties can be tweened - i.e alpha, color, position etc., is there a particular syntax for that?

For example would this work:

createjs.Tween.get(button, {override:true}).to({alpha:0.5}, 1000 * transitionTime, createjs.Ease.quadOut);

[ClayUUID · Accepted solution]

The to list accepts literally any property name. It doesn't even have to be a display property. It can be anything.

TweenJS v0.6.2 API Documentation : Tween