In the previous tutorial we talked about mouse wheel and how we can use it in AS3. After that some of my friends emailed me that they are interested to detect the scrolling speed! So I came up with a simple idea and in this tutorial we will use that idea to detect the scrolling speed.

In AS3: Mouse Wheel tutorial we used MouseEvent to determine what direction the mouse wheel has moved. But as you can see event.delta usually returns the same number that is not exactly related to the speed of scrolling the mouse wheel in your movie! delta value depends on the system settings namely the scroll speed which can be different from system to system (e.g. typical values are 3, 5 or 7 and their negatives). So to have a better estimation on the scrolling speed in our movie clips we just need a timer and a simple counter so we can count the number of  mouse wheel angle changes per a period of time (for example per second) so we can have an estimation on scrolling speed per time.

Step 1: Create a new Flash movie with the ActionScript version set to 3.0. The background color, frame rate and the stage size do not matter for this tutorial.

Step 2: Create one new layer, so you will have two layers. Then name the one at the bottom Texts and the one on top Actions.

Step 3: Now, select the Texts layer and use Text Tool (T) to add these two static text boxes to your movie clip.

Step 4: We need two dynamic text boxes as well so we can show the speeds using ActionScript. Use the Text Tool (T) again, but this time create two dynamic text boxes. You should access Properties Inspector and select Dynamic Text from Text Type drop-down list.

Step 5: Now, we need to set an Instance Name for our dynamic text boxes so we can easily refer to it using ActionScript. Use the Select Tool (V) and select the dynamic text box on the top, access the Properties Inspector and set ScrollingSpeed as the instance name of that text box. Do exactly the same for the bottom dynamic text box, but this time set DeltaSpeed as the instance name.

Step 6: Click once on the name of the Actions layer and then right-click the only frame on it and select Actions to open Actions panel.

Step 7: Copy and paste this code to your Actions panel. 

import flash.events.MouseEvent;
import flash.events.TimerEvent;

var counter:Number=0;
var myTimer:Timer=new Timer(1000);

function timerListener(e:TimerEvent):void {
 ScrollingSpeed.text=String(counter);
 counter=0;
}
function MouseWheel(event:MouseEvent):void {
 DeltaSpeed.text=String(event.delta);
 counter++;
}

stage.addEventListener(MouseEvent.MOUSE_WHEEL, MouseWheel);
myTimer.addEventListener(TimerEvent.TIMER, timerListener);
myTimer.start();

Note: We have set the timerListener function to run every one second. On each update, it will show the amount of the counter variable and after that it will set it to zero so it can recount the number of mouse wheel angle changes.

That’s it, We are done. You can now test your movie (Ctrl+Enter) and scroll as fastest as you can and check the result. Let me know the result as well !

Downloads:

Flash CS3: Detecting scrolling speed :: AS3

Flash CS4: Detecting scrolling speed :: AS3

2 Responses to “AS3: Detecting scrolling speed”

1. electric egg cookers says:

   October 19, 2009 at 9:24 am

   Every time i come here I am not disappointed, nice post!

   Greetings from Tim.
2. admin says:

   October 19, 2009 at 11:20 am

   Thanks .