HTML5 canvas - hold feature

Hello

I want a function to run continuously (in this case, the reading of the timeline) so that a button is pressed, not just once.

I'm having a hard time to stop this function. I tried to remove the eventListener to 'play' on the release of mouse (pressup), without a bit of luck.

Tried to add a separate (with a separate eventListener for the same button) function with a simple this.stop ();  still no luck.

I found a similar feature with some other syntax (e.g. the Actionscript 3 - AS3 code run continuously while holding a key - Air for iOS/Android - Stack Overflow ) but nothing for HTML5.

Can someone point me in the right direction here?

Thank you.

------------------

This.Stop ();

This.btn_plus.addEventListener ("mousedown", keyPlus.bind (this)); increase press the button

This.btn_plus.addEventListener ("pressup", stopAll.bind (this)); increase the release of button

function keyPlus() {//increase main function

this.addEventListener ('check', increaseDown.bind (this)); reading image by image, is not just once

this.removeEventListener ("pressup", increaseDown.bind (this)); Stop the tick - does not

}

stopAll() {} function

This.Stop ();

}

function increaseDown() {}

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

Alert ('increase pressed');

}

You're going to need three event listeners all at the same time running. One to press the button, a button, and the other to listen to the Ticker.

  • The press event listener should set a Boolean variable overall true indicating that the mouse button is pressed.
  • The postback event listener must set the variable to FALSE, indicating that the mouse button was not pressed.
  • The Ticker listener should use this variable to determine if it does everything it should do that the button is pressed.

Note that this is complete overkill if all you want to do is make an advance of chronology. In this case you would give the timeline just a play() press order and a stop() on release order.

Tags: Adobe Animate

Similar Questions

  • 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.

  • problem with animated mask of targeting to HTML5 canvas

    I have a movieclip inside with some animation and wants the image of mask with this movieclip but in html5 canvas target, this method does not work, target swf.

    I'm masking of timeline

    what I am doing wrong or this is the bug?

    I just tested out and seen this error in the output panel:

    Feature not supported: symbols several frames in masks.

    It looks at the canvas, you can only animate your mask on the main timeline, but not inside the symbol of the mask.

  • 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.

  • Animated Navigation CC HTML5 Canvas issues

    I use Adobe animate CC HTML5 Canvas.

    I use some variables and STOP to navigate through the timeline, as if they were pages.

    Go forward through the timeline gives me no problem, however, when I got back in the timeline (from frame_1 to frame_0) when I ask many interactions on the previous page don't work (visibility and hover button) and then when I try to go forward again it does not stop on the frame more.

    An alert using, I found that he jumps in the course although I stops.

    Can someone help me please? I can send the files together if necessary.

    Here is my code for the navigation of the page:

    This.Stop ();

    SECTION INFO & NAVIGATION DRIVE

    VARIABLES FOR NAVIGATION

    var frameNumber = this.currentFrame;

    nextFrame var = frameNumber + 1;

    prevFrame var frameNumber = - 1;

    DISPLAYS CURRENT PAGE NUMBER

    var text = this.currentFrame.toString ();

    var thisText = "Page" + displayText;

    createText var is new createjs. Text (thisText, "" BOLD "44px Myriad Pro", "White");

    this.addChild (createText);

    TEXT OTHER THAN THE WEIGHT/SIZE/COLOR/FONT STYLE

    createText.x = 98;

    createText.y = 1375;

    CLEARS THE PREVIOUS PAGE NUMBER BEFORE MOVING FRAMES

    this.next.addEventListener ("click", removePageNumberNext.bind (this));

    function removePageNumberNext()

    {

    this.removeChild (createText);
    this.gotoAndPlay (nextFrame);

    }

    this.prev.addEventListener ("click", removePageNumberPrev.bind (this));

    function removePageNumberPrev()

    {

    this.removeChild (createText);
    this.gotoAndPlay (prevFrame);

    }

    Hold up... you have the above reproduced code in each single frame? This would explain why your buttons are behaving strangely. Handlers on objects do not replace each other - they are cumulative. If you have only one set of buttons in nav for the entire timeline, you only need to assign handlers once at the beginning.

    Similarly, you should not create a textfield to display page in the code. You just create a dynamic textfield in the editor, name ('pageNum' or whatever), then update its content through the .text property.

    Assuming that you are using the frame 1 (0) to initialize and start your content on frame 2 (1) and have a next button called 'next', a previous page named 'prev' button and a textfield of page number named 'pageNum', all that exists throughout the entire timeline, you can use this code to control your page :

    _root = this; // global handle to root timeline for event listeners
    this._maxPage = _root.timeline.duration - 1; // total pages
    
    // event handlers
    this.navPrev = function() {
        var cur = _root.timeline.position;
        if (cur > 0) {
            _root.navToPage(cur - 1);
        }
    }
    
    this.navNext = function() {
        var cur = _root.timeline.position;
        if (cur < _root._maxPage) {
            _root.navToPage(cur + 1);
        }
    }
    
    // do navigation
    this.navToPage = function(p) {
        // set visibility of nav buttons
        this.prev.visible = p > 1;
        this.next.visible = p < this._maxPage;
        // update page counter
        this.pageNum.text = "Page " + p;
        // navigate
        this.gotoAndStop(p);
    }
    
    // assign event listeners
    this.prev.addEventListener("click", this.navPrev);
    this.next.addEventListener("click", this.navNext);
    
    // get the party started
    this.navToPage(1);
    
  • 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.

  • How to 'split' text mode 'HTML5 canvas "?

    'Split' option is greyed out in HTML5 canvas. Is it bug or feature? How break apart text or convert the text to a path access/plan?

    Thank you

    Hi Marek,

    In addition to the Typekit web fonts, Google fonts are now supported in HTML5 canvas documents in the last update of CC animate (15.2.1) comes out.

    See here: new feature summary (June and August 2016)

    By using the Google fonts to animate CC

    Update your copy of CC animate through the creative application of cloud and try it!

    Thank you!

    Mohan

  • I have a few questions about HTML5 Canvas that needs answer

    I intend to start developing games using Flash Pro CC soon and recently discovered on the feature of HTML5 Canvas. It's quite new to m, so I was curious to know certain things.

    1. What is the HTML5 Canvas and is commonly used to make games?

    2 should. what kind of code I use? (from my understanding, he uses Javascript)

    3 can be used to create complex games, let's say something like a Tower Defense, shooting or even multiplayer?

    4. the good tutorials on using the HTML5 Canvas game development? (preferably written)

    Thank you

    1. the HTML5 Canvas is the HTML5 Canvas. Flash uses an embedded CreateJS library version to handle it.

    2. it runs in the browser client-side then Yes, it uses JavaScript.

    3. of course, it can be used to create complex and multiplayer programs. Already used Google Maps? Google Docs? Those are all programmed in JavaScript.

    4 game in development is a subset of the programming. If you don't know JavaScript, then browse through thousands of tutorials available online.

  • Conversion of .fla in html5 Canvas - how 'start' to work again?

    I'm converting my old files, .fla to html5 Canvas and the published file (html5) autoplays. The old output (.swf) did not begin until the included button has been activated. How can I get this feature back (it was action script). I'm not very good with Flash so please explain for a dummy ;-)

    Thank you

    Hanna B

    For anyone following, this.stop () was the correct code to stop the animation, but the animation was all in a movieclip in a main scenario 1 frame. () This.stop had to go inside the movieclip.

  • [HTML5 Canvas] How to change the scene?

    Hello

    I have an animation created in a HTML5 Canvas document. When seen in the browser, it is displayed in the size of the document, which is not surprising, but what I want to do is display the full window size, scaling to fit. Basically, I'm looking for the equivalent AS3 scaleMode and align with the SWF in height and width to 100%. The publication settings is not all the options related to the scaling, so I don't know where to look. How should I do this?

    Thank you!

    -Aaron

    Hi all

    Sensitive scaling options are now part of the HTML5 canvas publication settings in the latest version of animate CC (2015.2)

    See here: new feature summary (June and August 2016)

    Creating ads with CC HTML5 animate: canvas reactivates the scale. Animate Adobe blog

    Update your copy of Animate through the creative application of cloud and try it now!

  • HTML5 canvas, animated during a cursor

    Hello everyone, my name is Etienne Deswattenne, I am a beginner flash of France so I apologize for my poor English, my question is this, how can we change the cursor to a symbol of the scene when the mouse is on another symbol? I have a 'this' problem I think

    Here's the code I sketched in HTML5 canvas:

    ========================================================

    Hello all, I do not understand how to use the keyword "this" pour run code of this fight, because the function is in another function so the 'this' don't be referred not to the same chose? I tried for 4 hours I found nothing, please help me!

    =========================================================

    frequency of var = 3;

    stage.enableMouseOver (frequency);

    this.zoneinterdite.addEventListener ('mouseover', fl_MouseOverHandler_17);

    function fl_MouseOverHandler_17()

    {

    internship. Canvas.style.Cursor = 'none ';

    this.movieClip_6.mouseEnabled = false;

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

    function fl_CustomMouseCursor_15() {}

    this.movieClip_6.x = stage.mouseX;

    this.movieClip_6.y = stage.mouseY;

    }

    }

    you have lost your reference to 'this' in fl_MouseOverHandler_17.  (and you should not the following named functions.)

    Try:

    frequency of var = 3;

    stage.enableMouseOver (frequency);

    this.zoneinterdite.addEventListener ('mouseover', fl_MouseOverHandler_17(this) .bind);

    function fl_MouseOverHandler_17()

    {

    internship. Canvas.style.Cursor = 'none ';

    this.movieClip_6.mouseEnabled = false;

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

    }

    function fl_CustomMouseCursor_15() {}

    this.movieClip_6.x = stage.mouseX;  Although these two lines will probably end your mouseover zoneinterdite

    this.movieClip_6.y = stage.mouseY;

    }

  • Animate CC (HTML5 Canvas) chronology cannot choose stream in properties &gt; Sync to sound

    Hello

    I have a problem. Animate CC (HTML5 Canvas) timeline is not Stream select Properties > Sync for the sound.

    This section examines passive. Why would it be.

    Thank you.

    Screen Shot 2016-10-03 at 11.39.44.png

    HTML5 Canvas only supports the synchronization of its event. You can use a document of ActionScript 3.0 for audio streams.

  • HTML5 Canvas examples/tutorials content scrolling?

    Since ScrollPane component is not supported in HTML5 Canvas of Animate mode, anyone know how to create scrolling content in other ways?  Online pointers to tutorials or examples or books is appreciated.

    you use something like:

    var m;

    var b;

    var tl = this;

    paramF (mask there, buttons parent there, is mask + mask height, height of parent y-buttons buttons parent + height of mask)

    TL.mask_mc.addEventListener ('pressmove', moveF);

    TL.mask_mc.addEventListener ('pressup', stopF);

    function moveF (e) {}

    {if (TL.mask_mc. HitTest (e.localX, e.localY))}

    buttons parent y = m * (e.localY + 40) + b;

    } else {}

    stopF (e);

    }

    }

    function stopF (e) {}

    TL.mask_mc. RemoveEventListener ('pressmove', stopF);

    TL.mask_mc.addEventListener ('pressmove', stopF);

    }

    function paramF(x1,y1,x2,y2) {}

    m =(Y1-Y2) /(x1-x2);

    b = y1 - m * x 1;

    }

  • HTML5 canvas settimeout problem

    Hello

    I have a problem with html5 canvas settimeout.

    I created a round drawing object, the instance name is ball. The following code

    Code:

    This.ball.x = 1000;

    setTimeout (calledFun, 500);

    function calledFun()

    {

    Alert ("fun called");

    This.ball.x = 100;

    }

    The function of this code is worked, alert view only. But ball x position not changed.

    So please help me

    Thanks in advance

    you have lost your reference to "this".  Try:

    var tl = this;

    This.ball.x = 1000;

    setTimeout (calledFun, 500);

    function calledFun()

    {

    Alert ("fun called");

    TL.ball.x = 100;

    }

  • Rendering of the HTML5 Canvas

    This is regarding the rendering of the scene animation HTML5 Canvas (animate CC).

    The rendering of the animation is slow on the Windows operating system. And rendering animation is not smooth on browser.

    Please provide any solution for this.

    Few things to note everything by publishing your files to HTML5 canvas target.

    1. the filters and effects of color on the symbols are very expensive by the calculation and are cached (automatically) while rendering. Try to reduce as much as possible these as they will cause the internal animation within any symbol of caching to freeze.

    2. try to use the Cache as Bitmap to the complex static vector shapes wherever possible.

    3 try to minimize acceleration in the classic tweens.

Maybe you are looking for

  • Engine run LabVIEW 6.0 will not power BKPrecision supply control.

    I created a test in Labview 6.0 program to control a power BKPrecision and measurement computing DAQ in our test system. I am able to control the two instruments in my PC that has Labview charged thereon. I created an executable file of the applicati

  • default audio playback device is grayed out

    IM on xp service pack 3. I have an e machines computer do not know is what motherboard or card sound. Ive ran to fix and updated drivers. Ive done a system restore and do anything and everything that has been suggested to me and nothing has helped. I

  • Computer hangs every 30 seconds in all programs

    My computer freezes every 30 seconds.  Sound stutters and hesitates the cursor.  Freeze only lasts for 1 second, but this is very embarrassing.  It happens in all programs and at all times.  I have tried several programs fix - it as advanced system o

  • BlackBerry Smartphones operating system Version number

    Trying to run my 8350i energy management application, but need to know the version number of the operating system. Have it's info. Located? The program only supports version 6.0 or higher. Thanks in advance!

  • TMS IS involved in a VCS database call

    Hi guys,. I am just geeting my head around such empty things, so please easy tale about me I was watching a call log FRO a call between a VC VC. And I saw these lines below. Can someone please clarify how the TMS is involved in the call flow. I can s