is it not possible to have both CLICK and DOUBLE_CLICK on the same display object? i'm trying to have both for the stage where double clicking the stage adds a new object and clicking once on the stage deselects a selected object.
it appears that DOUBLE_CLICK will execute both itself as well as the first CLICK functions in the path toward DOUBLE CLICK (mouse down, mouse up, click, mouse down, mouse up, double click).
in other languages i've programmed with there was a built-in timers that set the two apart. is this not available in AS3?
UPDATE
here's some code. essentially what i would like is have one or the other, not both with double click
stage.doubleClickEnabled = true;
stage.addEventListener(MouseEvent.DOUBLE_CLICK, twoClicks, false, 0, true);
stage.addEventListener(MouseEvent.CLICK, oneClick, false, 0, true);
function oneClick(evt:MouseEvent):void
{
trace("One CLICK");
}
function twoClicks(evt:MouseEvent):void
{
trace("Two CLICKS");
}
//oneClick trace = "One CLICK"
//twoClicks trace = "One CLICK Two CLICKS" (instead of just Two CLICKS)
Well, you could use setTimeout and clearTimeout.
It'd look something like this:
const var DOUBLE_CLICK_SPEED:int = 10;
var mouseTimeout;
function handleClick(evt:MouseEvent):void {
if (mouseTimeout != undefined) {
twoClicks();
clearTimeout(mouseTimeout);
mouseTimeout = undefined;
} else {
function handleSingleClick():void {
oneClick();
mouseTimeout = undefined;
}
mouseTimeout = setTimeout(handleSingleClick, DOUBLE_CLICK_SPEED);
}
}
function oneClick(evt:MouseEvent):void {
trace("One CLICK");
}
function twoClicks(evt:MouseEvent):void {
trace("Two CLICKS");
}
stage.addEventListener(MouseEvent.CLICK, handleClick, false, 0, true);
Did you set .doubleClickEnabled to true?
You should also take a look here.
Great answer Wallacoloo - thanks for that. I have just implemented your solution and refined a few points, so I'd thought I'd put it here for future reference (and of course the benefit of the overflow community!). Firstly, I couldn't test for undefined on the uint returned by setTimeout, so I replaced the undefined conditional with an == 0 conditional. Secondly, I wanted to commit the logic of a single click instantaneously (just makes for a more pleasant user interface), so I've done a bit of reshuffling:
if (mouseTimeout != 0) {
// clicked within the timeout, handle as double click
// rollback single click logic
rollbackSingleClickHandler(e);
// commit double click logic
dblClickHandler(e);
clearTimeOut(mouseTimeout);
mouseTimeout = 0;
} else {
// first click of a click sequence
// commit single click logic
singleClickHandler(e);
function clearTime():void {
mouseTimeout = 0;
}
// register a timeout for a potential double click
mouseTimeout = setTimeout(clearTime, DOUBLE_CLICK_SPEED);
}
Related
I'm creating game where when an object rolls over another object the object disappears and when it does 1 is taken from a thing on the stage that counts how many objects are left; however, I want it so that when it equals zero it goes to a new scene. This is my code so far:
var nObjects:Number = 5;
An.addEventListener( Event.ENTER_FRAME, handleCollision4)
function handleCollision4( e:Event ):void
{
if(An.hitTestObject(Octo)){
An.addEventListener(MouseEvent.MOUSE_UP, onStopDrag4);
function onStopDrag4(e:MouseEvent):void {
e.target.StopDrag;
if(An.hitTestObject(Octo)){
removeChild(MovieClip(Octo));
nObjects--;
trace(nObjects)
myText.text = String(nObjects);
}
}
//there are five of these when they are all deleted nObjects does equal zero
if (nObjects==0);
{
gotoAndStop(1, "Scene 3");
}
You need to close your handleCollision4 and its if statement. To help keep that clear (where encapsulation occurs) remember to always properly indent your code as it will make it easier for others (and you) to read it and spot syntax errors.
In onStopDrag4, you have what looks like a function call to StopDrag. Don't forget your parenthesis.
Your test for if (nObjects == 0) { is outside your onStopDrag4 listener, meaning it only runs once during the initial document read; you want it inside the listener so it gets run after each nObject decrement. Also, do not add semicolons after a condition.
Properly formatted, it should look like this:
var nObjects:Number = 5;
An.addEventListener(Event.ENTER_FRAME, handleCollision4)
function handleCollision4(e:Event):void {
if (An.hitTestObject(Octo)) {
An.addEventListener(MouseEvent.MOUSE_UP, onStopDrag4);
}
}
function onStopDrag4(e:MouseEvent):void {
e.target.StopDrag();
if (An.hitTestObject(Octo)) {
removeChild(MovieClip(Octo));
nObjects--;
trace(nObjects)
myText.text = String(nObjects);
}
//there are five of these when they are all deleted nObjects does equal zero
if (nObjects == 0) {
gotoAndStop(1, "Scene 3");
}
}
On my screen are tiles generated from an array. I have a mouse roll over function called rollover, that adds a movieclip that highlights the edge of the tiles that I am currently on. I want it so that once I click a tile, the roll over function doesn't work until another button is clicked. I tried putting removeEventListener for the roll over function in the click function, doesn't seem to work. How would I go about this if possible?
I will post more information if needed.
function rollover(event:MouseEvent)
{
var tileHover = true;
if (tileHover == true){
(event.currentTarget as Tile).outline.gotoAndStop("hover");
}
if(tileHover == false){
(event.currentTarget as Tile).outline.gotoAndStop("blank");
}
}
Below is the mouseclick function
function mouseclick(event:MouseEvent)
{
tileHover = false;
if (tileHover == false){
tile_MC.removeEventListener(MouseEvent.ROLL_OVER, rollover)
}
}
See below. You set a property and immediately check what the value of that property is. It will always be true because you just set it as true.
var tileHover = true;
if (tileHover == true){
(event.currentTarget as Tile).outline.gotoAndStop("hover");
}
Also, don't forget your data types.
I think you need to have (event.currentTarget as Tile).outline.gotoAndStop("blank"); in mouseclick.
Also, I assume tilehover is some global variable used for tracking the hover state. Explicitly setting it true/false in the handler is just for debugging purposes!!
I'm fairly new to ActionScript 3 (so I’m sorry if this is a naïve question) and I'm working on an existing project that uses a "Tree" menu. Each node in the tree represents a section in the application. Unfortunately, some of the section names (which are what's displayed in the node’s display value) are fairly long and requires the text to be truncated. As a result, there are times where the section names are cut off. To get around this, we want to give users the ability to see the entire title by moving their mouse cursor over the node for “X” seconds in which case a small pop-up renders the node's label.
Example
public var menuTree:Tree;
public function DoSomething(){
menuTree.addEventListener(ListEvent.ITEM_ROLL_OVER, onListItemRollover, false, 100);
}
private function onListItemRollover(event:ListEvent):void {
//IF MOUSE CURSOR IS STILL OVER NODE FOR "X" SECONDS DISPLAY NODE'S LABEL IN POP-UP
}
Thanks all in advance!
Without knowing more about your setup, I would probably setup something like this:
var timer:Timer;
var currentItem:*
for each (var node:* in menuTree) {
node.addEventListener(MouseEvent.MOUSE_OVER, overHandler);
node.addEventListener(MouseEvent.MOUSE_OUT, outHandler);
}
function overHandler(event:MouseEvent):void {
stopTimer();
currentItem = event.currentTarget;
timer = new Timer(2000, 1);
timer.addEventListener(TimerEvent.TIMER, showPopup);
timer.start();
}
function outHandler(event:MouseEvent):void {
stopTimer();
}
function showPopup(timerEvent:TimerEvent):void {
stopTimer();
//show popup code here
//use currentItem
}
function stopTimer():void {
if (timer) {
timer.stop();
timer.removeEventListener(TimerEvent.TIMER, showPopup);
}
}
So instead of adding the event listener to the menuTree you're going to loop though each item in the tree and add a listener to that item. Then when the user rolls over any given item it starts a timer that after 2 seconds will run a function to show the popup.
I am working on an AS3 project and I am struggling with one particularly fragile part which will need a lot of refactoring in the near future. Just unit testing separate classes in isolation does not catch all issues we are running into. For example, we might forget to disable mouse events on a transparent overlay and thereby block all clicks on a button. Therefore, I am trying to write a test that simulates real user input.
I have tried to manually send a MouseEvent to the stage at the correct position:
stage.dispatchEvent(new MouseEvent(MouseEvent.CLICK, true, true, 380, 490, stage));
Since the stage has no click event handler, I expected the event to propagate through the hierarchy to the button that will actually handle it (as it does when I physically click the mouse). However, it doesn't.
I know that I could just dispatch the event on the button, but that will not detect if the object is somehow obstructed. Is there some way to simulate mouse events, such that they will properly propagate through the hierarchy?
Edit:
I managed to do it by re-implementing the propagation behavior of Flash:
Edit 2:
My previous solution didn't work if there was a partly transparent overlay with a click handler, like a Sprite with a few Shapes in it. The problem is that the hitTestPoint method returns true even if the object in question is completely transparent at that point. Therefore, I modified it to check the actual pixel value:
private function clickObject(obj:DisplayObject) : void
{
var relPos:Point = new Point(obj.width / 2, obj.height / 2);
var globalPos:Point = obj.localToGlobal(relPos);
simulateClick(obj.stage, globalPos);
}
private function simulateClick(obj:InteractiveObject, globalPos:Point) : Boolean
{
// first, check if we have any children that would rather handle the event
var container:DisplayObjectContainer = obj as DisplayObjectContainer;
if (container != null)
{
if (container.mouseChildren)
{
for (var i:int = 0; i < container.numChildren; ++i)
{
var child:DisplayObject = container.getChildAt(i);
var interactive:InteractiveObject = child as InteractiveObject;
if (interactive != null)
{
if (simulateClick(interactive, globalPos))
{
// if we have found a handler in the children, we are done
return true;
}
}
}
}
}
if (!obj.mouseEnabled) {
return false;
}
if (obj.hitTestPoint(globalPos.x, globalPos.y))
{
var localPos:Point = obj.globalToLocal(globalPos);
// check if object is visible at the clicked location
var pixel:BitmapData = new BitmapData(1, 1);
pixel.draw(obj, new Matrix(1, 0, 0, 1, -localPos.x, -localPos.y));
var color:uint = pixel.getPixel32(0, 0);
if ((pixel.getPixel32(0, 0) & 0xff000000) != 0)
{
// if yes, dispatch the click event
var e:MouseEvent = new MouseEvent(MouseEvent.CLICK, true, true, localPos.x, localPos.y, obj);
obj.dispatchEvent(e);
return true;
}
}
return false;
}
Unfortunately, there is still at least one case not covered: If the object is a mask for another object. I have no idea how to check for this, since it could be mask anywhere in the display hierarchy. I would have to traverse the whole tree and check every single display object to find this out.
So, my question remains: Isn't there an easier way to do this?
I've had issues with events in AS3 as well. I've found that the best way is to have the eventListeners added to the same object that's dispatching the events. In your case, adding the .addEventListener to the stage and sending the function as a function on a child clip. eg:
stage.addEventListener(MouseEvent.CLICK, object.object.clicked);
I hope this may help. I've used this method with success in the past.
You can use stage.getObjectsUnderPoint(new Point(pointerX , pointerY )); function , that will return You array with objects . Than remove overlay object and last instance in array should be deepest DisplayObject.
note: last instance can be graphic or such thing , so You should loop through parent objects to find nearest InteractiveObject .
Also , dont forget that parent objects can have mouseChildren = false or mouseEnabled = false
I am struggling making 3 buttons be able to go to a frame when the buttons are clicked in a certain order. For example the buttons are labeled
button 1
button 2
button 3
and the order that they are needed to be clicked in is button 3, button 1, button 2 for them to go to the next frame, How can I achieve this?
This is what I have so far.
var clicked = MouseEvent.CLICK
var buttons = new Array(YellowButton, BlueButton, RedButton);
for (var a=0; a<buttons.lenght; a++)
{
buttons[a].buttonMode=true
buttons[a].addEventListener(clicked,RedYellowBlue);
}
function RedYellowBlue(event:MouseEvent):void { gotoAndStop(20); }
Thanks for your help in advance
What I recommend is to create a string object that will be assembled by clicking the buttons, and then compared to a particular sequence that you set. The beauty of this is that you can make it work for sequences of any length.
The biggest thing here is, you don't want the same event listener on all three buttons. You want their actions to be unique, otherwise, clicking one is the same as clicking all the others (which is your current code's problem.)
var checkString:String = "";
//Create event listeners and their functions.
YellowButton.addEventListener(Mouse.CLICK, yellowClick);
RedButton.addEventListener(Mouse.CLICK, redClick);
BlueButton.addEventListener(Mouse.CLICK, blueClick);
function yellowClick(evt:Event):void
{
//In each event listener function, add a letter or
//string to the checkString variable.
checkString += "y";
//Then, see if the string matches or not.
check();
}
function redClick(evt:Event):void
{
checkString += "r";
check();
}
function blueClick(evt:Event):void
{
checkString += "b";
check();
}
//If the proper sequence is red, yellow, blue, the string would read "ryb".
function check():void
{
if(checkString == "ryb")
{
//Clear the checkString for convenience before going on.
clearString();
//CODE TO GO TO NEW FRAME
gotoAndStop(20);
}
else
{
//Make sure the string is at least 3 characters long.
if(checkString.length >= 3)
{
clearString();
gotoAndStop(foo);
}
}
}
function clearString():void
{
//You will want to have a function for clearing the string.
//This is especially useful if you have a button for "start over."
checkString = "";
}
That should be sufficient to get you started. If you need additional help, feel free to comment on my answer.
To consolidate #JasonMc92's answer, you could use the name of the target as the checkString letter so you only need to call one function for all buttons.
yellowButton.addEventListener(MouseEvent.CLICK, redYellowBlue);
redButton.addEventListener(MouseEvent.CLICK, redYellowBlue);
blueButton.addEventListener(MouseEvent.CLICK, redYellowBlue);
function redYellowBlue(e:MouseEvent){
checkString += e.currentTarget.name.substr(0,1);
check();
}
//... continue on with Jason's functions
Or, since you've set them up in an array, you could also just use the buttons' indices as your check sequence. Something like:
function redYellowBlue(e:MouseEvent){
checkString += String(buttons.indexOf(e.currentTarget));
check();
}
function check(){
if (checkString == '201') {
// ... handle correct sequence
}
}
Also, just a best practice tip:
only use a leading capital for names of classes. Instance names and function names should start with a lowercase. (leading cap won't break anything, but it's standard practice)
//Here is code
var buttons:Array = new Array(YellowButton, BlueButton, RedButton);
for(var i:int=0;i< buttons.length;i++)
{
buttons[a].buttonMode=true
buttons[a].addEventListener(MouseEvent.CLICK,buttonsClickHandler);
}
function buttonsClickHandler(event:MouseEvent):void {
var button:MovieClip = MovieClip(event.target);
switch(button.name)
{
case "YellowButton":
case "BlueButton":
gotoAndStop(2);
break;
case "RedButton":
gotoAndStop(3);
break;
}
}