Scrolling Flash with OnMouseWheel

*note: this article pertains only to Flash 6. Flash 7 will automatically scroll version 6 and 7 swfs*


Internet Explorer 6 comes with a unique event handler which fires when a user scrolls their mousewheel over an object on the page. The event handler is called "onmousewheel" and can easily be used with a flash object to scroll content inside the movie.

Example:

Example usage of onMouseWheel in Flash
*note: click inside a textfield to activate*

Usage:

Html code

Three functions should be placed in the head of the html document.

<script type="text/javascript">
function enableScroll(obj){
	obj.canScroll = true;
}
function disableScroll(obj){
	obj.canScroll = false;
}
function scrollFlash(obj){
	if(obj.canScroll == true){
		window.event.returnValue = false;
		if (window.event.wheelDelta >= 120){
			var scrollSpeed = -3;
		}else if(window.event.wheelDelta <= -120){
			var scrollSpeed = 3;
		}
		obj.SetVariable("_root.scrollWheel",scrollSpeed);
	}
}
</script>

And in the flash object place the following events.

<object id="Mouser" data="mousewheel.swf" width="480" height="300" onmousewheel="scrollFlash(this)" onfocus="enableScroll(this)" onblur="disableScroll(this)" type="application/x-shockwave-flash">
	<param name="movie" value="mousewheel.swf" />
</object>

Here's how the process works:

The onfocus and onblur events call the functions "enableScroll" and "disableScroll" respectively which control a variable labeled "canScroll". What this means, is when a user clicks on the flash movie, you'll allow the user to scroll, and when they click outside the movie, you'll disable the ability to scroll. I'll go into detail below on why this is needed.


The onmousewheel event and the function it calls "scrollFlash" contains the core the functionality. If the user is allowed to scroll based on the conditions met in the above paragraph, two actions effectively happen.

1. Stop the html page from scrolling - The line window.event.returnValue = false; will stop the browser window from scrolling. This is why it's important to keep track of the "canScroll" variable, you don't want to disallow a user to scroll a page anytime their mouse is over the flash movie, just when they've clicked inside it.

2. Send the scroll speed to flash - The variable window.event.wheelDelta will tell you which direction a users mousewheel was spun. The value passed into flash is either a negative or number to set the textfield.scroll to. If you find the scrolling is too fast or slow, you can change the negative and positive value to adjust the speed. The value of scrollspeed is then passed into flash and sets the variable _root.scrollWheel equal to 3 or -3.


Flash Code

If your movie happens to be one giant textfield, like our Html Editor, then the simplest actionscript to handle scrolling that textfield would be.

_root.onEnterFrame = function() {
	if (scrollWheel != 0) {
		_root.myTextField.scroll += parseInt(scrollWheel);
		scrollWheel = 0;
	}
};

Basically when the variable scrollWheel changes(due to a new value being passed from the javascript function "scrollFlash"), add that value to the current textfield scroll. Don't worry, you can't overscroll a textfield in flash.


Having multiple scrollable textfields isn't much different, it just requires a bit more code. In the downloadable file, two examples are given, one example controls which textfield is scrolled based on which textfield has focus. Focus is determined by which textfield has been clicked in. The second example controls which textfield is scrolled by the position of your cursor when the mousewheel is scrolled. You can comment one or the other out to see the different effects.

Additional Notes:

Consider pulling onfocus="enableScroll(this)" onblur="disableScroll(this)" out of the object tag so you can control these functions from inside the movie. The benefits of this come in when you've got a large flash movie with one small textfield and don't want to disable the html page from scrolling unless the user is specifically interacting with the textfield. Also, you can determine whether to disable the html page from scrolling only if the textfield has a maxscroll > 1 (meaning that the textfield has more content to scroll) The code in flash would then be.

myTextField.onSetFocus = function() {
	if(this.maxscroll > 1){
		getUrl("javascript:enableScroll(document.flashObjectId)");
	}
};
myTextField.onKillFocus = function(){
	getUrl("javascript:disableScroll(document.flashObjectId)");
}

Download

Example Files: MLAB_flash_mousewheel.zip

Size: 44 kb

Last Updated: 2003-04-26