Actionscript Image Panning

From Wikicliki
Jump to: navigation, search

Simple AS2 Panning script with image loaded in from exterior image files.

Not terribly complex but hey it does the job. I modded the script from kirupa's image pan to have both x and y direction mouse pan and exterior image loading.

AS 2

////////////////////////////////////
// room == filename of pic
// roomWidth == width of pic
// roomHeight == height of pic
//    
//    flashvars are defined in html
////////////////////////////////////

var filename = room+".jpg";
container.loadMovie(filename);
container._x = -100;
container._y = -100;

this.onMouseMove = function() {
	constrainedXYMove(container,4,1);
};

function constrainedXYMove(target:MovieClip, speed:Number, dir:Number) {
	var mouseXPercent:Number = _xmouse/Stage.width;
	var mouseYPercent:Number = _ymouse/Stage.height;
	
	var mxSpeed:Number;
	if (dir == 1) {
		mxSpeed = 1-mouseXPercent;
	} else {
		mxSpeed = mouseXPercent;
	}
	var mySpeed:Number;
	if (dir == 1) {
		mySpeed = 1-mouseYPercent;
	} else {
		mySpeed = mouseYPercent;
	}
	
	target.destX = Math.round(-((Stage.width-roomWidth)*mxSpeed));
	target.destY = Math.round(-((Stage.height-roomHeight)*mySpeed));
	
	target.onEnterFrame = function() {
		if (target._x == target.destX && target._y == target.destY) {
			delete target.onEnterFrame;
		} else {
			target._x -= Math.ceil((target.destX+target._x)*(speed/100));
			target._y -= Math.ceil((target.destY+target._y)*(speed/100));
		}
	};
}


HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Panning</title>
<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">
	
	body {
		background-color: #333;
	}
	#flashcontent {
		width: 300px;
		height: 300px;
		float: left;
		margin: 15px 20px;
	}

</style>
</head>
<body>

	<div id="flashcontent">
		This is replaced by the Flash content. 
		Place your alternate content here and users without the Flash plugin or with 
		Javascript turned off will see this. Content here allows you to leave out <code>noscript</code> 
		tags. Include a link to <a href="swfobject.html?detectflash=false">bypass the detection</a> if you wish.
	</div>

	<script type="text/javascript">
		// <![CDATA[
		
		var so = new SWFObject("NewPan.swf", "container", "600", "400", "9", "#000");
		so.addVariable("room", "3rd_lobby_02"); 
		so.addVariable("roomHeight", "600");
		so.addVariable("roomWidth", "903"); 
		so.write("flashcontent");
		
		// ]]>
	</script>

</body>
</html>