February 5, 2009

Freebie: Flash MouseWheel Scrolling (AS2+XML)

Filed under: Flash, Freebies, Photoshop — Tags: , , , , , — admin @ 11:20 pm

This is something I’ve been wanting to figure out for a while and just now had time to take it on. In this example we’re scrolling text in a MovieClip that uses a traditional scrollbar and the MouseWheel. MouseWheel scrolling only occurs while the mouse is hovering over the text area. If you use this and resize those components, you won’t need to edit any of this. It’ll know what to do, trust me. ;)

Download Source View Example

This is the meat of the code that runs the scroller. The text info populates target_mc.main_txt. Invoke scrollInfo() to start the scrolling.

import mx.transitions.Tween;
import mx.transitions.easing.*;
 
track_mc._visible = false;
drag_mc._visible = false;
 
mouseListener = new Object();
 
function scrollInfo() {
	// If scrolling is not needed, hide scrolling assets
	track_mc._visible = false;
	drag_mc._visible = false;
	// Find height of the target_mc
	var clipheight:Number = target_mc._height;
	// Find y position of target_mc
	var starty:Number = 0;
	target_mc._y = 0;
	// Find height of mask over target_mc
	var maskheight:Number = mask_mc._height;
	// Limit scrolling
	var maxscroll:Number = maskheight-clipheight+starty;
	// Start dragging position
	var startposition:Number = drag_mc._y=track_mc._y;
	// Find y position of scrollbar face
	var startdragT:Number = drag_mc._y;
	// Limit var for scrollbar face
	var startdragB:Number = track_mc._height-drag_mc._height+track_mc._y;
	// Calculation for scrolling clip
	var diff:Number = (clipheight-maskheight)/(track_mc._height-drag_mc._height);
	// Var for activating the MouseWheel scrolling
	var mScroll:Boolean = false;
	// Disable all this if scrolling isn't necessary
	if (target_mc._height<mask_mc._height) {
		track_mc._visible = false;
		drag_mc._visible = false;
		mScroll = false;
		mouseWheelScroll();
	} else {
		track_mc._visible = true;
		drag_mc._visible = true;
		mScroll = true;
		mouseWheelScroll();
	}
	// drag_mc on press
	drag_mc.onRollOver = function() {
		this.gotoAndPlay("start");
	};
	drag_mc.onRollOut = function() {
		this.gotoAndPlay("end");
	};
	drag_mc.onPress = function() {
		// Start dragging, limit the dragging to parameters
		startDrag(this, false, this._x, track_mc._y, this._x, (track_mc._height+track_mc._y)-this._height);
		// Update scrolling clip in conjunction with the y position of the drag_mc
		this.onMouseMove = function() {
			difference = Math.abs(startposition-this._y);
			target_mc._y = -Math.round(difference*diff+starty);
		};
	};
	// On release, kill function
	drag_mc.onRelease = function () {
		stopDrag();
		delete this.onMouseMove;
	};
	drag_mc.onReleaseOutside = function () {
		stopDrag();
		this.gotoAndPlay("end");
		delete this.onMouseMove;
	};
	// Mouse Wheel Scrolling
	function mouseWheelScroll() {
		mouseListener.onMouseWheel = function(delta) {
			// Only do it if the mouse is hovering over the text area
			if (_xmouse > mask_mc._x && _xmouse < mask_mc._x+mask_mc._width && _ymouse > mask_mc._y && _ymouse < mask_mc._y+mask_mc._height) {
				if (delta<0 && mScroll == true) {
					if (target_mc._y>maxscroll+20) {
						target_mc._y += delta*10;
					} else {
						target_mc._y = maxscroll;
					}
				}
				if (delta>0 && mScroll == true) {
					if (target_mc._y<starty-20) {
						target_mc._y += delta*10;
					} else {
						target_mc._y = starty;
					}
				}
				drag_mc.gotoAndPlay("end");
			}
			// Move the scroll button to correspond with the position of the text (this was the hard part)
			difference = Math.abs(startposition-target_mc._y);
			var mT:Tween = new Tween(drag_mc, "_y", Regular.easeOut, drag_mc._y, difference/diff+starty, 0.2, true);
		};
		Mouse.addListener(mouseListener);
	}
}

Use it however you want, Enjoy!

2 Comments »

  1. Hi Aaron. This script looks great! This is exactly what I’m looking for. Unfortunately Flash 8 Professional cannot open the .fla file. I get error “Unexpected file format”.

    I would really appreciate it if you could send me a copy of the script that can be used in Flash 8.

    Kind regards

    Ziegfried

    Comment by Ziegfried — March 1, 2009 @ 10:58 pm

  2. muchas gracias por el script!. Funciona perfecto.

    Comment by ramiro — October 6, 2009 @ 10:30 pm

RSS feed for comments on this post. TrackBack URL

Leave a comment

© 2010 Aaron Benson. All rights reserved.

Powered by WordPress