fcOnTheWeb Logo Web technologies, made easy.

fcOnTheWeb Red DotUsing the scroll wheel or mouse wheel with ActionScript

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.

And here is the code we have used for this interaction:

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);

As mentioned before, the first line declares the listener object we use to listen for when the scroll wheel is moved.

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:

mousewheel_as2.zip

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.

And here is the code we have used for this interaction:

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);

As mentioned before, the first imports the mouse events so we can have access to them.

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.

mousewheel_as3.zip

ferrari_chris

Cindy says:

2009-10-27 15:34:44

Has a AS3 fix been made for the scrolling? If so can you post it?

__________

ferrari_chris (http://fcOnTheWeb.com) says:

2009-10-28 06:56:23

Unfortunately, I don't think there is a fix.

I just had a quick search and couldn't see anything. When one is found, I'll be sure to post it up though!

__________

Kaiser says:

2010-02-13 19:11:00

I used the following codes and uts working fine too... But problem is the limit is flash payer 9... when I load it my upera or firefox, with flash player 10 it not works.. do u have any idea why?


var scrollLimit = this.bar_mc._height-this.tab_mc._height;
var actual_size = _parent.Content._height;
var tab_size = this.tab_mc._height;
var secondary_size = this.bar_mc._height-this.tab_size;
var count = actual_size/secondary_size;
onEnterFrame = function () {
var _loc3 = -this.tab_mc._y/2;
for (i=.1; i<1; i++) {

_parent.Content._y = _parent.Content._y+(_loc3*count-_parent.Content._y)*i;
}
// end of for
};
this.mouseListener = new Object();
this.mouseListener.onMouseWheel = function(xx) {
if (tab_mc._y<0) {
tab_mc._y = 0;
} else if (tab_mc._y>scrollLimit) {
tab_mc._y = scrollLimit;
} else {
tab_mc._y -= xx;
}
};
Mouse.addListener(this.mouseListener);

__________

chris (http://www.fcOnTheWeb.com) says:

2010-02-15 07:26:12

Sorry, I can't think of any reason why something would work in Flash Player 9 and not in Flash Player 10.

Good luck!

__________

joe (http://squarepegbroadacst.com) says:

2010-05-21 12:38:37

First of all, thanks Chris for putting this example up on the web.

I've got the same problem as Kaiser but I'm closer to solving it:

Player 10 won't pick up my mouse wheel events using the code above when the window mode is set to transparent.

I'm using Flash 8, AS 2.

I haven't worked out why this is the case or how to fix it yet, but I'll report back when I do.

__________

Regan says:

2010-07-08 04:36:23

Do you know how to stop scrolling?

Great tute thanks!

__________

tamer (http://htpp://www.avrasyaktif.com) says:

2010-08-13 08:43:12


box_mc.y = box_mc.y - (event.delta * 3);

???? why don't _y down

__________

Gabriel says:

2011-02-28 20:08:50

would be cool to know how to do it horizontaly

__________

Matt says:

2011-03-04 12:18:34

Thanks for the tutorial, was thinking it'd be a lot harder than this!

@Gabriel If you mean to move the block horizontally when you scroll the wheel, i'd assume you just swap y for x in the code, so box_mc.x etc

__________

Chris (http://www.fcOnTheWeb.com) says:

2011-03-05 04:42:06

@Matt, @Gabriel: Yes Matt, you're correct - simply changing the _y to _x will have it moving left to right. Thanks.

__________

Betinho Silva says:

2011-03-30 04:40:44

Hello, is not reversed the direction of the scroll? The solution?

__________

Alice says:

2011-08-17 04:27:59

//Inverted version

var mouseListener:Object = new Object();
mouseListener.onMouseWheel = function(delta)
var track:Number = (delta*-1);
{
if ((track > 0 && box_mc._y < 270) || (track < 0 && box_mc._y > 0)) {
box_mc._y = box_mc._y + (track * 3);
}
}
Mouse.addListener(mouseListener);

__________

andros says:

2011-10-05 20:22:33

that works perfectly except when high mouse-wheel scroll sensibility is used (mouse for gamers) with which the box gets out of the main container when fast scrolling.
Dunno if I'm being clear, but if soeone knows how to fix that, it would be so helpful.

__________

Miguel says:

2011-12-16 04:35:00

Hi! This is a great tutorial. Quick question. Is there any way to implement multiple mouse listeners in the same project? The problem I have is that I have 4 section on the movie that are independent from each other. The scrolling works but for all of the at the same time. What I want is to scroll only when mouse over that section.

Using AS2 and not an expert.

Thank you!

__________

Chris (http://www.fcOnTheWeb.com) says:

2011-12-17 07:48:02

Hi Miguel.

Without know the layout of your SWF file it's hard to say, but my best suggestion at this stage is select the movie to scroll based on the x and y coordinates of the cursor.

For example, if the cursor x is between 0 and 100, scroll the first MovieClip, or if between 100 and 200 then scroll the second MovieClip, etc.

Check the x and y of the cursor and then choose the MovieClip to scroll accordingly.

I hope this helps.

__________

boopathi says:

2011-12-22 07:16:19

Good post!thanks a lot.

__________

rabo (http://flashden.blogspot.com/) says:

2012-02-29 10:48:12

Hello, is not reversed the direction of the scroll? The solution?

__________

Zanzlanz (http://zanzlanz.com) says:

2012-05-08 00:01:33

This is a great tutorial! Thanks for bringing to my attention the page scrolling glitch. I would have not even noticed it if you didn't mention it!

I did some small research and I did manage to find a very easy fix for it. It's a AS3 package I found online.

http://code.google.com/p/mousewheeltrap/downloads/list

I put the code in my game and it worked fine, although I have not tested it with every browser. (It should work the same, right?)

Hope it helps everyone else! And again, thanks for the tutorial :)

__________

Charles (http://seekrit.info/) says:

2012-07-28 18:22:14

Thanks for the tutorial, was quite helpful for the Flash project I'm working on atm.

__________

Marina says:

2012-08-02 19:00:45

i would love if u could adapt the mouseListener that u gave us for as2 to play fwr a movie on scroll down and rewind on scroll up!! living the movie always in the same position of x and y....!!! is that even possible??

k, if is im getting exited, please help.

__________

uttam says:

2012-09-14 20:08:32

i want negative direction of your work in action script 2.0

__________

uttam says:

2012-09-14 20:11:49

if i roll mouse roller to upward the box should go upward itself but in your work its coming downward... but i need that box should go upward

__________

RAVINDER KUMAR says:

2013-01-26 19:58:38

i want negative direction of your work in action script 2.0

__________

Shiva says:

2013-12-07 18:14:37

This is a great tutorial however I need my animation to play not only with the scoll wheel on the mouse but also with the up and down scroll navigation bar on the side of the web page... is there a way of implementing this?

Thanks.

__________

Cheap Ralph Lauren UK (http://cheapralphlaurenuk.1minutesite.co.uk/) says:

2014-01-18 03:06:53

Gucci Shoes UK, http://www.guccivshoesfactory.net/
Polo Ralph Lauren Outlet Online, http://www.rralphlaurenoutlet.com/
Ralph Lauren Outlet Online, http://www.ralphlaurenipolo.com/
Ralph Lauren UK, http://www.polo-outletstoreonline.com/
Beats by Dre, http://www.discountbeatsbydresale.com/
Sacs Longchamp Pairs, http://www.saclongchamppairs.com/
Canada Goose Outlet, http://www.thecanadagooseoutlet.com/
Hollister UK Shops, http://www.cheaphollistersale.co.uk/
Michael Kors Outlet Online, http://www.michaelkors.so/
Marc Jacobs Outlet, http://www.marcjacobsonsale.com/
Michael Kors Outlet, http://www.michaelkorsr.com/
North Jackets Clearance, http://www.north-faceoutletonlines.net/
Burberry Outlet Online, http://www.burbagssale2013.com/
North Clearance Outlet Online, http://www.north-clearance.com/
Coach Factory, http://www.coach-factories.com/
Coach Outlet Online, http://www.coach-purseonsale.com/
Cheap Ralph Lauren UK, http://cheapralphlaurenuk.1minutesite.co.uk/
http://marcjacobsoutlet-2014.tripod.com/
http://www.michaelkorsoutletr.com/
Michael Kors Outlet
Discount Michael Kors
http://www.michael-korsfactorystore.com/
Michael Kors Outlet
Michael Kors Factory Store
http://www.michaellkorsfactoryonline.com/
Michael Kors Outlet
Discount micheal kors

__________

celine (http://www.buycelineusa.com) says:

2014-04-16 06:54:25

Really enjoy reading this article

__________

oakley sunglasses cheap (http://www.oakleysunglassescheap.us.com/) says:

2014-07-12 07:08:15

http://www.oakleysunglassescheap.us.com/ oakley sunglasses

cheap
http://www.coachoutletstoreonlineco.com/ coach factory outlet
http://www.abercrombie-andfitch.com/ abercrombie and fitch
http://www.michaelkors-outletsonline.com/ michael kors outlet
http://www.oakley-sunglassesoutlet.com/ oakley sunglasses

outlet
http://www.tory-burchoutlet.com/ tory burch outlet
http://www.abercrombieandfitchstore.com/ abercrombie & fitch
http://www.rayban--sunglasses.com/ ray ban sunglasses
http://www.fit-flops.co.uk/ fitflops
http://www.coachoutlet-factoryonline.com/ coach factory outlet
http://www.toryburch-shoes.com/ tory burch shoes
http://www.coachstoreonline.org/ coach outlet store online
http://www.coachfactory-outletinc.com/ coach factory outlet
http://www.cheapraybansunglasses.us/ cheap ray ban sunglasses
http://www.valentino.us.com/ valentino
http://www.fitfloponline.co.uk/ fitflop uk
http://www.coach-outletinc.com/ coach outlet
http://www.coachoutlet-factorystore.com/ coach outlet store

online
http://www.airjordan.us.com/ air jordan
http://www.timberlandshoesus.com/ timberland shoes
http://www.michaelkorsoutlet-online.us/ michael kors outlet
http://www.coachfactoryoutletnew.com/ coach factory outlet
http://www.coach-factoryoutletinc.com/ coach factory outlet
http://www.truereligionbrandjeans.us.com/ true religion outlet
http://www.truereligionjeans.us.com/ true religion jeans
http://www.coach--handbags.com/ coach outlet online
http://www.louisvuitton--outlet.us/ louis vuitton outlet
http://www.timberland--shoes.com/ timberland boots
http://www.isabelmarantshoes.us.com/ isabel marant shoes
http://www.coachoutletonline-factory.com/ coach outlet online
http://www.michaelkorsoutlet-online.net/ michael kors purses
http://www.louisvuitton-handbag.us/ louis vuitton handbags
http://www.coach-outletstoreonline.com/ coach outlet store

online
http://www.true-religion-jeans.com/ true religion jeans
http://www.coach-outletfactoryonline.com/ coach factory outlet

online
http://www.officialcoachfactoryoutlet.com/ coach factory outlet
http://www.louisvuitton-outlet.org/ louis vuitton outlet
http://www.coach-factoryoutlets.com/ coach factory outlet
http://www.coach-outletonline.us/ coach outlet online
http://www.michaelkorsoutletonlinestore.us/ michael kors outlet
http://www.michaelkorsoutletstoresco.com/ michael kors outlet

store
http://www.tiffanysjewelry-co.com/ tiffany and co jewelry
http://www.celineoutlet-online.com/ celine outlet
http://www.cheap-toms.net/ toms shoes
http://www.celine-handbags.com/ celine handbags
http://www.toms--shoes.us/ toms outlet
http://www.fitflopsandalssale.com/ fitflops
http://www.fitflopusaonline.com/ fitflop outlet
http://www.prada-handbag.com/ prada handbags
http://www.tiffanyandcoinc.com/ tiffany jewelry
http://www.prada-outlet.org/ prada outlet
http://www.michael-korsoutletinc.com/ michael kors
http://www.marcjacobs.us.com/ marc jacobs
http://www.supra.us.com/ supra shoes
http://www.ralphlauren.us.com/ polo ralph lauren
http://www.tiffanyjewelry.us.com/ tiffany jewelry
http://www.shoestoms.net/ toms shoes

__________

POLO says:

2014-08-04 07:54:20

http://www.superbagsmarket.com/ Super Bags Market
http://www.nike-jordanshoes.com/ Nike Jordan Shoes
http://www.thebeatsbydre.net/ Beats By Dre Outlet
http://www.michaelusakors.com/ Michael Kors Outlet Online
http://www.polo-tshirts.com/ Ralph Polo Outlet Online
http://www.northsclearance.com/ North Clearace Outlet
http://www.polo-ralphlaurenonline.com/ Ralph Polo Outlet
http://www.guccishoesuk-2014.net/ Gucci Shoes Outlet
http://www.michaelkorsstates.com/ Michael Kors Outlet
http://www.polooutlet-store.com/ Polo Outlet Store
http://www.ralph-laurenhome.com/ Ralph Lauren UK
http://www.marcjacobsonsale.com/ Marc Jacobs On Sale
http://www.mcmworldwides.com/ MCM Outlet
http://www.salongchamppairs.com/ Sac Longchamp Pairs
http://www.canada-gooser.com/ Canada Goose Outlet
http://www.burberrybags2014.com/ Burberry Outlet
http://www.michaelkors.so/ Michael Kors Outlet
http://www.oakley-sunglassfactory.com/ Oakley Sunglaases Factory
http://www.north-faceoutlet.us.com/ North Face Outlet Online
http://www.moncler-clearance.com/ Moncler Clearance
http://www.woolrich-clearance.com/ Woolrich Clearance
http://www.barbour-jacketsoutlet.com/ Barbour Jackets Outlet Online
http://www.moncler-jacketsoutletonline.com/ Moncler Jackets Outlet Online
http://www.monsterbeatsbydres.net/ Monster Beats Outlet
http://www.louis-vuittonblackfriday.com/ Louis Vuitton Outlet
http://www.lv-guccishoesfactory.com/ Louis Vuitton Factory
http://www.mcmoutlet-jp.com/ MCM 店铺
http://www.cheapdiscountoutlet.com/ Discount Clothes Sale
http://www.michael-korsfactoryonline.com/ Michael Kors Factory Online
http://www.coach-factoryoutlets.net/ Coach Factory Outlet
http://www.coach-blackfriday.net/ Coach Black Friday
http://www.coach-storeoutletonline.com/ Coach Store Outlet Online
http://www.coach-factoryoutletonlines.com/ Coach Factory Outlet Online
http://www.coachcoachoutlet.net/ Coach Outlet
http://www.coach-factory.net/ Coach Factory
http://www.coach-pursesoutlet.net/ Coach Purses Outlet Online
http://www.coach-outletonline.net/ Coach Outlet USA
http://www.mksfactoryoutlet.com/ Michael Kors Factory Outlet
http://www.zxcoachoutlet.com/ Coach Outlet Online USA
http://www.mischristmas.com/ Coach Factory Outlet Online
http://www.misblackfriday.com/ Black Friday
http://www.newoutletonlinemall.com/ Coach Purses Outlet Online
http://www.clickmichaelkors.com/ Michael Kors USA
http://www.cmichaelkorsoutlet.com/ Michael Kors Outlet USA
http://www.ralphlaurenepolo.com/ Ralph Lauren Polo

__________

hollister clothing store (http://www.rayban--sunglass.com/) says:

2014-08-05 07:26:16

http://www.rayban--sunglass.com/ ray ban sunglasses
http://www.customscopyright.com/ coach factory outlet
http://www.hollisterclothing-store.com/ hollister clothing store
http://www.michael--korsoutletonline.com/ michael kors outlet online
http://www.oakley--sunglass.com/ oakley sunglasses cheap
http://www.saclancelfrance.com/ sac lancel
http://www.katespade--outlet.com/ kate spade outlet
http://www.katespadeoutlet-online.com/ kate spade outlet online
http://www.katespade-online.com/ kate spade online
http://www.coachoutlet-onlinestore.com/ coach factory outlet
http://www.abercrombie-andfitch.com/ abercrombie and fitch
http://www.michaelkors-outletsonline.com/ michael kors outlet
http://www.sacportefeuille.com/ sac portefeuille
http://www.oakley-sunglassesoutlet.com/ oakley sunglasses outlet
http://www.michael--korsoutlet.com/ michael kors outlet
http://www.toryburch-outlet-online.com/ tory burch outlet online
http://www.abercrombieandfitchstore.com/ abercrombie & fitch
http://www.fit-flops.co.uk/ fitflops
http://www.coachoutlet-onlinefactory.com/ coach outlet online
http://www.coachfactoryoutlet-bag.com/ coach factory outlet
http://www.tory-burchshoes.com/ tory burch shoes
http://www.coachfactoryoutletclearance.com/ coach factory outlet
http://www.raybansunglasses-cheap.com/ cheap ray ban sunglasses
http://www.valentino.us.com/ valentino
http://www.fitfloponline.co.uk/ fitflop uk
http://www.coach-outletonlinefactory.com/ coach outlet
http://www.coachoutlet-factorystore.com/ coach outlet store online
http://www.air--jordans.com/ air jordan
http://www.timberlandshoesus.com/ timberland shoes
http://www.michaelkors--handbags.com/ michael kors handbags
http://www.coachfactoryoutletnew.com/ coach factory outlet
http://www.coachfactory-onlineoutlet.com/ coach factory outlet
http://www.truereligionbrandjeans.us.com/ true religion outlet
http://www.truereligionjeans.us.com/ true religion jeans
http://www.coach--handbags.com/ coach outlet online
http://www.louisvuitton--outlet.us/ louis vuitton outlet
http://www.timberland--shoes.com/ timberland boots
http://www.isabelmarantshoes.us.com/ isabel marant shoes
http://www.coachoutletonline-factory.com/ coach outlet online
http://www.michael-korsonlineoutlet.com/ michael kors outlet online
http://www.louisvuitton-handbag.us/ louis vuitton handbags
http://www.coach-outletstoreonline.com/ coach outlet store online
http://www.true-religion-jeans.com/ true religion jeans
http://www.coach-outletfactoryonline.com/ coach factory outlet online
http://www.coachfactoryoutlet-official.com/ coach factory outlet
http://www.louis-vuittonoutlets.com/ louis vuitton outlet
http://www.officialcoachonlinefactorysale.com/ official coach factory outlet
http://www.coachoutlet-storefactory.com/ coach outlet online
http://www.michael-korsoutletsonline.com/ michael kors outlet
http://www.tiffanysjewelry-co.com/ tiffany and co jewelry
http://www.celineoutlet-online.com/ celine outlet
http://www.celine-handbags.com/ celine handbags
http://www.toms--shoes.us/ toms shoes
http://www.fitflopsandalssale.com/ fitflops
http://www.fitflopusaonline.com/ fitflop outlet
http://www.prada-handbag.com/ prada handbags
http://www.tiffanyandcoinc.com/ tiffany jewelry
http://www.prada-outlets.com/ prada outlet
http://www.michael-korsoutletinc.com/ michael kors
http://www.marcjacobs.us.com/ marc jacobs
http://www.supra.us.com/ supra shoes
http://www.ralphlaurenpolo-inc.com/ polo ralph lauren
http://www.tiffanyjewelry.us.com/ tiffany jewelry


Add your comment on this article below:

Sorry, there's an error with your form entries. We really appreciate your comment, so please try again.

Form submitting now...

Name:

Website:

Email address (not displayed):

Enter your comment below: