URGENT html5 issue with mouseover, mouseout

[epistel]

Hy there

I have a workin AS3 scipt which I am trying to convert into HTML5 Canvas.
But I do not succed. Can anyone help me:

Working AS3 script:

this.stop();

this.mc_play.stop();

mc_play.addEventListener(MouseEvent.MOUSE_OVER, fl_MouseOverHandler);

function fl_MouseOverHandler(event:MouseEvent):void

{

    this.mc_play.play();

}

mc_play.addEventListener(MouseEvent.MOUSE_OUT, fl_MouseOutHandler);

function fl_MouseOutHandler(event:MouseEvent):void

{

    this.addEventListener(Event.ENTER_FRAME, playReverse, false, 0, true);

}

function playReverse(e:Event):void {

    if (this.mc_play.currentFrame == 1) {

        stopPlayReverse();

    } else {

        this.mc_play.prevFrame();

    }

}

function stopPlayReverse():void {

    if (this.hasEventListener(Event.ENTER_FRAME)) {

        this.removeEventListener(Event.ENTER_FRAME, playReverse);

    }

}

HTML5 so far:

this.stop();

this.mc_play.stop();   

var frequency = 10;

stage.enableMouseOver(frequency);

this.mc_play.addEventListener("mouseover", fl_MouseOverHandler.bind(this));

function fl_MouseOverHandler()

{

    this.mc_play.play();   

}

var frequency = 10;

stage.enableMouseOver(frequency);

this.mc_play.addEventListener("mouseout", fl_MouseOutHandler.bind(this));

function fl_MouseOutHandler()

{

    this.addEventListener(Event.ENTER_FRAME, playReverse, false, 0, true);

}

function playReverse(e:Event):void {

    if (this.mc_play.currentFrame == 1) {

        stopPlayReverse();

    } else {

        this.mc_play.prevFrame();

    }

}

function stopPlayReverse():void {

    if (this.hasEventListener(Event.ENTER_FRAME)) {

        this.removeEventListener(Event.ENTER_FRAME, playReverse);

    }

}

Thanks for your help

[kglad]

there's no enterframe in createjs and you have duplicate code.

use the ticker class instead of trying to use as3's enterframe, EaselJS v0.8.2 API Documentation : Ticker  and remove the duplicate code frequency stage.enable... code.

[epistel]

Hy there

Many thanks for your answer.

Unfortunately I do not understand the tick class 100%.

If I get you wright I use the ticker class as an eventlistener.

But how do I track the mouseover and mouseout?

[epistel]

Hi Again

Many thanks again.

I believe I figured out the Tick class.

But I still have problem to track the mousevent. Or better saying the replay function.

Here's the code:

this.stop();

this.mc_play.stop();   

createjs.Ticker.addEventListener("tick", handleTick);

function handleTick(event) {

     // Actions carried out each tick (aka frame)

     if (!event.paused) {

         // Actions carried out when the Ticker is not paused.

     }

}

stage.enableMouseOver(handleTick);

this.mc_play.addEventListener("mouseover", fl_MouseOverHandler.bind(this));

function fl_MouseOverHandler()

{

    this.mc_play.play();   

}

this.mc_play.addEventListener("mouseout", fl_MouseOutHandler.bind(this));

function fl_MouseOutHandler()

{

    this.addEventListener(Event.ENTER_FRAME, playReverse, false, 0, true);

}

function playReverse(event){

    if (this.mc_play.currentFrame == 1) {

        stopPlayReverse();

    } else {

        this.mc_play.prevFrame();

    }

}

function stopPlayReverse(){

    if (this.hasEventListener(Event.ENTER_FRAME)) {

        this.removeEventListener(Event.ENTER_FRAME, playReverse);

    }

}

[kglad]

you still have enterframe code which will prevent your js from executing and your ticker code isn't doing anything.

[ClayUUID]

There actually is an equivalent of onEnterFrame in Canvas mode--

this.timeline.addEventListener("change", changeHandler);

[Colin Holgate]

That would be a neat thing, but I have two questions:

The documentation seemed to imply that change was fired when an object changed parents. Is the same word used for the different purpose of knowing when the timeline has changed in any way at all? Including if nothing has visibly changed, just that time progressed?

If the timeline change does really work, does it fire when the timeline has changed, or when it's about to change? If that is the case then it's the same as onExitFrame and not onEnterFrame.

[ClayUUID]

You're talking about DisplayObject events. The timeline isn't a display object, so there's no reason it can't use the same event string as some other unrelated class.

As for your other questions, all the documentation says is it's "Called whenever the timeline's position changes." This is the code that dispatches the event:

p.setPosition = function(value, actionsMode) {
    var t = this._calcPosition(value);
    var end = !this.loop && value >= this.duration;
    if (t == this._prevPos) { return end; }
    this._prevPosition = value;
    this.position = this._prevPos = t; // in case an action changes the current frame.
    for (var i=0, l=this._tweens.length; i<l; i++) {
        this._tweens.setPosition(t, actionsMode);
        if (t != this._prevPos) { return false; } // an action changed this timeline's position.
    }
    if (end) { this.setPaused(true); }
    this.dispatchEvent("change");
    return end;
};

Take that as you will.

[epistel]

Many thanks for that.

I think I got this now.

So far everything works. Meaning movie plays on mouseover and rewind and mouseout.

Last thing I do not manage is to stop the playreverse function.

Any suggestion?

Code:

this.stop();

this.mc_play.stop();   

createjs.Ticker.addEventListener("tick", handleTick);

function handleTick(event) {

     // Actions carried out each tick (aka frame)

     if (!event.paused) {

         // Actions carried out when the Ticker is not paused.

     }

}

stage.enableMouseOver("tick");

this.mc_play.addEventListener("mouseover", fl_MouseOverHandler.bind(this));

function fl_MouseOverHandler()

{

    this.mc_play.play();   

}

this.mc_play.addEventListener("mouseout", fl_MouseOutHandler.bind(this));

function fl_MouseOutHandler()

{

    this.addEventListener("tick", playReverse.bind(this));

    //alert("Mout");

}

function playReverse(){

    if (this.mc_play.currentFrame == 1) {

        stopPlayReverse();

    } else {

        var frameNumber = this.mc_play.currentFrame - 1;

        this.mc_play.gotoAndStop(frameNumber);

    }

}

function stopPlayReverse(){

        this.removeEventListener("tick", playReverse.bind(this));

}

[kglad]

use:

this.stop();

this.mc_play.stop();   

var playReverseF = playReverse.bind(this)

/*this isn't doing anything. comment it out or remove it

createjs.Ticker.addEventListener("tick", handleTick);

function handleTick(event) {

     // Actions carried out each tick (aka frame)

     if (!event.paused) {

         // Actions carried out when the Ticker is not paused.

     }

}

*/

stage.enableMouseOver("tick");

this.mc_play.addEventListener("mouseover", fl_MouseOverHandler.bind(this));

function fl_MouseOverHandler()

{

    this.mc_play.play();   

}

this.mc_play.addEventListener("mouseout", fl_MouseOutHandler.bind(this));

function fl_MouseOutHandler()

{

    this.addEventListener("tick", playReverseF);

    //alert("Mout");

}

function playReverse(){

    if (this.mc_play.currentFrame == 1) {

        stopPlayReverse();

    } else {

        var frameNumber = this.mc_play.currentFrame - 1;

        this.mc_play.gotoAndStop(frameNumber);

    }

}

function stopPlayReverse(){

       this.removeEventListener("tick", playReverseF);

}

[epistel]

Many thanks for your support.

But this does not work if I try. Both functions PlayReverse and stopPlayReverse remains activ if I test them with alert.

What do I wrong?

[epistel · Accepted solution]

I finally found the solution.

It might be that it's not the sweetest solution but I am happy that it works.

Just in case somebody of you need the same here the code:

this.stop();

this.mc_play.stop();   

var playReverseF = playReverse.bind(this);

var playForwardF = playForward.bind(this);

var fl_MouseOutHandlerF = fl_MouseOutHandler.bind(this)

stage.enableMouseOver("tick");

this.mc_play.addEventListener("mouseover", fl_MouseOverHandler.bind(this));

function fl_MouseOverHandler()

{

    this.removeEventListener("tick", playReverseF);

    this.addEventListener("tick", playForwardF);

}

function playForward(){

        if (this.mc_play.currentFrame == 75) {

            this.removeEventListener("tick", playForwardF);

           } else {

        var frameNumber = this.mc_play.currentFrame + 1;

        this.mc_play.gotoAndStop(frameNumber);

        //alert(frameNumber);

    }   

}

this.mc_play.addEventListener("mouseout", fl_MouseOutHandlerF);

function fl_MouseOutHandler()

{

    this.removeEventListener("tick", playForwardF);

    this.addEventListener("tick", playReverseF);

    //alert("Mout");

}

function playReverse(){

    if (this.mc_play.currentFrame == 1) {

        this.removeEventListener("tick", playReverseF);

        //alert("rückwärts stop");

    } else {

        var frameNumber = this.mc_play.currentFrame - 1;

        this.mc_play.gotoAndStop(frameNumber);

        //alert(frameNumber);

    }

}