HDSlide an AS2 Class For Making Things Slide

– taterboy | January 7th, 2010

Filed under: ActionScript 2, Flash, Free Components/Classes

HDSlide is a collection of code brought together in an effort to make one actionsScript 2 class that will fulfill all your actionScript sliding needs. This version is very versatile with two completely different animation modes.

Animation Modes:
One animation mode will change the speed of the sliding animation based on how far the mouse is moved away from the center. When the mouse is in the middle, the animation moves very slowly, then speeds up as the mouse moves toward the edges. The other mode is more like scrolling, if your mouse is at the left side or top of the slide area, the slide will be at the beginning. As the mouse is moved to the other side, the sliding MovieClip will scroll based on the mouses position between the two extremes.

Current Samples:
The FLA contains two samples that show off just a few usage variations. The FLA was built in a hurry, so it is not an example of how things should be done, it is just a sample of what is possible. There are many more possibilities, just download the source and experiment. One example not shown is the ability to pause the mouse move detection using “pauseSlide(true)” while still having the slideTo() method fully functional.

Usage:
1. Create a MovieClip to be scrolled.
2. Then mask that MovieClip with another MovieClip.
3. Give them both instance names.
4. Import the class

?View Code ACTIONSCRIPT
 import com.hdi.as2.HDSlide;

5. Create a new instance of the class with the instance names above in the arguments.

?View Code ACTIONSCRIPT
var hSlide:HDSlide  = new HDSlide(menuMC, menuMask);

That’s it to make a simple sliding movieClip.

Now For The Variations:
There are four optional arguments that can be passed to change the way HDScoll makes things slide.

var hSlide:HDSlide = new HDSlide([movieClip : Required], [mask : Required], [speed : Optional],[isScrolling : Optional], [allowOverRide : Optional],[isHorizontal : Optional] );

1. speed: In the default animation mode, higher the speed number the faster things slide. In scrolling mode, speed acts as an easing value, so higher the slower things move. Easing works best between 5 and 15. The default is 65 for the default animation mode.

2. isScrolling: To make the slide detect mouse movement like there is an invisible scroll bar attached to the mouse, pass in true. Default is false.

3. allowOverRide: By default when the mouse is detected any current animations will be stopped and the mouse movement has priority. This allows the slideTo() method to have priority. The mouse movement will not be detected until a slideTo animation is complete.

4. isHorizontal: To make a vertical sliding MovieClip, pass in false. Everything will be changed to work on the y axis. Default is true

For Even More Control:
Here are a few methods to add more commonly used functions

pauseSlide(Boolean) – disables (true) or re-enables (false) mouse movement detection. SlideTo still works when HDSlide is paused. Check HDSlide.isPaused for paused status.

killSlide(Boolean) – cleans up onEnterFrame listeners and will disable everything (true). HDSlide can be restarted by passing in false. Check HDSlide.isDead for current status.

slideTo(position:Number, ease:Number) – Use slideTo() with mouse movement detection for a super interactive experience. The position you pass in is the x coordinate that will be scrolled to the left of the mask if space permits. Easing will provide more style to the animation, the higher the number the slower things will slide.

The Class

?View Code ACTIONSCRIPT
/******************************************************************
** HDSlide v1.0 1/3/10
** Author: Todd Williams
** Website: http://www.taterboy.com
** Website: http://hdinteractive.com
** 
** Creates a horizontal or vertical scrolling MovieClip based
** on mouse position.
** 
** Usage:
** 1. Create a MovieClip to scroll, give it an instance name
**    and place it on the stage in it's starting scroll position
** 
** 2. Create a MovieClip for a mask, mask the MovieClip
**    created in step one and give it an instance name.
** 
** 3. Import the class into actionScript - import com.hdi.as2.HDSlide;
** 
** 4. Place the following line in your Actions panel, adding your
**    instance names in the appropriate places.
**    var hSlide:HDSlide = new HDSlide([movieClip : Required], [mask : Required], [speed : Optional], [isScrolling : Optional], [allowOverRide : Optional], [isHorizontal : Optional] );
**
** @param movieClip:MovieClip -  the movieClip that needs to slide
** @param mask:MovieClip - a movieClip instance of a mask that is masking movieClip
** @param speed:Number - value to determine speed or ease of slide animation
** @param isHorizontal:Boolean - if the orientation id horizontal or vertical
** @param isScrolling:Boolean - effects the way the animation reacts to the mouse movement on top of the slide.
**                              speed for scrolling mode is for easing, higher means slower, lower numbers work best 5-15.
** @param allowOverRide:Boolean - will disable mouseMove listener while slideTo method is used, mouseMove will restart again once slideTo has finished animating
**
** Methods:
** killSlide(Boolean); removes or restarts the EnterFrame event listener depending on the boolean argument.
**
** pauseSlide(Boolean); pauses or unpauses the rollRover Event listener depending on the boolean argument.
**
** slideTo(position:Number, ease:Number): send a specific x/y coordinate to slide to. Add an ease value for a little style, default is 0.
**
** You can add a function to the MovieClip created in step one to listen for slideTo updates or when the slide has reached it's min or max ranges.
** menu.slideAlert = function(str:String){
**	trace(str);
**	//react when menu slides into place, 
**  //strings returned ( "man" : manual or slideTo event, "min": reached starting point, "max": reached end)
** }
**
** Properties:
** isPuased: Boolean - tells if HDSlide is currently paused.
** isDead: Boolean - tells if HDSlide is currently dead.
** 
** 
********************************************************************/
 
class com.hdi.as2.HDSlide extends MovieClip{
 
	private var targObj:Object = null;
	private var targMask:Object = null;
	private var maskMid:Number = 50;
	public var speed:Number = 10;
	private var maskX:Number = 0;
	private var maskWidth:Number = 100;
	private var startX:Number = 0;
	public var isPaused:Boolean = false;
	public var isDead:Boolean = false;
	private var main:MovieClip;
	private var alertDispatched:Boolean = false;
	private var autoSlide:Number = 0;
	private var autoDir:Number = 0;
	private var autoEase:Number = 0;
	private var allowOverRide:Boolean = false;
	private var autoPause:Boolean = false;
 
	private var isHorizontal:Boolean;
	private var isScrolling:Boolean;
 
 
	public function HDSlide(targ:Object, tmask:Object, slideSpeed:Number, transitional:Boolean, overRide:Boolean, horz:Boolean){
 
		super();
 
		targObj = targ;
		targObj.main = this;
		targMask = tmask;
		speed = slideSpeed;
		isHorizontal = horz;
		allowOverRide = overRide;
		isScrolling = transitional;
 
		if(speed == undefined || speed == null){
			speed = 65;
		}
 
		if(isHorizontal == undefined || isHorizontal == null){
			isHorizontal = true;
		}
 
		if(allowOverRide == undefined || allowOverRide == null){
			allowOverRide = false;
		}
 
		if(isScrolling == undefined || isScrolling == null){
			isScrolling = false;
		}
 
		var err:Boolean = false;
 
		if(targObj == undefined || targObj == null){
			trace("The target MovieClip is null or undefined");
			err = true;
		}
 
		if(targMask == undefined || targMask == null){
			trace("The target MovieClip mask is null or undefined");
			err = true;
		}
 
 
		if(!err){
			setupSpecs();
			loop();
		}
 
	}
 
	private function setupSpecs(){
		if(isHorizontal){
			startX = targObj._x;
			maskX = targMask._x;
			maskWidth = targMask._width;
			maskMid = maskWidth/2 + maskX;
 
		}
		else{
			startX = targObj._y;
			maskX = targMask._y;
			maskWidth = targMask._height;
			maskMid = maskWidth/2 + maskX;
 
		}
 
	}
 
	public function killSlide(val:Boolean){
		isDead = val;
		if(val){
			delete targObj.onEnterFrame;
		}
		else{
			loop();
			isPaused = false;
		}
	}
 
	public function pauseSlide(val:Boolean){
		isPaused = val;
	}
 
	public function slideTo(val:Number, ease:Number){
		var tempX:Number = startX - val;
		if(ease != undefined && ease != null && ease > 0){
			autoEase = ease;
		}
		else{
			autoEase = 0;
		}
 
		if(isHorizontal){
			autoDir = targObj._x - tempX;
		}
		else{
			autoDir = targObj._y - tempX;
		}
		autoSlide = tempX;
		if(allowOverRide && !autoPause && autoDir != 0){
			autoPause = true;
		}
 
		//trace(allowOverRide + " / " + autoPause + " / " + autoSlide + " / " + autoDir);
	}
 
	private function positionTo(pos:Number){
		var prop:String;
		var propDist:String;
		var minX:Number;
		var dist:Number;
 
		if(isHorizontal){
			prop = "_x";
			propDist = "_width";
		}
		else{
			prop = "_y";
			propDist = "_height";
		}
 
		minX = startX -  (targObj[propDist] - maskWidth);
		dist = pos - targObj[prop];
		var tempX:Number = targObj[prop] + dist/speed;
		if(tempX > minX && tempX < startX){
			targObj[prop] = tempX;
		}
		else{
			if(tempX > startX){
				targObj[prop] = startX;
			}
			else{
				targObj[prop] = minX;
			}
		}
 
		//trace(pos  + " / " + targObj[prop]);
 
		if((pos == startX && targObj[prop] == startX) || (pos == minX && targObj[prop] == minX)){
			if(!alertDispatched){
				alertDispatched = true;
				pos == startX ? targObj.slideAlert("max") : targObj.slideAlert("min");
			}
 
		}
 
	}
 
	private function checkAutoSlide(){
		var prop:String;
		var propDist:String;
		var newX:Number;
		var minX:Number;
		var perc:Number;
 
		if(isHorizontal){
			prop = "_x";
			propDist = "_width";
		}
		else{
			prop = "_y";
			propDist = "_height";
		}
		if(autoDir > 0){
			minX = startX -  (targObj[propDist] - maskWidth);
			if(autoSlide < minX){
				autoSlide = minX;
			}
			if(autoEase > 0){
				newX = targObj[prop] - (targObj[prop] - autoSlide)/autoEase;
			}
			else{
				newX = targObj[prop] - speed;
			}
			if(Math.floor(newX) > Math.ceil(autoSlide)){
				targObj[prop] = newX;
				alertDispatched = false;
			}
			else{
				targObj[prop] = autoSlide;
				if(!alertDispatched){
					alertDispatched = true;
					if(allowOverRide){
						autoPause = false;
					}
					autoSlide = 0;
					autoDir = 0;
 
					targObj.slideAlert("man");
					if(autoSlide == minX){
						targObj.slideAlert("max");
					}
 
				}
 
				//trace(" end = " + autoDir + " / " + autoSlide);
			}
 
		}
		else{
			if(autoSlide > startX){
				autoSlide = startX;
			}
			if(autoEase > 0){
				newX = targObj[prop] + (autoSlide - targObj[prop])/autoEase;
			}
			else{
				newX = targObj[prop] + speed;
			}
 
			if(Math.ceil(newX) < Math.floor(autoSlide)){
				targObj[prop] = newX;
				alertDispatched = false;
			}
			else{
				targObj[prop] = autoSlide;
				if(!alertDispatched){
					if(allowOverRide){
						autoPause = false;
					}
					autoSlide = 0;
					autoDir = 0;
					alertDispatched = true;
					targObj.slideAlert("man");
					if(autoSlide == startX){
						targObj.slideAlert("min");
					}
				}
			}
		}
	}
 
	private function loop(){
		targObj.onEnterFrame = function(){
			if(!main.isPaused && !main.autoPause){
				if(main.targMask.hitTest(_root._xmouse, _root._ymouse) == true){
					if(main.autoDir != 0){
						main.autoDir = 0;
						main.autoSlide = 0;
					}
					var newX:Number;
					var minX:Number;
					var perc:Number;
					var prop:String;
					var propDist:String;
					var propMouse:String;
 
					if(main.isHorizontal){
						prop = "_x";
						propDist = "_width";
						propMouse = "_xmouse";
					}
					else{
						prop = "_y";
						propDist = "_height";
						propMouse = "_ymouse";
					}
 
					if(main.isScrolling){
						perc = (_root[propMouse] - main.startX)/main.maskWidth;
						var pos:Number = main.startX - ((this[propDist] - main.maskWidth)*perc);
						//trace(perc + " / " + main.startX + " / " + _root[propMouse] + " / " + main.maskWidth);
						if(perc > 0.01 && perc < 0.99){
							main.alertDispatched = false;
						}
						main.positionTo(pos);
					}
					else{
						if(_root[propMouse] > main.maskMid){
							perc = (_root[propMouse] - main.maskMid)/main.maskMid
							newX = this[prop] -  perc * main.speed;
							minX = main.startX -  (this[propDist] - main.maskWidth);
							if(newX > minX){
								this[prop] = newX;
								main.alertDispatched = false;
							}
							else{
								this[prop] = minX;
								if(!main.alertDispatched){
									main.alertDispatched = true;
									this.slideAlert("max");
								}
							}
						}
						if(_root[propMouse] < main.maskMid){
							perc = (main.maskMid - _root[propMouse])/main.maskMid
							newX = this[prop] + perc * main.speed;
							if(newX < main.startX){
								this[prop] = newX;
								main.alertDispatched = false;
							}
							else{
								this[prop] = main.startX;
								if(!main.alertDispatched){
									main.alertDispatched = true;
									this.slideAlert("min");
								}
							}
						}
					}
 
				}
 
			}
			if(main.autoDir != 0){
				//trace("check " + " / " + main.autoDir);
				main.checkAutoSlide();
			}
		}
	}
 
}

The Demo:

Get Adobe Flash player

The Source:
Download it here.

Technorati Tags: , , , , , , , ,

| No Comments » | facebook:

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment

*