I am trying to cancel a tooltip event (I only want it to display when the mouse is hovered over a certain area), and can't seem to figure it out. I tried stopPropagation, preventDefault, and stopImmediatePropagation, but none of them seem to work.
Here the code I am using:
private function toolTipCreateHandler(event:ToolTipEvent):void {
if(event.currentTarget.mouseX < 130) {
var tooltip:PhotoToolTip = new PhotoToolTip();
tooltip.src = event.currentTarget.toolTip;
event.toolTip = tooltip;
}
else {
event.stopImmediatePropagation();
}
}
Any ideas?
Thanks
Step one, add an event listener to detect when the mouse leaves the area you want the tooltip, run a function and title it something like "toolTipDestroyer"
Step two, You need to call the destroy method of the tooltip manager
private function toolTipDestroyer():void {
if (myToolTip) {
ToolTipManager.destroyToolTip(myToolTip);
myToolTip= null;
}
}
Also, just for readability, give your tooltip some other name than "tooltip", you'll find it easier to follow up on your code later. My example names it "myToolTip"
Related
I have multiple MovieClip Symbols published with Flash into FlashDevelop (I'll only use 2 in my example). Each have 3 frames for default, hover and click that I'm using as buttons.
private var btnPlay:PlayButton, btnQuit:QuitButton;
btnPlay = new PlayButton();
btnQuit = new QuitButton();
btnPlay.addEventListener(MouseEvent.ROLL_OVER, onRollOverHandler);
btnPlay.addEventListener(MouseEvent.ROLL_OUT, onRollOutHandler);
btnPlay.addEventListener(MouseEvent.MOUSE_DOWN, onPressHandler);
btnPlay.addEventListener(MouseEvent.MOUSE_UP, onReleaseHandler);
btnPlay.buttonMode = true;
btnPlay.useHandCursor = true;
function onRollOverHandler(myEvent:MouseEvent):void {
btnPlay.gotoAndStop(2);
}
function onRollOutHandler(myEvent:MouseEvent):void {
btnPlay.gotoAndStop(1);
}
function onPressHandler(myEvent:MouseEvent):void {
btnPlay.gotoAndStop(3);
}
function onReleaseHandler(myEvent:MouseEvent):void {
btnPlay.gotoAndStop(2);
}
// Same code for btnQuit here, but replace btnPlay with btnQuit
Instead of adding new EventListeners to every button that do practically the same thing like what I'm doing above, is there a way I could just pass in the button itself to the MouseEvent functions something like this? (I realize this might be difficult since all buttons are their own class)
btnPlay.addEventListener(MouseEvent.ROLL_OVER, onRollOverHandler(btnPlay));
btnPlay.addEventListener(MouseEvent.ROLL_OUT, onRollOutHandler(btnPlay));
btnPlay.addEventListener(MouseEvent.MOUSE_DOWN, onPressHandler(btnPlay));
btnPlay.addEventListener(MouseEvent.MOUSE_UP, onReleaseHandler(btnPlay));
function onRollOverHandler(myEvent:MouseEvent, inButton:MovieClip):void {
inButton.gotoAndStop(2);
}
function onRollOutHandler(myEvent:MouseEvent, inButton:MovieClip):void {
inButton.gotoAndStop(1);
}
function onPressHandler(myEvent:MouseEvent, inButton:MovieClip):void {
inButton.gotoAndStop(3);
}
function onReleaseHandler(myEvent:MouseEvent, inButton:MovieClip):void {
inButton.gotoAndStop(2);
}
Maybe I am misunderstanding, but "event.target" provides you a reference to the button that has been clicked. So if you want to do something to the clicked button, you would write:
myEvent.target.gotoAndStop(1);
Or sometimes you might need to use "currentTarget". You'd still need to create listeners for each function but could use one set of handlers.
Simple answer: No. You could go to some trouble to override the MouseEvent class and allow it to send additional parameters, but why bother in this case? You don't seem to be saving any code.
SLIGHT UPDATE:
Here's a possibly-useful simplification of your original code. It saves a few lines-of-code and uses just a single handler function. Obviously, the 'trace' statements could be replaced by various 'gotoAndStop()' statements:
btnPlay.addEventListener(MouseEvent.ROLL_OVER, HandleAll);
btnPlay.addEventListener(MouseEvent.ROLL_OUT, HandleAll);
btnPlay.addEventListener(MouseEvent.MOUSE_DOWN, HandleAll);
btnPlay.addEventListener(MouseEvent.MOUSE_UP, HandleAll);
function HandleAll(e)
{
if (e.type == "rollOver") trace("rollover");
if (e.type == "rollOut") trace("rollout");
if (e.type == "mouseDown") trace("mousedown");
if (e.type == "mouseUp") trace("mouseup");
}
I have a numeric stepper and I want to add an event listener to its text box:
use namespace mx_internal;
durationStepper.inputField.addEventListener(Event.CHANGE,durationStepperTextInputChanged);
private function durationStepperTextInputChanged(event:Event):void
{
use namespace mx_internal;
trace(durationStepper.inputField.text);
}
However, the event function does not execute! I put a break point there and it does not reach it! What am I missing here? Thanks.
The problem is that the developer has stopped Change event from bubbling up. You can find it if you go to the source file of the NumericStepper. Here are two functions, which prevent you from getting the event.
override protected function createChildren():void
{
super.createChildren();
if (!inputField)
{
inputField = new TextInput();
//some code
//some code
inputField.addEventListener(Event.CHANGE, inputField_changeHandler);
addChild(inputField);
}
}
private function inputField_changeHandler(event:Event):void
{
// Stop the event from bubbling up.
event.stopImmediatePropagation();
var inputValue:Number = Number(inputField.text);
if ((inputValue != value &&
(Math.abs(inputValue - value) >= 0.000001 || isNaN(inputValue))) ||
inputField.text == "")
{
_value = checkValidValue(inputValue);
}
}
As you can see the second function has
event.stopImmediatePropagation();
In this case you have two options: either you should find another way of implementing your logic, or you can copy the source code of the component and eliminate this code line.
It would be fine to override the function, but it is private.
You can read about this common problem here
I have tried to choose the second way. It works perfectly! It is not only the *.as file, but some others, which are used in it.
You can download the component here.
I am working on a custom context menu in Flex4. The context menu itself works fine but I am looking for a way to tell if the ContextMenuEvent mouseTarget is an image. As it stands, the mouseTarget shows that it is a "[object MovieClip]". Which is strange because I have no movie clips in my application, only image containers. Any idea what is going on?
private function openContextMenu(e:ContextMenuEvent):void {
Alert.show(e.mouseTarget.toString());// shows [object MovieClip] when it should show [Object Image]
}
Thanks
You need to set mouseChildren on the Image to false, then the MouseEvent will refer to the Image:
if (event.target is Image) {
//do stuff
}
So after a few more hours of research I came up with the below attached to the contextMenu's item select event listener. I am sure there has to be a better way to do this, but until then...
for(var i:int = 0; i < getObjectsUnderPoint(new Point(this.mouseX, this.mouseY)).length; i++)
{
if(getObjectsUnderPoint(new Point(this.mouseX, this.mouseY))[i].parent.parent is Image)
{
//do what I need to do
}
}
Thanks NHubben for your input. It got me going down the right path of looking at children.
The component name Image has no relevance concerning what makes it up. The flex inheritance is: Image -- SWFLoader -- UIComponent -- FlexSprite -- [...] (from mx.controls.Image docs).
So what you need to do is understand what you actually have when you bring it into a AS3 environment. It seems like it gets wrapped up in a MovieClip to allow it be in the Flash's display list. It also looks like you have to go through a loader, but I'm not sure of that.
Run a test or two to find out what the object is actually made up of:
// not foolproof, and will break on some stuff,
// so you will have to fix this as needed:
private function loopDisplay(obj:Sprite):void
{
trace(obj.name + ": " + obj);
if (obj.numChildren > 0)
{
for (var i:int = 0; i < this.numChildren; i++)
{
loopDisplay(obj.getChildAt(i));
}
}
}
If you put this in a mouse down handler, then you can see what is actually there.
However, the event.target or event.currentTarget should also hold the menu item object, so you can also just loop into those objects and see what is in them.
This morning I stumbled to this question:
When hovering a button, is it possible to click it automatically after X seconds? So the user doesn't need to click it with his mouse?
How can I let Flash believe my mouse really clicked some button on the stage or brought up with as3?
I have a lot of buttons in my movie. So I prefer to use some code which will cover this function for all existing or coming up buttons in my movie.
I would normally use a code like this but is there some workaround to accomplish this in a different way? I do no want to add code to every button.
this.addEventListener(MouseEvent.OVER, onMouseClickEvent);
public function onMouseClickEvent(event:Event)
{
trace(event);
if(event.buttonDown) // if button goes down normally
trace("MOUSE CLICKED NORMALLY");
else
trace("left button was not down");
}
The easiest way i think, is to subclass Button.
Then you should add mouse over/out listeners, add click listener that looks like that
:public function clickListener(event:MouseEvent = null){...}
When the mouse is hovering, raise a flag that the mouse is on the object, start a timer and when the timer callback function is called, you check the if the flag (you turn the flag down, when the mouse is out) is true and just call clickListener()
Listen for MouseEvent.MOUSE_OVER and start a timer, at the end of which the button will send the MouseEvent.CLICK event. In the mouseover handler, use the SystemManager to add a listener for MouseEvent.MOUSE_OUT which cancels the timer. The timer removes the listener using the SystemManager as well. So does clicking the button.
Finally! Solved!
This did the trick:
public function runOnce(event:TimerEvent):void {
btnSignal.dispatch("KEYBOARD", btnCode);
}
Robusto & Radoslav Georgiev: Thank you for pointing the right direction!
(I'm answering this a little late but would like to give input for future people).
One way to 'skin this cat' is to simply let your hover event trigger a timer (i.e. 3 seconds). In an EnterFrame or other function let a number or Boolean change when 3 seconds is reached.
//Pseudo code
if(timer == 3)
{ numberVar = 1;
//or
BooleanVar = True;
}
else
{
numberVar = 0;
//or
BooleanVar = false;
}
//end
Then just as you connected your methods to a mouseEvent, connect those same methods to fire when numberVar == 1 or BooleanVar == True. That's it.
For super simplicity and readability let your MouseClickEvent just be numberVar = 1 or BooleanVar = True.
These become super simple to implement over time and in my experience are 'very' error proof. Easy to fix also in the case of a typo or something else. No super elusive imports either. Hope that helped.
Great question by the way (+ 1)
:D
How do I combine actions on events. So a hover will animate the menu and display the tooltip attached to that menu item.
I am currenlty using the lavalamp and beautytips plugins.
You'll need to explore event listeners vs. event handlers. For example:
// Event handlers are declared like this:
var elm = document.getElementById("someElement");
elm.onmouseover = function() {
elm.innerHTML = "OVER state has been triggered!";
}
Written this way, each element can have one function for an event.
Event listeners let you attach as many functions as you want for an event. They're different scripts in IE and FF, but do the same thing. Using raw javascript, you could attach events like this:
function listenFor(obj,eventName,fcnRef,bubbling) {
if(!bubbling) { bubbling= false; }
if(!obj.addEventListener) { obj.attachEvent("on"+eventName,fcnRef); }
else { obj.addEventListener(eventName,fcnRef,otherthing); }
};
function handler1() {
this.style.border = '2px solid red';
}
function handler2() {
this.style.background = 'green';
}
listenFor(elm,"over",handler1);
listenFor(elm,"over",handler2);
Libraries like JQuery and others have similar ways to do this. A little research and experimentation on this subject should give you more than enough info to animate the menu and display a tooltip simultaneously on the same element.