I'm sure this must be a common question, but I haven't found an answer elsewhere.
I've got a Flash object embedded in a long webpage. I listen for the MOUSE_WHEEL event in Flash, and scroll my Flash content accordingly. However, when I scroll over the Flash object, the webpage also scrolls.
Is there any way to prevent this behaviour, i.e. lock the webpage's scrolling position when the Flash object has focus? I'd prefer not to have to use JavaScript.
Here is an excellent solution that doesn't require JavaScript:
http://www.spikything.com/blog/index.php/2009/11/27/stop-simultaneous-flash-browser-scrolling/
(Technically, it DOES use JavaScript, but the JavaScript is injected by Flash, so you don't need to add anything to the HTML page yourself. In other words, the only code you need to manage is AS3).
This seems to work on every browser I've tested.
I don not think this is possible without JavaScript.
You would need to communicate from the Flash movie to the browser using ExternalInterface whenever the Flash movie changes focus.
Then, have a JavaScript function on the page trap and eat the mousewheel event:
if (window.addEventListener)
/** DOMMouseScroll is for mozilla. */
window.addEventListener('DOMMouseScroll', handleWheelEvent, false);
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = handleWheelEvent;
function handleWheelEvent(e){
e.preventDefault();
}
Related
I am adding a canvas on top of a Haxe HTML5 Game. But once I do, the buttons in the Haxe game no longer register the click events. Does anyone know in the Haxe/openFL compiled code where the click events are being handled?
My best guess is that they are looking at the top most canvas, which is now mine and therefore not seeing the hits.
EDIT:
Found this code where the mouse events were being added to the canvas:
while(_g2 < mouseEvents.length) {
var type2 = mouseEvents[_g2];
++_g2;
element1.addEventListener(type2,$bind(this,this.element_onMouse), true);
}
Where element1 = the canvas.
I can't seem to send $(canvas).click() events to that canvas. Anyone have further suggestions?
My conclusion is, I was using JQuery to send calls to event listeners that were added through plain JavaScript.
document.getElemntById("canvas").addEventListener("mousedown", func...);
Apparently the JQuery calls can not call non JQuery events.
$(canvas).mousedown(); // does not work
Using
document.getElemntById("canvas").dispatchEvent(event) r
and sending MouseEvents to the Haxe canvas worked fine.
I've got a swf with some js callbacks registered using ExternalInterface. I hide and show the swf repeatedly, and I've learned that ExternalInterface is not available when the swf is hidden. I also noticed that the swfs constructor is called every time it shows again, which I've used to make sure I don't try to call an ExternalInterface function before its available. This makes me wonder though if there is also some way to reliably tell from inside the swf when it is hidden? I know as3 classes don't have destructors, but is there anything similar that could be used to fire an ExternalInterface event right before the swf becomes unavailable again? REMOVED_FROM_STAGE doesn't seem to help out with detecting this as it doesn't fire at all.
I'm using several methods of hiding and showing btw. Sometimes using angular's ng-hide/ng-show and sometimes the swf is within a bootstrap modal window.
Also, I've noticed Flash Builder can somehow tell when the swf unloads. I can add a button that sets 'display: none' on the embedded <object> and I get the [Unload SWF] message in the console in Flash Builder. Is this just a feature of the debug player, or is there some secret event Flash Builder knows of that I have yet to find?
You can use this code to check if a SWF can call ExternalInterface:
if(ExternalInterface.available) {
ExternalInterface.call("console.log","hello browser");
}
I'd like my flash movie to not play until it's visible on screen and then pause when off screen. Is there a way to capture some event indicating that the swf is rendering or visible or within the visible bounds of the browser window that I can addEventListener to so I'll know when it's within view?
Use Flash's ExternalInterface to call a javascript function that checks to see if the element of off screen. In javascript, use JQuery with the Viewport plugin to figure out if we're off screen. (http://www.appelsiini.net/projects/viewport).
I haven't tested the Viewport plugin, but I've talked to people who use it, and it worked out OK for them.
In as3:
var returnValue:int = ExternalInterface.call("jsCheckerFunction");
if(returnValue == 1) // your flash is on-screen.
in javascript:
function jsCheckerFunction()
{
if($("#flashContent:in-viewport").length > 0)
return 1; // flash div visible
return 0; // returns 0 if the element is offscreen
}
You could have it call jsCheckerFunction on each frame to see if the status has changed.
I have a flash app using fl.controls.ScrollPane as a container for a Sprite form.
The ScrollPane.source is referenced to the Sprite form with flash.text.TextField as some of the form's children.
I tested using Firefox and Chrome browsers.
When the flash file is called directly from the development server, the flash application runs correctly, except for the fact that one needs to click twice before being able to select the editable TextField.
The situation worsens when the flash is embedded on a page with strict control attributes such as:
<embed type="application/x-shockwave-flash"
src="https://localhost:flashfile.swf" width="400" height="300"
quality="high" scale="scale" allowfullscreen="true"
allowscriptaccess="never" salign="tl" wmode="opaque">
I read that wmode=opaque can bring some undesirable side effects, but it is ridiculous, that I can't even select the TextField objects. Event the mouse scroll isn't captured anymore. The mouse events are not hitting the TextField objects.
This is a peculiar case because other objects such as fl.controls.CheckBox and fl.controls.ComboBox works, as they still are clickable/selectable.
Question: Is there something I should know about in this special scenario of ScrollPane and embedding using wmode=opaque that I'm missing out here?
After searching the web for half a day, and combing the AS3 documentation till my eyes go blind, I finally found a hint to a solution to my problem. I'm just doing a brain dump here to fix the TextField selection issue.
A lot of search results hinted at the problems of wmode=opaque and how browsers control the mouse events, but not many turn up direct answers or solutions.
http://www.actionscript.org/forums/showthread.php3?t=170310
The forum question above gives a hint, that the ScrollPane object, actually captures the first mouse click for focus, then lets the subsequent click go through to the children object. The tip given is as shown:
myScrollPane.focusEnabled = false
setting focusEnabled property to false.
For completeness, I've explicitly set more properties just to be sure:
mouseFocusEnabled = false; // disable mouse focus on the scrollpane
focusEnabled = false; // disable focus on the scrollpane
mouseEabled = true; // receives mouse input
mouseChildren = true; // enable for selecting children objects
Miraculously, my clicks are able to select the editable TextField objects when the flash is embedded using the wmode=opaque (I'm still not actually sure whether this is the issue).
The mouse scroll events however, seems to be only solvable with external javascript. There's no internal AS3 solutions.
That said, the unanswered question is: I'm still not sure where or how web browsers capture the mouse events then selectively pass them into the embedded flash containers. If someone can shed light on this, and also point to some solution, that would be great.
I'm trying to make a google maps style interface for a design project. I've got the drag/drop and zoom functions working, but I also want to make it react to gestures on a trackpad (macbook). I assumed 'listening' to the event.delta of a MouseEvent would do the trick, but somehow it's not working. So what's wrong with my code?
stage.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheelEvent);
function onMouseWheelEvent(event:MouseEvent):void {
tafelOrigineel_mc.y += event.delta;
}
I have loaded the flash MouseEvents earlier in the document, so that shouldn't be the problem. After I got this working, I will try to use it on the x-axis too. Is that possible with the MOUSE_WHEEL eventlistener?
Thx in advance
It is a long time problem regarding flash player on MacOS.
MOUSE_WHEEL event won't dispatch on MacOS. Though there are some workarounds involving the use of JavaScript to detect the use of the wheel (over the entire flash content), if it isn't a issue, try checking one of those.
There is a list in this blog post:
http://www.impossibilities.com/v4/2009/03/06/flash-mousewheel-implementations-for-mac-os-x/