I'm currently design an application that when a button is pressed it expands to display further information. A major issue I am faced with is that if the button is pressed whilst contracting so that it expands again, the co-ordinates are saved from when it was clicked, meaning it will never return to its original state.
I either need a way of disabling the mouse click on the button whilst the TweenMax is doing its job in contracting the button, or by extracting the coordinates from an array.
I've managed to get the array of coordinates from my menu class into the main class, but can't work out the best way in order to stop the problem from occurring.
--
expand = false;
(run menu function)
item.addEventListener(MouseEvent.CLICK, boxExCo);
private function boxExCo(e:MouseEvent):void
{
if (!expand)
{
selectedBox = e.target as Box;
boxX = selectedBox.x;
boxY = selectedBox.y;
expand = true;
TweenMax.to.... (expand)
}
else
{
expand = false;
TweenMax.to... (contract to coordinates)
}
}
You need to use item.removeEventListener(MouseEvent.CLICK, boxExCo); when you no longer want the event to be able to fire, and then just add it back on using
item.addEventListener(MouseEvent.CLICK, boxExCo); when you want the event to be able to fire again.
Once you start your tween max, remove the event.
Once it is finished, add the event back on.
Related
I have a spark List control that shows a side-list on ListEvent.ITEM_ROLL_OVER event. Basicaly it shows the contents of the item you are hovering. I would be also using ListEvent.ITEM_ROLL_OUT to hide it again but I want the user to be able to click on it (the sidelist) too.
So, i use MouseEvent.ROLL_OUT and check the event.relatedObject's id to see where the cursor went. I added an invisible Rectangle overlaying the sidelist that's a bit larger so it gains focus 1st. But it doesn't.
Googling around, I think that the Spark Rectangle cant gain focus as it doesn't implement InteractiveObject. What should I use?
My logic:
protected function listOUT(event:MouseEvent):void
{
var obj:Object = event.relatedObject;
if (obj.id != "focusRect")
{
sidelist.visible = false;
}
}
My struggle is to keep the side-list visible if the user moves the cursor from the main list to the sidelist.
Any other suggestions outside my approach are also welcome.
Update
(image link)
Red are the invisible Buttons
On roll_over select the item in the mainlist, display the sidelist
based on the selecteditem in the mainlist.
Hide the sidelist when there is no item selected in the main list.
Deselect items inthe mainlist if the sidelist loses focus.
Furthermore mx.core.UIComponent is the lightest component that dispatches focus events.
In my main I have a menu of buttons, and a map added which is a class of it's own, I wanted it so that when I click on a "view map" button, it would remove the buttons so the map could be viewed, problem is when the specific button is removed it seems to stop the event listener working.
Here's the code, I've tried to chop it down as much as I can just to show you the part that's the problem.
public function Main () {
drawButtons(); // draws all the buttons and adds them to the buttonList array
// the buttons are all made from a "ButtonClass".
addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
}
public function onMouseUp(Event:MouseEvent):void {
else if (Event.target.name == "viewMapB") {
// imagine removeChild(buttonList[1-8]) commands here.
removeChild(buttonList[9]); // when this is removed, eventlistener wont work
stage.addEventListener(KeyboardEvent.KEY_UP, keyPressedUp);
stage.focus = stage; // This line fixed the problem
}
}
private function keyPressedUp(event:KeyboardEvent):void {
trace("ping");
// goneBack("main"); // brings back the menu that was removed
}
experimenting seems to show that it's only when I remove buttonList[9] that this problem arises, but all the work arounds I could think of so far refuse to work.
Edit 1: to show where the mouseEvent comes from.
Edit 2: Attempted adding stage.addeventlistenever to main as well. No luck, but found that after clicking on the button, if I click again afterwards (the map covers the whole stage area), the eventlistener works again. Now trying to figure out why that is...
Edit 3: Seemed the problem had something to do with focus. Adding "stage.focus = stage;" in after the KEY_UP event listener seems to have fixed it. Learn something everyday! Also thank you to those who helped solve this weird problem.
So basically my issue is when I click on my movieClip I want it to spawn this animation I did over the protonCore. Essentially to show that when you click the protonCore you generate 1 proton. However the problem with this when spamming your CLICK, is that when it adds this child on every click, it draws on top of the movieClip and prevents hit detection while the addedChild "fuseSpark" is added to the stage. Is there a way to make it so when I add this child it doesn't affect the hitBox of the clickable movieClip?
function protonGenerator(e:MouseEvent):void
{
var fuseSpark:MovieClip = new MC_FX_fuse;
stage.addChild(fuseSpark);
fuseSpark.x = stage_protonCore.x;
fuseSpark.y = stage_protonCore.y;
}
An easy solution would be to disable the mouse for those children when you create them:
fuseSpark.mouseEnabled = false;
That is, ofcourse, only if you don't care if the user can click those elements.
I have a map, which has about 3-5 divs on it. When someone clicks a div, it flips and a text appears on the back of the div. But if someone has the curser on a div and scrolls, the map should behave like it always does and zoom.
I found this in another question: http://jsfiddle.net/ZqfTX/. Is there a way to say
dblclick: function(){$(this).[IGNORE]} ?
My idea is only an idea. If you have another way to do it, even better.
This should take care of what you want. Here is an updated jsFiddle which sets a timeout and prevents a double click from occurring. You can set whatever amount of time you want before a second single click is allowed. It also detects the scroll of the mouse wheel and alerts up or down based on the direction of the scroll.
From your OP and comments, I believe this should accomplish everything you were asking. As far as the animation of your div, I don't know what you are doing with it so that part would need to be changed to do what you want.
The code snippet below was found and modified from this other SO post and many thanks to that poster: How to disable double clicks or timeout clicks with jQuery?
Preventing Double Click
jQuery('.flip').click(function() {
var $this = jQuery(this);
if ($this.data('activated')) return false; // Pending, return
$this.data('activated', true);
setTimeout(function() {
$this.data('activated', false)
}, 1500); // Time to wait until next click can occur
doFlip(); // Call whatever function you want
return false;
});
function doFlip() {
if ($('.flip').find('.card').hasClass('flipped')) {
$('.flip').find('.card').removeClass('flipped');
} else {
$('.flip').find('.card').addClass('flipped');
}
}
On a side note, if you do not want the user to have the ability to even single click the div a second time, take a look at jQuery's .one() event handler attachment as it only allows execution once per element. Not sure if you want to have the ability to click it a second time but figured I'd throw it out there just in case.
If you want to prevent double click, you can try to use event.preventDefault
$(".yourClass").dblclick(function (e) {
e.preventDefault();
});
Looks like you'll have to bind event handlers for the events you want to pass through to the map and perform the zooming actions manually. This might help:
https://code.google.com/p/jquery-ui-map/
I have a button with a MouseEvent.CLICK listener. The CLICK event is being triggered when the button is pushed, mouse is down while rolled out, then released when rolled in on the button again. I do not want this to happen, the click event should not occur when the button is being dragged.
My flash file contains a large amount of buttons and click listeners, I would like to solve this problem with as little code as possible. What is the simplest solution to this problem?
you need to add event listeners and handlers when they are required and remove them when they are no longer needed. you will use your own logic for your needs, but here's an example:
button.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownEventHandler);
function mouseDownEventHandler(evt:MouseEvent):void
{
evt.currentTarget.addEventListener(MouseEvent.MOUSE_UP, mouseUpEventHandler);
evt.currentTarget.addEventListener(MouseEvent.ROLL_OUT, rollOutEventHandler);
trace("Mouse Down");
}
function mouseUpEventHandler(evt:MouseEvent):void
{
evt.currentTarget.removeEventListener(MouseEvent.MOUSE_UP, mouseUpEventHandler);
evt.currentTarget.removeEventListener(MouseEvent.ROLL_OUT, rollOutEventHandler);
trace("Mouse Click (Mouse Up)");
}
function rollOutEventHandler(evt:MouseEvent):void
{
evt.currentTarget.removeEventListener(MouseEvent.MOUSE_UP, mouseUpEventHandler);
evt.currentTarget.removeEventListener(MouseEvent.ROLL_OUT, rollOutEventHandler);
trace("Roll Out");
}
if you have a lot of buttons which behave the same way, you should create a custom button class of which all of your buttons would be instances.
On mouse down, record the mouse coordinates, do the same on mouse up and compare the two coordinates. If the distance is more than 10px (or whatever you want) then cancel the click (or set some boolean to false that allows the code in the click listener to run).
or
On mouse down, start recording the mouse coordinates, so you know the clip has been moved, then on mouse up, you know if the clip has been moved even if the user places the clip back on exactly the same spot.