Skip to main content
N
nzb17299
Known Participant
July 5, 2018
Answered

Animate CC HTML5 Canvas MouseOver Stop Animation, MouseOut Start Animation

  • July 5, 2018
  • 2 replies
  • 4599 views

Hello!

I have an animation on the timeline, and on the top right corner of the Canvas there is an Asterisk, which is a Button symbol and it shows a Legal Text when you hover over it.

Is there any solution to stop the movement of this Legal text when I move the mouse over the Legal Text, and when I move it back over the Asterisk sign, the Legal text continues to scroll up.

Then when I move the mouse out of the Canvas, the Legal Text should disappear and we should see the main timeline again.

I have uploaded my example file here: MEGA

Thank you very much in advance,

Peter

This topic has been closed for replies.
Correct answer JoãoCésar17023019

Hi.

Here is:

Legal_Text_MouseOver_640x360_JC.zip - Google Drive

For the asterisk, I used two different hit areas inside the button.

For the text to be paused on mouse over, my workaround was to check for the mouse position because it seems Movie Clips inside of buttons generated by Animate cannot receive mouse events or something like this.

if (!stage.hasEventListener("stagemousemove"))
{
     stage.on("stagemousemove", function(e)
     {
          if (e.stageX / stage.scaleX < 600) // the x position here is being divided by the stage scale to take into account responsive settings
               this.stop();
          else
               this.play();
     }, this);
}

I hope this helps.

Regards,

JC

2 replies

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community ExpertCorrect answer
Community Expert
July 10, 2018

Hi.

Here is:

Legal_Text_MouseOver_640x360_JC.zip - Google Drive

For the asterisk, I used two different hit areas inside the button.

For the text to be paused on mouse over, my workaround was to check for the mouse position because it seems Movie Clips inside of buttons generated by Animate cannot receive mouse events or something like this.

if (!stage.hasEventListener("stagemousemove"))
{
     stage.on("stagemousemove", function(e)
     {
          if (e.stageX / stage.scaleX < 600) // the x position here is being divided by the stage scale to take into account responsive settings
               this.stop();
          else
               this.play();
     }, this);
}

I hope this helps.

Regards,

JC

    N
    nzb17299Author
    Known Participant
    July 11, 2018

    Hello JC, thank you very much, thats exactly what I wanted to achieve! I owe you a beer

    Thank you!
    Peter

      JoãoCésar17023019
      Community Expert
      JoãoCésar17023019Community Expert
      Community Expert
      July 11, 2018

      Haha! You're welcome!

      ankushr40215001
      ankushr40215001
      Inspiring
      July 6, 2018

      Hey Peter,

      I am sure weather my answer matches your query as I have just started learning AS3 and JS.

      However, What I understood from your query is you want an even by which when you do MouseOver on asterisk the legel  text will start flowing upward.

      Then if you move your mouse over the text from asterisk the flowing the text should pause there, and resume when you again MouseOver on asterisk correct?

      I did some research on internet and got few links below which I think comes closer to what you are looking for.

      I hope this helps, and also invite other experts in community to chime in with their tips and tricks.

      Thanks!

      Ankush

      N
      nzb17299Author
      Known Participant
      July 9, 2018

      Hello Ankush, thank you very much. Yes I also found these forums before i published my question. I am not an expert in ActionScript, and however I tried to implement these codes, I failed. Maybe a small modification would solve my problem, I just dont know where and how to modify the code.

      Thank you,

      Peter

      ankushr40215001
      ankushr40215001
      Inspiring
      July 9, 2018

      Thanks for the information Peter,

      I will try to get round someone who is extremely good at coding.

      Thanks,

      Ankush

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices