Is there a button event versus a mouse event in html5 canvas

[tnbnicer]

Hi.

Using this code, I create an interactive button in Canvas:

     new cjs.ButtonHelper(thisring, 0, 1, 2, false, new lib.ring(), 3);

The object instance "thisring" is the button. When I move the mouse over the button, the pointer changes to a hand finger, like it should.

The object instance "thisring" however itself moves. When the button goes under the mouse pointer, it does not change to a hand finger, although the button is at this point clickable. The mouse has to move to change the pointer's appearance.

In Flash the mouse event functionality worked even on moving buttons, ie.: button moves under pointer -> pointer changes.

In Canvas this does not seem to be the case. Is there some way of associating the button with the event instead of the mouse?

Note: It could be a browser issue, because in conventional HTML buttons don't move. Browsers have yet to adapt to Canvas, where buttons can move.

If there is a fix, it probably has to be a workaround. My JavaScript is a bit rusty, but I don't think I've heard of a button event.

[kglad]

why does thisring move?

[tnbnicer]

It moves in small steps. A set of random x y coordinates are calculated and the object drifts there at .1 pixels per move, so if the pointer happens to be in its path, it slides under the pointer. To stop and start the motion you can click on thisring. thisring is a circle that has an alpha transparency of 0.01. (Invisible objects are unclickable.) The thisring object is in front of a round clock that is visible and moves in sync.

Mouse pointer appearance in Flash also responds to "this.buttonMode = true". An equivalent variable for Canvas would be nice.

[kglad]

this.cursor='pointer';

[ClayUUID]

Why are you using ButtonHelper to force a movieclip to act like a button instead of just creating an actual button clip?

[tnbnicer]

The moving clock is the only available object. Within Flash it made sense. Click to stop and start the motion. Only now in HTML the object doesn't behave as a button. (Misbehaves.)

Actually, the clock is a collection of movie clips. Clock hands, clock face, etc. The "thisring" object serves to make the clock clickable. I'm not sure how you'd turn it into a button. To all intents it is a button, a moving one.

The actual code has this:

     lib.ring = function(mode,startPosition,loop) {
      this.initialize(mode,startPosition,loop,{});

     // Layer 1
      this.shape = new cjs.Shape();
     this.shape.graphics.f("rgba(252,255,214,1)").s().p("AnGQ2QjShZiiiiQiiiihZjSQhbjZAAjuQAAjtBbjZQBZjSCiiiQCiiiDShZQDZhbDtAAQDuAADZBbQDSBZCiCiQCiCiBZDSQBbDZAADtQAADuhbDZQhZDSiiCiQiiCijSBZQjZBbjuAAQjtAAjZhbg");

     this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));

}).prototype = getMCSymbolPrototype(lib.ring, new cjs.Rectangle(-116.9,-116.9,233.9,233.9), null);

     // ring

     this.ring = new lib.ring();

     this.ring.name = "ring";

     this.ring.parent = this;

     this.ring.alpha = 0; // invisible instance

     var thisring = this.ring;

     // timeline functions:

     function initfunction() {

     if (count == stopit) {

     new cjs.ButtonHelper(thisring, 0, 1, 1);

     thisring.addEventListener("mouseout", handleOut);

     thisring.addEventListener("mouseover", handleOver);

     thisring.addEventListener("click", handleClick);

     thisring.addEventListener("mouseup", handleRelease);

     clearInterval(initI); }

      }

     var initI = setInterval(initfunction, 33);

I certainly would appreciate code to fix the mouse pointer.

[tnbnicer]

I forgot to mention: "thisring" ... at first it is only a library shape, when the frame starts. I don't want it to be clicked then. After a few ticks on the timeline it becomes a button with the ButtonHelper, ready to be clicked. I tried to make "thisring" a button from the outset, but it made no difference to the pointer behavior.

From Flash I converted it as a movie clip, and now I have converted it to Canvas as a button too, following your suggestion. Still the problem persists. I am open to suggestions.

You must attach this.cursor='pointer' to a trigger, or put differently, something must trigger the pointer appearance change. That something is the button position, which fails to trigger the behavior unfortunately.