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.
Related
So I'm trying to setup a web-page where when you open it, it will play a random piece of music, and when that one finishes, it will play another directly after so you get a constant stream of music, but not in the same order every time. If this goes outside the bounds of HTML and I'm looking at for instance JavaScipt than that's fine.
I know this is probably a rather easy solution, but I'm new to HTML and trying to understand it better.
Thanks in advance if I don't get back to you soon!
This is best solved using JavaScript, which is used to add behavior to a website. HTML is primarily used to structure your site.
We can get a collection of all audio elements with the querySelectorAll function. Then we find a random element with the next line and call the play method.
var audio = document.querySelectorAll("audio");
function playRandom() {
audio[Math.floor(Math.random() * audio.length)].play()
}();
For the second part of your question, you would want to listen for the ended event. Inside the event listener function, you would then call the playRandom() function.
audio.addEventListener("ended", function() {
playRandom();
});
I'm building an app in HTML5, using CreateJS (EaselJS), Box2D and written in CoffeeScript using Browserify (built with Gulp).
I've just spent the best part of a half a day beating my head against the keyboard trying to work out why I couldn't get my EaselJS events working. Window/document events were fine. Any and all EaselJS event just did nothing. It turns out the debug canvas was trapping them, overlaying invisibly.
I accidentally discovered this eventually by toggling the debug canvas on and off which allowed the events to get though and they started responding.
So now, my question is: what's the best way to handle events so that they will work
a) without me first toggling the debug canvas, and
b) when debug is active, how can I pass events through to the main canvas below so that it can handle them?
Is that possible? It would be ideal that even with debug draw on, mouseevents worked as normal.
HTML is this:
<body>
<canvas id="arcade"></canvas>
<canvas id="debug"></canvas>
<button id="toggle-debug">Toggle Debug</button>
<script src="compiled.js"></script>
</body>
My app class sets up events calling bindEvents from its constructor thus:
bindEvents: =>
# Pause when window is blurred
window.addEventListener 'blur', #setPaused
# Play when window is focused
window.addEventListener 'focus', #setPlay
# Toggle showing/hiding of the Debug <canvas>
document.getElementById('toggle-debug').onclick = #toggleDebug
toggleDebug: =>
#showDebug = !#showDebug
# Shows/hides Debug canvas
Universe.debug.canvas.style.display = (if #showDebug then 'block' else 'none')
setPlay: =>
#play = true
createjs.Ticker.setPaused false
setPaused: =>
#play = false
createjs.Ticker.setPaused true
My objects (which contain box2d body in #body and easelJS display objects in #view) set up their events in a similar method, e.g.
bindEvents: ->
#view.on "click", () => alert("ball #{#options.id} clicked")
Unfortunately the DOM does not provide a good way to ignore mouse events on an object, or pass them through. You can however use the Stage.nextStage property.
Create an EaselJS stage, and pass in your debug canvas
Set the nextStage property on the new Stage to the stage that is below that one.
Here is a quick code sample:
var stage2 = new createjs.Stage("DebugCanvasId");
stage2.nextStage = stage1;
EaselJS 0.7.0 added the nextStage property, but the very latest NEXT version in GitHub vastly improved support for this. There is a demo in GitHub where you can see this working (TwoStages.html). Here is the online sample: http://createjs.com/Demos/EaselJS/TwoStages.html
Cheers.
I've solved part a) by changing the html to
<canvas id="debug" style="display: none;"></canvas>
I also tried doing this programmatically in the game (toggling the debug twice) but for some reason it didn't work. I don't know why.
I'd still like to get an answer to B though. How to pass mouse events though the debug canvas to the one below.
I'm trying to send a hover event from flash to js (in some browsers, the mousemove / mouseover events won't trigger over flash content). I've tried to do this:
stage.addEventListener(MouseEvent.ROLL_OVER, function():void {
ExternalInterface.call("alert", "Rolled over!!");
});
But it didn't work. I'm an AS newbie, can you point me to the right direction?
also, you have to define a function to the externalinterface to be called.. its a bit overhead:
ExternalInterface.addCallback("sendToActionScript", receivedFromJavaScript);
more info here: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/external/ExternalInterface.html
use last example.
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/
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();
}