//Image Credit: http://www.flickr.com/photos/luciano_meirelles/4196173858/sizes/z/in/photostream/
package 
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;

	public final class Main extends Sprite
	{
		var frame:int = 11;
		
		public final function Main():void
		{
			img.gotoAndStop(11);
			arrows.buttonMode = true;
			addListeners();
		}
		
		private final function addListeners():void
		{
			arrows.addEventListener(MouseEvent.MOUSE_DOWN, initDrag);
			arrows.addEventListener(MouseEvent.MOUSE_UP, termDrag);
			img.addEventListener(MouseEvent.MOUSE_UP, termDrag);
		}
		
		private final function initDrag(e:MouseEvent):void
		{
			/* Change the y value (353) to the y of your "arrows" MC
			   Change the width value (300) to the width of your image drag area */
			   
			arrows.startDrag(true, new Rectangle(1, 308,290));
			stage.addEventListener(MouseEvent.MOUSE_MOVE, revealImage);
		}
		
		private final function termDrag(e:MouseEvent):void
		{
			arrows.stopDrag();
			stage.removeEventListener(MouseEvent.MOUSE_MOVE, revealImage);
		}
		
		private final function revealImage(e:MouseEvent):void
		{
			/* This is a tricky part, the default frames in the MC are 20
			   you'll need to calculate the constant according to your frames
			   and image size to reveal the image correctly */
			   
			img.gotoAndStop(Math.floor(arrows.x * 0.06));//0.07 is the constant here
		}
	}
}