Mouse Down, Mouse Release Button Code HTML5 Canvas

Question

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.

kglad · Accepted Answer

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

}

Nick Gioia · Answer

/* Mouse Click EventClicking 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}

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded