Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Mouse Down, Mouse Release Button Code HTML5 Canvas

New Here ,
Jun 28, 2022 Jun 28, 2022

Hello, 

I am trying to create an interactive airplane panel and one of the buttons, when you hold the button down, it does different stuff and when you release it, it goes back to the original state.  I was able to do this years ago in Edge Animate - when you hold down the mouse click, it will do different stuff like the guages move and lights flash and when I release that mouse click, it will go back to the original state and no longer do all that.  However, since Edge Animate is no longer available, I need to do this in Animate CC.  I figured I would create a movie clip with the different stuff happening but I'm not sure how to go about the button itself and how to code it for HTML5 Canvas.  This has been an issue I have been trying to solve for months and it is for work.

TOPICS
Code , How to
933
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Jun 28, 2022 Jun 28, 2022

you can use the "mousedown" and "pressup" events.  eg, 

 

this.button1.addEventListener("mousedown",downF.bind(this));

this.button1.addEventListener("pressup", upF.bind(this));

 

function downF(e){

// do whatever

}

function upF(e){

// do whatever else

}

Translate
Community Expert ,
Jun 28, 2022 Jun 28, 2022

you can use the "mousedown" and "pressup" events.  eg, 

 

this.button1.addEventListener("mousedown",downF.bind(this));

this.button1.addEventListener("pressup", upF.bind(this));

 

function downF(e){

// do whatever

}

function upF(e){

// do whatever else

}

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 29, 2022 Jun 29, 2022


/* Mouse Click Event
Clicking on the specified symbol instance executes a function in which you can add your own custom code.

Instructions:
1. Add your custom code on a new line after the line that says "// Start your custom code" below.
The code will execute when the symbol instance is clicked.
*/

this.button.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()
{
// Start your custom code
// This example code displays the words "Mouse clicked" in the Output panel.
alert("Mouse clicked");
// End your custom code
}

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 29, 2022 Jun 29, 2022
LATEST

@Nick Gioia 

 

(your post, this time, is not helpful. did you misread?)

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines