I have a project where I need to make flash movie as an interactive game. Because, flash is already (or soon will be) obsolete for most of browsers, I've decided this game must be based on HTML5/JS. Because most of the graphics and animations are already done in this Flash movie (and I have its source), I'm developing it using Adobe Flash and CreateJS technology (HTML5 + Canvas + JS). So far, I like this solution pretty much, though I have an issue which I could not solve yet.
The game is a simple drag&drop matching game. The problem I have is shortly described in the question title and I will try to explain it here more detailed:
label.on('mousedown', function() {
//this.image.bg.gotoAndStop(2);
});
label.on('pressmove', function(evt) {
this.x = getStageX(evt.stageX);
this.y = getStageY(evt.stageY);
currentStage.setChildIndex(this, currentStage.getNumChildren() - 1);
stage.update();
});
label.on('pressup', function(evt) {
console.log('Hi! I'm mouseup event!')
this.x = labelInitX;
this.y = labelInitY;
this.image.bg.gotoAndStop(0);
});
Above, you can see simplified 3 event handlers I use. Everything is working fine until I uncomment second line - //this.image.bg.gotoAndStop(2);. When I do this, the pressup event does not trigger mostly, which is rather strange, because some times it does trigger (2-3 times out of 10), so the label sticks with the pointer until I press the button again.
Is this some bug or I simply does not understand something about the CreateJS and its event handlers. I tried different combinations of this. Used click instead of pressup, placing this.image.bg.gotoAndStop(2); inside the pressmove handler. Replacing pressmove handler with the stage.on('stagepressmove', handler). None did not work. this.image.bg.gotoAndStop(2); - this thing simply updates the timeframe (change the background image of the label). I do can change this image programatically (without playing timeframes) and I'm almost sure that the issue will be fixes, though I'd like to understand for myself what is wrong here or what I'm doing wrong with the event handlers.
Another, less important thing, but would be useful to know is why when pressmove event is running, the CreateJS objects stop receiving event triggers about rollover or mouseover? In DOM, by default event bubbling is working until you stop it with stopPropagation. How does it work here with CreateJS? Seems that bubbling is simply turned off here by default. How can I turn it on?
I thought I might shed some light on what I think is going on.
The normal mouse events "click", "mouseup", "rollover", "rollout", etc all function by the stage determine what the "target" of the mouse event was by default the target is the lowest-level thing that is interacted with. If you contents change while the mouse is down, it will not count as the same target when the mouseup occurs. Since positions are not re-checked without moving the mouse, the mouseover, mouseout, rollover, and rollout events may function oddly as well.
Conversely, the "pressmove" and "pressup" events do not care what is under the mouse once something is pressed. The target will always be what was pressed, which allows you to move the mouse out of the object (or even remove it), and still receive events from it. This also ensures that you receive a pressup event even if you release outside the object.
As #RandyPrad mentioned, the hitArea may solve your issue. By specifying a hit area, you are overriding the contents of your clip, so your target should always be the container (MovieClip) instead of its contents. That way no matter what is pressed inside the movieclip, it is the same target when you release. You can also get the same effect using the mouseChildren property.
movieClip.mouseChildren = false;
Hope that helps!
Please check your hit area of the button.
i think that your are playing image inside the btn is animating
please use this link http://www.createjs.com/tutorials/Mouse%20Interaction/hitArea.html
Related
I have two shape at same position, not same color, and when i click over them, i want to fire click event on both, not just the first.
These two shapes are in the same container.
I have tried getObjectsUnderPoint() under stage.on("mousemove"), but this function increase my FPS (60 to 32~, and inside there are just a console.log), So it's not a good solution.
I tried the bubble, the useCapture, but i think it isn't what i want.
I just want to fire click on all element behind my mouse.
If someone have a solution, please.
There are a few points here:
EaselJS objects sort of work like HTML DOM Elements. If an element has a mouse handler on it it will block objects in other hierarchies below it from receiving the event. This is just how it works. The main difference is that if you don't have mouse events, then they are just ignored (like if you set the pointerEvents on an HTML element to none to have the mouse ignore it).
Your idea with getObjectsUnderPoint is what I would have recommended. Running any hit-test logic on mousemove is going to be expensive (mousemove fires a LOT, which is why we give the ability to throttle the typical mouseover check if you enableMouseOver on the stage).
A few things to optimize it:
Ensure you are using mode=2 on your getObjectsUnderPoint, which will only check objects with mouse listeners. This greatly reduces the overhead in checking. [docs]
Instead of checking the stage on your own mousemove event, set a flag to check it on tick. This throttles it to your Ticker FPS at least. You could also set an interval to check it even less often. It can create a little bit of a visible lag, but you can probably find a nice balance.
Reduce what is checked. If you have a container with your clickable elements in it, you can only check that object for mouse interaction.
If your objects are the exact same, you can also just trigger the click manually on the second item.
obj1.on("click", function(event) {
obj2.dispatchEvent(event);
});
I hope those approaches provide you a solution. Let me know if you have follow-up questions.
Cheers,
I have a large problem disabling a slider in LabVIEW. Here is my minimal example:
I have a simple Slider, which is disabled and grayed out if the value is higher than 5. Otherwise the Slider is enabled.
If I drag the slider higher than 5, the Slider gets grayed out. But I am still able to move the slider around and change the value. Only after I dropped the Slider, the Slider is disabled to use.
In my opinion, this is a large bug of LabVIEW. Is there any way to disable the Slider correct during drag?
Thank you for your answers!
Additional information:
Like I said, the snippet is only my minimal example to show the basic problem. In my application the following is happening:
I have s statemachine with a state that enables the Slider and a state that disables my Slider. The state can change every moment, so it´s possible, the user is using the slider at the moment of statechange --> moment of disabling. At this moment the slider should be disabled (it only gets grayed out) directly ... not after releasing it. So limiting the maximum is not real target. I want to prohibit all slider actions for a user.
"Link to question asked on NI Discussion Forums"
As suggested by Alexander_Sobolev on the NI forum (but I promise I thought of it independently!), you can end the slider drag by generating a mouse up event. On Windows you can do this with Simulate Mouse.vi from the NI site, which calls mouse_event from user32.dll:
Note that one of that VI's mouse position inputs is erroneously marked as 'Required'; I fixed that before creating the code above.
I do think this is a UI technique that should only be used if it's really justified by the requirements of the system, and if the users will understand why it works like that; otherwise it could make for a frustrating and annoying user experience. I don't think it's a bug, rather a design decision, because the opposite behaviour could be equally undesired in other circumstances.
I guess you could set the slider value to 5 inside the case structure, alongside the greying out, by adding another property node. This should keep the slider stuck at 5, if the user tries to pull it above.
This appears to be strange behavior as the Value Change event is triggered while the mouse button is held down even when the control is Disabled & Grayed Out.
One way I can think of to limit the value would be to update the Data Entry Limits Maximum property for this control and setting the Response to Value Outside Limits for Maximum to be Coerce.
I need a control
It should be asynchronous (should not block the launching thread).
It should block all the user interactions with background screen.
Backdrop shadow on background so that it gives the feeling of disabled interactions with background.
I tried wxBusyInfo. It solves my first requirement, but one can interact with background window.
Then I use the wxWindowDisabler with wxBusyInfo, It disables the background window. But looks like events are getting buffered while disabler is on and when I am destroying wxWindowDisabler object, buffered events are firing.
Then I found wxEventBlocker that can be used to block the events.
Is this the right way to achieve the requirements?
wxBusyInfo is the right class to do what you want, it doesn't dispatch events, so I'm not sure how do you manage to interact with anything while it is shown. Because it doesn't dispatch events -- even the repaint ones -- it's not recommended to show it for relatively long periods of time. If you need something more permanent, use wxProgressDialog.
Finally, wxEventBlocker is a rather special class which is only useful in very specific circumstances and this is not one of them.
I am using Dojo's touch.press() and touch.over() combination for some drag action.
While debugging desktop Firefox, touch.press() event is a mousedown and touch.over() is a mouseover, everything works fine and the properties I need are available (pageX, etc).
Then I remote debug a mobile Chrome and what I get is:
touch.press (GOOD):
a TouchEvent which contains type="touchstart", pageX properties, and the touches array with one position (one finger) which itself has the expected properties (pageX, ...).
touch.over (BAD):
a Event which contains type="dojotouchover", but has no pageX or the touches array.
So the question is, is this a bug, should I do something different?
I suppose you're listening to touch.over events rather than touch.move events ? As far as I understand, the synthetic event that a touch.over handler receives on touch devices does not includes all the informations from the original touchmove events that triggered it.
If you want to retrieve all the informations from the original event, I think you might actually listen to touch.move events.
This post had some easy to follow instructions to make a flash banner clickable, but it's not quite working for me.
http://www.austintreeexperts.com/maps/oakwilt.cfm is where my flash banner is. Under the google earth thing is a small flash ad. When I mouse over, the cursor turns to pointer like it knows it's a link, but clicking does nothing. I've been fooling with this for hours and I'm about to go crazy. My actionscript is this:
on(press){getURL("http://realgreenlawn.com","_blank");}
First thing to consider:
Are you using a button symbol? If so you will get a hand cursor whether or not the onPress() code is correct. You should use a movieclip symbol instead, with your over, up, and down states as frame label names "_up", "_over" and "_down". Those frame names will make a movieclip act like a button instance as long as you have an onRelease() or onPress() method assigned to it as outlined below. Also, to get a hand cursor you will need to set useHandCursor to true.
Second thing to consider:
Your onPress() code looks like its the kind of code placed right on a movieclip. If so, do not do that! Give it an instance name, like myButton and use the code below on the same frame the button resides:
myButton.useHandCursor = true;
myButton.onRelease = function()
{
getURL("http://realgreenlawn.com","_blank");
}
or alternatively and not best practice, but easier if your aren't that skilled with as2 is to put the above code on the first frame inside your button movieclip, but if you do that change it to:
this.useHandCursor = true;
this.onRelease = function()
{
getURL("http://realgreenlawn.com","_blank");
}