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!

October 2, 2008

“Final Expedition” Artwork

Filed under: Photoshop — Tags: , — admin @ 12:02 am

Final Expedition

I’ve always been inspired by Craig Mullins and I’ve read enough Photoshop tutorials to get me inspired to create a dramatic piece of art. I still have a good ways to go with this art form, but I gave it a good first attempt. I’ve created this image from a few pictures from sxc.hu and used a ton of layering, brush work and blending modes.

© 2010 Aaron Benson. All rights reserved.

Powered by WordPress