Using the scroll wheel or mouse wheel with ActionScript
23 December, 2008
Flash allows us to take all sorts of inputs use them to interact with files. The mouse scroll wheel is one of the inputs we can use. And as you will see below, it can be very simple.You can choose what language you want you are using:
ActionScript 2
Capturing the scroll wheel, or the mouse wheel as Flash calls it, is very easy. We do it with three lines of code.The first is to declare a new listener object, the second is to handle the scroll event and the third is to add the listener to the mouse.
Check out the example below and then we will look at the code. Scrolling up and down in the SWF below will move the blue square up and down.
var mouseListener:Object = new Object();
mouseListener.onMouseWheel = function(delta) {
if ((delta > 0 && box_mc._y < 270) || (delta < 0 && box_mc._y > 0)) {
box_mc._y = box_mc._y + (delta * 3);
}
}
Mouse.addListener(mouseListener);
The middle section is the part that actually moves the square which we have called box_mc. First we have the event onMouseWheel which will be fired when the scroll wheel is moved. Inside that function we perform a few simple checks to ensure our square does not scroll off the screen. These parts are not strictly necessary for a regular interaction and are only needed in this instance.
First we check if delta is greater than zero. delta is a value passed in by ActionScript and is a positive or negative value depending on which way the wheel was moved. If the value is greater than zero the wheel is being scrolled forwards. If the value is less than zero the wheel is being scrolled backwards. So if it is being scrolled forwards (greater than zero) we need to check that the box is higher than 270 (270 plus the 30 pixel height of box_mc is 300 and the bottom of the stage). If it is forwards and the square is not at the bottom we can then move the square.
We adjust the _y by delta, which we then multiply by 3 just to speed things up a bit. Because the delta is negative or positive we do not need separate actions for each direction.
Similar to the check we just did, we also check that if delta is negative and the square is at the not at the top of the stage we can move it up.
Finally, we attach the listener object to the mouse to get it all working.
And that is all there is to it - the scroll wheel action captured with ActionScript. So now that you are aimed with this basic knowledge you can implement it in your project and have control whatever you want by simply changing the portion of code we have written to control the square.
You can download the source files for this interaction below:
ActionScript 3
Capturing the scroll wheel, or the mouse wheel as Flash calls it, is very easy. We do it with four lines of code.The first is to get access to the mouse events. The second the second is to handle the scroll event and the third is to add the listener to the stage.
Check out the example below and then we will look at the code. Scrolling up and down in the SWF below will move the blue square up and down.
*NOTE* - You will notice in the interaction below that while the square moves up and down the entire web page scrolls as well. We address this issue below.
import flash.events.MouseEvent;
function handleMouseWheel(event:MouseEvent):void {
if ((event.delta > 0 && box_mc.y < 270) || (event.delta < 0 && box_mc.y > 0)) {
box_mc.y = box_mc.y + (event.delta * 3);
}
}
stage.addEventListener(MouseEvent.MOUSE_WHEEL, handleMouseWheel);
The middle section is the part that actually moves the square which we have called box_mc. First we have the function handleMouseWheel which will be fired when the scroll wheel is moved. Inside that function we perform a few simple checks to ensure our square does not scroll off the screen. These parts are not strictly necessary for a regular interaction and are only needed in this instance.
First we check if event.delta is greater than zero. event.delta is a value passed in by ActionScript and is a positive or negative value depending on which way the wheel was moved. If the value is greater than zero the wheel is being scrolled forwards. If the value is less than zero the wheel is being scrolled backwards. So if it is being scrolled forwards (greater than zero) we need to check that the box is higher than 270 (270 plus the 30 pixel height of box_mc is 300 and the bottom of the stage). If it is forwards and the square is not at the bottom we can then move the square.
We adjust the y by event.delta, which we then multiply by 3 just to speed things up a bit. Because the delta is negative or positive we do not need separate actions for each direction.
Similar to the check we just did, we also check that if event.delta is negative and the square is at the not at the top of the stage we can move it up.
Finally, we attach the listener object to the stage to get it all working.
You can download the source files for this interaction below:
*NOTE* - As we stated above, this ActionScript 3 implementation has the bug of scrolling the entire page at the same time as the SWF. At the time of writing an adequate fix had not been found for this bug. There are several available which use JavaScript to pass the scroll wheel event into Flash, but these were not deemed suitable for this tutorial.
And that is all there is to it - the scroll wheel action captured with ActionScript. So now that you are aimed with this basic knowledge you can implement it in your project and have control whatever you want by simply changing the portion of code we have written to control the square.ferrari_chris
