[RESOLVED] How can I use mouse wheel in AS3, F10 before clicking?

**wszp** · 02-14-2011, 11:15 PM

Hello,
I made a very simple AS3 event simply for demonstrating what I'm trying to ask.

import flash.events.Event;
import flash.events.MouseEvent;
addEventListener(MouseEvent.MOUSE_WHEEL, mousewheel_csel);
function mousewheel_csel(event:MouseEvent) {
var delta:int = -event.delta;
trace("delta:"+delta);
}

I made a full screen flash site (100% width and height), and I was hoping I could scroll it simply with the wheel, even before clicking on the site. It seems it only works if I click first, then I can scroll as intended.
Is there any way to avoid clicking first this?
I tried embedding with and without SWFObject 2.2. I was hoping dynamic publishing would help, but it did not.

I think the root of the problem is that my flash does not have focus, and clicking gives that. Is there any way to give focus to it? Maybe some JS/jQuerry solution?
Thanks a lot for help.

**rdoyle720** · 02-15-2011, 11:55 AM

30 seconds of Google searching turned up this, which seems to imply you can give it focus in IE, but not in other browsers: http://stackoverflow.com/questions/8...he-user-to-cli

**wszp** · 02-15-2011, 12:53 PM

Thanks a lot rdoyle720.
I was trying to find a cross-browser solution.
The idea that most people found, and is suggested by Adobe is:

PHP Code:


<body onLoad="window.document.flashContent.focus();">

http://kb2.adobe.com/cps/155/tn_15586.html

Now, the problem is, that it will only work in IE and FF 3.6. It will not work in older Firefox versions, not in Chrome and also fails on Safari.

Long story short, I would love a more cross-browser version of the said method.

**igorski** · 02-16-2011, 07:34 AM

I would add this to the body:

<body onLoad="setFlashFocus();">

add this JavaScript:

<script type="text/javascript">
function setFlashFocus()
{

getFlash("ID-OF-SWF-OBJECT").focus();
}

function getFlash( id )
{
var isIE = navigator.appName.indexOf("Microsoft") != -1;
return (isIE) ? window[id] : document[id];
}
</script>

and be sure to embed the object with an ID that corresponds with the one passed to the GetFlash function.

Oh... and embed the flash with wmode set to OPAQUE. Altough this will prove to be a problem if you need transparent wmodes for overlaying html and other objects over the Flash.

Next, add the "wmode" parameter to the embed tag:

wmode = "opaque"

Another horrid workaround - I can't test the above right now - would be to capture the mouseEvents via JavaScript and add an ExternalInterface callback listening to the changes...

**wszp** · 02-16-2011, 12:42 PM

Thanks a lot igorski, but the result is the same. It will not work in Chrome.
I even did

PHP Code:


<script src="jquery-1.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#poledancingjobs").focus();
});
</script>

hoping that jQuerry would fix this, but it did not. The result is the same as with the plain

PHP Code:


<body onLoad="window.document.poledancingjobs.focus();">

**igorski** · 02-16-2011, 12:54 PM

I never noticed this process fails in Webkit browsers, GAH! A little bit of Googling shows that IE is miracously one of the few who never fails in this aspect... which is odd. The Flash element can be found and triggered, but the focus method is not allowed / performed on it in some Mozilla builds / Webkit browsers...

This URL supplies a method to capture the mousewheel.

You COULD make a clever ExternalInterface call that receives the mousewheel updates from JavaScript ( instead of listening in Flash ) and use the results of this function to update the displayObjects you want to update. It's not a "expensive" feature in terms of overhead as the interface will work lightning fast as it would from within Flash, it's just... odd ( altough Mac users will be VERY happy indeed that they can scroll your flash! )

You could also add a button to your application where the user is forced to click on before you start... it's a matter of finding out what is important.

**wszp** · 02-19-2011, 08:06 PM

To be honest I can't imagine why noone did that before. Flash is around since more then a decade, and full flash sites are quite popular (so are macs).
Long story short, thanks a lot igorski. I'm afraid writing that would be beyond the time restraints of this project, but I would love if someone could write that, I would be willing to pay him/her depending on how expensive that would be.

**igorski** · 02-22-2011, 04:42 AM

I can somehow remember a JS file called "macmousewheel.js". My interest is spiked, so I'd like to look into this for you. I can't promise you I can fix you up something that will help you with your project ( or is finished in time ), but I might have a go later today.

**igorski** · 02-22-2011, 06:29 AM

Got it up and running, download source files packed in a handy .ZIP here:

Pixelbreaker MouseWheel

Pixelbreaker created the Mac mousewheel extension for use with SWFObject ( JavaScript for embedding Flash ). The version in the link is for the new 2.0 version of SWFObject.

For the HTML / Javascript side of things, take the contents of the folder "js" in the "swfObject 2.0" folder. You can peek at index.html to see what you have to do, but I'll illustrate below:

HTML page:

HTML Code:

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/swfmacmousewheel2.js"></script>
<script type="text/javascript">
        
var vars = {};
var params = { scale:'noScale', salign:'lt', menu:'false' };
var attributes = { id:'flashMovie', name:'flashMovie' }; // give an id to the flash object

swfobject.embedSWF("Wheeltest.swf", "flashContent", "100%", "100%", "9.0.0", "js/expressInstall.swf", vars, params, attributes );
swfmacmousewheel.registerObject(attributes.id);
    
</script>
<div id="flashContent"><!-- Flash will be embedded here by SWFobject --></div>

As you can see, it is important that the attributes object contains a valid value for id, as the mousewheel JavaScript needs the ID of the embedded Flash movie to send it's data to ( via the "registerObject" function ). If you're unfamiliar with this JavaScript method for embedding Flash: the seemingly empty "flashContent" <div> will be the container for the flash movie to be embedded by the JavaScript on runtime. All contents of this container will be overwritten by the Flash ( usually you enter text content here so Google can pick these up and index your page as search engines don't execute the JavaScript and won't replace this text with the Flash ).

Now on the ActionScript side of things, from the folder "as3" copy the src structure and link to it / copy it to your projects source folder. Now, in the main / entry point AS file of your application, import the com.pixelbreaker.ui.osx.MacMouseWheel class and add this line:

Actionscript Code:

MacMouseWheel.setup( stage );

That's it.

You can now add the event listener for the mousewheel as you used to, i.e.:

Actionscript Code:

someObject.addEventListener( MouseEvent.MOUSE_WHEEL, handleWheel );

private function handleWheel( e:MouseEvent ):void
{
      // do something
      e.target.y += e.delta;
}

And the mouse will be tracked by the JS function. I have tested it and it works not only by magic, but also negates the need to first click / focus on the Flash movie before the scroll events will be tracked.

**wszp** · 02-22-2011, 07:32 AM

Thanks a lot igorski, you solved it. That was the answer. Now my full flash application works like a charm.

**igorski** · 02-22-2011, 10:28 AM

^_^

Wait a second!!

Actionscript Code:

<body onLoad="window.document.POLEDANCINGJOBS.focus();">

Dude, wtf

**wszp** · 02-22-2011, 10:45 AM

Sorry, I love to give meaningful ID names. So if I copy-paste from another project I know if I did change it or not, and avoid copy-paste misstakes. This is a project about pole dancing jobs, so that was the best name I could came up with. (I love being a webdesigner.)

The project seems to work with your idea: http://www.poledancingjobs.com/ (only test version, not finished at the moment)
Can you please test it if the scroll works on a Mac?

P.S.: I copyed the content of swfmacmousewheel2.js, and pasted it at the very end of swfobject.js so I will have one less HTTP requests, and that made sense, since that's something that should be in swfobject from start.

Thread: [RESOLVED] How can I use mouse wheel in AS3, F10 before clicking?

Thread Tools

Display

[RESOLVED] How can I use mouse wheel in AS3, F10 before clicking?

Posting Permissions