11 Replies Latest reply on Mar 7, 2017 7:16 AM by epistel

    URGENT html5 issue with mouseover, mouseout

    epistel Level 1

      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

        • 1. Re: URGENT html5 issue with mouseover, mouseout
          kglad Adobe Community Professional & MVP

          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.

          2 people found this helpful
          • 2. Re: URGENT html5 issue with mouseover, mouseout
            epistel Level 1

            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?

            • 3. Re: URGENT html5 issue with mouseover, mouseout
              epistel Level 1

              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);

                  }

              }

              • 4. Re: URGENT html5 issue with mouseover, mouseout
                kglad Adobe Community Professional & MVP

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

                1 person found this helpful
                • 5. Re: URGENT html5 issue with mouseover, mouseout
                  ClayUUID Adobe Community Professional

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

                   

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

                  • 6. Re: URGENT html5 issue with mouseover, mouseout
                    Colin Holgate MVP & Adobe Community Professional

                    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.

                    • 7. Re: URGENT html5 issue with mouseover, mouseout
                      ClayUUID Adobe Community Professional

                      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[i].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.

                      • 8. Re: URGENT html5 issue with mouseover, mouseout
                        epistel Level 1

                        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));

                          

                        }

                        • 9. Re: URGENT html5 issue with mouseover, mouseout
                          kglad Adobe Community Professional & MVP

                          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);

                            

                          }

                          • 10. Re: URGENT html5 issue with mouseover, mouseout
                            epistel Level 1

                            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?

                            • 11. Re: URGENT html5 issue with mouseover, mouseout
                              epistel Level 1

                              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);

                                  }

                              }