Flash tutorials | Flash video tutorials | Flash actionscript | flash animation | flash menu | flashconf.com Flash tutorials, Flash video tutorials, Flash actionscript, flash animation , flash menu

//Import TweenMax and the plugin for the blur filter
import gs.TweenMax;
import gs.plugins.BlurFilterPlugin;

//Save the content's and mask's height.
//Assign your own content height here!!
var CONTENT_HEIGHT:Number = 940;
var MASK_HEIGHT:Number = 250;

//We want to know what was the previous y coordinate of the content (for the animation)
var oldY:Number = myContent.y;

//Position the content on the top left corner of the mask
myContent.x = myMask.x;
myContent.y = myMask.y;

//Set the mask to our content
myContent.mask = myMask;

//Create a rectangle that will act as the bounds to the scrollMC.
//This way the scrollMC can only be dragged along the line.
var bounds:Rectangle = new Rectangle(scrollMC.x,scrollMC.y,0,250);

//We want to know when the user is scrolling
var scrolling:Boolean = false;

//Listen when the user is holding the mouse down on the scrollMC
scrollMC.addEventListener(MouseEvent.MOUSE_DOWN, startScroll);

//Listen when the user releases the mouse button
stage.addEventListener(MouseEvent.MOUSE_UP, stopScroll);

//This function is called when the user is dragging the scrollMC
function startScroll(e:Event):void {

	//Set scrolling to true
	scrolling = true;

	//Start dragging the scrollMC
	scrollMC.startDrag(false,bounds);
}

//This function is called when the user stops dragging the scrollMC
function stopScroll(e:Event):void {

	//Set scrolling to false
	scrolling = false;

	//Stop the drag
	scrollMC.stopDrag();
}

//Add ENTER_FRAME to animate the scroll
addEventListener(Event.ENTER_FRAME, enterHandler);

//This function is called in each frame
function enterHandler(e:Event):void {

	//Check if we are scrolling
	if (scrolling == true) {

		//Calculate the distance how far the scrollMC is from the top
		var distance:Number = Math.round(scrollMC.y - bounds.y);

		//Calculate the percentage of the distance from the line height.
		//So when the scrollMC is on top, percentage is 0 and when its
		//at the bottom the percentage is 1.
		var percentage:Number = distance / MASK_HEIGHT;

		//Save the old y coordinate
		oldY = myContent.y;

		//Calculate a new y target coordinate for the content.
		//We subtract the mask's height from the contentHeight.
		//Otherwise the content would move too far up when we scroll down.
		//Remove the subraction to see for yourself!
		var targetY:Number = -((CONTENT_HEIGHT - MASK_HEIGHT) * percentage) + myMask.y;

		//We only want to animate the scroll if the old y is different from the new y.
		//In our movie we animate the scroll if the difference is bigger than 5 pixels.
		if (Math.abs(oldY - targetY) > 5) {

			//Tween the content to the new location.
			//Call the function tweenFinished() when the tween is complete.
			TweenMax.to(myContent, 0.3, {y: targetY, blurFilter:{blurX:22, blurY:22}, onComplete: tweenFinished});
		}
	}
}

//This function is called when the tween is finished
function tweenFinished():void {

	//Tween the content back to "normal" (= remove blur)
	TweenMax.to(myContent, 0.3, {blurFilter:{blurX:0, blurY:0}});
}