Click and click on & keep in html5 canvas button

Hello
I am trying to create a scenario where if I click a button perform a function, but if I click and hold (aka long press) then the service can continue to run as long as I am holding down the button. I have done in building 2 (as below), want to replicate in html5 canvas.


Please help me out here.

See you soon...

launch ticker loop that calls your function on mousedown and stop the loop on mouseup.

Tags: Adobe Animate

Similar Questions

  • Several ' click is needed with HTML5 Canvas script

    I'm learning the script in the HTML5 Canvas, having recently changed dashboard animate and, before AS3

    I have two buttons and I created a simple condition to detect the alpha value of the STM, control buttons, so that the correct MC can be alpha fainted faded and the new faded faded on. The code works, except that:

    on the first click, the MC fades on correctly, the second click on another button takes 2 clicks, and each requires more clicks on the same key. Can someone explain and give me a way to fix this oddity.

    Thanks in advance!

    That's what I have:

    THE STATES OF LOAD

    this.circleGreen_mc.alpha = 0;

    this.circleRed_mc.alpha = 0;

    this.circleTeal_mc.alpha = 0;

    BUTTON GREEN

    This.green_btn.addEventListener ("click", greenClick.bind (this));

    function greenClick() {}

    FADE IN

    this.addEventListener ('check', fadeIn.bind (this));

    function fadeIn() {}

    this.circleGreen_mc.alpha += 0.1;

    }

    Fade OUT

    If (this.circleRed_mc.alpha == 1); {

    this.addEventListener ('check', fadeOut.bind (this));

    function fadeOut() {}

    this.circleRed_mc.alpha-= 0.1;

    }

    }

    Fade OUT

    If (this.circleTeal_mc.alpha == 1); {

    this.addEventListener ('check', fadeOut.bind (this));

    function fadeOut() {}

    this.circleTeal_mc.alpha-= 0.1;

    }

    }

    }

    RED BUTTON

    This.red_btn.addEventListener ("click", redClick.bind (this));

    function redClick() {}

    FADE IN

    this.addEventListener ('check', fadeIn.bind (this));

    function fadeIn() {}

    this.circleRed_mc.alpha += 0.1;

    }

    Fade OUT

    If (this.circleGreen_mc.alpha == 1); {

    this.addEventListener ('check', fadeOut.bind (this));

    function fadeOut() {}

    this.circleGreen_mc.alpha-= 0.1;

    }

    }

    Fade OUT

    If (this.circleTeal_mc.alpha == 1); {

    this.addEventListener ('check', fadeOut.bind (this));

    function fadeOut() {}

    this.circleTeal_mc.alpha-= 0.1;

    }

    }

    }

    /*

    BUTTON TEAL

    This.teal_btn.addEventListener ("click", tealClick.bind (this));

    function tealClick() {}

    }

    }

    */

    Well, then, if I did what I guess you do, I would like this:

    var i;
    var curBtn;
    var circles = [this.circleRed, this.circleGreen, this.circleBlue];
    var buttons = [this.btnRed, this.btnGreen, this.btnTeal];
    var items = circles.length; // assume same number of buttons and circles
    
    // initialize things
    for (i = 0; i < items; i++) {
        circles[i].alpha = 0;
        buttons[i].btnId = i;
        buttons[i].addEventListener("click", buttonClickHandler.bind(this));
    }
    
    // handler for all button clicks
    function buttonClickHandler(evt) {
        var i;
        var btn = evt.target.btnId;
        if (btn == curBtn) {
            return;
        }
        curBtn = btn;
        for (i = 0; i < items; i++) {
            if (i == btn) {
                createjs.Tween.get(circles[i], {override:true}).to({alpha:1}, 500);
            }
            else if (circles[i].alpha > 0) {
                createjs.Tween.get(circles[i], {override:true}).to({alpha:0}, 500);
            }
        }
    }
    
  • Adobe animate HTML5 Canvas button to connect to an HTML document in the same folder

    I tried to adapt the script to post a link in a page web (works great for absolute links), to link a button to a document html within the same folder structure using this:

    This.kenny2_btn.addEventListener ("click", fl_ClickToGoToWebPage_7);

    function fl_ClickToGoToWebPage_7() {}

    Window.Open ("accountInfo/accountinfo.html", "_blank");

    }

    No luck. Any suggestions?

    Try:

    This.kenny2_btn.addEventListener ("click", fl_ClickToGoToWebPage_7);

    function fl_ClickToGoToWebPage_7() {}

    Window.Open ("./accountInfo/accountinfo.html", "_blank");

    }

  • gotoAndPlay ("label") going on at different times of second click HTML5 canvas

    I have a very strange problem, I can't seem to understand.

    I work in CC animate with a HTML5 canvas.  I made a simple interactive slideshow that a user can jump around in.  Instead of going to the chassis numbers, I use labels for each button.  My key codes look like this:

    This. SL01_01But.addEventListener ("click", fl_ClickToGoToAndPlayFromFrame_2.bind (this));

    function fl_ClickToGoToAndPlayFromFrame_2()

    {

    createjs. Sound.Stop ();

    this.gotoAndPlay ("Slide02");

    }

    I have to stop the sound, then go and play an image tag.  It works on the first click, however, if the user sees this new framework, on the second click goes to the next section (the one after the label).  For the life of me I can't understand why.  Any ideas?

    So what you see is expected.

    you will stop on Slide02.  and then a gotoAndPlay will leave Slide02 and get arrested on the following image, before he gets to Slide02 again.

    That is to say, your gotoAndPlay runs and then the this.stop () runs in the Slide02 more 1 frame.

    to remedy this, use this.gotoAndStop ('Slide02') for not going out when rerun.  But if you really want to get out and then re-enter that govern when you could use:

    this.gotoAndStop(this.currentFrame+1);

    this.gotoAndStop ('Slide02');

    Any reason you have to want to do this is probably better handled by other code.

  • HTML5 Canvas Createjs mouse button and the mouse on

    Beginner to the CC Flash using HTML5 Canvas via CreateJs.

    Features I am building mouse over and click interaction .


    Click on the button seems to work but the mouse and off does not work.

    I used the MovieClip then try code below.


     

     

     

     

    var stage = new createjs.Stage("canvas");

    stage.canvas.style.cursor = "pointer";

     

     

     

     

    var frequency = 3; 

    stage.enableMouseOver(frequency); 

     

     

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

    createjs.Touch.enable(stage);

     

     

     

     

    this.cta1.addEventListener("click", handlerMethod.bind(this));

    this.cta1.mouseChildren = false;

     

     

    function handlerMethod(event) {

      console.log("Clicked");

    }

     

     

    this.cta1.addEventListener("mouseover", MouseOverhandler.bind(this));

    function MouseOverhandler() {

      this.cta1.gotoAndSop("mOver");

     

     

     

     

    }

     

     

     

     

    this.cta1.addEventListener("mouseout", MouseOuthandler.bind(this));

    function MouseOuthandler() {

      this.cta1.gotoAndSop("mOut");

     

     

    }

     

     

     

     

     

     

     

     

     

    Question I'm facing

    MovieClip cursor doesn't display not pointer

    Mouse does not work Cta1 MovieClip doesn't go to the label "mOver".

    Download FLA via WeTransfer

    Thank you.

    Mouse interaction

    canvas.addEventListener ('mouseover', over.bind (this));

    function over()

    {

    this.cta.gotoAndPlay ("over");

    }

    canvas.addEventListener ("mouseout/mouseouthandler()", out.bind (this));

    function out()

    {

    this.cta.gotoAndPlay ("out");

    }

    With just a button symbol gives you a slider. No necessary framescript.

  • Somehing called "Simple click Admin" keep asking me password.

    Suddenly, I can't load new software after my user account f all of a sudden I can't load new software after spending my administrator to the standard user account. Something called "Simple click Admin" keep asking me the PW, and I have no idea what it is.  Help! Admin standard ROM. Something called "Simple click Admin" keep asking me the PW, and I have no idea what it is.  Help!

    Hi pcmcdonald,

    What software are you trying to load?

    We will follow these steps & check if it helps:

    (a) you can create a new user account with administrator privileges and check if the problem persists:

    Create a user account

    (b) if the problem does not persist in the new user account, you can access the link below and follow the steps to fix a corrupted user profile:

    http://Windows.Microsoft.com/en-us/Windows-Vista/fix-a-corrupted-user-profile

    Hope the helps of information.

  • How to call a function of my html code to js created by animate cc, I had used 'exportRoot.functionName' and said this function in my document of flash pro with html5 canvas, but now on cc animate this way doesn't work.

    My html code created by animate cc was changed to php for me, because I send and received variables via get and catch the cookies and much more. the function that I used to call function on my .fla of the document is passId() and it worked before when animate was Flash pro with html5 canvas.

    Captura de pantalla 2016-09-27 a las 12.19.59 p.m..png

    And function of .fla, I frame_0 only assign to the variable "id_usuario", this is the feature on fla:

    Captura de pantalla 2016-09-27 a las 12.20.12 p.m..png

    First of all, the title of your thread is horrible. Titles are supposed to be securities, not paragraphs.

    As for your problem, you are probably trying to call catchIdUser before it is defined. handleComplete() is raised when the content is ready to run. He did not actually yet. I guess you should have script code call the function of window parent, not the other way around.

  • Drag and Drop for HTML5 Canvas

    Why can I use the drag and drop snippets for ActionScript 3.0 document, but when I try to do for a HTML5 canvas document that is not yet show the object instance in the browser?

    At the risk of pointing out the obvious: because the HTML5 documents do not work with ActionScript.

  • How can I add a "clickTAG" and the loop 3 times to a banner made with flash cc2014 html5 canvas?

    I made a banner using flashcc2014 using the html5 canvas. I don't know how to do 3 times using javascript or by adding the normal "clickTAG" banners need to loop.

    Any help appreciated.

    Thank you

    Rodrigo

    the necessary js is the same as, except that you do not type the variables and that precede you them "this."

    last image in loop:

    {if(!this.alreadyExecuted)}

    this.alreadyExecuted = true;

    this.loopNum = 1;

    } else {}

    this.loopNum ++;

    {if(this.loopNum==3)}

    This.Stop ();

    }

    }

  • My XI Acrobat Standard 11.0.09 lost menu bar (F9) and crazy jumps full screen, losing windows buttons high bar, passing just above the menu bar with the mouse cursor, without clicking.

    My XI Acrobat Standard 11.0.09 lost menu bar (F9) and crazy jumps full screen, losing windows buttons high bar, passing just above the menu bar with the mouse cursor, without clicking.

    Yes, it's important somehow. Kapersky broke it somehow and fixed. http://Forum.Kaspersky.com/index.php?showtopic=307391&HL=Adobe

  • HTML5 canvas with text scrollable and responsive

    I need to make a text box, enter in a dialogue bubble, using flash to html5 canvas. I had a div with domelement. This div works perfectly, placed above the dialogue bubble, as long as the page is displayed in the original format. but displayed on a device more small everything in resizes it canvas element for adapt, the div overlay does not work. I tried a few viewport meta-balises different, but none so far have set. any help or advice appreciated.

    position with regard to something resizes it or position it using javascript.

  • I desperately need a preloader to my cover page of Flash and HTML5 Canvas

    I tried to advertise on odesk. I contacted the web professionals. Nobody seems to know how to make a preloader to HTML5 canvas!

    I put hours of work into this HTML5 canvas: http://erikaviktor.com/ , but it takes a while to load. Several seconds. I really need a preloader on the site but I can't figure out how. I'm totally out of my depth. I don't know what to do. I'm desperate. Even a false preloader would agree. As long as he didn't sit on the page while him remains loaded.

    Can anyone help? Point me in the right direction? I'm now 10 hours on this problem. I just need to revive in Edgeanimate? I think they prechargeurs HTML5? But who would end of work week, I did not.

    If I seem a bit desperate, it's because I am!

    Adobe: why it is not built into Flash?

    I found an old thread that describes a way to implement a loading progress bar.

    [CC HTML5/Flash] Preloader?

  • "mouseup" does not not in HTML5 canvas

    Hello

    I created a HTML5 canvas where the main timeline is supposed to play so that a button is pressed and stops when the button is released. To do this, I need to stop the "tick" on mouseup event. However, mouseup does not work. I tried to use mouseup on the btn_plus.addEventListener as well (only for debugging purposes), but it does nothing. "mousedown" and "click" works as expected.

    (The next step is to create a back button with similar functionality, this is why I do not use the play/stop to control the timeline.)

    Any input would be much appreciated.

    Thank you.

    This.Stop ();

    This.btn_plus.addEventListener ("mousedown", keyPlus.bind (this));      increase button. "mouseup" does not work here either.

    function keyPlus() {}

    this.addEventListener ('check', increaseDown.bind (this));

    this.removeEventListener ("mouseup", increaseDown.bind (this));      //Trying to remove the ticker here - does not

    }

    function increaseDown() {}

    this.gotoAndStop (this.timeline.position + 1); magic happening here

    Alert ('increase pressed');

    }

    Try, "pressup.

  • Radio button in html5 canvas document.

    Hi, is there a way to create radio buttons in the HTML5 canvas document in lively cc.
    Thank you.

    Create your own radio button movieclip with two frames that contain a screen selected and deselected.

    Add mousedown listeners to each instance that deselects all those of the same group, and then selects clicked on one.

  • How to disable the cc button animate html5 canvas files?

    Hello!

    How to disable the cc button animate html5 canvas files?

    ex:

    this.mc.on('click',function(){alert('this')})
    this.mc.enabled=false
    

    question 1:

    When you click on the 'mc', it always run. How can I control the button of the deactivate and activate?

    question 2:

    The mc is not an image, it's a movieclip. How can I change the colors of the mc? example: default of the mc color red, I want to click change black!

    Thank you!

    use addEventListener instead of 'on '.  You can then use removeEventListener to disable.

    or you can intemperies to use 'on' using the mouseEnabled property to disable this.mc:

    this.mc.mouseEnabled = false;

Maybe you are looking for